/* Comparateur des sondages · présidentielle 2027
   Feuille de style de la page /sondages-2027/ de dylantracz.com.
   Jetons, base, bande, rubriques, en-tête et pied de page : repris de la charte du portfolio
   (docs/style-portfolio.md). Aucun JavaScript, aucun style en ligne (CSP). */

/* ---------- Polices (Fraunces variable, auto-hébergée) ---------- */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 104.16%;
  ascent-override: 94.08%;
  descent-override: 24.96%;
  line-gap-override: 0%;
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;
  --bg: #f6f0e6;  --surface: #fbf8f2;  --surface-2: #ece3d3;
  --text: #1b1712;  --text-muted: #5a5247;
  --rule: #d8cfc0;  --rule-strong: #8c8070;
  --accent: #ad3d1b;
  --band-bg: #3a3027;  --band-text: #f6f0e6;  --band-muted: #c9bfae;
  --band-accent: #e8987a;  --band-rule: #5d5245;  --band-surface: #463b31;  --band-rule-strong: #b0a48e;
  /* Signature (décor uniquement, jamais du texte) */
  --mark-blue: #6fa0e6;  --mark-teal: #42bdb8;  --mark-amber: #f2b540;
  /* Graphiques : palette catégorielle, ordre fixe (3:1 minimum contre --bg).
     Aucune teinte n'est l'accent du portfolio ni liée à un camp politique.
     Teintes terreuses et désaturées (sépia, ardoise, vert-de-gris, prune, olive), sans couleur de parti :
     ni rose, rouge, bleu vif, vert vif, orange ou jaune francs. Écart de luminance entre teintes voisines
     et motifs de trait (s2 à s5) pour rester distinguables sans la couleur.
     Clair, contre #f6f0e6 : s1 7,87:1, s2 5,09:1, s3 3,71:1, s4 6,28:1, s5 3,43:1.
     --serie-contexte : courbes de second plan, 3,41:1. */
  --s1: #6a4010;  --s2: #3d6a8c;  --s3: #2f8a72;  --s4: #7e4470;  --s5: #8a8420;
  --serie-contexte: #8c8070;
  /* Barres du classement. Clair, contre #f6f0e6 : bande 5,4:1, moyenne 15,7:1 (2,9:1 sur la bande), piste 3,4:1, graduations 2,4:1 (décor), cv-plein 6,8:1.
     Sombre, contre #14110d : bande 4,8:1, moyenne 15:1 (3,17:1 sur la bande, qui la dépasse en haut et en bas), piste 4,0:1, graduations 3,05:1 (décor), cv-plein 8,3:1. */
  --iv-piste: #8c8070;  --iv-grad: #a89c88;  --iv-bande: #6b604f;  --iv-moyenne: #1b1712;  --cv-plein: #5a5247;  --cv-vide: #ece3d3;
  /* Photos de candidats : niveaux de gris pour une présentation homogène (filtre global, jamais par portrait).
     Sombre : contraste et luminosité légèrement réduits pour éviter les blancs éclatants sur fond sombre. */
  --photo-filter: grayscale(1);
  /* Silhouette générique : fond papier soutenu, tête et buste en encre atténuée (neutre, sans couleur de série).
     Trait contre fond : clair 3,71:1 (#7d725f sur #ece3d3), sombre 4,06:1 (#8a7f6c sur #26211a). */
  --avatar-fond: #ece3d3;  --avatar-trait: #7d725f;
  /* Scène d'ouverture (décor), valeurs de .stage de l'accueil du portfolio (Base.css) : quadrillage blanc à 5 %, halo chaud, halo sarcelle.
     Identiques en clair et en sombre : la bande est sombre dans les deux thèmes. */
  --stage-grid: #ffffff0d;  --stage-glow: #f08a6638;  --stage-glow-2: color-mix(in srgb, var(--mark-teal) 14%, transparent);
  --stage-title: clamp(2.3rem, 1.1rem + 5vw, 4.5rem);
  --font-serif: 'Fraunces Variable', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.5vw, 3.75rem);
  --step-5: clamp(2.75rem, 1.2rem + 7.6vw, 7.5rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem;
  --measure: 40rem;  --page: 76rem;  --rail: 14rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);  --header-h: 3.5rem;
  --radius-s: 0.5rem;  --radius-m: 1rem;  --radius-pill: 999px;
  --t-hover: 150ms;  --t-fade: 400ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110d;  --surface: #1c1812;  --surface-2: #26211a;
    --text: #ede6da;  --text-muted: #b5ab9b;
    --rule: #352f26;  --rule-strong: #7d725f;
    --accent: #e8987a;
    --band-bg: #1f1a13;  --band-text: #ede6da;  --band-muted: #b5ab9b;
    --band-accent: #e8987a;  --band-rule: #3d3529;  --band-surface: #2a241b;  --band-rule-strong: #8a7f6c;
    --s1: #e0b070;  --s2: #6f9fc4;  --s3: #4fc0a0;  --s4: #d09ac0;  --s5: #a9a448;
    --serie-contexte: #7d725f;
    --iv-piste: #7d725f;  --iv-grad: #6a604f;  --iv-bande: #8a7f6c;  --iv-moyenne: #ede6da;  --cv-plein: #b5ab9b;  --cv-vide: #2a241b;
    --avatar-fond: #26211a;  --avatar-trait: #8a7f6c;
    --photo-filter: grayscale(1) contrast(0.92) brightness(0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14110d;  --surface: #1c1812;  --surface-2: #26211a;
  --text: #ede6da;  --text-muted: #b5ab9b;
  --rule: #352f26;  --rule-strong: #7d725f;
  --accent: #e8987a;
  --band-bg: #1f1a13;  --band-text: #ede6da;  --band-muted: #b5ab9b;
  --band-accent: #e8987a;  --band-rule: #3d3529;  --band-surface: #2a241b;  --band-rule-strong: #8a7f6c;
  --s1: #e0b070;  --s2: #6f9fc4;  --s3: #4fc0a0;  --s4: #d09ac0;  --s5: #a9a448;
  --serie-contexte: #7d725f;
  --iv-piste: #7d725f;  --iv-grad: #6a604f;  --iv-bande: #8a7f6c;  --iv-moyenne: #ede6da;  --cv-plein: #b5ab9b;  --cv-vide: #2a241b;
  --avatar-fond: #26211a;  --avatar-trait: #8a7f6c;
  --photo-filter: grayscale(1) contrast(0.92) brightness(0.9);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-block-start: calc(var(--header-h) + var(--space-4)); }
body { margin: 0; min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
main { flex: 1 0 auto; min-inline-size: 0; }
img, picture, video, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 450; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 400; }
p, ul, ol, dl, figure { margin-block: 0 var(--space-4); }
figure { margin-inline: 0; }
p { text-wrap: pretty; }
ul, ol { padding-inline-start: 1.2em; }
li { margin-block: 0.35em; }
strong { font-weight: 650; }
small { font-size: var(--step--1); }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--space-6); }
.sr-only, .sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--gutter); inset-block-start: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--bg); font-weight: 600; text-decoration: none; transform: translateY(-120%); }
.skip-link:focus { transform: none; }
.wrap { inline-size: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.label { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .btn { transition: color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease, text-decoration-thickness var(--t-hover) ease; }
}

/* Bande « encre » : redéfinit les jetons dans un conteneur */
.band { --bg: var(--band-bg); --text: var(--band-text); --text-muted: var(--band-muted); --accent: var(--band-accent); --rule: var(--band-rule); --rule-strong: var(--band-rule-strong); --surface: var(--band-surface); background: var(--bg); color: var(--text); }

/* ---------- Rubriques numérotées ---------- */
main { counter-reset: block; }
.section { counter-increment: block; padding-block: var(--space-8); border-block-start: 1px solid var(--rule); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-block-end: var(--space-6); }
.section__title { font-size: var(--step-2); }
.section__title::before { content: '// ' counter(block, decimal-leading-zero) / ''; display: block; margin-block-end: var(--space-2); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.section__body { min-inline-size: 0; }
@media (min-width: 64rem) {
  .section { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--space-6); padding-block: var(--space-9); }
  .section__head { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: start; margin-block-end: 0; }
  .section__title { font-size: var(--step-1); }
}

/* Rubrique Classement : premier contenu de la page, padding haut réduit pour remonter le tableau */
#classement.section { padding-block-start: var(--space-6); }
@media (min-width: 64rem) { #classement.section { padding-block-start: var(--space-7); } }

/* Corps de rubrique : texte à la mesure, tableaux et graphiques pleine largeur */
.section__body > :last-child { margin-block-end: 0; }
.section__body > p, .section__body > ul, .section__body > ol, .section__body > details, .section__body > .note { max-inline-size: var(--measure); }
.section__body h3 { margin-block: var(--space-7) var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); font-size: var(--step-1); }
.section__body > h3:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.section__body h4 { margin-block: var(--space-5) var(--space-3); font-size: var(--step-0); font-weight: 600; }
.meta { font-size: var(--step--1); color: var(--text-muted); }
#classement .section__body > .meta:first-child { margin-block-end: var(--space-2); }
ul.meta { padding-inline-start: 1.2em; }
.empty { max-inline-size: var(--measure); padding: var(--space-4); border: 1px dashed var(--rule-strong); color: var(--text-muted); }
.chiffre { font-family: var(--font-serif); font-weight: 450; font-variant-numeric: lining-nums; }

/* ---------- En-tête (aussi .band) ---------- */
.site-header { background: var(--bg); border-block-end: 1px solid var(--rule); }
.site-header__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'brand lang' 'nav nav'; align-items: center; column-gap: var(--space-4); padding-block: var(--space-2); }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--space-3); justify-self: start; min-block-size: 2.75rem; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 450; letter-spacing: -0.015em; color: var(--text); text-decoration: none; }
.brand__mark { position: relative; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; padding-block-end: 0.25rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-s); font-size: 1rem; line-height: 1; }
.brand__mark::before { content: 'DT' / ''; }
.brand__mark::after { content: ''; position: absolute; inset-inline: 0.5rem; inset-block-end: 0.375rem; block-size: 2px; background: linear-gradient(90deg, var(--mark-blue) 0 30%, transparent 30% 35%, var(--mark-teal) 35% 65%, transparent 65% 70%, var(--mark-amber) 70% 100%); }
.main-nav { grid-area: nav; }
.main-nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; gap: 0 var(--space-5); }
.main-nav li { margin: 0; }
.main-nav a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; color: var(--text); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
@media (min-width: 48rem) {
  .site-header { position: sticky; inset-block-start: 0; z-index: 10; }
  .site-header__inner { grid-template-columns: auto 1fr auto; grid-template-areas: 'brand nav lang'; min-block-size: var(--header-h); padding-block: 0; }
  .main-nav { margin-inline-start: var(--space-7); }
}

/* ---------- Pied de page (aussi .band) ---------- */
.site-footer { padding-block: var(--space-8) var(--space-6); border-block-start: 1px solid var(--rule); font-size: var(--step--1); }
.site-footer__inner { display: grid; gap: var(--space-7); }
.site-footer p, .site-footer ul { margin: 0; }
.site-footer ul { display: grid; gap: var(--space-1); padding: 0; list-style: none; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-block; padding-block: 0.4rem; color: var(--text); text-decoration-color: var(--accent); }
.site-footer a:hover { color: var(--accent); }
.site-footer__name { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 400; letter-spacing: -0.015em; line-height: 1.1; }
.signature { display: block; inline-size: 3.5rem; block-size: 0.25rem; margin-block: var(--space-4); border-radius: 2px; background: linear-gradient(90deg, var(--mark-blue) 0 30%, transparent 30% 35%, var(--mark-teal) 35% 65%, transparent 65% 70%, var(--mark-amber) 70% 100%); }
.site-footer__legal, .site-footer .label { color: var(--text-muted); }
.site-footer .label { margin-block-end: var(--space-2); }
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); column-gap: var(--space-6); }
}

/* ---------- Boutons, étiquettes, note, tuile ---------- */
.btn { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0.5rem 1.25rem; border: 2px solid var(--accent); border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600; text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--secondary { background: transparent; color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tags li { margin: 0; padding: 0.2rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.5; color: var(--text); }
.note { max-inline-size: var(--measure); padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--accent); }
.note > :last-child { margin-block-end: 0; }
.card { position: relative; padding: var(--space-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.card::before, .card::after { content: ''; position: absolute; inline-size: 0.75rem; block-size: 0.75rem; pointer-events: none; }
.card::before { inset: -1px auto auto -1px; border-block-start: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); border-start-start-radius: var(--radius-m); }
.card::after { inset: auto -1px -1px auto; border-block-end: 2px solid var(--accent); border-inline-end: 2px solid var(--accent); border-end-end-radius: var(--radius-m); }

/* ---------- Bandeau de démonstration ---------- */
.demo-banner { margin: 0; padding: var(--space-3) max(var(--gutter), (100% - var(--page)) / 2); background: var(--surface-2); border-block-end: 1px solid var(--rule-strong); color: var(--text); font-size: var(--step--1); line-height: 1.5; text-wrap: balance; }

/* ---------- Scène d'ouverture ----------
   Règles reprises de .stage / .masthead de l'accueil du portfolio (Base.css) : quadrillage 3 rem estompé vers le bas, halo chaud et halo sarcelle,
   curseur « ▍ » après l'accroche, coins de viseur, trois traits de signature animés. Écarts voulus : titre plus petit (le titre est long),
   marges verticales réduites (le classement doit rester proche du haut de l'écran), coins de viseur autour des chiffres et non d'un portrait.
   Tout est décoratif (fonds, pseudo-éléments sans texte ou avec alternative vide). Le texte reste en --text / --text-muted de la bande.
   Pire fond (centre du halo chaud, 82 % / 28 %, bande claire #3a3027) : environ #624435, --text 7,2:1, --text-muted 4,5:1 à ce seul point,
   où il n'y a pas de texte ; ailleurs le halo s'estompe (70 %). */
.stage { isolation: isolate; position: relative; overflow: hidden; padding-block: var(--space-6) var(--space-7); }
.stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 82% 28%, var(--stage-glow), transparent 70%),
    radial-gradient(38rem 22rem at 4% 100%, var(--stage-glow-2), transparent 70%),
    linear-gradient(var(--stage-grid) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px) 0 0 / 3rem 3rem;
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.stage::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1.25rem; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--mark-blue), transparent) 0 0 / 28% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--mark-teal), transparent) 40% 0.5rem / 28% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--mark-amber), transparent) 75% 1rem / 28% 2px no-repeat; }
.stage .label { margin-block-end: var(--space-3); }
.stage h1 { max-inline-size: 15em; font-size: var(--stage-title); font-weight: 400; line-height: 0.98; letter-spacing: -0.025em; }
.stage__lede { max-inline-size: 34rem; margin-block: var(--space-4) var(--space-5); font-family: var(--font-serif); font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); line-height: 1.3; letter-spacing: -0.005em; }
/* Animations de l'accueil (durées identiques), seulement si le mouvement est permis ; sans mouvement, ni curseur ni défilement des traits */
@keyframes signal { 0% { background-position-x: -40%, -10%, 20%; } 100% { background-position-x: 140%, 170%, 200%; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .stage::after { animation: 18s linear infinite signal; }
  .stage__lede::after { content: '▍'; content: '▍' / ''; margin-inline-start: 0.2em; color: var(--accent); animation: 1.2s step-end infinite blink; }
}
/* Chiffres clés : coins de viseur aux quatre angles (même construction que .portrait::after : huit dégradés, bras de 1,5 rem, 0,9 rem sur mobile) */
.stage__facts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); column-gap: var(--space-6); margin-block-end: 0; }
.stage__facts::before { content: ''; position: absolute; inset: calc(-1 * var(--space-2)); pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 1.5rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 1.5rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 1.5rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 2px 1.5rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 1.5rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 2px 1.5rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 1.5rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 1.5rem no-repeat; }
.stage__facts > div { padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.stage__facts dt { margin-block-end: var(--space-1); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--text-muted); }
.stage__facts dd { margin: 0; font-family: var(--font-serif); font-size: var(--step-1); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }
.stage__facts .chiffre { font-weight: 400; }
/* Cinquième chiffre (résultat 2022, texte plus long) : pleine ligne pour ne pas se casser en colonne étroite */
.stage__facts > div:nth-child(5):last-child { grid-column: 1 / -1; }
/* Sommaire hors scène : filet, respiration au-dessus (la rubrique Classement a déjà son padding bas) et en dessous */
.toc { margin-block: 0 var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--rule); }
.toc .label { margin-block-end: var(--space-2); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; break-inside: avoid; }
.toc a { display: flex; align-items: baseline; gap: var(--space-3); min-block-size: 2.75rem; padding-block: 0.6rem; border-block-end: 1px solid var(--rule); color: var(--text); text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero) / ''; flex: none; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.toc a:hover { color: var(--accent); }
/* Mobile : les trois chiffres passent en lignes « libellé … valeur » pour remonter le classement */
@media (max-width: 47.99rem) {
  .stage { padding-block: var(--space-4) var(--space-6); }
  .stage__lede { max-inline-size: none; font-size: 1.25rem; margin-block: var(--space-3) var(--space-4); }
  .stage__facts::before { inset: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); background-size: 0.9rem 2px, 2px 0.9rem, 0.9rem 2px, 2px 0.9rem, 0.9rem 2px, 2px 0.9rem, 0.9rem 2px, 2px 0.9rem; }
  .stage__facts > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); padding-block: var(--space-2); }
  .stage__facts dt { margin: 0; }
  .stage__facts dd { font-size: var(--step-0); }
  #classement.section { padding-block-start: var(--space-5); }
  #classement .section__head { margin-block-end: var(--space-3); }
  #classement .filtre { gap: var(--space-1) var(--space-4); margin-block-end: var(--space-3); }
}
@media (min-width: 48rem) {
  .stage { padding-block: var(--space-6) var(--space-7); }
  .stage__facts dd { font-size: var(--step-2); }
  .stage__facts > div { padding-block: var(--space-4); }
  .toc ol { columns: 2; column-gap: var(--space-6); }
}

/* « Ce qui a changé » */
main > .wrap > .note:first-child { margin-block: var(--space-5) var(--space-7); }
.note .label { margin-block-end: var(--space-3); }
.note ul { margin-block-end: 0; }
main > .wrap > .note:last-child, main > .wrap > .note + .note { margin-block: var(--space-6); }

/* ---------- Méthode, actualités, FAQ ---------- */
.steps { padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; margin: 0; padding: var(--space-4) 0 var(--space-4) 3rem; border-block-start: 1px solid var(--rule); counter-increment: step; }
.steps li:last-child { border-block-end: 1px solid var(--rule); }
.steps li::before { content: counter(step, decimal-leading-zero) / ''; position: absolute; inset-block-start: calc(var(--space-4) + 0.2em); inset-inline-start: 0; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.section__body > details { border-block-start: 1px solid var(--rule); }
.section__body > details:last-of-type { border-block-end: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.section__body > details > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); min-block-size: 2.75rem; padding-block: var(--space-4); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 450; line-height: 1.25; letter-spacing: -0.015em; }
.section__body > details > summary::after { content: '+' / ''; flex: none; inline-size: 1.5rem; text-align: center; font-family: var(--font-mono); font-size: var(--step-0); color: var(--accent); }
.section__body > details[open] > summary::after { content: '−' / ''; }
.section__body > details > p { padding-inline-end: var(--space-6); }

/* ---------- Tableaux ---------- */
.table-wrap { position: relative; overflow-x: auto; margin-block-end: var(--space-5); }
table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
caption { text-align: start; font-family: var(--font-serif); font-size: var(--step-1); padding-block-end: var(--space-3); }
th { text-align: start; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-block-end: 2px solid var(--rule-strong); padding: var(--space-2) var(--space-3); vertical-align: bottom; }
td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--rule); vertical-align: middle; }
tbody th { text-align: start; font-family: var(--font-sans); font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); border-block-end: 1px solid var(--rule); vertical-align: middle; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--surface); }
td small, td .marge { display: block; color: var(--text-muted); font-size: var(--step--2); }
td .marge { display: inline; font-size: inherit; }

/* Tendance : monochrome, le signe porte l'information */
.trend { white-space: nowrap; font-weight: 600; }
.trend small { display: inline; font-weight: 400; font-size: var(--step--2); color: var(--text-muted); }
.trend.stable, .trend.nd { color: var(--text-muted); }

/* ---------- Classement : rang, score + intervalle, couverture ---------- */
.classement td.rang { inline-size: 1%; padding-inline-end: var(--space-2); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 450; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--text-muted); }
.classement tr.ligne--hors-ref td.rang { color: var(--text-muted); }
.classement--fiche td.rang { font-family: var(--font-sans); font-size: inherit; font-weight: 600; color: var(--text); }
.classement th.cand { min-inline-size: 9rem; }
.cand-lien { display: inline-block; padding-block: 0.2rem; color: var(--text); text-decoration-color: var(--accent); }
.cand-lien:hover { color: var(--accent); }

/* Groupe d'ex æquo : bandeau d'aplat, texte sobre */
.classement tr.groupe:hover { background: none; }
.classement tr.groupe > th { padding-block: var(--space-2); background: var(--surface-2); border-block-end: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.groupe__aide, .palier__aide { display: block; margin-block-start: 0.1rem; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

/* Paliers (zone de qualification) : séparation sans aplat, label mono en petites capitales, double filet au-dessus
   du palier « au-delà ». Les lignes de la zone portent un liseré gauche gris (--rule-strong), y compris un bandeau ex æquo. */
.classement tr.palier:hover { background: none; }
.classement tr.palier > th { padding-block: var(--space-4) var(--space-2); background: none; border-block-end: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.classement tr.palier:not(.palier--zone) > th { padding-block-start: var(--space-6); border-block-start: 4px double var(--rule-strong); }
.classement tr.ligne--zone > :first-child, .classement tr.palier--zone ~ tr.groupe > th { border-inline-start: 3px solid var(--rule-strong); }
.classement tr.palier:not(.palier--zone) ~ tr.groupe > th { border-inline-start: 0; }

/* Ligne mise en avant (fiche candidat) : filet d'accent et aplat, comme .note */
.classement tr.ligne--focus { background: var(--surface-2); }
.classement tr.ligne--focus > :first-child { border-inline-start: 3px solid var(--accent); }
.classement tr.ligne--focus .score__nombre { font-weight: 650; }

/* Badges : texte seul, bordure en trait différent (plein, tireté, pointillé) */
.badge { display: inline-block; margin-inline-start: var(--space-1); padding: 0.05rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; vertical-align: 0.1em; color: var(--text); }
.badge--hausse { border-color: var(--text); }
.badge--baisse { border-style: dashed; border-color: var(--text); }
.badge--rare { border-style: dotted; color: var(--text-muted); }
/* Scénario dépassé : monochrome, filet fin plein gris et coins peu arrondis (quatrième forme, après plein, tireté et pointillé),
   le texte porte l'information. Texte long : il revient à la ligne (même dans td.num, qui est en nowrap) et garde sa propre taille (hors h3).
   Contrastes de --text-muted : clair 6,8:1 sur --bg (7,3:1 sur --surface), sombre 8,3:1 (7,8:1) ; filet 3,4:1 et 4,0:1. */
.badge--depasse { max-inline-size: 100%; border-radius: var(--radius-s); font-weight: 500; letter-spacing: 0.02em; white-space: normal; text-align: start; text-wrap: balance; color: var(--text-muted); }
td small .badge--depasse { display: inline-block; margin: 0; }
/* Colonne « Hypothèse » : le badge passe sous la liste et garde une largeur minimale (sinon il s'étire en colonne étroite) */
td > .badge--depasse { display: block; inline-size: fit-content; min-inline-size: 11rem; margin: var(--space-1) 0 0; }
/* Cellule numérique (nowrap, alignée à droite) : le libellé se replie sur deux lignes et le décompte suit */
td.num > small:has(.badge--depasse) { white-space: normal; }
td.num small .badge--depasse { max-inline-size: 13rem; }
@media (max-width: 39.99rem) {
  .badge--depasse { display: block; inline-size: fit-content; margin-inline-start: 0; margin-block-start: var(--space-1); }
}

/* Score : nombre à gauche, barre d'intervalle à droite */
.classement td.score { min-inline-size: 11rem; }
.score__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
.score__nombre { flex: none; min-inline-size: 4.5ch; font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; white-space: nowrap; }
svg.intervalle { flex: 1 1 5rem; inline-size: 100%; max-inline-size: 11rem; min-inline-size: 5rem; block-size: auto; aspect-ratio: 200 / 24; overflow: visible; background: linear-gradient(var(--iv-piste), var(--iv-piste)) center / 100% 1px no-repeat; }
.iv-bande { fill: var(--iv-bande); }
.iv-moyenne { stroke: var(--iv-moyenne); stroke-width: 3; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.iv-grad { stroke: var(--iv-grad); stroke-width: 1; vector-effect: non-scaling-stroke; }
td small.iv-texte { margin-block-start: 0.1rem; font-variant-numeric: tabular-nums; }
/* Résultat de 2022 sous le nom : discret, sur sa ligne, même rythme que .iv-texte et .couverture-mobile */
small.cand-2022, small.cand-mention, small.autre-hypothese { display: block; margin-block-start: 0; font-family: var(--font-sans); font-size: var(--step--2); font-weight: 400; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Couverture : une case par institut actif, texte en doublon */
.classement td.couverture { min-inline-size: 9rem; }
svg.couverture-barre { inline-size: 5rem; block-size: auto; aspect-ratio: 100 / 8; overflow: visible; margin-block-end: 0.2rem; }
.cv-plein { fill: var(--cv-plein); }
.cv-vide { fill: var(--cv-vide); stroke: var(--iv-piste); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.couverture-mobile { display: none; margin-block-start: 0.1rem; font-family: var(--font-sans); font-size: var(--step--2); font-weight: 400; color: var(--text-muted); }
@media (max-width: 39.99rem) {
  .col-couverture { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .couverture-mobile { display: block; }
  th, td { padding-inline: var(--space-2); }
  th { letter-spacing: 0.04em; }
  .classement th.cand { min-inline-size: 0; }
  .classement th.cand .badge { display: table; margin: 0.2rem 0 0; white-space: normal; }
  .classement td.score { min-inline-size: 0; }
  .score__nombre { font-size: var(--step-0); min-inline-size: 0; }
  svg.intervalle { flex-basis: 100%; max-inline-size: 9rem; }
  .classement td.rang { font-size: var(--step-0); }
}

/* ---------- Toutes les mesures ---------- */
table.mesures { min-inline-size: 46rem; }
table.mesures th, table.mesures td { vertical-align: top; }
table.mesures th.cand { min-inline-size: 11rem; }
.commanditaire { display: block; margin-block-start: 0.15rem; font-family: var(--font-sans); font-size: var(--step--2); font-weight: 400; color: var(--text-muted); }
table.mesures td.source { min-inline-size: 14rem; max-inline-size: 26rem; }
table.mesures td.num small { text-align: end; }
.section__body > details.plus { max-inline-size: none; margin-block-start: var(--space-4); }
.section__body > details.plus > summary { font-size: var(--step-0); font-weight: 600; font-family: var(--font-sans); }
.section__body > details.plus[open] > summary { border-block-end: 1px solid var(--rule); margin-block-end: var(--space-4); }
details.plus > .table-wrap, details.plus > .articles { margin-block-end: var(--space-4); }

/* ---------- Cartes : listes à filets (sauf « Par où commencer ») ---------- */
.cards { display: grid; gap: var(--space-5); }
.cards h4 { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 450; }
.section__body .cards h3 { margin: 0 0 var(--space-2); padding: 0; border: 0; font-size: var(--step-1); font-weight: 450; }
.cards .note { max-inline-size: none; padding: 0; border: 0; font-size: var(--step--1); color: var(--text-muted); }
.cards p { margin-block-end: var(--space-3); }
.cards ol { margin: 0 0 var(--space-3); padding: 0; list-style: none; counter-reset: rang; }
.cards ol li { margin: 0; padding-block: 0.4rem; border-block-end: 1px solid var(--rule); counter-increment: rang; }
.cards ol li::before { content: counter(rang) / ''; display: inline-block; inline-size: 1.5rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-muted); }
#angles .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6) var(--space-5); }
#angles .card, #instituts .card { padding: var(--space-4) 0 0; background: none; border: 0; border-block-start: 1px solid var(--rule-strong); border-radius: 0; }
#angles .card::before, #angles .card::after, #instituts .card::before, #instituts .card::after { content: none; }
#instituts .cards { gap: 0; }
#instituts .card { display: grid; column-gap: var(--space-6); padding-block: var(--space-5); border-block-start: 1px solid var(--rule); }
#instituts .card:last-child { border-block-end: 1px solid var(--rule); }
#instituts .card h3 { margin: 0; }
#instituts .card .count { margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
#instituts .card .count strong { color: var(--text); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 450; }
#instituts .card dl { margin: 0; }
#instituts .card dt { margin-block-start: var(--space-3); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
#instituts .card dd { margin: 0; font-size: var(--step--1); }
@media (min-width: 48rem) {
  #instituts .card { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); }
  #instituts .card h3 { grid-column: 1; grid-row: 1; }
  #instituts .card .count { grid-column: 1; grid-row: 2; }
  #instituts .card p:not(.count) { grid-column: 2; grid-row: 1; max-inline-size: var(--measure); }
  #instituts .card dl { grid-column: 2; grid-row: 2; max-inline-size: var(--measure); }
}
/* « Par où commencer » : seules vraies tuiles de la page */
#commencer .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
#commencer .card h3 { margin-block: 0 var(--space-3); font-size: var(--step-1); line-height: 1.2; }
#commencer .card p { margin: 0; }

/* ---------- Graphiques SVG ---------- */
.chart { margin-block: var(--space-5) var(--space-6); }
.chart figcaption { margin-block-end: var(--space-3); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 450; letter-spacing: -0.015em; }
.chart svg { inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--font-sans); }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .tick { fill: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.chart svg .label { fill: var(--text); font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: normal; }
.serie path { fill: none; stroke: var(--serie, var(--s1)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.serie .pt { fill: var(--serie, var(--s1)); stroke: var(--bg); stroke-width: 1.5; }
.serie .end { fill: var(--serie, var(--s1)); stroke: var(--bg); stroke-width: 1.5; }
.serie .hit { fill: transparent; stroke: none; }
.s1 { --serie: var(--s1); }
.s2 { --serie: var(--s2); }
.s3 { --serie: var(--s3); }
.s4 { --serie: var(--s4); }
.s5 { --serie: var(--s5); }
/* Second repère que la couleur : motif de trait propre à chaque série */
.serie.s2 path { stroke-dasharray: 7 4; }
.serie.s3 path { stroke-dasharray: 2 4; }
.serie.s4 path { stroke-dasharray: 11 4 2 4; }
.serie.s5 path { stroke-dasharray: 4 3 1 3 1 3; }
.chart-wide { display: none; }
@media (min-width: 40rem) {
  .chart-wide { display: block; }
  .chart-narrow { display: none; }
}
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--step--1); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.swatch { flex: none; display: inline-block; inline-size: 1.75rem; block-size: 0.2rem; background: var(--serie, var(--s1)); }
.swatch.s2 { background: repeating-linear-gradient(90deg, var(--serie) 0 7px, transparent 7px 11px); }
.swatch.s3 { background: repeating-linear-gradient(90deg, var(--serie) 0 2px, transparent 2px 6px); }
.swatch.s4 { background: repeating-linear-gradient(90deg, var(--serie) 0 11px, transparent 11px 15px, var(--serie) 15px 17px, transparent 17px 21px); }
.swatch.s5 { background: repeating-linear-gradient(90deg, var(--serie) 0 4px, transparent 4px 7px, var(--serie) 7px 8px, transparent 8px 11px, var(--serie) 11px 12px, transparent 12px 15px); }
.chart > ul.meta { margin-block-end: var(--space-4); max-inline-size: var(--measure); }
.chart > .meta { max-inline-size: var(--measure); }
.table-view { margin-block-start: var(--space-3); }
.table-view summary { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; }

/* Fiche candidat : la courbe du candidat est épaissie, les autres passent au second plan.
   Le gris de second plan est un jeton (--serie-contexte, ≥ 3:1) ; le motif de trait et l'étiquette directe restent. */
.serie--focus path { stroke-width: 4; }
.serie--focus .pt { r: 4.5px; }
.serie.serie--contexte { --serie: var(--serie-contexte); }
.serie--contexte path { stroke-width: 1.75; }
.serie--contexte .pt { r: 2.5px; }
.legend--contexte .swatch { --serie: var(--serie-contexte); }

/* ---------- Photos de candidats ---------- */
/* Les portraits (WebP 320 x 320, déjà en gris) ne s'affichent que dans les avatars : voir « Fiches candidats ». */
/* ---------- Choix de l'hypothèse (boutons radio natifs, sans JavaScript) ----------
   Les radios sont dans le fieldset, les panneaux en dehors : :has() sur le conteneur. Sans :has(), les deux panneaux restent visibles.
   Radios masquées par rognage (pas display:none) pour garder le focus clavier ; le label est le bouton segmenté.
   Contrastes : état normal --text sur --surface (clair 16,6:1, sombre 15,6:1) ; coché --bg sur --text (clair 15,7:1, sombre 15,0:1). */
.classement-hypotheses:has(#hyp-a:checked) .hypothese--b { display: none; }
.classement-hypotheses:has(#hyp-b:checked) .hypothese--a { display: none; }
fieldset.hypotheses { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; max-inline-size: 40rem; margin: 0 0 var(--space-4); padding: 0; border: 0; }
fieldset.hypotheses legend { float: left; inline-size: 100%; margin: 0 0 var(--space-2); padding: 0; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--text-muted); }
fieldset.hypotheses legend + * { clear: both; }
fieldset.hypotheses input[type="radio"] { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; }
fieldset.hypotheses label { flex: 1 1 13rem; display: flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: 0.5rem var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-size: var(--step--1); font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; }
fieldset.hypotheses label:hover { background: var(--surface-2); }
fieldset.hypotheses input:checked + label { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
input[name="hypothese"]:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 47.99rem) { fieldset.hypotheses { margin-block-end: var(--space-3); } }

/* ---------- Filtre « un candidat » (le script ne s'exécute qu'avec JavaScript) ---------- */
.filtre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); max-inline-size: none; margin-block-end: var(--space-4); }
.filtre[hidden], .filtre__fiche[hidden] { display: none; }
.filtre label { flex: none; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.filtre select { flex: 0 1 18rem; min-inline-size: 0; max-inline-size: 100%; min-block-size: 2.75rem; padding: 0.4rem var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step--1); }
.filtre__fiche { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; }
.filtre__etat { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.filtre__etat:empty { display: none; }
.filtre-liens { margin-block-end: var(--space-4); }
.filtre-liens .label { margin-block-end: var(--space-1); }
.filtre-liens ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.filtre-liens li { margin: 0; }
.filtre-liens a { display: inline-block; padding-block: 0.4rem; }
main[data-filtre="actif"] .filtre-liens { display: none; }

/* Éléments hors sélection : la couleur du texte passe en --text-muted (≥ 4,5:1), pas d'opacité sur le texte */
tr.est-attenue > * { color: var(--text-muted); font-weight: 400; }
tr.est-attenue a, tr.est-attenue .score__nombre { color: var(--text-muted); font-weight: 400; }
tr.est-attenue svg, tr.est-attenue .badge { opacity: 0.45; }
.legend li.est-attenue { color: var(--text-muted); }
.legend li.est-attenue .swatch { opacity: 0.4; }
.serie.est-attenue path, .serie.est-attenue .pt, .serie.est-attenue .end { opacity: 0.25; }

/* ---------- Articles : liste à filets, 1 colonne mobile, grille ensuite ---------- */
.section__body > ul.articles { max-inline-size: none; }
ul.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6) var(--space-5); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.article { margin: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule-strong); }
.article > :last-child { margin-block-end: 0; }
.article__figure { margin-block-end: var(--space-3); }
.article__image { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.article__credit { margin-block-start: var(--space-1); font-size: var(--step--2); color: var(--text-muted); }
.article__media { margin-block-end: var(--space-1); font-size: var(--step--1); font-weight: 600; }
.article .label { margin-block-end: var(--space-2); }
.section__body .articles h3 { margin-block: 0 var(--space-2); padding: 0; border: 0; font-size: var(--step-1); font-weight: 450; }
.articles h3 a { color: var(--text); text-decoration-color: var(--accent); }
.articles h3 a:hover { color: var(--accent); }

/* ---------- Fiches candidats ---------- */
.retour { margin-block-end: var(--space-4); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.06em; }
.retour a { display: inline-block; padding-block: 0.5rem; }
.candidats-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); column-gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.candidats-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-block-size: 2.75rem; margin: 0; padding-block: 0.4rem; border-block-end: 1px solid var(--rule); }
.candidats-liste .cand-lien { margin-inline-end: auto; min-inline-size: 0; }
.candidats-liste small { color: var(--text-muted); white-space: nowrap; }

/* Avatars : silhouette générique (décorative) ou portrait, dans un cercle fin (taille fixée par le conteneur) */
.fiche__titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block-end: var(--space-4); }
.fiche__titre h1 { flex: 1 1 12rem; font-size: clamp(2.3rem, 1.5rem + 3.5vw, 3.75rem); min-inline-size: 0; margin: 0; }
.band { --avatar-fond: var(--band-surface); --avatar-trait: var(--band-rule-strong); --photo-filter: grayscale(1) contrast(0.92) brightness(0.9); }
.fiche__avatar, .candidats-liste__avatar { flex: none; display: block; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--avatar-fond); }
.fiche__avatar { inline-size: 4.5rem; block-size: 4.5rem; }
.candidats-liste__avatar { inline-size: 2.25rem; block-size: 2.25rem; }
.silhouette { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.silhouette__fond { fill: var(--avatar-fond); }
.silhouette__tete, .silhouette__buste { fill: var(--avatar-trait); }
.fiche__avatar .cand-photo, .candidats-liste__avatar .cand-photo { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; border: 0; border-radius: 0; object-fit: cover; background: var(--avatar-fond); filter: var(--photo-filter); }

/* Crédits des photos : discrets (--text-muted ≥ 4,5:1 : clair 7,0:1, sombre 8,6:1), liens soulignés (accent) */
.credit-photo, .credits-photos { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.credit-photo a, .credits-photos a { text-decoration-thickness: 0.08em; }
.credits-photos p { margin-block-end: var(--space-2); }
.credits-photos__liste { margin: 0; padding-inline-start: 1.2em; }
.credits-photos__liste li { margin-block: 0.4em; }
.credits-photos__liste strong { color: var(--text); font-weight: 600; }
/* Repli : même marqueur +/− que les autres details */
details.credits-photos > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); min-block-size: 2.75rem; padding-block: 0.6rem; color: var(--text); font-size: var(--step-0); font-weight: 600; line-height: 1.3; }
details.credits-photos > summary::after { content: '+' / ''; flex: none; inline-size: 1.5rem; text-align: center; font-family: var(--font-mono); font-size: var(--step-0); color: var(--accent); }
details.credits-photos[open] > summary { margin-block-end: var(--space-2); }
details.credits-photos[open] > summary::after { content: '−' / ''; }