/* =============================================================================
   Portail projets VMI – feuille de style
   Langage visuel repris du tableau de bord V7 : ardoise sombre, accent cuivre, statuts
   rouge / orange / vert, codes projet en chasse fixe. Thème clair disponible (data-theme="light").
   ============================================================================= */

@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/static/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/static/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-display:swap;font-weight:600;src:url(/static/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#12161d; --panel:#1a1f29; --panel-2:#1f2530; --panel-3:#252c39;
  --border:#2a3140; --border-soft:#232a37;
  --text:#edf0f5; --text-dim:#9aa3b5; --text-faint:#7a8498; --meteo-noir:#0b0d12;
  --copper:#c9814f; --copper-light:#e2a878; --copper-dim:#3d2c22; --copper-glow:rgba(201,129,79,.28);
  --green:#4fae7f; --green-dim:#1f3a2e; --green-text:#8fe0b4;
  --vmi:#7ac143;
  --amber:#dfa440; --amber-dim:#3e3322; --amber-text:#f5c877;
  --red:#e2585a; --red-dim:#3e2428; --red-text:#ff9a9c;
  --blue:#5b8dc7; --blue-dim:#1f2c3d;
  --glow-1:rgba(201,129,79,.09); --glow-2:rgba(91,141,199,.07);
  --ombre:0 10px 30px rgba(0,0,0,.35);
  --r:12px; --r-s:8px;
  --mono:"Plex Mono","Cascadia Mono",Consolas,monospace;
  --barre-h:64px;
}
html[data-theme="light"]{
  --bg:#f0efe9; --panel:#ffffff; --panel-2:#f6f5f1; --panel-3:#eeece6;
  --border:#ddd9d0; --border-soft:#e8e5de;
  --text:#201d18; --text-dim:#5f584b; --text-faint:#7b7262; --meteo-noir:#2a2620;
  --copper:#a86a34; --copper-light:#8a4f26; --copper-dim:#f1e2cf; --copper-glow:rgba(168,106,52,.22);
  --green:#2f8f5f; --green-dim:#dcf1e5; --green-text:#1e6b46;
  --amber:#b4790a; --amber-dim:#fbecce; --amber-text:#8a5c07;
  --red:#c23b3d; --red-dim:#fbdfdf; --red-text:#a3282a;
  --blue:#3f74ad; --blue-dim:#e3ecf6;
  --glow-1:rgba(168,106,52,.08); --glow-2:rgba(63,116,173,.06);
  --ombre:0 10px 30px rgba(60,50,30,.12);
}

/* alias des anciens noms de variables utilisés dans les gabarits */
:root,html[data-theme="light"]{--rouge:var(--red);--vert-p:var(--green);--ok:var(--green);--ambre:var(--amber);--orange:var(--amber);
  --graphite:var(--text);--anth:var(--copper);--dem:var(--green);--resp:var(--blue);--del:var(--text-faint);--cuivre:var(--copper);
  --doux:var(--text-dim);--pale:var(--text-faint);--gris:var(--text-dim);--urg-t:var(--red-text);--urg-f:var(--red-dim);
  --trait:var(--border);--ligne:var(--border);--clo-t:var(--text-faint);--kpi:var(--panel-2);--ardoise:var(--blue)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barre-h) + 12px)}
body{margin:0;min-height:100vh;color:var(--text);font-family:"Archivo",system-ui,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  background:radial-gradient(ellipse 1200px 600px at 12% -10%,var(--glow-1),transparent 60%),
             radial-gradient(ellipse 900px 500px at 100% 0%,var(--glow-2),transparent 55%),var(--bg);background-attachment:fixed}
a{color:var(--copper-light);text-decoration:none} a:hover{color:var(--copper)}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:6px}
.mono,.code-p{font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =========================================================== bandeau supérieur */
.bandeau{position:sticky;top:0;z-index:40;height:var(--barre-h);display:flex;align-items:center;gap:26px;padding:0 28px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--border)}
.bandeau .logo{display:flex;align-items:center;gap:12px;flex:none;color:var(--text)}
.bandeau .logo img{height:26px;width:auto;display:block}
.bandeau .logo span{font-size:12.5px;color:var(--text-dim);font-weight:600;border-left:1px solid var(--border);padding-left:12px;line-height:1.2}
.menu{display:flex;gap:2px;align-items:center;height:100%}
.menu a{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;color:var(--text-dim);font-weight:550;font-size:13.5px}
.menu a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu a:hover{color:var(--text)}
.menu a.actif{color:var(--text)}
.menu a.actif::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--copper);box-shadow:0 0 12px var(--copper-glow)}
.menu .compteur{font-family:var(--mono);font-size:10.5px;padding:0 6px;border-radius:20px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim)}
.menu .plus{position:relative;height:100%}
.menu .plus>button{height:100%;background:none;border:0;color:var(--text-dim);font-weight:550;padding:0 14px;display:flex;align-items:center;gap:6px;cursor:pointer}
.menu .plus>button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu .plus>button:hover,.menu .plus.ouvert>button,.menu .plus>button.actif{color:var(--text);background:none}
.deroulant{display:none;position:absolute;top:calc(100% - 6px);left:0;min-width:220px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:6px;box-shadow:var(--ombre)}
.plus.ouvert .deroulant{display:block}
.deroulant a{height:auto;padding:9px 12px;border-radius:var(--r-s);display:block;color:var(--text-dim)}
.deroulant a:hover,.deroulant a.actif{background:var(--panel-2);color:var(--text)}
.deroulant a.actif::after{display:none}
.outils{margin-left:auto;display:flex;align-items:center;gap:10px}
.recherche{position:relative}
.recherche input{width:230px;padding:8px 12px 8px 34px;border-radius:20px;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:13px}
.recherche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--text-faint);fill:none;stroke-width:2}
.rond{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;padding:0}
.rond:hover{border-color:var(--copper);color:var(--copper-light);background:var(--panel)}
.rond svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:12px;
  color:var(--copper-light);background:var(--copper-dim);border:1px solid var(--copper);cursor:pointer;position:relative;padding:0;font-size:11px;letter-spacing:-.3px}
.compte{position:relative}
.compte .deroulant{left:auto;right:0;top:calc(100% + 8px)}
.compte.ouvert .deroulant{display:block}
.compte .qui{padding:10px 12px 8px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.compte .qui b{display:block} .compte .qui small{color:var(--text-dim)}

/* barre d'onglets mobile */
.onglets-mobile{display:none}

main.page{max-width:1500px;margin:0 auto;padding:30px 28px 70px}

@media (max-width:1100px){.recherche input{width:160px}.bandeau .logo span{display:none}}
@media (max-width:860px){
  :root{--barre-h:56px}
  .bandeau{padding:0 16px;gap:12px}
  .menu,.recherche{display:none}
  .onglets-mobile{display:flex;position:fixed;z-index:45;left:0;right:0;bottom:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border)}
  .onglets-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:10px;color:var(--text-dim);font-size:11px;font-weight:600}
  .onglets-mobile a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .onglets-mobile a.actif{color:var(--copper-light);background:var(--copper-dim)}
  main.page{padding:20px 14px 100px}
}

/* =========================================================== titres, en-tête de page */
.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.titre{margin:0;font-stretch:112%;font-weight:750;font-size:28px;line-height:1.15;letter-spacing:-.2px;color:var(--text)}
.titre .code{font-family:var(--mono);font-stretch:100%;font-weight:600;color:var(--copper-light);letter-spacing:0}
.chapo{margin:6px 0 0;color:var(--text-dim);font-size:14.5px;max-width:78ch}
.maj{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);display:inline-flex;align-items:center;gap:7px}
.maj .point,.point-vert{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block}
.retour{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);margin-bottom:12px}
.retour:hover{color:var(--copper-light)}
h2,.section{display:flex;align-items:center;gap:10px;margin:30px 0 14px;font-size:13px;font-weight:700;letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase}
h2::before,.section::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--copper)}
.petit{font-size:12.5px;color:var(--text-dim)}
.sous-titre{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-dim);margin:6px 0 20px}

/* =========================================================== champs et boutons */
input,select,textarea{font:inherit;font-size:13.5px;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--panel);color:var(--text);color-scheme:dark}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{color-scheme:light}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-glow)}
textarea{width:100%;min-height:96px;line-height:1.5;resize:vertical}
button,.btn{font:inherit;font-size:13.5px;font-weight:650;border:1px solid var(--copper);background:var(--copper);color:#1a120c;border-radius:var(--r-s);padding:9px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1.2}
button:hover,.btn:hover{background:var(--copper-light);border-color:var(--copper-light);color:#1a120c}
button.vert,.btn.vert{background:var(--copper);border-color:var(--copper)}
.btn.discret,button.discret{background:var(--panel);border-color:var(--border);color:var(--text)}
.btn.discret:hover,button.discret:hover{border-color:var(--copper);color:var(--copper-light);background:var(--panel)}
button.danger{background:transparent;border-color:var(--red);color:var(--red-text)} button.danger:hover{background:var(--red-dim)}
button.secondaire{background:transparent;border-color:var(--border);color:var(--text-dim);font-weight:600;padding:7px 12px;font-size:12.5px}
button.secondaire:hover{background:transparent;border-color:var(--copper);color:var(--copper-light)}
.form-compte{display:grid;gap:8px;max-width:420px}.form-compte label{font-weight:600;font-size:13px;margin-top:8px}
.mdp-montre{font-family:var(--mono);font-size:26px;letter-spacing:.08em;padding:14px 18px;border-radius:var(--r);background:var(--panel-2);border:1px dashed var(--copper);display:inline-block;user-select:all}
.barre,form.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
label.case{display:inline-flex;gap:7px;align-items:center;font-size:13px;color:var(--text-dim)}
input[type=checkbox]{accent-color:var(--copper);width:16px;height:16px;padding:0}

/* onglets segmentés */
.onglets,.onglets-p{display:inline-flex;gap:2px;padding:4px;border-radius:11px;background:var(--panel);border:1px solid var(--border);margin:0 0 22px;flex-wrap:wrap}
.onglets a,.onglets-p a{padding:7px 15px;border-radius:8px;color:var(--text-dim);font-size:13.5px;font-weight:600}
.onglets a:hover,.onglets-p a:hover{color:var(--text)}
.onglets a.actif,.onglets-p a.actif{background:var(--copper-dim);color:var(--copper-light);box-shadow:inset 0 0 0 1px var(--copper)}

/* =========================================================== indicateurs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.kpi{position:relative;overflow:hidden;display:block;color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--glow-1),transparent 70%)}
a.kpi:hover{border-color:var(--copper);color:inherit}
.kpi .l{font-size:11.5px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim)}
.kpi .v{font-family:var(--mono);font-weight:600;font-size:26px;line-height:1.2;margin-top:6px;color:var(--text)}
.kpi .petit{margin-top:4px;font-size:12px}
.kpis.l2 .v{font-size:20px}
.v.vert{color:var(--green-text)} .v.orange{color:var(--amber-text)} .v.rouge{color:var(--red-text)} .v.urg{color:var(--red-text)}
html[data-theme="light"] .v.vert{color:var(--green)} html[data-theme="light"] .v.orange{color:var(--amber)} html[data-theme="light"] .v.rouge,html[data-theme="light"] .v.urg{color:var(--red)}

/* =========================================================== cartes projet */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.cp{position:relative;display:flex;flex-direction:column;color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s}
.cp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--statut,var(--border))}
.cp.vert{--statut:var(--green)} .cp.orange{--statut:var(--amber)} .cp.rouge{--statut:var(--red)}
.cp:hover{border-color:var(--copper);color:inherit;transform:translateY(-2px)}
.cp .tete{padding:16px 18px 4px 20px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cp .code{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--copper-light)}
.cp .nom{font-size:15px;font-weight:650;color:var(--text);margin-top:2px;line-height:1.3}
.cp .client{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.cp .corps{padding:6px 18px 14px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;font-size:13px}
.cp .corps .l{font-size:11px;font-weight:650;letter-spacing:.4px;text-transform:uppercase;color:var(--text-faint)}
.cp .corps b{font-weight:650}
.cp .pied{border-top:1px solid var(--border-soft);padding:10px 18px 12px 20px;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-dim);background:var(--panel-2)}
.etat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-faint)}
.etat.ok::before{background:var(--green);box-shadow:0 0 6px var(--green)} .etat.encours::before{background:var(--amber)} .etat.ko::before{background:var(--red);box-shadow:0 0 6px var(--red)}
.pastille{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:20px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.pastille.ok{background:var(--green-dim);border-color:transparent;color:var(--green-text)}
.pastille.ko{background:var(--red-dim);border-color:transparent;color:var(--red-text)}
.pastille.attention{background:var(--amber-dim);border-color:transparent;color:var(--amber-text)}
html[data-theme="light"] .pastille.ok{color:var(--green)} html[data-theme="light"] .pastille.ko{color:var(--red)}
.barre-av{height:6px;background:var(--panel-3);border-radius:3px;overflow:hidden;margin-top:6px}
.barre-av div{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--vmi))}
.chip{font-size:12px;color:var(--text-dim)}

/* rail des revues RP0 -> RP8 */
.rail{display:flex;align-items:flex-start;padding:12px 18px 12px 20px}
.rail .st{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;font-family:var(--mono);font-size:10px;color:var(--text-faint)}
.rail .st::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--border)}
.rail .st:first-child::before{display:none}
.rail .st.fait::before,.rail .st.courant::before{background:var(--green)}
.rail .pt{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--panel);border:2px solid var(--border);margin-bottom:5px}
.rail .st.fait .pt{background:var(--green);border-color:var(--green)}
.rail .st.courant .pt{border:3px solid var(--copper);box-shadow:0 0 0 4px var(--copper-glow);animation:pulse 2.4s ease-in-out infinite}
.rail .st.courant{color:var(--copper-light);font-weight:600}
.rail .st.courant.retard .pt{border-color:var(--red);box-shadow:0 0 0 4px rgba(226,88,90,.25)}
.rail .st.courant.retard{color:var(--red-text)}
.rail .st.na{opacity:.3}
.rail .dt{font-size:10.5px;color:var(--text-faint);margin-top:1px}
.rail.grand{padding:8px 4px 2px}.rail.grand .st{font-size:11.5px}.rail.grand .pt{width:18px;height:18px}
.rail.grand .st::before{top:8px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--copper-glow)}50%{box-shadow:0 0 0 7px transparent}}

/* =========================================================== sections, fiches */
.sec,.carte{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.carte{padding:20px}
.sec>h3,.bloc>h3{margin:0;padding:15px 20px 6px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:9px;background:none!important}
.sec>h3::before,.bloc>h3::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--pastille,var(--copper))}
.sec .grille2{display:grid;grid-template-columns:repeat(4,1fr);padding:4px 8px 12px}
.sec .cellule{padding:9px 12px}
.sec .cellule .l{font-size:12px;color:var(--text-faint)}
.sec .cellule .v{font-weight:600;margin-top:2px}
.blocs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bloc{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.bloc .corps{padding:12px 20px 20px;display:grid;grid-template-columns:150px 1fr;gap:10px 12px;align-items:center}
.bloc .corps label{color:var(--text-dim);font-size:13px}
.bloc .corps .plein{grid-column:1/3}

/* =========================================================== tableaux */
.tab-env{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:auto;-webkit-overflow-scrolling:touch}
table.simple,table.plan{width:100%;border-collapse:collapse;font-size:13px}
table.simple th,table.plan th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);padding:11px 12px;border-bottom:1px solid var(--border);background:var(--panel-2);white-space:nowrap}
table.simple td,table.plan td{padding:10px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top}
table.simple tr:last-child td,table.plan tr:last-child td{border-bottom:0}
table.plan tr.groupes th{background:var(--panel);color:var(--text);border-bottom:2px solid var(--grp,var(--copper))}
th.g-id{--grp:var(--copper)} th.g-dem,th.g-dem2{--grp:var(--green)} th.g-resp,th.g-resp2{--grp:var(--blue)} th.g-del,th.g-del2{--grp:var(--text-faint)}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
td.id{font-family:var(--mono);font-weight:600;white-space:nowrap} td.id a{color:var(--copper-light)}
td.c{white-space:nowrap} td.sujet{min-width:220px;color:var(--text)}
td.av{white-space:nowrap;font-weight:650} td.av.fait{color:var(--green-text)} td.av.pris{color:var(--blue)}
td.cal{white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--text-dim)}
td.cal.retard{color:var(--red-text)} td.cal.proche{color:var(--amber-text)} td.cal.ok{color:var(--green-text)}
html[data-theme="light"] td.cal.retard{color:var(--red)} html[data-theme="light"] td.cal.ok,html[data-theme="light"] td.av.fait{color:var(--green)} html[data-theme="light"] td.cal.proche{color:var(--amber)}
td.com{max-width:320px;color:var(--text-dim);white-space:pre-wrap}
tr.urgente td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tr.urgente td.sujet{color:var(--red-text);font-weight:650}
html[data-theme="light"] tr.urgente td.sujet{color:var(--red)}
tr.cloturee td,tr.cloturee td.id a,tr.cloturee td.av,tr.cloturee td.cal{color:var(--text-faint)}
tr.cloturee td.sujet{text-decoration:line-through;color:var(--text-faint)}
td.manque{background:var(--amber-dim)!important}

/* =========================================================== messages */
.ok-msg{background:var(--green-dim);color:var(--green-text);padding:12px 16px;border-radius:var(--r-s);margin-bottom:16px}
.info{background:var(--blue-dim);color:var(--text);border:1px solid var(--border);padding:12px 16px;border-radius:var(--r-s);margin-bottom:16px}
.badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim)}
html[data-theme="light"] .ok-msg{color:var(--green)}

/* =========================================================== planning (Gantt) */
.legende{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--text-dim)}
.legende span i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.gantt{--nom:250px;position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;font-size:12px}
.gantt-int{position:relative;min-width:900px}
.gantt .zone-auj{position:absolute;left:var(--nom);right:0;top:0;bottom:0;pointer-events:none}
.gantt .ech{position:relative;height:32px;border-bottom:1px solid var(--border);margin-left:var(--nom);background:var(--panel-2)}
.gantt .ech span{position:absolute;top:0;height:32px;border-left:1px solid var(--border-soft);padding:8px 6px;color:var(--text-dim);font-family:var(--mono);font-size:10.5px;overflow:hidden;white-space:nowrap}
.gantt .lg{display:flex;border-bottom:1px solid var(--border-soft);min-height:48px}
.gantt .lg:last-of-type{border-bottom:0}
.gantt .nom{width:var(--nom);flex:none;padding:8px 14px;border-right:1px solid var(--border-soft);background:var(--panel)}
.gantt .nom a,.gantt .nom b{font-family:var(--mono);font-weight:600;color:var(--copper-light);font-size:12.5px}
.gantt .nom .petit{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.gantt .piste{position:relative;flex:1}
.gantt .ph{position:absolute;top:15px;height:12px;border-radius:6px;opacity:.85;overflow:hidden}
.gantt .ph i{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28)}
.gantt .jal{position:absolute;top:10px;width:9px;height:9px;transform:translateX(-4.5px) rotate(45deg);background:var(--text);border:1.5px solid var(--panel);z-index:1}
.gantt .jal.retard{background:var(--red)} .gantt .jal.ok{background:var(--green)}
.gantt .jal-l{position:absolute;top:30px;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--text-faint)}
.gantt .auj{position:absolute;top:0;bottom:0;border-left:2px solid var(--copper);box-shadow:0 0 12px var(--copper-glow);z-index:2;pointer-events:none}
.gantt .auj::after{content:"auj.";position:absolute;bottom:6px;left:5px;font-family:var(--mono);font-size:10px;color:var(--copper-light)}

/* =========================================================== responsive */
@media (max-width:1000px){.blocs{grid-template-columns:1fr}.sec .grille2{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .titre{font-size:23px}
  .entete{margin-bottom:18px;padding-bottom:14px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px} .kpi .v{font-size:21px}
  .cartes{grid-template-columns:1fr}
  .cp .corps{grid-template-columns:1fr 1fr}
  .barre select,.barre input[type=search]{flex:1 1 46%;min-width:0}
  .bloc .corps{grid-template-columns:1fr}.bloc .corps .plein{grid-column:1}
  .mm{display:none}
  .gantt{--nom:140px}
  .rail .dt{display:none} .rail{padding-left:10px;padding-right:10px}
  .entete>div{text-align:left!important}
  .maj{white-space:normal}
  .onglets,.onglets-p{display:flex;overflow-x:auto;flex-wrap:nowrap;max-width:100%}
  .onglets a,.onglets-p a{white-space:nowrap}
}


/* =============================================================================
   V5 – Tableau de bord
   ============================================================================= */
.lien-net{font-size:13px;color:var(--copper-light);text-decoration:none;padding:6px 4px}
.lien-net:hover{text-decoration:underline}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:18px}
.kpi{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--border);
  color:var(--text);text-decoration:none;position:relative;overflow:hidden;transition:border-color .15s,transform .15s}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--copper)}
.kpi.ok::before{background:var(--green)}.kpi.ko::before{background:var(--red)}
a.kpi:hover{border-color:var(--copper);transform:translateY(-2px)}
a.kpi:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.kpi-lib{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.kpi-val{font-size:30px;font-weight:800;font-stretch:112%;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi.ko .kpi-val{color:var(--red-text)}
.kpi-sous{font-size:12.5px;color:var(--text-dim)}
.tdb-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tdb-carte{grid-column:span 12;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;min-width:0}
.tdb-carte.l5{grid-column:span 5}.tdb-carte.l6{grid-column:span 6}.tdb-carte.l7{grid-column:span 7}
.tdb-carte>header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tdb-carte h2{margin:0;font-size:15px;font-weight:750;letter-spacing:0;text-transform:none;color:var(--text);padding:0;border:0}
.tdb-carte h2::before{display:none}
.aide{font-size:12px;color:var(--text-dim)}
.aide.centre{text-align:center;margin:4px 0 0}
.puce{display:inline-block;width:9px;height:9px;border-radius:3px;margin:0 4px 0 10px;vertical-align:baseline}
.graph{width:100%;height:auto;display:block;overflow:visible}
.graph .axe{stroke:var(--border)}
.graph .lib{fill:var(--text-dim);font-size:13px}
.graph .val{fill:var(--text);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.graph .leg{fill:var(--text);font-size:14px}
.graph .centre{fill:var(--text);font-size:30px;font-weight:800}
.graph .piste{fill:var(--panel-3)}
.graph .piste-anneau{stroke:var(--panel-3)}
.graph .cible{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.graph a{cursor:pointer}
.graph .survol{transition:opacity .15s}
.graph:hover .survol{opacity:.55}.graph .survol:hover{opacity:1}
.graph a:focus-visible .survol{opacity:1;outline:2px solid var(--copper)}
.graph-vide{color:var(--text-dim);font-size:13.5px;margin:18px 0}
.ok-txt{color:var(--green-text)}
.centre-jauge{max-width:300px;margin:0 auto}
.echeancier{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.echeancier a{display:grid;grid-template-columns:62px 46px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 10px;
  border-radius:var(--r-s);text-decoration:none;color:var(--text);border:1px solid transparent}
.echeancier a:hover{background:var(--panel-2);border-color:var(--border)}
.ech-date{display:flex;flex-direction:column;line-height:1.1}.ech-date small{color:var(--text-dim);font-family:var(--mono);font-size:11px}
.ech-rp{font-family:var(--mono);font-weight:600;color:var(--copper-light)}
.ech-projet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ech-dans{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);text-align:right;min-width:42px}
.ech-dans.proche{color:var(--amber-text);font-weight:600}
.defile-x{overflow-x:auto}
.chaleur{border-collapse:separate;border-spacing:3px;width:100%;font-variant-numeric:tabular-nums}
.chaleur th{font-size:11.5px;color:var(--text-dim);font-weight:600;text-align:center;padding:4px;white-space:nowrap}
.chaleur tbody th{text-align:left;color:var(--text);font-size:13px;padding-right:10px}
.chaleur td{text-align:center;font-size:12px;padding:7px 4px;border-radius:5px;min-width:38px;
  background:color-mix(in srgb,var(--copper) calc(var(--i) * 85%),var(--panel-2));color:var(--text)}
.chaleur td.total{background:none;font-weight:700}
.carte-hebdo p{margin:0 0 12px}
.pied-tdb{margin-top:18px}
@media (max-width:900px){
  .tdb-carte.l5,.tdb-carte.l6,.tdb-carte.l7{grid-column:span 12}
  .kpi-val{font-size:26px}
}
@media (max-width:560px){
  .graph .lib,.graph .val{font-size:22px}.graph .leg{font-size:23px}.graph .centre{font-size:40px}
  .graph.jauge .lib{font-size:14px}.graph.jauge .centre{font-size:30px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 14px}
  .echeancier a{grid-template-columns:52px 40px minmax(0,1fr) auto;gap:8px}
  .echeancier .pastille{display:none}
}

/* V5 – projets : bascule tuiles / tableau, météo */
.bascule-vue{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-s);overflow:hidden;margin-left:auto}
.bascule-vue button{background:transparent;border:0;border-radius:0;color:var(--text-dim);font-weight:600;padding:8px 14px}
.bascule-vue button.actif{background:var(--copper-dim);color:var(--copper-light)}
.bascule-vue button:hover{background:var(--panel-2);color:var(--text)}
.filtre-actif{font-size:12.5px;padding:6px 10px;border-radius:20px;background:var(--copper-dim);color:var(--copper-light);text-decoration:none}
.meteo{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;border:2px solid var(--panel)}
.m-vert{background:var(--green)}.m-orange{background:var(--amber)}.m-rouge{background:var(--red)}
.m-noir{background:var(--meteo-noir);box-shadow:0 0 0 1px var(--text-dim)}
.pastille.critique{background:var(--meteo-noir);color:#fff;border-color:var(--red)}
.ko-txt{color:var(--red-text)}
.tableau-projets td,.tableau-projets th{white-space:nowrap}
.tableau-projets a{color:var(--text);text-decoration:none}.tableau-projets a:hover{color:var(--copper-light)}

/* =============================================================================
   V5 – Point hebdo
   ============================================================================= */
.hebdo-semaine{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.h-sem{margin:4px 0;font-size:20px;font-weight:750;text-transform:none;letter-spacing:0;padding:0;border:0;color:var(--text)}
.h-sem::before{display:none}
.petit-titre{display:block;font-weight:650;font-size:13px;margin:6px 0}
textarea.plein{width:100%;resize:vertical}
.intro-cr{white-space:pre-line;margin-bottom:14px}
.meteo-resume{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip-meteo{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--border);font-size:13px}
.meteo-lib{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.revue-cadre{margin-top:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--panel)}
table.revue{width:100%;border-collapse:collapse;min-width:1050px}
.revue th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:10px 12px;border-bottom:1px solid var(--border);z-index:1}
.revue td{padding:12px;border-bottom:1px solid var(--border-soft);vertical-align:top;font-size:13.5px}
.revue tr:target td{background:var(--copper-dim)}
.revue .c-projet{width:170px}.revue .c-donnees{width:210px}.revue .c-meteo{width:150px}.revue .c-actions{width:250px}
.revue .c-projet .code{font-weight:600;color:var(--copper-light);text-decoration:none}
.revue .nom{font-weight:600;margin:2px 0}
.c-donnees>div{margin-bottom:3px;white-space:nowrap}
.eti{display:inline-block;min-width:80px;color:var(--text-dim);font-size:12px}
.barre-av.mini{display:inline-block;width:50px;height:5px;border-radius:3px;background:var(--panel-3);vertical-align:middle;overflow:hidden}
.barre-av.mini span{display:block;height:100%;background:var(--green)}
.choix-meteo{border:0;margin:0;padding:0;display:grid;gap:4px}
.choix-meteo label{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--r-s);cursor:pointer;font-size:12.5px;border:1px solid transparent}
.choix-meteo input{position:absolute;opacity:0;pointer-events:none}
.choix-meteo label:hover{background:var(--panel-2)}
.choix-meteo input:checked+.meteo{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--copper)}
.choix-meteo label:has(input:checked){border-color:var(--border);background:var(--panel-2);font-weight:650}
.choix-meteo input:focus-visible+.meteo{outline:2px solid var(--copper);outline-offset:3px}
.tend{font-weight:800;margin-left:4px}.tend.mieux{color:var(--green-text)}.tend.pire{color:var(--red-text)}
.c-situation textarea{min-height:72px;line-height:1.45}
.texte-situation{white-space:pre-line;line-height:1.45}
details.avant{margin-top:6px;font-size:12.5px;color:var(--text-dim)}
details.avant summary{cursor:pointer}
details.avant p{white-space:pre-line;margin:4px 0 0;padding:6px 8px;border-left:2px solid var(--border)}
.etat-sauve{display:block;font-size:11.5px;color:var(--text-dim);min-height:16px;margin-top:4px}
.etat-sauve.ok{color:var(--green-text)}.etat-sauve.ko{color:var(--red-text)}
.act-ligne{padding:6px 8px;border-radius:var(--r-s);background:var(--panel-2);margin-bottom:6px;font-size:12.5px}
.act-ligne .code{font-size:11.5px;color:var(--copper-light);text-decoration:none}
details.ajout-action summary{cursor:pointer;color:var(--copper-light);font-weight:650;font-size:13px;padding:4px 0;list-style:none}
details.ajout-action summary::-webkit-details-marker{display:none}
.form-action{display:grid;gap:6px;margin-top:6px}
.form-action input,.form-action select{width:100%}
.barre-bas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 30px;position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%)}
.envoi-grille{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:18px;align-items:start}
.apercu-mail iframe{width:100%;height:560px;border:1px solid var(--border);border-radius:var(--r-s);background:#fff}
@media (max-width:900px){
  .envoi-grille{grid-template-columns:1fr}
  /* revue : une carte par projet sur smartphone */
  .revue-cadre{border:0;background:none}
  table.revue{min-width:0}
  table.revue thead{display:none}
  table.revue,table.revue tbody,table.revue tr,table.revue td{display:block;width:auto!important}
  table.revue tr{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);margin-bottom:14px;padding:4px 0}
  table.revue td{border:0;padding:8px 14px}
  .choix-meteo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barre-bas{position:static;background:none}
}
/* appairage Excel */
.appairage{max-width:560px}
.code-appairage{font:700 34px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:var(--copper-light);margin:4px 0 14px}
.boutons-appairage{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}