/* =====================================================================
   IBISCUS — feuille de style
   Deux couleurs, deux dossiers. Le vert tendre porte le front social,
   le lilas porte le front démocratique. Le dégradé des deux signale
   la convergence. Rien de décoratif : la couleur est une information.
   ===================================================================== */

:root {
  /* Encres */
  --encre:      #0A0E0D;
  --encre-fond: #070A09;
  --ardoise:    #111815;
  --ardoise-2:  #161F1B;
  --brume:      #1E2A25;
  --trait:      rgba(159, 230, 176, 0.14);
  --trait-fort: rgba(159, 230, 176, 0.28);

  /* Accents */
  --tilleul:      #9FE6B0;
  --tilleul-vif:  #B9F2C7;
  --tilleul-sourd:#5E9C72;
  --glycine:      #C3ADF7;
  --glycine-vif:  #D8C9FF;
  --glycine-sourd:#8874C0;
  --ambre:        #E8C170;
  --brique:       #E08C7C;

  /* Textes */
  --craie:  #E7EFE9;
  --cendre: #93A79C;
  --cendre-pale: #6E8177;

  /* Rôles dynamiques (surchargés par [data-front]) */
  --accent:       var(--tilleul);
  --accent-vif:   var(--tilleul-vif);
  --accent-sourd: var(--tilleul-sourd);
  --accent-2:     var(--glycine);

  /* Typographie */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --pas: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  --mesure: 66ch;
  --rayon: 3px;
  --coin: 14px;

  --transition: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-front='stop-arizona'] {
  --accent: var(--tilleul); --accent-vif: var(--tilleul-vif);
  --accent-sourd: var(--tilleul-sourd); --accent-2: var(--tilleul);
}
html[data-front='democratiezaak'] {
  --accent: var(--glycine); --accent-vif: var(--glycine-vif);
  --accent-sourd: var(--glycine-sourd); --accent-2: var(--glycine);
  --trait: rgba(195, 173, 247, 0.15);
  --trait-fort: rgba(195, 173, 247, 0.3);
}

/* Mode clair : même grammaire, encres inversées. */
html.theme-clair {
  --encre:      #F3F6F1;
  --encre-fond: #FBFCFA;
  --ardoise:    #FFFFFF;
  --ardoise-2:  #EFF3ED;
  --brume:      #E1E8DF;
  --trait:      rgba(24, 54, 38, 0.14);
  --trait-fort: rgba(24, 54, 38, 0.3);
  --tilleul:      #1F7A45;
  --tilleul-vif:  #146034;
  --tilleul-sourd:#4E9C6C;
  --glycine:      #5B44A8;
  --glycine-vif:  #452F8C;
  --glycine-sourd:#8B79C4;
  --ambre:        #9A6B12;
  --brique:       #A8402E;
  --craie:  #101A14;
  --cendre: #4C5C53;
  --cendre-pale: #6B7A71;
}

/* ============================ Base ============================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(159, 230, 176, 0.07), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(195, 173, 247, 0.08), transparent 60%),
    var(--encre);
  color: var(--craie);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  font-optical-sizing: auto;
  line-height: 1.72;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--accent); text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); }
a:hover { color: var(--accent-vif); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
hr.rule { border: 0; border-top: 1px solid var(--trait); margin: 2.2rem 0; }
blockquote { margin: 1.4em 0; padding-left: 1.2em; border-left: 2px solid var(--accent-sourd); color: var(--craie); font-style: italic; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--craie); }

.saut {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--accent); color: var(--encre);
  padding: 0.7rem 1.2rem; font-family: var(--display); font-weight: 600;
}
.saut:focus { transform: translateY(0); }

.num { font-family: var(--mono); font-size: 0.94em; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sigle { font-family: var(--display); font-weight: 600; font-size: 0.88em; letter-spacing: 0.06em; }
.shout { font-family: var(--display); font-weight: 600; font-size: 0.9em; letter-spacing: 0.055em; color: var(--accent-vif); }
.emo { opacity: 0.62; font-size: 0.88em; }

/* ============================ Cadres ============================ */

.enveloppe { width: min(1200px, 100% - 2.4rem); margin-inline: auto; }
.colonne { width: min(74ch, 100% - 2.4rem); margin-inline: auto; }
main { display: block; padding-bottom: 5rem; }

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--trait); }

.oeil {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-sourd);
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1rem;
}
.oeil::after { content: ''; flex: 1; height: 1px; background: var(--trait); }

/* ============================ En-tête ============================ */

.entete {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px) saturate(1.2);
  background: color-mix(in oklab, var(--encre) 86%, transparent);
  border-bottom: 1px solid var(--trait);
}
.entete__inner {
  width: min(1200px, 100% - 2.4rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 62px;
}
.marque { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--craie); }
.marque__glyphe { display: grid; place-items: center; }
.marque__mot { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; }

.nav { margin-left: auto; }
.nav__liste { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__liste a {
  display: block; padding: 0.42rem 0.66rem; border-radius: 999px;
  font-family: var(--display); font-size: 0.84rem; font-weight: 500;
  color: var(--cendre); text-decoration: none; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav__liste a:hover { color: var(--craie); background: var(--ardoise-2); }
.nav__liste a[aria-current='page'] { color: var(--encre); background: var(--accent); }
.nav__bouton { display: none; }

.theme {
  border: 1px solid var(--trait); background: transparent; color: var(--cendre);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; border-radius: 999px; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.theme:hover { color: var(--craie); border-color: var(--trait-fort); }

.progression { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progression__barre {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--tilleul), var(--glycine));
  transition: width 90ms linear;
}

.ariane { width: min(1200px, 100% - 2.4rem); margin: 1.1rem auto 0; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--cendre-pale); }
.ariane li + li::before { content: '/'; margin-right: 0.45rem; color: var(--trait-fort); }
.ariane a { color: var(--cendre); text-decoration: none; }
.ariane a:hover { color: var(--accent); }

/* ============================ Ouverture ============================ */

.ouverture { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.ouverture__grille {
  width: min(1200px, 100% - 2.4rem); margin-inline: auto;
  display: grid; gap: clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) { .ouverture__grille { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; } }

.titre-geant {
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 1.1rem;
}
.titre-geant em { font-style: normal; background: linear-gradient(96deg, var(--tilleul), var(--glycine)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.chapo { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem); color: var(--craie); max-width: 46ch; }
.chapo--sourd { color: var(--cendre); }

.duo { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.bouton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 600; font-size: 0.92rem;
  padding: 0.72rem 1.15rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--trait-fort); color: var(--craie);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent-vif); }
.bouton--plein { background: linear-gradient(96deg, var(--tilleul), var(--glycine)); color: #08110C; border-color: transparent; }
.bouton--plein:hover { color: #08110C; filter: brightness(1.08); }
html.theme-clair .bouton--plein { color: #FBFCFA; }

/* La tresse : signature de la page d'accueil */
.tresse { width: 100%; height: auto; overflow: visible; }
.tresse__grille line { stroke: var(--trait); stroke-width: 1; }
.tresse__fil { fill: none; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 12px currentColor); }
.tresse__fil--sa { stroke: var(--tilleul); color: color-mix(in oklab, var(--tilleul) 34%, transparent); }
.tresse__fil--dz { stroke: var(--glycine); color: color-mix(in oklab, var(--glycine) 34%, transparent); }
.tresse__halo { fill: url(#grad-conv); opacity: 0.13; }
.tresse__coeur { fill: var(--craie); }
.tresse__date { font-family: var(--mono); font-size: 15px; fill: var(--craie); text-anchor: middle; letter-spacing: 0.06em; }
.tresse__label { font-family: var(--display); font-size: 14px; font-weight: 600; fill: var(--cendre); text-anchor: middle; letter-spacing: 0.03em; }
.tresse__bout { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.tresse__bout--sa { fill: var(--tilleul); }
.tresse__bout--dz { fill: var(--glycine); }

@media (prefers-reduced-motion: no-preference) {
  .tresse__fil { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: tracer 2.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  .tresse__fil--dz { animation-delay: 180ms; }
  .tresse__noeud { opacity: 0; animation: parution 700ms ease-out 1.5s forwards; }
  @keyframes tracer { to { stroke-dashoffset: 0; } }
  @keyframes parution { to { opacity: 1; } }
}

/* ============================ Fiches chiffrées ============================ */

.fiches { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--coin); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fiche { background: var(--ardoise); padding: 1.5rem 1.4rem 1.3rem; position: relative; transition: background var(--transition); }
.fiche:hover { background: var(--ardoise-2); }
.fiche::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--tilleul); opacity: 0.85; }
.fiche--democratiezaak::before { background: var(--glycine); }
.fiche__valeur { display: flex; align-items: baseline; gap: 0.1rem; margin: 0 0 0.6rem; }
.fiche__nombre { font-family: var(--mono); font-size: clamp(1.9rem, 1.2rem + 2vw, 2.7rem); font-weight: 500; letter-spacing: -0.045em; color: var(--tilleul); line-height: 1; }
.fiche--democratiezaak .fiche__nombre { color: var(--glycine); }
.fiche__prefixe, .fiche__suffixe { font-family: var(--mono); font-size: 1.05rem; color: var(--cendre); }
.fiche__label { font-family: var(--display); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.fiche__detail { font-size: 0.92rem; color: var(--cendre); margin: 0 0 0.7rem; line-height: 1.6; }
.fiche__source { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--cendre-pale); margin: 0; text-transform: uppercase; }

/* ============================ Cartes de front ============================ */

.fronts { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.carte-front {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--trait); border-radius: var(--coin);
  background: linear-gradient(180deg, var(--ardoise), var(--encre));
  padding: 1.8rem 1.7rem 1.6rem; text-decoration: none; color: inherit;
  transition: border-color var(--transition), transform var(--transition);
  overflow: hidden;
}
.carte-front::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tilleul); }
.carte-front--democratiezaak::after { background: var(--glycine); }
.carte-front:hover { transform: translateY(-3px); border-color: var(--trait-fort); }
.carte-front__sigle { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--tilleul); text-transform: uppercase; }
.carte-front--democratiezaak .carte-front__sigle { color: var(--glycine); }
.carte-front__titre { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; margin: 0.7rem 0 0.15rem; }
.carte-front__sous { font-family: var(--display); font-weight: 400; color: var(--cendre); font-size: 1rem; margin: 0 0 1rem; }
.carte-front__lede { color: var(--craie); font-size: 0.98rem; }
.carte-front__meta { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--trait); display: grid; gap: 0.35rem; font-family: var(--mono); font-size: 0.74rem; color: var(--cendre); }
.carte-front__meta b { color: var(--craie); font-weight: 500; }
.carte-front__lien { margin-top: 1rem; font-family: var(--display); font-weight: 600; font-size: 0.92rem; color: var(--tilleul); }
.carte-front--democratiezaak .carte-front__lien { color: var(--glycine); }

/* ============================ Planches (graphiques) ============================ */

.planche {
  margin: 0 0 2.6rem; padding: 1.7rem 1.6rem 1.4rem;
  border: 1px solid var(--trait); border-radius: var(--coin);
  background: var(--ardoise);
}
.planche__tete { margin-bottom: 1.4rem; }
.planche__titre { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin: 0 0 0.5rem; }
.planche__lede { color: var(--cendre); font-size: 0.98rem; max-width: 62ch; margin: 0; }
.planche__vue { margin-block: 0.6rem 1rem; }
.planche__note { font-size: 0.85rem; color: var(--cendre-pale); font-style: italic; margin: 0 0 0.6rem; }
.planche__source { font-family: var(--mono); font-size: 0.7rem; color: var(--cendre-pale); letter-spacing: 0.02em; margin: 0; }
.planche__source-etiq { color: var(--accent-sourd); text-transform: uppercase; letter-spacing: 0.14em; margin-right: 0.4rem; }
.planche__data { margin-top: 1rem; border-top: 1px solid var(--trait); padding-top: 0.8rem; }
.planche__data summary { font-family: var(--display); font-size: 0.85rem; color: var(--cendre); cursor: pointer; }
.planche__data summary:hover { color: var(--accent); }

.data-table { width: 100%; border-collapse: collapse; margin-top: 0.9rem; font-size: 0.85rem; }
.data-table caption { text-align: left; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cendre-pale); padding-bottom: 0.6rem; }
.data-table th, .data-table td { text-align: left; padding: 0.5rem 0.7rem 0.5rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.data-table thead th { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cendre); font-weight: 400; }
.data-table tbody th { font-weight: 500; color: var(--craie); font-family: var(--display); }
.data-table td { font-family: var(--mono); color: var(--cendre); }

/* Graphiques SVG */
.chart { width: 100%; height: auto; overflow: visible; }
.grid line { stroke: var(--trait); stroke-width: 1; }
.grid__label { font-family: var(--mono); font-size: 11px; fill: var(--cendre-pale); text-anchor: end; }

.bar__label { font-family: var(--display); font-size: 14px; font-weight: 500; fill: var(--craie); }
.bar__note { font-family: var(--mono); font-size: 11px; fill: var(--cendre-pale); }
.bar__track { fill: var(--brume); }
.bar__fill { fill: var(--accent); transform-origin: left center; }
.bar__value { font-family: var(--mono); font-size: 12.5px; fill: var(--cendre); dominant-baseline: middle; }
.bar--promesse .bar__fill { fill: var(--cendre-pale); opacity: 0.55; }
.bar--prevision .bar__fill { fill: var(--ambre); opacity: 0.8; }
.bar--mesure .bar__fill { fill: var(--tilleul); }
.bar--mesure .bar__value { fill: var(--tilleul); }

.legende { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 1rem 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--cendre); }
.legende li { display: flex; align-items: center; gap: 0.45rem; }
.pastille { width: 12px; height: 6px; border-radius: 3px; display: inline-block; }
.pastille--promesse { background: var(--cendre-pale); opacity: 0.55; }
.pastille--prevision { background: var(--ambre); }
.pastille--mesure { background: var(--tilleul); }

.steps__area { fill: url(#grad-conv); fill: color-mix(in oklab, var(--tilleul) 12%, transparent); }
.steps__line { fill: none; stroke: var(--tilleul); stroke-width: 2.2; stroke-linejoin: round; }
.wave__dot { fill: var(--encre); stroke: var(--tilleul); stroke-width: 2.4; }
.wave__value { font-family: var(--mono); font-size: 12px; fill: var(--craie); text-anchor: middle; }
.wave__label { font-family: var(--display); font-size: 12.5px; font-weight: 600; fill: var(--craie); text-anchor: middle; }
.wave__sub { font-family: var(--mono); font-size: 11px; fill: var(--cendre-pale); text-anchor: middle; }
.wave__hit { fill: transparent; }
.wave:hover .wave__dot { r: 7; }
.wave--projected .wave__dot { stroke-dasharray: 3 2; }
.wave--projected .wave__label, .wave--projected .wave__sub { fill: var(--ambre); }

.line__area { fill: color-mix(in oklab, var(--glycine) 12%, transparent); }
.line__stroke { fill: none; stroke: var(--glycine); stroke-width: 2.4; stroke-linejoin: round; }
.pt__dot { fill: var(--encre); stroke: var(--glycine); stroke-width: 2.2; }
.pt__val { font-family: var(--mono); font-size: 12px; fill: var(--craie); text-anchor: middle; }
.pt__yr { font-family: var(--mono); font-size: 11px; fill: var(--cendre-pale); text-anchor: middle; }
.reperes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.4rem; font-size: 0.86rem; color: var(--cendre); }
.reperes__an { color: var(--glycine); margin-right: 0.5rem; }

/* Balance budgétaire */
.balance { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.balance__titre { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cendre); font-weight: 400; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--trait); }
.balance__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.balance__valeur { display: block; font-size: 1.3rem; color: var(--craie); }
.balance__valeur .num { font-size: 1.5rem; }
.balance__jauge { display: block; height: 5px; border-radius: 3px; margin: 0.45rem 0 0.4rem; width: var(--pct); min-width: 8px; background: var(--cendre-pale); transition: width 800ms var(--transition); }
.balance__col--cut .balance__jauge { background: var(--brique); }
.balance__col--cut .balance__valeur .num { color: var(--brique); }
.balance__col--dormant .balance__jauge { background: var(--ambre); }
.balance__col--dormant .balance__valeur .num { color: var(--ambre); }
.balance__col--alt .balance__jauge { background: var(--tilleul); }
.balance__col--alt .balance__valeur .num { color: var(--tilleul); }
.balance__label { font-size: 0.88rem; color: var(--cendre); line-height: 1.5; display: block; }

/* Test de proportionnalité */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; counter-reset: none; }
.etape { display: grid; gap: 1.1rem; grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
.etape__jauge svg { width: 84px; height: 84px; }
.etape__piste { fill: none; stroke: var(--brume); stroke-width: 6; }
.etape__arc {
  fill: none; stroke: var(--tilleul); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 42px 42px;
  stroke-dasharray: var(--dash); stroke-dashoffset: var(--off);
}
.etape--fragile .etape__arc { stroke: var(--ambre); }
.etape--rompu .etape__arc { stroke: var(--brique); }
.etape__num { font-family: var(--mono); font-size: 22px; fill: var(--craie); text-anchor: middle; }
.etape__q { font-size: 1.12rem; margin: 0 0 0.35rem; }
.etape__verdict { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--tilleul); margin: 0 0 0.6rem; }
.etape--fragile .etape__verdict { color: var(--ambre); }
.etape--rompu .etape__verdict { color: var(--brique); }
.etape__a { color: var(--cendre); font-size: 0.97rem; margin: 0; }
.etapes__legende { font-size: 0.85rem; color: var(--cendre-pale); font-style: italic; margin-top: 1.4rem; }

/* Ratios particratie */
.rente { padding: 1.2rem 1.3rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--ardoise-2); margin-bottom: 1.6rem; }
.rente__chiffre { font-family: var(--display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); font-weight: 600; margin: 0 0 0.3rem; color: var(--craie); }
.rente__chiffre .num { color: var(--glycine); font-size: 1.15em; }
.rente__legende { font-family: var(--mono); font-size: 0.72rem; color: var(--cendre-pale); margin: 0; letter-spacing: 0.04em; }
.ratios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.ratio__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.ratio__label { font-family: var(--display); font-weight: 500; font-size: 0.95rem; }
.ratio__valeur { color: var(--glycine); font-size: 1.05rem; }
.ratio__piste { height: 8px; border-radius: 4px; background: var(--brume); overflow: hidden; }
.ratio__fill { display: block; height: 100%; width: var(--pct); min-width: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--glycine-sourd), var(--glycine)); transition: width 900ms var(--transition); }
.ratio__note { font-family: var(--mono); font-size: 0.7rem; color: var(--cendre-pale); margin: 0.45rem 0 0; }

/* ============================ Matrice des acteurs ============================ */

.matrice { position: relative; }
.matrice__grille { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--coin); overflow: hidden; }
.matrice__row { display: grid; grid-template-columns: 120px repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--trait); }
.matrice__row--tete { position: sticky; top: 62px; z-index: 5; }
.matrice__col-tete, .matrice__row-tete {
  background: var(--ardoise-2); padding: 0.7rem 0.8rem;
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cendre);
}
.matrice__col-tete[data-pos='ally'] { color: var(--tilleul); }
.matrice__col-tete[data-pos='opponent'] { color: var(--brique); }
.matrice__col-tete[data-pos='target'] { color: var(--glycine); }
.matrice__col-tete[data-pos='neutral'] { color: var(--ambre); }
.matrice__row-tete { display: flex; flex-direction: column; gap: 0.2rem; text-transform: none; letter-spacing: 0.02em; font-size: 0.68rem; color: var(--cendre-pale); }
.matrice__row-tete .num { font-size: 1.1rem; color: var(--craie); letter-spacing: 0; }
.matrice__cell { background: var(--ardoise); padding: 0.6rem; min-height: 62px; }
.matrice__vide { color: var(--trait-fort); font-family: var(--mono); }
.jetons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.jeton {
  border: 1px solid var(--trait); border-left-width: 2px; border-radius: var(--rayon);
  padding: 0.4rem 0.55rem; cursor: default; background: var(--ardoise-2);
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.jeton__nom { display: block; font-family: var(--display); font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.jeton__role { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jeton--ally { border-left-color: var(--tilleul); }
.jeton--opponent { border-left-color: var(--brique); }
.jeton--target { border-left-color: var(--glycine); }
.jeton--neutral { border-left-color: var(--ambre); }
.jeton:hover, .jeton:focus { background: var(--brume); border-color: var(--trait-fort); }
.jeton[hidden] { display: none; }
.matrice__tip {
  position: sticky; bottom: 0.8rem; margin-top: 1rem;
  background: var(--ardoise-2); border: 1px solid var(--trait-fort); border-radius: var(--coin);
  padding: 0.9rem 1.1rem; min-height: 3.4rem; font-size: 0.92rem; color: var(--cendre);
}
.matrice__tip strong { color: var(--craie); font-family: var(--display); display: block; margin-bottom: 0.2rem; }
.matrice__tip:empty::after { content: 'Survolez ou sélectionnez un acteur pour lire son rôle.'; color: var(--cendre-pale); font-style: italic; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; align-items: center; }
.filtres__groupe { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.filtres__etiq { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cendre-pale); margin-right: 0.4rem; }
.filtre {
  font-family: var(--display); font-size: 0.82rem; font-weight: 500;
  padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--trait); background: transparent; color: var(--cendre);
  transition: all var(--transition);
}
.filtre:hover { color: var(--craie); border-color: var(--trait-fort); }
.filtre[aria-pressed='true'] { background: var(--accent); color: var(--encre); border-color: transparent; }
.filtre[data-front='democratiezaak'][aria-pressed='true'] { background: var(--glycine); }
.filtre[data-front='stop-arizona'][aria-pressed='true'] { background: var(--tilleul); }

/* ============================ Dossier (pages plaidoyer) ============================ */

.dossier { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 68rem) { .dossier { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }

.sommaire { position: sticky; top: 84px; font-size: 0.86rem; }
.sommaire__titre { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cendre-pale); margin-bottom: 0.9rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.sommaire a { display: block; padding: 0.28rem 0 0.28rem 0.8rem; border-left: 2px solid var(--trait); color: var(--cendre); text-decoration: none; line-height: 1.4; transition: all var(--transition); }
.sommaire a:hover, .sommaire a.actif { color: var(--craie); border-left-color: var(--accent); }
.sommaire__phase { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-sourd); margin: 1rem 0 0.35rem; }
@media (max-width: 67.99rem) { .sommaire { position: static; } }

.phase { padding-top: 2.4rem; }
.phase + .phase { margin-top: 3.4rem; border-top: 1px solid var(--trait); }
.phase__tete { display: flex; gap: 1.2rem; align-items: baseline; margin-bottom: 0.6rem; }
.phase__num { font-family: var(--mono); font-size: 0.9rem; color: var(--accent); letter-spacing: 0.16em; }
.phase__titre { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.phase__baseline { font-family: var(--display); color: var(--cendre); margin: 0 0 0.9rem; }
.phase__resume { color: var(--cendre); max-width: 60ch; }

.bloc { margin-top: 2.6rem; border: 1px solid var(--trait); border-radius: var(--coin); background: var(--ardoise); overflow: hidden; }
.bloc__tete { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--trait); background: var(--ardoise-2); display: flex; align-items: center; gap: 0.8rem; }
.bloc__titre { font-size: 1.16rem; margin: 0; }
.bloc__index { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-sourd); letter-spacing: 0.1em; }
.bloc__corps { padding: 0.4rem 1.4rem 1.2rem; }
.champ { padding-block: 1.3rem; }
.champ + .champ { border-top: 1px solid var(--trait); }
.champ__titre { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 0.9rem; font-weight: 400; }
.champ__corps { max-width: var(--mesure); }
.champ__corps > :last-child { margin-bottom: 0; }

.rich-h { font-family: var(--display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--craie); margin: 1.6rem 0 0.7rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--trait); }
.rich-h:first-child { margin-top: 0; }
.rich-ul, .rich-ol { margin: 0 0 1.1em; padding-left: 1.15em; display: grid; gap: 0.5em; }
.rich-ul { list-style: none; padding-left: 0; }
.rich-ul > li { position: relative; padding-left: 1.1em; }
.rich-ul > li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-sourd); }
.rich-ol { list-style: none; counter-reset: rich; padding-left: 0; }
.rich-ol > li { position: relative; padding-left: 2rem; counter-increment: rich; }
.rich-ol > li::before { content: counter(rich); position: absolute; left: 0; top: 0.05em; font-family: var(--mono); font-size: 0.8em; color: var(--accent); }
.rich-sub { list-style: none; margin: 0.5em 0 0; padding: 0; display: grid; gap: 0.35em; }
.rich-sub > li { position: relative; padding-left: 1.2em; font-size: 0.94em; color: var(--cendre); }
.rich-sub > li::before { content: '→'; position: absolute; left: 0; color: var(--accent-sourd); font-family: var(--mono); font-size: 0.85em; }

/* ============================ Calendrier ============================ */

.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--tilleul), var(--glycine)); opacity: 0.4; }
.jalon { position: relative; padding: 0 0 1.9rem 2.4rem; }
.jalon::before {
  content: ''; position: absolute; left: 0; top: 0.45rem; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid var(--tilleul); background: var(--encre);
}
.jalon[data-front='democratiezaak']::before { border-color: var(--glycine); }
.jalon[data-front='convergence']::before { border-color: var(--craie); background: linear-gradient(96deg, var(--tilleul), var(--glycine)); }
.jalon[data-futur='true']::before { border-style: dashed; }
.jalon__date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--tilleul); display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.jalon[data-front='democratiezaak'] .jalon__date { color: var(--glycine); }
.jalon[data-front='convergence'] .jalon__date { color: var(--craie); }
.jalon__etiq { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.12rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; opacity: 0.7; }
.jalon__texte { margin: 0.5rem 0 0; color: var(--craie); max-width: 62ch; }
.jalon--majeur .jalon__texte { font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }

.compte-a-rebours { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: 2.6rem; }
.rebours { border: 1px solid var(--trait); border-radius: var(--coin); padding: 1.3rem 1.3rem 1.1rem; background: var(--ardoise); position: relative; overflow: hidden; }
.rebours::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--tilleul); }
.rebours--democratiezaak::after { background: var(--glycine); }
.rebours--convergence::after { background: linear-gradient(90deg, var(--tilleul), var(--glycine)); }
.rebours__jours { font-family: var(--mono); font-size: 2.5rem; line-height: 1; letter-spacing: -0.05em; color: var(--craie); }
.rebours__unite { font-family: var(--mono); font-size: 0.8rem; color: var(--cendre); margin-left: 0.35rem; }
.rebours__quoi { font-family: var(--display); font-size: 0.95rem; font-weight: 600; margin: 0.7rem 0 0.25rem; }
.rebours__date { font-family: var(--mono); font-size: 0.72rem; color: var(--cendre-pale); margin: 0; }

/* ============================ Objectifs ============================ */

.objectifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.objectif { border: 1px solid var(--trait); border-radius: var(--coin); padding: 1.3rem 1.4rem; background: var(--ardoise); border-left-width: 3px; }
.objectif[data-front='stop-arizona'] { border-left-color: var(--tilleul); }
.objectif[data-front='democratiezaak'] { border-left-color: var(--glycine); }
.objectif__tete { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.7rem; }
.objectif__num { font-family: var(--mono); font-size: 0.72rem; color: var(--cendre-pale); }
.etat { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--cendre); }
.etat--doing { color: var(--ambre); border-color: color-mix(in oklab, var(--ambre) 45%, transparent); }
.etat--done { color: var(--tilleul); border-color: color-mix(in oklab, var(--tilleul) 45%, transparent); }
.objectif__texte { font-family: var(--display); font-size: 1.04rem; font-weight: 500; line-height: 1.45; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.objectif__grille { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.objectif__cle { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cendre-pale); display: block; margin-bottom: 0.3rem; }
.objectif__val { font-size: 0.92rem; color: var(--cendre); margin: 0; }

/* ============================ Sources ============================ */

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--coin); overflow: hidden; }
.source { background: var(--ardoise); transition: background var(--transition); }
.source:hover { background: var(--ardoise-2); }
.source a { display: grid; gap: 0.3rem; padding: 1rem 1.2rem; text-decoration: none; color: var(--craie); }
.source__titre { font-family: var(--display); font-size: 0.96rem; font-weight: 500; line-height: 1.4; }
.source__url { font-family: var(--mono); font-size: 0.7rem; color: var(--cendre-pale); word-break: break-all; }

/* ============================ Convergence ============================ */

.axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.axe { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 54rem) { .axe { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.4rem; } }
.axe__index { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--cendre-pale); }
.axe__titre { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); margin: 0.5rem 0 0; letter-spacing: -0.03em; }
.axe__chapo { font-family: var(--display); font-weight: 500; color: var(--accent); font-size: 1.02rem; margin: 0 0 0.8rem; }
.axe__texte { color: var(--craie); max-width: var(--mesure); margin: 0; }

.revendications { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--coin); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.revendication { background: var(--ardoise); padding: 1.3rem 1.3rem; display: grid; gap: 0.6rem; align-content: start; }
.revendication__front { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tilleul); }
.revendication[data-front='democratiezaak'] .revendication__front { color: var(--glycine); }
.revendication p { margin: 0; font-size: 0.96rem; color: var(--craie); }

/* ============================ Divers ============================ */

.grille-2 { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.encadre { border: 1px solid var(--trait); border-left: 3px solid var(--accent); border-radius: var(--rayon); padding: 1.2rem 1.4rem; background: var(--ardoise); }
.encadre__titre { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 0.6rem; }
.encadre p:last-child { margin-bottom: 0; }
.md-h { margin-top: 2rem; }
.avert { font-size: 0.9rem; color: var(--cendre); border-top: 1px solid var(--trait); padding-top: 1.2rem; margin-top: 2.4rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================ Réactions ============================ */

@media (max-width: 68rem) {
  .nav__bouton {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent; border: 1px solid var(--trait); color: var(--craie);
    font-family: var(--display); font-size: 0.84rem; padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
  }
  .nav__bouton-icone { width: 12px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .nav__liste {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 0.6rem 1.2rem 1.2rem;
    background: var(--encre); border-bottom: 1px solid var(--trait);
  }
  .nav__liste:not(.ouvert) { display: none; }
  .nav__liste a { padding: 0.6rem 0.4rem; font-size: 0.98rem; border-radius: var(--rayon); }
  .matrice__row { grid-template-columns: 78px repeat(4, minmax(0, 1fr)); }
  .matrice__col-tete { font-size: 0.6rem; letter-spacing: 0.06em; padding: 0.55rem 0.4rem; }
  .matrice__cell { padding: 0.35rem; }
  .jeton { padding: 0.3rem 0.4rem; }
  .jeton__nom { font-size: 0.72rem; }
  .etape { grid-template-columns: 60px minmax(0, 1fr); gap: 0.8rem; }
  .etape__jauge svg { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .entete, .pied, .progression, .saut, .filtres, .theme, .ariane { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .planche, .bloc, .fiche { break-inside: avoid; border-color: #bbb; background: #fff; }
  a { color: inherit; text-decoration: underline; }
  .planche__data[open] summary { display: none; }
}

/* Apparition au défilement (activée par le script) */
.js .apparait { opacity: 0; transform: translateY(14px); }
.js .apparait.vu { opacity: 1; transform: none; transition: opacity 640ms var(--transition), transform 640ms var(--transition); }
@media (prefers-reduced-motion: reduce) { .js .apparait { opacity: 1; transform: none; } }

/* ============================ Recherche ============================ */

.recherche {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in oklab, var(--encre-fond) 82%, transparent);
  backdrop-filter: blur(6px);
  display: none; padding: clamp(3rem, 12vh, 8rem) 1.2rem 2rem;
}
.recherche.ouvert { display: block; }
.recherche__boite {
  width: min(680px, 100%); margin-inline: auto;
  background: var(--ardoise); border: 1px solid var(--trait-fort);
  border-radius: var(--coin); padding: 1.1rem 1.2rem 0.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.recherche__champ {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--trait);
  color: var(--craie); font-family: var(--display); font-size: 1.15rem; font-weight: 500;
  padding: 0.5rem 0 0.8rem; outline: none;
}
.recherche__champ::placeholder { color: var(--cendre-pale); font-weight: 400; }
.recherche__aide { font-family: var(--mono); font-size: 0.66rem; color: var(--cendre-pale); letter-spacing: 0.06em; margin: 0.6rem 0 0; }
.recherche__resultats { list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.recherche__resultats a { display: grid; gap: 0.22rem; padding: 0.75rem 0.6rem; border-radius: var(--rayon); text-decoration: none; color: var(--craie); }
.recherche__resultats a:hover, .recherche__resultats a:focus { background: var(--ardoise-2); }
.recherche__section { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-sourd); }
.recherche__titre { font-family: var(--display); font-weight: 600; font-size: 0.98rem; }
.recherche__extrait { font-size: 0.86rem; color: var(--cendre); line-height: 1.5; }
.recherche__vide { padding: 1rem 0.6rem; color: var(--cendre); font-size: 0.9rem; }

/* ============================ Composition des cartographies ============================ */

.compo { display: grid; gap: 1.6rem; }
.compo__ligne { display: grid; gap: 0.6rem; }
.compo__nom { font-family: var(--display); font-size: 0.98rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.compo__total { color: var(--cendre); font-weight: 400; }
.compo__puce { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.compo__puce--stop-arizona { background: var(--tilleul); }
.compo__puce--democratiezaak { background: var(--glycine); }
.compo__barre { display: flex; height: 42px; border-radius: var(--rayon); overflow: hidden; background: var(--brume); }
.compo__seg { width: var(--pct); display: grid; place-items: center; transition: filter var(--transition), flex-basis var(--transition); position: relative; }
.compo__seg:hover { filter: brightness(1.25); }
.compo__n { font-family: var(--mono); font-size: 0.78rem; color: var(--encre); font-weight: 500; }
html.theme-clair .compo__n { color: #FBFCFA; }
.compo__seg--ally { background: var(--tilleul); }
.compo__seg--neutral { background: var(--ambre); }
.compo__seg--target { background: var(--glycine); }
.compo__seg--opponent { background: var(--brique); }
.legende--compo { margin-top: 0.4rem; }
.pastille--ally { background: var(--tilleul); }
.pastille--neutral { background: var(--ambre); }
.pastille--target { background: var(--glycine); }
.pastille--opponent { background: var(--brique); }

/* Tresse : mise en avant du fil survolé */
.tresse:hover .tresse__fil { opacity: 0.3; }
.tresse .tresse__fil:hover { opacity: 1; stroke-width: 3.4; }

/* ============================ Corrections d'échelle ============================ */

.oeil { font-weight: 400; text-wrap: nowrap; }
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-defilant .data-table { min-width: 34rem; }

@media (max-width: 48rem) {
  .entete__inner { gap: 0.45rem; min-height: 56px; }
  .marque__mot { font-size: 1rem; }
  .nav { margin-left: auto; }
  .nav__bouton-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav__bouton { padding: 0.45rem 0.7rem; }
  .theme { padding: 0.4rem 0.6rem; }
  .theme .theme__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme::before { content: '◐'; font-size: 0.95rem; line-height: 1; }
  .recherche__ouvre::before { content: '⌕'; font-size: 1.15rem; line-height: 1; }
  .oeil { text-wrap: wrap; }
}
@media (max-width: 48rem) { .matrice__row--tete { top: 56px; } }