/* ================================================================
   ContainerDX — charte visuelle
   ----------------------------------------------------------------
   v0.24. L'outil est utilisé huit heures par jour, souvent debout à
   côté d'un camion ou sur un écran de bureau mal éclairé. Trois
   principes guident cette feuille :

   1. Une seule échelle de tailles et une seule échelle d'espacements.
      La version précédente empilait 11 px, 11,5 px, 12 px, 12,5 px et
      13 px sans raison : l'œil ne distingue plus ce qui compte.
   2. Le clavier est un citoyen de première classe. Tout élément
      actionnable montre où se trouve le focus.
   3. Rien ne disparaît sur petit écran. La barre latérale devient un
      tiroir ; elle ne s'évapore pas.
   ================================================================ */

:root{
  /* Couleurs de marque — bleu marine et sarcelle, comme depuis l'origine. */
  --deep:#065A82; --teal:#1C7293; --mid:#21295C;
  --deep-d:#04455F;                       /* survol des actions principales */
  --accent:#C2410C;                       /* action unique d'un écran, alertes chaudes */

  /* Texte et fonds — contrastes vérifiés sur blanc (AA au minimum). */
  --ink:#0F172A;                          /* était #1E293B : trop clair pour du corps de texte */
  --ink-2:#334155;                        /* texte secondaire lisible */
  --mut:#5A6B84;                          /* mentions discrètes — AA sur blanc */
  --line:#E2E8F0; --line-2:#CBD5E1;
  --tint:#EAF3F8; --bg:#F4F7FA; --surface:#fff;

  /* États */
  --ok:#15803D; --warn:#B45309; --bad:#B91C1C; --info:#1C7293;
  --ok-bg:#F0FDF4; --warn-bg:#FEF3C7; --bad-bg:#FEE2E2; --info-bg:#EAF3F8;

  /* Typographie — une échelle, cinq marches, pas davantage. */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --lh:1.55;

  /* Espacements — multiples de 4, nommés par usage. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* Formes et ombres */
  --r-sm:6px; --r:9px; --r-lg:14px; --r-full:999px;
  --sh-1:0 1px 3px rgba(15,23,42,.08);
  --sh-2:0 4px 12px rgba(15,23,42,.10);
  --sh-3:0 12px 32px rgba(15,23,42,.18);

  --nav-w:248px; --top-h:56px;
}

*{margin:0;padding:0;box-sizing:border-box;
  font-family:'Segoe UI','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);min-height:100vh;font-size:var(--fs-md);line-height:var(--lh);
  -webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------------- focus clavier
   Un seul style, appliqué partout. :focus-visible évite l'anneau au clic
   souris tout en le garantissant au clavier. */
:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:var(--r-sm)}
aside :focus-visible,.topbar :focus-visible{outline-color:#93C5FD}

/* Lien d'évitement : au premier Tab, on saute la navigation. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface);color:var(--deep);
  padding:var(--s2) var(--s4);border-radius:0 0 var(--r) 0;font-weight:600;box-shadow:var(--sh-2)}
.skip:focus{left:0}

/* ================================================================ ossature */
.layout{display:flex;min-height:100vh}

aside{width:var(--nav-w);background:var(--mid);color:#fff;position:fixed;top:0;bottom:0;left:0;
  overflow-y:auto;overscroll-behavior:contain;z-index:40;display:flex;flex-direction:column;
  padding-bottom:var(--s3)}
aside .brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s4) var(--s2)}
aside .brand .mark{font-size:var(--fs-lg)}
aside h1{font-size:var(--fs-md);font-weight:700;letter-spacing:.2px}
aside .sub{font-size:var(--fs-xs);color:#9DC2E0;padding:0 var(--s4) var(--s3)}

/* Groupes de navigation : le titre de section n'est pas cliquable, il situe. */
aside nav{flex:1;padding:var(--s2) 0}
aside .navgroup{margin-bottom:var(--s1)}
aside .navgroup > .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:#7E93C8;padding:var(--s3) var(--s4) var(--s1)}
aside nav a{display:flex;gap:var(--s3);align-items:center;color:#D6E4F7;text-decoration:none;
  font-size:var(--fs-md);padding:9px var(--s4);cursor:pointer;border-left:3px solid transparent;
  position:relative}
aside nav a .ico{width:19px;text-align:center;flex:none;font-size:14px}
aside nav a .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
aside nav a:hover{background:#2B3468;color:#fff}
aside nav a.on{background:var(--deep);color:#fff;font-weight:600;border-left-color:#7DD3FC}
/* Compteur d'attente : porté par l'entrée elle-même, pas par une carte lointaine. */
aside nav a .cnt{background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:var(--r-full);padding:1px 7px;min-width:20px;text-align:center;flex:none}
aside nav a.on .cnt{background:#fff;color:var(--deep)}

aside .asidefoot{border-top:1px solid #37426F;padding:var(--s3) var(--s4) 0;margin-top:var(--s2)}
aside .who{font-size:var(--fs-xs);color:#A7B4D8;margin-bottom:var(--s2)}
aside .who b{color:#fff;display:block;font-size:var(--fs-sm)}
aside .logout{background:none;border:1px solid #4E5B92;color:#D6E4F7;border-radius:var(--r-sm);
  padding:7px var(--s3);font-size:var(--fs-sm);cursor:pointer;width:100%}
aside .logout:hover{background:#2B3468;border-color:#6B7AB8}
aside select{background:#2B3468;color:#fff;border-color:#4E5B92;font-size:var(--fs-sm)}
aside label{color:#9DC2E0}

/* Barre supérieure : où je suis, ce que je cherche, qui je suis. */
.topbar{position:sticky;top:0;z-index:30;height:var(--top-h);background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:var(--s3);padding:0 var(--s5)}
.topbar .burger{display:none}
.topbar .title{font-size:var(--fs-lg);font-weight:700;color:var(--mid);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.topbar .gsearch{position:relative;width:min(340px,38vw)}
.topbar .gsearch input{padding-left:30px;background:var(--bg);border-color:transparent}
.topbar .gsearch input:focus{background:var(--surface);border-color:var(--line-2)}
.topbar .gsearch .mag{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--mut);font-size:var(--fs-sm);pointer-events:none}
.topbar select{width:auto;font-size:var(--fs-sm);padding:5px var(--s2)}

/* La colonne de droite porte la marge : `main` reste le conteneur que chaque
   vue réécrit entièrement, sans jamais effacer la barre supérieure. */
.col{margin-left:var(--nav-w);flex:1;min-width:0;display:flex;flex-direction:column}
main.page{padding:var(--s5);max-width:1360px;width:100%}

/* Le fil d'Ariane décrit l'écran ; le titre est monté dans la barre supérieure. */
h2{font-size:var(--fs-xl);color:var(--mid);margin-bottom:2px;font-weight:700}
.crumb{font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--s4);max-width:78ch}

/* ================================================================ blocs */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.card{background:var(--surface);border-radius:var(--r);padding:var(--s4);box-shadow:var(--sh-1);
  border:1px solid var(--line)}
.card .k{font-size:var(--fs-xs);color:var(--mut);font-weight:600;letter-spacing:.2px}
.card .v{font-size:var(--fs-2xl);font-weight:700;color:var(--deep);line-height:1.15;margin:2px 0}
.card .d{font-size:var(--fs-xs);color:var(--mut)}
.card.clickable{cursor:pointer;transition:box-shadow .15s,transform .15s}
.card.clickable:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}

.panel{background:var(--surface);border-radius:var(--r);padding:var(--s4);box-shadow:var(--sh-1);
  border:1px solid var(--line);margin-bottom:var(--s4)}
.panel h3{font-size:var(--fs-md);color:var(--mid);margin-bottom:var(--s3);font-weight:700}
.panel .hdrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.panel .hdrow h3{margin-bottom:0}

table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{background:var(--tint);color:var(--mid);text-align:left;padding:9px 10px;font-size:var(--fs-xs);
  font-weight:700;white-space:nowrap;position:sticky;top:0}
td{padding:9px 10px;border-bottom:1px solid #EFF3F8;vertical-align:middle;color:var(--ink-2)}
tr:hover td{background:#F7FAFD}
.tablewrap{overflow-x:auto;margin:0 calc(var(--s4) * -1);padding:0 var(--s4)}

/* ================================================================ pastilles et boutons */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:var(--fs-xs);
  font-weight:700;white-space:nowrap;line-height:1.4}
.p-blue{background:var(--tint);color:var(--deep)} .p-ok{background:#DCFCE7;color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)} .p-bad{background:var(--bad-bg);color:var(--bad)}
.p-grey{background:#E8EDF3;color:var(--mut)}

.btn{background:var(--deep);color:#fff;border:none;border-radius:var(--r-sm);padding:8px 15px;
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .15s;
  display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn:hover:not(:disabled){background:var(--deep-d)}
.btn.o{background:var(--surface);color:var(--deep);border:1px solid var(--line-2)}
.btn.o:hover:not(:disabled){background:var(--tint);border-color:var(--deep)}
.btn.ghost{background:none;color:var(--mut);border:none}
.btn.ghost:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.btn.accent{background:var(--accent)} .btn.accent:hover:not(:disabled){background:#9A330A}
.btn.danger{background:var(--bad)} .btn.danger:hover:not(:disabled){background:#991B1B}
.btn.sm{padding:5px 11px;font-size:var(--fs-xs)}
.btn.lg{padding:11px 20px;font-size:var(--fs-md)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ================================================================ formulaires */
input,select,textarea{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px;
  font-size:var(--fs-sm);width:100%;background:var(--surface);color:var(--ink)}
input:hover,select:hover,textarea:hover{border-color:#94A3B8}
input::placeholder,textarea::placeholder{color:#94A3B8}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--mut);cursor:not-allowed}
label{font-size:var(--fs-xs);color:var(--mut);display:block;margin:var(--s3) 0 var(--s1);font-weight:600}
fieldset{border:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s4)}
.flexrow{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:flex-start}
.grow{flex:1;min-width:340px}
.w360{width:360px;max-width:100%} .w420{width:420px;max-width:100%}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--s4)}
.subsec{font-size:var(--fs-md);font-weight:700;color:var(--mid);margin:var(--s5) 0 var(--s2);
  padding-bottom:var(--s1);border-bottom:1px solid var(--line)}
.checkgrid{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0}
.checkgrid label{display:flex;gap:6px;align-items:center;font-size:var(--fs-sm);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:5px 12px;cursor:pointer;margin:0;color:var(--ink-2)}
.checkgrid label:hover{border-color:var(--deep);background:var(--tint)}
.checkgrid input{width:auto}
.chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-full);
  padding:5px 12px;font-size:var(--fs-sm);cursor:pointer;user-select:none}
.chip input{width:auto}
.chip.off{opacity:.45}
.search{max-width:300px;margin-bottom:var(--s2)}

/* ================================================================ messages */
.alertline{display:flex;gap:var(--s2);align-items:center;background:var(--warn-bg);border-radius:var(--r-sm);
  padding:10px var(--s3);font-size:var(--fs-sm);color:#7C4A06;margin-bottom:var(--s2);
  border-left:3px solid var(--warn)}
.alertline.bad{background:var(--bad-bg);color:#8F1616;border-left-color:var(--bad)}
.muted{font-size:var(--fs-xs);color:var(--mut)}
.err{background:var(--bad-bg);color:#8F1616;border-radius:var(--r-sm);padding:10px var(--s3);
  font-size:var(--fs-sm);margin-top:var(--s2);border-left:3px solid var(--bad)}
.notice{background:#F1F5F9;border-left:3px solid var(--deep);padding:var(--s3);font-size:var(--fs-sm);
  color:var(--ink-2);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:var(--s3) 0}

/* Écran vide : dire pourquoi c'est vide, et quoi faire. */
.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--mut)}
.empty .ic{font-size:30px;opacity:.5;display:block;margin-bottom:var(--s2)}
.empty .ttl{font-size:var(--fs-md);font-weight:600;color:var(--ink-2);margin-bottom:var(--s1)}
.empty .sub{font-size:var(--fs-sm);max-width:44ch;margin:0 auto var(--s3)}

/* Chargement : un squelette plutôt qu'un écran figé sur la vue précédente. */
.skel{background:linear-gradient(90deg,#EDF1F6 25%,#F6F9FC 50%,#EDF1F6 75%);background-size:200% 100%;
  animation:shimmer 1.2s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-line{height:12px;margin-bottom:var(--s2)}
.loading{display:flex;align-items:center;gap:var(--s2);color:var(--mut);font-size:var(--fs-sm);padding:var(--s3) 0}
.spin{width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--deep);
  border-radius:50%;animation:rot .7s linear infinite;flex:none}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .skel,.spin{animation:none} *{transition:none!important}
}

.toast{position:fixed;bottom:var(--s5);right:var(--s5);background:var(--mid);color:#fff;
  padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--fs-sm);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none;
  z-index:99;max-width:min(440px,90vw)}
.toast.show{opacity:1;transform:none}

/* ================================================================ onglets */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:var(--s4)}
.tabs button{background:none;border:none;border-bottom:3px solid transparent;padding:10px var(--s3);
  font-size:var(--fs-md);color:var(--mut);cursor:pointer;margin-bottom:-2px;font-weight:600;border-radius:0}
.tabs button:hover{color:var(--deep);background:var(--tint)}
.tabs button.on{color:var(--deep);border-bottom-color:var(--deep)}
.cp-tabs{display:flex;gap:6px;flex-wrap:wrap}

/* ================================================================ panneau latéral (création, édition) */
.drawer-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:70;
  animation:fade .18s ease-out;display:flex;justify-content:flex-end}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{background:var(--surface);width:min(660px,100%);height:100%;display:flex;flex-direction:column;
  box-shadow:var(--sh-3);animation:slidein .22s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer .dhd{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);flex:none}
.drawer .dhd h3{flex:1;font-size:var(--fs-lg);color:var(--mid);font-weight:700}
.drawer .dbody{flex:1;overflow-y:auto;padding:var(--s4) var(--s5)}
.drawer .dfoot{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s5);
  border-top:1px solid var(--line);background:var(--bg);flex:none}
.xclose{background:none;border:none;font-size:var(--fs-lg);color:var(--mut);cursor:pointer;
  padding:var(--s1) var(--s2);border-radius:var(--r-sm);line-height:1}
.xclose:hover{background:var(--bg);color:var(--ink)}

/* ================================================================ file de travail (accueil) */
.wl{display:flex;flex-direction:column;gap:var(--s2)}
.wl-item{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--line-2);border-radius:var(--r);padding:var(--s3) var(--s4);cursor:pointer;
  text-align:left;width:100%;font-size:var(--fs-md);transition:box-shadow .15s,transform .15s}
.wl-item:hover{box-shadow:var(--sh-2);transform:translateX(2px)}
.wl-item.sev-critical{border-left-color:var(--bad);background:#FFF9F9}
.wl-item.sev-high{border-left-color:var(--warn)}
.wl-item.sev-normal{border-left-color:var(--info)}
.wl-item .ic{font-size:var(--fs-lg);flex:none;width:26px;text-align:center}
.wl-item .body{flex:1;min-width:0}
.wl-item .lb{font-weight:600;color:var(--ink)}
.wl-item .sb{font-size:var(--fs-xs);color:var(--mut)}
.wl-item .n{font-size:var(--fs-lg);font-weight:700;color:var(--deep);flex:none}
.wl-item .go{color:var(--mut);flex:none}
.wl-sec{font-size:var(--fs-xs);font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--mut);margin:var(--s4) 0 var(--s2)}
.wl-clear{display:flex;align-items:center;gap:var(--s3);background:var(--ok-bg);border:1px solid #A7F3C4;
  border-radius:var(--r);padding:var(--s4);color:#14532D;font-weight:600}

/* ================================================================ planning dates × missions
   Un bloc par date, chacun avec ses propres en-têtes de colonnes. Les en-têtes
   d'un seul tableau, affichés tout en haut, devenaient illisibles dès qu'on
   descendait : arrivé à la vingtième ligne, plus moyen de savoir à quelle
   mission correspondait une case. */
.pl-block{margin-bottom:var(--s5);break-inside:avoid}
.pl-block.pl-we{background:var(--bg);border-radius:var(--r);padding:var(--s2)}
.pl-dhead{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s2) var(--s1);
  border-bottom:2px solid var(--deep);margin-bottom:var(--s2)}
.pl-day{font-weight:700;color:var(--ink);font-size:var(--fs-lg)}

/* Une carte par mission : l'en-tête est collé à sa case, l'un au-dessus de
   l'autre. Elles s'organisent en colonnes tant que la place le permet, puis
   passent à la ligne — jamais de défilement horizontal qui séparerait une case
   de son en-tête. */
.pl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.pl-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface);break-inside:avoid}
.pl-head{background:var(--tint);padding:var(--s2);border-bottom:1px solid var(--line)}
.pl-ref{font-weight:700;color:var(--deep);font-size:var(--fs-sm)}
.pl-type{color:var(--ink-2);font-weight:400}
.pl-ord{color:var(--mut);font-weight:400;font-size:10.5px}
.pl-cell{padding:var(--s3);line-height:1.55}
.pl-cl{font-weight:600;color:var(--ink);margin-bottom:2px}
.pl-k{color:var(--mut)}
.pl-t{color:var(--ink-2)}
.pl-t.ok{color:var(--ok)} .pl-t.bad{color:var(--warn);font-weight:600}
.pl-r{color:var(--ink-2);margin:2px 0}
.pl-d{color:var(--deep);font-weight:600}
.pl-d.none{color:var(--bad)}

/* ================================================================ divers conservés */
.linebadge,.wabadge,.mailbadge{display:inline-block;color:#fff;border-radius:var(--r-sm);font-size:10px;
  font-weight:700;padding:2px 6px;vertical-align:1px}
.linebadge{background:#06C755} .wabadge{background:#1EA855} .mailbadge{background:#5A6B84}
.att-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);margin:2px}
.card-row{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);
  font-size:var(--fs-sm)}
.card-row .hd{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.docline{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:8px 0;
  border-bottom:1px solid #EFF3F8;font-size:var(--fs-sm)}
.doc-card{display:flex;gap:var(--s3);align-items:center;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s2);margin-bottom:var(--s2)}
.doc-card img,.doc-card video{width:66px;height:66px;object-fit:cover;border-radius:var(--r-sm);background:#0F172A}
.doc-card .meta{flex:1;font-size:var(--fs-sm)}
.progress{height:7px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:var(--s2)}
.progress i{display:block;height:100%;background:var(--deep);transition:width .25s}

/* timeline */
.tl{position:relative;margin:var(--s2) 0 var(--s1) 10px;padding-left:var(--s5);border-left:2px solid var(--teal)}
.tl .ev{position:relative;margin-bottom:var(--s3);font-size:var(--fs-sm)}
.tl .ev::before{content:"";position:absolute;left:-31px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--ok);border:2px solid var(--surface)}
.tl .t{color:var(--mut);font-size:var(--fs-xs)}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--mid);padding:var(--s4)}
.login .box{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6);width:400px;max-width:100%;
  box-shadow:0 16px 48px rgba(0,0,0,.4)}
.login h1{font-size:var(--fs-xl);color:var(--mid);margin-bottom:var(--s1)}
.login .sub{font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--s4)}
.login .demo{margin-top:var(--s4);background:var(--tint);border-radius:var(--r-sm);padding:var(--s3);
  font-size:var(--fs-xs);color:var(--ink-2);line-height:1.8}

/* ================================================================ portail client */
.cp-bar{height:9px;background:var(--line);border-radius:5px;overflow:hidden;margin:var(--s2) 0}
.cp-bar span{display:block;height:100%;background:var(--teal);border-radius:5px;transition:width .3s}
.cp-steps{margin-top:var(--s3)}
.cp-steplist{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cp-step{display:flex;flex-direction:column;align-items:center;width:92px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s1);font-size:var(--fs-xs);
  color:var(--mut);background:var(--surface)}
.cp-step.on{border-color:var(--ok);color:var(--ink);background:var(--ok-bg)}
.cp-step .dot{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--mut);font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--s1)}
.cp-step.on .dot{background:var(--ok);color:#fff}
.cp-step .lb{line-height:1.35;font-weight:600}
.cp-step .tm{color:var(--mut);font-size:10px;margin-top:2px}

/* ================================================================ application chauffeur
   Terrain : gants, soleil, une seule main. Cibles ≥ 48 px, contrastes forts,
   actions principales en bas d'écran, à portée du pouce. */
.phone-wrap{max-width:480px;margin:0 auto}
.drvbar{display:flex;align-items:center;gap:var(--s3);background:var(--mid);color:#fff;
  padding:var(--s3) var(--s4);border-radius:var(--r-lg);margin-bottom:var(--s3)}
.drvbar .who2{flex:1;font-size:var(--fs-lg);font-weight:700}
.burger{background:rgba(255,255,255,.16);border:none;color:#fff;font-size:20px;border-radius:var(--r);
  min-width:48px;min-height:48px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.burger:hover{background:rgba(255,255,255,.26)}
.sheet{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;align-items:flex-end;
  justify-content:center;z-index:80;animation:fade .18s ease-out}
.sheet .inner{background:var(--surface);width:100%;max-width:480px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s4) var(--s4) var(--s5);animation:slideup .22s ease-out;max-height:88vh;overflow-y:auto}
@keyframes slideup{from{transform:translateY(20px)}to{transform:none}}
.sheet h3{font-size:var(--fs-lg);color:var(--mid);margin-bottom:var(--s3)}
.sheet .row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:#F1F5F9;
  border:none;border-radius:var(--r);padding:var(--s4);font-size:var(--fs-lg);margin-bottom:var(--s2);
  cursor:pointer;min-height:56px;color:var(--ink)}
.sheet .row:hover{background:#E4EBF3}
.sheet .row.danger{background:var(--bad-bg);color:var(--bad);font-weight:700}

.bigbtn,.dv-big{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;border:none;
  border-radius:var(--r-lg);padding:var(--s4);font-size:var(--fs-lg);font-weight:700;color:#fff;
  margin-bottom:var(--s2);cursor:pointer;min-height:56px;text-decoration:none;text-align:center;
  line-height:1.3}
.bigbtn{text-align:left;justify-content:flex-start}
.dv-big{background:var(--teal);margin-top:var(--s2)}
.dv-big.o{background:var(--surface);color:var(--teal);border:2px solid var(--teal)}
.dv-big.ok{background:var(--ok)} .dv-big.warn{background:var(--warn)}
.dv-big.danger{background:var(--bad)}
.bigbtn:disabled,.dv-big:disabled{cursor:not-allowed;opacity:.5}
/* Action principale collée en bas : atteignable au pouce sur un grand écran. */
.dv-sticky{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(244,247,250,0),var(--bg) 40%);
  padding-top:var(--s4);margin-top:var(--s3);z-index:10}

.mission-head{background:var(--tint);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s3);
  font-size:var(--fs-md)}
.dv-badge{font-size:var(--fs-xs);font-weight:700;padding:4px 10px;border-radius:var(--r-full);color:#fff}
.dv-badge.on{background:var(--ok)} .dv-badge.wait{background:var(--warn)} .dv-badge.off{background:#475569}
.dv-shift{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-md);font-weight:600;
  padding:var(--s3);border-radius:var(--r);margin-bottom:var(--s3)}
.dv-shift.on{background:var(--ok-bg);border:1px solid #86EFAC}
.dv-shift.off{background:#F1F5F9;border:1px solid var(--line-2)}
.dv-tabs{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.dv-tabs .btn{min-height:40px}
.dv-card{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s3);font-size:var(--fs-md);cursor:pointer}
.dv-card:hover{box-shadow:var(--sh-2)}
.dv-card .hd{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.dv-route{font-size:var(--fs-lg);font-weight:700;margin:var(--s1) 0;color:var(--ink)}
.dv-danger{background:#FEF2F2;color:var(--bad);border-radius:var(--r-sm);padding:var(--s2) var(--s3);
  margin-top:var(--s2);font-weight:700;font-size:var(--fs-md);border-left:3px solid var(--bad)}
.dv-prog{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:var(--s2)}
.dv-prog span{display:block;height:100%;background:var(--ok);transition:width .3s}
.dv-steps{display:flex;flex-direction:column;gap:var(--s2)}
.dv-step{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s3);font-size:var(--fs-md);min-height:52px}
.dv-step.done{background:var(--ok-bg);border-color:#86EFAC}
.dv-step.next{border-color:var(--teal);border-width:2px;box-shadow:0 2px 10px rgba(28,114,147,.18)}
.dv-step .n{display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:50%;
  background:var(--line);font-weight:700;font-size:var(--fs-sm);flex:none}
.dv-step.done .n{background:var(--ok);color:#fff}
.dv-step.next .n{background:var(--teal);color:#fff}
.dv-step .l{flex:1;font-weight:600;color:var(--ink)} .dv-step .tm{color:var(--mut);font-size:var(--fs-xs)}
/* Hors connexion : visible en permanence, pas au moment de l'échec. */
.dv-offline{display:flex;align-items:center;gap:var(--s2);background:var(--warn-bg);color:#7C4A06;
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--fs-sm);font-weight:600;
  margin-bottom:var(--s2);border-left:3px solid var(--warn)}

/* ================================================================ adaptation aux écrans
   Sous 960 px la barre latérale devient un tiroir. Auparavant elle était
   simplement masquée : l'application bureau n'était plus navigable du tout. */
@media (max-width:960px){
  aside{transform:translateX(-100%);transition:transform .22s ease-out;box-shadow:var(--sh-3);width:288px}
  body.nav-open aside{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:35}
  .col{margin-left:0}
  .topbar{padding:0 var(--s3);gap:var(--s2)}
  .topbar .burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
    background:none;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-lg);
    color:var(--mid);cursor:pointer}
  .topbar .gsearch{width:auto;flex:1;min-width:0}
  .topbar .title{display:none}
  .page{padding:var(--s4) var(--s3)}
  .grid2,.grid3{grid-template-columns:1fr}
  .w360,.w420,.grow{width:100%;min-width:0}
  .cp-step{width:calc(33.33% - 6px)}
  .drawer{width:100%}
  .toast{left:var(--s3);right:var(--s3);bottom:var(--s3);max-width:none}
}
@media (max-width:560px){
  th,td{padding:8px 7px}
  .cards{grid-template-columns:1fr 1fr}
  .page{padding:var(--s3) var(--s2)}
}
@media print{
  aside,.topbar,.btn,.toast{display:none!important}
  main{margin-left:0} .panel{box-shadow:none;border:1px solid #999;break-inside:avoid}
}

/* ================================================================ valorisation de mission (v0.27) */
.vb{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
.vb-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.vb-total{margin-left:auto;font-weight:700;color:var(--deep);font-size:var(--fs-md)}
.vb table{font-size:var(--fs-xs)}
.vb td{border-bottom:1px solid var(--line);padding:4px 2px}

/* Version affichée dans le pied de la barre latérale : un écart entre serveur
   et navigateur devient visible au lieu de se manifester par un écran qui
   « ne change pas ». */
aside .ver{font-size:10.5px;color:#7E93C8;margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
aside .ver.bad{color:#FCA5A5;font-weight:700}

/* ================================================================ dossier d'incident (v0.29) */
.inc-row.crit{border-left:4px solid var(--bad);background:#FFF9F9}
.inc-file{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.inc-steps{display:flex;flex-direction:column;gap:var(--s1)}
.inc-step{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border-radius:var(--r-sm);
  background:var(--bg);font-size:var(--fs-sm)}
.inc-step .mark{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:var(--fs-xs);background:var(--line);color:var(--mut);flex:none}
.inc-step .lb{flex:1}
.inc-step.done{background:var(--ok-bg)}
.inc-step.done .mark{background:var(--ok);color:#fff}
.inc-step.req{background:var(--bad-bg)}
.inc-step.req .mark{background:var(--bad);color:#fff}