/* 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;
  /* Dore/orange de la DA (logo "Analyse Simplement", couleur exacte
     confirmee). --color-brand-gold-700 est un assombrissement de la meme
     teinte specifiquement pour rester lisible sur le fond clair de la home
     (#c29a3a brut sur --color-bg ne tient qu'un contraste ~2.4:1, sous le
     minimum WCAG AA texte large de 3:1 - meme ratio RVB, juste fonce). */
  --color-brand-gold: #c29a3a;
  --color-brand-gold-700: #8c6f2a;
  --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; min-width: 320px; max-width: 380px; }
.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); }

.crit-score-box.crit-non-scorable { background: var(--color-neutral-200); }
.crit-score-box.crit-non-scorable .kicker,
.crit-score-box.crit-non-scorable .score-num { color: var(--color-neutral-700); }
.non-scorable-motif { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700); margin: 6px 0 0; text-align: left; }

/* Decomposition du score (axes A/C/E, cf. lib/criticite_scoring.py) :
   repliee par defaut sous le score global, dans le prolongement du
   crit-score-box (meme carte, pas un bloc separe) - "jamais de score seul"
   (doc Regles metiers §3.6). Degrade de couleur reserve a la criticite
   (meme regle) : les barres reprennent la teinte accent-2, jamais une
   couleur neutre qui laisserait croire a un indicateur independant. */
.crit-decomposition { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.axe-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.axe-label { font-size: 13px; font-weight: 600; color: var(--color-text); display: inline-flex; align-items: center; gap: 6px; }
.axe-value { font-size: 12px; color: var(--color-text); opacity: .65; font-variant-numeric: tabular-nums; white-space: nowrap; }
.why-toggle {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--color-divider);
  background: none; color: var(--color-text); font: 700 10px/1 var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.why-toggle:hover, .why-toggle.on { background: var(--color-accent-2-100); border-color: var(--color-accent-2-600); color: var(--color-accent-2-800); }
.axe-bar { display: flex; gap: 3px; margin-top: 4px; }
.axe-bar span { flex: 1; height: 6px; border-radius: 2px; background: #fff; }
.axe-bar span.filled { background: var(--color-accent-2-600); }
.axe-qualification { font-size: 13px; color: var(--color-text); margin: 4px 0 0; }
.why-text { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700); background: var(--color-neutral-100); border-radius: var(--radius-sm); padding: 8px 10px; margin: 4px 0 0; }
.crit-sens { font-size: 12.5px; color: var(--color-neutral-700); margin: 2px 0 0; }

.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) ============================= */
/* Encart distinct (fond + bordure gauche) : ce bloc reproduit le texte TEL
   QUE DEPOSE a l'Assemblee nationale (dispositif + expose sommaire), a ne
   jamais confondre visuellement avec le reste de la page (resume en clair,
   avant/apres, impact...) qui LUI est reformule/genere par Amenda - d'ou
   aussi la mention explicite ".official-text-badge" ci-dessous. */
.official-text {
  margin-bottom: var(--space-6);
  background: var(--color-neutral-100);
  border-left: 3px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.official-text-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent-800); background: var(--color-accent-200);
  padding: 3px 10px; border-radius: 999px; margin-bottom: var(--space-3);
}
.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. max-height (pas -webkit-line-clamp) : -webkit-line-clamp exige
   display:-webkit-box, qui casse le retour a la ligne normal des lors que
   le texte contient aussi des "\n" explicites (white-space:pre-line
   ci-dessus) - constate en test sur Chrome (texte tronque horizontalement
   au lieu de sauter simplement des lignes). 4.5em = 3 lignes * line-height
   1.5, calcule en em pour suivre le font-size de l'element. */
.clamp-text { max-height: 4.5em; overflow: hidden; }
.clamp-text.clamp-text-open { max-height: none; 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); }

/* Variante inversee de la section precedente (section "L'analyse
   politique" sur la home demo) : titre+texte a droite, badge a gauche sur
   desktop ; recentre uniquement en dessous de 520px comme le reste. */
.heading-right { text-align: right; }
.badge-row-reverse { justify-content: space-between; }
.para-right { text-align: right; }
@media (max-width: 520px) {
  .heading-right, .para-right { text-align: center; }
  .badge-row-reverse { justify-content: center; }
}

/* 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); }

/* 4 colonnes malgre le nom (A/B/C/D "Une lecture claire" sur la home,
   seul usage de cette classe) - reste volontairement distincte de
   .feature-grid-4 (pas de centrage force ni de separateurs verticaux). */
.feature-grid-3 { display: grid; grid-template-columns: repeat(4, 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; }
}

/* ============================= PAGE DE GARDE : RECHERCHE ============================= */
/* Epuree a la maniere d'une page d'accueil Google/Claude/ChatGPT : le
   contenu se centre dans l'espace restant sous le masthead plutot que de
   suivre le flux normal de haut en bas (70vh = approximation raisonnable
   sans avoir a calculer la hauteur exacte, deja variable, du masthead). */
.search-home { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.search-home-inner { width: 100%; max-width: 640px; text-align: center; }
.search-home-greeting { font-family: var(--font-heading); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; margin-bottom: var(--space-6); }

/* Bulle de recherche arrondie type Claude/ChatGPT/Gemini : champ sans
   bordure propre a lui, contour + ombre portes par le conteneur, qui
   reagit au focus (au lieu du champ texte carre + bouton rectangulaire
   "1970" d'origine). */
.search-home-form {
  display: flex; align-items: center; gap: var(--space-2);
  background: #fff; border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 6px 6px 6px 22px; margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.search-home-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.search-home-input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: inherit; font-size: 16px; padding: 12px 0; color: var(--color-text);
}
.search-home-input::placeholder { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.search-home-submit {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--color-accent); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color 0.14s ease;
}
.search-home-submit:hover { background: var(--color-accent-600); }
.search-home-submit:disabled { background: var(--color-neutral-300); color: var(--color-neutral-600); cursor: not-allowed; }

.search-home-status { font-size: 15px; color: var(--color-text); opacity: 0.75; margin: 0 0 var(--space-4); }
.search-home-results { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; margin-bottom: var(--space-6); }