:root {
    --fond:#E7ECEA; --surface:#FAFCFB; --surface-2:#EFF3F1; --surface-3:#E2E8E6;
    --trait:#CAD4D1; --trait-fort:#AEBBB7;
    --encre:#141F1D; --encre-2:#53615D; --encre-3:#82908B;
    --energie:#A86A15; --energie-vif:#C8801F; --urgence:#A9412A; --froid:#35707A; --atteint:#416B48;
    --ombre:0 1px 2px rgba(20,31,29,.06), 0 10px 30px -14px rgba(20,31,29,.28);
    --ui:'Archivo','Segoe UI',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fond:#0E1413; --surface:#171F1E; --surface-2:#1D2726; --surface-3:#24302E;
      --trait:#2C3937; --trait-fort:#3D4E4B;
      --encre:#E6EDEB; --encre-2:#9AA8A4; --encre-3:#6B7975;
      --energie:#E3A044; --energie-vif:#F0AE4E; --urgence:#E07554; --froid:#6EB4BE; --atteint:#7EAD84;
      --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"] {
    --fond:#0E1413; --surface:#171F1E; --surface-2:#1D2726; --surface-3:#24302E;
    --trait:#2C3937; --trait-fort:#3D4E4B;
    --encre:#E6EDEB; --encre-2:#9AA8A4; --encre-3:#6B7975;
    --energie:#E3A044; --energie-vif:#F0AE4E; --urgence:#E07554; --froid:#6EB4BE; --atteint:#7EAD84;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--ui);
         font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  .page { max-width:1180px; margin:0 auto; padding:54px 26px 90px; }

  /* ---------------- en-tête du document ---------------- */
  .doc { display:flex; flex-direction:column; gap:17px; max-width:64ch; }
  .eyebrow { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.13em;
             text-transform:uppercase; color:var(--encre-3); margin:0; }
  h1 { font-size:clamp(34px,5vw,48px); font-weight:700; letter-spacing:-.026em;
       line-height:1.03; margin:0; text-wrap:balance; }
  .chapeau { margin:0; color:var(--encre-2); font-size:16.5px; }
  .chapeau strong { color:var(--encre); font-weight:600; }
  .puces { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:2px 0 0; list-style:none; }
  .puces li { font-family:var(--mono); font-size:11.5px; font-weight:500; padding:5px 10px;
              border:1px solid var(--trait); border-radius:3px; background:var(--surface); color:var(--encre-2); }
  .puces li b { color:var(--encre); font-weight:600; }

  /* ---------------- le banc : téléphone + pilotage ---------------- */
  .banc { display:grid; grid-template-columns:minmax(0,1fr) 386px; gap:38px; margin-top:46px;
          align-items:start; }
  @media (max-width:900px) { .banc { grid-template-columns:1fr; } }
  .pilote { display:flex; flex-direction:column; gap:22px; position:sticky; top:26px; }
  .grp { display:flex; flex-direction:column; gap:9px; }
  .grp-t { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em;
           text-transform:uppercase; color:var(--encre-3); }
  .dests { display:flex; flex-wrap:wrap; gap:7px; }
  .dest { padding:8px 13px; border-radius:8px; border:1px solid var(--trait); background:var(--surface);
          font-family:var(--ui); font-size:13.5px; font-weight:600; color:var(--encre-2); cursor:pointer; }
  .dest:hover { border-color:var(--trait-fort); }
  .dest[aria-selected="true"] { background:var(--encre); border-color:var(--encre); color:var(--surface); }
  .etats { display:flex; flex-wrap:wrap; gap:6px; }
  .etat { padding:6px 11px; border-radius:20px; border:1px solid var(--trait); background:var(--surface);
          font-family:var(--ui); font-size:12px; font-weight:600; color:var(--encre-2); cursor:pointer; }
  .etat[aria-selected="true"] { background:var(--energie); border-color:var(--energie); color:var(--surface); }
  .legende { margin:0; font-size:14px; line-height:1.55; color:var(--encre-2); }
  .legende b { color:var(--encre); font-weight:600; display:block; margin-bottom:3px; font-size:15px; }

  /* ---------------- le téléphone ---------------- */
  .tel { width:386px; height:834px; flex:none; background:var(--surface);
         border:1px solid var(--trait); border-radius:24px; box-shadow:var(--ombre);
         display:flex; flex-direction:column; overflow:hidden; position:relative; }
  .vue { display:none; flex-direction:column; flex:1; min-height:0; }
  .vue.on { display:flex; }
  .vue { overflow:hidden; }
  /* Le defaut d'un enfant d'ecran est flex-shrink:1 : sous la pression, il se
     comprime sous la hauteur de son contenu, qui deborde alors sur le bloc
     suivant. Un ecran de telephone est toujours sous pression. */
  .vue > * { flex:none; }
  .vue > .zone, .vue > .empty, .vue > .defile, .vue > .etape { flex:1 1 auto; min-height:0; }
  /* Un seul espaceur par ecran : c'est lui qui decide ou tombe le vide.
     Le bloc qui le suit se retrouve contre la barre d'action : il lui faut
     son propre air, sinon deux bordures se touchent a 10 points d'ecart. */
  .vue > .espace { flex:1 1 auto; min-height:0; }
  /* Tout bloc borne qui se retrouve juste avant la barre lui doit son air :
     sans ca deux bordures se touchent a 10 points d'ecart. */
  .vue > *:nth-last-child(2):not(.espace):not(.defile):not(.zone):not(.empty):not(.etape) { margin-bottom:16px; }
  .veille { display:flex; justify-content:space-between; align-items:center; padding:9px 18px 2px;
            font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--encre-3); flex:none; }
  .defile { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; position:relative; }
  .coupe { position:absolute; left:0; right:0; bottom:0; height:38px; pointer-events:none;
           background:linear-gradient(to bottom, transparent, var(--surface)); }

  /* ---------------- barre de navigation ---------------- */
  .nav { display:flex; border-top:1px solid var(--trait); background:var(--surface);
         padding:7px 4px 12px; flex:none; }
  .nav button { flex:1; background:none; border:none; cursor:pointer; padding:5px 2px;
                display:flex; flex-direction:column; align-items:center; gap:4px;
                font-family:var(--ui); font-size:10px; font-weight:600; color:var(--encre-3); }
  .nav svg { width:21px; height:21px; }
  .nav button[aria-current="page"] { color:var(--encre); }
  .nav button[aria-current="page"] svg { color:var(--energie); }

  /* ---------------- en-tête d'écran ---------------- */
  .hdr { padding:6px 18px 12px; display:flex; flex-direction:column; gap:9px; flex:none; }
  .hdr .sur { margin:0; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
              text-transform:uppercase; color:var(--encre-3); display:flex; align-items:center; gap:8px; }
  .hdr .sur .droite { margin-left:auto; }
  .gros { display:flex; align-items:baseline; gap:9px; }
  .gros .n { font-family:var(--mono); font-size:40px; font-weight:600; letter-spacing:-.035em;
             line-height:1; font-variant-numeric:tabular-nums; }
  .gros .n.moyen { font-size:30px; }
  .gros .n.petit { font-size:21px; letter-spacing:-.02em; }
  .gros .u { font-size:14px; font-weight:500; color:var(--encre-2); }
  .gros .u b { color:var(--encre); font-weight:600; }
  .phrase { margin:0; font-size:13px; line-height:1.45; color:var(--encre-2); }
  .phrase em { font-style:normal; font-weight:600; color:var(--encre); }
  /* =========== vocabulaire partagé : une seule définition pour toute l'app =========== */

  /* -- jauge à segments -- */
  .meter { display:flex; height:12px; border-radius:2px; overflow:hidden; background:var(--surface-3); }
  .meter i { display:block; height:100%; }
  .m-plein { background:var(--energie-vif); }
  .m-prevu { background-color:color-mix(in srgb,var(--energie) 22%,transparent);
             background-image:repeating-linear-gradient(115deg,var(--energie) 0 3px,transparent 3px 7px); }
  .m-vide { background:transparent; }
  .m-ok { background:var(--atteint); }
  .cle { display:flex; gap:13px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--encre-2); }
  .cle span { display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; }
  .pt { width:8px; height:8px; border-radius:1px; flex:none; }
  .pt.a { background:var(--energie-vif); }
  .pt.b { background-color:color-mix(in srgb,var(--energie) 30%,transparent); border:1px solid var(--energie); }
  .pt.c { border:1px solid var(--trait-fort); }

  /* -- bandeau de chiffres -- */
  .tiles { display:flex; border:1px solid var(--trait); border-radius:8px; overflow:hidden; background:var(--surface-2); }
  .tiles div { flex:1; padding:8px 9px; display:flex; flex-direction:column; gap:1px; min-width:0; }
  .tiles div + div { border-left:1px solid var(--trait); }
  .tiles .v { font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
  .tiles .l { font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); }
  .duo-ligne { display:flex; align-items:baseline; justify-content:space-between; font-family:var(--mono);
               font-size:12.5px; color:var(--encre-2); font-variant-numeric:tabular-nums; }
  .duo-ligne b { color:var(--encre); font-weight:600; }

  /* -- la ligne universelle -- */
  .list { flex:0 1 auto; min-height:0; overflow:hidden; padding:2px 10px 6px; display:flex; flex-direction:column; }
  .row { display:flex; align-items:center; gap:11px; padding:10px 8px; }
  .row + .row { border-top:1px solid var(--trait); }
  .row .feu { width:4px; align-self:stretch; border-radius:2px; flex:none; }
  .feu.rouge { background:var(--urgence); } .feu.orange { background:var(--energie-vif); }
  .feu.vert { background:var(--atteint); } .feu.gris { background:var(--trait-fort); }
  .row .h { font-family:var(--mono); font-size:10.5px; color:var(--encre-3); width:34px; flex:none;
            font-variant-numeric:tabular-nums; }
  .row .c { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .row .t.leger { font-weight:500; }
  .row .t { font-size:14.5px; font-weight:600; letter-spacing:-.01em;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .row .m { font-family:var(--mono); font-size:10px; color:var(--encre-3);
            display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .row .m b { color:var(--encre-2); font-weight:700; }
  .row .v { font-family:var(--mono); font-size:14px; font-weight:600; flex:none; color:var(--encre-2);
            font-variant-numeric:tabular-nums; text-align:right; }
  .row .v small { display:block; font-size:9px; font-weight:500; color:var(--encre-3); letter-spacing:.04em; }
  .row .v.gros2 { font-size:20px; color:var(--encre); min-width:30px; }
  .row .v.rouge { color:var(--urgence); } .row .v.orange { color:var(--energie); }
  .row.pris .t { color:var(--encre-3); }
  /* Pas de rature sur un titre a overflow:hidden : la decoration s'y dessine
     sur toute la boite et disloque la ligne. La case verte et le gris disent
     deja « pris ». Constate au rendu le 2 septembre. */
  .row.dort { opacity:.5; } .row.dort .t { text-decoration:line-through; }
  .row.hs { background:color-mix(in srgb,var(--urgence) 8%,transparent); border-radius:8px; }
  .row.hs .t { color:var(--urgence); text-decoration:line-through; }

  /* -- pastilles -- */
  .badge { padding:1px 5px; border-radius:2px; font-family:var(--mono); font-size:8.5px; font-weight:700;
           letter-spacing:.05em; text-transform:uppercase; flex:none; }
  .b-froid { background:color-mix(in srgb,var(--froid) 15%,transparent); color:var(--froid); }
  .b-energie { background:color-mix(in srgb,var(--energie) 18%,transparent); color:var(--energie); }
  .b-urgence { background:color-mix(in srgb,var(--urgence) 13%,transparent); color:var(--urgence); }
  .b-vert { background:color-mix(in srgb,var(--atteint) 18%,transparent); color:var(--atteint); }
  .b-gris { background:var(--surface-3); color:var(--encre-3); }

  /* -- cibles tactiles -- */
  .cible { width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid var(--trait-fort);
           background:transparent; display:grid; place-items:center; color:transparent; cursor:pointer; }
  .cible.carre { border-radius:8px; width:32px; height:32px; border-width:2px; }
  .cible svg { width:15px; height:15px; }
  .cible.fait { background:var(--atteint); border-color:var(--atteint); color:var(--surface); }
  .cible.vide { border-style:dashed; }
  .cible.ko { border-color:var(--urgence); color:var(--urgence); }
  .actes { display:flex; gap:5px; flex:none; }
  .acte { width:30px; height:30px; border-radius:6px; border:1px solid var(--trait); background:var(--surface);
          display:grid; place-items:center; color:var(--encre-2); cursor:pointer; }
  .acte svg { width:15px; height:15px; }
  .acte.froid { color:var(--froid); } .acte.rouge { color:var(--urgence); }
  .verrou { width:20px; flex:none; display:grid; place-items:center; color:var(--encre-3); }
  .verrou svg { width:12px; height:12px; } .verrou.on { color:var(--encre); }

  /* -- séparateur dans une liste -- */
  .sep { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em;
         text-transform:uppercase; padding:15px 8px 6px; display:flex; align-items:center; gap:8px;
         color:var(--froid); }
  .sep::after { content:""; flex:1; height:1px; background:var(--trait); }
  .sep.neutre { color:var(--encre-3); }
  .sep .cpt { font-weight:500; color:var(--encre-3); letter-spacing:.04em; }

  /* -- bandeau d'information ou d'action -- */
  .notice { margin:11px 18px 0; border-radius:10px; padding:11px 13px; flex:none;
            display:flex; flex-direction:column; gap:9px; }
  .notice .nt { margin:0; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
                text-transform:uppercase; display:flex; align-items:center; gap:7px; }
  .notice .nt i { width:6px; height:6px; border-radius:50%; flex:none; }
  .notice p { margin:0; font-size:13px; line-height:1.45; color:var(--encre); }
  .notice p em { font-style:normal; font-weight:600; }
  .n-energie { background:color-mix(in srgb,var(--energie) 10%,var(--surface));
               border:1px solid color-mix(in srgb,var(--energie) 32%,transparent); }
  .n-energie .nt { color:var(--energie); } .n-energie .nt i { background:var(--energie); }
  .n-urgence { background:color-mix(in srgb,var(--urgence) 8%,var(--surface));
               border:1px solid color-mix(in srgb,var(--urgence) 36%,transparent); }
  .n-urgence .nt { color:var(--urgence); } .n-urgence .nt i { background:var(--urgence); }
  .n-froid { background:color-mix(in srgb,var(--froid) 9%,var(--surface));
             border:1px solid color-mix(in srgb,var(--froid) 32%,transparent); }
  .n-froid .nt { color:var(--froid); } .n-froid .nt i { background:var(--froid); }
  .n-neutre { background:var(--surface-2); border:1px solid var(--trait); }
  .n-neutre .nt { color:var(--encre-3); } .n-neutre .nt i { background:var(--encre-3); }

  /* -- boutons -- */
  .btns { display:flex; gap:8px; }
  .btn { flex:1; padding:9px 10px; border-radius:7px; border:1px solid var(--trait-fort);
         background:var(--surface); color:var(--encre); font-family:var(--ui); font-size:13px;
         font-weight:600; cursor:pointer; }
  .btn.plein { background:var(--energie); border-color:var(--energie); color:var(--surface); }
  .btn.sombre { background:var(--encre); border-color:var(--encre); color:var(--surface); }
  .btn.froid { background:var(--froid); border-color:var(--froid); color:var(--surface); }
  .barre { padding:10px 18px 16px; border-top:1px solid var(--trait); background:var(--surface); flex:none; }
  .barre .gd { width:100%; padding:14px; border-radius:10px; border:none; background:var(--encre);
               color:var(--surface); font-family:var(--ui); font-size:15px; font-weight:600; cursor:pointer; }
  .barre .gd.energie { background:var(--energie); }
  .trio { display:flex; gap:7px; }
  .trio button { flex:1; padding:10px 4px; border-radius:8px; border:1px solid var(--trait-fort);
                 background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:5px;
                 font-family:var(--ui); font-size:11px; font-weight:600; color:var(--encre); cursor:pointer; }
  .trio button svg { width:17px; height:17px; color:var(--encre-2); }

  /* -- état vide -- */
  .empty { flex:1; margin:8px 18px; border:1px dashed var(--trait-fort); border-radius:12px;
           display:flex; flex-direction:column; align-items:center; justify-content:center;
           gap:11px; padding:24px 20px; text-align:center; }
  .empty .t { font-size:17px; font-weight:700; letter-spacing:-.015em; }
  .empty p { margin:0; font-size:13px; line-height:1.5; color:var(--encre-2); max-width:30ch; }
  .empty p em { font-style:normal; font-weight:600; color:var(--encre); }

  /* -- filtres et bascules -- */
  .chips { display:flex; gap:6px; flex-wrap:wrap; }
  .chip { padding:6px 11px; border-radius:20px; border:1px solid var(--trait); background:var(--surface);
          font-size:12px; font-weight:600; color:var(--encre-2); }
  .chip.on { background:var(--encre); border-color:var(--encre); color:var(--surface); }
  .bascule { display:flex; border:1px solid var(--trait); border-radius:8px; overflow:hidden; background:var(--surface-2); }
  .bascule span { flex:1; text-align:center; padding:8px 6px; font-size:12.5px; font-weight:600; color:var(--encre-3); }
  .bascule span.on { background:var(--surface); color:var(--encre); box-shadow:inset 0 0 0 1px var(--trait); border-radius:7px; }

  /* -- fiche encadrée -- */
  .card { margin:6px 14px 0; border:1px solid var(--trait); border-radius:12px; background:var(--surface-2);
          padding:13px; display:flex; flex-direction:column; gap:11px; flex:none; }
  .card .ct { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .card .cn { font-size:16px; font-weight:700; letter-spacing:-.015em; }
  .card .cv { font-family:var(--mono); font-size:15px; font-weight:600; }
  .card .cd { font-family:var(--mono); font-size:10.5px; color:var(--encre-3); line-height:1.6; margin:0; }
  .grille3 { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .geste { padding:11px 4px; border-radius:8px; border:1px solid var(--trait-fort); background:var(--surface);
           display:flex; flex-direction:column; align-items:center; gap:5px; font-family:var(--ui);
           font-size:11.5px; font-weight:600; color:var(--encre); cursor:pointer; }
  .geste svg { width:17px; height:17px; }
  .geste.froid { color:var(--froid); border-color:color-mix(in srgb,var(--froid) 40%,transparent); }
  .geste.rouge { color:var(--urgence); border-color:color-mix(in srgb,var(--urgence) 40%,transparent); }
  .geste.choisi { background:var(--urgence); border-color:var(--urgence); color:var(--surface); }
  .geste.eteint { opacity:.4; }

  /* -- échelle à crans -- */
  .scale { display:flex; gap:6px; }
  .scale span { flex:1; text-align:center; padding:10px 2px; border-radius:8px; border:1px solid var(--trait);
                background:var(--surface); font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--encre-2); }
  .scale span.on { background:var(--energie); border-color:var(--energie); color:var(--surface); }
  .scale span.mort { opacity:.35; }
  .bloc { display:flex; flex-direction:column; gap:8px; }
  .bloc .bt { font-size:14px; font-weight:600; }
  .bloc .bd { font-family:var(--mono); font-size:10px; color:var(--encre-3); margin:0; line-height:1.5; }
  .zone { padding:4px 16px 0; display:flex; flex-direction:column; gap:15px; flex:1 1 auto; min-height:0; overflow:hidden; }

  /* -- curseur de réglage -- */
  .piste { height:8px; border-radius:4px; background:var(--surface-3); position:relative; }
  .piste i { display:block; height:100%; border-radius:4px; background:var(--energie); }
  .piste b { position:absolute; top:-4px; width:16px; height:16px; border-radius:50%; background:var(--surface);
             border:2px solid var(--energie); transform:translateX(-8px); }
  .rt { display:flex; align-items:baseline; justify-content:space-between; }
  .rn { font-size:14px; font-weight:600; }
  .rv { font-family:var(--mono); font-size:14px; font-weight:700; color:var(--energie); }

  /* -- calcul de pesée -- */
  .calc { display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:13px;
          font-variant-numeric:tabular-nums; }
  .calc div { display:flex; justify-content:space-between; align-items:baseline; }
  .calc .lib { color:var(--encre-2); }
  .calc .val { font-weight:600; }
  .calc hr { height:1px; background:var(--trait-fort); border:none; margin:3px 0; width:100%; }
  .calc .res { font-size:22px; font-weight:700; color:var(--froid); }
  .calc .res-l { font-size:13px; font-weight:600; color:var(--encre); }

  /* -- mode cuisine -- */
  .etape { flex:1; padding:0 20px; display:flex; flex-direction:column; gap:15px; justify-content:center; }
  .etape .num { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em;
                text-transform:uppercase; color:var(--energie); }
  .etape h4 { margin:0; font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
  .etape p { margin:0; font-size:15.5px; line-height:1.55; }
  .etape p em { font-style:normal; font-weight:700; background:color-mix(in srgb,var(--energie) 20%,transparent);
                padding:0 3px; border-radius:2px; }
  .minuteur { display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:12px;
              background:color-mix(in srgb,var(--energie) 11%,var(--surface));
              border:1px solid color-mix(in srgb,var(--energie) 34%,transparent); }
  .minuteur .tm { font-family:var(--mono); font-size:32px; font-weight:700; letter-spacing:-.03em;
                  color:var(--energie); font-variant-numeric:tabular-nums; }
  .minuteur .dm { font-size:12.5px; color:var(--encre-2); line-height:1.4; }
  .points { display:flex; gap:5px; padding:10px 20px 0; flex:none; }
  .points i { flex:1; height:3px; border-radius:2px; background:var(--surface-3); }
  .points i.fait { background:var(--atteint); } .points i.ici { background:var(--energie); }
  .reseau { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px;
            font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:3px; }
  .reseau i { width:6px; height:6px; border-radius:50%; flex:none; }
  .r-hors { background:color-mix(in srgb,var(--froid) 16%,transparent); color:var(--froid); }
  .r-hors i { background:var(--froid); }
  .r-ok { background:color-mix(in srgb,var(--atteint) 18%,transparent); color:var(--atteint); }
  .r-ok i { background:var(--atteint); }

  /* -- vidéo, notes -- */
  .video { margin:4px 14px 0; border-radius:10px; height:84px; display:flex; align-items:center;
           justify-content:center; gap:9px; flex:none;
           background:color-mix(in srgb,var(--froid) 12%,var(--surface-2));
           border:1px solid color-mix(in srgb,var(--froid) 28%,transparent);
           color:var(--froid); font-size:13px; font-weight:600; }
  .video svg { width:25px; height:25px; }
  .note { display:inline-flex; gap:1px; }
  .note b { width:5px; height:5px; border-radius:1px; background:var(--trait-fort); }
  .note b.on { background:var(--energie); }
  .ing { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px; }
  .ing + .ing { border-top:1px solid var(--trait); }
  .ing i { width:7px; height:7px; border-radius:50%; flex:none; background:var(--atteint); }
  .ing i.ko { background:var(--energie); }
  .ing .q { margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--encre-2); }
  .ing.ko .q { color:var(--energie); font-weight:600; }

  /* -- barres de statistiques -- */
  .stat { display:flex; flex-direction:column; gap:6px; }
  .stat .st { display:flex; align-items:baseline; justify-content:space-between; font-size:13.5px; }
  .stat .st b { font-weight:600; }
  .stat .sv { font-family:var(--mono); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
  .jauge-h { height:9px; border-radius:5px; background:var(--surface-3); overflow:hidden; display:flex; }
  .jauge-h i { display:block; height:100%; }
  .spark { display:flex; align-items:flex-end; gap:4px; height:54px; }
  .spark i { flex:1; border-radius:2px 2px 0 0; background:var(--trait-fort); }
  .spark i.haut { background:var(--atteint); }
  /* =========== sections du document =========== */
  .section { margin-top:74px; }
  .section > h2 { font-size:27px; font-weight:700; letter-spacing:-.022em; margin:0 0 7px; }
  .section > .sous { margin:0 0 24px; color:var(--encre-2); max-width:66ch; }
  .cadre { overflow-x:auto; border:1px solid var(--trait); border-radius:10px; background:var(--surface); }
  table { border-collapse:collapse; width:100%; min-width:700px; }
  th, td { text-align:left; padding:12px 15px; vertical-align:top; border-bottom:1px solid var(--trait); }
  thead th { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.11em;
             text-transform:uppercase; color:var(--encre-3); background:var(--surface-2); }
  tbody tr:last-child td { border-bottom:none; }
  td.cle2 { font-family:var(--mono); font-size:12px; color:var(--energie); white-space:nowrap; font-weight:500; }
  td.role { font-weight:500; width:22%; }
  td.regle { color:var(--encre-2); font-size:14px; }
  td.regle em { font-style:normal; font-weight:600; color:var(--encre); }
  tbody tr.ecran-t td { background:var(--surface-2); font-family:var(--mono); font-size:10.5px;
                        font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-3); }
  .regles { list-style:none; padding:0; margin:0; display:grid; gap:12px;
            grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
  .regles li { background:var(--surface); border:1px solid var(--trait); border-left:3px solid var(--energie);
               border-radius:0 8px 8px 0; padding:14px 16px; }
  .regles li.hors { border-left-color:var(--trait-fort); }
  .regles b { display:block; font-size:14.5px; margin-bottom:3px; }
  .regles span { color:var(--encre-2); font-size:13.5px; line-height:1.5; }
  .note-bas { margin-top:32px; font-size:13px; color:var(--encre-3); font-family:var(--mono);
              line-height:1.65; max-width:76ch; }
  .note-bas em { font-style:normal; font-weight:600; color:var(--encre-2); }
  button:focus-visible, .dest:focus-visible, .etat:focus-visible { outline:2px solid var(--froid); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
  @media (max-width:720px) { .page { padding:34px 16px 60px; } .tel { width:100%; max-width:386px; } }

  /* ── L'application, et non plus la galerie ───────────────────────────────
     Dans la maquette, le telephone est un objet pose sur une planche. Ici il
     EST l'ecran : le cadre prend toute la fenetre, et la vue courante s'affiche
     seule. Rien d'autre ne change — tout le reste vient de la maquette telle
     quelle, parce qu'elle fait reference. */
  html, body { height:100%; }
  body { display:flex; }
  .tel { width:100%; height:100%; max-width:none; border-radius:0; border:none;
         margin:0; flex:1; min-height:0; }
  @media (min-width:520px) {
    body { align-items:center; justify-content:center; padding:20px; }
    .tel { width:386px; height:min(834px, calc(100vh - 40px)); border-radius:26px;
           border:1px solid var(--trait); }
  }
  [hidden] { display:none !important; }

  /* La barre de destination vit DANS le telephone : posee a cote, elle se
     retrouve en colonne voisine et l'ecran perd la moitie de sa largeur. */
  .tel > nav { flex:none; }

  /* Une ligne du bandeau d'urgence porte trois boutons : sans min-width nul sur
     la colonne de texte, le nom pousse les actes hors du cadre. */
  #bandeau-liste > div > span:first-child { min-width:0; }
  #bandeau-liste .actes { flex:none; }

  #auj-liste { flex:1 1 auto; min-height:0; overflow-y:auto; }

  /* OMISSION DE LA MAQUETTE : `.jtete` et `.grn` sont employees dans la vue de
     la semaine et ne sont declarees nulle part. Sans elles, le nom du jour, le
     badge d'ecole et le total du jour se collent en un seul mot. Ecrites dans
     l'idiome des regles voisines, pas inventees. */
  .jtete { display:flex; align-items:center; gap:8px; padding:12px 18px 6px;
           font-family:var(--mono); font-size:11px; letter-spacing:.06em;
           text-transform:uppercase; color:var(--encre-3); }
  .jtete .jn { font-weight:600; color:var(--encre-2); }
  .jtete .je { padding:1px 6px; border-radius:4px; background:var(--surface-3);
               color:var(--froid); font-size:9.5px; }
  .jtete .jk { margin-left:auto; font-variant-numeric:tabular-nums; }
  .jtete .jk b { color:var(--encre); }
  .jtete.ecole .jn { color:var(--froid); }

  .grn { display:flex; align-items:center; gap:6px; margin:0 18px 8px;
         padding:7px 10px; border-radius:8px; background:var(--surface-2);
         border:1px dashed var(--trait); font-size:12.5px; color:var(--encre-2); }
  .grn b { color:var(--encre); }
  .grn span { margin-left:auto; font-family:var(--mono); font-size:11.5px; }

  /* Une liste qui n'a pas encore repondu ne doit pas ressembler a une liste
     vide : l'un se attend, l'autre se decide. */
  .chargement { padding:28px 16px; text-align:center; color:var(--encre-3);
                font-family:var(--mono); font-size:11px; letter-spacing:.08em;
                text-transform:uppercase; }
  .panne { margin:12px; padding:12px 14px; border:1px solid var(--urgence);
           border-radius:10px; color:var(--urgence); font-size:13px; line-height:1.5; }