@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400.woff2) format("woff2");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:"Atkinson Hyperlegible Next";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/atkinson-600.woff2) format("woff2");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:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700.woff2) format("woff2");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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-var.woff2) format("woff2");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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.woff2) format("woff2");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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2");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}

/* Couleur = thème, jamais candidat. Les dix thèmes ont chacun une teinte et une icône ; tous les candidats partagent le même traitement neutre (portrait en initiales). */
:root{
  --paper:#F7F5F0; --surface:#FFFFFF; --ink:#1B2230; --ink-2:#4A5363; --ink-3:#636A77;
  --rule:#E4E0D7; --hi:#EFECE5; --mark:#1E2A44; --on-mark:#FFFFFF; --focus:#2F5FD0;
  --c-economie:#985B09; --b-economie:#FCF0DC;
  --c-fiscalite:#616F0B; --b-fiscalite:#F1F5D9;
  --c-social:#B7412C; --b-social:#FCE6E0;
  --c-sante:#BE2F62; --b-sante:#FBE4EC;
  --c-education:#1E6EA9; --b-education:#E1EFFA;
  --c-securite:#3F4FB0; --b-securite:#E7E9FA;
  --c-immigration:#0B7671; --b-immigration:#DCF3F1;
  --c-ecologie:#2C7835; --b-ecologie:#E2F2E1;
  --c-europe:#7A45B8; --b-europe:#EFE7FA;
  --c-institutions:#52627A; --b-institutions:#E8ECF2;
  --f-display:"Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;
  --t-xs:.78rem; --t-sm:.9rem; --t-md:1rem; --t-lg:1.25rem; --t-xl:1.7rem; --t-2xl:clamp(1.9rem,4.5vw,2.9rem);
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(27,34,48,.06), 0 4px 14px rgba(27,34,48,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#12151B; --surface:#1A1E26; --ink:#E8EAEE; --ink-2:#AEB5C0; --ink-3:#8A919D;
  --rule:#2C323D; --hi:#232833; --mark:#DCE3F0; --on-mark:#12151B; --focus:#8DB3F0;
  --c-economie:#F0B45A; --b-economie:#2E2414; --c-fiscalite:#C5D354; --b-fiscalite:#262A12;
  --c-social:#F2907D; --b-social:#33201C; --c-sante:#F08AB0; --b-sante:#331C26;
  --c-education:#79B8EC; --b-education:#16263A; --c-securite:#9AA6F2; --b-securite:#1C2140;
  --c-immigration:#5ED3CB; --b-immigration:#12302E; --c-ecologie:#82D08A; --b-ecologie:#172C19;
  --c-europe:#C3A1F0; --b-europe:#261C38; --c-institutions:#A9B7CC; --b-institutions:#202733;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#12151B; --surface:#1A1E26; --ink:#E8EAEE; --ink-2:#AEB5C0; --ink-3:#8A919D;
  --rule:#2C323D; --hi:#232833; --mark:#DCE3F0; --on-mark:#12151B; --focus:#8DB3F0;
  --c-economie:#F0B45A; --b-economie:#2E2414; --c-fiscalite:#C5D354; --b-fiscalite:#262A12;
  --c-social:#F2907D; --b-social:#33201C; --c-sante:#F08AB0; --b-sante:#331C26;
  --c-education:#79B8EC; --b-education:#16263A; --c-securite:#9AA6F2; --b-securite:#1C2140;
  --c-immigration:#5ED3CB; --b-immigration:#12302E; --c-ecologie:#82D08A; --b-ecologie:#172C19;
  --c-europe:#C3A1F0; --b-europe:#261C38; --c-institutions:#A9B7CC; --b-institutions:#202733;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark }

[data-th="economie"]{--c:var(--c-economie);--b:var(--b-economie)}
[data-th="fiscalite"]{--c:var(--c-fiscalite);--b:var(--b-fiscalite)}
[data-th="social"]{--c:var(--c-social);--b:var(--b-social)}
[data-th="sante"]{--c:var(--c-sante);--b:var(--b-sante)}
[data-th="education"]{--c:var(--c-education);--b:var(--b-education)}
[data-th="securite"]{--c:var(--c-securite);--b:var(--b-securite)}
[data-th="immigration"]{--c:var(--c-immigration);--b:var(--b-immigration)}
[data-th="ecologie"]{--c:var(--c-ecologie);--b:var(--b-ecologie)}
[data-th="europe"]{--c:var(--c-europe);--b:var(--b-europe)}
[data-th="institutions"]{--c:var(--c-institutions);--b:var(--b-institutions)}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--t-md); line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:0 var(--s7)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--surface)}
a{color:inherit; text-decoration-color:var(--ink-3); text-underline-offset:2px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
button{font:inherit; color:inherit}
.wrap{max-width:74rem; margin-inline:auto}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-.01em}
h1{font-size:var(--t-2xl); font-weight:800} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg)}
p{margin:0}
.lede{color:var(--ink-2); max-width:62ch; font-size:1.05rem}
.eyebrow{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700}
.mono{font-family:var(--f-mono); font-size:var(--t-xs); font-variant-numeric:tabular-nums}
.skip{position:absolute; left:var(--s3); top:-4rem; z-index:100; background:var(--mark); color:var(--on-mark); padding:var(--s2) var(--s4); border-radius:var(--r-sm); font-weight:700; text-decoration:none}
.skip:focus{top:var(--s3)}
#app:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.ic{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* En-tête : ruban des dix couleurs de thème */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--surface); border-bottom:1px solid var(--rule); margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px))); padding-inline:max(16px, env(safe-area-inset-left,0px))}
.ribbon{display:flex; height:4px; margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px)))}
.ribbon i{flex:1; background:var(--c)}
.top-in{max-width:74rem; margin-inline:auto; display:flex; align-items:center; gap:var(--s2) var(--s5); padding-block:var(--s3); flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:var(--s2); text-decoration:none}
.brand .logo{display:grid; grid-template-columns:repeat(5,6px); gap:2px}
.brand .logo i{width:6px; height:6px; border-radius:2px; background:var(--c)}
.brand b{font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-.01em}
.brand .mono{color:var(--ink-3); background:var(--hi); border-radius:99px; padding:.05rem .5rem}
nav.main{display:flex; gap:var(--s1); margin-left:auto; overflow-x:auto; scrollbar-width:none; max-width:100%}
nav.main::-webkit-scrollbar{display:none}
nav.main a{text-decoration:none; font-size:var(--t-sm); padding:.45rem .75rem; border-radius:99px; color:var(--ink-2); white-space:nowrap; font-weight:600}
nav.main a[aria-current="page"]{background:var(--mark); color:var(--on-mark)}
nav.main a:hover:not([aria-current]){background:var(--hi); color:var(--ink)}
@media (max-width:640px){ nav.main{margin-left:0; width:100%} }
#theme-toggle{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--rule); background:var(--surface); border-radius:99px; padding:.35rem .7rem; cursor:pointer; font-size:var(--t-sm); color:var(--ink-2); font-weight:600; font-family:var(--f-body); min-height:2.3rem}
#theme-toggle:hover{background:var(--hi); color:var(--ink)}
#theme-toggle svg{width:1.05rem; height:1.05rem}

main{padding-top:var(--s6); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s7)}
section{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); min-width:0}
@media (max-width:600px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .tile{min-height:6.4rem; padding:var(--s3)} .tile b{font-size:.98rem} .hero::after{width:9rem;height:9rem} }
.sec-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s2) var(--s4)}
.back{font-size:var(--t-sm); color:var(--ink-2); font-weight:600; text-decoration:none}
.back:hover{color:var(--ink)}

/* Statut du programme : la forme encode l'état */
.st{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-sm); color:var(--ink-2); white-space:nowrap}
.st i{width:.75rem; height:.75rem; border-radius:50%; border:1.5px solid var(--ink-2); display:inline-block; flex:none}
.st[data-s="complet"] i{background:var(--ink-2)}
.st[data-s="partiel"] i{background:linear-gradient(90deg,var(--ink-2) 50%,transparent 50%)}

/* Portrait neutre, identique pour tous */
.av{--sz:2.6rem; width:var(--sz); height:var(--sz); border-radius:50%; flex:none; display:grid; place-items:center; background:var(--hi); color:var(--ink); border:1.5px solid var(--rule); font-family:var(--f-display); font-weight:700; font-size:calc(var(--sz) * .36); letter-spacing:.02em}
.av.lg{--sz:4.5rem}
.av.sm{--sz:1.9rem}

/* Ruban de couverture : un segment par thème */
.cov{display:flex; gap:3px}
.cov b{flex:1; min-width:.55rem; height:.5rem; border-radius:99px; background:var(--c)}
.cov b.off{background:none; border:1px dashed var(--ink-3)}

/* Accueil */
.hero{display:grid; gap:var(--s5); background:var(--surface); border:1px solid var(--rule); border-radius:calc(var(--r) * 1.6); padding:clamp(1.25rem,4vw,2.75rem); box-shadow:var(--shadow); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-3rem; top:-3rem; width:14rem; height:14rem; border-radius:50%; background:conic-gradient(var(--c-economie) 0 36deg,var(--c-fiscalite) 0 72deg,var(--c-social) 0 108deg,var(--c-sante) 0 144deg,var(--c-education) 0 180deg,var(--c-securite) 0 216deg,var(--c-immigration) 0 252deg,var(--c-ecologie) 0 288deg,var(--c-europe) 0 324deg,var(--c-institutions) 0 360deg); opacity:.14; pointer-events:none}
/* Le disque décoratif passe sous le texte : dans le héros, le gris tertiaire est remplacé par le secondaire pour garder 4,5:1 quelle que soit la teinte en dessous. */
.hero{--ink-3:var(--ink-2)}
.hero > *{position:relative; z-index:1}
.hero .eyebrow{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3)}
.stats{display:flex; flex-wrap:wrap; gap:var(--s3)}
.stat{display:grid; background:var(--hi); border-radius:var(--r-sm); padding:var(--s2) var(--s4); min-width:7.5rem}
.stat b{font-family:var(--f-display); font-size:1.5rem; font-weight:800; line-height:1.1}
.stat span{font-size:var(--t-xs); color:var(--ink-2)}
.qbox{display:flex; gap:var(--s2); background:var(--paper); border:1.5px solid var(--rule); border-radius:99px; padding:.35rem .35rem .35rem 1.1rem; align-items:center; max-width:44rem}
.qbox:focus-within{border-color:var(--focus)}
.qbox input{flex:1; min-width:0; border:0; background:none; font:inherit; font-size:1.02rem; color:var(--ink); outline:none; padding-block:.4rem}
.qbox .btn{border-radius:99px}
.ex{display:flex; flex-wrap:wrap; gap:var(--s2)}
.ex button{font-size:var(--t-sm); border:1px solid var(--rule); background:var(--surface); border-radius:99px; padding:.3rem .8rem; cursor:pointer; color:var(--ink-2)}
.ex button:hover{border-color:var(--ink-3); color:var(--ink)}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr)); gap:var(--s3)}
.tile{display:grid; gap:var(--s2); align-content:space-between; min-height:7.4rem; text-decoration:none; background:var(--b); color:var(--ink); border-radius:var(--r); padding:var(--s4); border:1px solid transparent; transition:transform .12s ease, border-color .12s}
.tile:hover{border-color:var(--c); transform:translateY(-2px)}
.tile .ib{width:2.4rem; height:2.4rem; border-radius:10px; background:var(--c); color:var(--surface); display:grid; place-items:center}
.tile .ib svg{width:1.35rem; height:1.35rem}
.tile b{font-family:var(--f-display); font-size:1.08rem; font-weight:700; line-height:1.2}
.tile span.mono{color:var(--ink-2)}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); gap:var(--s3)}
.card{display:grid; gap:var(--s3); align-content:start; text-decoration:none; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4); box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s}
.card:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.card .id{display:flex; gap:var(--s3); align-items:center; min-width:0}
.card .nm{font-family:var(--f-display); font-size:1.15rem; font-weight:700; line-height:1.2}
.card .pt{color:var(--ink-2); font-size:var(--t-sm)}
.card .row{display:flex; justify-content:space-between; gap:var(--s2); align-items:center; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-xs); color:var(--ink-2); background:var(--hi); border-radius:99px; padding:.15rem .6rem; font-weight:600}
.pill svg{width:.95rem; height:.95rem}

@media (prefers-reduced-motion:reduce){ .tile,.card{transition:none} .tile:hover,.card:hover{transform:none} }

/* Matrice de couverture */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface)}
table.matrix{border-collapse:collapse; width:100%; min-width:48rem; font-size:var(--t-sm)}
.matrix th,.matrix td{padding:.5rem .4rem; border-bottom:1px solid var(--rule); text-align:center}
.matrix thead th{font-weight:700; color:var(--ink-2); vertical-align:bottom; font-size:var(--t-xs); line-height:1.25}
.matrix thead th a{display:grid; justify-items:center; gap:.3rem; text-decoration:none; color:var(--c)}
.matrix thead th a span{color:var(--ink-2)}
.matrix th[scope="row"]{text-align:left; white-space:nowrap; font-weight:700}
.matrix th[scope="row"] a{text-decoration:none; display:flex; align-items:center; gap:var(--s2)}
.matrix tbody tr:last-child>*{border-bottom:0}
.matrix td a{display:inline-flex; width:2rem; height:2rem; align-items:center; justify-content:center; border-radius:8px; text-decoration:none; font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500}
.matrix td a.on{background:var(--b); color:var(--c); border:1.5px solid var(--c)}
.matrix td a.off{border:1px dashed var(--ink-3); color:var(--ink-3)}
.matrix td a:hover{outline:2px solid var(--c, var(--ink-3)); outline-offset:1px}
.matrix td.tot{font-family:var(--f-mono); color:var(--ink-2); white-space:nowrap}
.legend{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:var(--t-sm); color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:.4rem}
.sw{width:1rem; height:1rem; border-radius:4px; display:inline-block}
.sw.on{background:var(--b-education); border:1.5px solid var(--c-education)} .sw.off{border:1px dashed var(--ink-3)}

/* Fiche candidat */
.profile{display:grid; gap:var(--s4); background:var(--surface); border:1px solid var(--rule); border-radius:calc(var(--r) * 1.4); padding:clamp(1rem,3vw,2rem); box-shadow:var(--shadow)}
.who-big{display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:var(--s3); margin:0}
.facts>div{display:grid; gap:4px; align-content:start; min-width:0; background:var(--hi); border-radius:var(--r-sm); padding:var(--s3)}
.facts dt{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700}
.facts dd{margin:0; font-size:var(--t-sm)}
.note{font-size:var(--t-sm); color:var(--ink-2); max-width:72ch; border-left:3px solid var(--rule); padding-left:var(--s3)}
.toolbar{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center; justify-content:space-between}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:99px; overflow:hidden; background:var(--surface); padding:3px; gap:2px}
.seg button{border:0; background:none; padding:.4rem .95rem; cursor:pointer; font-size:var(--t-sm); color:var(--ink-2); border-radius:99px; font-weight:600}
.seg button[aria-pressed="true"]{background:var(--mark); color:var(--on-mark)}
.jump{display:flex; flex-wrap:wrap; gap:var(--s2)}
.jump a{display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-sm); text-decoration:none; background:var(--b); color:var(--c); border-radius:99px; padding:.3rem .7rem; font-weight:600; white-space:nowrap}
.jump a:hover{outline:1.5px solid var(--c)}
.jump a svg{width:1rem; height:1rem}
.cat{display:grid; gap:var(--s3); scroll-margin-top:7rem}
.cat-h{display:flex; align-items:center; gap:var(--s3); background:var(--b); border-radius:var(--r); padding:var(--s3) var(--s4)}
.cat-h .ib{width:2.2rem; height:2.2rem; border-radius:9px; background:var(--c); color:var(--surface); display:grid; place-items:center; flex:none}
.cat-h h2{font-size:var(--t-lg); color:var(--ink)}
.cat-h .n{margin-left:auto; color:var(--c); font-weight:500}
ul.ms{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
li.m{display:grid; gap:var(--s2); background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--c, var(--rule)); border-radius:var(--r-sm); padding:var(--s3) var(--s4); scroll-margin-top:7rem}
li.m .t{max-width:75ch}
.thtag{display:inline-flex; align-items:center; gap:.3rem; font-size:var(--t-xs); font-weight:700; color:var(--c); text-transform:uppercase; letter-spacing:.06em}
.thtag svg{width:.95rem; height:.95rem}
.meta{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center; font-size:var(--t-xs); color:var(--ink-3)}
.meta a{color:var(--ink-2)}
.tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; border:1px solid currentColor; border-radius:4px; padding:0 .3rem; line-height:1.5}
.tag.presse{color:var(--ink-2); background:var(--hi)}
.tag.verif{color:var(--ink-3); border-style:dashed}
blockquote.q{margin:0; font-style:italic; color:var(--ink-2); font-size:var(--t-sm); padding:var(--s1) var(--s3); border-left:2px solid var(--c, var(--rule)); background:var(--paper); border-radius:0 var(--r-sm) var(--r-sm) 0}
.terms{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2)}
.terms button{font-size:var(--t-xs); background:var(--hi); border:1px solid var(--rule); border-radius:99px; padding:.1rem .6rem; cursor:pointer; color:var(--ink-2)}
.terms button::before{content:"? "; font-weight:700}
.terms button[aria-expanded="true"]{border-color:var(--ink-3); color:var(--ink)}
.def{font-size:var(--t-sm); color:var(--ink-2); background:var(--hi); border-radius:var(--r-sm); padding:var(--s2) var(--s3)}
.none{color:var(--ink-3); font-style:italic; font-size:var(--t-sm); padding:var(--s3) var(--s4); border:1px dashed var(--rule); border-radius:var(--r-sm)}
.quick{display:grid; gap:var(--s2)}
.quick>a{display:grid; grid-template-columns:auto minmax(8rem,12rem) 1fr; gap:var(--s2) var(--s4); align-items:start; padding:var(--s3) var(--s4); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm); text-decoration:none}
.quick>a:hover{border-color:var(--c)}
.quick .ib{width:2rem; height:2rem; border-radius:8px; background:var(--b); color:var(--c); display:grid; place-items:center}
.quick .k{font-weight:700; font-size:var(--t-sm); color:var(--c); padding-top:.3rem}
.quick .v{min-width:0; font-size:var(--t-sm); padding-top:.3rem}
.quick .more{color:var(--ink-3); font-size:var(--t-xs); margin-left:.35rem; white-space:nowrap}
.quick .v.nil{color:var(--ink-3); font-style:italic}
@media (max-width:600px){ .quick>a{grid-template-columns:auto 1fr} .quick .v{grid-column:1/-1} }

/* Thème */
.th-hero{display:grid; gap:var(--s3); background:var(--b); border-radius:calc(var(--r) * 1.4); padding:clamp(1rem,3vw,2rem)}
.th-hero .ib{width:3.4rem; height:3.4rem; border-radius:14px; background:var(--c); color:var(--surface); display:grid; place-items:center}
.th-hero .ib svg{width:1.9rem; height:1.9rem}
.th-hero .eyebrow{color:var(--c)}
.by{display:grid; gap:var(--s5)}
.by>div{display:grid; gap:var(--s3); min-width:0}
.by>div{scroll-margin-top:calc(var(--hdr,3.3rem) + 4.5rem)}
.whoh{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center}
.whoh a.nm{font-family:var(--f-display); font-weight:700; font-size:1.12rem; text-decoration:none}
.whoh .pt{color:var(--ink-3); font-size:var(--t-sm)}

/* Comparateur */
.picker{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip{display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--rule); background:var(--surface); border-radius:99px; padding:.25rem .8rem .25rem .3rem; cursor:pointer; font-size:var(--t-sm); font-weight:600}
.chip .av{--sz:1.6rem; border-width:1px}
.chip[aria-pressed="true"]{background:var(--mark); color:var(--on-mark); border-color:var(--mark)}
.chip[aria-pressed="true"] .av{background:var(--on-mark); color:var(--mark); border-color:var(--on-mark)}
.chip:disabled{opacity:.45; cursor:not-allowed}
.chip.plain{padding:.3rem .8rem}
.cmp-ctl{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center}
select{font:inherit; font-size:var(--t-sm); padding:.45rem .7rem; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--surface); color:var(--ink)}
.grid-cmp{display:grid; min-width:max-content}
.grid-cmp .hd{position:sticky; top:0; background:var(--surface); padding:var(--s3); border-bottom:1px solid var(--rule); display:flex; gap:var(--s2); align-items:center; z-index:1}
.grid-cmp .hd b{font-family:var(--f-display); font-weight:700; display:block}
.grid-cmp .hd small{display:block; color:var(--ink-3); font-size:var(--t-xs)}
.grid-cmp .row-h{grid-column:1/-1; padding:var(--s2) var(--s3); background:var(--b); color:var(--c); font-weight:700; font-size:var(--t-sm); border-bottom:1px solid var(--rule)}
.grid-cmp .row-h span{position:sticky; left:var(--s3); display:inline-flex; align-items:center; gap:.45rem}
.grid-cmp .cell{padding:var(--s3); border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); display:grid; gap:var(--s3); align-content:start; font-size:var(--t-sm)}
.grid-cmp .cell:last-child{border-right:0}
.cell .it{display:grid; gap:3px; padding-left:var(--s2); border-left:3px solid var(--c)}
.cell .none{padding:var(--s2) var(--s3)}

/* Recherche */
.ask{display:grid; gap:var(--s4); background:var(--surface); border:1px solid var(--rule); border-radius:calc(var(--r) * 1.4); padding:clamp(1rem,3vw,1.75rem); box-shadow:var(--shadow)}
.ask label.big{font-family:var(--f-display); font-weight:700; font-size:var(--t-lg)}
.ask textarea{font:inherit; font-size:1.05rem; width:100%; min-height:4.2rem; resize:vertical; padding:var(--s3) var(--s4); border:1.5px solid var(--rule); border-radius:var(--r); background:var(--paper); color:var(--ink)}
.ask textarea:focus{border-color:var(--focus); outline:none}
.btns{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center}
.btn{display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--mark); background:var(--mark); color:var(--on-mark); border-radius:var(--r-sm); padding:.55rem 1.1rem; cursor:pointer; font-weight:700; font-size:var(--t-sm)}
.btn.ghost{background:none; color:var(--ink); border-color:var(--rule)}
.btn:disabled{opacity:.5; cursor:default}
.hint{font-size:var(--t-sm); color:var(--ink-2)}
.ai{display:grid; gap:var(--s4)}
.ai .status{display:flex; align-items:center; gap:var(--s3); font-size:var(--t-sm); color:var(--ink-2); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4)}
.spin{width:1.1rem; height:1.1rem; border-radius:50%; border:2.5px solid var(--rule); border-top-color:var(--ink); animation:sp .8s linear infinite; flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation:none; border-top-color:var(--ink-3)} }
.understood{display:grid; gap:var(--s3); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4)}
.understood .crit{display:flex; flex-wrap:wrap; gap:var(--s2)}
.understood .crit span{font-size:var(--t-sm); background:var(--hi); border-radius:99px; padding:.2rem .7rem}
.notice{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--t-sm); background:var(--hi); border-radius:var(--r-sm); padding:var(--s3) var(--s4); color:var(--ink)}
.notice svg{margin-top:.1rem}
.answers{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr)); gap:var(--s3)}
.pc{display:grid; gap:var(--s3); align-content:start; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4)}
.pc .whoh a.nm{font-size:1.05rem}
.pc.nil p{color:var(--ink-3); font-style:italic}
.cites{display:grid; gap:var(--s2); margin:0; padding:0; list-style:none}
.cites li{font-size:var(--t-sm); border-left:3px solid var(--c); background:var(--paper); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--s2) var(--s3); display:grid; gap:3px}
.cites li a.go{font-size:var(--t-xs); color:var(--c); font-weight:700; text-decoration:none}
.hits{display:grid; gap:var(--s5)}
details.more-hits{display:grid; gap:var(--s3)}
details.more-hits>summary{cursor:pointer; font-weight:700; font-size:var(--t-sm); color:var(--ink-2); padding:var(--s2) 0; border-top:1px solid var(--rule)}
details.more-hits>summary:hover{color:var(--ink)}

/* Glossaire */
.gl-tools input{font:inherit; width:min(100%,26rem); padding:.6rem .9rem; border:1.5px solid var(--rule); border-radius:99px; background:var(--surface); color:var(--ink)}
dl.gl{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr)); gap:var(--s3); margin:0}
dl.gl>div{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm); padding:var(--s3) var(--s4); display:grid; gap:var(--s1); scroll-margin-top:7rem}
dl.gl>div:target{border-color:var(--focus); box-shadow:0 0 0 2px var(--focus)}
dl.gl dt{font-weight:700; font-family:var(--f-display)} dl.gl dd{margin:0; font-size:var(--t-sm); color:var(--ink-2)}

/* Méthode */
.prose{display:grid; gap:var(--s3); max-width:70ch}
.prose h2{margin-top:var(--s4); font-size:var(--t-lg)}
.prose ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--s1)}
.srcs{display:grid; gap:var(--s2); font-size:var(--t-sm); margin:0; padding-left:1.2rem}
footer{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--rule); color:var(--ink-3); font-size:var(--t-xs); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ——— Fil d’Ariane : où suis-je ——— */
.crumb{display:flex; flex-wrap:wrap; gap:.25rem .45rem; align-items:center; font-size:var(--t-sm); color:var(--ink-3)}
.crumb a{color:var(--ink-2); text-decoration:none; font-weight:600}
.crumb a:hover{color:var(--ink); text-decoration:underline}
.crumb i{font-style:normal; color:var(--ink-3); opacity:.6}
.crumb strong{color:var(--ink); font-weight:700}

/* ——— Trois portes d’entrée ——— */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--s3)}
.door{--c:var(--mark); --b:var(--hi); display:grid; gap:var(--s2); align-content:start; text-decoration:none; background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--c); border-radius:var(--r); padding:var(--s4); box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s}
.door:hover{border-color:var(--c); transform:translateY(-2px)}
.door .ib{width:2.4rem; height:2.4rem; border-radius:10px; background:var(--b); color:var(--c); display:grid; place-items:center}
.door .ib svg{width:1.35rem; height:1.35rem}
.door b{font-family:var(--f-display); font-size:1.12rem; font-weight:700; line-height:1.2}
.door p{font-size:var(--t-sm); color:var(--ink-2)}
.door .cta{font-size:var(--t-sm); font-weight:700; color:var(--c)}
@media (prefers-reduced-motion:reduce){ .door{transition:none} .door:hover{transform:none} }

/* ——— Familles de thèmes ——— */
.fams{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); gap:var(--s3); align-items:start}
.fam{display:grid; gap:var(--s3); align-content:start; background:var(--surface); border:1px solid var(--rule); border-top:4px solid var(--c); border-radius:var(--r); padding:var(--s4)}
.fam-h{display:grid; gap:2px}
.fam-h h2{font-size:1.05rem}
.fam-h .sub{color:var(--ink-2); font-size:var(--t-sm)}
.fam .tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr)); gap:var(--s2)}
.fam .tile{min-height:5.6rem; padding:var(--s3)}
.fam .tile b{font-size:.97rem}
.famtag{display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-xs); font-weight:700; color:var(--ink-2); background:var(--hi); border-radius:99px; padding:.15rem .65rem}

/* ——— Repli (tableau d’ensemble) ——— */
details.fold{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3) var(--s4)}
details.fold>summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--s2); font-family:var(--f-display); font-weight:700; font-size:var(--t-lg); min-height:2.2rem}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"+"; margin-left:auto; font-family:var(--f-mono); font-weight:400; color:var(--ink-3); font-size:1.3rem}
details.fold[open]>summary::after{content:"–"}
details.fold>summary small{font-family:var(--f-body); font-weight:400; font-size:var(--t-sm); color:var(--ink-2)}
details.fold>section{margin-top:var(--s4)}

/* ——— Rail latéral collant (grand écran) ——— */
.rail-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5)}
.rail{display:none}
@media (min-width:1000px){
  .rail-wrap{grid-template-columns:15.5rem minmax(0,1fr); align-items:start}
  .rail{display:block; align-self:start; position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr,3.3rem) + 1rem); max-height:calc(100vh - var(--hdr,3.3rem) - 3rem); overflow-y:auto; scrollbar-width:thin}
  .jump.sticky{display:none}
}
.rail ul{list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:1px}
.rail .ttl{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; padding:0 .55rem .3rem; margin:0}
.rail a,.rail button{display:flex; width:100%; align-items:center; gap:.5rem; text-align:left; text-decoration:none; font:inherit; font-size:var(--t-sm); padding:.4rem .55rem; border:0; border-left:3px solid transparent; background:none; border-radius:var(--r-sm); color:var(--ink-2); min-width:0; cursor:pointer}
.rail svg.ic{width:1.05rem; height:1.05rem; stroke-width:1.8}
.rail .av{--sz:1.5rem; border-width:1px}
.rail span.lb{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail .n{margin-left:auto; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3)}
.rail a:hover,.rail button:hover{background:var(--hi); color:var(--ink)}
.rail .nil{color:var(--ink-3)}
.rail [aria-current]{background:var(--b); color:var(--c); border-left-color:var(--c); font-weight:700}
.rail [aria-current] .n{color:var(--c)}

/* ——— Barre de thèmes collante (mobile et tablette) ——— */
.jump.sticky{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr,3.3rem)); z-index:4; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; background:var(--paper); padding-block:var(--s2); margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px))); padding-inline:max(16px, env(safe-area-inset-left,0px)); box-shadow:0 6px 10px -8px rgba(0,0,0,.25)}
.jump.sticky::-webkit-scrollbar{display:none}
.jump a[aria-current]{box-shadow:inset 0 0 0 2px var(--c)}
.jump .sep{flex:none; width:1px; align-self:stretch; background:var(--rule); margin-inline:.15rem}
.railmain{display:grid; gap:var(--s4); min-width:0; align-content:start}
.fam-block{display:grid; gap:var(--s2); margin-bottom:var(--s4)}
.th-hero .eyebrow{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3)}
.whoh .fiche{margin-left:auto; white-space:nowrap}
@media (max-width:520px){ .whoh .fiche{margin-left:0} }
.cat{scroll-margin-top:calc(var(--hdr,3.3rem) + 4.5rem)}
li.m{scroll-margin-top:calc(var(--hdr,3.3rem) + 4.5rem)}

/* ——— Précédent / suivant ——— */
.pager{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); flex-wrap:wrap; border-top:1px solid var(--rule); padding-top:var(--s4); margin-top:var(--s2)}
.pager a{display:grid; gap:1px; text-decoration:none; max-width:47%}
.pager a small{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700}
.pager a b{font-family:var(--f-display); font-size:1.02rem}
.pager a:last-child{text-align:right; margin-left:auto}
.pager a:hover b{text-decoration:underline}

/* ——— Résumé des résultats par thème ——— */
.spread{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}
.spread a{display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; font-size:var(--t-sm); font-weight:600; background:var(--b); color:var(--c); border-radius:99px; padding:.25rem .7rem}
.spread a svg{width:1rem; height:1rem}
.spread a:hover{outline:1.5px solid var(--c)}
.notice.big{display:grid; gap:var(--s3); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4)}
.notice.big .hd{display:flex; gap:var(--s2); align-items:flex-start; font-weight:600}
.notice.big .chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.notice.big .chips button{font-size:var(--t-sm); border:1px solid var(--rule); background:var(--hi); border-radius:99px; padding:.25rem .75rem; cursor:pointer; color:var(--ink-2); font-weight:600}
.notice.big .chips button:hover{border-color:var(--ink-3); color:var(--ink)}

/* ——— « Je n’ai pas compris » : reformulation dépliable ——— */
.askexpl{display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; flex:none; padding:0; cursor:pointer;
  background:var(--b); color:var(--c); border:1px solid transparent; border-radius:50%; order:-1}
.askexpl svg{width:1.05rem; height:1.05rem}
.askexpl:hover{border-color:var(--c)}
.askexpl[aria-expanded="true"]{background:var(--c); color:var(--surface)}
.bulbhint{display:flex; align-items:center; gap:.45rem}
.bulbhint svg{width:1.3rem; height:1.3rem; flex:none; padding:.15rem; border-radius:50%; background:var(--hi); color:var(--ink-2); box-sizing:content-box}
.explbox{display:grid; gap:var(--s3); background:var(--hi); border-left:3px solid var(--c, var(--rule)); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--s3) var(--s4)}
.explbox .part{display:grid; gap:3px}
.explbox .lb{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--c, var(--ink-3))}
.explbox .part p:not(.lb){font-size:var(--t-sm); max-width:70ch}
.explbox .disc{font-size:var(--t-xs); color:var(--ink-3); border-top:1px solid var(--rule); padding-top:var(--s2); max-width:72ch}

/* ——— Actualité : agenda et chronologie ——— */
section>h2{display:flex; align-items:center; gap:.5rem}
section>h2 svg.ic{width:1.3rem; height:1.3rem; color:var(--ink-3); stroke-width:1.8}
.agenda{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.agenda>li{display:flex; gap:var(--s4); align-items:flex-start; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3) var(--s4); min-width:0}
.agenda.past>li{background:var(--paper)}
.agenda>li>div{min-width:0}
.dbadge{display:grid; place-items:center; flex:none; width:3.7rem; padding:.35rem 0; border-radius:var(--r-sm); background:var(--hi); line-height:1.15}
.dbadge b{font-family:var(--f-display); font-size:1.3rem; font-weight:800}
.dbadge span{font-size:var(--t-xs); color:var(--ink-2)}
.dbadge i{font-style:normal; font-size:.68rem; color:var(--ink-3); font-family:var(--f-mono)}
.agenda .al{font-family:var(--f-display); font-weight:700; font-size:1.05rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem}
.agenda .an{font-size:var(--t-sm); color:var(--ink-2); max-width:72ch; margin-top:2px}
.agenda .meta{margin-top:var(--s2)}
.delai{background:var(--hi); color:var(--ink-2); border-radius:99px; padding:.05rem .55rem; font-weight:400}
.chrono{list-style:none; margin:0; padding:0; display:grid}
.chrono>li{display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:var(--s1) var(--s4); align-items:baseline; padding:var(--s3) 0; border-top:1px solid var(--rule)}
.chrono>li:first-child{border-top:0; padding-top:0}
.cd{color:var(--ink-3); white-space:nowrap}
.ct{display:flex; align-items:center; gap:var(--s2); min-width:0}
.ct a{font-family:var(--f-display); font-weight:700; text-decoration:none}
.ct a:hover{text-decoration:underline}
.cx{grid-column:2; font-size:var(--t-sm); color:var(--ink-2); max-width:75ch}
.chrono .meta{grid-column:2}
@media (max-width:620px){ .chrono>li{grid-template-columns:minmax(0,1fr)} .cx,.chrono .meta{grid-column:1} .agenda>li{gap:var(--s3)} }
table.releve{min-width:34rem}

/* ——— Ruban d’en-tête : le thème courant ressort ——— */
.ribbon i{transition:flex-grow .2s ease, opacity .2s}
.ribbon i.dim{opacity:.35}
.ribbon i.on{flex-grow:3; opacity:1}
@media (prefers-reduced-motion:reduce){ .ribbon i{transition:none} }

/* ——— Barre d’onglets basse (mobile) ——— */
nav.tabs{display:none}
@media (max-width:760px){
  nav.main{display:none}
  nav.tabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9; background:var(--surface); border-top:1px solid var(--rule);
    padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px)}
  nav.tabs a{flex:1 1 0; min-width:0; display:grid; justify-items:center; align-content:center; gap:3px; padding:.45rem .2rem; min-height:3.2rem; text-decoration:none; color:var(--ink-3); font-size:.68rem; font-weight:700; letter-spacing:.01em; border-top:2px solid transparent}
  nav.tabs a svg{width:1.35rem; height:1.35rem}
  nav.tabs a[aria-current="page"]{color:var(--ink); border-top-color:var(--ink)}
  body{padding-bottom:4.6rem}
  .qbox{flex-wrap:wrap; border-radius:var(--r); padding:var(--s2); gap:var(--s2)}
  .qbox>svg{display:none}
  .qbox input{flex:1 1 100%; padding-inline:.6rem}
  .qbox .btn{flex:1 1 100%; justify-content:center; border-radius:var(--r-sm)}
  .pager a{max-width:100%}
  .pager a:last-child{text-align:left; margin-left:0}
}
.tablewrap{overflow-x:auto; max-width:100%}
table.plain{border-collapse:collapse; width:100%; min-width:38rem; font-size:var(--t-sm)}
table.plain th,table.plain td{border:1px solid var(--rule); padding:var(--s2) var(--s3); text-align:left; vertical-align:top}
table.plain thead th{background:var(--hi); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em}
table.plain tbody th{font-weight:600; background:var(--surface)}
mark.todo{background:#FFE08A; color:#3B2A00; padding:0 .25rem; border-radius:3px; font-weight:700}
.legal h1{font-size:var(--t-xl); text-wrap:balance}
.legal h2{font-size:var(--t-lg); margin-top:var(--s4)}
.legal ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--s2)}
.legal code{font-family:var(--f-mono); font-size:.85em; background:var(--hi); padding:.05rem .3rem; border-radius:4px}
@media (max-width:640px){
  .tablewrap{overflow:visible}
  table.plain{min-width:0}
  table.plain thead{display:none}
  table.plain,table.plain tbody,table.plain tr,table.plain th,table.plain td{display:block}
  table.plain tr{border:1px solid var(--rule); border-radius:var(--r-sm); margin-bottom:var(--s3); overflow:hidden; background:var(--surface)}
  table.plain th,table.plain td{border:0}
  table.plain td{border-top:1px solid var(--rule)}
  table.plain td::before{content:attr(data-label); display:block; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:700; margin-bottom:2px}
  table.plain tbody th{background:var(--hi)}
}

/* ---- Ajouts du site déployé ---- */
.legal{max-width:46rem; display:grid; gap:var(--s4); padding-block:var(--s5)}
.legal h2{font-size:var(--t-lg); margin-top:var(--s4)}
.legal ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--s2)}
.legal p,.legal li{max-width:68ch}
.legal code{font-family:var(--f-mono); font-size:.85em; background:var(--hi); padding:.05rem .3rem; border-radius:4px}
.tablewrap{overflow-x:auto; max-width:100%}
table.plain{border-collapse:collapse; width:100%; min-width:38rem; font-size:var(--t-sm)}
table.plain th,table.plain td{border:1px solid var(--rule); padding:var(--s2) var(--s3); text-align:left; vertical-align:top}
table.plain thead th{background:var(--hi); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em}
table.plain tbody th{font-weight:600; background:var(--surface)}
mark.todo{background:#FFE08A; color:#3B2A00; padding:0 .25rem; border-radius:3px; font-weight:700}
.statichead{padding-block:var(--s5) var(--s3); display:grid; gap:var(--s3)}
.stlist{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.stlist a{display:grid; gap:2px; text-decoration:none; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s3) var(--s4); min-height:3.2rem}
.stlist a:hover{background:var(--hi)}
.stlist .sub{font-size:var(--t-xs); color:var(--ink-2)}
.cands-block{display:grid; gap:var(--s5); padding-block:var(--s4)}
.tocline{display:flex; flex-wrap:wrap; gap:var(--s2)}
.tocline a{font-size:var(--t-sm); padding:.35rem .7rem; border:1px solid var(--rule); border-radius:99px; text-decoration:none; background:var(--surface); color:var(--ink-2); font-weight:600}
.tocline a:hover{background:var(--hi); color:var(--ink)}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:2px; cursor:pointer}
.pub{margin-top:var(--s5); padding-top:var(--s2); border-top:1px solid var(--rule)}
.pub::before{content:"Publicité"; display:block; font-size:var(--t-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--s2)}
.consent{position:fixed; inset:auto 0 0 0; z-index:50; background:var(--surface); border-top:2px solid var(--mark); box-shadow:0 -6px 24px rgba(0,0,0,.18);
  padding:var(--s4) max(16px, env(safe-area-inset-right,0px)) calc(var(--s4) + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.consent-in{max-width:74rem; margin-inline:auto; display:grid; gap:var(--s3)}
.consent p{font-size:var(--t-sm); max-width:70ch}
.consent-b{display:flex; flex-wrap:wrap; gap:var(--s3)}
.consent-b .btn{flex:1 1 11rem; justify-content:center}
@media (max-width:640px){
  .tablewrap{overflow:visible}
  table.plain{min-width:0}
  table.plain thead{display:none}
  table.plain,table.plain tbody,table.plain tr,table.plain th,table.plain td{display:block}
  table.plain tr{border:1px solid var(--rule); border-radius:var(--r-sm); margin-bottom:var(--s3); overflow:hidden; background:var(--surface)}
  table.plain th,table.plain td{border:0}
  table.plain td{border-top:1px solid var(--rule)}
  table.plain td::before{content:attr(data-label); display:block; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:700; margin-bottom:2px}
  table.plain tbody th{background:var(--hi)}
}