/* TOUMA · feuille de style. Un seul monde visuel, clair et institutionnel. */

/* =====================================================================
   LES POLICES, SERVIES D'ICI ET DE NULLE PART AILLEURS
   ---------------------------------------------------------------------
   La page appelait fonts.googleapis.com. Chaque visite faisait donc
   connaître à un tiers l'adresse IP du visiteur, y compris celle d'un
   ministère consultant son propre système énergétique.

   Manrope, variable de 400 à 800, deux sous-ensembles latins, 40 Ko.
   `font-display: swap` : le texte s'affiche tout de suite dans la
   police du système, puis bascule. Mieux vaut un texte lisible
   immédiatement qu'un blanc parfaitement typographié.

   IBM Plex Mono et Michroma ne sont plus chargées. La première servait
   à des étiquettes de quelques mots, où une monospace du système fait
   exactement le même travail ; la seconde ne servait qu'à un faux
   wordmark, qui a disparu au profit du vrai logo.

   Licence : SIL Open Font License 1.1, voir polices/LISEZMOI.txt.
   ===================================================================== */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("polices/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("polices/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  color-scheme:light;
  --ground:#F4F6F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF2F7;
  --line:#E3E8EF; --line-2:#CBD4E1;
  --ink:#14213D; --ink-2:#4B5872; --muted:#8290A6; --faint:#AEB8C9;
  --brand:#0F3D8A; --brand-2:#1F5FCC; --brand-soft:#E8EFFB; --brand-line:#B9CDF2;
  --orange:#E8791D; --orange-2:#F5A623; --orange-soft:#FDF0E4;
  --crit:#C8362B; --crit-soft:#FBEAE8; --warn:#B86E00; --warn-soft:#FFF3DF;
  --good:#157A48; --good-soft:#E5F4EC; --info:#3C5A8A; --info-soft:#EAF0F8;
  --s-grid:#2a78d6; --s-ge:#eb6834; --s-pv:#1baf7a; --s-ref:#98A2B3;
  --ui:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* La monospace du système : elle sert à des étiquettes de quelques
     mots et à des colonnes de chiffres. Charger 25 Ko pour ça, chez un
     tiers, ne se justifiait pas. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",
         "Roboto Mono",Menlo,Consolas,monospace;
  --wm:Manrope,system-ui,sans-serif;
  --r:8px; --r-s:5px;
  --sh:0 1px 2px rgba(20,33,61,.06),0 4px 14px -6px rgba(20,33,61,.10);
  --sh-2:0 12px 40px -12px rgba(20,33,61,.28);
  --tip-bg:#14213D; --tip-ink:#FFFFFF;
  --map-bg:#EAF0F7; --map-lo:220,231,245; --map-hi:15,61,138; --map-label:#4B5872; --map-osm:#0F3D8A; --map-sel:#0F3D8A;
  --logo-filter:none;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1420; --surface:#151C2A; --surface-2:#1A2232; --surface-3:#212B3D;
  --line:#27313F; --line-2:#364256;
  --ink:#E6EBF3; --ink-2:#B3BDCC; --muted:#8792A5; --faint:#5F6A7C;
  --brand:#8FB3F5; --brand-2:#9DBEFF; --brand-soft:#1B2A46; --brand-line:#2F4674;
  --orange:#F09A4A; --orange-2:#F5B36A; --orange-soft:#3A2A16;
  --crit:#F0766E; --crit-soft:#3B1F1E; --warn:#E3AC4E; --warn-soft:#3A2E14;
  --good:#4FC48C; --good-soft:#163726; --info:#93B3E3; --info-soft:#1C2A40;
  --s-grid:#3987e5; --s-ge:#d95926; --s-pv:#199e70; --s-ref:#7C8799;
  --sh:0 1px 2px rgba(0,0,0,.35),0 4px 14px -6px rgba(0,0,0,.5);
  --sh-2:0 12px 40px -12px rgba(0,0,0,.7);
  --tip-bg:#2A3446; --tip-ink:#FFFFFF;
  --map-bg:#111827; --map-lo:30,41,59; --map-hi:143,179,245; --map-label:#B3BDCC; --map-osm:#9DBEFF; --map-sel:#F5B36A;
  --logo-filter:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:13.5px;
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--brand-2)}
button{font:inherit;color:inherit}
.m,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .ink2{color:var(--ink-2)}
.hide{display:none!important}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:18px 0 14px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0 0 6px;padding:4px 18px 16px;border-bottom:1px solid var(--line)}
.brand img{width:176px;height:auto;display:block}
.brand .wm{font-family:var(--wm);font-size:15px;letter-spacing:.32em;margin-right:-.32em;color:var(--ink);line-height:1}
.brand .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:var(--muted);padding-left:2px}
.nav{display:flex;flex-direction:column;padding:6px 10px}
.nav .sec{padding:12px 10px 5px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);color:var(--ink-2);
  text-decoration:none;font-weight:500;font-size:13px;position:relative}
.nav a:hover{background:var(--surface-3);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav a .ic{width:16px;height:16px;flex:0 0 16px;opacity:.75}
.nav a[aria-current="page"] .ic{opacity:1}
.nav a .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--surface-3);
  padding:1px 6px;border-radius:9px}
.nav a[aria-current="page"] .cnt{background:var(--surface);color:var(--brand)}
.nav a .cnt.crit{background:var(--crit-soft);color:var(--crit)}
.railfoot{margin-top:auto;padding:12px 18px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.8}
.railfoot b{color:var(--ink-2);font-weight:500}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 24px;position:sticky;top:0;z-index:20}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:600}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;width:300px;color:var(--muted);cursor:text;font-size:12.5px}
.search kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px}
.btn.theme{padding:6px 8px;color:var(--ink-2)}
.btn.theme .moon{display:none}
:root[data-theme="dark"] .btn.theme .sun{display:none}
:root[data-theme="dark"] .btn.theme .moon{display:inline}
.search:hover{border-color:var(--line-2)}
.content{padding:24px 28px 48px;max-width:1440px;width:100%}
.demo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--warn);background:var(--warn-soft);border:1px solid #F1D9A6;border-radius:4px;padding:3px 8px}

/* ---- page header ---- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ph h1{font-size:20px}
.ph .sub{color:var(--muted);margin-top:3px;font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:12.5px;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#0C337A}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand-2)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.sm{padding:4px 9px;font-size:11.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand)}

/* ---- KPI band ---- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);margin-bottom:18px;overflow:hidden}
.kpi{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border-right:0}
.kpi .v{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:8px;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.kpi .v small{font-size:12px;color:var(--muted);margin-left:4px;font-weight:400}
.kpi .d{font-size:11.5px;color:var(--muted);margin-top:6px}
.kpi.good .v{color:var(--good)} .kpi.warn .v{color:var(--warn)} .kpi.crit .v{color:var(--crit)} .kpi.brand .v{color:var(--brand)}

/* ---- cards & grids ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);min-width:0}
.card>.hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card>.hd h3{font-size:13.5px}
.card>.hd .r{font-size:11.5px;color:var(--muted)}
.card>.bd{padding:16px 18px}
.card>.bd.tight{padding:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g21{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.g12{display:grid;grid-template-columns:1fr 1.6fr;gap:16px}
.mt{margin-top:16px}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface-2)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.r{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tr.link{cursor:pointer}
.tbl .name{font-weight:600;color:var(--ink)}
.tbl .sub{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort[data-dir="asc"]::after{content:" \2191"} .tbl th.sort[data-dir="desc"]::after{content:" \2193"}
.tw{overflow-x:auto}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.filters input[type=search]{font:inherit;padding:6px 10px;border:1px solid var(--line-2);border-radius:6px;min-width:220px;background:var(--surface);color:var(--ink)}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:14px;padding:3px 10px;font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---- status ---- */
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;font-weight:500}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.normal{color:var(--good);background:var(--good-soft)}
.st.surveiller{color:var(--warn);background:var(--warn-soft)}
.st.prioritaire{color:var(--crit);background:var(--crit-soft)}
.st.info{color:var(--info);background:var(--info-soft)}
.st.brand{color:var(--brand);background:var(--brand-soft)}
.st.neutral{color:var(--ink-2);background:var(--surface-3)}
.sev{display:inline-block;width:3px;align-self:stretch;border-radius:2px}
.sev.critique{background:var(--crit)} .sev.attention{background:var(--warn)} .sev.info{background:var(--info)}
.q{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:1px}
.q.mesure,.q.facture{background:var(--good)} .q.importe{background:#3FA36B} .q.declare{background:#6E9BD8}
.q.estime{background:var(--orange-2)} .q.manquant{background:var(--crit)}
.conf{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.conf i{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--surface-3);position:relative;overflow:hidden}
.conf i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--brand-2);border-radius:3px}
.conf.low i::after{background:var(--warn)}

/* ---- alerts ---- */
.alert{display:grid;grid-template-columns:3px 1fr auto;gap:0 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px 14px 14px;box-shadow:var(--sh)}
.alert .t{font-weight:700;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alert .t .who{font-weight:500;color:var(--muted);font-size:12px}
.alert .vu{margin-top:6px;color:var(--ink);font-size:12.5px}
.alert .why{margin-top:4px;color:var(--ink-2);font-size:12px}
.alert .act{margin-top:8px;font-size:12px;color:var(--brand);font-weight:600}
.alert .side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:150px}
.alert .imp{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--ink)}
.alert .imp small{display:block;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:400}

/* ---- building sheet ---- */
.sheet-hd{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.sheet-hd h1{font-size:22px}
.sheet-hd .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin-top:5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh)}
/* Le nombre de faits varie selon ce que Touma sait du batiment : une grille
   fixe a 4 laissait le cinquieme seul sur sa ligne. Les separateurs suivent
   donc le flux au lieu d'etre poses sur le dernier element. */
.fact{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts>.fact:last-child{border-right:0}
.fact .v{font-family:var(--mono);font-size:22px;font-weight:500;margin-top:6px;letter-spacing:-.02em}
.fact .v small{font-size:11px;color:var(--muted);font-weight:400;margin-left:3px}
.fact .d{font-size:11.5px;color:var(--muted);margin-top:4px}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:12.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.kv dd.al{color:var(--crit)}
.detect{border-left:3px solid var(--line-2);padding:8px 12px;border-radius:0 6px 6px 0;background:var(--surface-2);margin-bottom:8px;font-size:12.5px}
.detect.critique{border-color:var(--crit);background:var(--crit-soft)}
.detect.attention{border-color:var(--warn);background:var(--warn-soft)}
.detect.info{border-color:var(--info);background:var(--info-soft)}
.detect.good{border-color:var(--good);background:var(--good-soft)}
.detect b{display:block;margin-bottom:2px}
.timeline{list-style:none;margin:0;padding:0;font-size:12.5px}
.timeline li{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border:0}
.timeline .ym{font-family:var(--mono);color:var(--muted);font-size:11px}

/* ---- kanban ---- */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px}
.col{background:var(--surface-3);border-radius:var(--r);padding:8px;min-height:120px}
.col .ch{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.col .ch .n{font-family:var(--mono);font-weight:400;color:var(--muted)}
.tk{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 10px;margin-bottom:8px;box-shadow:var(--sh);font-size:12px}
.tk .t{font-weight:600;line-height:1.3}
.tk .b{color:var(--muted);font-family:var(--mono);font-size:10.5px;margin-top:3px}
.tk .r{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.tk .btns{display:flex;gap:6px;margin-top:8px}

/* ---- forms ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{font:inherit;font-size:13px;color:var(--ink);padding:7px 9px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface)}
.field input:focus,.field select:focus{border-color:var(--brand-2);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}
.field small{color:var(--muted);font-size:11px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line-2);border-radius:2px;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid #fff;cursor:pointer}
.pnum{display:flex;align-items:center;gap:8px}
.pnum input[type=number]{width:110px;font-family:var(--mono);font-size:13px;padding:6px 8px;border:1px solid var(--line-2);border-radius:6px;text-align:right;background:var(--surface);color:var(--ink)}

/* ---- modal / palette ---- */
.overlay{position:fixed;inset:0;background:rgba(20,33,61,.32);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh}
.modal{background:var(--surface);border-radius:10px;box-shadow:var(--sh-2);width:min(640px,92vw);max-height:78vh;overflow:auto;border:1px solid var(--line)}
.modal .mh{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .mh h3{font-size:14px}
.modal .mb{padding:18px}
.modal .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.pal input{width:100%;font:inherit;font-size:15px;padding:14px 18px;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--ink)}
.pal ul{list-style:none;margin:0;padding:6px}
.pal li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px}
.pal li .k{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;width:78px;flex:0 0 78px}
.pal li[aria-selected="true"],.pal li:hover{background:var(--brand-soft);color:var(--brand)}
.pal li .id{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---- charts ---- */
svg.ch{display:block;width:100%;height:auto;overflow:visible;font-family:var(--mono)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);padding:10px 18px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:3px;border-radius:2px;display:inline-block}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--s-ref) 0 3px,transparent 3px 6px)}
#tip{position:fixed;pointer-events:none;opacity:0;transition:opacity .1s;background:var(--tip-bg);color:var(--tip-ink);padding:8px 11px;
  border-radius:6px;font-family:var(--mono);font-size:11px;line-height:1.6;z-index:99;white-space:nowrap;box-shadow:var(--sh-2)}
#tip b{color:#fff;font-weight:600}
.spark{vertical-align:middle}

/* ---- callouts ---- */
.note{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.note b{color:var(--ink)}
.note p+p{margin-top:8px}
.callout{border-radius:var(--r);padding:12px 14px;font-size:12.5px;line-height:1.6;border:1px solid}
.callout.brand{background:var(--brand-soft);border-color:var(--brand-line);color:var(--ink)}
.callout.warn{background:var(--warn-soft);border-color:#F1D9A6}
.callout.crit{background:var(--crit-soft);border-color:#F0BDB8}
.callout.good{background:var(--good-soft);border-color:#B9E1C9}
.callout b{color:var(--ink)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button{border:0;background:transparent;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:12.5px}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.formula{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;color:var(--ink);white-space:pre-wrap;line-height:1.7}
.qgrid{display:grid;grid-template-columns:auto repeat(12,1fr);gap:3px;align-items:center;font-size:11px}
.qgrid .lb{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);padding-right:8px;white-space:nowrap}
.qgrid .c{height:16px;border-radius:3px}
.qgrid .c.facture,.qgrid .c.mesure{background:#CFE9DA} .qgrid .c.declare{background:#D6E4F7} .qgrid .c.estime{background:#FCE3C3} .qgrid .c.manquant{background:#F5C6C2}
.qgrid .hd{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center}

/* ---- report document ---- */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 40px;max-width:860px;box-shadow:var(--sh);font-size:13px;line-height:1.6}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--brand);padding-bottom:12px;margin-bottom:18px}
.doc h2{font-size:18px;color:var(--brand)}
.doc h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-family:var(--mono);font-weight:500}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px}
.doc td{padding:6px 0;border-bottom:1px solid var(--line)}
.doc td.r{text-align:right;font-family:var(--mono)}
.doc .sig{margin-top:26px;display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}

.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}
@media print{
  .rail,.topbar,.actions,.demo,#tip{display:none!important}
  .shell{display:block} .content{padding:0;max-width:none}
  body{background:#fff} .doc{border:0;box-shadow:none;padding:0}
}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)} .kpi:nth-child(3n){border-right:0} .kpi{border-bottom:1px solid var(--line)}
  .g21,.g12,.g3{grid-template-columns:1fr 1fr} .facts{grid-template-columns:repeat(2,1fr)} .fact:nth-child(2n){border-right:0}}
@media (max-width:900px){.shell{grid-template-columns:1fr} .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px}
  .brand{border:0;padding:6px 10px;margin:0} .brand img{width:130px} .nav{flex-direction:row;flex-wrap:wrap} .nav .sec,.railfoot{display:none}
  .g2,.g3,.g21,.g12{grid-template-columns:1fr} .search{width:auto;flex:1} .kpis{grid-template-columns:1fr 1fr} .content{padding:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- recensement satellite ---- */
.map-wrap{position:relative;background:var(--map-bg);border-radius:6px;overflow:hidden}
.map-ctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.map-ctl button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;font-family:var(--mono);font-size:15px;color:var(--ink);box-shadow:var(--sh)}
.map-ctl button:hover{background:var(--surface-2)}
.map-hint{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface);padding:2px 7px;border-radius:4px;opacity:.9}
.map-wrap canvas{display:block;width:100%;height:auto}
.map-legend{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-2);padding:10px 0 0}
.map-legend i{display:inline-block;width:38px;height:8px;border-radius:2px;background:linear-gradient(90deg,#DCE7F5,#0F3D8A)}
.map-legend b{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.bill-res{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.bill-res .f{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.bill-res .f .lab{margin-bottom:4px}
.bill-res .f input{width:100%;font-family:var(--mono);font-size:13px;padding:5px 7px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);color:var(--ink)}

.sel-panel{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:8px;padding:12px 14px}
.sel-panel .code{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--brand)}
.copy{all:unset;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-2);padding:2px 6px;border:1px solid var(--brand-line);border-radius:4px;margin-left:6px;background:var(--surface)}
.copy:hover{background:var(--brand-soft)}
.geo-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.geo-search input{font:inherit;font-family:var(--mono);font-size:12.5px;padding:7px 10px;border:1px solid var(--line-2);border-radius:6px;min-width:260px;background:var(--surface);color:var(--ink)}

:root[data-theme="dark"] .qgrid .c.facture,:root[data-theme="dark"] .qgrid .c.mesure{background:#1F4A34} :root[data-theme="dark"] .qgrid .c.declare{background:#22375A} :root[data-theme="dark"] .qgrid .c.estime{background:#5A3D14} :root[data-theme="dark"] .qgrid .c.manquant{background:#5A2220}
:root[data-theme="dark"] .brand img{filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}
:root[data-theme="dark"] .demo{border-color:#5A4A1E}

.rolebox{display:flex;align-items:center;gap:8px;margin-left:12px}
.rolebox select{font:inherit;font-size:12.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:6px;padding:5px 8px}
.big-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.big-form .field input,.big-form .field select{font-size:18px;padding:12px 14px;font-family:var(--mono)}
.big-form .field span{font-size:13px;font-weight:600;color:var(--ink)}
.btn.xl{font-size:15px;padding:12px 20px;border-radius:8px}
.list{display:flex;flex-direction:column;gap:8px}
.list .it{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer;box-shadow:var(--sh)}
.list .it:hover{border-color:var(--brand-line)}
.list .it .t{font-weight:600;font-size:14px}
.list .it .s{color:var(--muted);font-family:var(--mono);font-size:11px;margin-top:2px}
.hits{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:4px;background:var(--surface-2)}
.hits button{all:unset;cursor:pointer;padding:6px 8px;border-radius:5px;font-size:12.5px;display:flex;justify-content:space-between;gap:10px}
.hits button:hover{background:var(--brand-soft)}
.hits button .m{color:var(--muted);font-size:11px}
@media (max-width:900px){.big-form{grid-template-columns:1fr}}

/* v1.4.1 : les formulaires en fenetre ne debordent plus */
.modal{overflow-x:hidden}
.modal .form .field{min-width:0}
.modal .field input,.modal .field select{max-width:100%;min-width:0;width:100%}

/* v1.5 lot 1 */
.brand a{display:block}
.neutre{min-height:calc(100vh - 54px);display:grid;place-items:center;background:var(--surface)}
.neutre img{width:min(560px,70vw);height:auto}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.bcard{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface);cursor:pointer;box-shadow:var(--sh)}
.bcard:hover{border-color:var(--brand-line)}
.bcard .bh{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.bcard .t{font-weight:700;line-height:1.3}
.bcard .s{color:var(--muted);font-size:11.5px;margin-top:2px}
.bcard .bn{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.bcard .bn .v{font-family:var(--mono);font-size:16px;margin-top:2px;white-space:nowrap}
.bcard .bn small{font-size:10px;color:var(--muted);margin-left:3px}
.bcard .bp{margin-top:10px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:8px;line-height:1.45}

/* lot 2 : calibration */
.rep{display:grid;grid-template-columns:130px 1fr 92px;gap:10px;align-items:center;margin-bottom:8px;font-size:12.5px}
.rep .rb{position:relative;height:12px;background:var(--surface-3);border-radius:6px}
.rep .rb i{position:absolute;top:0;bottom:0;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:6px}
.rep .rb b{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1px;background:var(--brand);border-radius:2px}
.rep .rv{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap}
.rep .rv small{display:block;font-size:10px;color:var(--muted)}


/* ================= v1.6 ================= */
:root{--i-ngz:#2457C5;--i-ndz:#E07A1F;--i-mwl:#1B9E77;--s-bat:#7A5AF8;--s-cut:#9AA4B5}
:root[data-theme="dark"]{--i-ngz:#5B8DEF;--i-ndz:#F09A4A;--i-mwl:#3CBF94;--s-bat:#9D8BFF;--s-cut:#6F7A8C}
.neutre img{width:auto;max-width:100%}
/* v1.13 : page d'accueil */
.acc{display:grid;justify-items:center;gap:0;text-align:center;padding:0 24px}
.acc-logo{width:min(520px,72vw);height:auto;display:block}
.acc-def{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.acc-pays{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.acc-btn{margin-top:14px;min-width:190px;justify-content:center}
.st.theorique{color:var(--brand);background:var(--brand-soft)}
.st.attention{color:var(--warn);background:var(--warn-soft)}
.kpis.k8 .kpi .v{font-size:22px}
.kpi .v{font-size:24px}
@media (max-width:1400px){.kpis[style*="repeat(8"]{grid-template-columns:repeat(4,1fr)!important} .kpis[style*="repeat(6"]{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:900px){.kpis[style*="repeat("]{grid-template-columns:1fr 1fr!important}}
.bar{display:inline-block;width:84px;height:8px;background:var(--surface-3);border-radius:4px;vertical-align:middle;margin-right:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand-2);border-radius:4px}
/* programmes */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:16px}
.pcard{padding:18px 20px}
.pcard .ph2{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pcard h3{font-size:14.5px;margin-top:3px}
.money{margin:14px 0 10px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.money .big{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.money .conv{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px}
.dev{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:3px 7px;border-radius:4px;font-weight:600}
.dev.usd{background:#E3EDFB;color:#1F4FA8} .dev.eur{background:#E1F3E9;color:#137046} .dev.aed{background:#FDEBD6;color:#B25A0E} .dev.nat{background:#EEE7FB;color:#5A3FB8}
:root[data-theme="dark"] .dev.usd{background:#1D2F4E;color:#9DBEFF} :root[data-theme="dark"] .dev.eur{background:#173726;color:#4FC48C} :root[data-theme="dark"] .dev.aed{background:#3A2A16;color:#F5B36A} :root[data-theme="dark"] .dev.nat{background:#2B2450;color:#B9A9FF}
.objf{font-size:13px;line-height:1.45}
.objf .lab{margin-bottom:3px}
.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.cycle .cs{border-top:3px solid var(--line-2);padding-top:6px;min-width:0}
.cycle .cs.on{border-top-color:var(--good)}
.cycle .cs i{display:none}
.cycle .cs span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cycle .cs b{display:block;font-size:11.5px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cycle .cs b.muted{font-weight:400}
.obj{display:grid;grid-template-columns:1fr 100px 130px;gap:10px;align-items:center;font-size:12px;margin-bottom:6px}
.obj .bar{width:100%;margin:0} .obj .bar i{background:var(--good)}
.obj .ov{text-align:right;font-size:11.5px;white-space:nowrap}
.pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px}
/* niveau de donnee */
.ladder{display:flex;flex-direction:column;gap:8px}
.rung{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);opacity:.55}
.rung.on{opacity:1;border-color:var(--brand-line);background:var(--brand-soft)}
.rung i{font-style:normal;font-family:var(--mono);font-size:12px;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 24px;color:var(--ink-2)}
.rung.on i{background:var(--brand);border-color:var(--brand);color:#fff}
.rung b{display:block;font-size:13px} .rung span{font-size:11.5px;color:var(--ink-2)}
/* rapports */
.doc .dt{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
.doc .dt th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--line-2)}
.doc .dt th.r{text-align:right}
.doc .dt td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.doc .dt td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.doc .dt td:first-child{font-weight:600}
.doc h4{margin-top:22px}
/* topbar : selecteur d'ile masque sur les pages nationales */
.rolebox[hidden]{display:none}
.tbl td .st{vertical-align:middle}
.tbl.wide{min-width:1100px}
.tbl td .sub{max-width:260px;white-space:normal}

/* v1.6.1 */
.sec-t{display:flex;align-items:baseline;gap:12px;margin:22px 0 10px}
.sec-t span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:600}
.sec-t small{font-size:11.5px;color:var(--muted)}
.sec-t:first-child{margin-top:0}
.bilan{display:flex;flex-direction:column;gap:10px}
.bl{display:grid;grid-template-columns:minmax(80px,110px) 90px minmax(40px,1fr) 52px;gap:10px;align-items:center;font-size:13px;min-width:0}
.bl .bv{font-size:14px;font-weight:500;text-align:right}
.bl .bb{height:12px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.bl .bb i{display:block;height:100%;border-radius:6px}
.bl .bp{text-align:right;color:var(--ink-2)}
.sortbox{display:flex;align-items:center;gap:8px;margin-left:auto}
.sortbox select{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink)}
/* rapport : indicateurs en lignes, aucune colonne qui deborde */
.doc{max-width:900px;overflow-wrap:anywhere}
.doc .dh{align-items:flex-end}
.doc .dmeta{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:6px 18px;text-align:left}
.doc .dmeta div{display:flex;flex-direction:column;gap:2px}
.doc .dmeta b{font-size:12px;font-weight:600}
.doc .dsec{margin-top:18px}
.doc .dlect{font-size:13px;color:var(--ink);margin:0 0 8px;line-height:1.55}
.doc .di{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:4px 14px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:12.5px}
.doc .di .dl{font-weight:600;color:var(--ink)}
.doc .di .dv{text-align:right;font-size:13px;color:var(--ink)}
.doc .di .du{font-size:11.5px;color:var(--ink-2)}
.doc .di .ds{font-size:11px;color:var(--muted);text-align:right}
.doc .dlist{margin-top:6px}
.doc .dlist .di{padding:5px 0;font-size:12px}
@media (max-width:700px){.doc .di{grid-template-columns:1fr 1fr}.doc .di .ds{text-align:left}}
@media print{.doc{max-width:none}}
@media (max-width:1300px){.form[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important} .form[style*="repeat(6"]{grid-template-columns:repeat(3,1fr)!important}}

/* 1.7 : alertes en lot, carte par usage */
.bulkbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:12px}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}
.chk input{width:15px;height:15px;accent-color:var(--brand);margin:0}
.alert.sel{border-color:var(--brand-line);background:var(--brand-soft)}
.map-legend span{display:inline-flex;align-items:center;gap:5px}
.sel-sm{font:inherit;font-size:11.5px;padding:3px 8px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink-2)}
.hd .chipset{margin-left:8px}

/* 1.7.2 : passeport energetique */
.hd .st{margin-left:auto}
.field span .muted{font-weight:400}

/* 1.10 : le shell s efface entierement derriere le portail */
.shell.connexion{grid-template-columns:1fr}
.shell.connexion .rail,.shell.connexion .topbar{display:none}
.shell.connexion .content{padding:0;max-width:none}
.sesnom{font-size:12.5px;font-weight:600;color:var(--brand)}
#sessionbox{gap:10px}

/* v1.16 : echelle de connaissance du parc */
.ech{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin-bottom:14px}
.ech-b{display:block;min-width:3px;border-radius:2px}
.ech-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px 18px}
.ech-i{display:flex;gap:8px;align-items:flex-start}
.ech-p{width:9px;height:9px;border-radius:2px;margin-top:4px;flex:0 0 auto}
.ech-n{font-size:12.5px;font-weight:600}
.ech-n b{margin-left:4px;font-family:var(--mono);font-weight:700}
.ech-d{font-size:11.5px;color:var(--ink-2);line-height:1.45}
.niv-bat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.niv-pas{display:flex;gap:3px}
.niv-p{width:22px;height:5px;border-radius:2px;background:var(--line)}
.niv-p.on{background:var(--brand)}
.niv-t{font-size:12px;color:var(--ink-2)}


/* v2 : fil d ariane geographique */
.filgeo{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.filgeo .fg{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.filgeo a.fg:hover{color:var(--brand);border-bottom-color:var(--brand-line)}
.fsep{color:var(--muted);margin:0 7px;font-size:11px}

/* v2 : le passeport du pays, en tete de la page du pays */
.pass-pays{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--sh);padding:20px 22px;margin-bottom:18px}
.pp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pp-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pp-nom{font-size:27px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.pp-date{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;border-top:1px solid var(--line);padding-top:16px}
.pp-v{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pp-v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.pp-d{font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
@media (max-width:700px){.pp-nom{font-size:22px}.pp-v{font-size:21px}}

/* v2 : ce qui appelle une decision */
.jour{display:grid;gap:2px}
.jour-l{display:flex;align-items:center;gap:10px;padding:9px 4px;text-decoration:none;color:inherit;font-size:13px;border-bottom:1px solid var(--line)}
.jour-l:last-child{border-bottom:0}
.jour-l:hover{color:var(--brand)}
.jour-p{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.jour-l.crit .jour-p{background:var(--crit)}
.jour-l.warn .jour-p{background:var(--warn)}
.jour-l.info .jour-p{background:var(--brand)}

/* D'où vient ce chiffre : la marque cliquable posée à côté d'un libellé, et la
   fenêtre de provenance. Discrète au repos, franche au survol : elle ne doit pas
   concurrencer le chiffre, mais se laisser trouver quand on la cherche. */
.dou{border:1px solid var(--line);background:transparent;color:var(--muted);
  width:16px;height:16px;line-height:14px;border-radius:50%;font-size:11px;
  padding:0;margin-left:5px;cursor:pointer;vertical-align:middle;font-weight:700}
.dou:hover,.dou:focus{background:var(--brand);border-color:var(--brand);color:#fff;outline:none}
.puces{margin:0;padding-left:18px}
.puces li{margin:5px 0;line-height:1.45}

/* La derniere rangee de faits ne porte pas de trait sous elle : le cadre de la
   carte le fait deja. On le retire pour les cinq dernieres positions possibles,
   ce qui couvre toutes les largeurs rendues par auto-fit. */
.facts>.fact:nth-last-child(-n+1){border-bottom:0}
@media(min-width:760px){.facts>.fact:nth-last-child(-n+2){border-bottom:0}}
@media(min-width:1100px){.facts>.fact:nth-last-child(-n+4){border-bottom:0}}

/* =====================================================================
   LE PORTAIL, la porte d'entrée nationale
   ---------------------------------------------------------------------
   LA COMPOSITION

   Un conteneur centré, pas deux moitiés d'écran. La version d'avant
   collait le panneau au bord droit : sur un écran large, il flottait
   seul, à un mètre de la planète, et on voyait deux objets au lieu
   d'une scène. Ici, une grille de 1480 pixels au plus, centrée, avec
   une gouttière : le globe et le panneau appartiennent à la même
   composition.

   L'ordre de lecture est posé par le HTML et tenu par la mise en page :
   la marque, le message, la planète, puis l'accès.

   LE THÈME N'EST PAS UN FOND INVERSÉ

   Les variables `--scene-*` décrivent l'ambiance de la planète : océan,
   terres, grain, grille, limbe, auréole, ombre. `scene.js` les relit à
   chaque changement de thème, et seulement là. Clair = un globe de
   jour, institutionnel. Sombre = un globe de nuit, où les territoires
   servis respirent.
   ===================================================================== */

/* --------------------------------------------------------------- LE JOUR
   Les terres sont CLAIRES sur un océan bleu. C'est la convention des
   cartes physiques, et surtout c'est le seul contraste qui tienne : des
   terres foncées sur un océan clair donnaient deux gris qu'on ne
   distinguait qu'en plissant les yeux. */
:root{
  --pt-fond:radial-gradient(1200px 820px at 26% 22%, #FBFCFE 0%, #F2F5FA 46%, #E9EEF6 100%);

  /* LA TERRE DE JOUR. Trois bleus, pas un : l'eau peu profonde des
     plateaux continentaux, le large, et le fond des bassins. Un seul
     bleu donne un disque de papier ; trois donnent de l'eau. */
  --scene-ocean-1:#BCD6F2;
  --scene-ocean-1b:#93B6E0;
  --scene-ocean-2:#5A86BE;
  --scene-creux:rgba(18,48,102,.26);
  --scene-reflet:rgba(255,255,255,.26);
  /* L'aureole de jour : deux arrets, pour qu'elle ne soit pas un simple
     flou mais une atmosphere qui s'epaissit au ras de la surface. */
  --scene-halo-2:rgba(120,175,240,.10);
  --scene-terre:#F4F8FC;
  --scene-terre-bord:#5F80AA;
  --scene-grain:96,128,170;
  --scene-grain-a:.24;
  --scene-grille:rgba(60,95,150,.11);
  --scene-limbe:rgba(40,95,175,.34);
  --scene-halo:rgba(96,150,228,.24);
  --scene-ombre:rgba(10,28,64,.34);
  --scene-point:#6E84A2;
  /* Les frontières : un demi-pixel très transparent. On les distingue
     quand on les cherche, la planète ne devient pas une carte
     politique. */
  /* LES DELIMITATIONS DOIVENT SE LIRE.

     Le trait etait a 0,34 d'opacite : distinguable quand on le cherche,
     invisible quand on parcourt. Or c'est ce trait qui permet de
     reconnaitre un pays africain sans le selectionner, ce qui est tout
     l'objet de cet ecran. On le monte, sans pour autant transformer la
     planete en carte politique. */
  --scene-frontiere:rgba(56,92,146,.50);
  --scene-survol-fond:rgba(232,121,29,.20);
  --scene-survol-trait:rgba(214,104,18,.75);
  --scene-choisi-fond:rgba(232,121,29,.30);
  --scene-nom:#16243C;
  --scene-nom-fond:rgba(255,255,255,.90);
  --scene-nuit:0;

  /* Le wordmark est chromé : clair sur clair, il s'efface. Une ombre
     très courte le détache du fond sans toucher à la marque. */
  /* Le wordmark est chromé : clair sur clair, il disparaît. Deux ombres
     courtes le détachent du fond sans toucher à la marque, l'une pour le
     contour, l'autre pour l'assise. */
  /* TROIS OMBRES, ET AUCUNE NE TOUCHE AU DESSIN.

     Le wordmark est chrome : clair, avec des degrades pales. Sur un fond
     presque blanc il est au bord de l'invisible, et l'agrandir n'y change
     rien -- c'est un probleme de contraste, pas de taille. Le retoucher
     serait modifier la marque, ce qui est interdit.

     Alors on l'entoure. Un liseré serré qui redonne un bord aux lettres,
     une ombre courte qui les pose, une ombre longue et tres douce qui
     detache l'ensemble du fond. La marque elle-meme est intacte : c'est
     le meme fichier, avec de l'air autour. */
  --pt-logo-ombre:drop-shadow(0 0 .9px rgba(20,33,61,.66))
                  drop-shadow(0 1px 1.5px rgba(20,33,61,.34))
                  drop-shadow(0 6px 16px rgba(20,33,61,.16));
  --pt-encre-btn:#FFFFFF;
  --pt-barre-fond:rgba(255,255,255,.72);
  --pt-barre-bord:rgba(20,33,61,.10);
  /* OPAQUE, PAS PRESQUE OPAQUE.

     A 97 %, la planete transparaissait encore de 3 % sous le wordmark.
     C'est peu, et c'etait suffisant : le logo Touma est chrome, donc
     clair, et 3 % de terres pales derriere lui suffisaient a le dissoudre
     -- on ne lisait plus que le T orange. Le premier arret du degrade est
     maintenant la couleur de fond de page, pleine. La ou le voile est
     plein, le logo est exactement dans les conditions ou il a ete dessine.
     Le degrade s'eteint ensuite sur une longue distance, donc rien ne se
     voit du raccord. */
  --pt-halo-texte:0 0 14px #F7FAFD, 0 0 5px rgba(247,250,253,.92);
  --pt-voile-1:#F7FAFD;
  --pt-voile-2:rgba(247,250,253,.55);
}

/* --------------------------------------------------------------- LA NUIT
   Océan presque noir, terres bleutées, grain lumineux : la planète est
   vue de l'espace, pas dans un thème sombre. */
:root[data-theme="dark"]{
  --pt-fond:radial-gradient(1200px 820px at 26% 22%, #141E31 0%, #0C1322 50%, #070B13 100%);

  /* LA TERRE DE NUIT. L'océan tire vers le noir au bord, les terres
     restent bleutées et lisibles, et le reflet de la lumière rasante
     reste : c'est lui qui dit que la surface est courbe. */
  --scene-ocean-1:#17314F;
  --scene-ocean-1b:#0D1D33;
  --scene-ocean-2:#040911;
  --scene-creux:rgba(0,0,0,.42);
  --scene-reflet:rgba(120,180,255,.13);
  --scene-halo-2:rgba(70,140,250,.12);
  /* De nuit, les voiles sont a peine la : trop de blanc sur une Terre
     nocturne, et ce n'est plus une planete, c'est du brouillard. */
  --scene-terre:#22405F;
  --scene-terre-bord:#5C8ABE;
  --scene-grain:150,200,255;
  --scene-grain-a:.34;
  --scene-grille:rgba(150,195,255,.08);
  --scene-limbe:rgba(126,186,255,.46);
  --scene-halo:rgba(58,124,235,.30);
  --scene-ombre:rgba(0,0,0,.58);
  --scene-point:#7891B2;
  --scene-frontiere:rgba(150,192,240,.38);
  --scene-survol-fond:rgba(245,166,35,.22);
  --scene-survol-trait:rgba(245,166,35,.72);
  --scene-choisi-fond:rgba(245,166,35,.32);
  --scene-nom:#EAF1FA;
  --scene-nom-fond:rgba(10,18,32,.88);
  --scene-nuit:1;

  --pt-logo-ombre:none;
  --pt-encre-btn:#0A111C;
  --pt-barre-fond:rgba(21,28,42,.66);
  --pt-barre-bord:rgba(160,190,235,.12);
  --pt-halo-texte:0 0 16px #0A111D, 0 0 6px rgba(10,17,29,.95);
  --pt-voile-1:#0A111D;
  --pt-voile-2:rgba(10,17,29,.52);
}

/* ===================================================================== */
.pt{position:relative;min-height:100vh;min-height:100dvh;background:var(--pt-fond);overflow:hidden}

/* ------------------------------------------------------- CONTRÔLES GLOBAUX
   Langue et thème appartiennent à la plateforme, pas au panneau. Sous la
   carte, ils passaient pour des options du formulaire et on ne les
   voyait pas. En haut à droite de la PAGE, ils sont à leur place. */
.pt-barre{
  position:absolute;top:clamp(16px,2.2vw,28px);right:clamp(16px,2.6vw,40px);
  z-index:5;display:flex;align-items:center;gap:10px;
}
.pt-langues{
  display:flex;padding:3px;gap:2px;border-radius:9px;
  background:var(--pt-barre-fond);border:1px solid var(--pt-barre-bord);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pt-langues button{
  min-width:34px;padding:5px 9px;border:0;border-radius:6px;background:none;
  font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);cursor:pointer;transition:color .14s ease, background .14s ease;
}
.pt-langues button:hover{color:var(--ink-2)}
.pt-langues button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:500}
:root[data-theme="dark"] .pt-langues button[aria-pressed="true"]{background:var(--surface-3)}
.pt-theme{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--pt-barre-fond);border:1px solid var(--pt-barre-bord);
  color:var(--muted);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .14s ease;
}
.pt-theme:hover{color:var(--ink)}

/* ------------------------------------------------------------- LE CADRE */
/* TROIS ZONES, UNE SEULE COMPOSITION.

     gauche   la marque et le message
     centre   la planète, dominante
     droite   l'accès

   La grille n'en déclare que DEUX, et c'est volontaire : la planète
   n'est pas une colonne, c'est le cœur de la scène. Lui donner une
   colonne reviendrait à lui allouer un tiers de la largeur, donc à la
   rapetisser pour la ranger.

   L'ARITHMÉTIQUE DIT QU'IL DOIT Y AVOIR CHEVAUCHEMENT, ET C'EST TANT
   MIEUX.

   À 1920, il reste 1518 pixels utiles entre les marges. Un message de
   440, une planète de 840 et un panneau de 430 en demandent 1710 : cent
   quatre-vingt-douze de trop. Aucun réglage ne fera tenir les trois
   côte à côte sans rapetisser la planète, ce qui est exactement ce
   qu'on ne veut pas.

   Le message passe donc DEVANT la planète, comme sur toute composition
   de ce genre. Ce qui doit être juste, ce n'est pas l'absence de
   recouvrement, c'est la lisibilité du texte et la visibilité de la
   Terre : voir `.pt-scene::before`. */
.pt-cadre{
  /* LES TROIS ZONES PRENNENT TOUTE LA LARGEUR DISPONIBLE.

     Mesuré à 1920 avant : le bloc Touma commençait à 218 px du bord et
     le panneau s'arrêtait à 218 px de l'autre. C'était équilibré, et
     c'était trop timide : les deux extrémités flottaient vers le centre
     et la planète n'avait pas la place d'être imposante.

     Conteneur élargi à 1720, marges latérales réduites : le bloc
     commence à 164, le panneau s'arrête à 164. Cinquante-quatre pixels
     gagnés de chaque côté, et cent huit rendus à la scène.

     164 px reste une VRAIE marge : le panneau n'est pas collé au bord,
     il en est à plus de huit pour cent de la largeur. */
  max-width:1800px;margin:0 auto;min-height:100dvh;
  padding:clamp(44px,4.6vh,76px) clamp(20px,3vw,56px) clamp(24px,3.4vh,48px);
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(390px,25vw,430px);
  gap:clamp(20px,2.2vw,50px);
  align-items:center;
}

/* ------------------------------------------------------------- LA SCÈNE
   Deux rangées : le bloc éditorial, puis la planète qui prend ce qui
   reste. Sur un écran bas, c'est la planète qui rétrécit, pas le
   message. */
/* LA PLANÈTE EST LE FOND DE LA SCÈNE, PAS UNE RANGÉE EN DESSOUS.

   Premier essai : deux rangées, le texte puis le globe. À 1440 par 900,
   il restait deux cent quatre-vingt-dix pixels de hauteur au globe, qui
   faisait donc deux cent quarante pixels de diamètre dans une zone de
   huit cents de large. Ce n'était plus une scène, c'était une vignette.

   Ici la planète occupe toute la scène, déborde par la droite et par le
   bas, et le texte passe devant. Elle est grande parce qu'elle n'a plus
   à partager la hauteur avec quoi que ce soit. */
.pt-scene{position:relative;min-height:clamp(420px,78vh,940px);
  display:flex;align-items:center}

/* LE VOILE : UNE ATMOSPHÈRE, PLUS UNE PLAQUE.

   Il était une ellipse opaque posée sur la boîte de texte. C'était le
   bon outil quand la planète n'était qu'un fond atténué. Depuis que la
   Terre est texturée et qu'elle est le sujet, cette plaque la
   RECOUVRAIT : mesuré à 960 de large, on ne voyait plus qu'un disque
   gris à la place des continents.

   Ici, un dégradé HORIZONTAL sur toute la scène, pleine couleur à
   gauche où vit le texte, éteint avant le centre de la planète. Il ne
   se lit pas comme un cache mais comme une brume, et la Terre garde
   toute sa partie éclairée. */
.pt-scene::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  /* IL S'ÉTEINT BEAUCOUP PLUS TÔT QU'AVANT.

     Mesuré sur l'écran de Bayss : le voile restait OPAQUE jusqu'à 571
     pixels et ne finissait de s'éteindre qu'à 1189, c'est-à-dire par
     delà le milieu de la planète. Toute la moitié gauche du globe était
     blanchie, et la Terre paraissait déportée vers la droite alors que
     sa géométrie était juste.

     Il s'arrête maintenant à peu près où finissent les lignes de texte.
     Le globe n'est plus voilé que sur les quelques dizaines de pixels
     où le paragraphe le recouvre vraiment. */
  inset:-40vh -12% -40vh -50vw;
  background:linear-gradient(to right,
    var(--pt-voile-1) 0%,
    var(--pt-voile-1) 50%,
    var(--pt-voile-2) 56%,
    rgba(0,0,0,0) 64%);
}

/* LE BLOC ÉDITORIAL EST CENTRÉ VERTICALEMENT, ET IL L'EST PAR LA SCÈNE.

   Il était accroché en haut de sa colonne : à 1920 par 1080, le logo
   commençait à 194 pixels du haut et tout le bloc flottait dans le
   tiers supérieur, sans rapport avec le centre de la planète. La scène
   est un conteneur flex qui centre son contenu, donc le message
   s'aligne naturellement sur l'axe du globe.

   `pointer-events` : LA BOÎTE NE BLOQUE PLUS RIEN. Elle est bien plus
   large que les lignes de texte qu'elle contient, et elle avalait les
   clics destinés à la planète, créant une zone morte sur tout le
   flanc gauche du globe. Seuls les ÉLÉMENTS reçoivent les clics, ce qui
   laisse le texte sélectionnable et rend le reste à la Terre. */
.pt-edito{
  position:relative;z-index:2;max-width:27rem;
  pointer-events:none;
}
/* CE QUI REPREND LES CLICS, ET CE QUI LES LAISSE PASSER.

   La boite ne les prend plus. Restent ses enfants, et la regle est
   simple : ce qui se LIT les garde, ce qui DECORE les laisse passer.

     le logo, le surtitre   decoratifs. Aucune raison d'intercepter un
                            clic destine a la planete qui est derriere.
     le titre, le texte     on doit pouvoir les selectionner et les
                            copier. Un clic dessus selectionne du texte,
                            ce qui est un comportement defini, pas une
                            zone morte.

   Mesure a 1920 par 1080, vingt-cinq points sur le disque : dix-neuf
   allaient deja au globe, six au bloc de texte. Apres cette regle, il
   n'en reste que cinq, et ce sont exactement les lignes de texte. */
.pt-edito > *{pointer-events:auto}
.pt-logo,.pt-categorie{pointer-events:none}

.pt-logo{
  width:clamp(220px,21vw,376px);height:auto;display:block;
  filter:var(--pt-logo-ombre);
}
.pt-categorie{
  margin-top:clamp(20px,2.6vh,30px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);
}
:root[data-theme="dark"] .pt-categorie{color:var(--brand-2)}
/* LE TEXTE PORTE SON PROPRE HALO.

   C'est ce qui permet au voile d'être aussi discret. Sans lui, il
   fallait blanchir un tiers de la planète pour que le titre se lise ;
   avec lui, chaque ligne emporte le peu de fond qu'il lui faut, et la
   Terre reste entière.

   Ce n'est pas une ombre portée : c'est un halo centré, sans décalage,
   de la couleur du fond de page. À l'œil on ne le voit pas ; on voit
   seulement que le texte tient. */
.pt-titre,.pt-propos,.pt-categorie{text-shadow:var(--pt-halo-texte)}

.pt-titre{
  margin-top:13px;
  font-size:clamp(29px,3.5vw,54px);line-height:1.06;font-weight:600;
  letter-spacing:-.028em;color:var(--ink);text-wrap:balance;
}
/* Lisible, et pas un mur. 46 caractères de large : on lit le paragraphe
   d'un trait au lieu de le parcourir. */
.pt-propos{
  margin-top:clamp(15px,1.9vh,22px);
  font-size:clamp(14px,1.12vw,17px);line-height:1.64;color:var(--ink-2);
  max-width:44ch;
}

/* LA PLANÈTE PREND EXACTEMENT LA PLACE QUI RESTE.

   Premier essai : un canvas en flux, dans une rangée `1fr`. Le canvas a
   une taille intrinsèque, il l'imposait à sa rangée, et le bas de la
   planète passait sous le pli. Posé en absolu dans un conteneur
   `min-height:0`, il ne peut plus pousser : c'est la grille qui décide,
   et `scene.js` s'adapte à ce qu'on lui donne. */
/* LA PLANÈTE EST ENTIÈRE, HALO COMPRIS, ET ELLE A DE L'AIR AUTOUR.

   C'est la correction demandée pour la version finale : plus rien n'est
   coupé, ni en haut, ni à gauche, ni à droite, même au zoom de
   sélection.

   Elle tient en deux endroits qui doivent s'accorder :

     ICI        le conteneur est CARRÉ et aussi grand que la hauteur de
                fenêtre le permet. Il déborde de sa colonne, c'est voulu :
                il ne contient que du vide autour de la planète.

     scene.js   le rayon se DÉDUIT du demi-côté, du zoom maximal et de
                l'étendue du halo. Voir AUREOLE, ZOOM_MAX et MARGE.

   `translateX(-42%)` : la planète avance légèrement vers l'accès, ce
   qui lie les deux moitiés de la composition au lieu de les juxtaposer,
   et dégage le flanc gauche où vit le message. */
.pt-monde{
  position:absolute;z-index:0;
  /* LA PLANÈTE SE RECENTRE, AUTANT QUE LE PANNEAU LE PERMET.

     Son centre était à 774 px sur une page de 1920 : cent quatre-vingt-
     six pixels à gauche du milieu. Il passe à 860.

     Pourquoi pas 960, c'est-à-dire le milieu exact. Le globe fait 909 px
     et son auréole 962 : centré à 960, son bord droit tomberait à
     1441, et le panneau commence à 1374. Il faudrait soit rapetisser la
     planète de cent pixels, soit coller le panneau au bord. Les deux ont
     été refusés, et à juste titre. 860 est le point le plus à droite
     qui garde une trentaine de pixels d'air sous le panneau. */
  left:50%;top:50%;transform:translate(-37%,-50%);
  width:min(142%,100vh);aspect-ratio:1;
  pointer-events:none;
}

/* LE CANVAS EST CARRÉ, LA PLANÈTE EST RONDE.

   Sans découpe, les quatre coins du canvas avalaient les clics : ils
   couvrent le panneau d'accès et une partie du texte, et rien n'y
   répondait. `clip-path` restreint AUSSI la zone qui reçoit les
   événements, donc le disque redevient la seule surface cliquable, et
   il l'est en entier.

   46 % : juste au-delà de l'auréole au zoom maximal. On ne perd rien du
   halo, et on ne prend rien de plus. */
.pt-globe{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:grab;
  pointer-events:auto;
  clip-path:circle(46%);
}
.pt-globe:active{cursor:grabbing}

/* L'infobulle du globe a disparu : le nom du pays est maintenant peint
   SUR la planète, par `scene.js`. Un seul mécanisme, et il répond aussi
   quand on parcourt la liste, ce que l'infobulle ne faisait pas. */

/* ------------------------------------------------------------ LE PANNEAU */
/* z-index 3 : au-dessus de la planète ET du voile. Un panneau d'accès
   à travers lequel on devine un continent n'est pas un panneau
   d'accès. */
.pt-panneau{display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:3}
.pt-carte{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-2);padding:30px clamp(22px,1.9vw,30px) 28px;min-width:0;
  max-height:calc(100dvh - 180px);overflow:auto;overscroll-behavior:contain;
}
:root[data-theme="dark"] .pt-carte{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.pt-tete{margin-bottom:20px}
/* L'ACCUEIL, AU-DESSUS DU TITRE DU PANNEAU.

   Un mot, pas une phrase. Il dit qu'on est arrivé quelque part, avant de
   dire ce qu'on y fait. En petites capitales, dans la couleur de marque :
   il accueille, il ne concurrence pas le titre. */
.pt-bienvenue{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px;
}
:root[data-theme="dark"] .pt-bienvenue{color:var(--brand-2)}

.pt-h2{font-size:20px;font-weight:600;letter-spacing:-.016em;line-height:1.25;color:var(--ink)}
.pt-h2.pt-pays{font-size:27px;letter-spacing:-.022em}
.pt-sur{
  margin-top:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.pt-aide{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin-top:12px}
.pt-aide.grand{font-size:15px;line-height:1.55;color:var(--ink)}

.pt-coche{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--good-soft);color:var(--good);margin-bottom:14px;
}

/* L'IDENTIFIANT, ANNONCÉ COMME TEL. Il figurait dans la ligne grise des
   métadonnées ; la première personne à activer son accès a retapé son
   NOM à la connexion suivante. Une information dont dépend l'entrée ne
   se met pas en petit. */
.pt-identifiant{
  display:flex;flex-direction:column;gap:4px;
  margin-top:16px;padding:12px 14px;border-radius:10px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
}
.pt-identifiant span{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
}
.pt-identifiant b{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all}
/* L'adresse en second, plus discrete : les deux formes marchent, mais
   c'est l'identifiant Touma qu'on veut faire retenir. */
.pt-identifiant em{font-style:normal;font-size:12.5px;color:var(--ink-2);word-break:break-all}

/* --------------------------------------------------------------- CHAMPS */
.pt-champ{display:block;margin-top:15px}
.pt-lab{
  display:flex;align-items:baseline;gap:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.pt-fac{font-family:var(--ui);font-size:11px;letter-spacing:0;text-transform:none;color:var(--faint)}
.pt-fac.bloc{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--faint)}
.pt-champ input,.pt-champ textarea{
  width:100%;font:inherit;font-size:14.5px;padding:11px 12px;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:9px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.pt-champ input:focus,.pt-champ textarea:focus{
  outline:none;border-color:var(--brand-2);background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.pt-champ textarea{resize:vertical;min-height:70px;line-height:1.5}

/* L'œil est DANS le champ : posé à l'extérieur, il décale la colonne et
   se perd sur un écran étroit. */
.pt-mdp{position:relative;display:block}
.pt-mdp input{padding-right:46px}
.pt-oeil{
  position:absolute;right:4px;top:21px;transform:translateY(-50%);
  display:grid;place-items:center;width:36px;height:36px;
  background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer;
}
.pt-oeil:hover{color:var(--ink-2);background:var(--surface-3)}

/* -------------------------------------------------------------- BOUTONS */
.pt-btn{
  display:flex;align-items:center;justify-content:center;width:100%;margin-top:20px;
  padding:12px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:9px;
  transition:background .14s ease, border-color .14s ease, transform .08s ease;
}
.pt-btn:hover{background:var(--surface-3)}
.pt-btn:active{transform:translateY(1px)}
.pt-btn.primaire{background:var(--brand);color:var(--pt-encre-btn);border-color:var(--brand)}
.pt-btn.primaire:hover{background:var(--brand-2);border-color:var(--brand-2)}
.pt-btn[disabled]{opacity:.55;cursor:default;transform:none}
.pt-boutons{display:grid;grid-template-columns:auto 1fr;gap:10px}

.pt-retour{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:0 0 14px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;
}
.pt-retour:hover{color:var(--brand)}

/* ------------------------------------------------- LA LISTE, VRAI CONTRÔLE
   Tout ce que la scène permet se fait ici, au clavier, dans l'ordre du
   document. La scène est un agrément ; ceci est l'interface. */
.pt-liste{
  margin-top:12px;max-height:min(42vh,380px);overflow:auto;overscroll-behavior:contain;
  border-top:1px solid var(--line);padding-top:6px;
}
.pt-terrs{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.pt-terrs.espaces{margin-top:14px;gap:6px}
.pt-terr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 11px;background:none;border:1px solid transparent;border-radius:8px;
  font:inherit;text-align:left;cursor:pointer;color:var(--ink);
  transition:background .1s ease, border-color .1s ease;
}
.pt-terr:hover{background:var(--surface-3);border-color:var(--line)}
.pt-terr.est{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.pt-terrs.espaces .pt-terr{padding:12px 14px;border-color:var(--line);background:var(--surface-2)}
.pt-terrs.espaces .pt-terr:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.pt-terr-nom{
  font-weight:500;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.pt-terr-etat{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);
}
.pt-pastille{
  width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;
  box-shadow:0 0 0 3px var(--orange-soft);
}

.pt-vide{padding:20px 2px;font-size:13.5px;color:var(--muted)}
.pt-squelette{display:grid;gap:1px;padding:8px 0}
.pt-squelette i{display:block;height:37px;border-radius:8px;background:var(--surface-3)}

.pt-alerte{
  margin:16px 0 0;padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.5;
  background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit);
}

/* ---------------------------------------------- ÉCRAN ÉTROIT ET TÉLÉPHONE
   La planète passe derrière, très atténuée, et le message reste. Sur un
   téléphone, l'important est le formulaire : on ne sacrifie jamais le
   panneau pour garder un gros globe. */
@media (max-width:900px){
  .pt-cadre{
    grid-template-columns:1fr;gap:clamp(20px,3vh,32px);
    padding:clamp(64px,9vh,88px) 16px 28px;align-content:center;
  }
  /* LA SCÈNE NE RÉSERVE PLUS DE HAUTEUR.

     `min-height:66vh` a du sens sur un écran large, où la planète
     occupe la colonne. Sur un téléphone elle passe en fond, et cette
     réserve laissait cinq cents pixels de vide entre le titre et la
     carte. */
  .pt-scene{min-height:0}

  /* La planète, centrée en haut et largement débordante : elle habille
     sans jamais disputer la place au formulaire. `overflow:hidden` sur
     `.pt` garantit qu'elle ne crée aucun défilement horizontal. */
  .pt-monde{
    position:absolute;z-index:0;pointer-events:none;opacity:.22;
    left:50%;top:clamp(56px,13vh,150px);right:auto;bottom:auto;
    transform:translateX(-50%);
    width:min(122vw,78vh);aspect-ratio:1;
  }
  .pt-edito{position:relative;z-index:1;max-width:none;text-align:center}
  .pt-logo{margin:0 auto;width:clamp(180px,48vw,240px)}
  .pt-propos{display:none}
  .pt-titre{font-size:clamp(23px,6.2vw,30px)}
  .pt-panneau{position:relative;z-index:1}
  .pt-carte{max-height:none}
}

/* ------------------------------------------------------------ TABLETTE
   UNE TABLETTE N'EST PAS UN GRAND TÉLÉPHONE.

   Mesuré à 768×1024 : la règle « écran étroit » s'appliquait telle
   quelle, et le résultat était une page de téléphone étirée. La carte
   faisait 736 px de large, avec les noms de pays collés au bord gauche
   et six cents pixels de vide à leur droite. Le paragraphe qui explique
   ce qu'est Touma, lui, était purement masqué - sur un écran qui a mille
   pixels de haut et toute la place pour le lire.

   Ici, donc : le texte reste, la carte retrouve une largeur de lecture,
   et la planète redevient visible au lieu de n'être qu'un arc de cercle
   sous le panneau. */
@media (min-width:601px) and (max-width:900px){
  /* LES MARGES SONT CALÉES SUR UNE MESURE, PAS SUR UN GOÛT.

     Premier essai : 1036 px de contenu dans 1024 px de fenêtre. Douze
     pixels de trop, donc une barre de défilement sur toute la hauteur
     pour douze pixels. Rien n'était illisible, et pourtant la page
     donnait l'impression de déborder. */
  /* Recale une seconde fois le 20/09 : le titre a grossi avec la V3.1,
     et les 1024 px de hauteur etaient de nouveau depasses de quatorze
     pixels. Une barre de defilement sur toute la page pour quatorze
     pixels donne l'impression d'un ecran qui deborde, alors que rien
     n'est illisible. */
  .pt-cadre{padding:clamp(32px,4.5vh,64px) clamp(28px,5vw,56px) clamp(20px,2.4vh,34px)}
  /* Et si un jour le panneau grandit, c'est LUI qui défile, jamais la
     page : un titre qui disparaît vers le haut, on ne le retrouve pas. */
  .pt-carte{max-height:calc(100dvh - 150px)}
  .pt-edito{max-width:34rem;margin:0 auto}
  .pt-propos{display:block;margin:14px auto 0;font-size:15px;max-width:32rem}
  .pt-titre{font-size:clamp(27px,4.4vw,34px)}
  .pt-panneau{max-width:520px;margin:0 auto;width:100%}
  /* Plus haute et moins large : elle se pose derrière le titre, et le
     panneau vient en couvrir le bas. C'est une planète, pas un liseré. */
  .pt-monde{top:clamp(16px,3vh,52px);width:min(92vw,56vh);opacity:.26}
}

@media (max-width:430px){
  .pt-cadre{padding-left:12px;padding-right:12px}
  .pt-carte{padding:24px 18px 22px;border-radius:13px}
  .pt-h2.pt-pays{font-size:23px}
  .pt-barre{top:12px;right:12px;gap:8px}
  .pt-boutons{grid-template-columns:1fr}
  .pt-categorie{font-size:9.5px;letter-spacing:.16em}
}

/* En fenêtre basse, la carte défile au lieu de déborder : rien ne doit
   devenir inatteignable. */
@media (max-height:720px) and (min-width:901px){
  .pt-cadre{padding-top:64px;padding-bottom:28px}
  .pt-carte{max-height:calc(100dvh - 120px)}
  .pt-liste{max-height:30vh}
  .pt-propos{font-size:13px}
}

/* LE MOUVEMENT EST UN AGRÉMENT, JAMAIS UNE INFORMATION.
   La planète cesse de tourner : c'est `scene.js` qui le décide, en
   lisant la même préférence. Ici, plus rien ne bouge non plus. */
@media (prefers-reduced-motion:reduce){
  .pt *,.pt *::before,.pt *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}