/* Pilotage CATELSYS : direction « appareil rétro-futuriste ».
   Une coque à liseré menthe, une carte héro corail, des tuiles de tableau de bord,
   des cartes empilées dont une seule, l'active, est corail. Thème sombre unique. */
/* Polices servies par ce serveur (SIL Open Font License 1.1, sous-ensemble latin). */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:800 900;font-display:swap;src:url(/polices/Unbounded.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/polices/Inter.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/polices/JetBrainsMono.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme:dark;
  /* Couleurs : 70 % vert sombre, 20 % corail, 10 % lavande et crème */
  --bg:#0E1F1A; --surface-1:#163A2E; --surface-2:#1F4D3C; --line:#2C6650;
  --accent:#E07A5F; --accent-deep:#C9604A; --accent-soft:#F0A08A;
  --digits:#9AA6E8; --text:#EFE6DA; --text-muted:#8FA89C; --frame:#4FBF8F;
  --on-accent:#0E1F1A;          /* texte sur corail : 5,8:1 (le crème n'y fait que 2,4:1) */
  --text-muted-2:#A3BBAF;       /* légendes sur --surface-2 : 4,7:1 */
  --ok:#4FBF8F; --warn:#E2B65A; --crit:#F27272; --info:#9AA6E8;
  /* Typographie */
  --display:"Unbounded","Archivo",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --fs-label:.7rem; --fs-small:.86rem; --fs-body:1rem; --fs-h3:1.05rem;
  --fs-champ:max(16px,1rem);    /* champs éditables : sous 16 px, Safari iOS zoome au toucher */
  --fs-hero:clamp(2.1rem,8.6vw,4.4rem); --fs-titre:clamp(1.5rem,5.6vw,2.6rem); --fs-chiffre:clamp(1.7rem,5vw,2.3rem);
  --track-label:.12em;
  /* Espacements, rayons */
  --gap:10px; --gap-l:18px; --pad:16px; --r:12px; --r-coque:20px; --cible:44px;
  /* Mouvement */
  --ease:cubic-bezier(.2,.8,.2,1); --t-arrivee:420ms; --t-pas:50ms; --t-pile:300ms;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden]{display:none!important}
*{box-sizing:border-box}
img{max-width:100%}
html{background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--text);font:400 var(--fs-body)/1.6 var(--body);
  background:var(--grain),var(--bg);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(18px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px));
}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em}
h2{font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-muted)}
h3{font-size:var(--fs-h3);font-weight:800;line-height:1.25}
.num{font-variant-numeric:tabular-nums}

/* La coque */
.wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap-l);border:1px solid var(--frame);border-radius:var(--r-coque);padding:14px}
#app{display:flex;flex-direction:column;gap:var(--gap-l)}

/* Couches de fond des tuiles : la base (::before) et le corail actif (::after).
   Elles portent le remplissage pour que l'apparition montre d'abord le squelette. */
.card,.arow,.ligne,.tab,.connexion,.top{position:relative;isolation:isolate}
.card::before,.arow::before,.ligne::before,.tab::before,.connexion::before,.top::before,
.card::after,.arow::after,.tab::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none}
.card::before,.arow::before,.ligne::before,.tab::before{background:var(--surface-1);transition:opacity var(--t-pile) var(--ease)}
.card::after,.arow::after,.tab::after{background:var(--accent);opacity:0;transition:opacity var(--t-pile) var(--ease)}

/* Carte héro : l'en-tête */
.top{display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:var(--r);color:var(--on-accent)}
.top::before{background:var(--accent)}
.top .compte{order:1}
.top h1{font-size:var(--fs-hero);font-weight:900;line-height:.92;letter-spacing:-.035em;overflow-wrap:anywhere}
.sub{order:0;font:500 var(--fs-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--on-accent)}
.sub{min-height:1.4em}
.health{order:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.health{min-height:76px}
@media (max-width:640px){.sub{min-height:2.8em}.health{min-height:178px}}
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;border-radius:8px;font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text);background:var(--bg);border:1px solid transparent;white-space:nowrap}
.health .pill{white-space:normal}
.dot{width:8px;height:8px;border-radius:2px;background:var(--text-muted);flex:none}
.ok .dot{background:var(--ok)} .warn .dot{background:var(--warn)} .crit .dot{background:var(--crit)} .info .dot{background:var(--info)}

/* Onglets : tuiles de compteurs */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tab{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-height:92px;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:none;color:var(--text-muted);font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);text-align:left;cursor:pointer;transition:transform var(--t-pile) var(--ease)}
.tab .num{font:900 var(--fs-chiffre)/1 var(--display);letter-spacing:-.02em;color:var(--digits)}
.tab:hover::before{background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--on-accent);border-color:var(--accent)}
.tab[aria-selected="true"]::after{opacity:1}
.tab[aria-selected="true"] .num{color:var(--on-accent)}
.tab:active{transform:scale(.98)}

/* Focus : contour corail, sombre sur fond corail */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top :focus-visible,.actif :focus-visible,.tab[aria-selected="true"]:focus-visible{outline-color:var(--on-accent)}

/* Pile de cartes (décisions, agents) */
.list{display:flex;flex-direction:column;gap:var(--gap)}
.card{display:flex;flex-direction:column;gap:12px;padding:var(--pad);border-radius:var(--r);border:1px solid var(--line);min-width:0;transition:transform var(--t-pile) var(--ease),color var(--t-pile) var(--ease);transform-origin:center top}
.card.done{border-style:dashed}
.a-actif > [data-cle]:not(.actif){transform:scale(.97)}
.a-actif > [data-cle]:not(.actif)::before{opacity:.6}
.actif{color:var(--on-accent);z-index:1;border-color:var(--accent)}
.actif::after{opacity:1}

.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:500 var(--fs-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
[data-pos]::before{content:attr(data-pos);font:500 var(--fs-label)/1 var(--mono);letter-spacing:var(--track-label);color:var(--text-muted);margin-right:2px}
.meta[data-pos]::before{content:attr(data-pos) " ·"}
.actif .meta,.actif [data-pos]::before{color:var(--on-accent)}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:5px;background:var(--bg);border:1px solid var(--line);color:var(--text-muted);white-space:nowrap}
/* Priorité en segments corail */
.chip.p1::after,.chip.p2::after,.chip.p3::after{font-size:.8em;letter-spacing:.1em;color:var(--accent-soft)}
.chip.p1::after{content:"▮▮▮"} .chip.p2::after{content:"▮▮▯"} .chip.p3::after{content:"▮▯▯"}
.chip.p1{color:var(--text)}
.chip.crit{color:var(--crit)} .chip.warn{color:var(--warn)} .chip.ok{color:var(--ok)} .chip.info{color:var(--info)}
.actif .chip{background:rgba(14,31,26,.14);border-color:rgba(14,31,26,.35);color:var(--on-accent)}
.actif .chip::after{color:var(--on-accent)}

.card h3{font-size:clamp(1rem,3.4vw,1.25rem)}
.reco{background:var(--bg);color:var(--text);border-radius:10px;padding:10px 12px;font-size:.95rem;border:1px solid var(--line)}
.reco b{display:block;margin-bottom:4px;font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--accent-soft)}
.detail{font-size:.92rem;color:var(--text-muted);white-space:pre-line;overflow-wrap:anywhere;padding-top:6px}
.actif .detail{color:var(--on-accent)}
details summary{display:flex;align-items:center;min-height:var(--cible);cursor:pointer;font:500 var(--fs-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--accent-soft);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";display:inline-block;width:1.4em;font-size:1.1em}
details[open] > summary::before{content:"−"}
.actif details summary{color:var(--on-accent)}

.answer{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:12px}
.actif .answer{border-top-color:rgba(14,31,26,.45)}
.check{display:flex;gap:12px;align-items:center;min-height:var(--cible);font-weight:600;font-size:.95rem;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin:0}
.actif .check input{accent-color:var(--on-accent)}
textarea{width:100%;min-height:76px;font:400 var(--fs-champ)/1.5 var(--body);color:var(--text);background:var(--bg);border:1px solid var(--text-muted);border-radius:10px;padding:10px 12px;resize:vertical}
input,select{font-size:var(--fs-champ)}
textarea::placeholder{color:var(--text-muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--cible);padding:0 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);cursor:pointer;transition:transform 160ms var(--ease)}
.btn::after{content:"→"}
.btn:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.btn:active{background:var(--accent-deep);transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:default}
.actif .btn{background:var(--on-accent);border-color:var(--on-accent);color:var(--text)}
.actif .btn:hover{background:var(--surface-1)}
.btn.ghost{background:none;border-color:var(--line);color:var(--text)}
.btn.ghost::after{content:none}
.btn.ghost:hover{border-color:var(--accent-soft)}
.status{font:500 var(--fs-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.status.sent{color:var(--ok)} .status.err{color:var(--crit)}
.actif .status,.actif .status.sent{color:var(--on-accent)}
.actif .status.err{color:var(--on-accent);text-decoration:underline}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:22px 16px;text-align:center;font:500 var(--fs-label)/1.5 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-muted)}
.foot{font-size:var(--fs-small);color:var(--text-muted)}
.compte{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
/* Le pied de page n'apparaît qu'avec les données, pour ne pas sauter quand les cartes arrivent */
html:not(.donnees) #app .foot{visibility:hidden}
.foot.compte{font:500 var(--fs-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}

/* Agents : bandes numérotées */
.agents{display:flex;flex-direction:column;gap:8px}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;width:100%;min-height:64px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform var(--t-pile) var(--ease),color var(--t-pile) var(--ease)}
.arow .t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(.9rem,3.2vw,1.05rem)}
.arow .t small{font:500 var(--fs-label)/1 var(--mono);letter-spacing:var(--track-label);color:var(--text-muted)}
.arow .c{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.arow.admin{border-color:var(--frame)}
.arow.actif{color:var(--on-accent)}
.arow.actif .t small{color:var(--on-accent)}
.actif .pill{background:var(--on-accent);color:var(--text)}

/* Fiche d'un agent */
.fiche{display:flex;flex-direction:column;gap:var(--gap-l)}
.fiche-tete{display:flex;flex-direction:column;gap:10px}
.fiche-tete .row{justify-content:space-between}
.fiche-tete h1{font-size:var(--fs-titre);font-weight:900;line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.fiche-tete .meta .chip{background:var(--surface-1)}
.resume{font-size:.95rem;color:var(--text-muted);white-space:pre-line}
.bloc{display:flex;flex-direction:column;gap:var(--gap)}
.bloc > h2{display:flex;gap:8px;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--line)}
.bloc > h2 .num{color:var(--digits)}
.ligne{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);min-width:0}
.ligne p{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.ligne h3{font-size:.8rem}
.ligne .crit-fin{font-size:var(--fs-small);color:var(--text-muted)}
.ech{display:grid;grid-template-columns:3.6rem 1fr;gap:10px;align-items:baseline;font-size:.95rem;padding:4px 0}
.ech + .ech{border-top:1px solid var(--line)}
.ech b{font:900 .95rem/1 var(--display);color:var(--digits);font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;align-items:baseline}
.kv dt{font:500 var(--fs-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-muted)}
.kv dd{margin:0;overflow-wrap:anywhere;font-size:.95rem}
.kv dd.num{font:900 var(--fs-chiffre)/1 var(--display);color:var(--digits);letter-spacing:-.02em}
.mono{font-family:var(--mono);font-size:.78rem}
.mission{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line);font-size:.92rem}
.mission:first-of-type{border-top:0;padding-top:0}

/* Consignes */
.consigne-form{gap:10px}
.consigne-texte{margin:0;white-space:pre-line;overflow-wrap:anywhere}
#liste-consignes .reco{white-space:pre-line;overflow-wrap:anywhere}
.reco.question{border-color:var(--accent-soft)}

/* Connexion : la seule action de l'écran, le bouton, est corail */
.connexion{display:flex;flex-direction:column;gap:14px;padding:20px 18px;border-radius:var(--r);border:1px solid var(--line);color:var(--text)}
.connexion::before{background:var(--surface-1)}
.connexion p{color:var(--text)}
/* Hors session, pas de tuiles d'état : pas de place réservée */
.wrap:has(#app[hidden]) .sub,.wrap:has(#app[hidden]) .health{min-height:0}
.wrap:has(#app[hidden]) .health:empty,.wrap:has(#app[hidden]) .sub:empty{display:none}
.connexion h3{font-size:var(--fs-titre);font-weight:900;line-height:1;letter-spacing:-.03em}
.connexion p{margin:0;font-size:.98rem}
.connexion .btn{align-self:flex-start}

/* Apparition en cascade, avec squelette : le contour d'abord (~150 ms), puis le fond et le texte */
.da .rv{opacity:0;transform:translateY(12px)}
.rv.in{animation:da-arrivee var(--t-arrivee) var(--ease) both;animation-delay:calc(var(--i,0) * var(--t-pas))}
.rv.in::before,.rv.in > *{animation:da-remplir var(--t-arrivee) var(--ease) both;animation-delay:calc(var(--i,0) * var(--t-pas))}
.rv.in.actif::after,.rv.in.top::before,.rv.in.connexion::before{animation:da-remplir var(--t-arrivee) var(--ease) both;animation-delay:calc(var(--i,0) * var(--t-pas))}
@keyframes da-arrivee{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes da-remplir{0%,36%{opacity:0}100%{opacity:1}}
@keyframes da-arrivee-calme{from{opacity:0}to{opacity:1}}

/* Mobile : les décisions deviennent un carrousel qui suit le doigt et se cale */
@media (max-width:640px){
  .wrap{padding:10px;border-radius:16px}
  .top{padding:16px 14px 14px}
  .tab{min-height:84px;padding:10px}
  #vue-decisions{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:10px;overscroll-behavior-x:contain;margin-inline:-10px;padding:2px 10px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #vue-decisions::-webkit-scrollbar{display:none}
  #vue-decisions > .card{flex:0 0 86%;scroll-snap-align:center;scroll-snap-stop:always;align-self:flex-start}
  #vue-decisions > .empty{flex:1 0 100%}
  .a-actif > [data-cle]:not(.actif){transform:scale(.95)}
  .agents.a-actif > [data-cle]:not(.actif){transform:scale(.97)}
  .arow{grid-template-columns:minmax(0,1fr)}
  .arow > .pill{justify-self:start}
}
@media (min-width:641px){
  .list{scroll-snap-type:y proximity}
}

/* Mouvement réduit : de simples fondus, ni cascade, ni squelette, ni pile */
@media (prefers-reduced-motion:reduce){
  .rv.in{animation:da-arrivee-calme 200ms ease both;animation-delay:0s}
  .rv.in::before,.rv.in > *,.rv.in.actif::after,.rv.in.top::before,.rv.in.connexion::before{animation:none}
  .da .rv{transform:none}
  .a-actif > [data-cle]:not(.actif){transform:none}
  *{transition-duration:0s!important}
}