/* Tableau de bord Présidente — couleurs du Groupe Beaucage : noir (bandeau, navigation, en-têtes de tableaux),
   rouge (accent : boutons, barres, icônes), blanc et gris pâle (fonds), un peu de vert (bonnes nouvelles).
   Cartes KPI avec icône, barres, anneaux. Aucune ressource externe (CSP stricte). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("vendor/polices/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("vendor/polices/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("vendor/polices/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #f3f3f3; --surface: #ffffff; --surface-2: #f7f7f7; --ink: #1a1a1a; --muted: #686868; --line: #e1e1e1;
  --marine: #141414; --marine-2: #2a2a2a; --marine-ink: #ffffff; --bande: #e9e9e9;
  --gb-rouge: #c8102e; --gb-rouge-fonce: #8f0b21; --gb-vert: #2e8b57;
  --accent: #c8102e; --accent-soft: #fbe8eb;
  --orange: #c8102e; --orange-fonce: #8f0b21;
  --s1: #1a1a1a; --s2: #c8102e; --s3: #9a9a9a; --s4: #2e8b57; --s5: #d4d4d4; --s6: #8f0b21;
  --t1: #2e8b57; --t2: #8fc4a1; --t3: #c8c8c8; --t4: #e4818f; --t5: #c8102e;
  --ok-bg: #e3f3e9; --ok: #1f7a4a; --jaune-bg: #fdf0d8; --jaune: #8a5a00; --rouge-bg: #fbe3e6; --rouge: #b0102a;
  --test-bg: #8a5a00; --test-ink: #ffffff;
  --ombre: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  --f-texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f; --surface: #1a1a1a; --surface-2: #222222; --ink: #ededed; --muted: #a3a3a3; --line: #333333;
    --marine: #000000; --marine-2: #1c1c1c; --bande: #161616; --gb-rouge: #e8384f; --gb-vert: #5cc48a;
    --accent: #ef5b6e; --accent-soft: #3a1a20; --orange: #e8384f;
    --s1: #ededed; --s2: #ef5b6e; --s3: #8a8a8a; --s4: #5cc48a; --s5: #444444; --s6: #b52a3d;
    --t1: #5cc48a; --t2: #3e7d58; --t3: #6b6b6b; --t4: #a53a49; --t5: #ef5b6e;
    --ok-bg: #143323; --ok: #8fd8ae; --jaune-bg: #3a2c10; --jaune: #f0c96a; --rouge-bg: #44201f; --rouge: #f4a3a3;
    --test-bg: #f0c96a; --test-ink: #1d1600; --ombre: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-texte); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.demarrage { padding: 2rem; color: var(--muted); }
.bandeau-test { background: var(--test-bg); color: var(--test-ink); text-align: center; font-size: 12.5px; font-weight: 600; padding: 5px 16px; }

/* ---- Bandeau et filtres */
header.haut { background: linear-gradient(100deg, var(--marine) 0%, var(--marine-2) 100%); border-bottom: 4px solid var(--gb-rouge); color: var(--marine-ink); padding-block: 12px; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--gb-rouge); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none; }
.marque h1 { font-weight: 600; font-size: 19px; margin: 0; line-height: 1.15; }
.marque div > span { display: block; color: rgba(255, 255, 255, .75); font-size: 12px; }
.qui { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
header.haut .bouton.sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.frais { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, .14); color: #fff; }
.frais.vieux { background: #f2c94c; color: #3b2a00; }

.filtres { background: var(--bande); border-bottom: 1px solid var(--line); padding-block: 10px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filtre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filtre label, .filtre .lbl { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
select, input { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; color: var(--ink); min-width: 0; max-width: 100%; }
.filtres select { min-width: 150px; box-shadow: var(--ombre); }
.filtres .effacer { align-self: flex-end; }

/* ---- Coque : navigation latérale marine + zone de travail */
.coque { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - 140px); }
nav.cote { background: var(--marine); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
nav.cote a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 13.5px; }
nav.cote a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
nav.cote a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 500; box-shadow: inset 3px 0 0 var(--gb-rouge); }
nav.cote a[aria-current="page"] svg { color: var(--gb-rouge); }
nav.cote svg { width: 17px; height: 17px; flex: none; }
main#principal { min-width: 0; padding: 18px 22px 28px; max-width: 1500px; width: 100%; }

.ph { display: flex; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ph-texte { min-width: 0; flex: 1 1 420px; }
.ph h2 { font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0; color: var(--marine); }
@media (prefers-color-scheme: dark) { .ph h2 { color: var(--ink); } }
.ph p { margin: 3px 0 0; color: var(--muted); font-size: 13px; max-width: 90ch; }
.ph-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ctl-l { font-size: 12px; color: var(--muted); }
h3.soustitre { font-size: 17px; font-weight: 600; margin: 22px 0 10px; color: var(--marine); border-left: 4px solid var(--gb-rouge); padding-left: 8px; }
@media (prefers-color-scheme: dark) { h3.soustitre { color: var(--ink); } }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); box-shadow: var(--ombre); }
.seg button { border: 0; background: none; padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--gb-rouge); color: #fff; }

/* ---- Cartes KPI */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuiles.interne { padding: 4px 16px 0; margin-bottom: 4px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tuiles.interne .tuile { grid-template-columns: minmax(0, 1fr); }
.tuiles.interne .tuile .ic { display: none; }
.tuiles.interne .tuile .v { font-size: 20px; }
.tuile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; min-width: 0; box-shadow: var(--ombre); }
.tuile .ic { grid-row: 1 / span 4; width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: 9px; display: grid; place-items: center; color: var(--gb-rouge); align-self: start; }
@media (prefers-color-scheme: dark) { .tuile .ic { color: var(--accent); } }
.tuile .ic svg { width: 20px; height: 20px; }
.tuile .l { font-size: 12px; color: var(--muted); }
.tuile .v { font-weight: 600; font-size: 25px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tuile .d { font-size: 12px; color: var(--muted); }
.tuile .d.pos { color: var(--ok); } .tuile .d.neg { color: var(--rouge); }
.tuiles.interne .tuile { box-shadow: none; background: var(--surface-2); }

.carte { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; box-shadow: var(--ombre); margin-bottom: 16px; }
.carte > .hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 16px 8px; }
.carte > .hd h3 { margin: 0; font-size: 15px; font-weight: 600; }
.carte > .hd .n { color: var(--muted); font-size: 12px; font-style: italic; }
.carte > .hd .hd-actions { margin-left: auto; }
.carte .texte { padding: 0 16px 14px; margin: 0; color: var(--muted); }
.grille2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grille2.egal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grille2 > .carte { margin-bottom: 0; }
.grille2 + .carte, .grille2 + .grille2, .carte + .grille2 { margin-top: 16px; }
.defile { overflow-x: auto; }

/* ---- Tableaux : en-tête marine */
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
.t thead th { background: var(--marine); color: #fff; font-weight: 500; font-size: 12px; text-align: right; padding: 0; vertical-align: bottom; white-space: nowrap; }
.t thead th button.tri { all: unset; cursor: pointer; display: block; padding: 8px 10px; text-align: inherit; }
.t thead th button.tri:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.t thead th[aria-sort="ascending"], .t thead th[aria-sort="descending"] { background: var(--gb-rouge); }
.t thead .fl { color: #fff; }
.t th:first-child, .t td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; }
.t tbody th:first-child, .t tfoot th:first-child { background: var(--surface); }
.t tbody th, .t tfoot th { font-weight: 500; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
.t td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t tbody tr:nth-child(even) > * { background: var(--surface-2); }
.t tbody tr:hover > * { background: var(--accent-soft); }
.t tr.focus > * { background: var(--accent-soft); }
.t tfoot th, .t tfoot td { font-weight: 600; border-top: 2px solid var(--marine); border-bottom: 0; background: var(--surface); }
.t tr.rangee-detail > td { padding: 0; position: static; text-align: left; white-space: normal; background: var(--surface-2) !important; }
button.lien { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; color: var(--ink); font-weight: 500; }
button.lien:hover { color: var(--gb-rouge); text-decoration: underline; }
button.lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl { color: var(--accent); }
.neg { color: var(--rouge); } .pos { color: var(--ok); }
.tend { font-weight: 600; font-size: 15px; color: var(--muted); } .tend.pos { color: var(--ok); } .tend.neg { color: var(--rouge); }
.outils { display: flex; justify-content: flex-end; padding: 8px 14px 10px; }
.note { font-size: 12px; color: var(--muted); padding: 8px 16px 12px; margin: 0; }
.detail { padding: 12px 14px; }
.detail h4 { margin: 0 0 8px; font-size: 14px; }

/* ---- Graphiques */
.graphe { padding: 4px 12px 12px; }
.graphe svg { width: 100%; height: auto; display: block; }
.graphe .grille { stroke: var(--line); stroke-width: 1; }
.graphe .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.graphe .axe { fill: var(--muted); font-size: 11px; }
.serie polyline { fill: none; stroke: var(--s1); stroke-width: 2.4; stroke-linejoin: round; }
.serie circle { fill: var(--s1); }
.serie.s2 polyline { stroke: var(--s2); } .serie.s2 circle { fill: var(--s2); }
.serie.a1 polyline { stroke: var(--s3); stroke-dasharray: 5 4; stroke-width: 1.8; } .serie.a1 circle { fill: var(--s3); }
.legende { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); padding: 4px 4px 0; }
.legende i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.legende i.trait { width: 16px; height: 3px; border-radius: 2px; background: var(--s1); }
.legende i.trait.s2 { background: var(--s2); } .legende i.trait.a1 { background: var(--s3); }
.legende i.bloc { width: 11px; height: 11px; border-radius: 3px; }

.barres { padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 5px; }
.barre-l { display: grid; grid-template-columns: minmax(90px, 175px) minmax(0, 1fr) 82px; gap: 10px; align-items: center; font-size: 12.5px; }
.barre-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--ink); }
.barre-nom button.lien { color: var(--ink); }
.barre-piste { position: relative; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
.barre { position: absolute; top: 2px; bottom: 2px; background: var(--orange); border-radius: 2px; }
.barre.negatif { background: var(--s3); }
.barre.alerte { background: var(--gb-rouge-fonce); }
.barre-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.barre-v { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.barres .note { padding: 6px 0 0; }

.empile { padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 5px; }
.empile .legende { padding: 0 0 6px; }
.empile-piste { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.bloc.t1 { background: var(--t1); } .bloc.t2 { background: var(--t2); } .bloc.t3 { background: var(--t3); } .bloc.t4 { background: var(--t4); } .bloc.t5 { background: var(--t5); }
.bloc.s1 { background: var(--s1); } .bloc.s2 { background: var(--s2); } .bloc.s3 { background: var(--s3); } .bloc.s4 { background: var(--s4); } .bloc.s5 { background: var(--s5); } .bloc.s6 { background: var(--s6); }

.anneau { display: flex; align-items: center; gap: 16px; padding: 8px 16px 14px; flex-wrap: wrap; }
.anneau svg { width: 170px; height: 170px; flex: none; }
.anneau .centre-v { font-weight: 600; font-size: 16px; fill: var(--ink); }
.anneau .centre-l { font-size: 10px; fill: var(--muted); }
.anneau .pct { font-size: 9.5px; fill: #fff; font-weight: 600; }
.anneau ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.anneau li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.anneau li i { width: 11px; height: 11px; border-radius: 50%; }
.anneau li b { font-weight: 500; }
.anneau li span { color: var(--muted); white-space: nowrap; }

ol.podium { margin: 0; padding: 0 16px 4px 36px; display: flex; flex-direction: column; gap: 2px; }
ol.podium li { padding: 6px 0; border-bottom: 1px solid var(--line); }
ol.podium li > * { vertical-align: baseline; }
ol.podium li .ind { float: right; font-weight: 600; margin-left: 12px; }
ol.podium li span:last-child { float: right; font-size: 12px; min-width: 64px; text-align: right; }
ol.podium.haut li::marker { color: var(--ok); font-weight: 600; }
ol.podium.bas li::marker { color: var(--rouge); font-weight: 600; }

.puce { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.puce.ok { background: var(--ok-bg); color: var(--ok); }
.puce.jaune { background: var(--jaune-bg); color: var(--jaune); }
.puce.rouge { background: var(--rouge-bg); color: var(--rouge); }
ul.alertes { list-style: none; margin: 0; padding: 0 0 6px; }
ul.alertes li { border-top: 1px solid var(--line); }
ul.alertes button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; }
ul.alertes button:hover { background: var(--surface-2); }
ul.alertes button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
ul.alertes .sev { width: 4px; align-self: stretch; border-radius: 2px; background: var(--line); }
ul.alertes .sev.rouge { background: var(--rouge); } ul.alertes .sev.jaune { background: var(--orange); } ul.alertes .sev.ok { background: var(--ok); }
ul.alertes .tx { flex: 1; min-width: 0; font-size: 13px; }
ul.alertes .tx b { font-weight: 600; }
ul.alertes .sous-tx { display: block; color: var(--muted); font-size: 11.5px; }

.etat { padding: 22px 16px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etat.erreur { color: var(--rouge); }
.etat.erreur p { margin: 0; flex-basis: 100%; }
.roue { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tourne 0.8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation: none; } }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--gb-rouge); color: #fff; border: 1px solid var(--gb-rouge); border-radius: 8px; padding: 10px 16px; font-weight: 500; cursor: pointer; }
.bouton.sec { background: var(--surface); color: var(--ink); border-color: var(--line); }
.bouton.petit { padding: 4px 10px; font-size: 12.5px; font-weight: 400; }
.bouton[disabled] { opacity: .7; cursor: progress; }
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; background: linear-gradient(160deg, var(--marine) 0%, var(--marine-2) 54%, var(--gb-rouge) 54%, var(--gb-rouge) 56%, var(--bg) 56.2%); }
.connexion .boite { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.connexion h1 { font-weight: 600; font-size: 28px; margin: 0 0 4px; line-height: 1.1; color: var(--marine); border-left: 4px solid var(--gb-rouge); padding-left: 10px; }
@media (prefers-color-scheme: dark) { .connexion h1 { color: var(--ink); } }
.connexion p { margin: 0; color: var(--muted); }
.connexion label { font-size: 13px; font-weight: 500; margin-top: 6px; }
.connexion .bouton { margin-top: 10px; }
.erreur-form { color: var(--rouge) !important; font-size: 13px; }
.ms { width: 16px; height: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ms i { display: block; background: currentColor; }
footer { color: var(--muted); font-size: 12px; padding: 4px 22px 24px; }

@media (max-width: 900px) {
  .coque { grid-template-columns: minmax(0, 1fr); }
  nav.cote { flex-direction: row; overflow-x: auto; padding: 6px 10px; }
  nav.cote a { white-space: nowrap; padding: 7px 10px; }
  main#principal { padding: 14px 16px 24px; }
  .grille2, .grille2.egal { grid-template-columns: minmax(0, 1fr); }
  .marque div > span, .qui .nom { display: none; }
  .filtres select { min-width: 0; width: 100%; }
  .filtre { flex: 1 1 140px; }
  .barre-l { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 70px; }
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .tuile .v { font-size: 21px; }
}
@media print {
  nav.cote, .filtres button, .outils, .retour-portail { display: none !important; }
  .coque { grid-template-columns: minmax(0, 1fr); }
  body { background: #fff; }
}
.anneau .arc.s1 { stroke: var(--s1); } .anneau .arc.s2 { stroke: var(--s2); } .anneau .arc.s3 { stroke: var(--s3); }
.anneau .arc.s4 { stroke: var(--s4); } .anneau .arc.s5 { stroke: var(--s5); } .anneau .arc.s6 { stroke: var(--s6); }
.anneau .arc.t1 { stroke: var(--t1); } .anneau .arc.t2 { stroke: var(--t2); } .anneau .arc.t3 { stroke: var(--t3); }
.anneau .arc.t4 { stroke: var(--t4); } .anneau .arc.t5 { stroke: var(--t5); }