/* VIGIE — écran Posture (9.2). Direction visuelle actée : ardoise sombre, accent teal,
   Barlow Condensed (titres, le mot), IBM Plex Sans (texte), IBM Plex Mono (identifiants).
   Polices EMBARQUÉES (OFL, fichiers de licence dans polices/) : aucune ressource externe. */
@font-face{font-family:"Barlow Condensed";font-weight:500;src:url(polices/BarlowCondensed-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:600;src:url(polices/BarlowCondensed-SemiBold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(polices/BarlowCondensed-Bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url(polices/IBMPlexSans-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-weight:500;src:url(polices/IBMPlexSans-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";font-weight:600;src:url(polices/IBMPlexSans-SemiBold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(polices/IBMPlexMono-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url(polices/IBMPlexMono-Medium.woff2) format("woff2");font-display:swap}

:root{
  --bg:#0f141a;--surface:#161d26;--surface-2:#1d2631;--line:#2a3542;--text:#e6ebf0;--muted:#8b97a5;--accent:#5fd4c4;
  --crit:#e5534b;--att:#f0883e;--ok:#3fb950;--inconnu:#79b8ff;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:var(--muted)}
p{margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:13px}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--accent)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:2px;background:var(--accent);vertical-align:middle;margin-right:12px}

/* barre */
.barre{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.marque{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:10px}
.marque .point{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(95,212,196,.25)}
.droite{margin-left:auto;display:flex;gap:12px;align-items:center}
.lien{background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:13px;padding:4px 10px;border-radius:3px;cursor:pointer}
.lien:hover{color:var(--text);border-color:var(--muted)}

/* Bandeau PLATEFORME : un BLOC à part, au-dessus de tout, jamais mélangé au mot du locataire */
.bandeau{display:none;grid-template-columns:auto 1fr;gap:4px 18px;padding:14px 24px;border-bottom:2px solid var(--line)}
.bandeau[data-niveau="critique"]{display:grid;background:#3a1412;border-bottom-color:var(--crit)}
.bandeau[data-niveau="inconnu"]{display:grid;background:#14212e;border-bottom-color:var(--inconnu)}
.bandeau[data-niveau="ok"]{display:grid;background:#0f2a1f;border-bottom-color:var(--ok)}
.bandeau[data-niveau="neutre"]{display:grid;background:#1a2129;border-bottom-color:var(--muted)}
.bandeau .etiquette{grid-row:span 2;align-self:center;font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:20px;padding:6px 12px;border:2px solid currentColor;color:var(--muted)}
.bandeau[data-niveau="critique"] .etiquette{color:var(--crit)}
.bandeau[data-niveau="inconnu"] .etiquette{color:var(--inconnu)}
.bandeau[data-niveau="ok"] .etiquette{color:var(--ok)}
.bandeau[data-niveau="neutre"] .etiquette{color:var(--muted)}
.bandeau .texte{font-weight:600}
.bandeau .detail{color:var(--muted);font-size:14px}

/* page */
.page{max-width:var(--maxw);margin:0 auto;padding:28px 24px 60px;display:grid;gap:24px}

/* Votre périmètre : le mot, en très grand */
.perimetre{border:1px solid var(--line);background:var(--surface);padding:24px 28px;display:grid;gap:8px}
.perimetre .mot{font-family:var(--display);font-weight:700;font-size:clamp(56px,9vw,120px);line-height:1;letter-spacing:.02em}
.perimetre[data-niveau="ok"] .mot{color:var(--ok)}
.perimetre[data-niveau="attention"] .mot{color:var(--att)}
.perimetre[data-niveau="critique"] .mot{color:var(--crit)}
.perimetre .causes{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:17px;max-width:80ch}
.perimetre .causes li{padding-left:18px;position:relative}
.perimetre .causes li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--accent)}
.non-mesures{font-family:var(--mono);font-size:13px;color:var(--muted)}   /* toujours rendu : le champ est obligatoire */

/* Jauges ; le trait vertical est le seuil de 60 ; non mesuré = vide et HACHURÉ, jamais 0 ni 100 */
.axes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.axes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jauge{display:grid;gap:6px;border:1px solid var(--line);background:var(--surface);padding:12px 14px}
.jauge .lab{font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline}
.jauge .lab b{font-family:var(--mono);font-size:18px;font-weight:500}
.jauge .g{height:12px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2);position:relative;overflow:hidden}
.jauge .g::after{content:"";position:absolute;left:60%;top:-2px;bottom:-2px;width:1px;background:var(--muted)}
.jauge .g i{display:block;height:100%;background:var(--ok)}
.jauge[data-classe="attention"] .g i{background:var(--att)}
.jauge[data-classe="critique"] .g i{background:var(--crit)}
.jauge[data-classe="non-mesure"] .g{background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,var(--line) 6px 12px)}
.jauge[data-classe="non-mesure"] .score,.jauge[data-classe="non-mesure"] .nom{color:var(--muted)}
.jauge .why{font-family:var(--mono);font-size:11px;color:var(--muted)}

.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.deux{grid-template-columns:1fr}}
.deux ul{margin:0;padding-left:18px;line-height:1.7}
.pied{font-family:var(--mono);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;line-height:1.7}
.pied details{margin-top:6px}
.pied details p{font-family:var(--sans);font-size:13px;color:var(--text);max-width:90ch}

/* Écrans étroits (< 520 px) — mesuré le 14-09-2026 à 390 px : barre sur quatre lignes, bandeau tassé,
   libellés de jauges mal coupés. Trois corrections, rien d'autre : aucune police réduite, aucune
   information masquée, aucune variante de contenu. */
@media (max-width:520px){
  .barre{flex-wrap:wrap;gap:8px 16px}
  .barre>.muted{order:3;flex-basis:100%}                       /* le sous-titre sur sa propre ligne, sous la marque */
  .droite{margin-left:auto}
  .bandeau{grid-template-columns:1fr;gap:8px}                  /* le BLOC reste un bloc : étiquette au-dessus, texte pleine largeur */
  .bandeau .etiquette{grid-row:auto;justify-self:start}
  .jauge .nom,.jauge .why{overflow-wrap:anywhere}              /* coupure propre du libellé, grille inchangée */
}

/* connexion */
body.connexion{display:grid;place-items:center;min-height:100vh}
.carte{border:1px solid var(--line);background:var(--surface);padding:32px;width:min(420px,92vw);display:grid;gap:14px}
.carte h1{margin:0}
.carte form{display:grid;gap:12px}
.carte label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.carte input{font:inherit;padding:8px 10px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:3px}
.carte button{font:inherit;font-weight:600;padding:10px;background:var(--accent);color:#0f141a;border:0;border-radius:3px;cursor:pointer}
.erreur{color:var(--crit);font-size:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Navigation entre écrans (9.3b) */
.nav{display:flex;gap:4px}
.nav a{color:var(--muted);text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;padding:4px 10px;border-radius:3px}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.nav a:hover{color:var(--text)}

/* Tendances (9.3b) : SVG = lignes seulement (traits non redimensionnés) ; tout ce qui se lit ou se clique est en HTML,
   positionné en pourcentages calculés en Python. Trois classes : graphe / non-mesure (hachuré) / vide (dit). */
.periode{display:grid;gap:8px}
.periode .choix{display:flex;flex-wrap:wrap;gap:8px}
.lien[aria-pressed="true"]{color:var(--text);border-color:var(--accent)}
.graphes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.graphes{grid-template-columns:1fr}}
.graphe{margin:0;border:1px solid var(--line);background:var(--surface);padding:12px 14px;display:grid;gap:8px}
.graphe figcaption{font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline}
.graphe figcaption b{font-family:var(--mono);font-size:18px;font-weight:500}
.graphe .zone{position:relative;height:220px;border:1px solid var(--line);background:var(--surface-2)}
.graphe svg{position:absolute;inset:0;width:100%;height:100%;display:none}
.graphe[data-classe="graphe"] svg{display:block}
.graphe .overlay{position:absolute;inset:0;pointer-events:none}
.graphe .overlay>*{pointer-events:auto}
.graphe .message{position:absolute;inset:0;margin:0;display:none;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--muted)}
.graphe[data-classe="non-mesure"] .zone{background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,var(--line) 6px 12px)}
.graphe[data-classe="non-mesure"] .message,.graphe[data-classe="vide"] .message{display:flex}
.graphe .message span{background:var(--surface);padding:6px 10px}
.graphe[data-classe="non-mesure"] figcaption,.graphe[data-classe="vide"] figcaption{color:var(--muted)}
svg .seuil{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;fill:none;vector-effect:non-scaling-stroke}
svg .repere-trait{stroke:var(--muted);stroke-width:1;opacity:.3;stroke-dasharray:2 4;fill:none;vector-effect:non-scaling-stroke}   /* contexte : sous la mesure */
svg .score{stroke:var(--accent);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
svg .mediane{stroke:var(--text);stroke-width:1.5;stroke-dasharray:6 4;fill:none;vector-effect:non-scaling-stroke}
svg .recalcul{stroke:var(--att);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.grad-y{position:absolute;left:4px;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--muted)}
.grad-x{position:absolute;bottom:2px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.grad-x[data-ancre="milieu"]{transform:translateX(-50%)}
.grad-x[data-ancre="fin"]{transform:translateX(-100%)}
.bande{position:relative}                                    /* hauteur posée par Python : 0 sans repère, 2 + 20 × rangs sinon */
.repere-trait-html{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--muted);opacity:.6;transform:translateX(-50%)}   /* cadres hachurés : .6 (le SVG reste à .3 sur fond uni), mesuré au zoom */
.badge{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:11px;background:var(--accent);color:#0f141a;border-radius:9px;min-width:18px;text-align:center;line-height:18px}   /* top : escalier posé par Python */
/* .point-graphe, pas .point : .marque .point est la pastille du logo depuis 9.2 (collision vue à la mesure) */
.point-graphe{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--accent);background:var(--accent);padding:0;cursor:pointer}
.point-graphe[data-plein="false"]{background:var(--surface-2)}
.frise{display:grid;gap:6px}
.frise-ligne{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:12px}
.frise-lab{font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.piste{position:relative;height:18px;border-bottom:1px solid var(--line)}
.pastille{position:absolute;top:2px;width:12px;height:12px;transform:translateX(-50%);border-radius:50%;background:var(--muted)}
.pastille[data-niveau="ok"]{background:var(--ok)}
.pastille[data-niveau="attention"]{background:var(--att)}
.pastille[data-niveau="critique"]{background:var(--crit)}
.pastille[data-niveau="inconnu"]{background:var(--inconnu)}
.frise h3{font-family:var(--display);font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 0;color:var(--muted)}
#frise-liste{margin:0;padding-left:18px;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7}
#reperes{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
#reperes .num{display:inline-block;min-width:18px;text-align:center;font-family:var(--mono);font-size:11px;background:var(--accent);color:#0f141a;border-radius:9px;line-height:18px;margin-right:8px}
#reperes ul{margin:4px 0 0 26px;padding:0;list-style:none;line-height:1.6}
.panneau{border:1px solid var(--accent);background:var(--surface);padding:16px 20px;display:grid;gap:10px}
.panneau[hidden]{display:none}                               /* display:grid écraserait l'attribut hidden (vu à la mesure) */
.panneau-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.panneau-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}       /* 9.3b-c : précédent / suivant */
.lien:disabled,.lien:disabled:hover{opacity:.55;cursor:not-allowed;color:var(--muted);border-color:var(--line)}
.panneau h3{font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 2px;color:var(--muted)}
.panneau ul{margin:0;padding-left:18px;line-height:1.6}
.mot-detail{font-family:var(--display);font-weight:700;font-size:28px}
.mot-detail[data-niveau="ok"]{color:var(--ok)}
.mot-detail[data-niveau="attention"]{color:var(--att)}
.mot-detail[data-niveau="critique"]{color:var(--crit)}

/* Décisions (9.3b) : lecture seule, quatre blocs toujours rendus */
.avis{font-weight:600;border-left:3px solid var(--accent);padding-left:12px}
.blocs{display:grid;gap:20px}
.bloc{border:1px solid var(--line);background:var(--surface);padding:16px 20px;display:grid;gap:8px}
.bloc[data-classe="a_trancher"]{border-color:var(--crit)}
.bloc ul{margin:0;padding-left:18px;line-height:1.7}

/* Barre à trois liens (9.3b) : mesurée à 768 px, « Se déconnecter » et le libellé de session se coupaient ;
   sous 900 px la navigation prend sa propre ligne, la zone de session ne se coupe jamais. */
.droite{white-space:nowrap}
@media (max-width:900px){
  .barre{flex-wrap:wrap;gap:8px 16px}
  .nav{order:3;flex-basis:100%}
}
@media (max-width:520px){
  .nav{order:2}                                              /* sous le sous-titre (order 3), chacun sur sa ligne */
  .frise-ligne{grid-template-columns:1fr;gap:4px}
}