/* MaFrance.org — feuille de style du site (direction artistique validee sur maquette le 2026-11-02).
   Aucun style en ligne : la politique de securite du contenu (CSP) ne les autorise pas. */
/* Quotidien numérique premium : manchette serif, une large + fil info horodaté, puis « Les vrais chiffres » et les rubriques. */
:root {
  --paper: #ffffff;          /* fond de page */
  --wash: #f1f4f9;           /* encadrés, fiches chiffres */
  --ink: #0f2547;            /* bleu nuit de la marque : manchette, titres, liens */
  --text: #1d2433;           /* texte courant */
  --muted: #5a6478;          /* métadonnées, sources */
  --rule: #d8dee9;           /* filets */
  --live: #c4122f;           /* direct et alertes, uniquement */
  --chart: #2f5fa7;          /* séries des graphiques */
  --chart-soft: #b9cbe6;     /* aires et repères */
  --bandeau: #0f2547;        /* fond des visuels et du bandeau commune : reste bleu nuit en sombre */
  --sur-bandeau: #ffffff;    /* texte et grands chiffres sur ce fond */
  --bandeau-doux: #b9cbe6;   /* étiquettes sur ce fond */
  /* Une seule serif sobre pour titres et texte ; les chiffres en sans-serif à traits épais, lisibles sur tous les fonds. */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --label: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.8125rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.15rem; --step-4: 2.9rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1424; --wash: #141f35; --ink: #dfe7f5; --text: #e6ebf4; --muted: #9aa6bd;
    --rule: #26324b; --live: #ff5d73; --chart: #8eb4f2; --chart-soft: #2c4470; --bandeau: #1b3461; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1424; --wash: #141f35; --ink: #dfe7f5; --text: #e6ebf4; --muted: #9aa6bd;
  --rule: #26324b; --live: #ff5d73; --chart: #8eb4f2; --chart-soft: #2c4470; --bandeau: #1b3461; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--text); font-family: var(--serif); font-size: var(--step-0);
  line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover h2, a:hover h3, a:hover .titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--chart); outline-offset: 2px; }
.cadre { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.etiquette { font-family: var(--label); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--chart); }
.meta { font-family: var(--label); font-size: var(--step--1); color: var(--muted); letter-spacing: 0.01em; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; margin: 0; font-weight: 650; line-height: 1.2; }


/* En-tête du journal */
.manchette { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 14px 10px; }
.manchette > .logo { grid-column: 2; }
/* Menu (hamburger) : un <details>, qui s'ouvre sans script ; site.js ajoute Echap et le clic a cote. */
.menu { grid-column: 1; justify-self: start; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 0; cursor: pointer; font-family: var(--label); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu-barres, .menu-barres::before, .menu-barres::after { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.18s ease, background-color 0.18s ease; }
.menu-barres { position: relative; }
.menu-barres::before, .menu-barres::after { content: ""; position: absolute; left: 0; }
.menu-barres::before { top: -7px; }
.menu-barres::after { top: 7px; }
.menu[open] .menu-barres { background: transparent; }
.menu[open] .menu-barres::before { transform: translateY(7px) rotate(45deg); }
.menu[open] .menu-barres::after { transform: translateY(-7px) rotate(-45deg); }
.menu-panneau { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; text-align: left; background: var(--paper); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); box-shadow: 0 18px 40px rgba(15, 37, 71, 0.16); padding: 18px max(16px, env(safe-area-inset-left, 0px)) 22px; }
.menu-panneau ul { list-style: none; margin: 0; padding: 0; }
.menu-pages { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.menu-pages a { display: block; padding-block: 8px; font-family: var(--label); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--chart); }
.menu-panneau .menu-maison { border-bottom: 0; border-top: 1px solid var(--rule); padding: 12px 0 0; }
.menu-maison a { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0.01em; }
.menu-rubriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; padding-block: 18px; }
.menu-rubrique { display: block; padding-block: 6px; font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.menu-rubriques ul a { display: block; padding-block: 6px; font-family: var(--label); font-size: 0.92rem; color: var(--ink); }
.menu-panneau a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .menu-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
}
@media (max-width: 420px) { .menu-rubriques { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .menu-barres, .menu-barres::before, .menu-barres::after { transition: none; } }
/* Un seul menu a la fois : le menu en tiroir sur mobile, la barre des rubriques au-dela (meme seuil que le reste). */
@media (min-width: 861px) { .menu { display: none; } }
.manchette .logo { font-size: clamp(1.75rem, 5vw, 2.4rem); }
.logo { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 8vw, 4.4rem); color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.logo span { font-family: var(--label); font-weight: 500; font-size: 0.32em; letter-spacing: 0.08em; vertical-align: baseline; margin-left: 2px; color: var(--muted); }
/* Le M du logo aux couleurs du drapeau (bleu France #000091, blanc, rouge Marianne #E1000F), cerne d'un filet a la
   couleur de l'encre (ombres portees, qui ne suivent que la silhouette : le contour d'un trait, lui, dessinerait les
   chevauchements internes du glyphe) : la bande blanche reste visible sur fond blanc. Bandes 40/20/40 : avec ce caractere, le bleu
   couvre la grande diagonale du M et le rouge sa jambe droite (tiers egaux : un M presque vide). */
.logo .logo-m { font: inherit; letter-spacing: inherit; vertical-align: baseline; margin: 0; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, #000091 0 40%, #ffffff 40% 60%, #e1000f 60% 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0.012em 0 0 var(--ink)) drop-shadow(-0.012em 0 0 var(--ink)) drop-shadow(0 0.012em 0 var(--ink)) drop-shadow(0 -0.012em 0 var(--ink)); }
.devise { margin: 6px 0 0; font-style: italic; color: var(--muted); font-size: 0.95rem; }
nav.rubriques { border-top: 3px double var(--ink); border-bottom: 1px solid var(--rule); }
nav.rubriques ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 861px) {
  /* Douze rubriques et trois liens : deux lignes plutot qu'un defilement cache sur grand ecran. */
  nav.rubriques ul { flex-wrap: wrap; column-gap: 20px; row-gap: 0; overflow: visible; }
}
nav.rubriques li a { display: block; padding-block: 11px; font-family: var(--label); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
nav.rubriques li a.chiffres { color: var(--chart); }
.direct .cadre { display: flex; gap: 12px; align-items: baseline; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.pastille { flex: none; font-family: var(--label); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; color: #fff; background: var(--live); padding: 3px 8px; border-radius: 2px; }
.direct p { margin: 0; font-weight: 500; color: var(--ink); min-width: 0; }

/* Graphiques (site/graphiques.py). Couleurs validées par le script de la skill de visualisation :
   clair #2f5fa7 / #8a93a3 sur #ffffff, sombre #4a90e8 / #5f687a sur #0c1424 (séparation, daltonisme, contraste). */
:root { --g-acc: #2f5fa7; --g-ref: #8a93a3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-acc: #4a90e8; --g-ref: #5f687a; } }
:root[data-theme="dark"] { --g-acc: #4a90e8; --g-ref: #5f687a; }
.graphique { margin: 0; display: grid; gap: 8px; min-width: 0; }
.graphique:focus-visible { outline: 2px solid var(--chart); outline-offset: 4px; }
.graphique figcaption { display: grid; gap: 2px; }
.g-titre { font-family: var(--label); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.g-sous-titre, .g-source { font-family: var(--label); font-size: 0.8rem; color: var(--muted); margin: 0; }
.g-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--label); font-size: 0.85rem; color: var(--text); }
.g-cle { display: inline-block; width: 16px; height: 2px; margin-right: 6px; vertical-align: middle; border-radius: 1px; }
.g-cle.g-acc { background: var(--g-acc); }
.g-cle.g-ref { background: var(--g-ref); }
.g-zone { position: relative; }
.g-courbe { width: 100%; height: auto; display: block; overflow: visible; }
.g-grille, .g-axe-trait { stroke: var(--rule); stroke-width: 1; }
.g-axe { font-family: var(--label); font-size: 11px; fill: var(--muted); }
.g-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g-ligne.g-acc { stroke: var(--g-acc); }
.g-ligne.g-ref { stroke: var(--g-ref); }
.g-aire.g-acc { fill: var(--g-acc); fill-opacity: 0.1; stroke: none; }
.g-point { stroke: var(--paper); stroke-width: 2; }
.g-point.g-acc { fill: var(--g-acc); }
.g-point.g-ref { fill: var(--g-ref); }
.g-fin { font-family: var(--label); font-size: 12px; font-weight: 600; fill: var(--ink); }
.g-curseur { stroke: var(--muted); stroke-width: 1; }
.g-bulle { position: absolute; top: 0; z-index: 2; pointer-events: none; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); padding: 6px 9px; font-family: var(--label); font-size: 0.82rem; min-width: 110px; }
.g-bulle .g-annee { color: var(--muted); }
.g-ligne-bulle { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.g-ligne-bulle strong { color: var(--ink); }
.g-donnees summary { font-family: var(--label); font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.g-ensemble { display: grid; gap: 14px; }
.g-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 30px; }
.g-rangs { display: grid; gap: 2px; }
.g-rang { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-block: 4px; }
.g-nom { font-family: var(--label); font-size: 0.9rem; color: var(--text); }
.g-barre { width: 100%; height: 12px; display: block; }
.g-barre .g-fond { fill: var(--wash); }
.g-barre .g-plein { fill: var(--g-acc); }
.g-valeur { font-family: var(--label); font-size: 0.9rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .g-rang { grid-template-columns: minmax(0, 1fr) auto; }
  .g-rang .g-barre { grid-column: 1 / -1; grid-row: 2; }
}

/* L'événement : bandeau de l'accueil et page du direct (news/direct.py) */
.evenement { background: var(--bandeau); color: var(--sur-bandeau); padding: 18px 20px 16px; margin-top: 20px; }
.evenement-tete { display: block; }
.etiquette-evenement { font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bandeau-doux); margin-right: 10px; }
.evenement h2 { font-size: var(--step-2); line-height: 1.12; margin: 10px 0 0; color: var(--sur-bandeau); }
.evenement-entrees { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.evenement-entrees li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; padding-block: 9px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.evenement-entrees time { font-family: var(--label); font-weight: 600; color: var(--bandeau-doux); }
.evenement-suivre { display: inline-block; margin-top: 10px; font-family: var(--label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.pastille::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: pulsation 1.6s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .pastille::before { animation: none; } }
.page-article header .pastille, .page-article header .direct-fini { justify-self: start; }
.direct-fini { font-family: var(--label); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.direct-entrees { margin: 28px 0; border-left: 3px solid var(--live); padding-left: 18px; }
.entree { padding-block: 12px; border-bottom: 1px solid var(--rule); }
.entree time { font-family: var(--label); font-weight: 700; color: var(--live); }
.entree p { margin: 4px 0 0; }
@media (max-width: 640px) { .evenement { padding: 14px 16px; } .evenement h2 { font-size: var(--step-1); } }

/* Accueil */
.une { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 36px; padding-block: 28px; }
.une-principale { display: grid; gap: 14px; }
.une-principale h2 { font-size: clamp(1.6rem, 4vw, var(--step-3)); line-height: 1.12; letter-spacing: -0.01em; }
.chapo { font-size: var(--step-1); color: var(--text); margin: 0; max-width: 62ch; }
.visuel { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--bandeau); color: var(--sur-bandeau); border-radius: 2px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(16px, 3vw, 28px); }
.visuel .etiquette { color: var(--bandeau-doux); }
.visuel .grand-chiffre { font-family: var(--label); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; align-self: center; }
.visuel .legende { font-family: var(--label); font-size: var(--step--1); opacity: 0.85; }
.visuel > span { position: relative; z-index: 1; }
.visuel svg { position: absolute; right: 0; bottom: 0; width: 62%; height: 70%; opacity: 0.9; }
.fil { border-left: 1px solid var(--rule); padding-left: 24px; display: grid; gap: 4px; align-content: start; }
.fil h3 { font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.fil ol { list-style: none; margin: 0; padding: 0; }
.fil li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; padding-block: 11px; border-bottom: 1px solid var(--rule); }
.fil time { font-family: var(--label); font-size: var(--step--1); color: var(--live); font-weight: 600; font-variant-numeric: tabular-nums; }
.fil .titre { font-size: 0.98rem; line-height: 1.35; color: var(--ink); }

.bloc-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--ink); padding-top: 10px; margin-bottom: 18px; }
.bloc-titre h2 { font-size: var(--step-2); font-weight: 700; }
.vrais-chiffres { padding-block: 12px 32px; }
.vrais-chiffres .intro { margin: -6px 0 18px; color: var(--muted); max-width: 70ch; }
.cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.carte { background: var(--wash); padding: 16px; display: grid; gap: 6px; align-content: start; }
.carte .valeur { font-family: var(--label); font-weight: 600; font-size: var(--step-3); color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.carte .evol { font-family: var(--label); font-size: var(--step--1); color: var(--muted); }
.carte svg { width: 100%; height: 64px; display: block; }
.carte .source { font-family: var(--label); font-size: 0.72rem; color: var(--muted); }
.ligne { fill: none; stroke: var(--chart); stroke-width: 2; }
.aire { fill: var(--chart-soft); opacity: 0.55; }
.point { fill: var(--chart); }
.repere { stroke: var(--rule); stroke-width: 1; }
.texte-graphe { fill: var(--muted); font-family: var(--label); font-size: 10px; }

.confrontation { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule); }
.confrontation > div { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.confrontation > div + div { border-left: 1px solid var(--rule); background: var(--wash); }
.confrontation blockquote { margin: 0; font-style: italic; font-size: var(--step-1); color: var(--ink); }
.confrontation p { margin: 0; }

.rubriques-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 8px 36px; }
.rubrique { display: grid; gap: 12px; align-content: start; }
.rubrique h2 { font-family: var(--label); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.rubrique article { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.rubrique h3 { font-size: 1.1rem; line-height: 1.25; }
.rubrique article:first-of-type h3 { font-size: var(--step-1); }

.commune-recherche { background: var(--bandeau); color: var(--sur-bandeau); }
.commune-recherche .cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding-block: 30px; }
.commune-recherche h2 { color: var(--sur-bandeau); font-weight: 700; font-size: var(--step-3); }
.commune-recherche p { margin: 6px 0 0; opacity: 0.85; }
.champ { display: flex; gap: 0; }
.champ input { flex: 1; min-width: 0; font: inherit; font-family: var(--label); padding: 14px 16px; border: 0; border-radius: 2px 0 0 2px; background: #ffffff; color: #1d2433; }
.champ button { font-family: var(--label); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0 20px; border: 0; border-radius: 0 2px 2px 0; background: var(--chart); color: var(--paper); cursor: pointer; }
.suggestions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--label); font-size: var(--step--1); }
.suggestions a { border: 1px solid color-mix(in srgb, var(--sur-bandeau) 40%, transparent); padding: 3px 10px; border-radius: 999px; }

footer { border-top: 3px double var(--ink); margin-top: 8px; }
footer .cadre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 22px 32px; }
footer .logo { font-size: 1.8rem; }
.pied-marque .devise { font-size: 0.9rem; }
footer .pied-reseaux { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--rule); gap: 0 6px; }
/* Pictogrammes des reseaux : zone tactile de 44 px, couleur du texte, accent au survol et au clavier. */
.pied-reseaux a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); }
.pied-reseaux a:hover, .pied-reseaux a:focus-visible { color: var(--chart); }
.pied-reseaux li:first-child { margin-left: -11px; }  /* la premiere icone s'aligne sur le texte, pas sur sa zone tactile */
.reseau-icone { width: 22px; height: 22px; fill: currentColor; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--label); font-size: 0.9rem; }

/* Article */
.page-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-block: 30px 40px; }
.page-article header { display: grid; gap: 14px; margin-bottom: 22px; }
.page-article h1 { font-size: clamp(2rem, 4.6vw, var(--step-4)); line-height: 1.08; letter-spacing: -0.01em; }
.signature { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-block: 10px; border-block: 1px solid var(--rule); }
.partage { display: flex; flex-wrap: wrap; gap: 8px; }
.partage a { font-family: var(--label); font-size: var(--step--1); font-weight: 500; border: 1px solid var(--rule); padding: 5px 12px; border-radius: 999px; color: var(--ink); }
.corps { max-width: 66ch; }
.corps p { margin: 0 0 1.05em; }
.corps h2 { font-size: var(--step-2); margin: 1.4em 0 0.5em; }
.encadre { background: var(--wash); border-top: 3px solid var(--ink); padding: 18px 20px; margin: 1.5em 0; display: grid; gap: 10px; }
.barres { display: grid; gap: 8px; }
.barre { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; gap: 10px; align-items: center; font-family: var(--label); font-size: var(--step--1); }
.barre .piste { height: 10px; background: var(--chart-soft); }
.barre .piste i { display: block; height: 100%; background: var(--chart); }
.barre b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.sources { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 22px; font-family: var(--label); font-size: 0.9rem; color: var(--muted); }
.sources ul { margin: 6px 0 0; padding-left: 18px; }
aside.colonne { display: grid; gap: 18px; align-content: start; }
aside.colonne h3 { font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
aside.colonne a { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
aside.colonne .titre { font-size: 1.02rem; line-height: 1.3; color: var(--ink); font-weight: 500; }

/* Fiche commune */
.fiche { padding-block: 28px 40px; display: grid; gap: 24px; }
.fiche header { display: grid; gap: 8px; }
.fiche h1 { font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.indicateur { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.indicateur .valeur { font-family: var(--label); font-weight: 600; font-size: var(--step-3); color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.indicateur .compare { font-family: var(--label); font-size: var(--step--1); color: var(--muted); }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.graphe { background: var(--wash); padding: 18px; display: grid; gap: 10px; }
.graphe h2 { font-size: var(--step-1); }
.graphe svg { width: 100%; height: auto; display: block; }
.note { font-family: var(--label); font-size: 0.8rem; color: var(--muted); }


@media (max-width: 860px) {
  .une, .page-article, .commune-recherche .cadre, .deux { grid-template-columns: minmax(0, 1fr); }
  .fil { border-left: 0; padding-left: 0; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubriques-grille { grid-template-columns: minmax(0, 1fr); }
  .confrontation { grid-template-columns: minmax(0, 1fr); }
  .confrontation > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) { .cartes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { a h2, a h3 { transition: color 0.15s; } }

/* --- Ajouts du site (hors maquette) --- */
body { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fil-ariane { font-family: var(--label); font-size: var(--step--1); color: var(--muted); padding-block: 14px 0; }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil-ariane li + li::before { content: "›"; margin-right: 6px; }
.fil-ariane a { text-decoration: underline; text-underline-offset: 2px; }
.section-donnees { display: grid; gap: 14px; padding-block: 8px 12px; }
.section-donnees > h2 { font-weight: 700; font-size: var(--step-2); border-top: 2px solid var(--ink); padding-top: 10px; }
.sous-section { font-family: var(--label); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 8px 0 0; }
.badge-officiel { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--label); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chart); border: 1px solid currentColor; padding: 2px 6px; border-radius: 2px; }
.vrai { background: var(--wash); border-left: 3px solid var(--chart); padding: 12px 16px; }
.vrai strong { font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chart); }
.vrai p { margin: 6px 0 0; }
.vrai a { text-decoration: underline; text-underline-offset: 3px; }
.definitions dt { font-weight: 700; color: var(--ink); margin-top: 12px; }
.definitions dd { margin: 4px 0 0; }
.tableau tfoot th, .tableau tfoot td { font-weight: 700; border-bottom: 0; }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-family: var(--label); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tableau th { font-weight: 600; color: var(--ink); }
.tableau td.nombre, .tableau th.nombre { text-align: right; }
.tableau .tendance-baisse { color: var(--chart); }
.tableau .tendance-hausse { color: var(--live); }
.texte { max-width: 70ch; }
.texte p { margin: 0 0 1em; }
.texte h2 { font-size: var(--step-2); margin: 1.4em 0 0.5em; }
.liste-communes { columns: 3 16rem; column-gap: 28px; font-family: var(--label); font-size: 0.92rem; padding: 0; list-style: none; margin: 0; }
.liste-communes li { break-inside: avoid; padding-block: 3px; }
.liste-communes a:hover { text-decoration: underline; }
.barre svg { display: block; width: 100%; height: 10px; }
.barre .fond { fill: var(--chart-soft); }
.barre .plein { fill: var(--chart); }
.resultats { list-style: none; margin: 8px 0 0; padding: 0; background: var(--paper); color: var(--text); font-family: var(--label); border-radius: 2px; }
.resultats li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.resultats li a:hover, .resultats li a:focus-visible { background: var(--wash); }
.vide { font-family: var(--label); color: var(--muted); font-size: 0.92rem; }
.bientot { background: var(--wash); padding: 18px 20px; font-family: var(--label); color: var(--muted); }

/* --- Articles et rubriques (couche d'actualite) --- */
.sr:focus { position: static; width: auto; height: auto; clip: auto; display: inline-block; margin: 8px 16px; padding: 6px 10px; background: var(--paper); color: var(--ink); outline: 2px solid var(--chart); }
nav.rubriques a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); }
@media (max-width: 860px) { nav.rubriques { display: none; } }
.visuel-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; display: block; }
.photo { margin: 0 0 22px; display: grid; gap: 6px; }
.photo img { width: 100%; height: auto; border-radius: 2px; display: block; background: var(--bandeau); }
.photo figcaption { font-family: var(--label); font-size: 0.82rem; color: var(--muted); }
.photo figcaption a { text-decoration: underline; text-underline-offset: 2px; }
a.carte:hover .valeur { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rubrique h2 a:hover { text-decoration: underline; }
.liste-rubrique { padding-block: 24px 40px; }
.liste-rubrique .bloc-titre h1 { font-size: var(--step-3); font-weight: 700; }
.liste-rubrique .bloc-titre .etiquette { flex-basis: 100%; }
.sous-rubriques ul { list-style: none; margin: -6px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sous-rubriques a { display: block; font-family: var(--label); font-size: var(--step--1); font-weight: 500; border: 1px solid var(--rule); padding: 5px 12px; border-radius: 999px; color: var(--ink); }
.sous-rubriques a:hover { border-color: var(--ink); }
.sous-rubriques a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-article .etiquette a { color: inherit; }
.page-article .etiquette a:hover { text-decoration: underline; text-underline-offset: 3px; }
.liste-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.liste-articles article { display: grid; gap: 6px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.liste-articles h2 { font-size: var(--step-1); line-height: 1.25; }
.liste-articles p { margin: 0; color: var(--text); }
.pagination { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 22px; font-family: var(--label); }
.pagination ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pagination li a { display: inline-block; min-width: 2.2em; padding: 4px 8px; text-align: center; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); }
.pagination a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination > a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.chiffres-article { margin: 0; display: grid; gap: 8px; font-family: var(--label); }
.chiffres-article div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.chiffres-article dt a { text-decoration: underline; text-underline-offset: 2px; }
.chiffres-article dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.chiffres-article dd .meta { display: block; font-weight: 400; }
.mises-a-jour { border-left: 3px solid var(--chart); padding: 4px 0 4px 14px; margin: 18px 0; font-family: var(--label); font-size: 0.92rem; }
.mises-a-jour ul { margin: 6px 0 0; padding-left: 18px; }

/* --- Cartes (site/cartes.py) : rampe sequentielle validee (--ordinal) en clair et en sombre, zero a part (k0),
   valeur absente hachuree (#k-hachures, base.html). Indicateur a (par defaut), puis b a i choisis par les boutons. --- */
:root { --k0: #d6e5f8; --k1: #86b6ef; --k2: #5598e7; --k3: #2a78d6; --k4: #1c5cab; --k5: #0d366b; --k-na: #eef0f3; --k-na-trait: #b8bfcb; --qpv: #c2571a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k0: #122138; --k1: #184f95; --k2: #256abf; --k3: #3987e5; --k4: #6da7ec; --k5: #b7d3f6; --k-na: #182133; --k-na-trait: #3b475e; --qpv: #f0a35e; } }
:root[data-theme="dark"] { --k0: #122138; --k1: #184f95; --k2: #256abf; --k3: #3987e5; --k4: #6da7ec; --k5: #b7d3f6; --k-na: #182133; --k-na-trait: #3b475e; --qpv: #f0a35e; }
.k-motifs { position: absolute; width: 0; height: 0; overflow: hidden; }
.k-hachure-fond { fill: var(--k-na); }
.k-hachure { stroke: var(--k-na-trait); stroke-width: 2; }
.k-carte { width: 100%; height: auto; max-height: min(80vh, 760px); display: block; }
.k-carte path { fill: url(#k-hachures); stroke: var(--paper); stroke-width: 0.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.k-carte a:hover path, .k-carte g:hover path { opacity: 0.72; }
.k-carte .k-actif-halo { fill: none; stroke: var(--paper); stroke-width: 5; }
.k-carte .k-actif { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.k-cartouche { font-family: var(--label); font-size: 17px; fill: var(--muted); }
.k-legende { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--label); font-size: 0.82rem; color: var(--text); }
.k-legende li { display: flex; align-items: center; gap: 6px; }
.k-cle { display: inline-block; width: 14px; height: 10px; border-radius: 1px; }
.k-cle.k0 { background: var(--k0); } .k-cle.k1 { background: var(--k1); } .k-cle.k2 { background: var(--k2); }
.k-cle.k3 { background: var(--k3); } .k-cle.k4 { background: var(--k4); } .k-cle.k5 { background: var(--k5); }
.k-cle.kna { background: repeating-linear-gradient(45deg, var(--k-na) 0 3px, var(--k-na-trait) 3px 4.5px); }
.carte-svg .k-indicateur { display: none; gap: 2px; }
.carte-svg .k-indicateur[data-i="a"] { display: grid; }
.carte-svg:has(.k-choix input:checked:not([value="a"])) .k-indicateur[data-i="a"] { display: none; }
.carte-svg .g-donnees td { text-align: right; }
.k-choix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.k-choix label { font-family: var(--label); font-size: 0.85rem; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; color: var(--ink); background: var(--paper); }
.k-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.k-choix label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.k-choix label:has(input:focus-visible) { outline: 2px solid var(--chart); outline-offset: 2px; }
.k-carte .a0 { fill: var(--k0); } .k-carte .a1 { fill: var(--k1); } .k-carte .a2 { fill: var(--k2); } .k-carte .a3 { fill: var(--k3); } .k-carte .a4 { fill: var(--k4); } .k-carte .a5 { fill: var(--k5); } .k-carte .ana { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="b"]:checked) .k-indicateur[data-i="b"] { display: grid; }
.carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .b5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="b"]:checked) .k-carte .bna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="c"]:checked) .k-indicateur[data-i="c"] { display: grid; }
.carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .c5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="c"]:checked) .k-carte .cna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="d"]:checked) .k-indicateur[data-i="d"] { display: grid; }
.carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .d5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="d"]:checked) .k-carte .dna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="e"]:checked) .k-indicateur[data-i="e"] { display: grid; }
.carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .e5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="e"]:checked) .k-carte .ena { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="f"]:checked) .k-indicateur[data-i="f"] { display: grid; }
.carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .f5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="f"]:checked) .k-carte .fna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="g"]:checked) .k-indicateur[data-i="g"] { display: grid; }
.carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .g5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="g"]:checked) .k-carte .gna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="h"]:checked) .k-indicateur[data-i="h"] { display: grid; }
.carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .h5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="h"]:checked) .k-carte .hna { fill: url(#k-hachures); }
.carte-svg:has(.k-choix [value="i"]:checked) .k-indicateur[data-i="i"] { display: grid; }
.carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i0 { fill: var(--k0); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i1 { fill: var(--k1); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i2 { fill: var(--k2); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i3 { fill: var(--k3); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i4 { fill: var(--k4); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .i5 { fill: var(--k5); } .carte-svg:has(.k-choix [value="i"]:checked) .k-carte .ina { fill: url(#k-hachures); }
/* Situation (petite carte) et carte OpenStreetMap des fiches (carte.js) */
.k-situation { width: 100%; height: auto; display: block; }
.k-situation .k-fond { fill: var(--wash); stroke: var(--k-na-trait); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.k-situation .k-situe { fill: var(--chart); stroke: var(--chart); stroke-width: 1; vector-effect: non-scaling-stroke; }
.k-situation .k-repere { fill: none; stroke: var(--chart); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fiche header.avec-situation { grid-template-columns: minmax(0, 1fr) 150px; column-gap: 24px; align-items: center; }
.fiche header.avec-situation > :not(.situation) { grid-column: 1; }
.fiche header .situation { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 860px) { .fiche header.avec-situation { grid-template-columns: minmax(0, 1fr) 96px; } }
.carte-osm { display: grid; gap: 8px; margin: 0; }
.carte-zone { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 480px; background: var(--wash); border: 1px solid var(--rule); overflow: hidden; }
@media (min-width: 861px) { .carte-zone { aspect-ratio: 16 / 9; } }
.carte-zone .carte-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-zone::before { content: "Chargement de la carte…"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--label); font-size: 0.9rem; color: var(--muted); }
.carte-active .carte-zone::before { content: none; }
.carte-osm.carte-indisponible .carte-zone::before { content: "Carte indisponible sur ce navigateur."; }
.carte-bouton { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--label); font-size: 0.9rem; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink); cursor: pointer; }
.carte-bulle { position: absolute; z-index: 3; pointer-events: none; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); padding: 4px 8px; font-family: var(--label); font-size: 0.82rem; color: var(--ink); }
.carte-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--label); font-size: 0.85rem; color: var(--text); }
.carte-legende li { display: flex; align-items: center; gap: 7px; }
.carte-legende .trait-commune { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--chart); }
.carte-legende .aplat-qpv { display: inline-block; width: 14px; height: 10px; border: 2px solid var(--qpv); background: color-mix(in srgb, var(--qpv) 22%, transparent); }
.carte-osm .maplibregl-ctrl-attrib, .carte-osm .maplibregl-ctrl-group button { font-family: var(--label); }
/* Grandes courbes sur petit ecran : la viewBox (640 de large) est reduite de moitie ; le texte grossit d'autant. */
@media (max-width: 600px) {
  .graphique:not(.petit) .g-axe { font-size: 19px; }
  .graphique:not(.petit) .g-fin { font-size: 21px; }
}
/* Quiz (site/quiz.py, quiz.js) */
.quiz-score { border-top: 2px solid var(--ink); position: sticky; top: 0; z-index: 3; background: var(--paper); }
.quiz-sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-sommaire a { display: inline-block; font-family: var(--label); font-size: 0.85rem; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); }
.quiz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: question; }
.quiz-question { border: 1px solid var(--rule); border-left: 3px solid var(--chart); padding: 14px 16px; display: grid; gap: 10px; background: var(--paper); }
.quiz-question h3 { font-size: var(--step-1); line-height: 1.3; margin: 0; }
.quiz-choix { display: flex; gap: 10px; }
.quiz-choix button { font-family: var(--label); font-weight: 600; font-size: 1rem; min-width: 5.5rem; padding: 9px 18px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink); cursor: pointer; }
.quiz-choix button:hover:not(:disabled), .quiz-choix button:focus-visible { background: var(--wash); }
.quiz-choix button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.quiz-choix button:disabled { cursor: default; }
.quiz-actif .quiz-reponse > summary { display: none; }
.quiz-reponse summary { font-family: var(--label); font-size: 0.9rem; color: var(--chart); cursor: pointer; }
.quiz-reponse p { margin: 8px 0 0; }
.quiz-resultat:empty { display: none; }
.quiz-resultat { font-family: var(--label); font-weight: 600; }
.quiz-juste { border-left-color: var(--g-acc); }
.quiz-juste .quiz-resultat { color: var(--chart); }
.quiz-faux .quiz-resultat { color: var(--muted); }
.quiz-source { font-family: var(--label); font-size: 0.82rem; color: var(--muted); }
.quiz-source a { text-decoration: underline; text-underline-offset: 2px; }
.suite-chiffres { font-family: var(--label); margin: 14px 0 0; }
.suite-chiffres a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.quiz-presidentielle { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.quiz-presidentielle h3 { font-size: 1.02rem; }
.quiz-presidentielle .quiz-reponse p { font-size: 0.92rem; }
/* Videos YouTube des articles (video.js) : carte maison tant que le lecteur n'a pas clique */
.video { margin: 18px 0; display: grid; gap: 8px; }
.video-zone { position: relative; aspect-ratio: 16 / 9; background: var(--bandeau); border-radius: 2px; overflow: hidden; }
.video-zone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lancer { position: absolute; inset: 0; width: 100%; display: grid; align-content: end; justify-items: start; gap: 6px; padding: 18px 20px; border: 0; background: transparent; color: var(--sur-bandeau); text-align: left; cursor: pointer; font: inherit; }
.video-lancer:focus-visible { outline: 3px solid var(--bandeau-doux); outline-offset: -6px; }
.video-lecture { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 2px solid var(--sur-bandeau); }
.video-lecture::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--sur-bandeau); }
.video-lancer:hover .video-lecture { background: rgba(255, 255, 255, 0.24); }
.video-titre { font-family: var(--serif); font-weight: 700; font-size: var(--step-1); line-height: 1.25; max-width: 44ch; }
.video-chaine { font-family: var(--label); font-size: 0.85rem; color: var(--bandeau-doux); }
.video figcaption { font-family: var(--label); font-size: 0.82rem; color: var(--muted); }
.video figcaption a { text-decoration: underline; text-underline-offset: 2px; }