/* agences-ia.fr : banc d'essai. En-tête sombre (l'instrument), corps clair (la lecture), mode sombre complet. */
@import url("/fonts/polices.css");

:root {
  --papier: #f3f5f6; --carte: #ffffff; --encre: #111a22; --encre-2: #3a4652; --trait: #d5dce1; --trait-2: #e8ecef;
  --accent: #0c5a6a; --accent-fond: #e2f0f3; --ambre-texte: #8a5a00; --ambre-fond: #fbefd6;
  --ok: #1d7446; --ok-fond: #e3f2e9; --ko: #a82e27; --ko-fond: #f8e3e0; --nm: #56616c; --nm-fond: #eceff1;
  --tete: #0f1720; --tete-2: #16212c; --tete-encre: #e7eef3; --tete-doux: #a9bac6; --tete-trait: #273746; --vif: #43b8cb; --ambre: #f0a202;
  --f-chatbot: #3b5bdb; --f-vocal: #d9480f; --f-auto: #0c8a6b; --f-conseil: #b78300; --f-gen: #7c8791;
  --titre: "Archivo", "Arial Narrow", system-ui, sans-serif; --texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --chiffre: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --papier: #0f1419; --carte: #161d24; --encre: #e8eef2; --encre-2: #b6c2cc; --trait: #2a3540; --trait-2: #1e2730;
    --accent: #6cc4d4; --accent-fond: #13303a; --ambre-texte: #f2b84f; --ambre-fond: #2d2413; --ok: #6ed49c; --ok-fond: #14291d; --ko: #f28b82; --ko-fond: #2e1a18; --nm: #a3afb9; --nm-fond: #222b33; color-scheme: dark; }
}
:root[data-theme="dark"] { --papier: #0f1419; --carte: #161d24; --encre: #e8eef2; --encre-2: #b6c2cc; --trait: #2a3540; --trait-2: #1e2730;
  --accent: #6cc4d4; --accent-fond: #13303a; --ambre-texte: #f2b84f; --ambre-fond: #2d2413; --ok: #6ed49c; --ok-fond: #14291d; --ko: #f28b82; --ko-fond: #2e1a18; --nm: #a3afb9; --nm-fond: #222b33; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 16.5px/1.6 var(--texte); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enveloppe { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.doux { color: var(--encre-2); }
h1, h2, h3 { font-family: var(--titre); line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; font-stretch: 80%; text-transform: uppercase; margin: 48px 0 14px; letter-spacing: .005em; }
h3 { font-size: 19px; font-weight: 700; font-stretch: 92%; margin: 24px 0 8px; }
p { max-width: 72ch; }

/* ---------- en-tête du site (l'instrument) ---------- */
header.site { background: var(--tete); color: var(--tete-encre); border-bottom: 1px solid var(--tete-trait); }
header.site .enveloppe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 26px; padding-block: 14px; }
.marque { color: var(--tete-encre); text-decoration: none; font: 800 19px/1 var(--titre); font-stretch: 78%; text-transform: uppercase; letter-spacing: .02em; display: flex; gap: 10px; align-items: center; }
.marque img { width: 26px; height: 26px; }
.marque span { color: var(--ambre); }
nav.site { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
nav.site a { color: var(--tete-doux); text-decoration: none; padding-block: 4px; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--tete-encre); box-shadow: inset 0 -2px 0 var(--ambre); }
.bandeau { background: var(--tete-2); color: var(--tete-doux); font: 500 13px/1.4 var(--chiffre); padding-block: 8px; border-bottom: 1px solid var(--tete-trait); }
.bandeau b { color: var(--ambre); font-weight: 500; }

/* ---------- la une (pages principales) ---------- */
.une { background: var(--tete); color: var(--tete-encre); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px), radial-gradient(ellipse at 88% -30%, rgba(67,184,203,.16), transparent 60%); padding-block: 34px 30px; }
.une .enveloppe { display: grid; gap: 18px; }
.sur { font: 500 12px/1.3 var(--chiffre); letter-spacing: .14em; text-transform: uppercase; color: var(--tete-doux); }
.une h1 { margin: 0; font-size: clamp(34px, 5.4vw, 66px); font-weight: 800; font-stretch: 70%; line-height: .95; text-transform: uppercase; max-width: 19ch; }
.une h1 em { font-style: normal; color: var(--ambre); }
.une .chapeau { margin: 0; color: #cddbe4; font-size: 17.5px; max-width: 66ch; }
.jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.jauge-une { border: 1px solid var(--tete-trait); border-radius: 4px; padding: 11px 13px; display: grid; gap: 6px; }
.jauge-une span { font: 500 11px/1.3 var(--chiffre); letter-spacing: .1em; text-transform: uppercase; color: var(--tete-doux); }
.jauge-une b { font: 600 26px/1 var(--chiffre); font-variant-numeric: tabular-nums; }
.jauge-une i { display: block; height: 4px; background: rgba(255,255,255,.12); }
.jauge-une i s { display: block; height: 100%; background: var(--ambre); }
.constat { border-left: 3px solid var(--ambre); padding: 4px 0 4px 16px; display: grid; gap: 4px; max-width: 80ch; }
.constat b { font: 700 18px/1.3 var(--titre); font-stretch: 90%; }
.constat span { color: #cddbe4; font-size: 15px; }
.constat a { color: var(--vif); }

main { padding-block: 28px 80px; }
.fil { font-size: 14px; margin: 0 0 10px; }

/* ---------- boutons, pastilles, états ---------- */
.bouton { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px/1 var(--texte); padding: 11px 15px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; }
.bouton.secondaire, .bouton[aria-pressed="true"] { background: transparent; color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bouton { color: #0b1a1f; } :root:not([data-theme="light"]) .bouton.secondaire { color: var(--accent); } }
:root[data-theme="dark"] .bouton { color: #0b1a1f; } :root[data-theme="dark"] .bouton.secondaire { color: var(--accent); }
.lien { background: none; border: 0; padding: 0; color: var(--accent); font: 500 13.5px var(--texte); text-decoration: underline; cursor: pointer; justify-self: start; }
.etat { display: inline-block; font: 600 12.5px/1.3 var(--texte); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.e-ok { background: var(--ok-fond); color: var(--ok); } .e-ko { background: var(--ko-fond); color: var(--ko); } .e-nm { background: var(--nm-fond); color: var(--nm); }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { font-size: 13.5px; padding: 3px 10px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre-2); }
.encadre { background: var(--accent-fond); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 0 8px 8px 0; display: grid; gap: 6px; }
.encadre p { margin: 0; }
.encadre.ambre { background: var(--ambre-fond); border-color: var(--ambre-texte); }
.selection { user-select: all; font-family: var(--chiffre); font-size: .95em; }

/* ---------- signature (part des critères remplis par famille) ---------- */
.signature { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; min-width: 150px; }
.signature i { height: 9px; background: var(--trait-2); position: relative; overflow: hidden; border-radius: 1px; }
.signature s { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.sig-leg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font: 500 9.5px/1.2 var(--chiffre); text-transform: uppercase; letter-spacing: .03em; color: var(--encre-2); }
.sig-leg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- liste filtrable ---------- */
.outil { display: grid; gap: 14px; }
.filtres-haut { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 16px; display: grid; gap: 14px; }
.recherche input { width: 100%; font: 16px var(--texte); padding: 11px 13px; border: 1px solid var(--trait); border-radius: 7px; background: var(--papier); color: var(--encre); }
.filtres-vus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px 22px; }
.ctrl { display: grid; gap: 6px; align-content: start; }
.ctrl-lib { font: 600 11.5px/1.2 var(--chiffre); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.opts { display: flex; flex-wrap: wrap; gap: 5px; }
.opt { font: 500 13.5px/1 var(--texte); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--trait); background: var(--carte); color: var(--encre); cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.opt i { font: 500 11.5px var(--chiffre); font-style: normal; color: var(--encre-2); }
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt[aria-pressed="true"] i { color: inherit; opacity: .85; }
.opt:disabled { opacity: .45; cursor: default; }
.opt.bientot { border-style: dashed; color: var(--encre-2); cursor: default; font-size: 12.5px; }
.ctrl select, .filtres-chiffres select, .tri select, .choix-cmp select, .choix-agence select, .axes select { font: 14.5px var(--texte); padding: 8px 10px; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); color: var(--encre); max-width: 100%; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--encre-2); }
.raccourcis button { font: 500 13.5px var(--texte); padding: 7px 11px; border-radius: 999px; border: 1px dashed var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.plus { justify-self: start; font: 600 14px var(--texte); background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 0; }
.plus::before { content: "+ "; } .plus[aria-expanded="true"]::before { content: "− "; }
.filtres-plus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; border-top: 1px solid var(--trait); padding-top: 14px; }
.filtres-plus fieldset { border: 1px solid var(--trait-2); border-radius: 8px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; align-content: start; }
.filtres-plus legend { font: 700 13px var(--titre); text-transform: uppercase; letter-spacing: .06em; padding: 0 4px; }
.resultat { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.compteur { margin: 0; font-size: 15px; color: var(--encre-2); }
.compteur b { font: 600 30px/1 var(--chiffre); color: var(--encre); margin-right: 4px; }
.actifs { display: flex; flex-wrap: wrap; gap: 6px; }
.actifs:empty { display: none; }
.actifs button { font: 500 13px var(--texte); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-fond); cursor: pointer; }
.actifs .tout { border-color: transparent; background: none; text-decoration: underline; color: var(--encre-2); }
.vide { background: var(--carte); border: 1px dashed var(--trait); border-radius: 10px; padding: 18px; display: grid; gap: 8px; justify-items: start; }
.vide p { margin: 0; }
.entete-lignes, .ligne-tete { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, 190px) 74px 64px 64px 20px; gap: 14px; align-items: center; }
.entete-lignes { padding: 0 16px; font: 500 10.5px/1.2 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.entete-lignes > span:first-child { grid-column: 1; }
.lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ligne { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; }
.ligne-tete { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; padding: 12px 16px; cursor: pointer; border-radius: 8px; }
.ligne-tete:hover { background: var(--accent-fond); }
.nom { display: grid; gap: 2px; min-width: 0; }
.nom b { font: 700 17px/1.15 var(--titre); font-stretch: 88%; }
.nom small { color: var(--encre-2); font-size: 13.5px; }
.lu { display: grid; gap: 3px; }
@media (min-width: 861px) { .ligne-tete .lu small { display: none; } }
.lu small { font: 500 10px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.lu b { font: 600 17px/1 var(--chiffre); font-variant-numeric: tabular-nums; }
.fleche { color: var(--encre-2); transition: transform .2s; font-size: 20px; }
.ligne[data-ouvert] .fleche { transform: rotate(90deg); }
.panneau { border-top: 1px solid var(--trait-2); padding: 14px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 24px; }
.panneau h3 { margin: 0 0 6px; font: 600 11.5px/1 var(--chiffre); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.panneau dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 14px; }
.panneau dt { color: var(--encre-2); } .panneau dd { margin: 0; text-align: right; }
.panneau-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; grid-column: 1 / -1; }
@media (max-width: 860px) {
  .entete-lignes { display: none; }
  .ligne-tete { grid-template-columns: 1fr 1fr 1fr 20px; }
  .ligne-tete .nom, .ligne-tete .signature { grid-column: 1 / -1; }
}

/* ---------- plateau de comparaison ---------- */
.plateau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--tete); color: var(--tete-encre); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; font-size: 14.5px; box-shadow: 0 -8px 24px rgba(0,0,0,.18); }
.plateau b { color: var(--ambre); font-family: var(--chiffre); }
.plateau-actions { display: flex; gap: 10px; align-items: center; }
.plateau button { background: none; border: 0; color: var(--tete-doux); text-decoration: underline; cursor: pointer; font: inherit; }
.plateau .bouton { background: var(--ambre); border-color: var(--ambre); color: #14110a; }

/* ---------- encart de classement (L111-7) ---------- */
.classement-info { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 14px 18px; font-size: 14.5px; display: grid; gap: 8px; }
.classement-info summary { cursor: pointer; font-weight: 600; }
.classement-info ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- fiche agence : procès-verbal d'essai ---------- */
.pv-tete { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; position: relative; overflow: hidden; }
.pv-tete::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 19px); }
.pv-tete h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); font-weight: 800; font-stretch: 75%; text-transform: uppercase; line-height: .98; }
.pv-tete .site-agence { font-size: 15px; }
.pv-ref { font: 500 12px/1.5 var(--chiffre); color: var(--encre-2); text-align: right; }
.pv-ref b { display: block; font: 600 34px/1 var(--chiffre); color: var(--encre); margin-top: 6px; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.pv-grille { display: grid; gap: 7px; grid-column: 1 / -1; max-width: 560px; }
.pv-grille > div { display: grid; grid-template-columns: 110px max-content 52px; justify-content: start; gap: 10px; align-items: center; font-size: 13px; }
.pv-grille > div > span:first-child { font: 600 11px var(--chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.cases { display: flex; flex-wrap: wrap; gap: 4px; }
.cases i { width: 16px; height: 16px; border: 1.5px solid var(--encre); }
.cases i.ok { background: var(--encre); } .cases i.nm { border-style: dotted; opacity: .5; }
.pv-bloc { margin-top: 26px; }
.pv-bloc > h2 { margin: 0 0 10px; font-size: 22px; display: flex; gap: 12px; align-items: baseline; }
.pv-bloc > h2 small { font: 500 12px var(--chiffre); color: var(--encre-2); text-transform: none; letter-spacing: 0; }
.mesures { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; }
.mesure { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) auto; gap: 4px 18px; padding: 12px 16px; border-bottom: 1px solid var(--trait-2); align-items: start; }
.mesure:last-child { border-bottom: 0; }
.mesure .libelle { font-weight: 600; }
.mesure .detail { font-size: 14px; color: var(--encre-2); }
.mesure .provenance { font: 500 11.5px/1.4 var(--chiffre); color: var(--encre-2); text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .mesure { grid-template-columns: 1fr; } .mesure .provenance { text-align: left; } .pv-tete { grid-template-columns: 1fr; } .pv-ref { text-align: left; } }

/* ---------- comparateur ---------- */
.choix-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.bascule { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; cursor: pointer; }
.note-cmp { font-size: 14px; color: var(--encre-2); margin: 0; }
.defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); max-height: 78vh; }
table.comparaison { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; font-size: 14.5px; }
.comparaison th, .comparaison td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait-2); }
.comparaison thead th { position: sticky; top: 0; z-index: 2; background: var(--carte); font: 700 17px/1.15 var(--titre); font-stretch: 88%; border-bottom: 2px solid var(--encre); }
.comparaison thead th small { display: block; font: 500 11.5px var(--chiffre); color: var(--encre-2); margin-top: 3px; }
.comparaison tbody th { font-weight: 500; color: var(--encre-2); }
.comparaison tbody tr:nth-child(odd) td, .comparaison tbody tr:nth-child(odd) th[scope="row"] { background: color-mix(in srgb, var(--trait-2) 45%, var(--carte)); }
.comparaison tr.fam th { font: 600 11.5px var(--chiffre); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--carte) !important; padding-top: 16px; }
.comparaison td.meilleur { box-shadow: inset 3px 0 0 var(--ambre); font-weight: 600; }

/* ---------- chiffres ---------- */
.filtres-chiffres { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; }
.filtres-chiffres .compteur { margin-left: auto; }
.filtres-chiffres .compteur b { font-size: 22px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.kpi { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 16px; display: grid; gap: 8px; align-content: space-between; }
.kpi b { font: 600 34px/1 var(--chiffre); font-variant-numeric: tabular-nums; color: var(--accent); }
.kpi p { margin: 0; font-size: 15px; }
.graphes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.graphe { margin: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 16px; display: grid; gap: 12px; }
.graphe figcaption { display: grid; gap: 4px; }
.graphe figcaption b { font: 700 17px/1.25 var(--titre); font-stretch: 92%; }
.graphe figcaption span { font-size: 14px; color: var(--encre-2); }
.graphe svg { width: 100%; height: auto; display: block; }
.graphe svg text { fill: var(--encre-2); font: 11px var(--chiffre); }
.graphe svg .val { fill: var(--encre); font-weight: 600; }
.graphe svg .titre-axe { fill: var(--encre); font-weight: 600; }
.graphe svg .axe { stroke: var(--trait); } .graphe svg .grille { stroke: var(--trait-2); } .graphe svg .mediane { stroke: var(--accent); stroke-dasharray: 4 4; }
.graphe svg .barre { fill: var(--accent); } .graphe svg .barre-2 { fill: var(--ambre); }
.pt { stroke: var(--carte); stroke-width: 1.5; transition: opacity .3s; } .pt.hors { opacity: .12; }
.f-chatbot { fill: var(--f-chatbot); background: var(--f-chatbot); } .f-vocal { fill: var(--f-vocal); background: var(--f-vocal); } .f-auto { fill: var(--f-auto); background: var(--f-auto); }
.f-conseil { fill: var(--f-conseil); background: var(--f-conseil); } .f-gen { fill: var(--f-gen); background: var(--f-gen); }
.axes { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.axes label { display: flex; gap: 8px; align-items: center; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--encre-2); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }

/* ---------- mon agence ---------- */
.choix-agence { display: grid; gap: 6px; font-weight: 600; max-width: 420px; }
.moi-bilan { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: end; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 18px; margin-top: 16px; }
.moi-bilan .grand { display: block; font: 600 44px/1 var(--chiffre); }
.moi-bilan small { color: var(--encre-2); }
.moi-sig { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.moi-liens { display: grid; gap: 4px; font-size: 14.5px; }
.moi-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.positions h3 { font: 600 12px/1 var(--chiffre); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 22px 0 4px; }
.pos { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(100px, .8fr) 1.8fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--trait-2); font-size: 14.5px; }
.pos .val { font-family: var(--chiffre); font-size: 13.5px; }
.pos small { display: block; color: var(--encre-2); font-size: 12.5px; margin-top: 3px; }
.jauge { display: block; position: relative; height: 10px; background: var(--trait-2); border-radius: 2px; }
.jauge s { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; }
.jauge.claire s { opacity: .35; }
.jauge u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--encre); }
.a-faire { display: grid; gap: 10px; position: sticky; top: 16px; }
.a-faire h3 { margin: 22px 0 2px; }
.fix { border-left: 3px solid var(--ko); background: var(--carte); padding: 10px 12px; display: grid; gap: 3px; font-size: 14.5px; border-radius: 0 6px 6px 0; }
.fix small { color: var(--encre-2); }
@media (max-width: 860px) { .moi-grille { grid-template-columns: 1fr; } .a-faire { position: static; } .pos { grid-template-columns: 1fr 1fr; } .pos > span:last-child { grid-column: 1 / -1; } }

/* ---------- prose (méthode, pages éditoriales) ---------- */
.prose { max-width: 780px; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 14px 0; font-size: 15px; background: var(--carte); }
.prose th, .prose td { border-bottom: 1px solid var(--trait); padding: 8px 10px; text-align: left; }
.prose code { background: var(--accent-fond); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.carte h3 { margin: 0; }
.carte p { margin: 0; font-size: 15px; }
.table-simple { width: 100%; border-collapse: collapse; background: var(--carte); font-size: 15px; }
.table-simple th, .table-simple td { padding: 9px 12px; border-bottom: 1px solid var(--trait-2); text-align: left; vertical-align: top; }

footer.site { background: var(--tete); color: var(--tete-doux); padding-block: 28px 44px; font-size: 14.5px; }
footer.site a { color: var(--tete-encre); }
footer.site p { margin: 6px 0; max-width: none; }
body:has(#plateau-cmp) footer.site { padding-bottom: 96px; }
.toast { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--tete); color: var(--tete-encre); padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 50; max-width: calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }