/* FlowPilote — charte AN | Flow Consulting */
/* Polices hébergées en local (RGPD : aucun appel à Google Fonts) */
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/FrauncesSB.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PJS-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PJSMed.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PJSSB.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PJS-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PJSXB.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  --green-deep:#2B6B52; --green:#358062; --green-light:#6DC09A; --green-pale:#E8F5EF;
  --coral:#AD5946; --coral-light:#E0917A; --coral-pale:#FFF0EB;
  --dark:#2D3748; --dark-soft:#3A4556;
  --offwhite:#FAFBFC; --white:#FFFFFF;
  --text:#3D4450; --text-muted:#6B7280; --line:#E5E7EB; --dark-sec:#9AA2AE;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--offwhite);color:var(--text);line-height:1.5}
h1,h2,h3,.serif{font-family:'Fraunces',serif}
button{font-family:inherit}

/* CONNEXION */
#login{position:fixed;inset:0;background:linear-gradient(135deg,var(--dark) 0%,var(--dark-soft) 100%);display:flex;align-items:center;justify-content:center;z-index:50}
.login-card{background:var(--white);border-radius:20px;padding:40px 36px;width:380px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.login-card img{width:64px;height:64px;margin-bottom:14px}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:var(--green)}
.brand .sep{color:var(--dark-sec);font-weight:400}
.login-sub{color:var(--text-muted);font-size:13px;margin-bottom:14px}
.demo-flag{display:inline-block;background:var(--coral-pale);color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.3px;padding:5px 12px;border-radius:20px;margin-bottom:18px}
.field{position:relative;margin-bottom:14px;text-align:left}
.field label{font-size:12px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px}
.field input{width:100%;padding:12px 44px 12px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:14px;font-family:inherit;outline:none}
.field input:focus{border-color:var(--green)}
.eye{position:absolute;right:12px;top:33px;cursor:pointer;background:none;border:none;font-size:18px;opacity:.6}
.eye.on{opacity:1}
.btn{width:100%;padding:13px;border:none;border-radius:11px;background:var(--green);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.btn:hover{background:var(--green-deep)}
.btn:disabled{background:#9CC4B3;cursor:wait}
.lock-note{margin-top:14px;font-size:11px;color:var(--green);font-weight:600}
.login-err{margin-top:10px;font-size:12.5px;color:var(--coral);font-weight:600;min-height:18px}

/* APP SHELL */
#app{display:none}
#app.on{display:block}
.shell{display:flex;min-height:100vh}
aside{width:236px;flex:none;background:var(--dark);color:#C7CDD6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.side-logo img{width:38px;height:38px}
.side-logo .name{font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:var(--green-light);line-height:1.05}
.side-logo .name .sep{color:var(--dark-sec);font-weight:400}
.side-logo .tool{font-size:10px;color:var(--dark-sec);font-weight:600;letter-spacing:.4px}
nav{padding:10px 12px;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:#AEB6C2;font-size:13.5px;font-weight:600;padding:11px 13px;border-radius:11px;cursor:pointer;margin-bottom:3px}
.nav-item .ic{width:18px;text-align:center;font-size:15px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--green);color:#fff}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px}
.side-foot .sig{font-family:'Fraunces',serif;font-style:italic;color:var(--dark-sec);font-size:11px;margin-bottom:10px}
.btn-logout{width:100%;background:none;border:1px solid rgba(255,255,255,.18);color:#C7CDD6;border-radius:9px;padding:8px;font-size:12px;font-weight:600;cursor:pointer}
.btn-logout:hover{background:rgba(255,255,255,.08);color:#fff}

main{flex:1;min-width:0}
.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:15px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:8}
.topbar h1{font-size:20px;color:var(--green-deep)}
.topbar .right{display:flex;align-items:center;gap:14px}
.live{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--green);font-weight:700}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green-light);box-shadow:0 0 0 0 rgba(109,192,154,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(109,192,154,.6)}70%{box-shadow:0 0 0 7px rgba(109,192,154,0)}100%{box-shadow:0 0 0 0 rgba(109,192,154,0)}}
.chip{font-size:12.5px;color:var(--text-muted)}.chip b{color:var(--text)}
.chip-demo{background:var(--coral-pale);color:var(--coral);font-weight:700;padding:3px 10px;border-radius:20px}
.page{padding:24px 28px 50px}
.page-sub{color:var(--text-muted);font-size:13.5px;margin:-2px 0 22px}

/* états de chargement / vide */
.loading,.empty{padding:40px;text-align:center;color:var(--text-muted);font-size:13.5px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.kpi .k-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:8px}
.k-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi .k-val{font-family:'Fraunces',serif;font-size:32px;font-weight:700;line-height:1;color:var(--green-deep)}
.kpi .k-val.warn{color:var(--coral)}.kpi .k-val.ok{color:var(--green)}
.kpi .k-foot{font-size:11.5px;margin-top:8px;color:var(--text-muted)}
.kpi .k-foot .up{color:var(--green);font-weight:700}.kpi .k-foot .down{color:var(--coral);font-weight:700}
.dots{display:flex;flex-direction:column;gap:4px}
.dots span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-muted)}
.dots i{width:8px;height:8px;border-radius:50%}
.dot-g{background:var(--green)}.dot-c{background:var(--coral)}.dot-n{background:#C9D0D8}

.grid3{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:18px;margin-bottom:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:20px}
.card.flat{margin-bottom:0}
.card h2,.card h3{font-size:15.5px;color:var(--green-deep);margin-bottom:2px}
.card .csub{font-size:12px;color:var(--text-muted);margin-bottom:16px}

.donut-wrap{display:flex;align-items:center;gap:16px}
.donut{width:124px;height:124px}.donut circle{fill:none;stroke-width:17}
.donut-center{position:relative}
.dc-num{position:absolute;top:50%;left:62px;transform:translate(-50%,-50%);text-align:center}
.dc-num .n{font-family:'Fraunces',serif;font-weight:700;font-size:24px;color:var(--green-deep);display:block;line-height:1}
.dc-num .l{font-size:10px;color:var(--text-muted)}
.legend{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.legend .leg{display:flex;align-items:center;gap:8px;width:calc(100% + 12px);margin:0 -6px;padding:3px 6px;
  background:none;border:0;border-radius:7px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.legend .leg:hover{background:var(--green-pale)}
.legend i{width:11px;height:11px;border-radius:3px}.legend b{margin-left:auto;color:var(--green-deep)}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12.5px}
.bar-row .lbl{width:108px;color:var(--text)}
.bar-track{flex:1;background:#EEF1F4;border-radius:20px;height:10px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--green);border-radius:20px}
.bar-row .n{width:22px;text-align:right;font-weight:700;color:var(--green-deep)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:8px 10px;border-bottom:1.5px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:none}
.who{font-size:11px;color:var(--text-muted)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.p-cours{background:var(--green-pale);color:var(--green-deep)}.p-retard{background:var(--coral-pale);color:var(--coral)}.p-clos{background:#EEF1F4;color:var(--text-muted)}.p-afaire{background:#EEF4FB;color:#3B6491}
.relance{font-size:11px;color:var(--green);font-weight:600;white-space:nowrap}.relance.auto::before{content:"⟳ "}
/* Retour de la personne qui traite (espace collaborateur) */
.retour{margin-top:7px;padding:8px 10px;border-radius:9px;background:#EEF4FB;border-left:3px solid #3B6491;
  font-size:11px;font-weight:700;color:#3B6491;max-width:420px}
.retour.fini{background:var(--green-pale);border-left-color:var(--green);color:var(--green-deep)}
.retour-txt{display:block;margin-top:3px;font-weight:400;font-size:11.5px;color:var(--text);line-height:1.45}
.retour-txt.entier{white-space:pre-wrap}
.retour-plus{display:inline-block;margin-top:5px;padding:0;border:0;background:none;font-family:inherit;
  font-size:10.5px;font-weight:700;color:inherit;text-decoration:underline;cursor:pointer}
.retour-plus:hover{opacity:.7}
/* Les justificatifs vivent hors du bloc « réponse » : une pièce peut être
   déposée sans qu'un mot ait été écrit. */
.retour-pj{display:block;margin-top:6px;font-weight:600;font-size:10.5px;color:var(--text-muted)}
.set-note{display:inline-block;margin-top:5px;font-weight:700;color:var(--green-deep)}
.fiche-pieces{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:600;font-size:11px}
/* Fil des échanges : qui a dit quoi, dans l'ordre */
.fiche-fil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.echange{border-left:3px solid var(--line);padding:2px 0 2px 12px}
.echange.de-vous{border-left-color:var(--green)}
.echange-qui{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;color:var(--text-muted)}
.echange-qui span{font-weight:600}
.echange-txt{font-size:12.5px;white-space:pre-wrap;margin-top:3px}

/* Ce qui attend une décision du responsable */
.a-valider-bandeau{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--green-pale);border:1px solid var(--green-light);border-left:4px solid var(--green);
  border-radius:14px;padding:14px 18px;margin-bottom:18px}
.a-valider-bandeau strong{display:block;font-size:14px;color:var(--green-deep)}
.a-valider-bandeau span{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.a-valider-btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font-weight:700;font-size:13px;cursor:pointer}
.a-valider-btn:hover{background:var(--green-deep)}
#filters button.f-valider{border-color:var(--green);color:var(--green-deep);font-weight:700}
.row-btn.valide{border-color:var(--green);color:var(--green-deep)}
.renvoi-ta{width:100%;margin-top:6px;min-height:64px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:12.5px;color:var(--text);outline:none;resize:vertical}
.renvoi-ta:focus{border-color:var(--green)}
.renvoi-actions{display:flex;gap:7px;margin-top:7px}
.pj-lien{background:none;border:none;padding:0;margin-right:10px;font-family:inherit;font-size:10.5px;
  font-weight:600;color:var(--green-deep);text-decoration:underline;cursor:pointer}
.pj-lien:disabled{opacity:.6;cursor:wait;text-decoration:none}
.row-btn{background:#fff;border:1.5px solid var(--line);color:var(--text-muted);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.row-btn:hover{border-color:var(--green);color:var(--green-deep)}
.row-btn:disabled{opacity:.5;cursor:wait}

/* filtres */
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filters button{border:1.5px solid var(--line);background:var(--white);color:var(--text-muted);font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:20px;cursor:pointer}
.filters button.on{background:var(--green-pale);border-color:var(--green-light);color:var(--green-deep)}

/* formulaire */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/3}
.fl{font-size:12px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px}
.inp,.sel,.ta{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:var(--text)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--green)}
.ta{resize:vertical;min-height:80px}
.fh{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--text-muted)}
.form-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.btn-prim{background:var(--green);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-weight:700;font-size:13.5px;cursor:pointer}
.btn-prim:hover{background:var(--green-deep)}
.btn-prim:disabled{background:#9CC4B3;cursor:wait}
.btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--line);border-radius:10px;padding:11px 18px;font-weight:600;font-size:13.5px;cursor:pointer}
.btn-ghost:hover{border-color:var(--green);color:var(--green-deep)}
.btn-ghost:disabled{opacity:.5;cursor:wait}
.form-msg{margin-top:12px;font-size:12.5px;font-weight:600;min-height:18px}
.form-msg.ok{color:var(--green)}.form-msg.err{color:var(--coral)}

/* IA */
.ia-tag{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;margin-bottom:12px}
.ia-card{background:linear-gradient(135deg,#F4FBF8 0%,#FFFFFF 60%);border:1px solid var(--green-pale)}
.ia-res{font-size:13.5px;color:var(--text)}.ia-res b{color:var(--green-deep)}
.ia-sugg{background:var(--coral-pale);border-left:3px solid var(--coral);padding:11px 14px;border-radius:0 10px 10px 0;margin-top:12px;font-size:13px}
.ia-sugg .lab{font-size:10.5px;font-weight:800;color:var(--coral);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:3px}

/* paramètres */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);gap:16px}
.set-row:last-child{border-bottom:none}
.set-row .t{font-weight:600;font-size:13.5px}.set-row .d{font-size:12px;color:var(--text-muted)}
.badge-ok{background:var(--green-pale);color:var(--green-deep);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.demo-list{margin:2px 0 0 18px;font-size:12.5px;color:var(--text);line-height:1.8}
.demo-list li{margin-bottom:2px}
.demo-list a{color:var(--green-deep);font-weight:600}

/* toast */
#toast{position:fixed;bottom:22px;right:22px;background:var(--dark);color:#fff;font-size:13px;font-weight:600;padding:12px 18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none;z-index:99}
#toast.on{opacity:1;transform:none}
#toast.err{background:var(--coral)}
/* Message avec une porte de sortie : le toast ne laisse passer les clics que
   lorsqu'il porte un bouton — sinon il barrerait le coin de l'écran. */
#toast.avec-action{display:flex;align-items:center;gap:16px;pointer-events:auto}
.toast-btn{background:none;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-family:inherit;
  font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer;white-space:nowrap;
  min-height:36px}
.toast-btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.toast-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:900px){.toast-btn{min-height:44px;padding:10px 16px}}

.hide{display:none}
@media(max-width:900px){
  aside{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid3,.grid2,.form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  #mobilenav{display:flex}
}
/* barre de navigation mobile */
#mobilenav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--dark);z-index:20;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
#mobilenav button{background:none;border:none;color:#AEB6C2;font-size:10px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 8px;border-radius:8px}
#mobilenav button .ic{font-size:17px}
#mobilenav button.active{color:var(--green-light)}
/* Cette règle doit suivre `#mobilenav{display:none}` : placée dans le bloc
   @media plus haut, elle était écrasée et le téléphone n'avait aucune navigation. */
@media(max-width:900px){
  #mobilenav{display:flex}
  .page{padding-bottom:96px}   /* le contenu ne passe pas sous la barre fixe */
}

/* ---------- FICHE ACTION (panneau latéral) ---------- */
/* La fiche est un <div>, pas un <aside> : la règle `aside{...}` plus haut
   habille la barre latérale sombre (fond foncé, texte gris clair) et la fiche
   en héritait — texte illisible sur fond blanc, et invisible sous 900 px.
   La couleur est posée explicitement pour ne dépendre d'aucun héritage. */
.ligne-action{cursor:pointer;transition:background .12s}
.ligne-action:hover{background:var(--green-pale)}
#fiche-fond{position:fixed;inset:0;background:rgba(45,55,72,.45);z-index:60}
#fiche{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100vw;background:var(--offwhite);
  color:var(--text);z-index:61;display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(0,0,0,.18)}
#fiche.hide,#fiche-fond.hide{display:none}
.fiche-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 24px;background:var(--white);border-bottom:1px solid var(--line);flex-shrink:0}
.fiche-sur{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--green)}
.fiche-head h2{font-size:19px;line-height:1.3;color:var(--dark);margin-top:3px;overflow-wrap:anywhere}
.fiche-fermer{background:none;border:1.5px solid var(--line);border-radius:9px;width:32px;height:32px;
  font-size:14px;color:var(--text-muted);cursor:pointer;flex-shrink:0}
.fiche-fermer:hover{border-color:var(--coral);color:var(--coral)}
#fiche-corps{overflow-y:auto;padding:18px 24px 32px;flex:1}
.fiche-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.p-prio{background:#EEF1F4;color:var(--text-muted)}
.p-prio.fort{background:var(--coral-pale);color:var(--coral)}
.p-neutre{background:#F1F3F6;color:var(--text-muted);font-weight:600}
.fiche-bloc{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.fiche-h3{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-muted);font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:10px}
.fiche-infos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fiche-infos dt{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.fiche-infos dd{font-size:13.5px;font-weight:600;color:var(--text);margin-top:2px}
.fiche-desc{font-size:13.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.fiche-vide{font-size:12.5px;color:var(--text-muted);font-style:italic}
.fiche-motif{margin-top:9px;font-size:12.5px;color:var(--coral);line-height:1.5}
.fiche-cadence{font-size:13px;font-weight:600;color:var(--green-deep);margin-bottom:10px}
.fiche-histo{list-style:none;font-size:12.5px}
.fiche-histo li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.fiche-histo li:last-child{border-bottom:none}
.fiche-histo em{font-style:normal;font-weight:700;color:var(--text-muted);font-size:11px}
.fiche-ia-relancer{margin-top:12px}
.fiche-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.fiche-form .form-grid{gap:14px}
.fl-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.fl-check input{width:16px;height:16px;accent-color:var(--green)}
.fiche-bloc .retour{max-width:none}
body.fiche-ouverte{overflow:hidden}

/* ---------- LOT D3 : tableau de bord cliquable ---------- */
.kpi.clic{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.kpi.clic:hover{border-color:var(--green-light);box-shadow:0 6px 18px rgba(43,107,82,.10);transform:translateY(-1px)}
.kpi .k-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.k-voir{font-size:11px;font-weight:700;color:var(--green);opacity:.55;white-space:nowrap;transition:opacity .15s}
.kpi.clic:hover .k-voir,.kpi.clic:focus-visible .k-voir{opacity:1}
.bar-row.clic{width:calc(100% + 12px);margin:0 -6px 6px;padding:3px 6px;background:none;border:0;border-radius:8px;
  font:inherit;font-size:12.5px;color:var(--text);text-align:left;cursor:pointer}
.bar-row.clic:hover{background:var(--green-pale)}
.kpi.clic:focus-visible,.legend .leg:focus-visible,.bar-row.clic:focus-visible,
.precision-retirer:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.precision{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--green-pale);border:1px solid var(--green-light);border-radius:12px;padding:9px 14px;
  margin:-4px 0 14px;font-size:12.5px;color:var(--text)}
.precision b{color:var(--green-deep)}
.precision.hide{display:none}
.precision-retirer{background:#fff;border:1.5px solid var(--green-light);color:var(--green-deep);border-radius:8px;
  padding:5px 10px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.precision-retirer:hover{border-color:var(--green)}
/* Sur téléphone, « Voir → » faisait passer les titres de carte sur 3 lignes,
   et rien ne se survole au doigt : la carte entière reste cliquable. */
@media(max-width:900px){.k-voir{display:none}}
@media(max-width:900px){
  #fiche{width:100vw}
  .fiche-infos{grid-template-columns:1fr}
}

/* Lot D4 — filtre par période */
.periode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 14px}
.periode label{font-size:12.5px;font-weight:600;color:var(--text-muted)}
.periode select{border:1.5px solid var(--line);background:var(--white);color:var(--text-muted);font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;max-width:100%}
.periode select.on{background:var(--green-pale);border-color:var(--green-light);color:var(--green-deep)}
.periode select:focus-visible{outline:2px solid var(--green-light);outline-offset:2px}
.periode-base{font-size:12px;color:var(--text-muted)}

/* Suivi sur téléphone : le tableau à 6 colonnes débordait (672 px pour un écran
   de 390 px — statut et boutons hors de l'écran). Chaque action devient une carte. */
@media(max-width:700px){
  #suivi-content thead{display:none}
  #suivi-content table,#suivi-content tbody{display:block}
  #suivi-content tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  #suivi-content tr:last-child{border-bottom:none}
  #suivi-content td{display:block;padding:0;border:none;font-size:12.5px}
  #suivi-content td:first-child{flex-basis:100%;font-size:13.5px}
  #suivi-content td:nth-child(3)::before{content:"Échéance : ";color:var(--text-muted)}
  #suivi-content td:last-child{flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap}
}

/* =====================================================================
   REFONTE « RELIEF » (13/09/2026) — couleurs franches, surfaces en relief,
   barre latérale vivante. Couche posée APRÈS le reste : elle réhabille,
   la structure et les comportements ne changent pas.
   ===================================================================== */
:root{
  --coral:#B8321C; --coral-light:#E8735A; --coral-pale:#FDE4DC;
  --ground:#E7EEEA; --side-a:#1E4A3B; --side-b:#12302A;
  --raise:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(18,48,42,.08),0 16px 32px -14px rgba(18,48,42,.30);
  --raise-hover:inset 0 1px 0 #FFFFFF,0 2px 4px rgba(18,48,42,.08),0 28px 44px -16px rgba(18,48,42,.38);
  --ease:cubic-bezier(.22,1,.36,1);
}
body{background:var(--ground)}

/* connexion */
#login{background:radial-gradient(120% 90% at 20% 0%,#2A5E4B 0%,var(--side-a) 45%,var(--side-b) 100%)}
.login-card{box-shadow:inset 0 1px 0 #FFFFFF,0 30px 70px -20px rgba(0,0,0,.55)}
.brand{color:var(--green-deep);overflow-wrap:anywhere}
.login-by{margin-top:12px;font-size:11px;color:var(--text-muted)}
.login-by b{color:var(--green);font-weight:700}
.btn{background:linear-gradient(180deg,#3F8F6E,var(--green-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px -10px rgba(43,107,82,.8);transition:transform .2s var(--ease)}
.btn:hover{background:linear-gradient(180deg,#3F8F6E,var(--green-deep));transform:translateY(-2px)}
.btn:disabled,.btn:disabled:hover{background:#9CC4B3;box-shadow:none;transform:none}

/* barre latérale : l'emoji sur sa tuile, le survol qui avance et s'illumine */
aside{background:linear-gradient(165deg,var(--side-a) 0%,var(--side-b) 100%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
.side-logo{background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;margin:10px 10px 6px;padding:8px;border-radius:14px;transition:background .2s}
.side-logo:hover{background:rgba(255,255,255,.03)}
.side-logo:focus-visible{outline:2px solid var(--green-light);outline-offset:2px}
.side-logo img{width:40px;height:40px;object-fit:contain;border-radius:12px;transition:transform .35s var(--ease)}
.side-logo:hover img{transform:rotate(-10deg) scale(1.08)}
.side-logo .name{display:block;font-size:16px;color:var(--green-light);overflow-wrap:anywhere}
.side-logo .tool{display:block;margin-top:3px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#B5C6BE}
nav{padding:8px 12px}
.nav-item{padding:7px 10px;border-radius:13px;color:#C3D0CA;margin-bottom:4px;transform-origin:left center;
  transition:transform .24s var(--ease),background .24s,color .24s,box-shadow .24s}
.nav-item .ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:17px;line-height:1;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px -5px rgba(0,0,0,.6);
  transition:transform .3s var(--ease),background .24s,box-shadow .24s}
.nav-item:hover{color:#FFFFFF;background:rgba(109,192,154,.12);transform:translateX(4px) scale(1.02);
  box-shadow:inset 0 0 0 1px rgba(109,192,154,.35),0 0 24px -6px rgba(109,192,154,.55),0 10px 20px -12px rgba(0,0,0,.6)}
.nav-item:hover .ic{transform:translateY(-2px) rotate(-8deg) scale(1.14);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
.nav-item:active{transform:translateX(4px) scale(.99)}
.nav-item.active{color:#12302A;background:linear-gradient(180deg,#F4FBF7,#D9EFE3);box-shadow:inset 0 1px 0 #FFFFFF,0 8px 18px -8px rgba(0,0,0,.55)}
.nav-item.active .ic{background:linear-gradient(180deg,#FFFFFF,#E8F5EF);box-shadow:inset 0 1px 0 #FFFFFF,0 4px 10px -4px rgba(18,48,42,.45)}
.nav-item:focus-visible{outline:2px solid var(--green-light);outline-offset:2px}
.side-foot .sig{color:#A9BDB4}
.side-foot .by{margin-top:10px;font-size:10.5px;color:#A9BDB4}
.side-foot .by b{color:var(--green-light);font-weight:700}

/* en-tête et surfaces en relief */
.topbar{background:rgba(231,238,234,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(18,48,42,.08)}
.topbar h1{color:var(--side-a)}
.kpi,.card{background:linear-gradient(180deg,#FFFFFF 0%,#F7FAF8 100%);border-color:transparent;box-shadow:var(--raise)}
.kpi.clic{transition:transform .22s var(--ease),box-shadow .22s}
.kpi.clic:hover{border-color:transparent;transform:translateY(-5px);box-shadow:var(--raise-hover)}
.kpi.clic:active{transform:translateY(-1px)}
.bar-track{background:#E2EAE5;box-shadow:inset 0 1px 2px rgba(18,48,42,.18)}
.bar-fill{background:linear-gradient(180deg,#46A57C,#2B7A57);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.p-retard{background:var(--coral-pale);color:#A8260F}
.p-prio.fort{color:#A8260F}

/* ce qui attend une décision : chaud et franc, sans filet latéral */
.a-valider-bandeau{background:linear-gradient(180deg,#FFF4EF,#FFE7DE);border:0;
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(110,36,19,.08),0 14px 28px -16px rgba(110,36,19,.35)}
.a-valider-bandeau strong{color:#6E2413}
.a-valider-bandeau span{color:#8A3A28}
.a-valider-btn{background:linear-gradient(180deg,#D8452C,#B8321C);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -8px rgba(184,50,28,.8);transition:transform .2s var(--ease)}
.a-valider-btn:hover{background:linear-gradient(180deg,#D8452C,#B8321C);transform:translateY(-2px)}
.a-valider-btn:focus-visible{outline:2px solid #B8321C;outline-offset:2px}
#filters button.f-valider{border-color:var(--coral-light);color:#A8260F}

/* boutons, onglets, champs */
.btn-prim{background:linear-gradient(180deg,#3F8F6E,var(--green-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px -10px rgba(43,107,82,.75);transition:transform .2s var(--ease)}
.btn-prim:hover{background:linear-gradient(180deg,#3F8F6E,var(--green-deep));transform:translateY(-2px)}
.btn-prim:disabled,.btn-prim:disabled:hover{background:#9CC4B3;box-shadow:none;transform:none}
.btn-ghost,.row-btn{box-shadow:inset 0 1px 0 #FFFFFF,0 2px 5px -2px rgba(18,48,42,.18);transition:transform .2s var(--ease),border-color .2s,color .2s}
.btn-ghost:hover,.row-btn:hover{transform:translateY(-1px)}
.btn-ghost:disabled,.btn-ghost:disabled:hover,.row-btn:disabled,.row-btn:disabled:hover{transform:none}
.filters button{box-shadow:inset 0 1px 0 #FFFFFF,0 2px 5px -3px rgba(18,48,42,.2);transition:transform .2s var(--ease),background .2s,color .2s}
.filters button:hover{transform:translateY(-1px);color:var(--green-deep)}
.filters button.on{background:linear-gradient(180deg,#F4FBF7,#D9EFE3);border-color:#9FD3B8;box-shadow:inset 0 1px 0 #FFFFFF,0 6px 14px -8px rgba(18,48,42,.45)}
.btn-ghost:focus-visible,.btn-prim:focus-visible,.row-btn:focus-visible,.filters button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.inp,.sel,.ta{box-shadow:inset 0 1px 2px rgba(18,48,42,.08)}
.inp:focus,.sel:focus,.ta:focus{box-shadow:0 0 0 3px rgba(53,128,98,.18)}
.ia-sugg{border-left:0;border-radius:10px}
.ia-ajouter{margin-top:12px}
.ia-ajouter:disabled,.ia-ajouter:disabled:hover{opacity:1;cursor:default;color:var(--green-deep);border-color:var(--green-light);background:var(--green-pale)}

/* fiche action */
#fiche{background:var(--ground)}
.fiche-bloc{border-color:transparent;box-shadow:var(--raise)}

/* barre du bas sur téléphone */
#mobilenav{background:linear-gradient(180deg,var(--side-a),var(--side-b));box-shadow:0 -10px 30px -12px rgba(0,0,0,.45)}
#mobilenav button{color:#C3D0CA}
#mobilenav button .ic{display:grid;place-items:center;width:34px;height:28px;border-radius:9px;transition:background .2s,transform .3s var(--ease)}
#mobilenav button.active{color:#FFFFFF}
#mobilenav button.active .ic{background:linear-gradient(180deg,#F4FBF7,#D9EFE3);box-shadow:inset 0 1px 0 #FFFFFF,0 6px 12px -6px rgba(0,0,0,.6)}
#mobilenav button:active .ic{transform:scale(.92)}

@media (prefers-reduced-motion: reduce){
  .nav-item,.nav-item .ic,.side-logo img,.kpi.clic,.btn,.btn-prim,.btn-ghost,.row-btn,.filters button,.a-valider-btn,#mobilenav button .ic{transition:none}
  .nav-item:hover,.nav-item:active,.nav-item:hover .ic,.side-logo:hover img,.kpi.clic:hover,.kpi.clic:active,.btn:hover,.btn-prim:hover,
  .btn-ghost:hover,.row-btn:hover,.filters button:hover,.a-valider-btn:hover,#mobilenav button:active .ic{transform:none}
  .live .dot{animation:none}
}

/* En-tête sur téléphone : le titre, « EN DIRECT » et le nom de l'espace se
   disputaient 390 px (« Tableau de bord » passait sur deux lignes). Le point
   vert suffit à dire « en direct » ; le badge Démonstration, lui, reste. */
@media(max-width:600px){
  .topbar{padding:12px 16px;gap:10px}
  .topbar h1{font-size:18px;white-space:nowrap}
  .topbar .right{gap:8px;min-width:0}
  .live{font-size:0;gap:0}
  .chip:not(:has(.chip-demo)){display:none}
}

/* =====================================================================
   ACCESSIBILITÉ & CONFORT AU DOIGT (15/09/2026) — revue ui-ux-pro-max.
   Couche posée en dernier : elle ne touche qu'aux tailles, aux contrastes
   et aux cibles tactiles. Contrôles dans tests/test-tableau-de-bord.py.
   ===================================================================== */
/* Gris secondaire : #6B7280 ne donnait que 4,1:1 sur le fond vert pâle (sous-titres, « Période ») */
:root{--text-muted:#5B6470}

/* Sujet du Suivi = vrai bouton : la fiche s'ouvre aussi au clavier */
.ligne-ouvrir{display:block;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ligne-ouvrir:hover{color:var(--green-deep);text-decoration:underline}
.ligne-ouvrir:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* « Voir → » était à 55 % d'opacité (2,2:1) : lisible au repos, vert au survol */
.k-voir{opacity:1;color:var(--text-muted)}
.kpi.clic:hover .k-voir,.kpi.clic:focus-visible .k-voir{color:var(--green-deep)}
/* « EN DIRECT » : le vert principal ne donnait que 4,0:1 sur l'en-tête */
.live{color:var(--green-deep)}

/* Plancher de lecture : plus aucun texte sous 12 px */
.demo-flag,.lock-note,.login-by,.side-logo .tool,.side-foot,.side-foot .sig,.side-foot .by,.live,
.kpi .k-foot,.dots span,.dc-num .l,th,.who,.pill,.relance,.retour,.retour-plus,.retour-pj,.pj-lien,
.fh,.ia-tag,.ia-sugg .lab,.badge-ok,#mobilenav button,.fiche-sur,.fiche-infos dt,.fiche-histo em,.k-voir{font-size:12px}
.retour-txt{font-size:13px}
.row-btn,.precision-retirer{font-size:12.5px}
@media(max-width:600px){.live{font-size:0}}   /* sur téléphone, le point vert seul, comme avant */

/* Au doigt : toute commande fait au moins 44 px (règle de PRODUCT.md) */
@media (max-width:900px),(pointer:coarse){
  .row-btn,.precision-retirer,.btn-prim,.btn-ghost,.a-valider-btn,.filters button,.periode select{min-height:44px}
  .row-btn{padding:10px 14px}
  .fiche-fermer{width:44px;height:44px}
  .eye{top:26px;right:2px;width:44px;height:44px}
  .ligne-ouvrir,.legend .leg,.bar-row.clic{min-height:44px}
  .ligne-ouvrir{display:flex;align-items:center}
  .mois-col{min-width:44px}
  .retour-plus,.pj-lien{display:inline-flex;align-items:center;min-height:44px}
}

/* =====================================================================
   GRAPHIQUES (16/09/2026) — lot 2 de la revue ui-ux-pro-max.
   Palette passée au contrôle daltonisme (bleu / corail / vert) : l'écart
   vert ↔ corail n'est acceptable QUE parce que chaque marque est doublée
   d'un libellé. Ne jamais retirer les légendes ni les chiffres.
   ===================================================================== */
:root{--viz-cours:#4468C8;--viz-retard:#C0391F;--viz-clos:#1F8A5B}
.dot-cours{background:var(--viz-cours)}.dot-retard{background:var(--viz-retard)}.dot-clos{background:var(--viz-clos)}
/* le gris des clôturées ne donnait que 1,6:1 sur le blanc : illisible pour une marque */
.dot-g{background:var(--viz-cours)}.dot-c{background:var(--viz-retard)}.dot-n{background:var(--viz-clos)}

/* Résumé réservé au lecteur d'écran : un dessin ne se lit pas à voix haute */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Anneau : le segment visé grossit (survol ou focus sur sa ligne de légende).
   L'épaisseur change d'un coup et ce sont les AUTRES segments qui s'estompent
   en douceur : animer l'opacité ne coûte rien, animer l'épaisseur du trait
   forcerait le navigateur à refaire ses calculs à chaque image. */
.donut circle{transition:opacity .18s var(--ease)}
.donut circle.gros{stroke-width:23}
.donut:has(.gros) circle:not(.gros){opacity:.45}
.legend .leg:hover,.legend .leg:focus-visible{color:var(--green-deep)}

/* Créées contre clôturées : barres en HTML, donc jamais déformées */
.rythme-leg{display:flex;gap:16px;margin:2px 0 8px;font-size:12px;color:var(--text-muted)}
.rythme-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.marque-creees{background:var(--viz-cours)}
.marque-closes{background:var(--viz-clos)}
.rythme{display:flex;align-items:flex-end;gap:4px;height:152px}
.mois-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;height:100%;
  background:none;border:0;border-radius:10px;padding:4px 0;font:inherit;color:var(--text-muted);cursor:pointer}
.mois-col:hover{background:var(--green-pale);color:var(--green-deep)}
.mois-col:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* ligne de base : sans elle, les barres flottaient au milieu d'un cadre vide */
.paire{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:100%;box-shadow:0 1px 0 var(--line)}
.col{display:block;width:40%;max-width:18px;min-height:2px;border-radius:5px 5px 0 0}
.col.vide{background:#C8D2DA}
.col-creees{background:var(--viz-cours)}
.col-closes{background:var(--viz-clos)}
.mois-lbl{font-size:12px;font-weight:700}

@media (prefers-reduced-motion: reduce){.donut circle{transition:none}}

/* =====================================================================
   OUVERTURE & IA (16/09/2026) — lot 3 de la revue ui-ux-pro-max.
   ===================================================================== */
/* « Piste proposée par l'IA » : une idée, pas une alerte — plus de rose */
.ia-sugg{background:#F3F7F5;border:1px solid #D5E0DA;border-radius:10px;color:var(--text)}
.ia-sugg .lab{text-transform:none;letter-spacing:0;font-weight:700;color:var(--green-deep)}
.ia-boutons{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ia-boutons .ia-ajouter{margin-top:0}

/* Réponse d'un collaborateur : teinte pleine et fin contour, sans filet latéral */
.retour{border-left:0;box-shadow:inset 0 0 0 1px rgba(59,100,145,.22)}
.retour.fini{box-shadow:inset 0 0 0 1px rgba(43,107,82,.28)}

/* Cartes fantômes : même place que les vraies, la page ne saute pas au chargement */
.fantome .kpi{min-height:152px}
.fantome .card{min-height:280px}
.fantome-bloc{box-shadow:none;background:#DCE6E0;animation:respire 1.6s ease-in-out infinite}
@keyframes respire{50%{opacity:.55}}

/* Ouverture : cascade des cartes et barres qui poussent, une fois par session */
.entree{animation:entree .55s var(--ease) both}
@keyframes entree{from{transform:translateY(12px);opacity:.001}to{transform:none;opacity:1}}
.col.pousse{transform-origin:50% 100%;animation:pousse .7s var(--ease) .2s both}
@keyframes pousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.kpi .k-val{font-variant-numeric:tabular-nums}   /* les chiffres qui montent ne font pas trembler la carte */

/* « EN DIRECT » : une onde quand des données fraîches arrivent, plus de clignotement permanent */
.live .dot{position:relative;animation:none;box-shadow:none}
.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-light);opacity:0}
.live .dot.battement::after{animation:onde 1.2s var(--ease) 2}
@keyframes onde{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .fantome-bloc,.entree,.col.pousse,.live .dot.battement::after{animation:none}
}

/* ===== LOT 4a — statuts uniques, filtre Type, erreurs lisibles ===== */
/* « À valider » : ambre validé au daltonisme avec les 3 autres couleurs (anneau à 4 segments) */
:root{--viz-valider:#C48600}
.dot-traiter{background:var(--viz-cours)}.dot-valider,.dot-v{background:var(--viz-valider)}
.p-valider{background:#FFF3D6;color:#6B4200}
/* étiquette et liste restent ensemble quand la ligne se replie (téléphone) */
.filtre-paire{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.erreur-chargement .row-btn{margin-left:8px;vertical-align:middle}
/* Renvoi saisi dans la fiche, à la place des boutons */
.fiche-actions[data-renvoi-zone]{display:block}
.fiche-actions[data-renvoi-zone] strong{display:block;font-size:13px;color:var(--text)}
/* Sur téléphone, le message ne recouvre plus la barre de navigation */
@media(max-width:900px){#toast{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom))}}

/* LOT 4b — champ « Action demandée » */
.ta-courte{min-height:70px}
.fl-aide{margin-top:6px;font-size:11.5px;color:var(--text-muted);line-height:1.5}
.fiche-demande{background:var(--green-pale);border-left:3px solid var(--green);padding:10px 12px;border-radius:0 8px 8px 0;white-space:pre-wrap}
.collab-demande{margin-top:14px;background:var(--green-pale);border-left:3px solid var(--green);padding:12px 14px;border-radius:0 10px 10px 0}
.collab-demande-lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);margin-bottom:5px}
.collab-demande p{margin:0;white-space:pre-wrap;line-height:1.6}

/* LOT 4b — page Analyse IA */
.ia-causes,.ia-actions-prop{margin-top:14px}
.ia-causes .lab,.ia-actions-prop .lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);margin-bottom:6px}
.ia-causes ul{margin:0;padding-left:18px;line-height:1.7}
.ia-prop{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.ia-prop h4{margin:0 0 6px;font-size:14px}
.ia-prop p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text-muted);white-space:pre-wrap}
.ia-note{margin-top:14px;font-size:11.5px;color:var(--text-muted)}
.renvoi-ia{margin-top:8px}

/* Page « introuvable » (404.html) — aussi servie sur /api/relances, qui ne doit
   pas être appelable depuis un navigateur */
.page-vide{max-width:440px;margin:0 auto;padding:64px 20px;text-align:center}
.page-vide img{margin-bottom:20px}
.page-vide h1{font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--dark);margin-bottom:12px}
.page-vide p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:12px}
.page-vide .btn{display:inline-block;width:auto;padding:12px 24px;text-decoration:none}

/* Pastilles d'avertissement des Paramètres (âge de la clé du robot).
   Mêmes teintes que le reste de la charte, contraste vérifié ≥ 4,5:1. */
.badge-attention{background:#FFF4E0;color:#7A4B00;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.badge-alerte{background:var(--coral-pale);color:#8A3A28;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}