/* ============================================================================
   Dossier Législatives 2026 — styles de la page
   Portage adapté du site FR (claude-design-assets/elections 2026/style.css).

   Toutes les règles sont préfixées .dossier-elections : les sélecteurs de la
   maquette (.card, .section, .legend, .timeline) sont trop communs pour rester
   au niveau racine. Les tokens sont donc déclarés en portée locale, pas :root.

   Largeur et padding : AUCUN ici. Le template insère .dossier-elections dans
   .lb-container (style.css), qui fixe déjà max-width: var(--container-max)
   et le padding horizontal — dupliquer ces règles désynchronise la largeur
   de la page du header/footer du thème au moindre changement de token.
   ========================================================================== */

.dossier-elections {
  /*
   * Les tokens du dossier sont des ALIAS sur ceux du thème (style.css :root),
   * pas des valeurs propres : la maquette FR figeait ses couleurs, ce qui
   * aurait fait diverger cette page du reste du site au premier changement de
   * charte (le jaune FR #FFCB22 différait déjà de l'accent AR #FFCB21).
   * Les noms --el-* sont conservés : ils sont référencés ~200 fois plus bas.
   */
  --el-yellow: var(--accent);
  --el-yellow-hover: var(--accent-hover);
  --el-black: var(--fg);
  --el-header-black: var(--bg-inverse);
  --el-white: var(--fg-on-dark);
  --el-gray-light: var(--bg-alt);
  --el-gray-border: var(--border);
  --el-text-secondary: var(--fg-muted);
  --el-text-muted: var(--fg-faint);
  --el-radius-sm: var(--radius-card);
  --el-radius-pill: var(--radius-pill);

  /* Beige du « soutien critique » : sans équivalent dans la charte, il doit
     rester distinct du gris de l'opposition et du jaune de la majorité. */
  --el-soutien-bg: #C9C6BE;

  /*
   * Poppins n'a aucun glyphe arabe : le texte retombait sur system-ui, hors
   * de la charte typographique. On reprend les polices arabes du thème.
   */
  font-family: var(--font-body);
  color: var(--el-black);
}

/* Titres du dossier : police d'affichage du thème, comme le reste du site. */
.dossier-elections h1,
.dossier-elections h2,
.dossier-elections h3,
.dossier-elections .el-section__title,
.dossier-elections .el-hero__title { font-family: var(--font-display); }

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

.dossier-elections a { color: var(--el-black); text-decoration: none; }
.dossier-elections a:hover { color: var(--el-yellow-hover); }

/* ---------- Coquille de section ---------- */
.dossier-elections .el-section { padding: 44px 0 12px; }
.dossier-elections .el-section--dark {
  background: var(--el-header-black);
  padding: 48px 24px;
  border-radius: var(--el-radius-sm);
  margin: 40px 0;
}
.dossier-elections .el-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.dossier-elections .el-section__note {
  font-size: 14px; line-height: 1.5; color: var(--el-text-muted); margin-top: 16px;
}
.dossier-elections .el-section__intro {
  font-size: 17px; line-height: 1.6; color: var(--el-text-secondary); margin: 0 0 24px;
}

/* Soulignement signature */
.dossier-elections .el-section__title {
  font-size: 30px; font-weight: 700; margin: 0 0 22px;
  position: relative; padding-bottom: 16px;
}
.dossier-elections .el-section__title.has-bottomline::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--el-gray-border);
}
.dossier-elections .el-section__title.has-bottomline::before {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -1px;
  width: 80px; height: 4px; background: var(--el-yellow); z-index: 1;
}
.dossier-elections .el-section__title--light { color: var(--el-white); }
.dossier-elections .el-section__subtitle {
  color: var(--fg-on-dark-muted); font-size: 16px; margin: 0 0 28px;
}

/* ---------- Fil d'Ariane ---------- */
.dossier-elections .el-fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 18px 0 0; font-size: 14px; color: var(--el-text-secondary);
}
.dossier-elections .el-fil a { color: var(--el-text-secondary); }
.dossier-elections .el-fil a:hover { color: var(--el-black); }
.dossier-elections .el-fil [aria-current="page"] { color: var(--el-black); font-weight: 600; }

/* ---------- 1. Hero ---------- */
.dossier-elections .el-hero { padding: 28px 0 0; }
.dossier-elections .el-hero__maj {
  font-size: 14px; color: var(--el-text-secondary); margin: 0 0 18px;
}
.dossier-elections .el-hero__eyebrow {
  font-weight: 700; font-size: 14px; letter-spacing: .14em;
  color: var(--el-text-secondary); text-transform: uppercase; margin-bottom: 10px;
}
.dossier-elections .el-hero__title {
  font-size: 44px; font-weight: 700; margin: 0 0 14px; line-height: 1.1;
}
.dossier-elections .el-hero__chapo {
  font-size: 18px; line-height: 1.55; color: var(--el-text-secondary); margin: 0 0 20px;
}
.dossier-elections .el-tag-cloud {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0; margin: 0 0 20px;
}
.dossier-elections .el-tag-cloud li a {
  display: inline-block; background: var(--el-gray-light);
  padding: 8px 16px; border-radius: var(--el-radius-pill);
  font-weight: 600; font-size: 14px;
}
.dossier-elections .el-tag-cloud li a:hover { background: var(--el-yellow); color: var(--el-black); }
/* Entrée mise en avant (test d'affinité) : fond jaune plutôt que gris. */
.dossier-elections .el-tag-cloud li a.is-mise-en-avant {
  background: var(--el-yellow); color: var(--el-black);
}
.dossier-elections .el-tag-cloud li a.is-mise-en-avant:hover { background: var(--el-black); color: var(--el-white); }

/* Compte à rebours */
.dossier-elections .el-countdown {
  /* center et non baseline : quand le libellé passe sur deux lignes, un
     alignement sur la ligne de base décalait le chiffre vers le haut. */
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--el-black); color: var(--el-white);
  padding: 14px 24px; border-radius: var(--el-radius-sm); margin: 4px 0 24px;
  /* Le chiffre garde sa largeur ; seul le libellé se replie si nécessaire. */
  max-width: 100%;
}
/* « J-23 » ne doit jamais se couper après le tiret : sur mobile, le navigateur
   passait le nombre à la ligne suivante. */
.dossier-elections .el-countdown__num {
  white-space: nowrap; flex-shrink: 0;
  font-size: 38px; font-weight: 700; color: var(--el-yellow); line-height: 1.1;
}
.dossier-elections .el-countdown__label {
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.4;
}
.dossier-elections .el-countdown--today .el-countdown__num { font-size: 22px; }

/* ---------- 2. Frise ---------- */
/* Une seule ligne qui défile horizontalement, comme les rangées
   .row.section-4 de la page d'accueil (flex nowrap + overflow-x + scroll-snap).
   Avec 9 étapes, une grille auto-fit écraserait chaque colonne. */
.dossier-elections .el-timeline {
  display: flex; flex-wrap: nowrap; gap: 20px;
  border: 1px solid var(--el-gray-border);
  border-radius: var(--el-radius-sm); padding: 28px 24px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--el-text-muted) var(--el-gray-light);
}
/* Barre de défilement visible : elle signale qu'il reste des étapes à droite. */
.dossier-elections .el-timeline::-webkit-scrollbar { height: 6px; }
.dossier-elections .el-timeline::-webkit-scrollbar-track {
  background: var(--el-gray-light); border-radius: var(--el-radius-pill);
}
.dossier-elections .el-timeline::-webkit-scrollbar-thumb {
  background: var(--el-text-muted); border-radius: var(--el-radius-pill);
}
.dossier-elections .el-timeline::-webkit-scrollbar-thumb:hover {
  background: var(--el-text-secondary);
}
.dossier-elections .el-timeline__step {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; padding: 14px; border-radius: var(--el-radius-sm);
  border: 1.5px solid transparent;
  /* Largeur fixe : les étapes ne se compriment pas, elles défilent. */
  flex: 0 0 230px; scroll-snap-align: start;
}
.dossier-elections .el-timeline__dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--el-text-secondary);
}
.dossier-elections .el-timeline__step--highlight .el-timeline__dot { background: var(--el-yellow); }
.dossier-elections .el-timeline__step--highlight .el-timeline__label { color: var(--el-black); }

/* Étapes déjà passées : présentes mais en retrait */
.dossier-elections .el-timeline__step.is-passee { opacity: .55; }
.dossier-elections .el-timeline__step.is-passee .el-timeline__dot {
  background: none; border: 2px solid var(--el-text-muted);
}

/* Étape repérée : encadrée, avec sa pastille */
.dossier-elections .el-timeline__step.is-repere {
  border-color: var(--el-black); background: #FFFDF5;
  opacity: 1; padding-top: 26px;
}
.dossier-elections .el-timeline__step.is-repere .el-timeline__dot { background: var(--el-black); }
.dossier-elections .el-timeline__step.is-repere.el-timeline__step--highlight .el-timeline__dot {
  background: var(--el-yellow);
}
.dossier-elections .el-timeline__badge {
  position: absolute; top: -11px; inset-inline-start: 12px;
  background: var(--el-black); color: var(--el-white);
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--el-radius-pill); white-space: nowrap;
}
/* L'étape en cours pulse discrètement pour attirer l'œil sans distraire. */
.dossier-elections .el-timeline__step.is-repere.is-en-cours .el-timeline__dot {
  box-shadow: 0 0 0 0 rgba(3, 3, 3, .35);
  animation: el-pulse 2.4s ease-out infinite;
}
@keyframes el-pulse {
  70%  { box-shadow: 0 0 0 10px rgba(3, 3, 3, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 3, 3, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dossier-elections .el-timeline__step.is-repere.is-en-cours .el-timeline__dot { animation: none; }
}
.dossier-elections .el-timeline__label { font-weight: 700; font-size: 16px; line-height: 1.3; }
.dossier-elections .el-timeline__date {
  font-weight: 600; font-size: 14px; color: var(--el-text-secondary);
}
.dossier-elections .el-timeline__text {
  font-size: 14px; line-height: 1.5; color: var(--el-text-secondary); margin: 0;
}

/* ---------- 3. En Brief ---------- */
/* Colonnes assez larges pour que « 23 septembre 2026 », la valeur la plus
   longue, tienne sur une seule ligne à 18px : ~200px de texte + 28px de
   padding. Le bandeau passe donc à 6 colonnes plutôt que 7 sur grand écran. */
.dossier-elections .el-enbrief {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px; background: var(--el-gray-border);
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm);
  overflow: hidden;
}
.dossier-elections .el-enbrief__item {
  background: var(--el-white); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: flex-start;
}
.dossier-elections .el-enbrief__num {
  font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--el-black);
  /* Une seule ligne, jamais coupée en deux. */
  white-space: nowrap;
}
.dossier-elections .el-enbrief__label {
  font-weight: 600; font-size: 14px; color: var(--el-text-secondary);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.35;
  /* Deux lignes réservées : « circonscriptions régionales » en occupe deux,
     « députés » une seule. Sans cette réserve, le bas des cartes serait
     irrégulier d'une colonne à l'autre. */
  min-height: 2.7em;
}

/* ---------- 4. Chiffres clés ---------- */
.dossier-elections .el-chiffres-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
/* Fond sombre : le jaune sur blanc ne donne qu'un contraste de 1,52:1, très
   en dessous du seuil de 3:1 exigé pour les grands textes. Sur #141312 il
   monte à ~11:1 — lisible en plein soleil comme sur écran peu contrasté. */
.dossier-elections .el-chiffre-card {
  background: var(--el-header-black);
  border: 1px solid var(--el-header-black); border-radius: var(--el-radius-sm);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.dossier-elections .el-chiffre-card__num {
  font-weight: 700; font-size: 38px; line-height: 1; margin: 0;
  color: var(--el-yellow);
}
.dossier-elections .el-chiffre-card__title {
  font-weight: 700; font-size: 17px; margin: 0; color: var(--el-white);
}
.dossier-elections .el-chiffre-card__body {
  font-size: 15px; line-height: 1.5; color: var(--fg-on-dark-muted); margin: 0;
}

/* ---------- 5. FAQ ---------- */
.dossier-elections .el-faq-list {
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm); overflow: hidden;
}
.dossier-elections .el-faq-item { border-top: 1px solid var(--el-gray-border); }
.dossier-elections .el-faq-item:first-child { border-top: none; }
.dossier-elections .el-faq-item__question {
  padding: 16px 20px; font-weight: 700; font-size: 16px;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.dossier-elections .el-faq-item__question::-webkit-details-marker { display: none; }
.dossier-elections .el-faq-item__question::after {
  content: "+"; font-size: 22px; font-weight: 400;
  color: var(--el-text-secondary); flex-shrink: 0;
}
.dossier-elections .el-faq-item[open] .el-faq-item__question::after { content: "\2212"; }
.dossier-elections .el-faq-item__answer {
  padding: 0 20px 18px; font-size: 15px; line-height: 1.6;
  color: var(--el-text-secondary); margin: 0;
}

/* Exemple chiffré, dans une réponse de FAQ */
.dossier-elections .el-faq-item__exemple {
  margin: 0 20px 18px; padding: 16px 18px;
  background: var(--el-gray-light);
  border-inline-start: 3px solid var(--el-yellow);
  border-radius: var(--el-radius-sm);
}
.dossier-elections .el-faq-item__exemple-titre {
  display: block; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--el-text-secondary); margin-bottom: 10px;
}
.dossier-elections .el-faq-item__exemple-liste {
  margin: 0; padding-inline-start: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.dossier-elections .el-faq-item__exemple-liste li {
  font-size: 15px; line-height: 1.55; color: var(--el-text-secondary);
}
.dossier-elections .el-faq-item__exemple-liste li:last-child { font-weight: 600; color: var(--el-black); }

/* ---------- 6. Hémicycle ---------- */
.dossier-elections .el-hemicycle { margin-bottom: 18px; }
/* Épouse exactement le SVG : sert de repère pour positionner l'infobulle.
   Sans lui, les pourcentages porteraient sur le conteneur entier (légende et
   phrase d'aide comprises) et le repère serait faux, surtout sur mobile. */
.dossier-elections .el-hemicycle__zone {
  position: relative; width: 100%; max-width: 720px; margin: 0 auto;
}
.dossier-elections .el-hemicycle__svg {
  width: 100%; height: auto; display: block; overflow: visible;
}
.dossier-elections .el-hemicycle__group circle {
  transition: opacity .18s ease;
  /* Le clic est capté sur le groupe entier, pas point par point. */
  pointer-events: none;
}
.dossier-elections .el-hemicycle__group { cursor: pointer; }

/* Un parti isolé : les autres groupes s'estompent. */
.dossier-elections .el-hemicycle.is-filtered .el-hemicycle__group circle { opacity: .12; }
.dossier-elections .el-hemicycle.is-filtered .el-hemicycle__group.is-active circle { opacity: 1; }

/* Compteur au creux de l'arc — texte SVG, donc à l'échelle du viewBox : il
   reste centré dans le demi-disque vide quelle que soit la largeur d'écran.
   Masqué (classe posée par le JS) quand l'infobulle occupe le même espace. */
.dossier-elections .el-hemicycle__total {
  pointer-events: none; transition: opacity .15s ease;
}
.dossier-elections .el-hemicycle.has-tip .el-hemicycle__total { opacity: 0; }
.dossier-elections .el-hemicycle__total-num {
  font-weight: 700; font-size: 92px; fill: var(--el-black);
}
.dossier-elections .el-hemicycle__total-label {
  font-weight: 600; font-size: 28px; letter-spacing: .12em;
  fill: var(--el-text-secondary);
}
.dossier-elections .el-hemicycle__hint {
  font-size: 14px; color: var(--el-text-secondary); margin: 12px 0 0; text-align: center;
}

/* Infobulle : nom du parti + sièges.
   Positionnée dans .el-hemicycle__zone, qui épouse exactement le SVG (ratio
   1000/518) : 77 % de sa hauteur correspond au centre du creux de l'arc, donc
   au même endroit que le compteur qu'elle remplace. */
.dossier-elections .el-hemicycle__tip {
  position: absolute; left: 50%; top: 77%;
  transform: translate(-50%, -50%);
  background: var(--el-black); color: var(--el-white);
  padding: 10px 18px; border-radius: var(--el-radius-sm);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; text-align: center;
  /* Une sélection multiple peut aligner plusieurs noms : on autorise le retour
     à la ligne et on borne la largeur pour rester dans le creux de l'arc. */
  max-width: 72%;
}
.dossier-elections .el-hemicycle__tip[hidden] { display: none; }
.dossier-elections .el-hemicycle__tip-nom {
  font-weight: 700; font-size: 16px; line-height: 1.3;
}
.dossier-elections .el-hemicycle__tip-val {
  font-weight: 600; font-size: 14px; color: var(--el-yellow);
}

/* Légende */
.dossier-elections .el-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: 14px;
}
.dossier-elections .el-legend li {
  display: flex; align-items: center; gap: 6px;
}
.dossier-elections .el-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Légende cliquable, centrée sous l'hémicycle */
.dossier-elections .el-legend--interactive {
  justify-content: center; margin-top: 18px;
}
.dossier-elections .el-legend--interactive .el-legend__btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--el-gray-light); border: 1.5px solid transparent;
  padding: 5px 10px; border-radius: var(--el-radius-pill);
  font: inherit; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.dossier-elections .el-legend--interactive .el-legend__btn:hover { border-color: var(--el-black); }
.dossier-elections .el-legend--interactive .el-legend__btn.is-active {
  background: var(--el-black); color: var(--el-white); border-color: var(--el-black);
}
/* Quand un parti est isolé, les autres boutons s'atténuent. */
.dossier-elections .el-legend--interactive.is-filtered .el-legend__btn:not(.is-active) {
  opacity: .45;
}
/* « Tous les partis » : légèrement distinct, sans pastille de couleur. */
.dossier-elections .el-legend--interactive .el-legend__btn--all {
  border-color: var(--el-gray-border); font-weight: 700;
}

/* ---------- 7. Rapport de forces (4 catégories) ---------- */
.dossier-elections .el-forces { display: flex; flex-direction: column; gap: 18px; }
.dossier-elections .el-forces-bar {
  display: flex; height: 44px; border-radius: var(--el-radius-sm); overflow: hidden;
}
.dossier-elections .el-forces-bar__seg {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; white-space: nowrap;
}
.dossier-elections .el-forces-bar__seg--majorite { background: var(--el-black); color: var(--el-yellow); }
.dossier-elections .el-forces-bar__seg--opposition { background: var(--el-gray-border); color: var(--el-text-secondary); }
.dossier-elections .el-forces-bar__seg--soutien { background: var(--el-soutien-bg); color: var(--el-black); }
.dossier-elections .el-forces-bar__seg--autres { background: var(--el-gray-light); color: var(--el-text-secondary); }

.dossier-elections .el-forces-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.dossier-elections .el-force-card {
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.dossier-elections .el-force-card__label {
  font-weight: 700; font-size: 14px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--el-text-secondary);
}
.dossier-elections .el-force-card__num { font-weight: 700; font-size: 30px; line-height: 1; }
.dossier-elections .el-force-card__partis { font-size: 15px; line-height: 1.5; color: var(--el-text-secondary); }
.dossier-elections .el-force-card__note {
  font-size: 14px; line-height: 1.5; color: var(--el-text-muted); margin: 0;
}

/* ---------- 8. Carte des régions ---------- */
.dossier-elections .el-carte-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px; align-items: start;
}
.dossier-elections .el-carte { position: relative; }
.dossier-elections .el-carte__svg { width: 100%; max-width: 100%; height: auto; display: block; }
.dossier-elections .el-carte__svg path {
  stroke: var(--el-white); stroke-width: 1.5;
  transition: opacity .15s ease, fill .25s ease;
  cursor: pointer;
}
.dossier-elections .el-carte__svg path:hover { opacity: .8; }

/* Région sélectionnée : les autres s'estompent */
.dossier-elections .el-carte-wrap.is-selected .el-carte__region { opacity: .28; }
.dossier-elections .el-carte-wrap.is-selected .el-carte__region.is-active {
  opacity: 1; stroke: var(--el-black); stroke-width: 2.5;
}

/* Encart de détail */
.dossier-elections .el-carte-detail {
  position: absolute; inset-inline-start: 0; top: 0;
  background: var(--el-black); color: var(--el-white);
  padding: 12px 16px; border-radius: var(--el-radius-sm);
  display: flex; flex-direction: column; gap: 2px; max-width: 70%;
}
.dossier-elections .el-carte-detail[hidden] { display: none; }
.dossier-elections .el-carte-detail__nom { font-weight: 700; font-size: 15px; }
.dossier-elections .el-carte-detail__val {
  font-weight: 600; font-size: 14px; color: var(--el-yellow);
}

/* Sélecteur de couches */
.dossier-elections .el-carte-couches {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.dossier-elections .el-carte-couche {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--el-gray-light); border: 1.5px solid transparent;
  padding: 8px 16px; border-radius: var(--el-radius-pill);
  font: 600 12px inherit; font-family: inherit; color: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dossier-elections .el-carte-couche:hover { border-color: var(--el-black); }
.dossier-elections .el-carte-couche.is-active {
  background: var(--el-black); color: var(--el-white); border-color: var(--el-black);
}
.dossier-elections .el-carte-couche__total {
  font-weight: 700; font-size: 14px; opacity: .75;
}
.dossier-elections .el-carte-couche.is-active .el-carte-couche__total { color: var(--el-yellow); opacity: 1; }

.dossier-elections .el-carte__hint {
  font-size: 14px; color: var(--el-text-secondary); margin: 14px 0 0;
}
.dossier-elections .el-carte-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px; background: var(--el-gray-border);
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm); overflow: hidden;
}
.dossier-elections .el-carte-legend li { background: var(--el-white); }
.dossier-elections .el-carte-legend__btn {
  width: 100%; background: none; border: none;
  padding: 10px 14px; font: inherit; font-size: 15px; color: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; text-align: start;
  transition: background .15s ease;
}
.dossier-elections .el-carte-legend__btn:hover { background: var(--el-gray-light); }
.dossier-elections .el-carte-legend__btn[aria-pressed="true"] {
  background: var(--el-black); color: var(--el-white);
}
.dossier-elections .el-carte-legend__btn[aria-pressed="true"] .el-carte-legend__num {
  color: var(--el-yellow);
}
.dossier-elections .el-carte-legend__name { display: flex; align-items: center; gap: 10px; }
.dossier-elections .el-carte-legend__swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.dossier-elections .el-carte-legend__num { font-weight: 700; font-size: 17px; }

/* ---------- 9. Partis ---------- */
.dossier-elections .el-partis-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px;
}
.dossier-elections .el-parti-card {
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.dossier-elections .el-parti-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.dossier-elections .el-parti-card__swatch {
  width: 38px; height: 38px; border-radius: var(--el-radius-sm); display: block;
}
.dossier-elections .el-parti-card__seats { font-weight: 700; font-size: 28px; line-height: 1; }
.dossier-elections .el-parti-card__seats small {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--el-text-secondary); text-transform: uppercase;
}
.dossier-elections .el-parti-card__name { font-weight: 700; font-size: 18px; margin: 0; }
.dossier-elections .el-parti-card__family {
  font-weight: 600; font-size: 13px; color: var(--el-text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
}
.dossier-elections .el-parti-card__statut {
  display: inline-block; align-self: flex-start;
  font-weight: 700; font-size: 13px; padding: 4px 10px;
  border-radius: var(--el-radius-pill); text-transform: uppercase; letter-spacing: .04em;
}
.dossier-elections .el-parti-card__statut--majorite { background: var(--el-black); color: var(--el-yellow); }
.dossier-elections .el-parti-card__statut--opposition { background: var(--el-gray-light); color: var(--el-text-secondary); }
.dossier-elections .el-parti-card__statut--soutien { background: var(--el-soutien-bg); color: var(--el-black); }
.dossier-elections .el-parti-card__text {
  font-size: 14px; line-height: 1.5; color: var(--el-text-secondary); margin: 0;
}

/* ---------- 10-12. Quiz, sondage et test d'affinité ----------
   Les trois blocs partagent la même présentation : un cadre, un intitulé de
   progression, une question, une pile d'options cliquables, puis un résultat
   avec barres de score. Les sélecteurs sont donc mutualisés ici plutôt que
   répétés trois fois ; seules les particularités de chacun sont isolées plus
   bas (correction verte/rouge du quiz, jauge du test d'affinité...). */

.dossier-elections .el-quiz,
.dossier-elections .el-sondage-card,
.dossier-elections .el-affinite {
  border: 1px solid var(--el-gray-border); border-radius: var(--el-radius-sm);
  padding: 28px; max-width: 720px;
}
/* Le sondage est posé sur la section sombre : fond blanc, pas de bordure. */
.dossier-elections .el-sondage-card { background: var(--el-white); border-color: transparent; }

/* Intitulé de progression (« Question 2 / 6 », « Vos affinités »...) */
.dossier-elections .el-quiz__progress,
.dossier-elections .el-sondage-card__progress,
.dossier-elections .el-affinite__progress {
  font-weight: 600; font-size: 14px; letter-spacing: .1em;
  color: var(--el-text-secondary); text-transform: uppercase; margin-bottom: 8px;
}

/* Énoncé */
.dossier-elections .el-quiz__question,
.dossier-elections .el-sondage-card__question,
.dossier-elections .el-affinite__question {
  font-weight: 700; font-size: 20px; line-height: 1.4; margin: 0 0 20px;
}

/* Options */
.dossier-elections .el-quiz__options,
.dossier-elections .el-sondage-card__options,
.dossier-elections .el-affinite__options {
  display: flex; flex-direction: column; gap: 10px;
}
.dossier-elections .el-quiz__option,
.dossier-elections .el-sondage-option,
.dossier-elections .el-affinite__option {
  border: 1.5px solid var(--el-gray-border); border-radius: var(--el-radius-sm);
  padding: 12px 16px; font: inherit; font-weight: 600; font-size: 15px;
  background: none; text-align: start; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dossier-elections .el-quiz__option:hover:not(:disabled),
.dossier-elections .el-sondage-option:hover:not(:disabled),
.dossier-elections .el-affinite__option:hover:not(:disabled) {
  border-color: var(--el-yellow); background: #FFFBEE;
}
.dossier-elections .el-quiz__option:disabled,
.dossier-elections .el-sondage-option:disabled { cursor: default; }
.dossier-elections .el-sondage-option:disabled { opacity: .6; }

/* Bouton d'action principal (suivant, recommencer...) */
.dossier-elections .el-quiz__next,
.dossier-elections .el-affinite__rejouer {
  margin-top: 18px; background: var(--el-black); color: var(--el-white);
  border: none; border-radius: var(--el-radius-pill);
  padding: 11px 24px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.dossier-elections .el-quiz__next:hover,
.dossier-elections .el-affinite__rejouer:hover {
  background: var(--el-yellow); color: var(--el-black);
}

/* Listes de résultats à barres (sondage et affinité) */
.dossier-elections .el-sondage-results,
.dossier-elections .el-affinite__resultats {
  display: flex; flex-direction: column; gap: 14px;
}
.dossier-elections .el-sondage-result__row,
.dossier-elections .el-affinite__resultat {
  display: flex; flex-direction: column; gap: 6px;
}
.dossier-elections .el-sondage-result__head,
.dossier-elections .el-affinite__resultat-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px;
}
.dossier-elections .el-sondage-result__track,
.dossier-elections .el-affinite__track {
  height: 10px; background: var(--el-gray-light);
  border-radius: var(--el-radius-pill); overflow: hidden;
}
.dossier-elections .el-sondage-result__fill,
.dossier-elections .el-affinite__fill {
  height: 100%; border-radius: var(--el-radius-pill);
}
.dossier-elections .el-sondage-result__fill { background: var(--el-yellow); }

/* Mentions et messages d'erreur */
.dossier-elections .el-sondage__disclaimer {
  font-size: 14px; line-height: 1.5; color: var(--el-text-muted); margin: 18px 0 0;
}
.dossier-elections .el-quiz__erreur,
.dossier-elections .el-sondage__error {
  font-size: 14px; color: #C0392B; margin: 12px 0 0;
}

/* --- Propre au quiz : correction et score --- */
/* Symbole en plus de la couleur, pour ne pas reposer sur elle seule. */
.dossier-elections .el-quiz__option.is-correct {
  border-color: #2E9E5B; background: #EFF9F3; color: #1C6B3C;
}
.dossier-elections .el-quiz__option.is-correct::before { content: "\2713\00a0\00a0"; font-weight: 700; }
.dossier-elections .el-quiz__option.is-wrong {
  border-color: #C0392B; background: #FDF0EE; color: #92271B;
}
.dossier-elections .el-quiz__option.is-wrong::before { content: "\2715\00a0\00a0"; font-weight: 700; }
.dossier-elections .el-quiz__explication {
  margin-top: 18px; padding: 14px 16px;
  background: var(--el-gray-light); border-radius: var(--el-radius-sm);
  font-size: 15px; line-height: 1.6; color: var(--el-text-secondary);
}
.dossier-elections .el-quiz__score { margin: 6px 0 4px; }
.dossier-elections .el-quiz__score-num { font-weight: 700; font-size: 44px; line-height: 1; }
.dossier-elections .el-quiz__score-mot {
  font-size: 16px; color: var(--el-text-secondary); margin: 0;
}

/* --- Propre au test d'affinité --- */
.dossier-elections .el-affinite__barre {
  height: 4px; background: var(--el-gray-light);
  border-radius: var(--el-radius-pill); overflow: hidden; margin-bottom: 18px;
}
.dossier-elections .el-affinite__jauge {
  height: 100%; background: var(--el-yellow); transition: width .25s ease;
}
.dossier-elections .el-affinite__resultat-nom {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px;
}
.dossier-elections .el-affinite__pastille {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.dossier-elections .el-affinite__resultat-pct { font-weight: 700; font-size: 18px; }
/* Portrait : reprend l'encart de l'exemple chiffré de la FAQ. */
.dossier-elections .el-affinite__portrait {
  margin: 18px 0 0; padding: 18px 20px; background: var(--el-gray-light);
  border-inline-start: 3px solid var(--el-yellow); border-radius: var(--el-radius-sm);
}
.dossier-elections .el-affinite__portrait-titre {
  font-weight: 700; font-size: 17px; margin-bottom: 8px;
}
.dossier-elections .el-affinite__portrait-texte {
  font-size: 15px; line-height: 1.65; color: var(--el-text-secondary); margin: 0;
}
.dossier-elections .el-affinite__portrait-note {
  font-size: 14px; line-height: 1.55; color: var(--el-text-secondary);
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--el-gray-border);
}
/* Actions de fin de test : bouton principal + lien secondaire */
.dossier-elections .el-affinite__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px;
}
.dossier-elections .el-affinite__lien {
  background: none; border: none; padding: 0; font: inherit; font-size: 15px;
  color: var(--el-text-secondary); cursor: pointer; text-decoration: underline;
}
.dossier-elections .el-affinite__lien:hover { color: var(--el-black); }

/* Répartition des profils obtenus par l'ensemble des lecteurs */
.dossier-elections .el-affinite__lecteurs {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--el-gray-border);
}
.dossier-elections .el-affinite__lecteurs-titre {
  font-weight: 700; font-size: 16px; margin-bottom: 14px;
}
.dossier-elections .el-affinite__lecteurs-note {
  font-size: 14px; line-height: 1.5; color: var(--el-text-muted); margin: 14px 0 0;
}
.dossier-elections .el-affinite__lecteurs-vide {
  font-size: 15px; line-height: 1.6; color: var(--el-text-secondary); margin: 0;
}

.dossier-elections .el-affinite__nav { margin-top: 16px; }
.dossier-elections .el-affinite__retour {
  background: none; border: none; padding: 0; font: inherit; font-size: 14px;
  color: var(--el-text-secondary); cursor: pointer; text-decoration: underline;
}
.dossier-elections .el-affinite__retour:hover { color: var(--el-black); }
/* ---------- Derniers articles ---------- */
.dossier-elections .el-articles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.dossier-elections .el-article-card__image {
  aspect-ratio: 16/10; border-radius: var(--el-radius-sm);
  background: var(--el-gray-light); margin-bottom: 10px; overflow: hidden;
}
.dossier-elections .el-article-card__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dossier-elections .el-article-card__category {
  font-weight: 700; font-size: 13px; letter-spacing: .1em;
  color: var(--el-text-secondary); text-transform: uppercase; margin-bottom: 6px;
}
.dossier-elections .el-article-card__title {
  font-weight: 700; font-size: 17px; line-height: 1.35; margin: 0 0 6px;
}
.dossier-elections .el-article-card__date {
  font-weight: 600; font-size: 13px; color: var(--el-text-muted);
}
.dossier-elections .el-link-more {
  font-weight: 700; font-size: 14px; border: 1.5px solid var(--el-black);
  padding: 10px 22px; border-radius: var(--el-radius-pill); white-space: nowrap;
}
.dossier-elections .el-link-more:hover {
  background: var(--el-yellow); border-color: var(--el-yellow); color: var(--el-black);
}

/* ---------- Ajustements petits écrans ----------
   Les grilles passent seules en une colonne (auto-fit + minmax) : on ne
   corrige ici que la typo et les blocs à colonnes fixes.               */
@media (max-width: 767px) {
  /* Frise : on retrouve l'empilement vertical d'origine, sans défilement
     horizontal (le scroll latéral dans une page qui scrolle déjà verticalement
     est inconfortable au doigt). */
  .dossier-elections .el-timeline {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    overflow-x: visible; scroll-snap-type: none;
    padding: 22px 18px;
  }
  .dossier-elections .el-timeline__step { flex: 1 1 auto; scroll-snap-align: none; }

  .dossier-elections .el-hero__title { font-size: 32px; }
  .dossier-elections .el-section__title { font-size: 24px; }
  .dossier-elections .el-section--dark { padding: 32px 18px; }
  .dossier-elections .el-sondage-card { padding: 22px; }
  .dossier-elections .el-forces-bar { height: auto; flex-direction: column; }
  .dossier-elections .el-forces-bar__seg { padding: 10px; }
}

/* ============================================================================
   CORRECTIFS TYPOGRAPHIQUES ARABES
   ---------------------------------------------------------------------------
   La maquette FR employait letter-spacing et text-transform sur ses petites
   étiquettes, deux effets pensés pour l'alphabet latin :

   - letter-spacing DISLOQUE l'arabe. L'écriture est cursive : espacer les
     lettres rompt les ligatures et sépare visuellement les caractères d'un
     même mot. C'est le défaut le plus visible du portage.
   - text-transform: uppercase n'a aucun effet (l'arabe est unicaméral) ; on
     le retire pour que la règle ne survive pas à un futur texte latin.

   Règle groupée plutôt que 11 corrections dispersées : l'intention reste
   lisible en un seul endroit.
   ========================================================================== */
.dossier-elections .el-hero__eyebrow,
.dossier-elections .el-countdown__label,
.dossier-elections .el-timeline__badge,
.dossier-elections .el-enbrief__label,
.dossier-elections .el-faq-item__exemple-titre,
.dossier-elections .el-hemicycle__total-label,
.dossier-elections .el-force-card__label,
.dossier-elections .el-parti-card__family,
.dossier-elections .el-parti-card__statut,
.dossier-elections .el-affinite__progress,
.dossier-elections .el-article-card__category {
  letter-spacing: normal;
  text-transform: none;
}

/* ----------------------------------------------------------------------------
   Interligne des textes suivis.

   Le thème pose --lh-body: 1.8, plus généreux que le 1.55-1.6 de la maquette
   FR : l'arabe empile diacritiques et hampes au-dessus et en dessous de la
   ligne, un interligne latin serre les paragraphes.

   Ne concerne que le texte de lecture — les étiquettes courtes gardent leur
   interligne compact, qui n'a pas ce problème.
   -------------------------------------------------------------------------- */
.dossier-elections .el-section__intro,
.dossier-elections .el-hero__chapo,
.dossier-elections .el-faq-item__answer,
.dossier-elections .el-faq-item__exemple-liste li,
.dossier-elections .el-timeline__text,
.dossier-elections .el-chiffre-card__body,
.dossier-elections .el-parti-card__text {
  line-height: var(--lh-body);
}