/* =========================================================================
   Suivi PIG — feuille de style
   Charte reprise d'Info H'Emploi (infohemploi.apremis.org) : nuit, terracotta,
   sauge, eau, ivoire ; titres Fraunces, textes Karla, marque Jost.
   Polices auto-hebergees : aucun appel a un service tiers (contrainte RGPD).

   Adaptation a un outil metier : l'ivoire et le nuit sont conserves tels
   quels, mais les rythmes sont resserres (un agent saisit 40 fiches par jour,
   il ne lit pas une page vitrine) et les chiffres passent en chasse fixe.
   ========================================================================= */

@font-face{font-family:'Fraunces';src:url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('/static/fonts/karla-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('/static/fonts/jost-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* --- Palette Info H'Emploi --- */
  --nuit:#101B4F; --nuit-clair:#1D2A63; --nuit-voile:rgba(16,27,79,.08);
  --terracotta:#C96E56; --terracotta-fonce:#A8543D; --terracotta-voile:#F6E7E1;
  --sauge:#A7B89A; --sauge-fonce:#6F8265;
  --eau:#C8E3DD; --eau-clair:#E7F3F0; --teal:#12897B;
  --ivoire:#FAF7F2; --ivoire-fonce:#F2ECE2; --blanc:#fff;
  --anthracite:#3D4348; --gris:#6E6A64; --bord:#E7DFD3;
  /* Variantes assombries reservees au TEXTE (contraste RGAA 4.5:1).
     Les aplats de la charte restent inchanges. */
  --teal-tx:#0E6F63; --sauge-tx:#556849; --terracotta-tx:#984734;

  /* --- Correspondance avec les roles de l'application ---
     --p pilote la structure (en-tete, navigation, elements actifs).
     Elle est surchargee au chargement par le reglage "couleur principale". */
  --p:var(--nuit); --p-d:#0A123A; --p-l:var(--eau-clair); --p-b:#070C28;
  --a:var(--terracotta-fonce); --a-l:var(--terracotta-voile);
  --bg:var(--ivoire); --card:var(--blanc);
  --tx:var(--anthracite); --tx2:var(--gris); --tx3:#726D66;
  --bd:var(--bord); --bd2:#D8CDBD;
  --ok:#2F7A55; --ok-l:#E3F0E7; --warn:var(--terracotta-fonce); --warn-l:var(--terracotta-voile);
  --err:#A32B23; --err-l:#F7E3E1; --info:var(--teal-tx); --info-l:var(--eau-clair);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corps:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --logo:'Jost','Karla',sans-serif;

  --r:14px; --r-s:8px;
  --sh:0 1px 2px rgba(16,27,79,.04), 0 8px 24px -14px rgba(16,27,79,.16);
  --sh2:0 1px 2px rgba(16,27,79,.05), 0 12px 30px -12px rgba(16,27,79,.22);
  --sh-h:0 1px 2px rgba(16,27,79,.05), 0 10px 26px -12px rgba(16,27,79,.20);

  --t-xs:12.5px; --t-s:13.5px; --t-m:15px;
  --t-l:clamp(16.5px, 1.1vw + 13px, 19px);
  --t-xl:clamp(20px, 1.4vw + 16px, 25px);
  --t-2xl:clamp(24px, 2vw + 18px, 32px);

  --nav-h:58px; --header-h:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);background:var(--bg);color:var(--tx);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

a{color:var(--teal-tx);text-decoration:none}
a:hover{color:var(--terracotta-fonce);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}

/* Fraunces pour les titres : c'est la signature visuelle de la charte. */
h1,h2,h3{font-family:var(--display);color:var(--nuit);font-weight:600;line-height:1.18;
  letter-spacing:-.015em;margin:0 0 12px;
  font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 40}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-l)}
h3{font-size:var(--t-m);letter-spacing:-.01em}
p{margin:0 0 10px}
.hide{display:none!important}

/* Les chiffres d'un outil de gestion doivent s'aligner : on neutralise les
   chiffres elzeviriens du site vitrine partout ou l'on compare des valeurs. */
table,.kpi .v,.gr-lg b,.gr-ent b,.bar .lg b,.creneaux button,td.num,th.num{
  font-variant-numeric:tabular-nums lining-nums}

:focus-visible{outline:3px solid var(--terracotta-fonce);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Barre haute ---------- */
header{position:sticky;top:0;z-index:30;
  background:var(--nuit);
  color:#fff;padding:0 14px;height:var(--header-h);
  display:flex;align-items:center;gap:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, var(--sh)}
header .marque{font-family:var(--logo);font-weight:600;font-size:16px;white-space:nowrap;
  letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:479px){header .marque{font-size:14px}}
header .sp{flex:1}
header button{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14);
  color:#fff;border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .15s}
header button:hover{background:rgba(255,255,255,.26)}

/* ---------- Navigation ----------
   Bureau : onglets sous l'en-tete. Mobile : barre fixe en bas, a portee
   du pouce, comme une application native. */
nav{display:flex;gap:2px;background:#fff;border-bottom:1px solid var(--bd);
  padding:0 10px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:var(--header-h);z-index:25}
nav::-webkit-scrollbar{display:none}
nav a{padding:12px 14px;color:var(--tx2);font-weight:600;font-size:var(--t-m);
  border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s;
  display:inline-flex;align-items:center;gap:7px}
nav a .nic{width:18px;height:18px;flex:none;opacity:.78;transition:opacity .15s}
nav a .np{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--terracotta-fonce);color:#fff;
  font-size:11px;font-weight:700;line-height:1;font-family:var(--corps)}
nav a .np[hidden]{display:none}
nav a:hover .nic{opacity:1}
nav a.on .nic{opacity:1;color:var(--terracotta-fonce)}
nav a:hover{color:var(--tx);text-decoration:none}
nav a.on{color:var(--nuit);border-bottom-color:var(--terracotta-fonce)}

@media(max-width:719px){
  nav{position:fixed;top:auto;bottom:0;left:0;right:0;
    height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding:0 4px calc(env(safe-area-inset-bottom));
    border-top:1px solid var(--bd);border-bottom:0;
    box-shadow:0 -2px 14px rgba(15,23,42,.07);
    justify-content:space-around;gap:0}
  nav a{flex:1 1 0;min-width:0;text-align:center;padding:0 3px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;font-weight:600;line-height:1.15;
    border-bottom:0;border-top:2.5px solid transparent;overflow:hidden}
  nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav a .nic{width:21px;height:21px;opacity:.8}
  nav a{position:relative}
  nav a .np{position:absolute;top:6px;left:50%;margin-left:3px;
    min-width:16px;height:16px;padding:0 4px;font-size:10px;
    box-shadow:0 0 0 2px #fff}
  nav a.on .np{box-shadow:0 0 0 2px var(--eau-clair)}
  nav a.on{border-top-color:var(--terracotta-fonce);background:var(--eau-clair);color:var(--nuit)}
}

main{max-width:1160px;margin:0 auto;padding:18px 14px 28px}
@media(max-width:719px){
  main{padding:14px 12px calc(var(--nav-h) + env(safe-area-inset-bottom) + 78px)}
}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.card.clic:hover{border-color:var(--sauge);transform:translateY(-2px)}
@media(min-width:720px){.card{padding:18px 20px}}
.card.clic{cursor:pointer;transition:box-shadow .15s, border-color .15s, transform .1s}
.card.clic:hover{border-color:var(--bd2);box-shadow:var(--sh-h)}
.card.clic:active{transform:scale(.995)}
.card h2{display:flex;align-items:center;gap:8px}
.muted{color:var(--tx2);font-size:var(--t-s)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* align-items:start : sans cela, une carte tres haute (tableau des delais)
   etire toutes les autres de la meme rangee et cree du vide. */
.grid{display:grid;gap:12px;align-items:start}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* ---------- Boutons ---------- */
button,.btn{font-family:var(--corps);font-size:var(--t-s);font-weight:600;cursor:pointer;
  border-radius:999px;padding:10px 18px;border:1px solid var(--bd2);
  background:var(--blanc);color:var(--nuit);
  transition:transform .12s ease,background .16s,border-color .16s,color .16s;
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
button:hover,.btn:hover{border-color:var(--nuit);background:var(--blanc);
  color:var(--nuit);transform:translateY(-1px)}
button:active,.btn:active{transform:none}
.btn-p{background:var(--terracotta-fonce);color:#fff;border-color:var(--terracotta-fonce)}
.btn-p:hover{background:#96482F;border-color:#96482F;color:#fff}
.btn-a{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.btn-a:hover{background:var(--nuit-clair);border-color:var(--nuit-clair);color:#fff}
.btn-d{background:#fff;color:var(--err);border-color:#e8c4c1}
.btn-d:hover{background:var(--err-l);border-color:#d9a49f;color:var(--err)}
.btn-s{padding:6px 14px;font-size:var(--t-xs);border-radius:999px;min-height:34px}
.btn-full{width:100%}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulaires ---------- */
label{display:block;font-size:var(--t-s);font-weight:650;color:var(--tx2);margin:14px 0 5px;
  letter-spacing:.01em}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--bd2);
  border-radius:var(--r-s);font-family:inherit;font-size:16px; /* 16px : evite le zoom iOS */
  background:#fff;color:var(--tx);transition:border-color .15s,box-shadow .15s}
@media(min-width:720px){input,select,textarea{font-size:15px}}
input:hover,select:hover,textarea:hover{border-color:var(--tx3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--eau-clair)}
textarea{min-height:96px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235b6b7f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.check{display:flex;align-items:center;gap:10px;margin:11px 0;font-size:var(--t-m);
  font-weight:500;color:var(--tx);cursor:pointer}
.check input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--p)}
fieldset{border:0;padding:0;margin:0}

/* ---------- Recherche ---------- */
.recherche{position:relative;margin-bottom:14px}
.recherche input{padding:14px 14px 14px 44px;font-size:16px;border-radius:12px;
  box-shadow:var(--sh);border-color:var(--bd)}
.recherche input::placeholder{color:var(--tx3)}
.recherche .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--tx3);font-size:16px;pointer-events:none}

/* ---------- Badges ---------- */
/* "Jetons" de la charte : majuscules espacees, fond teinte, pas de bordure. */
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;
  font-weight:700;background:var(--eau-clair);color:var(--teal-tx);white-space:nowrap;
  letter-spacing:.05em;text-transform:uppercase;border:0}
.b-ok{background:#EDF1E9;color:var(--sauge-tx)}
.b-warn{background:var(--terracotta-voile);color:var(--terracotta-tx)}
.b-err{background:var(--err-l);color:var(--err)}
.b-info{background:var(--eau-clair);color:var(--teal-tx)}
.b-gris{background:var(--nuit-voile);color:var(--nuit)}

/* ---------- Timeline parcours ----------
   Deborde forcement sur mobile : on l'assume avec un degrade qui signale
   qu'il reste des etapes a droite, plutot qu'une coupe seche. */
.tl-wrap{position:relative}
.tl-wrap:after{content:"";position:absolute;top:0;right:0;bottom:12px;width:34px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);pointer-events:none}
.tl{display:flex;gap:0;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:thin;
  scroll-snap-type:x proximity}
.tl .et{flex:0 0 auto;text-align:center;position:relative;padding:0 8px;min-width:94px;
  scroll-snap-align:center}
.tl .pt{width:28px;height:28px;border-radius:50%;margin:0 auto 7px;display:grid;
  place-items:center;font-size:13px;font-weight:700;background:var(--ivoire-fonce);color:var(--tx3);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--bord)}
.tl .et.faite .pt{background:var(--sauge-fonce);color:#fff;box-shadow:0 0 0 1px var(--sauge-fonce)}
.tl .et.en_cours .pt{background:var(--teal);color:#fff;
  box-shadow:0 0 0 1px var(--teal), 0 0 0 5px var(--eau-clair)}
.tl .et .lb{font-size:11.5px;color:var(--tx2);line-height:1.3}
.tl .et.en_cours .lb{color:var(--teal-tx);font-weight:700}
.tl .et:not(:last-child):after{content:"";position:absolute;top:14px;left:calc(50% + 18px);
  width:calc(100% - 36px);height:2.5px;background:var(--bord);border-radius:2px}
.tl .et.faite:not(:last-child):after{background:var(--sauge-fonce)}

/* ---------- Encart action ---------- */
.action{background:var(--nuit);color:#fff;
  border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--sh2);
  position:relative;overflow:hidden}
.action:before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);pointer-events:none}
.action .t{font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;opacity:.8;
  font-weight:650}
.action .v{font-size:var(--t-l);font-weight:670;margin:5px 0 13px;position:relative}
.action button{background:var(--terracotta-fonce);color:#fff;border:0;font-weight:650}
.action button:hover{background:#96482F;color:#fff}
.action .alerte{background:rgba(0,0,0,.22);border-radius:9px;padding:10px 12px;
  font-size:var(--t-s);margin-bottom:12px;position:relative}

/* ---------- KPI ---------- */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:14px}
@media(min-width:560px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:15px 14px;
  text-align:center;box-shadow:var(--sh);display:flex;flex-direction:column;
  justify-content:center;min-height:88px;transition:border-color .15s}
.kpi:hover{border-color:var(--bd2)}
.kpi .v{font-family:var(--display);font-size:clamp(22px,2.2vw,29px);font-weight:600;color:var(--nuit);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;word-break:break-word}
.kpi .v .u{font-size:.62em;font-weight:650;color:var(--tx2);margin-left:2px}
.kpi .l{font-size:var(--t-xs);color:var(--tx2);margin-top:5px;font-weight:550}
.kpi.fort{background:var(--eau-clair);border-color:var(--eau)}

/* ---------- Listes ---------- */
.item{padding:13px 0;border-bottom:1px solid var(--bd)}
.item:last-child{border-bottom:0}
.item:first-child{padding-top:4px}
.item .t{font-weight:640;line-height:1.35}
/* La ligne courante contient un bloc texte + un badge : le texte doit pouvoir
   se reduire, le badge jamais se couper. */
.item .between{align-items:flex-start}
.item .between>div:first-child{min-width:0;flex:1 1 auto}
.item .between>.badge,.item .between>span{flex:0 0 auto}
.item .corps{min-width:0;flex:1}
.item .droite{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.item[onclick],.item.clic{cursor:pointer;border-radius:var(--r-s);
  padding-left:10px;padding-right:10px;margin:0 -10px;transition:background .12s}
.item[onclick]:hover,.item.clic:hover{background:var(--ivoire)}
/* Sous 480 px, le badge passe sous le texte : plus aucun mot coupe. */
@media(max-width:479px){
  .item .between{flex-direction:column;gap:7px}
  .item .between>div:first-child{width:100%}
}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
th{text-align:left;padding:10px 10px;color:var(--tx2);font-size:var(--t-xs);font-weight:680;
  border-bottom:2px solid var(--bd);white-space:nowrap;text-transform:uppercase;
  letter-spacing:.06em;background:var(--ivoire-fonce);position:sticky;top:0}
td{padding:11px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
tbody tr:hover{background:var(--ivoire)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-s);border:1px solid var(--bd)}
.scroll-x table{font-size:var(--t-s)}

/* ---------- Barres de graphique ---------- */
.bar{margin:11px 0}
.bar .lg{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-s);
  margin-bottom:5px;align-items:baseline}
.bar .lg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .lg b{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:680}
.bar .tr{height:8px;background:var(--ivoire-fonce);border-radius:999px;overflow:hidden}
.bar .fl{height:100%;background:var(--teal);
  border-radius:999px;transition:width .4s ease-out}

/* ---------- Onglets ---------- */
.tabs-wrap{position:relative;margin-bottom:14px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  /* Signale qu'il reste des onglets a droite au lieu de les couper net. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
@media(min-width:720px){.tabs{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;padding:8px 15px;border-radius:999px;font-size:var(--t-s);
  background:#fff;border:1px solid var(--bd2);color:var(--tx2);min-height:36px}
.tabs button:hover{border-color:var(--tx3);color:var(--tx)}
.tabs button.on{background:var(--nuit);color:#fff;border-color:var(--nuit);font-weight:650}
.tabs button.on:hover{background:var(--p-d)}

/* ---------- Pastilles « nouveau depuis votre derniere visite » ----------
   Terracotta plutot que la couleur de marque : elle doit accrocher l'oeil sans
   se confondre avec les jetons d'etat, qui disent autre chose. */
.tabs button .pt{display:none;margin-left:7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--terracotta);color:#fff;font-size:11px;font-weight:700;
  place-items:center;font-variant-numeric:tabular-nums;line-height:1;vertical-align:middle}
.tabs button.on .pt{background:#fff;color:var(--nuit)}
.pt-l{display:inline-grid;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--terracotta);color:#fff;font-size:11px;font-weight:700;place-items:center;
  font-variant-numeric:tabular-nums;line-height:1;vertical-align:middle;margin-left:6px}

/* ---------- Creneaux ---------- */
.jours{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.jours .jt{text-align:center;font-size:11px;color:var(--tx2);font-weight:680;padding:4px 0;
  text-transform:uppercase;letter-spacing:.03em}
.jours .j{aspect-ratio:1;border:1px solid var(--bd);border-radius:var(--r-s);background:#fff;
  display:grid;place-items:center;font-size:14px;cursor:pointer;padding:0;min-height:0}
.jours .j.off{opacity:.35;cursor:not-allowed;background:#f8fafc;border-color:var(--bd)}
.jours .j.dispo{border-color:var(--eau);color:var(--teal-tx);font-weight:680;background:var(--eau-clair)}
.jours .j.dispo:hover{background:var(--eau);border-color:var(--teal)}
.jours .j.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:700;
  box-shadow:0 0 0 3px var(--eau-clair)}
.creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.creneaux button{padding:13px 4px;font-weight:660;font-variant-numeric:tabular-nums}
.creneaux button.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- Modale ---------- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60;display:grid;
  place-items:end center;padding:0;backdrop-filter:blur(2px)}
.modal .box{background:#fff;border-radius:18px 18px 0 0;padding:20px;width:100%;
  max-width:640px;max-height:92vh;overflow:auto;box-shadow:var(--sh2);
  padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media(min-width:640px){
  .modal{place-items:center;padding:20px}
  .modal .box{border-radius:18px;padding-bottom:20px}
}

/* ---------- Divers ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 26px);transform:translateX(-50%);
  z-index:80;background:var(--nuit);color:#fff;padding:12px 18px;border-radius:11px;
  font-size:var(--t-m);box-shadow:var(--sh2);max-width:90vw;text-align:center}
@media(min-width:720px){.toast{bottom:26px}}
.toast.err{background:var(--err)}
.vide{text-align:center;color:var(--tx2);padding:26px 14px;font-size:var(--t-m)}
.login{max-width:470px;margin:5vh auto;padding:0 16px 40px}
.login .card{padding:34px 30px 30px;box-shadow:var(--sh2);border-radius:18px}

/* --- Page d'accueil : logos et titrage ---
   Les deux collectivites sont l'entree de l'ecran : elles occupent la
   premiere moitie de la carte, a hauteur egale et alignees sur leur base.
   L'intitule vient ensuite, en trois niveaux de lecture, pour qu'un long
   nom de dispositif reste lisible sans jamais deborder. */
.logos{display:flex;align-items:flex-end;justify-content:center;
  gap:30px;margin:2px 0 24px}
.logos img{height:132px;width:auto;max-width:44%}
@media(max-width:479px){.logos{gap:22px;margin-bottom:20px}.logos img{height:108px}}
@media(max-width:359px){.logos img{height:92px}}

.titrage{text-align:center;padding-top:20px;border-top:1px solid var(--bd)}
.titrage .sur{font-size:12.5px;font-weight:680;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx2)}
.login h1{margin:3px 0 1px;font-size:33px;line-height:1.06;
  font-family:var(--logo);color:var(--p);letter-spacing:-.005em}
.titrage .sous{font-size:19px;font-weight:640;color:var(--tx);letter-spacing:.005em}
@media(max-width:379px){.login h1{font-size:28px}.titrage .sous{font-size:17px}}
.login .accroche{text-align:center;margin-top:12px;padding-bottom:4px;
  border-bottom:1px solid var(--bd)}
.login form{margin-top:18px}
header .logo-h{height:26px;width:auto;flex:0 0 auto;
  background:#fff;border-radius:5px;padding:2px 3px}
.charge{text-align:center;padding:46px;color:var(--tx2)}

/* Bouton d'action flottant : remonte au-dessus de la barre basse sur mobile. */
.fab{position:fixed;right:16px;z-index:26;border-radius:999px;padding:14px 20px;
  box-shadow:var(--sh2);font-size:var(--t-m);font-weight:660;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px)}
@media(max-width:479px){.fab{padding:13px 17px;font-size:var(--t-s)}}
@media(min-width:720px){.fab{bottom:24px;right:24px}}

/* Selection multiple de postes de travaux : des cases a cocher groupees par
   categorie, assez espacees pour se cocher au pouce. */
.bloc-postes{margin-top:14px}
.bloc-postes .t{font-size:12.5px;font-weight:680;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx2);margin-bottom:6px}
.bloc-postes .check{display:flex;align-items:flex-start;gap:9px;padding:7px 0;
  border-bottom:1px solid var(--bd);margin:0;cursor:pointer}
.bloc-postes .check:last-child{border-bottom:0}
.bloc-postes .check input{margin-top:2px;flex:0 0 auto}

/* ---------- Visite guidee ----------
   Le voile assombrit toute la page sauf l'element commente : le trou est
   obtenu par une ombre demesuree, ce qui evite de decouper un masque et
   reste net a toutes les tailles. Le voile capte les clics : pendant la
   visite, on avance avec les boutons de la bulle. */
.tuto-voile{position:fixed;inset:0;z-index:80}
.tuto-trou{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(15,23,42,.62), 0 0 0 3px var(--p) inset;
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}

.tuto-bulle{position:fixed;z-index:81;background:var(--card);border:1px solid var(--bd);border-radius:14px;
  box-shadow:var(--sh2);padding:16px 17px 15px;max-width:calc(100vw - 24px)}
.tuto-bulle.centree{top:50%;left:50%;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 32px))}
.tuto-bulle.chargement{min-height:64px}
/* Petite fleche vers l'element commente. */
.tuto-bulle:not(.centree)::before{content:'';position:absolute;left:var(--fleche,28px);
  width:13px;height:13px;background:inherit;transform:rotate(45deg);margin-left:-6px}
.tuto-bulle[data-sens=bas]::before{top:-6px;box-shadow:-2px -2px 3px rgba(15,23,42,.05)}
.tuto-bulle[data-sens=haut]::before{bottom:-6px;box-shadow:2px 2px 3px rgba(15,23,42,.05)}

.tuto-jauge{height:4px;border-radius:999px;background:var(--bd);overflow:hidden}
.tuto-jauge span{display:block;height:100%;background:var(--p);
  border-radius:999px;transition:width .25s ease}
.tuto-rang{margin-top:9px;font-size:11.5px;font-weight:670;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx2)}
.tuto-bulle h3{margin:4px 0 7px;font-size:17.5px;line-height:1.25}
.tuto-bulle p{margin:0;color:var(--tx);line-height:1.5;font-size:14.5px}
.tuto-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.tuto-actions .sp{flex:1}
/* Mobile : l'action principale passe en pleine largeur, a portee du pouce. */
@media(max-width:479px){
  .tuto-bulle h3{font-size:16.5px}
  .tuto-bulle p{font-size:14px}
  .tuto-actions .sp{flex:1 0 100%;order:-1;height:0}
  .tuto-actions [data-suiv]{flex:1 0 100%;order:2}
  .tuto-actions [data-prec],.tuto-actions [data-passer]{flex:1 1 auto}
}

/* ---------- Connexion rapide (mode demonstration) ---------- */
.demo-zone{margin-top:24px;padding-top:20px;border-top:1px solid var(--bd)}
.demo-titre{font-weight:670;font-size:var(--t-m);margin-bottom:6px;color:var(--tx)}
.demo-btn{text-align:left;justify-content:flex-start;border-color:var(--bd2);
  padding:13px 16px;font-weight:620}
.demo-btn:hover{border-color:var(--teal);color:var(--teal-tx);background:var(--eau-clair)}
.demo-btn:disabled{opacity:.6;cursor:progress}

/* =========================================================================
   Graphiques du pilotage
   ========================================================================= */

/* --- Anneau + legende : cote a cote au large, empiles sur mobile --- */
.gr-anneau{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.gr-anneau svg{width:170px;height:170px;flex:0 0 auto;margin:0 auto}
.gr-lg{list-style:none;margin:0;padding:0;flex:1 1 220px;min-width:0}
.gr-lg li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:var(--t-s);
  border-bottom:1px solid var(--bd)}
.gr-lg li:last-child{border-bottom:0}
.gr-lg i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.gr-lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-lg b{font-variant-numeric:tabular-nums;font-weight:680}
.gr-lg em{font-style:normal;color:var(--tx2);font-size:var(--t-xs);min-width:34px;text-align:right}
.gr-lg.compact li{border:0;padding:3px 0}

/* --- Entonnoir de parcours --- */
/* Placement explicite : le placement automatique melangeait libelle, barre
   et valeur des que la valeur occupait deux lignes. */
.gr-ent .et{display:grid;grid-template-columns:1fr 52px;gap:3px 10px;margin-bottom:10px;
  align-items:center}
.gr-ent .lb{grid-column:1;grid-row:1}
.gr-ent .tr{grid-column:1;grid-row:2}
.gr-ent b{grid-column:2;grid-row:1/3}
.gr-ent .lb{font-size:var(--t-s);color:var(--tx);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gr-ent b{grid-row:1/3;font-variant-numeric:tabular-nums;font-weight:700;text-align:right;
  font-size:var(--t-m);color:var(--tx)}
.gr-ent .tr{height:9px;background:var(--ivoire-fonce);border-radius:999px;overflow:hidden}
.gr-ent .fl{height:100%;border-radius:999px;transition:width .4s ease-out}

/* --- Courbe --- */
.gr-serie{width:100%;height:auto;display:block}

/* --- Barres colorees --- */
.gr-barres .bar{margin:10px 0}
.gr-barres .bar:first-child{margin-top:2px}

/* --- Barre de repartition (aides / reste a charge) --- */
.gr-rep .piste{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:14px 0 10px;
  background:var(--ivoire-fonce)}
.gr-rep .piste span{display:block;transition:width .4s ease-out}

/* --- Carte choroplethe --- */
.gr-carte svg{width:100%;height:auto;display:block;max-height:60vh;margin:0 auto}
.gr-carte .cm{transition:fill .15s, stroke-width .15s;cursor:default}
.gr-carte .cm:hover{stroke:var(--terracotta-fonce);stroke-width:2.4}
.gr-carte-lg{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;font-size:var(--t-xs);color:var(--tx2)}
.gr-carte-lg .t{font-weight:680;margin-right:6px;color:var(--tx)}
.gr-carte-lg span{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.gr-carte-lg i{width:20px;height:11px;border-radius:3px;border:1px solid var(--bd)}
.gr-carte p.muted{text-align:center;margin:8px 0 0}
/* Sur mobile les etiquettes deviennent illisibles : on ne garde que les aplats. */
@media(max-width:559px){
  .gr-carte svg text{display:none}
  .gr-carte svg{max-height:none}
}

/* --- Grille de KPI resserree dans une carte --- */
.kpis-3{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.kpis-3 .kpi{padding:11px 8px;min-height:74px;box-shadow:none;background:var(--ivoire)}
.kpis-3 .kpi .v{font-size:clamp(16px,1.7vw,21px)}
@media(max-width:399px){.kpis-3{grid-template-columns:repeat(2,1fr)}}

/* --- Bandeau de filtres : compact et discret --- */
.filtres label{margin-top:0}
.filtres{background:var(--blanc)}

/* Tableau des delais : borne en hauteur, en-tetes figes au defilement. */
.tab-borne{max-height:420px;overflow:auto}
.tab-borne thead th{position:sticky;top:0;z-index:2}

/* ---------- Fil de discussion menage <-> accompagnateur ---------- */
.fil{display:flex;flex-direction:column;gap:9px;max-height:420px;overflow-y:auto;
  padding:4px 2px}
.fil .msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:var(--t-s);
  line-height:1.55}
/* "moi" = celui qui regarde l'ecran : aligne a droite, teinte de la charte. */
.fil .msg.moi{align-self:flex-end;background:var(--eau-clair);
  border:1px solid var(--eau);border-bottom-right-radius:5px}
.fil .msg.lui{align-self:flex-start;background:var(--ivoire);
  border:1px solid var(--bord);border-bottom-left-radius:5px}
.fil .qui{font-weight:700;color:var(--nuit);margin-bottom:3px;font-size:var(--t-xs)}
.fil .quand{font-weight:400;color:var(--tx2);margin-left:7px}
.fil .txt{color:var(--tx);white-space:normal;word-break:break-word}

/* ---------- Cloche et panneau de notifications ---------- */
header .cloche{position:relative;background:rgba(255,255,255,.14);border-color:transparent;
  padding:7px 12px;font-size:15px;min-height:36px}
header .cloche:hover{background:rgba(255,255,255,.26)}
#pastille{display:none;position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--terracotta);color:#fff;
  font-size:11px;font-weight:700;place-items:center;border:2px solid var(--nuit);
  font-variant-numeric:tabular-nums;line-height:1}
.notifs{display:flex;flex-direction:column;max-height:60vh;overflow-y:auto;margin:0 -4px}
.notif{display:flex;gap:11px;padding:11px 10px;border-bottom:1px solid var(--bd);
  border-radius:var(--r-s);cursor:pointer;transition:background .12s}
.notif:last-child{border-bottom:0}
.notif:hover{background:var(--ivoire)}
.notif.neuf{background:var(--eau-clair)}
.notif.neuf:hover{background:var(--eau)}
.notif .ic{font-size:17px;line-height:1.3;flex:0 0 auto}
.notif .corps{min-width:0;flex:1}
.notif .t{font-weight:650;color:var(--nuit);font-size:var(--t-s)}
.notif .quand{font-size:var(--t-xs);color:var(--tx3);margin-top:3px}
.notif .muted{margin:2px 0 0}

/* ---------- Dossier clos dans l'espace menage : une seule ligne ---------- */
.dossier-clos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 16px;background:var(--ivoire)}
.dossier-clos .ref{font-weight:650;color:var(--nuit);font-size:var(--t-s)}
.dossier-clos .disp{color:var(--tx2);font-size:var(--t-s);flex:1;min-width:0}

/* Caracteristiques d'un poste de travaux : un encadre discret qui separe les
   grandeurs du metier (surface, nombre d'ouvertures) du reste du formulaire. */
.carac{background:var(--nuit-voile);border-radius:12px;padding:12px 14px;margin-top:12px}
.carac label:first-child{margin-top:0}

/* Galerie de photos de chantier : des vignettes carrees, alignees, qui
   supportent le avant/apres cote a cote meme sur un telephone. */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.vign{margin:0}
.vign img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;
  background:var(--nuit-voile)}
.vign figcaption{font-size:11px;color:var(--tx2);margin-top:3px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.stitre{font-size:.95rem;margin:14px 0 6px}
.vign-ko{aspect-ratio:1;border-radius:10px;background:var(--nuit-voile);color:var(--tx2);
  font-size:11px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px}

/* Retour a la fiche du menage depuis un dossier : discret dans la ligne de
   contexte, mais present sur tous les onglets. */
.retour-menage{color:var(--p);text-decoration:none;font-weight:600}
.retour-menage:hover{text-decoration:underline}

/* Ligne d'aide ecartee : cliquable pour en connaitre la raison. */
tr.cliquable{cursor:pointer}
tr.cliquable:hover{background:var(--nuit-voile)}
tr.motifs td{background:var(--nuit-voile);font-size:.9rem}


/* ---------- Plan de financement ----------
   Un document, pas un tableau de bord : les totaux doivent se lire d'un coup
   d'oeil et les lignes ecartees rester visibles sans peser. */
.tplan tr.tot td{font-weight:700;background:var(--ivoire-fonce);
  border-top:2px solid var(--bd);border-bottom:none}
.tplan tr.sstot td{color:var(--tx2);font-size:var(--t-xs);padding-top:4px;
  border-bottom:none;background:var(--ivoire-fonce)}
.tplan tr.hors td{color:var(--tx2)}
.tplan tr.tot:hover,.tplan tr.sstot:hover{background:var(--ivoire-fonce)}
/* Montant reconstitue depuis l'autre colonne : signale, jamais silencieux. */
.approx{color:var(--tx2);cursor:help;font-weight:600}

/* En-tete et pied de page du document imprime. Invisibles a l'ecran : dans
   l'application le contexte est deja la (on sait quel dossier on regarde), sur
   papier il n'y est plus. */
.plan-entete,.plan-pied{display:none}

/* Le plan de financement se remet en main propre ou se joint a un dossier de
   subvention : il doit sortir proprement sur papier -- et SEUL, sans la frise,
   les onglets ni les boutons de la fiche autour de lui.
   La technique du `visibility` plutot que `display` conserve la mise en page
   des tableaux ; masquer par `display:none` les ferait s'effondrer. */
@media print{
  @page{margin:14mm}
  body{background:#fff;color:#000}
  header,#tabs,.no-print,.modal,footer,nav,#nav{display:none !important}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid}
  .scroll-x{overflow:visible;border:none}
  details{display:block}
  details>summary{display:none}
  a[href]:after{content:''}

  body.impression *{visibility:hidden}
  body.impression .card.plan.a-imprimer,
  body.impression .card.plan.a-imprimer *{visibility:visible}
  body.impression .card.plan.a-imprimer{position:absolute;inset:0 auto auto 0;width:100%;
    margin:0;border:none;padding:0}
  body.impression .card.plan.a-imprimer form,
  body.impression .card.plan.a-imprimer .no-print{display:none !important}

  .plan-entete{display:block;margin-bottom:14px;padding-bottom:10px;
    border-bottom:2px solid #000}
  .plan-entete .org{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .plan-entete .doc{font-size:19px;font-weight:700;margin:4px 0 10px}
  .plan-entete .ident{width:auto;font-size:12px}
  .plan-entete .ident td{border:none;padding:2px 18px 2px 0;vertical-align:top}
  .plan-entete .ident td:first-child{color:#555;white-space:nowrap}
  .plan-entete .ident td:last-child{font-weight:600}

  /* Les indicateurs en gros caracteres sont un objet d'ecran : sur papier le
     tableau des totaux dit deja tout, en plus precis. */
  .card.plan .kpis{display:none}
  .card.plan .badge{border:1px solid #999;background:none;color:#000}

  .plan-pied{display:block;margin-top:18px;break-inside:avoid;page-break-inside:avoid}
  .plan-pied p{font-size:11px;color:#333;margin-bottom:16px}
  .plan-pied .signatures{display:flex;gap:32px;margin-top:22px}
  .plan-pied .signatures>div{flex:1;border-top:1px solid #000;padding-top:4px;
    min-height:58px}
  .plan-pied .signatures span{font-size:11px;color:#555}
}

/* Titre de section dans le pilotage : separe deux familles d'indicateurs sans
   les couper en onglets, qui obligeraient a choisir avant de savoir. */
h2.section{margin:26px 0 10px;font-size:var(--t-l);color:var(--nuit);
  padding-bottom:7px;border-bottom:2px solid var(--bord)}

/* Entetes de colonnes triables du pilotage. La fleche indique le sens actif ;
   le double chevron gris dit seulement « cette colonne se trie », sans
   pretendre qu'un tri est en cours. */
#tab th.tri{white-space:nowrap;user-select:none}
#tab th.tri .fl{margin-left:5px;color:var(--tx2);font-size:.85em}
#tab th.tri.on{color:var(--p)}
#tab th.tri.on .fl{color:var(--p)}
#tab th.tri:hover{background:var(--ivoire)}

/* Reglage des alertes par courriel : la case et son explication sur une meme
   ligne cliquable -- on coche en visant le libelle, pas un carre de 14 px. */
.pref{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;
      border-bottom:1px solid var(--bord,#e2e8f0);cursor:pointer}
.pref:last-child{border-bottom:0}
.pref input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--p,#1d6f6a)}
.pref span{flex:1 1 auto;min-width:0}