/* broadsheet.css — Amenda design system.
   Source de verite unique pour tout le site (page d'accueil, tarifs,
   dossiers, amendements, deputes). Reference depuis chaque page via un
   chemin relatif ; les url() de polices ci-dessous restent relatives a
   CE fichier, donc valables quelle que soit la profondeur de la page
   qui l'inclut. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Source Serif 4", Georgia, serif;

  --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px;
  --space-6: 30px; --space-8: 40px;

  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 4vw, 42px); }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  a, button, .btn { transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease; }
}

/* ============================= LAYOUT SHELL ============================= */
.page { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }
.wide-scroll { overflow-x: auto; }

/* ============================= MASTHEAD ============================= */
.masthead { width: 100%; }
.masthead-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8) var(--space-2);
}
.masthead-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}
.masthead-nav { display: flex; align-items: center; gap: var(--space-6); justify-self: center; font-size: 15px; }
.masthead-nav a { color: var(--color-text); text-decoration: none; font-weight: 600; }
.masthead-nav a:hover, .masthead-nav a[aria-current="page"] { color: var(--color-accent); }
.masthead-dropdown { position: relative; display: flex; align-items: center; }
.masthead-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: var(--space-3) 0 var(--space-2);
  min-width: 240px;
  z-index: 30;
}
.masthead-dropdown:hover .masthead-dropdown-menu,
.masthead-dropdown:focus-within .masthead-dropdown-menu { display: block; }
.masthead-dropdown-menu a {
  display: block;
  padding: 7px var(--space-4);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text);
}
.masthead-dropdown-menu a:hover { background: var(--color-neutral-100); color: var(--color-accent); }
.masthead-account { font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; white-space: nowrap; flex: none; }
.masthead-actions { position: relative; justify-self: end; display: flex; align-items: center; gap: var(--space-4); }
.masthead-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text);
}
.masthead-search-toggle:hover { color: var(--color-accent); }
.masthead-search.input {
  width: 0; min-height: 36px; padding: 0; border: 1px solid transparent; opacity: 0;
  overflow: hidden; transform: translateX(16px);
  transition: width 0.22s ease, opacity 0.18s ease, transform 0.22s ease, padding 0.22s ease, border-color 0.18s ease;
  background: #fff;
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-text) 18%, transparent);
}
.masthead-search.open {
  width: 240px; padding: 6px 10px; border-color: var(--color-divider);
  opacity: 1; transform: translateX(0);
}
.masthead-search-panel {
  position: absolute; top: 100%; left: 0; margin-top: var(--space-2);
  width: 380px; max-width: calc(100vw - var(--space-8));
  max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: var(--space-3); z-index: 40;
}
.masthead-search-group + .masthead-search-group { margin-top: var(--space-3); }
.masthead-search-group-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-bottom: var(--space-2);
}
.masthead-search-panel .row-list { margin-bottom: 0; gap: var(--space-1); }
.masthead-search-panel .row-card { padding: var(--space-2) var(--space-3); }
.masthead-rule-1 { height: 3px; background: var(--color-accent-900); margin-bottom: 2px; }
.masthead-rule-2 { height: 1px; background: var(--color-text); margin-bottom: var(--space-8); }

@media (max-width: 720px) {
  .masthead-inner { grid-template-columns: 1fr; row-gap: var(--space-3); text-align: center; }
  .masthead-actions { justify-self: center; flex-wrap: wrap; }
  .masthead-search.open { width: 100%; }
}

/* ============================= BUTTONS ============================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 11px 22px; border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ============================= FORMS ============================= */
.input {
  min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 65%, transparent); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
select.input { padding-right: 28px; cursor: pointer; }

/* ============================= TAGS ============================= */
.tag {
  display: inline-flex; align-items: center; font-size: 12px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 1.5); white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); background: none; }

/* ============================= CARDS ============================= */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.25; }
.card-body { margin: 0; font-size: 15px; color: var(--color-text); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — row card (dossier / depute listing) — */
.row-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-accent-100); text-decoration: none; color: inherit;
}
.row-card:hover { background: var(--color-accent-200); }
.row-card-arrow { color: var(--color-accent-700); font-size: 20px; flex: none; }
/* Colonne, pas une ligne : un dossier peut avoir 2-3 domaines (cf.
   lib.rag_pipeline.classify_domain) - les empiler evite qu'un libelle
   long ("Agriculture · Environnement") ne grignote la place du titre a
   cote et ne finisse par le chevaucher. */
.row-card-label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; min-width: 112px; color: var(--color-text); flex: none; }
.row-card-title { font-size: 15px; font-weight: 400; }

/* Bloc gauche (label(s) + titre, peut retrecir/wrapper) et bloc droit
   (compteur d'amendements + fleche, jamais tronque) d'une .row-card :
   classes plutot que styles inline pour pouvoir les repiler proprement en
   dessous d'une certaine largeur (cf. media query plus bas). */
.row-card-main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.row-card-meta { display: flex; align-items: center; gap: var(--space-3); flex: none; white-space: nowrap; }
/* "0 amendement(s)" : signal utile (dossier suivi mais rien a lire pour
   l'instant), distingue du gris neutre des compteurs non nuls. */
.count-zero { color: var(--color-accent-2-500); font-weight: 600; }

@media (max-width: 600px) {
  /* En dessous de 600px, meme un titre court en majuscules + un libelle de
     domaine + le compteur "N amendement(s)" ne tiennent plus sur une seule
     ligne sans se chevaucher (le titre ne peut pas retrecir en dessous de
     son mot le plus long). On donne au titre sa propre ligne pleine
     largeur et on repousse le compteur/la fleche en dessous plutot que de
     les faire lutter pour le meme espace horizontal. */
  .row-card { flex-wrap: wrap; row-gap: var(--space-2); }
  .row-card-main { flex-basis: 100%; }
  .row-card-meta { margin-left: auto; }
}
.row-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }

.avatar-badge {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--color-accent-800);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px; flex: none;
}
.avatar-badge img { width: 100%; height: 100%; object-fit: cover; }
.avatar-badge-lg { width: 64px; height: 64px; font-size: 20px; background: var(--color-accent-100); }

/* ============================= TABLE ============================= */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ============================= SECTION HEADING (A/B/C/D) ============================= */
.lettered-section { display: flex; gap: var(--space-4); margin-bottom: var(--space-8); }
.lettered-section .letter {
  font-family: var(--font-heading); font-weight: 600; font-size: 34px;
  color: var(--color-accent-700); flex: none; width: 44px;
}
.lettered-section .body { flex: 1; min-width: 0; }
.lettered-section h3 { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }

/* ============================= CRITICITE ============================= */
.crit-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.crit-mineur   { background: var(--color-neutral-400); }
.crit-modere   { background: var(--color-neutral-700); }
.crit-notable  { background: var(--color-accent-600); }
.crit-majeur   { background: var(--color-accent-2-600); }
.crit-critique { background: var(--color-accent-2-900); }

.crit-legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 15px; color: var(--color-text); margin-bottom: var(--space-8); }
.crit-legend-label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.crit-legend-item { display: flex; align-items: center; gap: 6px; }
.crit-legend-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }

/* Carte de mise en avant du score de criticite sur la home (colonne de
   droite de la section "Le coeur d'Amenda") : fond teinte + score exemple +
   encart "En clair", regroupes dans une seule classe plutot qu'en styles
   inline pour pouvoir la recentrer proprement au repli mobile. */
.crit-highlight-card { background: var(--color-accent-2-100); border-radius: var(--radius-lg); padding: var(--space-6); }
.crit-highlight-score { background: none; padding: 0; text-align: left; }
.crit-highlight-score .score-row { justify-content: flex-start; }
.crit-highlight-score .crit-score-bars { justify-content: flex-start; margin-top: 10px; }
.crit-highlight-example { background: #ffffff; border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }

.crit-score-box { background: var(--color-accent-2-100); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); text-align: right; flex: none; }
.crit-score-box .kicker { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-800); font-weight: 700; margin-bottom: 8px; }
.crit-score-box .score-row { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; }
.crit-score-box .score-num { font-family: var(--font-heading); font-weight: 600; font-size: 40px; color: var(--color-accent-2-800); line-height: 1; }
.crit-score-bars { display: flex; gap: 5px; margin-top: 10px; justify-content: flex-end; }
.crit-score-bars span { width: 34px; height: 12px; display: inline-block; border-radius: 2px; background: #fff; }
.crit-score-bars span.filled { background: var(--color-accent-2-700); }

/* Teinte du crit-score-box par niveau reel (au lieu d'un accent-2 fixe) : */
.crit-score-box.crit-mineur { background: var(--color-neutral-100); }
.crit-score-box.crit-mineur .kicker,
.crit-score-box.crit-mineur .score-num { color: var(--color-neutral-800); }
.crit-score-box.crit-mineur .crit-score-bars span.filled { background: var(--color-neutral-400); }

.crit-score-box.crit-modere { background: var(--color-neutral-200); }
.crit-score-box.crit-modere .kicker,
.crit-score-box.crit-modere .score-num { color: var(--color-neutral-900); }
.crit-score-box.crit-modere .crit-score-bars span.filled { background: var(--color-neutral-700); }

.crit-score-box.crit-notable { background: var(--color-accent-100); }
.crit-score-box.crit-notable .kicker,
.crit-score-box.crit-notable .score-num { color: var(--color-accent-800); }
.crit-score-box.crit-notable .crit-score-bars span.filled { background: var(--color-accent-600); }

.crit-score-box.crit-majeur { background: var(--color-accent-2-100); }
.crit-score-box.crit-majeur .kicker,
.crit-score-box.crit-majeur .score-num { color: var(--color-accent-2-800); }
.crit-score-box.crit-majeur .crit-score-bars span.filled { background: var(--color-accent-2-600); }

.crit-score-box.crit-critique { background: var(--color-accent-2-200); }
.crit-score-box.crit-critique .kicker,
.crit-score-box.crit-critique .score-num { color: var(--color-accent-2-900); }
.crit-score-box.crit-critique .crit-score-bars span.filled { background: var(--color-accent-2-900); }

.amdt-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
  border-left: 6px solid var(--color-neutral-400);
  text-decoration: none; color: inherit;
}
.amdt-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.amdt-row .num { font-weight: 600; width: 64px; flex: none; }
.amdt-row .desc { flex: 1; font-size: 16px; min-width: 0; }

/* ============================= TEXTE OFFICIEL (source AN) ============================= */
.official-text { margin-bottom: var(--space-6); }
.official-text-heading { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; color: var(--color-accent-700); text-transform: uppercase; margin-bottom: var(--space-2); }
.official-text-subheading { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; color: var(--color-neutral-700); margin: var(--space-4) 0 var(--space-2); }
/* white-space:pre-line : dispositif_texte/expose_sommaire_texte contiennent
   des "\n\n" entre alineas (un par <p> source, cf. clean_html_field) -
   sans ca le HTML les collabore en un seul bloc illisible malgre leur
   presence dans le texte. */
.official-text p { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-line; }

/* Texte officiel / expose sommaire tronques a 3 lignes par defaut (peuvent
   etre tres longs) - "Lire la suite" (cf. template + JS) les deplafonne au
   clic. Meme comportement desktop et mobile (pas de media query ici). */
.clamp-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-text.clamp-text-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.clamp-toggle { background: none; border: none; padding: 0; margin-top: 6px; font: inherit; font-size: 14px; color: var(--color-accent); cursor: pointer; text-decoration: underline; }

/* ============================= EN CLAIR ============================= */
.en-clair-box {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-8);
}
.en-clair-box .kicker { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 8px; }
.en-clair-box p { margin: 0; font-style: italic; font-size: 16px; line-height: 1.5; }

/* ============================= META GRID ============================= */
.meta-grid { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 15px; margin-bottom: var(--space-6); color: var(--color-text); }
.meta-grid .label { font-weight: 700; color: var(--color-text); }
.author-btn {
  display: inline-flex; align-items: center; border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 2px 10px; font-size: 14px; font-family: var(--font-body); color: var(--color-text); background: var(--color-surface);
}
.coauteurs-toggle { background: none; border: none; padding: 0; font: inherit; font-size: 14px; color: var(--color-accent); cursor: pointer; text-decoration: underline; }
.coauteurs-list { display: none; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sibling-link { display: inline-flex; align-items: center; border: 1px solid var(--color-divider); border-radius: 999px; padding: 2px 10px; font-size: 14px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.sibling-link:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }

/* ============================= TAG GROUPS (B) ============================= */
.tag-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tag-group-label { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 8px; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================= AVANT/APRES (A) ============================= */
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ============================= DEBAT (D) ============================= */
.debate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.debate-heading { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 8px; }
.debate-heading.for { color: var(--color-accent-700); }
.debate-heading.against { color: var(--color-accent-2-700); }
.debate-grid ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }

/* ============================= FOOTER DISCLAIMER ============================= */
.disclaimer { font-size: 15px; font-style: italic; color: var(--color-text); margin-top: var(--space-6); }
.disclaimer .info-icon { color: var(--color-accent-700); font-style: normal; }

/* ============================= DOSSIER-ACCORDION (fiche depute) ============================= */
.depute-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.depute-hero-id { flex: none; }
.depute-vote-stats { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; font-size: 15px; margin-bottom: var(--space-8); }
.vote-stat { display: flex; align-items: center; gap: 6px; }
.vote-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vote-pour { background: var(--color-accent-600); }
.vote-contre { background: var(--color-accent-2-600); }
.vote-abstention { background: var(--color-neutral-500); }
.vote-present { background: var(--color-neutral-300); }

.section-header-row { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.section-header-count { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; color: var(--color-text); }

.dossier-block { margin-bottom: var(--space-6); }
.dossier-block-body { display: flex; flex-direction: column; gap: var(--space-4); }
.dossier-block-head {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap;
  width: 100%; background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
}
.dossier-block-theme { font-weight: 600; color: var(--color-text); font-size: 16px; flex: none; }
.dossier-block-title { font-weight: 600; font-size: 15px; }
.dossier-block-count { font-size: 15px; color: var(--color-text); margin-left: auto; }
.lecture-block { padding-left: var(--space-4); border-left: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.lecture-block-label {
  font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700);
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); text-align: left;
}
.lecture-sort-bar { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--color-text); margin: 2px 0 6px; }
.lecture-sort-bar button { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; }
.lecture-sort-bar button.active { color: var(--color-accent-700); font-weight: 600; }
.vote-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: inherit; }
.vote-row:last-child { border-bottom: none; }
.vote-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.vote-row .num { font-size: 16px; }

/* ============================= LANDING PAGE ============================= */
.hero-landing { max-width: 720px; margin: 0 auto; text-align: center; padding: var(--space-8) 0 var(--space-6); }
.hero-landing .eyebrow { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: var(--space-3); }
.hero-landing h1 { margin-bottom: var(--space-4); }
.hero-landing p.lede { font-size: 18px; opacity: 0.85; margin: 0 0 var(--space-6); }
.hero-cta-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Paragraphe cense se lire comme la suite d'un h2 juste au-dessus (ex: "Vous
   voulez X ? Ou Y ?"), plutot qu'un sous-texte secondaire discret. */
.heading-continuation { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; }

/* Phrase a mettre en avant au sein d'un paragraphe courant (pas un titre,
   juste plus visible que le texte autour). */
.callout-strong { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; color: var(--color-accent-800); }

/* Petite icone (emoji) au-dessus d'un titre de carte/feature. */
.feature-icon { display: block; font-size: 26px; margin-bottom: var(--space-2); }

.stat-strip { display: flex; justify-content: center; gap: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-top: var(--space-6); flex-wrap: wrap; }

/* Grille 2 colonnes generique (image+texte, graphique+texte...) utilisee sur
   la page d'accueil - un seul repli mobile a maintenir plutot qu'un par
   section (chacune avait son display:grid en dur, jamais responsive). */
.split-2col { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) {
  .split-2col { grid-template-columns: 1fr; }
}
.stat-item { text-align: center; }
.stat-num { font-family: var(--font-heading); font-weight: 600; font-size: 32px; color: var(--color-accent-700); }
.stat-label { font-size: 14px; color: var(--color-neutral-800); }

/* Ligne titre + badge ("En cours de construction"...) : titre a gauche,
   badge a droite sur desktop ; recentre uniquement en dessous de 520px
   (cf. media query), pas sur toutes les tailles d'ecran. */
.heading-badge-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }

/* Paragraphe cense rester aligne a gauche (sous un titre lui aussi a
   gauche, cf. .heading-badge-row) sur desktop - recentre uniquement en
   dessous de 520px comme le reste de la page sur mobile. */
.lede-left { text-align: left; }
@media (max-width: 520px) {
  .lede-left { text-align: center; }
}

.section-band { padding: 64px 0; }
.section-band.rule-top { border-top: 1px solid var(--color-divider); }
.section-band h2 { text-align: center; margin-bottom: var(--space-2); }
.section-band .band-lede { text-align: center; font-size: 16px; opacity: 0.8; max-width: 600px; margin: 0 auto var(--space-8); }

.feature-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.feature-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
/* .feature-grid-4 (jamais .feature-grid-3, qui reste aligne a gauche sur
   desktop - cf. media query 520px) est toujours centre, quelle que soit la
   largeur d'ecran : utilise pour "Une infinite d'usages" (home) et
   integralement sur la page "En savoir plus". */
.feature-grid-4 > div, .feature-grid-4 > .card { text-align: center; }
/* Separateurs entre les points de .feature-grid-4 (pas .feature-grid-3, qui
   n'a jamais ete signale confus) - trait vertical en 4 colonnes, horizontal
   des que la grille repasse en 1 colonne (cf. media queries plus bas), pour
   ne jamais laisser un item sans separateur visible au-dessus/a cote. */
.feature-grid-4 > *:not(:first-child) { border-left: 1px solid var(--color-divider); padding-left: var(--space-5); }
.feature-letter { font-family: var(--font-heading); font-weight: 600; font-size: 34px; color: var(--color-accent-700); margin-bottom: var(--space-2); }

.image-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--color-surface); border: 1px dashed var(--color-divider);
  border-radius: var(--radius-lg); color: var(--color-neutral-600);
  font-size: 13px; letter-spacing: 0.04em; min-height: 280px; width: 100%; height: 100%;
}

.demo-chart-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4); }
.demo-chart-card .chart-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-800); margin-bottom: var(--space-4); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--space-3); height: 120px; }
.chart-bars.dense { gap: 6px; height: 100px; }
.chart-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.chart-bar-col .bar { width: 100%; border-radius: 2px 2px 0 0; }
.chart-bar-col .bar-label { font-size: 12px; color: var(--color-neutral-800); }
.chart-bars.dense .bar { flex: 1; border-radius: 2px 2px 0 0; }

.page-rule { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-8) 0; }
.page-rule .line { flex: 1; height: 1px; background: var(--color-divider); }
.page-rule .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); }

/* ============================= PRICING ============================= */
.pricing-table-wrap { max-width: 820px; margin: 0 auto; }
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 820px; margin: 0 auto; }
.pricing-card { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; }
.pricing-card.featured { border: 2px solid var(--color-accent-700); }
.pricing-card .plan-name { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-800); margin-bottom: var(--space-2); }
.pricing-card.featured .plan-name { color: var(--color-accent-700); max-width: calc(100% - 110px); }
.pricing-card .plan-price { font-family: var(--font-heading); font-weight: 600; font-size: 32px; margin-bottom: var(--space-4); }
.pricing-card .plan-price .period { font-size: 15px; font-weight: 400; opacity: 0.7; }
.pricing-card ul { margin: 0 0 var(--space-6); padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.pricing-card ul li.excluded { color: var(--color-neutral-600); }
.pricing-card .recommended-tag { position: absolute; top: var(--space-4); right: var(--space-4); }
.pricing-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

/* Contenu reserve aux abonnes Amenda Pro : floute en permanence, message au
   survol. Le JS (amenda-auth.js) ajoute la classe "unlocked" sur ".premium-gate"
   quand le backend confirme l'acces (abonnement actif ou achat a la carte de
   cette ressource). Seul ".premium-content" (les donnees) est floute - les
   titres/labels ("Score de criticité", "Ce qui change...") vivent en dehors,
   directement dans ".premium-gate", et restent toujours visibles. */
.premium-gate { position: relative; }
.premium-content { position: relative; }
.premium-gate:not(.unlocked) .premium-content > * { filter: blur(6px); pointer-events: none; user-select: none; }
.premium-gate:not(.unlocked) .premium-content::after {
  content: "🔒 Réservé aux membres Amenda Pro";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: not-allowed;
  border-radius: var(--radius-md);
}
.premium-gate:not(.unlocked) .premium-content:hover::after { opacity: 1; }

@media (max-width: 780px) {
  .feature-grid-3, .feature-grid-4, .pricing-cards, .pricing-features, .tag-groups { grid-template-columns: 1fr 1fr; }
  /* Sections a 2 colonnes de la home qui passent en 1 colonne ici : on
     recentre leur contenu (sinon le texte reste colle a gauche sur un
     ecran etroit, alors que tout le reste de la home est centre). */
  .split-2col.crit-split,
  .split-2col.analytics-split { text-align: center; }
  .split-2col.crit-split .crit-legend-col { align-items: center; }
  .split-2col.crit-split .crit-highlight-score,
  .split-2col.crit-split .crit-highlight-score .score-row,
  .split-2col.crit-split .crit-highlight-score .crit-score-bars { justify-content: center; text-align: center; }
  .split-2col.analytics-split .demo-chart-card .chart-label { text-align: center; }
}
@media (max-width: 520px) {
  .feature-grid-3, .feature-grid-4, .pricing-cards, .pricing-features, .tag-groups, .debate-grid, .before-after-grid { grid-template-columns: 1fr; }
  .page { padding-left: var(--space-4); padding-right: var(--space-4); }
  .feature-grid-4 > *:not(:first-child) { border-left: none; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
  /* Centre uniquement une fois la grille repliee en 1 colonne (juste
     au-dessus) : sur desktop/tablette (2-4 colonnes), chaque bloc reste
     aligne a gauche comme concu a l'origine. */
  .feature-grid-3 > div { text-align: center; }
  .heading-badge-row { justify-content: center; }
}