/* ============================================================
   Secret Scout Pro V2 — feuille de style unique
   Système de jetons (audit design §4) : douze rôles de couleur en
   sombre et en clair, sept tailles de texte, grille de 4 px, quatre
   rayons, trois élévations. Aucune couleur hors des jetons.
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root{
  /* Jeu A « Nuit claire » — sombre (par défaut) */
  --bg:#0d1526; --surface-1:#16203a; --surface-2:#1b2745; --surface-3:#22305a; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text-1:#f5f7fa; --text-2:#a9b5cb; --text-3:#8794ad;
  --action:#22c55e; --action-ink:#062b14; --action-hover:#2ad368;
  --ok:#4ade80; --warn:#fbbf24; --crit:#f87171;
  --ok-soft:rgba(74,222,128,.14); --warn-soft:rgba(251,191,36,.14); --crit-soft:rgba(248,113,113,.14);
  --cat-tech:#38bdf8; --cat-tact:#818cf8; --cat-phys:#c084fc; --cat-ment:#f472b6;
  --fam-jour:#fbbf24; --fam-equipe:#60a5fa; --fam-moi:#22c55e; --fam-vivier:#c7d2e6;
  --focus:#22c55e;
  --overlay:rgba(5,9,18,.62);
  --photo-filter:saturate(.85) brightness(.9);

  /* Typographie */
  --font-ui:'Geist','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono','SFMono-Regular',Consolas,monospace;
  --t-xs:11px; --t-s:12px; --t-m:13px; --t-l:15px; --t-xl:18px; --t-2xl:22px; --t-3xl:28px; --t-count:36px;

  /* Espacements, densité, rayons */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --row-h:36px; --card-pad:12px; --gap:8px; --touch:32px;
  --r-1:4px; --r-2:8px; --r-3:12px; --r-full:999px;

  /* Élévations */
  --e-1:0 8px 24px -12px rgba(0,0,0,.6); --e-2:0 24px 48px -16px rgba(0,0,0,.7);

  /* Mouvement */
  --d-1:120ms; --d-2:180ms; --d-3:240ms; --ease:cubic-bezier(.2,.8,.2,1);

  /* Coque */
  --side-w:232px; --side-w-mini:64px; --top-h:56px; --bottom-h:64px;
  color-scheme:dark;
}

/* Clair « Jour » / mode Terrain */
:root[data-mode="clair"], :root[data-mode="terrain"]{
  --bg:#f3f5f8; --surface-1:#ffffff; --surface-2:#eef1f6; --surface-3:#e3e8f0; --line:#d8dee8; --line-strong:#c3ccd9;
  --text-1:#0f172a; --text-2:#3f4b5f; --text-3:#5b687c;
  --action:#15803d; --action-ink:#ffffff; --action-hover:#166f36;
  --ok:#15803d; --warn:#a16207; --crit:#b91c1c;
  --ok-soft:rgba(21,128,61,.12); --warn-soft:rgba(161,98,7,.12); --crit-soft:rgba(185,28,28,.12);
  --cat-tech:#0369a1; --cat-tact:#4f46e5; --cat-phys:#7e22ce; --cat-ment:#be185d;
  --fam-jour:#a16207; --fam-equipe:#1d4ed8; --fam-moi:#15803d; --fam-vivier:#475569;
  --focus:#15803d;
  --overlay:rgba(15,23,42,.45);
  --photo-filter:saturate(.6) brightness(1.15);
  --e-1:0 8px 24px -12px rgba(15,23,42,.18); --e-2:0 24px 48px -16px rgba(15,23,42,.25);
  color-scheme:light;
}
/* Terrain : gris remontés, densité confort, chiffres et boutons +2 px */
:root[data-mode="terrain"]{ --text-3:#3f4b5f; --row-h:56px; --card-pad:16px; --gap:12px; --touch:44px; --t-m:15px; --t-l:17px; }
/* Densité confort (téléphone) */
:root[data-densite="confort"]{ --row-h:56px; --card-pad:16px; --gap:12px; --touch:44px; }

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text-1);font-family:var(--font-ui);font-size:var(--t-m);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-1)}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.ic.s14{width:14px;height:14px} svg.ic.s20{width:20px;height:20px} svg.ic.s24{width:24px;height:24px}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tab-num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
.t-xs{font-size:var(--t-xs);font-weight:500;line-height:1.35} .t-s{font-size:var(--t-s)} .t-l{font-size:var(--t-l)} .t-xl{font-size:var(--t-xl);font-weight:600;line-height:1.3}
.lbl{font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ---------- 3. Coque ---------- */
.coque{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:var(--top-h) 1fr;min-height:100vh;min-height:100dvh}
.side{grid-row:1/3;background:var(--surface-1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:var(--s-3);gap:var(--s-2);position:sticky;top:0;height:100vh;height:100dvh}
.marque{display:flex;align-items:center;gap:10px;padding:6px 8px 10px}
.marque .logo{width:32px;height:32px;border-radius:var(--r-2);background:var(--action);color:var(--action-ink);display:grid;place-items:center;font-weight:700;font-size:var(--t-s);flex:none}
.marque b{display:block;font-size:var(--t-l);font-weight:600;line-height:1.2}
.marque span{display:block;font-size:var(--t-s);color:var(--text-3)}
.btn-observer{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:var(--r-2);background:var(--action);color:var(--action-ink);font-weight:600;font-size:var(--t-l);transition:background var(--d-1) var(--ease)}
.btn-observer:hover{background:var(--action-hover)}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:var(--s-2)}
.nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-2);color:var(--text-2);text-decoration:none;font-weight:500;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.nav a:hover{background:var(--surface-2);color:var(--text-1)}
.nav a.on{background:var(--surface-2);color:var(--text-1)}
.nav a .cnt{margin-left:auto;font-size:var(--t-xs);font-weight:600;padding:2px 7px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2);font-variant-numeric:tabular-nums}
.nav a.on .cnt,.nav a .cnt.warn{background:var(--warn);color:#2a1d00}
.side-pied{margin-top:auto;padding:10px 8px 4px;border-top:1px solid var(--line);font-size:var(--t-s);color:var(--text-3);display:flex;flex-direction:column;gap:2px}
.haut{grid-column:2;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);height:var(--top-h);background:var(--bg);border-bottom:1px solid var(--line)}
.haut h1{font-size:var(--t-xl);font-weight:600;line-height:1.2;white-space:nowrap}
.haut .sous{font-size:var(--t-s);color:var(--text-3);margin-left:-4px}
.recherche{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:var(--r-2);background:var(--surface-1);border:1px solid var(--line);color:var(--text-3);cursor:text}
.recherche:hover{border-color:var(--line-strong)}
.recherche span{flex:1;text-align:left}
.recherche kbd{font-family:var(--font-mono);font-size:var(--t-xs);padding:2px 6px;border-radius:var(--r-1);background:var(--surface-2);border:1px solid var(--line);color:var(--text-3)}
.haut .actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.ibtn{width:36px;height:36px;border-radius:var(--r-2);display:grid;place-items:center;color:var(--text-2);position:relative;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.ibtn:hover{background:var(--surface-2);color:var(--text-1)}
.ibtn .pastille{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);background:var(--crit);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-1);display:grid;place-items:center;font-size:var(--t-s);font-weight:600;flex:none}
.avatar.s24{width:24px;height:24px;font-size:10px}
.avatar.s40{width:40px;height:40px;font-size:var(--t-l)}
.vue{grid-column:2;padding:var(--s-5);min-width:0}
.vue > .ecran{animation:fondu 150ms var(--ease)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.bas{display:none}

/* Tablette : volet replié */
@media (max-width:1023px) and (min-width:640px){
  .coque{grid-template-columns:var(--side-w-mini) 1fr}
  .side{padding:var(--s-2)}
  .marque b,.marque span,.nav a span:not(.cnt),.btn-observer span,.side-pied{display:none}
  .nav a{justify-content:center;padding:0}
  .nav a .cnt{position:absolute;transform:translate(14px,-12px)}
  .btn-observer{height:40px}
}
/* Téléphone : barre basse */
@media (max-width:639px){
  :root{--row-h:56px;--card-pad:16px;--gap:12px;--touch:44px;--t-m:15px;--top-h:52px}
  .coque{grid-template-columns:1fr;grid-template-rows:var(--top-h) 1fr}
  .side{display:none}
  .haut{grid-column:1;padding:0 var(--s-4);gap:var(--s-2)}
  .haut h1{font-size:var(--t-xl)}
  .haut .sous{display:none}
  .recherche{display:none}
  .vue{grid-column:1;padding:var(--s-4) var(--s-4) calc(var(--bottom-h) + 24px)}
  .bas{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:calc(var(--bottom-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface-1);border-top:1px solid var(--line);z-index:30}
  .bas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--t-xs);font-weight:500;color:var(--text-3);text-decoration:none}
  .bas a.on{color:var(--text-1)}
  .bas a.on svg{color:var(--action)}
  .bas a.centre{position:relative}
  .bas a.centre .rond{width:48px;height:48px;border-radius:var(--r-full);background:var(--action);color:var(--action-ink);display:grid;place-items:center;margin-top:-22px;box-shadow:var(--e-1)}
  .bas a.centre .rond svg{color:var(--action-ink)}
}

/* ---------- 4. Composants ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-height:var(--touch);padding:0 12px;border-radius:var(--r-2);background:var(--surface-2);color:var(--text-1);font-weight:500;border:1px solid transparent;white-space:nowrap;transition:background var(--d-1) var(--ease),border-color var(--d-1) var(--ease)}
.btn:hover{background:var(--surface-3)}
.btn.primaire{background:var(--action);color:var(--action-ink);font-weight:600}
.btn.primaire:hover{background:var(--action-hover)}
.btn.contour{background:transparent;border-color:var(--line-strong)}
.btn.contour:hover{background:var(--surface-2)}
.btn.discret{background:transparent;color:var(--text-2)}
.btn.discret:hover{background:var(--surface-2);color:var(--text-1)}
.btn.danger{background:var(--crit-soft);color:var(--crit)}
.btn.petit{height:28px;min-height:28px;padding:0 10px;font-size:var(--t-s)}
.btn.large{height:44px;min-height:44px;padding:0 18px;font-size:var(--t-l)}
.btn.bloc{width:100%}

.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid transparent;font-size:var(--t-s);font-weight:500;color:var(--text-2);white-space:nowrap;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease),border-color var(--d-1) var(--ease)}
.chip:hover{color:var(--text-1);background:var(--surface-3)}
.chip.on{background:var(--action);color:var(--action-ink);font-weight:600}
.chip.contour{background:transparent;border-color:var(--line-strong)}
.chip .x{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-full);margin-right:-4px}
.chip .x:hover{background:rgba(0,0,0,.15)}

.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--r-1);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.crit{background:var(--crit-soft);color:var(--crit)}
.badge.action{background:var(--action);color:var(--action-ink)}
.niveau{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-1);font-weight:700;font-size:var(--t-s);background:var(--surface-3);color:var(--text-1);font-family:var(--font-mono)}
.niveau.A{background:var(--action);color:var(--action-ink)} .niveau.B{background:var(--surface-3)} .niveau.C{background:transparent;border:1px solid var(--line-strong);color:var(--text-2)}
.point{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);background:var(--text-3);flex:none}
.point.ok{background:var(--ok)} .point.warn{background:var(--warn)} .point.crit{background:var(--crit)} .point.jour{background:var(--fam-jour)} .point.equipe{background:var(--fam-equipe)} .point.moi{background:var(--fam-moi)} .point.vivier{background:var(--fam-vivier)}

.carte{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--card-pad)}
.carte-tete{display:flex;align-items:center;gap:8px;margin-bottom:var(--s-2)}
.carte-tete h3{font-size:var(--t-l);font-weight:600;flex:1;min-width:0}
.carte-tete .cnt{font-family:var(--font-mono);font-weight:700;font-size:var(--t-xl);font-variant-numeric:tabular-nums}
.compteur{font-family:var(--font-mono);font-weight:700;font-size:var(--t-count);line-height:1;font-variant-numeric:tabular-nums}
.compteur.jour{color:var(--fam-jour)} .compteur.equipe{color:var(--fam-equipe)} .compteur.moi{color:var(--fam-moi)} .compteur.vivier{color:var(--fam-vivier)}
.tuile{position:relative;overflow:hidden}
.tuile .fond{position:absolute;top:0;right:0;bottom:0;width:46%;object-fit:cover;opacity:.3;filter:var(--photo-filter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%);pointer-events:none}
.tuile > *:not(.fond){position:relative}

.lignes{display:flex;flex-direction:column}
.ligne{display:flex;align-items:center;gap:10px;min-height:var(--row-h);padding:0 4px;border-bottom:1px solid var(--line);color:var(--text-1);text-decoration:none;font-size:var(--t-m)}
.ligne:last-child{border-bottom:0}
.ligne:hover{background:var(--surface-2)}
.ligne .h{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-2);width:44px;flex:none}
.ligne .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .m{color:var(--text-3);font-size:var(--t-s);flex:none}

.tableau{width:100%;border-collapse:collapse;font-size:var(--t-m)}
.tableau th{position:sticky;top:0;z-index:2;background:var(--surface-1);text-align:left;font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);height:36px;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.tableau th.tri{cursor:pointer} .tableau th.tri:hover{color:var(--text-1)}
.tableau th .fl{display:inline-block;margin-left:4px;opacity:.5}
.tableau th.actif{color:var(--text-1)} .tableau th.actif .fl{opacity:1}
.tableau td{height:var(--row-h);padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tableau td.txt{max-width:0;overflow:hidden;text-overflow:ellipsis}
.tableau tbody tr{cursor:pointer;transition:background var(--d-1) var(--ease)}
.tableau tbody tr:hover{background:var(--surface-2)}
.tableau tbody tr.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--action)}
.tableau td.num,.tableau th.num{text-align:right;font-variant-numeric:tabular-nums}
.tableau .nom b{font-weight:600}
.tableau .nom small{display:block;color:var(--text-3);font-size:var(--t-s)}

.onglets{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s-4);overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;color:var(--text-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--d-1) var(--ease)}
.onglets button:hover{color:var(--text-1)}
.onglets button.on{color:var(--text-1);border-bottom-color:var(--action)}
.onglets button .cnt{font-family:var(--font-mono);font-size:var(--t-xs);font-weight:600;padding:1px 6px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2)}
.onglets button.on .cnt{background:var(--action);color:var(--action-ink)}

.champ{display:flex;flex-direction:column;gap:6px}
.champ > span{font-size:var(--t-xs);font-weight:500;color:var(--text-2)}
.champ input,.champ textarea,.champ select{width:100%;min-height:var(--touch);padding:8px 10px;border-radius:var(--r-2);background:var(--surface-2);border:1px solid var(--line);color:var(--text-1);transition:border-color var(--d-1) var(--ease)}
.champ input:focus,.champ textarea:focus{border-color:var(--action);outline:none}
.champ textarea{resize:vertical;min-height:88px;line-height:1.45}
.champ .aide{font-size:var(--t-s);color:var(--text-3)}
.champ .erreur{font-size:var(--t-s);color:var(--crit)}
.champ.invalide input,.champ.invalide textarea{border-color:var(--crit)}
.coche{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);color:var(--text-3)}
.coche.ok{color:var(--ok)} .coche.local{color:var(--warn)} .coche.echec{color:var(--crit)}

.vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:var(--s-6) var(--s-4);color:var(--text-2)}
.vide svg{width:28px;height:28px;color:var(--text-3)}
.vide h3{font-size:var(--t-l);font-weight:600;color:var(--text-1)}
.vide p{max-width:44ch;font-size:var(--t-m)}
.vide .btn{margin-top:4px}

.menu-deroulant{position:fixed;z-index:60;min-width:220px;max-width:320px;max-height:60vh;overflow:auto;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--e-1);padding:6px;animation:menu-in var(--d-2) var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-deroulant .titre{font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:8px 10px 4px}
.menu-deroulant button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border-radius:var(--r-2);text-align:left;color:var(--text-1);font-size:var(--t-m)}
.menu-deroulant button:hover{background:var(--surface-2)}
.menu-deroulant button.on{font-weight:600}
.menu-deroulant button .pastille-abr{font-family:var(--font-mono);font-size:var(--t-xs);padding:1px 5px;border-radius:var(--r-1);background:var(--surface-3);color:var(--text-2)}
.menu-deroulant button .coche-on{margin-left:auto;color:var(--action)}
.menu-deroulant .sep{height:1px;background:var(--line);margin:6px 4px}
.menu-deroulant button.effacer{color:var(--text-3)}

.voile{position:fixed;inset:0;z-index:70;background:var(--overlay);display:grid;place-items:center;padding:var(--s-4);animation:fondu var(--d-2) var(--ease)}
.fenetre{width:min(480px,100%);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--e-2);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.fenetre h2{font-size:var(--t-xl);font-weight:600}
.fenetre p{color:var(--text-2)}
.fenetre .pied{display:flex;justify-content:flex-end;gap:8px;margin-top:var(--s-2)}
@media (max-width:639px){ .voile{align-items:end;padding:0} .fenetre{width:100%;border-radius:var(--r-3) var(--r-3) 0 0;padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom))} }

.toasts{position:fixed;left:50%;bottom:calc(var(--bottom-h) + 16px);transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:640px){ .toasts{bottom:24px} }
.toast{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-2);background:var(--text-1);color:var(--bg);font-size:var(--t-m);font-weight:500;box-shadow:var(--e-1);animation:menu-in var(--d-2) var(--ease)}
.toast.ok svg{color:var(--action)} .toast.crit{background:var(--crit);color:#fff}

.palette{position:fixed;inset:0;z-index:75;background:var(--overlay);padding:10vh var(--s-4) 0;display:flex;justify-content:center;align-items:flex-start;animation:fondu var(--d-2) var(--ease)}
.palette-boite{width:min(640px,100%);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--e-2);overflow:hidden}
.palette-boite .saisie{display:flex;align-items:center;gap:10px;padding:0 14px;height:52px;border-bottom:1px solid var(--line)}
.palette-boite input{flex:1;background:transparent;border:0;outline:none;font-size:var(--t-l);color:var(--text-1)}
.palette-boite .resultats{max-height:52vh;overflow:auto;padding:6px}
.palette-boite .groupe{font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:10px 10px 4px}
.palette-boite .res{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border-radius:var(--r-2);text-align:left}
.palette-boite .res:hover,.palette-boite .res.on{background:var(--surface-2)}
.palette-boite .res .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-boite .res .m{color:var(--text-3);font-size:var(--t-s);white-space:nowrap}

/* ---------- 5. Mises en page d'écran ---------- */
.ecran-tete{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}
.ecran-tete h2{font-size:var(--t-2xl);font-weight:700;line-height:1.2}
.ecran-tete .sous{color:var(--text-3);font-size:var(--t-m);margin-top:2px}
.ecran-tete .droite{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grille{display:grid;gap:var(--gap)}
.grille.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .grille.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .grille.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .grille.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1279px){ .grille.c6{grid-template-columns:repeat(3,minmax(0,1fr))} .grille.c4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .grille.c2,.grille.c3,.grille.c4,.grille.c6{grid-template-columns:1fr} .grille.c6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.partage{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-4);align-items:start}
.partage .detail{position:sticky;top:calc(var(--top-h) + 24px);max-height:calc(100vh - var(--top-h) - 48px);overflow:auto}
@media (max-width:1279px){ .partage{grid-template-columns:1fr} .partage .detail{position:static;max-height:none} }
.filtres{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:var(--s-3)}
.filtres .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.indicateur{display:flex;flex-direction:column;gap:4px;padding:var(--card-pad);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-3)}
.indicateur .k{font-size:var(--t-xs);font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:6px}
.indicateur .v{font-family:var(--font-mono);font-weight:700;font-size:var(--t-3xl);line-height:1;font-variant-numeric:tabular-nums}
.indicateur .d{font-size:var(--t-s);color:var(--text-3)}
.indicateur .d.ok{color:var(--ok)} .indicateur .d.crit{color:var(--crit)}
.indicateur svg.courbe{width:100%;height:28px;margin-top:2px}
.indicateur svg.courbe path{fill:none;stroke:var(--text-3);stroke-width:1.5}
.indicateur svg.courbe circle{fill:var(--text-1)}

/* Fiche joueur */
.fiche-tete{display:flex;gap:var(--s-4);align-items:flex-start;flex-wrap:wrap}
.fiche-tete .identite{flex:1;min-width:240px}
.fiche-tete h2{font-size:var(--t-2xl);font-weight:700;line-height:1.15}
.fiche-tete .meta{color:var(--text-2);margin-top:2px}
.fiche-tete .marqueurs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fiche-tete .actions{display:flex;flex-wrap:wrap;gap:6px}
.journal{display:flex;flex-direction:column;position:relative;padding-left:20px}
.journal::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;background:var(--line-strong)}
.evt{position:relative;padding:8px 0 12px}
.evt::before{content:"";position:absolute;left:-19px;top:14px;width:10px;height:10px;border-radius:var(--r-full);background:var(--fam-equipe);box-shadow:0 0 0 3px var(--surface-1)}
.evt.obs::before{background:var(--action)} .evt.info::before{background:var(--fam-jour)} .evt.rapport::before{background:var(--cat-phys)} .evt.match::before{background:var(--fam-equipe)}
.evt .d{font-size:var(--t-xs);color:var(--text-3);font-family:var(--font-mono)}
.evt .t{font-weight:600;margin-top:1px}
.evt .x{color:var(--text-2);margin-top:2px}
.evt .s{font-size:var(--t-s);color:var(--text-3);margin-top:3px}

/* Observer */
.observer{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-3)}
.observer .match{display:flex;align-items:center;justify-content:space-between;gap:8px}
.observer .match b{font-size:var(--t-l);font-weight:600;display:block}
.observer .match small{color:var(--text-3);font-size:var(--t-s)}
.chrono{font-family:var(--font-mono);font-weight:700;font-size:var(--t-2xl);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.chrono::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--crit);animation:bat 1.2s infinite}
@keyframes bat{50%{opacity:.25}}
.joueurs-match{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.joueurs-match::-webkit-scrollbar{display:none}
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.niveaux button{height:64px;border-radius:var(--r-2);background:var(--surface-2);border:1px solid var(--line);font-family:var(--font-mono);font-weight:700;font-size:var(--t-2xl);color:var(--text-2);transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.niveaux button.on{background:var(--action);color:var(--action-ink);border-color:var(--action)}
.reperes{display:flex;flex-wrap:wrap;gap:6px}
.suite{display:flex;flex-direction:column;gap:6px}
.suite button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--r-2);background:var(--surface-1);border:1px solid var(--line);text-align:left;font-weight:500}
.suite button.on{border-color:var(--action);background:var(--surface-2)}
.suite button .fin{margin-left:auto;color:var(--text-3);font-size:var(--t-s)}
.observer-pied{position:sticky;bottom:calc(var(--bottom-h) + 8px);display:flex;gap:8px;padding-top:8px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
@media (min-width:640px){ .observer-pied{bottom:8px} }

/* Planning */
.semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}
.jour-case{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-3);padding:10px;min-height:140px;display:flex;flex-direction:column;gap:6px}
.jour-case.aujourdhui{border-color:var(--fam-jour)}
.jour-case .dn{font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.jour-case .dn b{display:block;font-family:var(--font-mono);font-size:var(--t-xl);color:var(--text-1);letter-spacing:0}
.evt2{border-radius:var(--r-2);padding:6px 8px;background:var(--surface-2);font-size:var(--t-s);line-height:1.3;border-left:3px solid var(--fam-equipe);cursor:pointer}
.evt2.det{border-left-color:var(--fam-jour)} .evt2.obs{border-left-color:var(--action)} .evt2.dispo{border-left-color:var(--fam-vivier)}
.evt2 b{display:block;font-weight:600;color:var(--text-1)}
.evt2 span{color:var(--text-2)}
@media (max-width:1023px){ .semaine{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .semaine{grid-template-columns:1fr} .jour-case{min-height:0} }

/* Connexion */
.connexion{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--s-4);background:var(--bg)}
.connexion .boite{width:min(400px,100%);display:flex;flex-direction:column;gap:var(--s-3)}
.connexion h1{font-size:var(--t-2xl);font-weight:700}
.connexion p{color:var(--text-2)}

/* Chargement */
.squelette{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sq 1.2s infinite;border-radius:var(--r-1);height:12px}
@keyframes sq{to{background-position:-200% 0}}
.bandeau{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--r-2);background:var(--surface-2);border:1px solid var(--line);font-size:var(--t-m)}
.bandeau.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)} .bandeau.crit{background:var(--crit-soft);border-color:transparent;color:var(--crit)} .bandeau.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.bandeau .fermer{margin-left:auto}

/* Vue partagée : les colonnes secondaires se masquent quand le détail est ouvert */
.partage td.sec,.partage th.sec{display:none}
@media (max-width:639px){ .tableau td.sec,.tableau th.sec{display:none} }