/* ===================================================================
   Relevé Incendie — feuille de style unique
   -------------------------------------------------------------------
   Une seule cascade, ordonnée par @layer. Aucun sélecteur n'est redéfini
   dans sa propre couche, et le seul !important est celui qu'impose la
   préférence système « animations réduites ». Pour modifier un composant,
   on modifie sa couche — pas une couche postérieure qui l'écrase.

   tokens      couleurs, échelles, densités
   base        réinitialisation, typographie, champs
   shell       en-tête, rail, contenu, dock — la charpente responsive
   composants  cartes, boutons, listes, panneaux
   ecrans      ce qui n'appartient qu'à un écran

   Direction : « poste de contrôle ». Géométrie franche sur les surfaces
   structurelles, rayon léger sur les objets flottants uniquement.
   L'orange est la marque et la structure, jamais un état : les trois
   états ont leurs teintes propres — olive, ambre, carmin.
   =================================================================== */

@layer tokens, base, shell, composants, ecrans;

/* =================================================================== */
@layer tokens {

:root{
  /* --- plein soleil : papier chaud, jamais de blanc pur --- */
  --bg:#F4F1E8;
  --surf:#FBF9F2;
  --surf2:#EDE9DC;
  --line:#D6CDBA;
  --line2:#BFB49A;
  --text:#16130F;
  --dim:#615743;          /* 5,9:1 sur --surf — AA sur petit texte */

  --accent:#D93D07;       /* 4,6:1 sur --surf — la marque */
  --accent-ink:#FFFFFF;
  --accent-soft:#FBE6DC;
  --bronze:#7A5720;

  --ok:#455A2C;   --ok-soft:#E7EADD;   --ok-ink:#FFFFFF;   /* olive  */
  --warn:#7A5C0C; --warn-soft:#F3EBD6; --warn-ink:#FFFFFF; /* ambre  */
  --bad:#A80F25;  --bad-soft:#F7E1E4;  --bad-ink:#FFFFFF;  /* carmin */

  /* --- échelle typographique --- */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:21px; --fs-2xl:28px;

  /* --- espacements --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* --- densité : recalculée en mode gants --- */
  --tap:48px;
  --fs:var(--fs-base);
  --gap:16px;
  --pad:16px;
  --rail:0px;

  /* --- géométrie --- */
  --r-flottant:10px;      /* feuilles, toasts, panneaux : seuls arrondis */
  --r-douce:6px;          /* vignettes, pastilles */

  /* --- polices système : identiques hors ligne, aucun téléchargement --- */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:var(--sans);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --ombre-flottant:0 8px 32px rgba(12,11,10,.24);
}

html[data-theme="dark"]{
  --bg:#16130F;
  --surf:#1E1A14;
  --surf2:#282219;
  --line:#3A3227;
  --line2:#544936;
  --text:#EDE7D9;
  --dim:#A2977F;          /* 5,3:1 sur --surf — relevé pour atteindre AA */

  --accent:#FF6A33;
  --accent-ink:#1A0C05;
  --accent-soft:#3A1D0E;
  --bronze:#C9974A;

  --ok:#9BAD72;   --ok-soft:#1E2416;   --ok-ink:#12160C;
  --warn:#DFAF3E; --warn-soft:#2A2110; --warn-ink:#1C1506;
  --bad:#FF6B75;  --bad-soft:#2E1418;  --bad-ink:#1F0508;

  --ombre-flottant:0 8px 32px rgba(0,0,0,.55);
}

/* Mode gants : cibles et texte agrandis, marges resserrées pour compenser. */
html[data-density="gants"]{
  --tap:64px;
  --fs:18px;
  --gap:18px;
  --pad:14px;
}

}

/* =================================================================== */
@layer base {

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0; padding:0;
  background:var(--bg);
  overscroll-behavior:none;      /* tirer vers le bas rechargeait l'app en plein relevé */
}

body{
  font-family:var(--sans);
  color:var(--text);
  font-size:var(--fs);
  line-height:1.45;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  min-height:100dvh;
}

/* La saisie reste sélectionnable : on copie une référence, un numéro de série. */
input,textarea,select,[contenteditable],.sel,.sel *{
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}

h1,h2,h3{margin:0}

/* Les grands nombres et les identifiants en display serré, le reste en labeur,
   tout ce qui est code ou mesure en chasse fixe : trois rôles, aucun mélange. */
h1,.idt b,.ccn b,.jgc b,.ck b,.pv b,.vk b,.stat b,.jl b,.fbv,.rec .id{
  font-family:var(--disp);
  letter-spacing:-.02em;
  font-weight:700;
}

.eb,.sub,.sh2,.lb,.ccs span,.ccf em,.pv span,.vk span,.ck span,
.jgc span,.jl span,.prt span,.ccb,.fr span,.lgd,.rec .fam,.grpt{
  font-family:var(--mono);
}

button,input,select,textarea{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}

button{
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---- champs ---- */
label{display:block; margin-bottom:var(--sp-3)}
label>span{
  display:block;
  font-size:var(--fs-sm);
  font-weight:650;
  color:var(--dim);
  margin-bottom:var(--sp-1);
}

input,select,textarea{
  width:100%;
  min-height:var(--tap);
  padding:0 11px;
  border:1px solid var(--line2);
  background:var(--bg);
  border-radius:0;
  color:var(--text);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}

textarea{
  min-height:calc(var(--tap) * 1.4);
  padding:11px;
  resize:vertical;
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
}

input[type=checkbox]{
  width:22px; height:22px; min-height:0; flex:0 0 22px;
  accent-color:var(--accent);
}

.row{display:flex; gap:var(--sp-2)}
.row>*{flex:1; min-width:0}

/* ---- icônes ---- */
.ic{width:20px; height:20px; flex:0 0 20px; display:inline-block; vertical-align:-4px}
.ic.s{width:16px; height:16px; flex-basis:16px; vertical-align:-2px}
.ic.l{width:26px; height:26px; flex-basis:26px}

/* ---- mouvement ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

}

/* =================================================================== */
@layer shell {

/* -------------------------------------------------------------------
   CHARPENTE
   Chaque région a sa zone nommée. Rien n'est placé automatiquement :
   c'est ce qui garantit que le contenu ne peut pas être repoussé hors
   de l'écran quand une région change de taille.
   ------------------------------------------------------------------- */

body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:
    "entete"
    "contexte"
    "principal"
    "onglets";
}

/* ---- en-tête ---- */
.top{
  grid-area:entete;
  position:sticky; top:0; z-index:40;
  background:var(--accent); color:var(--accent-ink);
  padding:calc(9px + env(safe-area-inset-top)) var(--pad) 9px;
  display:flex; align-items:center; gap:var(--sp-2);
}
.top .t{flex:1; min-width:0}
.top h1{font-size:var(--fs-lg); font-weight:750; letter-spacing:-.01em}
.top .who{
  font-size:var(--fs-sm); opacity:.92;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.top button{
  background:rgba(255,255,255,.18);
  color:var(--accent-ink);
  width:40px; height:40px;
  font-size:17px; font-weight:700;
  display:grid; place-items:center; flex:0 0 auto;
}
.top button:active{background:rgba(255,255,255,.34)}

/* ---- bandeau de contexte / progression ---- */
.prog{
  grid-area:contexte;
  background:var(--surf);
  border-bottom:1px solid var(--line);
  padding:8px var(--pad) 9px;
}
.prog .l{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-sm); color:var(--dim); margin-bottom:6px;
}
.prog .l span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prog .l b{color:var(--text); font-family:var(--mono); flex:0 0 auto}
.track{height:5px; background:var(--surf2); overflow:hidden}
.track i{display:block; height:100%; background:var(--accent); width:0;
  transition:width .5s cubic-bezier(.22,.9,.28,1)}
.track i.ano{background:var(--bad)}

/* La progression ne concerne que la saisie : ailleurs elle n'a rien à dire. */
body:not([data-onglet="saisie"]) .prog{display:none}

/* ---- contenu ---- */
section{
  grid-area:principal;
  display:none;
  min-width:0;
  padding:var(--gap) var(--pad)
          calc(var(--gap) + env(safe-area-inset-bottom));
}
section.on{display:block}

/* ---- barre d'onglets (compact) ---- */
nav{
  grid-area:onglets;
  position:sticky; bottom:0; z-index:35;
  display:flex;
  background:var(--surf);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
nav::before{display:none}
nav button{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  padding:8px 2px;
  min-height:var(--tap);
  font-size:var(--fs-xs); font-weight:650;
  color:var(--dim);
  transition:color .16s ease;
}
nav button .ic{
  width:22px; height:22px; flex-basis:22px;
  opacity:.72;
  transition:opacity .16s ease,transform .16s ease;
}
nav button[aria-selected="true"]{
  color:var(--accent);
  box-shadow:inset 0 3px 0 var(--accent);
}
nav button[aria-selected="true"] .ic{opacity:1; transform:translateY(-1px)}

/* ---- dock d'action ---- */
/* Le dock se pose au-dessus de la barre d'onglets, jamais à sa place : en
   pleine saisie, le technicien doit pouvoir filer vers Organes ou Bilan
   sans d'abord quitter la fiche. */
.dock{
  position:fixed; left:0; right:0;
  bottom:calc(var(--kb,0px) + var(--navh,0px));
  z-index:45;
  background:var(--surf);
  border-top:1px solid var(--line2);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  display:none; gap:var(--sp-2);
  transition:bottom .18s ease;
}
.dock.on{display:flex}
.dock button{
  min-height:var(--tap);
  font-weight:750; font-size:var(--fs-base);
}
.dock .go{
  flex:1;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--mono); letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
}
.dock .go:active{background:var(--text); color:var(--bg)}
.dock .sec{
  flex:0 0 38%;
  background:var(--surf2); color:var(--text);
  border:1px solid var(--line2);
}
/* Clavier ouvert : le dock colle au clavier, la zone sûre n'a plus lieu d'être. */
html.kb .dock{padding-bottom:10px}

/* En compact, la barre d'onglets occupe le bas : le dock s'empile dessus,
   et le contenu se réserve la place des deux. */
@media (max-width:719.98px){
  :root{--navh:calc(56px + env(safe-area-inset-bottom))}
  body[data-onglet="saisie"] section{
    padding-bottom:calc(var(--tap) + 24px);
  }
  /* Clavier ouvert, le dock se colle au clavier : la barre d'onglets passe
     dessous, hors d'atteinte, et n'a plus à être comptée. */
  html.kb .dock{bottom:var(--kb,0px)}
}

/* -------------------------------------------------------------------
   PALIER MEDIUM — 720 px : tablette de terrain, iPad portrait inclus.
   Le rail passe sur le côté, le contenu respire en deux colonnes.
   ------------------------------------------------------------------- */
@media (min-width:720px){
  :root{--rail:76px; --pad:20px}

  body{
    grid-template-columns:var(--rail) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "onglets entete"
      "onglets contexte"
      "onglets principal";
  }

  nav{
    position:sticky; top:0; bottom:auto;
    height:100dvh;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:2px;
    border-top:0;
    border-right:1px solid var(--line);
    padding:calc(10px + env(safe-area-inset-top)) 6px 10px;
    overflow-y:auto;
  }
  nav button{
    flex:0 0 auto;
    min-height:60px;
    padding:8px 4px;
    font-size:10.5px;
    letter-spacing:.01em;
  }
  nav button[aria-selected="true"]{
    box-shadow:inset 3px 0 0 var(--accent);
    background:var(--accent-soft);
  }

  section{
    padding:var(--gap) var(--pad) var(--gap);
    max-width:940px;
  }

  .dock{left:var(--rail)}

  /* Deux colonnes là où les cartes sont indépendantes les unes des autres. */
  #s-fin.on,#s-param.on,#s-agenda.on{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--gap);
    align-items:start;
  }
  #s-fin>.scr,#s-param>.scr,#s-agenda>.scr,
  #s-fin>.stats,#s-agenda>.cal{grid-column:1/-1}
}

/* -------------------------------------------------------------------
   PALIER LARGE — 1180 px : poste fixe. Rail étendu, listes en table.
   ------------------------------------------------------------------- */
@media (min-width:1180px){
  :root{--rail:236px; --pad:26px}

  nav{padding:calc(14px + env(safe-area-inset-top)) 10px 14px; gap:3px}
  nav::before{
    content:attr(data-nom);
    display:block;
    font-family:var(--mono);
    font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--dim);
    padding:4px 12px 14px;
  }
  nav button{
    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
    text-align:left;
    min-height:48px;
    padding:10px 12px;
    font-size:var(--fs-md);
    font-family:var(--sans);
  }
  nav button .ic{width:21px; height:21px; flex-basis:21px}

  section{max-width:1280px}

  #s-fin.on,#s-param.on{grid-template-columns:repeat(3,minmax(0,1fr))}
}

}

/* =================================================================== */
@layer composants {

/* ---- titre d'écran ---- */
.scr{margin:0 0 var(--gap)}
.scr h1{font-size:var(--fs-xl); font-weight:780; letter-spacing:-.02em}
.scr p{margin:5px 0 0; font-size:var(--fs-sm); color:var(--dim); line-height:1.45; max-width:62ch}

/* ---- carte ---- */
.card{
  background:var(--surf);
  border:1px solid var(--line2);
  border-radius:0;
  padding:var(--pad);
  margin-bottom:var(--gap);
}
.card>h2,h2{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
  border-bottom:1px solid var(--line2);
  padding-bottom:7px; margin:0 0 var(--sp-3);
}

details.card{padding:0}
details.card>summary{
  padding:var(--pad);
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  min-height:var(--tap);
  list-style:none;
}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"▾"; color:var(--accent); font-size:15px; flex:0 0 auto}
details[open].card>summary::after{content:"▴"}
details.card>summary em{
  font-family:var(--sans);
  font-style:normal; font-weight:500;
  color:var(--text); font-size:var(--fs-sm);
  letter-spacing:0; text-transform:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:right; flex:1;
}
details.card>.in{padding:0 var(--pad) var(--pad)}

/* ---- boutons d'action ---- */
.act{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--tap);
  background:var(--accent); color:var(--accent-ink);
  font-weight:750; font-size:var(--fs-md);
  margin-bottom:var(--sp-2);
  transition:transform .12s ease,opacity .15s ease;
}
.act:active{transform:scale(.985)}
.act.sec{background:var(--surf2); color:var(--text); border:1px solid var(--line2); font-weight:650}
.act.rm{background:var(--surf); color:var(--bad); border:1px solid var(--bad); font-weight:650}

/* ---- champ avec bouton accolé ---- */
.avec,.withmic{display:flex; gap:6px; align-items:stretch}
.avec input,.withmic input,.withmic textarea{flex:1; min-width:0}
.avec button{
  flex:0 0 auto; min-width:var(--tap);
  border:1px solid var(--line2); background:var(--surf); color:var(--dim);
  font-size:15px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease,border-color .15s ease,color .15s ease;
}
.avec button:active{transform:scale(.93); border-color:var(--accent); color:var(--accent)}

.mic{
  flex:0 0 var(--tap); min-height:var(--tap);
  border:1px solid var(--line2); background:var(--surf); color:var(--dim);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.mic[aria-pressed="true"]{
  background:var(--bad); border-color:var(--bad); color:var(--bad-ink);
  animation:battement 1.1s ease-in-out infinite;
}
.mic[disabled]{opacity:.35}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- segments ---- */
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  flex:1 1 auto; min-width:92px; min-height:var(--tap);
  font-size:var(--fs-sm); font-weight:700;
  border:1px solid var(--line2); background:var(--surf); color:var(--dim);
  padding:10px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.seg button[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}

/* ---- pastilles de famille ---- */
.chips{
  display:flex; gap:6px;
  overflow-x:auto;
  padding:2px 0 var(--sp-3);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chips button{
  flex:0 0 auto; scroll-snap-align:start;
  padding:9px 13px; min-height:40px;
  border:1px solid var(--line2); background:var(--surf);
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em;
  font-weight:650; color:var(--dim); white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.chips button[aria-pressed="true"]{
  background:var(--text); border-color:var(--text); color:var(--bg); font-weight:750;
}
.chips button i{font-style:normal; font-size:var(--fs-xs); opacity:.7; margin-left:6px}

/* ---- ligne de données ---- */
.line{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-md);
}
.line:last-child{border-bottom:0}
.line span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.line b{font-family:var(--mono); font-weight:700; white-space:nowrap; flex:0 0 auto}
.line b .ko{color:var(--bad)} .line b .go{color:var(--ok)} .line b .wa{color:var(--warn)}

/* ---- encadrés ---- */
.info{
  background:var(--accent-soft);
  border-left:4px solid var(--accent);
  padding:11px 13px;
  font-size:var(--fs-sm);
  margin-bottom:var(--gap);
}
.info.good{background:var(--ok-soft); border-left-color:var(--ok)}
.info.warn{background:var(--warn-soft); border-left-color:var(--warn)}

.hint{font-size:var(--fs-sm); color:var(--dim); margin:var(--sp-2) 0 var(--sp-5); max-width:68ch}
.vide{font-size:var(--fs-sm); color:var(--dim); padding:6px 0}

.void{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-3);
  color:var(--dim); font-size:var(--fs-sm); line-height:1.5;
}
.void .ic{width:34px; height:34px; flex-basis:34px; opacity:.32}
.void b{font-size:var(--fs-md); font-weight:700; color:var(--text)}

.alert{
  display:none;
  background:var(--warn-soft);
  border-left:4px solid var(--warn);
  padding:10px 12px;
  font-size:var(--fs-sm);
  margin-bottom:var(--sp-3);
}

.new{
  border:1px solid var(--line2);
  border-left:3px solid var(--warn);
  background:var(--warn-soft);
  padding:10px 12px; margin-bottom:var(--sp-2);
  font-size:var(--fs-md);
}

/* ---- champs groupés (panneaux) ---- */
.grp{
  border:1px solid var(--line2);
  background:var(--surf);
  margin-bottom:var(--gap);
}
.grp label{margin:0; padding:10px 12px; border-bottom:1px solid var(--line2)}
.grp label:last-child{border-bottom:0}
.grp input,.grp select,.grp textarea{
  border:0; min-height:36px; padding:2px 0;
  background:transparent; font-size:var(--fs-base);
}
.grp input:focus,.grp select:focus,.grp textarea:focus{outline:0}
.grp label:focus-within{background:var(--surf2)}

/* ---- choix dans un panneau ---- */
.choix{display:flex; flex-direction:column; gap:var(--sp-2)}
.choix button{
  font-size:var(--fs-base); font-weight:600; text-align:left;
  padding:14px; min-height:var(--tap);
  border:1px solid var(--line2); background:var(--surf); color:var(--text);
  transition:border-color .15s ease;
}
.choix button.on{border-color:var(--accent); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}

/* -------------------------------------------------------------------
   OBJETS FLOTTANTS — les seuls à porter un rayon.
   ------------------------------------------------------------------- */

.ov{
  position:fixed; inset:0; z-index:60;
  background:rgba(12,11,10,.55);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
  backdrop-filter:blur(2px);
}
.ov.on{opacity:1; pointer-events:auto}

.sh{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:var(--bg);
  border-radius:var(--r-flottant) var(--r-flottant) 0 0;
  transform:translateY(102%);
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
  max-height:88dvh;
  display:flex; flex-direction:column;
  box-shadow:var(--ombre-flottant);
  pointer-events:none;
}
.sh.on{transform:translateY(0); pointer-events:auto}
.sh .grab{width:38px; height:4px; border-radius:2px; background:var(--line2); margin:8px auto 0; flex:0 0 auto}
.sh .hd{display:flex; align-items:center; gap:var(--sp-3); padding:14px 18px 10px; flex:0 0 auto}
.sh .hd b{flex:1; font-size:var(--fs-lg); font-weight:750; letter-spacing:-.01em}
.sh .hd button{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  background:var(--surf2); color:var(--dim);
  display:flex; align-items:center; justify-content:center;
}
.sh .bd{padding:0 18px 8px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch}
.sh .ft{
  padding:12px 18px calc(16px + env(safe-area-inset-bottom));
  flex:0 0 auto;
  border-top:1px solid var(--line2);
  background:var(--surf);
}
.sh .msg{font-size:var(--fs-base); line-height:1.5; white-space:pre-line}
.sh .msg .dt{color:var(--dim); font-size:var(--fs-sm); margin-top:10px}

@media (min-width:720px){
  .sh{
    left:50%; right:auto; bottom:auto; top:50%;
    transform:translate(-50%,-44%) scale(.97);
    width:min(560px,92vw);
    max-height:82dvh;
    border-radius:var(--r-flottant);
    opacity:0;
    transition:transform .24s cubic-bezier(.22,.9,.3,1),opacity .18s ease;
  }
  .sh.on{transform:translate(-50%,-50%); opacity:1}
  .sh .grab{display:none}
}

/* messages fugaces */
.tst{
  position:fixed; left:12px; right:12px;
  bottom:calc(var(--tap) + 40px + env(safe-area-inset-bottom));
  z-index:70;
  background:var(--text); color:var(--bg);
  border-radius:var(--r-flottant);
  padding:13px 15px;
  display:flex; align-items:center; gap:11px;
  font-size:var(--fs-md); font-weight:600;
  box-shadow:var(--ombre-flottant);
  transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .26s cubic-bezier(.22,.9,.3,1),opacity .2s ease;
}
.tst.on{transform:translateY(0); opacity:1; pointer-events:auto}
.tst .ic{color:var(--bg); opacity:.9}
.tst.ok .ic{color:#7BD6A0}
.tst.ko .ic{color:#FF8E9A}
.tst button{margin-left:auto; color:#FFB08C; font-size:var(--fs-sm); font-weight:750; padding:4px 2px}

.toast{
  position:fixed; left:var(--pad); right:var(--pad);
  bottom:calc(var(--tap) + 40px + env(safe-area-inset-bottom));
  z-index:60;
  background:var(--text); color:var(--bg);
  border-radius:var(--r-flottant);
  padding:12px 14px;
  display:none; align-items:center; gap:var(--sp-3);
  transform:translateY(8px); opacity:0;
  transition:transform .18s ease,opacity .18s ease;
  box-shadow:var(--ombre-flottant);
}
.toast.show{display:flex; transform:none; opacity:1}
.toast span{flex:1; font-size:var(--fs-md)}
.toast button{
  border:1px solid var(--bg); color:var(--bg);
  padding:9px 14px; font-weight:750; font-size:var(--fs-sm);
}

@media (min-width:720px){
  .tst,.toast{left:auto; right:24px; width:min(420px,42vw); bottom:24px}
}

/* bandeau d'erreur */
#err{
  display:none;
  position:fixed; left:0; right:0; top:0; z-index:99;
  background:#C8001A; color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 14px 12px;
  font-size:var(--fs-sm); line-height:1.45;
  font-family:var(--mono);
}
#err b{display:block; font-size:var(--fs-md); margin-bottom:4px}
#err button{
  margin-top:9px; background:#fff; color:#C8001A;
  font-size:var(--fs-sm); font-weight:750;
  padding:9px 14px; border-radius:var(--r-douce);
}

/* scanner */
.scan{
  position:fixed; inset:0; z-index:80;
  background:#000;
  display:none; flex-direction:column; align-items:center; justify-content:center;
}
.scan.on{display:flex}
.scan video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.scan .mire{
  position:relative;
  width:74vw; max-width:340px; aspect-ratio:1.5;
  border:2px solid rgba(255,255,255,.9);
  border-radius:var(--r-flottant);
  box-shadow:0 0 0 100vmax rgba(0,0,0,.55);
}
.scan .mire::after{
  content:""; position:absolute; left:6px; right:6px; height:2px;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
  animation:balaie 2s ease-in-out infinite;
}
@keyframes balaie{0%,100%{top:8%}50%{top:90%}}
.scan .txt{
  position:relative; color:#fff;
  font-size:var(--fs-md); font-weight:650;
  margin-top:22px; text-align:center; padding:0 24px;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.scan .fermer{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:1;
}

/* -------------------------------------------------------------------
   TRANSITIONS D'ÉCRAN
   Avancer fait entrer par la droite, revenir par la gauche : le
   déplacement raconte la hiérarchie. Déclaré une seule fois.
   ------------------------------------------------------------------- */
section.anim{animation:entreDroite .26s cubic-bezier(.22,.9,.28,1) both}
section.anim.gauche{animation-name:entreGauche}
@keyframes entreDroite{
  from{opacity:0; transform:translate3d(20px,0,0)}
  to{opacity:1; transform:none}
}
@keyframes entreGauche{
  from{opacity:0; transform:translate3d(-20px,0,0)}
  to{opacity:1; transform:none}
}

}

/* =================================================================== */
@layer ecrans {

/* ===================== ACCUEIL ===================== */

.ident{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.idl{
  width:52px; height:52px; flex:0 0 auto;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.idl img{width:100%; height:100%; object-fit:contain; background:#fff}
.idl span{color:var(--accent-ink); font-family:var(--mono); font-size:17px; font-weight:600; letter-spacing:.04em}
.idt{min-width:0}
.idt b{display:block; font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em}
.idt span{
  display:block; font-size:var(--fs-sm); color:var(--dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.port{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); margin-bottom:var(--sp-4)}
@media (min-width:560px){.port{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pv{background:var(--surf); border:1px solid var(--line2); padding:10px 12px}
.pv b{display:block; font-size:var(--fs-xl); font-weight:800; letter-spacing:-.03em; line-height:1.05}
.pv span{
  display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--dim); margin-top:3px;
}
.pv.al b{color:var(--bad)}

/* ---- cartes de campagne ---- */
.camps{display:flex; flex-direction:column; gap:10px; margin-bottom:var(--gap)}
@media (min-width:720px){.camps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.camps{grid-template-columns:repeat(3,minmax(0,1fr))}}

.cc{
  position:relative; overflow:hidden;
  display:block; width:100%; text-align:left;
  color:var(--text); background:var(--surf);
  border:1px solid var(--line2);
  padding:13px 14px;
  transition:border-color .18s ease;
}
.cc.on{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.cc::after{
  content:attr(data-code);
  position:absolute; right:-6px; bottom:-30px;
  font-family:var(--disp); font-size:94px; font-weight:800; letter-spacing:-.08em;
  color:var(--text); opacity:.05; pointer-events:none; line-height:1;
}
.cch,.ccs,.ccf{position:relative}
.cch{display:flex; align-items:center; gap:var(--sp-3)}
.cr{width:44px; height:44px; flex:0 0 auto; transform:rotate(-90deg)}
.cr circle{fill:none; stroke:var(--line2); stroke-width:5}
.cr circle.f{stroke:var(--accent); stroke-linecap:butt; transition:stroke-dashoffset .8s cubic-bezier(.22,.9,.28,1)}
.ccn{flex:1; min-width:0}
.ccn b{display:block; font-size:var(--fs-base); font-weight:750; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ccn span{display:block; font-size:var(--fs-xs); color:var(--dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ccb{
  flex:0 0 auto;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent-ink); background:var(--accent);
  padding:4px 9px;
}
.ccs{display:flex; gap:4px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line)}
.ccs span{flex:1; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.ccs i{display:block; font-style:normal; font-size:var(--fs-base); font-weight:800;
  color:var(--text); letter-spacing:-.02em; margin-bottom:1px}
.ccs span.al i{color:var(--bad)}
.ccf{display:flex; gap:4px; align-items:center; margin-top:9px}
.ccf i{width:20px; height:4px; display:block}
.ccf em{font-style:normal; font-size:9.5px; color:var(--dim); margin-left:3px}

/* ---- jauge ---- */
.jg{display:flex; align-items:center; gap:var(--sp-4); position:relative}
.ring{width:104px; height:104px; flex:0 0 auto; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:10; stroke-linecap:butt}
.ring .rb{stroke:var(--line2)}
.ring .rf{stroke:var(--accent); transition:stroke-dashoffset .75s cubic-bezier(.22,.8,.3,1)}
.jgc{
  position:absolute; width:104px; height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.jgc b{font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.04em; line-height:1}
.jgc span{font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-top:2px}
.jgl{flex:1; min-width:0}
.jl{display:flex; align-items:baseline; gap:var(--sp-2); padding:5px 0; border-bottom:1px solid var(--line)}
.jl:last-child{border-bottom:0}
.jl i{width:9px; height:9px; flex:0 0 auto; align-self:center}
.jl i.d1{background:var(--accent)}
.jl i.d2{background:var(--bad)}
.jl i.d3{background:var(--warn)}
.jl b{font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em; min-width:34px}
.jl span{font-size:var(--fs-xs); color:var(--dim)}

/* ---- activité du jour ---- */
.vifh{display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.vk{flex:1; background:var(--bg); border:1px solid var(--line2); padding:10px 12px; min-width:0}
.vk b{display:block; font-size:var(--fs-xl); font-weight:800; letter-spacing:-.03em; line-height:1.05}
.vk span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--dim); margin-top:4px}
.spark{width:100%; height:64px; display:block; overflow:visible}
.spark .aire{fill:var(--accent); opacity:.14}
.spark .trait{
  fill:none; stroke:var(--accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:trace 1.1s cubic-bezier(.3,.8,.3,1) .1s forwards;
}
.spark .pt{fill:var(--accent)}
@keyframes trace{to{stroke-dashoffset:0}}
.sparkl{display:flex; justify-content:space-between; font-size:10px; color:var(--dim);
  letter-spacing:.05em; margin-top:2px}

.sh2{
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dim);
  margin:var(--sp-4) 0 9px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line2);
}
.fb{display:flex; align-items:center; gap:10px; padding:6px 0}
.fbn{flex:0 0 33%; font-size:var(--fs-sm); font-weight:650;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fbj{flex:1; height:9px; background:var(--line); overflow:hidden; display:flex}
.fbj i{display:block; height:9px; width:0; transition:width .85s cubic-bezier(.22,.9,.28,1)}
.fbj i.k1{background:var(--accent)}
.fbj i.k2{background:var(--bad)}
.fbv{flex:0 0 auto; font-size:var(--fs-xs); font-weight:750; color:var(--dim);
  min-width:58px; text-align:right}

/* ---- tuiles d'action ---- */
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); margin-bottom:var(--sp-4)}
@media (min-width:1180px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:96px; padding:14px;
  border:1px solid var(--line2); background:var(--surf);
  text-align:left; color:var(--text);
  transition:border-color .18s ease,transform .13s ease;
}
.tile:active{transform:scale(.98)}
.tile b{font-size:var(--fs-md); font-weight:750}
.tile span{font-size:var(--fs-xs); color:var(--dim); margin-top:5px; line-height:1.35}
.tile.p{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tile.p span{color:rgba(255,255,255,.88)}
.tile.w{grid-column:1/-1; min-height:0; flex-direction:row; align-items:center; gap:10px}
.tile.w b{font-size:var(--fs-sm)}
.tile.w span{margin-top:0}
@media (min-width:1180px){.tile.w{grid-column:span 2}}

/* ---- contrôle avant import ---- */
.apr{border:1px solid var(--line2); background:var(--surf); padding:12px 13px; margin-bottom:9px}
.apr .th{display:flex; justify-content:space-between; align-items:center; gap:10px}
.apr .th b{font-size:var(--fs-md)}
.apr .n{font-family:var(--mono); font-size:var(--fs-sm); color:var(--accent); font-weight:700}
.apr .d{font-size:var(--fs-xs); color:var(--dim); margin-top:6px; line-height:1.45}
.apr .ex{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--dim); margin-top:7px;
  white-space:nowrap; overflow-x:auto; padding-bottom:3px;
}
.apr .ig{color:var(--warn); font-weight:650}
.apr label{display:flex; align-items:center; gap:var(--sp-2); margin:9px 0 0;
  font-size:var(--fs-sm); font-weight:650; min-height:var(--tap)}

/* ===================== SAISIE ===================== */

.editbar{
  display:none;
  background:var(--text); color:var(--bg);
  padding:11px 12px; margin-bottom:var(--gap);
  font-size:var(--fs-sm); font-weight:700;
}

/* barre de contexte — collante, c'est le repère du technicien */
.ctx{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:10px;
  background:var(--surf); border:1px solid var(--line2);
  padding:8px 10px; margin-bottom:11px;
  transition:border-color .2s ease;
}
.ctx.vide{border-style:dashed; border-color:var(--dim)}
.ctxt{flex:1; min-width:0}
.ctxt span{
  display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctxt b{display:block; font-size:var(--fs-md); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctx.vide .ctxt b{color:var(--dim); font-weight:500}
.ctx button{
  flex:0 0 auto;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  border:1px solid var(--line2); background:var(--bg); color:var(--text);
  padding:0 12px; min-height:40px;
  transition:background .15s ease;
}
.ctx button:active{background:var(--line)}
#ctxRet{width:40px; min-width:40px; padding:0; display:flex; align-items:center; justify-content:center}
.ctx.multi #ctxS{cursor:pointer; color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.ctx.multi #ctxS::after{content:" ▾"}

/* identifiant : le repère principal, en chasse fixe et plus grand */
#rid{font-family:var(--mono); font-weight:700; font-size:calc(var(--fs) + 3px); letter-spacing:.02em}

input.vise{outline:2px solid var(--accent); outline-offset:2px}

/* décision d'état — la plus importante de l'écran */
.states{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-3)}
html[data-density="gants"] .states{grid-template-columns:1fr}
.states button{
  min-height:calc(var(--tap) + 10px);
  border:2px solid var(--line2); background:var(--surf);
  font-size:var(--fs-md); font-weight:750; color:var(--dim);
  padding:6px 4px; line-height:1.2;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.states button[aria-pressed="true"][data-k="ok"]{background:var(--ok); border-color:var(--ok); color:var(--ok-ink)}
.states button[aria-pressed="true"][data-k="ano"]{background:var(--bad); border-color:var(--bad); color:var(--bad-ink)}
.states button[aria-pressed="true"][data-k="nv"]{background:var(--warn); border-color:var(--warn); color:var(--warn-ink)}

/* Le détail du constat ne concerne que les états qui en demandent un. */
#cConstat{display:none}
body[data-etat="ano"] #cConstat,
body[data-etat="nv"] #cConstat{display:block}

/* note interne confidentielle */
.priv{border:1px solid var(--warn); background:var(--warn-soft); padding:11px 12px; margin-top:2px}
.priv .lb{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:750;
  color:var(--warn); margin-bottom:7px;
  text-transform:uppercase; letter-spacing:.06em;
}
.priv textarea{background:var(--surf); border:1px solid var(--line2); min-height:74px}
.priv .hint{margin:7px 0 0; color:var(--warn)}

/* tournée et pointage */
.tour{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.tour button{
  flex:0 0 auto; padding:0 13px; min-height:42px;
  border:1px solid var(--line2); background:var(--surf);
  font-size:var(--fs-sm); font-weight:700; color:var(--text);
}
.tour button.cur{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tour button.fin{opacity:.45; text-decoration:line-through}
.tour button small{font-family:var(--mono); opacity:.7; margin-left:5px}

.ptg{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.ptg button{
  padding:0 14px; min-height:var(--tap);
  border:1px solid var(--line2); background:var(--surf);
  font-family:var(--mono); font-size:var(--fs-sm); font-weight:700; color:var(--text);
}
.ptg button.done{opacity:.45; text-decoration:line-through}

/* ligne de pointage balayable */
.pl{position:relative; touch-action:pan-y; display:flex; gap:7px; align-items:stretch}
.pl .fond{
  position:absolute; inset:0;
  display:flex; align-items:center; padding:0 16px;
  font-size:var(--fs-sm); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; opacity:0; pointer-events:none;
}
.pl .fond.ok{background:var(--ok); justify-content:flex-start}
.pl .fond.ed{background:var(--dim); justify-content:flex-end}
.pl .gliss{display:flex; gap:7px; position:relative; z-index:1; flex:1; min-width:0;
  transition:transform .22s cubic-bezier(.22,.9,.28,1)}
.pl.tire .gliss{transition:none}
.pl.out{animation:sortie .19s ease forwards}
@keyframes sortie{to{opacity:0; transform:translateX(46px); max-height:0; margin-top:-7px; padding:0}}
.pl .po{
  flex:1; min-width:0; text-align:left;
  font-size:var(--fs-md); font-weight:700;
  border:1px solid var(--line2); background:var(--surf); color:var(--text);
  padding:8px 12px; min-height:var(--tap);
}
.pl .po em{
  display:block; font-style:normal; font-size:var(--fs-xs); font-weight:500;
  color:var(--dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl .pk{
  flex:0 0 auto; min-width:88px; padding:0 12px; min-height:var(--tap);
  font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  border:2px solid var(--ok); background:transparent; color:var(--ok);
  transition:background .15s ease,color .15s ease;
}
.pl .pk:active{background:var(--ok); color:var(--ok-ink)}

/* ---- photos ---- */
.phg{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.phi{
  position:relative;
  width:84px; height:84px; flex:0 0 auto;
  border:1px solid var(--line2); background:var(--surf2);
  overflow:hidden;
}
.phi img{width:100%; height:100%; object-fit:cover; display:block}
.phi button{
  position:absolute; top:0; right:0;
  width:28px; height:28px;
  background:rgba(12,11,10,.72); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1;
}
.phadd{
  width:84px; height:84px; flex:0 0 auto;
  border:1px dashed var(--line2); background:var(--surf);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--dim); font-size:10.5px; font-weight:650; text-align:center; line-height:1.2;
}
.phadd .ic{opacity:.5}
.phadd:active{border-color:var(--accent); color:var(--accent)}
html[data-density="gants"] .phi,
html[data-density="gants"] .phadd{width:104px; height:104px}

/* ===================== ORGANES ===================== */

.filters{display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.filters>*{flex:1; margin:0}

.grpt{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim);
  height:34px;
  border-bottom:1px solid var(--line2);
}
.grpt span{background:var(--surf2); color:var(--text); padding:2px 9px; font-size:var(--fs-xs); letter-spacing:0}

/* Fiche compacte : deux lignes, deux actions. La hauteur est fixe —
   c'est ce qui rend la fenêtre virtuelle exacte. */
.rec{
  display:flex; align-items:stretch; gap:1px;
  background:var(--surf);
  border:1px solid var(--line2);
  border-left:4px solid var(--line2);
  height:76px;
  overflow:hidden;
}
.rec.ok{border-left-color:var(--ok)}
.rec.ano{border-left-color:var(--bad); background:var(--bad-soft)}
.rec.nv{border-left-color:var(--warn); background:var(--warn-soft)}
.rec.att{border-left-color:var(--dim)}
.rec .ed{
  flex:1; min-width:0; text-align:left;
  padding:8px 11px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  color:var(--text);
}
.rec .h{display:flex; align-items:center; gap:var(--sp-2); min-width:0}
.rec .id{
  font-family:var(--mono); font-weight:800; font-size:var(--fs-md); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rec .tag{
  flex:0 0 auto; margin-left:auto;
  font-size:10px; font-weight:800; padding:3px 8px;
  color:#fff; white-space:nowrap; letter-spacing:.03em;
  background:var(--dim);
}
.rec.ok .tag{background:var(--ok)}
.rec.ano .tag{background:var(--bad)}
.rec.nv .tag{background:var(--warn)}
.rec .sub{
  font-size:var(--fs-xs); color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rec .meta{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--dim)}
.rec .meta .ic{width:13px; height:13px; flex-basis:13px}
.rec .rm{
  flex:0 0 var(--tap);
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid var(--line);
  color:var(--dim);
  transition:background .15s ease,color .15s ease;
}
.rec .rm:active{background:var(--bad); color:var(--bad-ink)}

/* Fenêtre virtuelle : le conteneur porte la hauteur totale du relevé, et
   seules les lignes réellement visibles existent dans le document. Chaque
   ligne est placée à son décalage exact — c'est ce qui permet de ne rien
   mesurer au rendu, donc de rester constant quel que soit le volume. */
.vlist{position:relative; width:100%}
.vlist .fen{position:absolute; inset:0}
.vlist .rec,.vlist .grpt{position:absolute; left:0; right:0}

/* Table dense sur poste fixe. */
@media (min-width:1180px){
  body[data-vue="table"] .vlist .fen{gap:0}
  body[data-vue="table"] .rec{
    height:44px; border:0; border-bottom:1px solid var(--line);
    border-left:4px solid var(--line2); background:transparent;
  }
  body[data-vue="table"] .rec.ano{background:var(--bad-soft)}
  body[data-vue="table"] .rec .ed{flex-direction:row; align-items:center; gap:var(--sp-4); padding:0 12px}
  /* La ligne devient une vraie ligne de table : l'enveloppe du couple
     identifiant/résultat s'efface pour que chaque cellule tienne sa colonne. */
  body[data-vue="table"] .rec .h{display:contents}
  body[data-vue="table"] .rec .id{flex:0 0 150px; order:1}
  body[data-vue="table"] .rec .sub{flex:1 1 auto; order:2}
  body[data-vue="table"] .rec .meta{flex:0 0 auto; order:3; max-width:38%; overflow:hidden}
  body[data-vue="table"] .rec .meta span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  body[data-vue="table"] .rec .tag{flex:0 0 104px; order:4; margin-left:0; text-align:center}
  body[data-vue="table"] .grpt{height:30px; margin-top:var(--sp-3)}
}

/* ===================== BILAN ===================== */

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); margin-bottom:var(--gap)}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surf); border:1px solid var(--line2); padding:13px}
.stat b{display:block; font-size:var(--fs-2xl); font-weight:750; line-height:1.05}
.stat span{display:block; font-size:var(--fs-xs); color:var(--dim); font-weight:650; margin-top:5px}
.stat.a b{color:var(--bad)}
.stat.o b{color:var(--ok)}

.cmpk{display:flex; gap:9px; margin:12px 0 4px; flex-wrap:wrap}
.ck{flex:1 1 90px; border:1px solid var(--line2); background:var(--bg); padding:10px 12px}
.ck b{display:block; font-size:var(--fs-xl); font-weight:800; letter-spacing:-.03em; line-height:1.05}
.ck span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dim); margin-top:4px}
.ck.al{border-color:var(--bad)} .ck.al b{color:var(--bad)}
.ck.ok{border-color:var(--ok)} .ck.ok b{color:var(--ok)}
.ck i{font-style:normal; font-weight:800; letter-spacing:0}
.ck i.up{color:var(--ok)} .ck i.dn{color:var(--bad)}

.cmpl{border-left:3px solid var(--line2); padding:7px 0 7px 11px; margin-bottom:6px}
.cmpl.r{border-left-color:var(--bad)}
.cmpl.n{border-left-color:var(--accent)}
.cmpl.l{border-left-color:var(--ok)}
.cmpl b{font-size:var(--fs-sm)}
.cmpl span{display:block; font-size:var(--fs-xs); color:var(--dim); margin-top:1px}
.cmpl em{display:block; font-style:normal; font-size:var(--fs-xs); margin-top:3px}

/* signatures */
.sigw{margin-bottom:10px}
.sigw .lb{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px}
.sigw .lb span{font-size:var(--fs-sm); font-weight:700; color:var(--dim)}
.sigw .lb button{
  border:1px solid var(--line2); background:var(--surf);
  font-size:var(--fs-sm); font-weight:650; padding:6px 10px; color:var(--text);
}
.sig{
  border:1px dashed var(--line2);
  background:#fff;
  touch-action:none;
  width:100%; height:160px; display:block;
  cursor:crosshair;
}

/* société */
.socw{display:flex; gap:var(--sp-3); align-items:flex-start; margin-bottom:var(--sp-3)}
.soclogo{
  width:112px; height:76px; flex:0 0 auto;
  border:1px dashed var(--line2); background:var(--surf);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.soclogo span{font-size:var(--fs-xs); color:var(--dim); text-align:center; padding:0 6px}
.soclogo img{max-width:100%; max-height:100%; object-fit:contain}
.socb{flex:1; min-width:0}
.socb .act{width:100%}

/* ===================== RÉGLAGES ===================== */

.prl{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.prl:last-child{border-bottom:0}
.prt{flex:1; min-width:0}
.prt b{display:block; font-size:var(--fs-md)}
.prt span{display:block; font-size:var(--fs-xs); color:var(--dim); margin-top:2px}
.prx{
  flex:0 0 auto; width:40px; height:40px;
  border:1px solid var(--line2); background:var(--surf); color:var(--dim);
  font-size:19px; line-height:1;
  transition:color .15s ease,border-color .15s ease;
}
.prx:active{color:var(--bad); border-color:var(--bad)}

ol.pas{list-style:none; counter-reset:p; margin:0; padding:0}
ol.pas li{
  counter-increment:p; position:relative;
  padding:0 0 14px 34px;
  border-left:1px solid var(--line2);
  margin-left:12px;
}
ol.pas li:last-child{border-left-color:transparent; padding-bottom:2px}
ol.pas li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:-13px; top:0;
  width:26px; height:26px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
ol.pas b{display:block; font-size:var(--fs-md); margin-bottom:3px}
ol.pas span{display:block; font-size:var(--fs-sm); line-height:1.6; color:var(--dim)}

/* ===================== AGENDA ===================== */

.cal{border:1px solid var(--line2); background:var(--surf); overflow:hidden; margin-bottom:var(--gap)}
.calh{display:flex; align-items:center; justify-content:space-between; padding:8px 10px;
  border-bottom:1px solid var(--line)}
.calh b{font-size:var(--fs-base); font-weight:750; text-transform:capitalize}
.calh button{
  min-width:var(--tap); min-height:40px;
  border:1px solid var(--line2); background:var(--bg);
  font-size:17px; color:var(--text);
}
.calg{display:grid; grid-template-columns:repeat(7,1fr)}
.calg .dow{
  text-align:center; font-family:var(--mono);
  font-size:10.5px; font-weight:750; color:var(--dim); padding:7px 0;
}
.calg button{
  aspect-ratio:1; border-top:1px solid var(--line);
  font-size:var(--fs-md); color:var(--text);
  position:relative; padding:0;
}
.calg button.out{color:var(--dim); opacity:.45}
.calg button.today{font-weight:800; box-shadow:inset 0 0 0 2px var(--accent)}
.calg button[aria-pressed="true"]{background:var(--text); color:var(--bg)}
.calg button i{
  position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.calg button i.due{background:var(--bad)}
.calg button[aria-pressed="true"] i{background:var(--bg)}

.ev{
  border:1px solid var(--line2); border-left:3px solid var(--accent);
  background:var(--surf);
  padding:10px 12px; margin-bottom:var(--sp-2);
}
.ev.done{border-left-color:var(--ok); opacity:.75}
.ev.late{border-left-color:var(--bad)}
.ev .t{font-weight:700; font-size:var(--fs-md)}
.ev .s{font-size:var(--fs-sm); color:var(--dim); margin-top:3px}
.ev .a{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.ev .a button{
  border:1px solid var(--line2); background:var(--bg); color:var(--text);
  font-size:var(--fs-sm); font-weight:650;
  padding:0 12px; min-height:40px;
}

}