/* nation2027.ia — charte Nation Advisors.
   TOUTES les couleurs passent par les jetons ci-dessous. Le mode nuit ne fait
   que les redéfinir : aucune règle plus bas ne connaît le thème courant. */
:root {
  --navy: #173049;
  --navy-light: #44586b;
  --ink: #0f2033;
  --accent: #7a2222;              /* bordeaux : accent sur ivoire */
  --accent-soft: rgba(122, 34, 34, .12);
  --accent-flash: rgba(122, 34, 34, .06);
  --cream: #fcfaf4;               /* ivoire : fond de la home */
  --white: #ffffff;
  --text: #173049;
  --text-secondary: #44586b;
  --border: rgba(23, 48, 73, .16);
  --border-soft: rgba(23, 48, 73, .08);
  --danger: #c04a3a;
  --success: #3a8a5f;
  --success-soft: #e5f1ea;
  --grise: rgba(23, 48, 73, .07);  /* bloc agent au repos */

  /* Blocs des sujets : ils gardent leur couleur propre dans les deux modes,
     et leur texte reste ivoire — d'où des jetons distincts du reste. */
  --bloc-1: #173049;
  --bloc-2: #7a2222;
  --bloc-3: #c56b6b;
  --bloc-texte: #fcfaf4;
  --bloc-eteint: #6f787f;         /* sujets écartés : hors recherche, ou non choisis */

  /* Bordures des candidats : une couleur par famille politique. */
  --cand-rouge: #b3261e;
  --cand-rose: #c56b6b;
  --cand-ciel: #5f93b8;
  --cand-nuit: #173049;
  --cand-violet: #6d4b8f;

  /* Le volet ne s'inverse PAS la nuit : il reste bleu nuit quand il s'active,
     sa barre de question reste claire, et son trait de descente reste visible.
     D'où des jetons à lui, que le mode nuit ne redéfinit pas. */
  --volet-fond: #173049;
  --volet-barre: #fcfaf4;
  --volet-texte: #0f2033;
  --volet-trait: rgba(252, 250, 244, .8);
  --volet-encre: #fcfaf4;        /* textes posés sur le volet */
  --volet-accent: #7a2222;       /* bouton d'envoi du volet */

  --placeholder: rgba(23, 48, 73, .58); /* texte d'invite des barres de requête */

  --serif: 'Bellefair', 'Times New Roman', Georgia, serif;
  --live-texte: #173049;        /* mesuré sur le modèle */
  --live-vert: #38761d;         /* évolution positive */
  --live-rouge: #ff0000;        /* évolution négative, et la pastille live */
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Mode nuit : bleu nuit de la charte, ivoire pour le texte. */
[data-theme="nuit"] {
  --navy: #fcfaf4;
  --navy-light: #d9dcdb;
  --accent: #c56b6b;              /* rose : accent sur bleu nuit */
  --accent-soft: rgba(197, 107, 107, .18);
  --accent-flash: rgba(197, 107, 107, .10);
  --cream: #173049;
  --white: rgba(252, 250, 244, .06);
  --text: #fcfaf4;
  --text-secondary: #a0a9af;
  --border: rgba(252, 250, 244, .18);
  --border-soft: rgba(252, 250, 244, .10);
  --grise: rgba(252, 250, 244, .07);
  /* Sur fond bleu nuit, le bloc bleu nuit se confondrait avec la page. */
  --bloc-1: #2a4f74;
  --bloc-eteint: #4a5560;
  /* Sur fond bleu nuit, la bordure bleu nuit se confondrait avec la page. */
  --cand-nuit: #6d90b4;
  --cand-violet: #9b78c0;
  /* Sur fond bleu nuit, l'invite doit rester franchement lisible. */
  --placeholder: rgba(252, 250, 244, .72);
  /* Le volet reste bleu — mais un bleu nuit sur une page bleu nuit ne se voit
     pas : même éclaircissement que les blocs de sujets, pour qu'il se détache. */
  --volet-fond: #2a4f74;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--cream); color: var(--text); font-family: var(--sans);
  font-variation-settings: 'opsz' 9; -webkit-text-size-adjust: 100%;
}
button, input { font: inherit; }
[hidden] { display: none !important; }

.wrap { max-width: 620px; margin: 0 auto; padding: 16px 16px 40px; }

/* ── En-tête de la home : logo et menu ─────────────────────────────────────── */
.entete { max-width: 620px; margin: 0 auto; padding: 18px 16px 4px; display: flex; align-items: center; gap: 12px; position: relative; }
/* Le logo fourni : en couleurs sur ivoire, en ivoire sur bleu nuit.
   Rapport 2000 × 562, soit 3,56 : 1. */
.logo {
  display: flex; align-items: center; width: 128px; height: 36px; flex: none; color: var(--text);
}
.logo svg { width: 100%; height: 100%; display: block; }
.logo, .retour-logo { --n27-logo-2027: var(--n27-bordeaux); }
[data-theme="nuit"] .logo, [data-theme="nuit"] .retour-logo { --n27-logo-2027: var(--n27-cream); }
.burger { margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; }
.burger-trait { display: block; height: 2px; background: var(--text); border-radius: 1px; }
.menu {
  position: absolute; top: 58px; right: 16px; z-index: 20; min-width: 190px; display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(15, 32, 51, .14);
}
.menu-item { text-align: left; background: none; border: 0; cursor: pointer; padding: 11px 12px; border-radius: 8px; font-size: 15px; color: var(--text); min-height: 44px; }
.menu-item:hover { background: var(--accent-flash); }

/* ── Home ──────────────────────────────────────────────────────────────────── */
#home { max-width: 620px; margin: 0 auto; padding: 8px 16px 156px; }
.accroche-retour { cursor: pointer; }
/* Une seule ligne, TOUJOURS. Les deux titres de l'accueil sont en DM Sans
   demi-gras, et aucun ne doit se couper en deux.

   LARGEURS MESURÉES le 07/10/2026 dans la page, à la police réelle, en DM Sans
   600, à 100 px :
     « A la une »                        385 px  → 3,85 fois la taille
     « Lancez une enquête »              980 px  → 9,81
     « Ce que les Français disent d'eux » 1 565 px → 15,65
   La colonne vaut min(620, fenêtre) moins 32 px de gouttières. Un libellé tient
   donc tant que taille × coefficient ≤ colonne, et la contrainte se resserre
   quand la fenêtre rétrécit : c'est à 280 px de large qu'on cale le vw.
     · .accroche porte « Lancez une enquête », le plus long des deux états :
       (280 − 32) / 9,81 = 25,3 px, soit 9,03vw — on retient 9vw.
     · .accroche-cand : (280 − 32) / 15,65 = 15,8 px, soit 5,66vw — on retient
       5,6vw. Son plafond de 24 px tient dans la colonne pleine (375 < 588). */
.accroche {
  font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 9vw, 30px);
  line-height: 1.12; letter-spacing: 0; color: var(--text); margin: 12px 0 18px;
  white-space: nowrap;
}
/* « Ce que les Français disent d'eux » — plus long que « A la une », donc plus
   petit, et posé au-dessus du menu des candidats. */
.accroche-cand { font-size: clamp(14px, 5.6vw, 24px); margin: 22px 0 14px; }

.barre { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 26px; padding: 5px 5px 5px 18px; }
.barre-champ { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--text); padding: 12px 0; outline: none; }
.barre-champ::placeholder { color: var(--placeholder); opacity: 1; }
.barre-envoi { width: 42px; height: 42px; border-radius: 21px; border: 0; background: var(--navy); color: var(--cream); font-size: 18px; font-weight: 700; cursor: pointer; flex: none; }
.barre-envoi:disabled { opacity: .45; cursor: default; }
.message { font-size: 13px; color: var(--text-secondary); font-style: italic; margin: 10px 2px 0; }

/* Tri des sujets : discret, entre la barre de recherche et le menu. */
.tri { display: flex; align-items: center; gap: 12px; margin: 14px 2px 0; }
.tri-icone { width: 15px; height: 11px; flex: none; fill: var(--text-secondary); }
.tri-mode {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--text-secondary);
}
.tri-mode[aria-pressed="true"] { color: var(--text); font-weight: 500; }

/* Menu défilant des sujets : blocs rectangulaires, défilement infini vers la
   gauche. Il s'aligne exactement sur la barre de recherche, à gauche comme à
   droite — aucun débord. Le voile de droite laisse deviner le bloc suivant. */
.defilant {
  display: flex; gap: 10px; margin: 16px 0 0; padding: 6px 0 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(to right, #000 0, #000 78%, rgba(0,0,0,.18) 96%, rgba(0,0,0,.18) 100%);
  mask: linear-gradient(to right, #000 0, #000 78%, rgba(0,0,0,.18) 96%, rgba(0,0,0,.18) 100%);
}
.defilant::-webkit-scrollbar { display: none; }
.bloc-sujet {
  cursor: pointer; text-align: left;
  border: 2px solid transparent; border-radius: 10px; padding: 14px; color: var(--bloc-texte);
  font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.12;
  display: flex; align-items: flex-end;
}
.bloc-sujet-1 { background: var(--bloc-1); }
.bloc-sujet-2 { background: var(--bloc-2); }
.bloc-sujet-3 { background: var(--bloc-3); }
/* Ce qui est écarté s'éteint — les sujets qu'une recherche n'a pas retenus,
   puis tous ceux que l'on n'a pas choisis. Ce qui reste en jeu garde sa
   couleur : aucun sujet n'est jamais encadré ni mis en gras. */
.bloc-sujet-eteint { background: var(--bloc-eteint); }
/* Le sujet retenu garde sa couleur, mais plus vive : c'est la même teinte,
   saturée. L'effet se calcule sur le jeton et non sur une couleur écrite en
   dur — il suivra donc la charte le jour où elle changera. */
.bloc-sujet[aria-pressed="true"] { filter: saturate(1.4); }

/* Candidats : une seule ligne défilante de petits rectangles. Le fond reste
   celui de la page — c'est la bordure qui porte la couleur du candidat. */
.defilant-cand { margin-top: 14px; }
.cand {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; text-align: left; white-space: nowrap;
  background: transparent; border: 2px solid var(--border); border-radius: 10px; padding: 9px 14px; min-height: 44px;
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--text);
  display: flex; align-items: center;
}
.cand-rouge { border-color: var(--cand-rouge); }
.cand-rose { border-color: var(--cand-rose); }
.cand-ciel { border-color: var(--cand-ciel); }
.cand-nuit { border-color: var(--cand-nuit); }
.cand-violet { border-color: var(--cand-violet); }
/* Les candidats gardent tous leur couleur : le retenu se marque à l'épaisseur
   de sa bordure, et à rien d'autre. */
.cand[aria-pressed="true"] { border-width: 4px; }

/* ── Bloc agent ────────────────────────────────────────────────────────────── */
/* Volet ancré en bas de l'écran : au repos il ne montre que sa barre de
   question ; à la sélection d'un sujet il se déroule VERS LE HAUT et occupe
   la page. La poignée le fait redescendre pour choisir un autre sujet. */
.agent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-width: 620px; margin: 0 auto;
  height: 132px; overflow: hidden; padding: 20px 16px 24px; background: var(--grise);
  border-radius: 20px 20px 0 0; transition: background-color .25s ease, height .32s ease;
}
/* La hauteur déroulée est calculée par la page : du bas du menu resté à l’écran
   — les sujets, ou les candidats — jusqu’au bas de l’écran. Elle ne dépend pas
   du nombre d’enquêtes déjà produites : le volet ne grandit ni ne rétrécit
   d’un sujet à l’autre. */
.agent-actif { background: var(--volet-fond); overflow-y: auto; box-shadow: 0 -18px 40px rgba(15, 32, 51, .28); }
/* Pendant le glissement, le volet suit le doigt sans transition. */
.agent-glisse { transition: none; }
.agent-poignee { display: none; }
/* Zone de préhension sur toute la largeur du haut du volet : on l’attrape au
   doigt pour le faire redescendre. Le trait n’en est que la marque. */
.agent-actif .agent-poignee {
  display: block; position: relative; width: 100%; height: 26px; padding: 0; border: 0;
  background: none; margin: -12px 0 8px; cursor: grab; touch-action: none;
}
.agent-actif .agent-poignee::before {
  content: ''; position: absolute; left: 50%; top: 10px; width: 46px; height: 5px;
  transform: translateX(-50%); border-radius: 3px; background: var(--volet-trait);
}
.agent-actif .agent-poignee:active { cursor: grabbing; }
.agent-actif .barre { background: var(--volet-barre); border-color: transparent; }
.agent-actif .barre-champ { color: var(--volet-texte); }
.agent-actif .barre-champ::placeholder { color: rgba(15, 32, 51, .55); }
.agent-actif .barre-envoi { background: var(--volet-accent); color: var(--volet-encre); }
/* Les enquêtes déjà faites : des rectangles qui s'ajustent à leur question au
   lieu de barrer toute la largeur — le volet en est d'autant plus court. */
.suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 12px; }
.suggestion {
  max-width: 88%; text-align: left; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer;
}
.agent-actif .suggestion { border-color: rgba(252, 250, 244, .32); color: var(--volet-encre); }

/* ── Écran réponse ─────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--cream); border-bottom: 1px solid var(--border); }
/* Mêmes marges que l’en-tête de la home : le logo ne doit pas bouger d’un
   pixel quand on passe de l’accueil à une enquête. */
.topbar-inner { max-width: 620px; margin: 0 auto; padding: 18px 16px 4px; display: flex; align-items: center; gap: 12px; min-height: 52px; }
/* Le retour : le logo de la home, puis le nom du dossier qu'on lit. L'ensemble
   est le bouton — on revient là d'où l'on vient, dossier choisi et volet ouvert. */
.retour {
  display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer;
  padding: 0; min-height: 44px; color: var(--text); text-align: left;
}
.retour-logo {
  display: flex; align-items: center; width: 128px; height: 36px; flex: none; color: var(--text);
}
.retour-logo { position: relative; }
.retour-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.retour-barre { color: var(--text-secondary); font-size: 20px; font-weight: 300; line-height: 1; }
/* Le nom reprend la typographie de la home : Bellefair pour un sujet, DM Sans
   pour un candidat — on reconnaît la nature du dossier à sa lettre. */
.retour-nom { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.1; }
.retour-nom.est-candidat { font-family: var(--sans); font-size: 18px; }

/* L'attente : le symbole de la marque, en grand, au centre. Il tourne en boucle
   jusqu'à ce que les premiers mots arrivent. */
.attente { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 44px 0 36px; }
.attente-symbole { width: 148px; height: 148px; }
.attente-marque { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Le logo sans son symbole : il est posé comme la charte le prévoit, par
   <use>, pour qu'il prenne la couleur du texte — en image de fond, il la
   perdrait, et le « 2027 » son bordeaux. */
.attente-wordmark { display: block; width: 196px; height: auto; color: var(--text); }
.attente-chiffres {
  margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-secondary);
}
/* La progression clignote lentement : elle respire, elle ne scintille pas. */
.attente-pourcent {
  margin: 2px 0 0; text-align: center; font-size: 14px; color: var(--text-secondary);
  animation: n27-respire 2.6s ease-in-out infinite;
}
@keyframes n27-respire { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .attente-pourcent { animation: none } }

.n27-anim{display:block;--n27-point:#173049;--n27-trait:#7a2222}
.n27-anim .ligne{stroke:var(--n27-trait);stroke-opacity:.2}
.n27-anim .points .pt{fill:var(--n27-point)}
.n27-anim .points .fin{fill:var(--n27-trait)}
.n27-anim .points circle{opacity:0.25;animation:n27-onde 1.9s ease-in-out infinite}
@keyframes n27-onde{
  0%,100%{opacity:0.25}
  18%{opacity:1}
  46%{opacity:0.25}
}
/* La courbe se trace au passage de la même onde. */
.n27-trace .ligne{stroke-opacity:.55;stroke-dasharray:240;stroke-dashoffset:240;animation:n27-ligne 1.9s ease-in-out infinite}
@keyframes n27-ligne{
  0%{stroke-dashoffset:240}
  55%{stroke-dashoffset:0}
  85%,100%{stroke-dashoffset:-240}
}
/* Sur fond bleu nuit, le symbole prend ses couleurs claires. */
.n27-anim.sur-nuit,[data-theme="nuit"] .n27-anim{--n27-point:#d9dcdb;--n27-trait:#c56b6b}
@media (prefers-reduced-motion:reduce){
  .n27-anim .points circle,.n27-anim .ligne{animation:none;opacity:1;stroke-dashoffset:0}
}
.back { background: none; border: 0; color: var(--text-secondary); font-weight: 600; font-size: 15px; padding: 8px 8px 8px 0; cursor: pointer; min-height: 44px; }
.topbar-link { margin-left: auto; font-size: 13px; color: var(--text-secondary); font-weight: 600; text-decoration: none; }

.kicker-row { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; }
.kicker-mark { width: 16px; height: 3px; background: var(--accent); border-radius: 2px; margin-top: 5px; flex: none; }
.kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; }
.theme-kicker { margin-bottom: 6px; }
.question { font-family: var(--sans); font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.12; margin: 0 0 6px; }
.base { font-size: 11px; color: var(--text-secondary); margin: 0 0 14px; }
.base:empty { display: none; }
.empty { font-size: 13px; color: var(--text-secondary); font-style: italic; margin: 4px 0 14px; }
.error { color: var(--danger); font-size: 14px; margin: 10px 0; }

.paragraph { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 14px; }

/* Digest : 1 à 3 puces en tête d'enquête, chacune avec au moins un pourcentage */
.digest { margin: 0 0 16px; padding: 14px 16px 14px 32px; list-style: none; background: var(--accent-flash); border-left: 2px solid var(--accent); }
.digest-item { position: relative; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.digest-item:last-child { margin-bottom: 0; }
.digest-item::before { content: '•'; position: absolute; left: -16px; color: var(--accent); font-weight: 700; }

.footnote { font-size: 11px; color: var(--text-secondary); font-style: italic; margin: 18px 0 0; }

/* Extrait de conversation cliquable → déplie la conversation complète */
.quote {
  color: var(--text); font-style: italic; cursor: pointer; border-radius: 3px;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.quote[aria-expanded="true"] { background: var(--accent-flash); }
.pct { font-weight: 800; }
.quote:focus-visible, .ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Référence à une statistique / l'article / aux datas */
.ref-group { white-space: nowrap; }
.ref {
  display: inline-block; vertical-align: 2px; margin: 0 1px 0 3px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-secondary);
  font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 16px; cursor: pointer;
}
.ref[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.panels { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 12px; }
.panels:empty { display: none; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.card-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }
.card-text { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--text); line-height: 21px; white-space: pre-line; }
.card-text mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Partage d'une enquête : WhatsApp, Telegram. */
.share-block { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.share-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.share-btn { position: relative; width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.share-btn svg { width: 22px; height: 22px; display: block; }
.share-wa { color: #25d366; }
.share-tg { color: #29a9eb; }
.share-btn:hover { border-color: currentColor; }
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Telegram refuse les liens trop longs : on donne le texte à copier. */
.share-copy { margin-top: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.share-copy-help { font-size: 12px; color: var(--text-secondary); line-height: 18px; margin: 0 0 8px; }
.share-copy-text { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); color: var(--text); font-family: var(--sans); font-size: 12px; line-height: 17px; padding: 8px; resize: vertical; }
.share-copy .btn { width: 100%; margin-top: 8px; }
.share-copy-state { display: block; font-size: 12px; font-weight: 600; color: var(--success); margin-top: 8px; }


/* Enquête déjà produite, dépliable (recherche par mot — suspendue sur la home) */
.find-results { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.find-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin: 4px 0 0; }
.past { border: 1px solid var(--border); border-radius: 10px; background: var(--white); overflow: hidden; }
.past-head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 2px 12px 6px; cursor: pointer; }
.past-head-first { padding-top: 10px; }
.past-head[aria-expanded="true"] { background: var(--accent-flash); }
.past-theme { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 12px 2px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.past-question { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.past-excerpt { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--text); line-height: 21px; margin: 0; padding: 0 12px 10px; }
.past-excerpt mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.past-full { border-top: 1px solid var(--border); padding: 6px 12px 12px; }
.past-loading { font-size: 12px; font-style: italic; color: var(--text-secondary); margin: 8px 0; }
.past-plain { font-size: 13px; line-height: 20px; color: var(--text); white-space: pre-line; margin-top: 6px; }

/* LE BAS D'UNE ENQUÊTE : deux moitiés. À gauche le symbole, qui ramène à
   l'accueil remis à zéro ; à droite « Nouvelle enquête », plus petit qu'avant
   puisqu'il ne tient plus toute la largeur. Le symbole n'est pas encapsulé :
   il existe tel quel, sans fond ni bordure. */
.actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; margin-top: 18px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 23px;
  border: 1px solid var(--border); background: var(--white); color: var(--text); font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; padding: 0 18px;
}
.btn-primary { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.btn-danger { color: var(--danger); }
.btn:disabled { opacity: .55; cursor: default; }
/* Les deux signes du bas d'une enquête. Ni l'un ni l'autre n'est encapsulé :
   ils existent tels quels. Chacun tient sa moitié, mais se range DU CÔTÉ DU
   CENTRE : au milieu de leurs moitiés respectives ils se perdaient dans les
   marges. L'écart entre eux est celui de la grille, et rien d'autre. */
.btn-signe {
  display: flex; align-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; min-height: 44px;
}
.actions > .btn-signe:first-child { justify-content: flex-end; }
.actions > .btn-signe:last-child { justify-content: flex-start; }
.btn-signe .n27-anim { width: 44px; height: 44px; }
.icone-home { width: 30px; height: 30px; color: var(--text); display: block; }

/* ── En-tête d'enquête : le nom du dossier est écrit sur la même ligne que le
   mot-symbole ────────────────────────────────────────────────────────────────
   Ce n'est pas un centrage de boîtes mais un alignement de LIGNES DE BASE. La
   base de « nation2027 » tombe à 93,3/140 dans logo-nation2027.svg — mesurée
   sur les tracés du mot, qui n'a aucune descendante —, soit 24 px dans une
   boîte de 36. Une cale invisible de cette hauteur donne au logo une ligne de
   base, et « align-items: baseline » y pose celle du nom, quelle que soit sa
   police. Le tracé, lui, est posé en absolu : laissé dans le flux, il
   repousserait la cale sous lui et le nom tomberait sous le logo. */
.retour { align-items: baseline; }
.retour-logo { display: inline-block; }
.retour-logo::after { content: ''; display: inline-block; width: 0; height: 24px; }

/* ── live data · prévisions J+7 ────────────────────────────────────────────
   Les deux chiffres de l'accueil, repris du modèle du 04/10/2026. Les tailles
   ne sont pas choisies : elles sont mesurées sur l'image du modèle, où la ligne
   « Recherchez une conversation » sert d'étalon — elle vaut 30 px dans
   l'application et 26,93 px dans l'image : le modèle est une capture RÉDUITE,
   d'un facteur 0,8977, qu'on applique en sens inverse à tout le reste. Relevés,
   en pixels de l'image puis de l'application : libellé 23,2 → 26 · chiffre
   50,9 → 56 · évolution 22,8 → 23 · en-tête 15,2 → 17 · pastille 8 → 9.
   Les largeurs sont mesurées avec la police de l'application elle-même : un
   relevé fait au canevas, hors page, donnait 17% d'écart.

   Les tailles sont FLUIDES, calées pour valoir exactement celles du modèle à
   la largeur du modèle — 443 px de colonne, soit une fenêtre de 475 px — et
   rapetisser en dessous. Sans cela, « Participation » et « Conversations » se
   touchent sur un téléphone de 360 px : le modèle est plus large qu'un
   téléphone réel.
   Deux colonnes : la seconde commence à 60% de la largeur, comme au modèle. */
.live { position: relative; margin: 26px 0 0; color: var(--live-texte); }
.live-entete { font-family: var(--sans); font-size: clamp(13px, 3.58vw, 17px); font-weight: 400; margin: 0 0 14px; line-height: 1.2; }
.live-entete b { font-weight: 700; }
.live-pastille {
  display: inline-block; width: clamp(7px, 1.89vw, 9px); height: clamp(7px, 1.89vw, 9px); border-radius: 50%;
  background: var(--live-rouge); margin-right: 7px; vertical-align: 1px;
}
/* 60/40 comme au modèle, mais la seconde colonne ne descend jamais sous la
   largeur de son libellé : « Conversations » y tient tout juste, et la rogner
   serait pire que de la décaler. */
.live-colonnes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(max-content, 2fr); align-items: start; gap: 12px; }
.live-label { font-family: var(--sans); font-size: clamp(18px, 5.47vw, 26px); font-weight: 400; line-height: 1.15; }
.live-chiffre { font-family: var(--sans); font-size: clamp(38px, 11.79vw, 56px); font-weight: 700; line-height: 1.1; margin-top: 2px; }
.live-evo { font-family: var(--sans); font-size: clamp(16px, 4.84vw, 23px); font-weight: 400; line-height: 1.2; margin-top: 4px; }
.live-hausse { color: var(--live-vert); }
.live-baisse { color: var(--live-rouge); }

/* Le clignotement : lent, sans fin, et sur ce que le modèle désigne — la
   pastille, « prévisions J+7 » et les deux grands chiffres. Il dit que le
   chiffre est vivant. Le battement est descendu de 0,45 à 0,22 d'opacité le
   04/10/2026 : à 0,45 il se remarquait à peine. Il ne va pas jusqu'à
   l'extinction — un chiffre qui disparaît serait illisible une seconde sur
   deux, et c'est le chiffre qui compte. */
@keyframes live-battement { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
.live-pastille,
.live-horizon,
.live-chiffre { animation: live-battement 2.4s ease-in-out infinite; }
/* Qui ne veut pas d'animation n'en a pas : la lisibilité reste entière. */
@media (prefers-reduced-motion: reduce) {
  .live-pastille, .live-horizon, .live-chiffre { animation: none; }
}

/* ── Carte d'un sujet : le bouton, la pastille « live », l'épingle ─────────
   Le bouton du sujet ne peut pas contenir l'épingle — un bouton dans un bouton
   n'existe pas en HTML. La carte les tient donc côte à côte, et c'est elle qui
   devient l'élément du menu : largeur, aimantation et recalage du défilement
   infini s'appliquent à elle. */
.bloc-carte { position: relative; flex: 0 0 46%; min-height: 92px; scroll-snap-align: start; display: flex; }
.bloc-carte .bloc-sujet { flex: 1 1 auto; width: 100%; }

/* Live : mis à jour depuis moins de 24 heures. Un point plein, cerclé de la
   même teinte, qui bat lentement — le même battement que l'accueil. */
.bloc-live {
  /* Même hauteur que l epingle : son icone est centree dans une boite de 30 px
     posee a 4 px du haut, soit un centre a 19 px. La pastille fait 8 px, donc
     15 px du haut — et 15 px du bord pour etre a la meme distance en miroir. */
  position: absolute; top: 15px; left: 15px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live-rouge); box-shadow: 0 0 0 3px rgba(255, 0, 0, .32);
  animation: live-battement 2.4s ease-in-out infinite; pointer-events: none;
}

/* L'épingle, en vis-à-vis de la pastille. Discrète tant qu'elle n'est pas
   posée : c'est le sujet qu'on vient lire, pas elle. */
.bloc-epingle {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--bloc-texte); opacity: .45; transition: opacity .12s ease;
}
.bloc-epingle svg { width: 15px; height: 15px; fill: currentColor; }
.bloc-epingle:hover, .bloc-epingle:focus-visible { opacity: .8; }
.bloc-epingle-mise { opacity: 1; }
.bloc-epingle-mise svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) { .bloc-live { animation: none; } }

/* Le tri par epingle porte le symbole, pas le mot. */
.tri-epingle { display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.tri-epingle svg { width: 14px; height: 14px; fill: currentColor; }

/* Les notes « stat » et « data » sont des mesures, pas des propos : elles
   s'écrivent dans la typographie de l'enquête et en plus petit — 11 px contre
   15 — pour qu'on les lise comme un appui, non comme le texte lui-même.
   L'italique serif reste à ce qui est cité : conversation ou article. */
.card-note {
  font-family: var(--sans); font-style: normal; font-size: 11px; line-height: 1.5;
  color: var(--text-secondary);
}

/* La bulle d'interprétation : la phrase qui lit le chiffre à voix haute. Même
   typographie que l'enquête, posée sous le nombre qu'elle explique. */
.live-bulle {
  font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.5;
  color: var(--text); background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  /* POSÉE AU-DESSUS, pas intercalée : ajoutée dans le flux, elle allongeait la
     page de 15 px, faisait paraître la barre de défilement et rétrécissait tout
     d'autant — les deux chiffres sautaient de 15 px à l'ouverture. */
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px;
  box-shadow: 0 6px 20px rgba(23, 48, 73, .14);
  /* Le volet d'enquête monte jusque-là : mesuré, il recouvrait les 30 derniers
     pixels de la bulle. Elle passe donc au-dessus — une phrase à moitié lisible
     ne vaut pas mieux que pas de phrase. */
  z-index: 11;
}
/* Le grand chiffre est un bouton : il ne doit pas en avoir l'air, ni se
   comporter autrement. Un bouton ne prend pas la largeur de sa case et
   n'hérite pas de la couleur du texte : sans ces deux lignes, les deux
   colonnes se chevauchent et les chiffres passent au noir. */
.live-chiffre {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; display: block; width: 100%; color: var(--live-texte);
}