/* ===== Polices auto-hébergées =====
   Source Serif 4 et Inter, sous licence SIL Open Font 1.1 — voir fonts/OFL.txt.
   Hébergées ici plutôt qu'appelées chez Google : le site ne contacte alors aucun
   domaine tiers, et l'adresse IP du visiteur n'est transmise à personne. Ce sont
   des polices variables : un seul fichier par famille et par sous-ensemble couvre
   toutes les graisses. Seuls latin et latin-ext sont embarqués — le reste (grec,
   cyrillique, vietnamien) ne sert pas ici. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Design tokens =====
   Règle qui rend le système infaillible :
   --terre (#92411F) ne touche JAMAIS un fond sombre.
   --terre-claire / --terre-lumineuse ne touchent JAMAIS un fond clair.
   Voir strategie/IDENTITE-VISUELLE.md §4.4 */
:root {
  /* Fonds */
  --creme: #faf7f1;
  --creme-sombre: #f2ede2;
  --bleu-nuit: #0d1a2b;
  --bleu-nuit-clair: #142944;

  /* Textes */
  --encre: #1b1a17;            /* 16,27:1 sur crème */
  --encre-douce: #57534b;      /*  7,16:1 sur crème */
  --creme-sur-nuit: #e8e3d8;   /* 13,68:1 sur bleu nuit */

  /* Accents — fond clair */
  --terre: #92411F;            /*  6,55:1 sur crème · 7,00:1 en fond de bouton texte blanc */
  --terre-sombre: #7a3618;     /* survol */

  /* Accents — fond sombre uniquement */
  --terre-claire: #c96f42;     /*  4,86:1 sur bleu nuit */
  --terre-lumineuse: #d98a5b;  /*  6,45:1 sur bleu nuit — préférée pour le petit texte */

  /* Structure */
  --filet: #d6cfc0;            /* décoratif uniquement — jamais de texte (1,45:1) */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(13, 26, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 26, 43, 0.10);
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Corps de texte à 19 px : lectorat de 50-70 ans, lecture mobile en extérieur */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--bleu-nuit);
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.narrow { max-width: 68ch; }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu-nuit);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ===== Focus clavier =====
   Anneau explicite plutôt que celui du navigateur, dont la couleur varie et
   passe mal sur le bleu nuit. Contrastes vérifiés : 6,55:1 sur crème,
   6,45:1 sur bleu nuit — au-delà du seuil de 3:1 exigé pour un élément non textuel. */
:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 3px;
}
.hero :focus-visible,
.section-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--terre-lumineuse);
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.28s ease;
}
/* Masquée au défilement vers le bas, ramenée au défilement vers le haut.
   Le décalage de 1 px évite qu'un liseré du filet reste visible. */
.site-header.est-masquee {
  transform: translateY(calc(-100% - 1px));
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--bleu-nuit);
}
.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 16px;
  font-weight: 500;
}
.primary-nav a {
  text-decoration: none;
  color: var(--encre-douce);
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-nav a:hover { color: var(--bleu-nuit); border-color: var(--terre); }
.nav-cta {
  background: var(--terre);
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: 999px;
  border: none !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.nav-cta:hover { background: var(--terre-sombre); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--bleu-nuit);
  border-radius: 2px;
}

/* ===== Hero =====
   Le voile est appliqué EN CSS, jamais cuit dans le fichier image : sous licence
   CC BY-SA, une image modifiée et enregistrée devient une œuvre dérivée qu'il
   faudrait republier sous la même licence. Voir IDENTITE-VISUELLE.md §3.5. */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bleu-nuit);   /* lisible dès la première frame */
  background-image:
    linear-gradient(
      to bottom,
      rgba(13, 26, 43, 0.93) 0%,
      rgba(13, 26, 43, 0.84) 45%,
      rgba(13, 26, 43, 0.90) 100%
    ),
    image-set(url("../img/hero-gravona.webp") type("image/webp"),
              url("../img/hero-gravona.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 58%;
  color: var(--creme);
  padding: 96px 0 88px;
}
.hero-inner { position: relative; }
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre-lumineuse);
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 52px;
}
/* Chaque segment reste d'un seul tenant : la coupure ne peut tomber
   qu'entre deux segments, jamais au milieu d'une mention. */
.eyebrow span { white-space: nowrap; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 22px;
}
/* Signature de campagne. Le nom reste le seul élément gras du hero : la signature
   passe en regular et descend d'un cran, ce qui porte le rapport de taille avec le
   h1 de 1,38 à 1,78. En dessous de 1,5, et à graisse identique, deux niveaux
   d'affichage fusionnent — c'était le cas. Le crénage négatif convenait au gras
   lourd, pas au regular : retiré. Le bandeau bleu nuit plus bas conserve la version
   longue de la ligne de verbes. */
.tagline {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--creme-sur-nuit);
  max-width: 620px;
  /* La sous-accroche a été retirée du hero le 26 août : c'est la signature qui porte
     désormais la respiration avant les boutons. La ligne de verbes longue subsiste
     sur le bandeau bleu nuit, plus bas. */
  margin-bottom: 52px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--terre);      /* blanc sur #92411F = 7,00:1 */
  color: #fff;
}
.btn-primary:hover { background: var(--terre-sombre); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--creme);
  border-color: rgba(250, 247, 241, 0.45);
}
.btn-ghost:hover { border-color: var(--creme); background: rgba(250, 247, 241, 0.08); }
.btn-large { min-height: 58px; padding: 16px 34px; font-size: 18px; }

/* ===== Sections ===== */
.section { padding: 88px 0; }
.section-alt { background: var(--creme-sombre); }
.section-dark {
  background: var(--bleu-nuit);
  color: var(--creme);
}
.section-dark h2 { color: #fff; }
.section-dark .kicker { color: var(--terre-lumineuse); }

.kicker {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terre);
  margin-bottom: 12px;
}
/* Trait d'ouverture de section. `currentColor` le fait suivre la couleur du
   surtitre : ocre sur fond clair, terre lumineuse sur fond sombre. */
.kicker::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: currentColor;
  margin-bottom: 16px;
}
.kicker.center::before { margin-left: auto; margin-right: auto; }
.section h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-bottom: 26px; }
.lede { font-size: 1.1875rem; line-height: 1.65; color: var(--encre); }
.section-dark .lede { color: var(--creme); }

.pull-quote {
  border-left: 3px solid var(--terre);
  padding: 4px 0 4px 22px;
  margin: 32px 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--bleu-nuit);
}
.pull-quote-light { color: var(--creme); border-color: var(--terre-lumineuse); }

/* Amorce qui introduit directement une citation, deux-points compris. Les 32 px
   de marge haute de .pull-quote laissaient la phrase orpheline au-dessus du
   vide ; à 14 px, l'amorce et la citation se lisent comme un seul bloc. */
.amorce-citation { margin-bottom: 0; }
.amorce-citation + .pull-quote { margin-top: 14px; }

/* Citation suivie de texte. .pull-quote n'a pas de marge basse — elle clôt le
   plus souvent une section — et les paragraphes n'ont pas de marge haute
   (p { margin: 0 0 1.1em }) : les deux se touchaient. On rétablit après la
   citation la même respiration que celle qui la précède. */
.pull-quote + * { margin-top: 32px; }

/* Bandeau de respiration entre l'enjeu et les propositions. Une seule ligne,
   rien d'autre : c'est sa sobriété qui lui donne son poids. */
.breaker {
  background: var(--bleu-nuit);
  padding: 64px 0;
  text-align: center;
}
.breaker p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.85rem);
  line-height: 1.35;
  color: var(--creme);
}
/* Chaque membre de phrase reste d'un seul tenant : sur mobile, la ligne
   « Rassembler les élus, examiner les textes, » dépassait la largeur
   disponible et se coupait au milieu. */
.breaker p span { white-space: nowrap; }

/* Disponibilité : énoncée comme un fait, détachée du reste, jamais comparative. */
.disponibilite {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--terre-lumineuse);
  border-top: 1px solid rgba(232, 227, 216, 0.22);
  border-bottom: 1px solid rgba(232, 227, 216, 0.22);
  padding: 20px 0;
  margin: 30px 0 6px;
}

/* ===== Portrait du candidat =====
   Vraie colonne alignée sur le titre de section plutôt qu'un flottant : à
   232 px dans une colonne de 815 px, l'image était trop petite et coupait le
   texte juste après le titre. */
/* Emplacement du portrait, en attendant la photo définitive. Mêmes proportions
   que l'image (720x1000) pour que la mise en page ne bouge pas au remplacement :
   la colonne, les marges et la hauteur de section restent identiques. */
/* Sur fond alterne, l'aplat garde un contraste doux avec le fond de section. */
.section-alt .portrait-attente { background: #ece6da; }

.portrait-attente {
  aspect-ratio: 720 / 1000;
  border-radius: var(--radius);
  background: #f1ece1;
  border: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-attente svg {
  width: 34%;
  height: auto;
  fill: none;
  stroke: #cdc4b2;
  stroke-width: 3;
  stroke-linecap: round;
}

.portrait-slot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* En V2 le portrait vit dans la colonne de droite de « En bref » : c'est la
   grille qui lui donne sa largeur, il n'a donc ni flottement ni largeur fixe. */
.portrait-slot { margin: 0; }

/* Sous-titres de la biographie : ils découpent un texte long en unités lisibles
   sur mobile, chacune portant un argument. */
/* Ocre et 20 px : au-dessus du corps de texte (19 px), pas en dessous. Un titre
   plus petit que le texte qu'il annonce ne se lit pas comme un titre. */
.sous-titre {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--terre);
  margin: 34px 0 8px;
}

/* Renvoi vers le parcours détaillé, et mention du format d'un document lié :
   discrets, ils ne doivent pas concurrencer le texte. */
.lien-parcours {
  font-size: 1.0625rem;
  color: var(--encre-douce);
  margin-top: 22px;
}
.mention-doc { color: var(--encre-douce); }

/* Encart document : détaché du corps de texte, il signale une pièce à
   consulter plutôt qu'un paragraphe à lire. Fond blanc sur la section crème
   sombre, ce qui suffit à le faire ressortir sans effet supplémentaire. */
.encart-document {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--radius);
}
.encart-intro {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
}
.encart-lien {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--terre);
  text-decoration: none;
}
.encart-lien:hover { text-decoration: underline; }
.encart-meta {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--encre-douce);
}
.lede a { color: inherit; text-decoration: underline; }
.lede a:hover { color: var(--terre); }

/* Résumé des trois priorités, en tête de page. Reprend mot pour mot les titres
   des piliers détaillés plus bas : toute modification doit être répercutée aux
   deux endroits, sous peine de contradiction. */
.resume-priorites {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.resume-priorites li {
  position: relative;
  padding-left: 22px;
  font-size: 1.1875rem;
  line-height: 1.55;
}
.resume-priorites li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 2px;
  background: var(--terre);
}
.resume-priorites b { font-weight: 600; }
.annonce-piliers { margin: 22px 0 0; }

/* Deux colonnes franches plutôt qu'un habillage : la liste des priorités est
   un conteneur de grille, elle ne contourne donc pas un flottant et restait
   coincée à sa largeur réduite même sous l'image. Ce bloc étant autonome, une
   grille ne crée ici aucune rupture de mesure avec la suite de la page. */
.enbref-grille,
.binome-grille { max-width: 68ch; }
.enbref-entete .kicker,
.enbref-grille > .kicker { margin-top: 0; }
.enbref-grille > h2 { margin-bottom: 26px; }
.enbref-texte > :first-child { margin-top: 0; }
/* Le titre garde les 26 px de respiration des autres sections : sorti dans son
   propre bloc, il perdait sa marge basse et le texte le touchait. */
.enbref-entete h2 { margin-bottom: 26px; }

/* Mise en page revue le 26 août. Le portrait démarre désormais à hauteur du titre
   et couvre les deux premières lignes ; les trois priorités passent en dessous, sur
   toute la largeur, où elles tiennent chacune sur une ligne au lieu de trois.
   L'ordre du HTML — titre, portrait, texte, priorités — donne l'empilement mobile
   voulu, sans avoir à réordonner en CSS.

   Deux colonnes seulement à partir de 1000 px : en dessous, le portrait comprimait
   la colonne de texte à ~440 px. La colonne image suit la largeur de la fenêtre. */
@media (min-width: 1000px) {
  .enbref-grille,
  .binome-grille {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 340px);
    column-gap: 56px;
    align-items: start;
  }
  /* Le surtitre et le titre occupent deux lignes distinctes : c'est ce qui permet
     à la photo de démarrer au niveau du titre, et non du surtitre. */
  .enbref-grille > .kicker      { grid-column: 1; grid-row: 1; }
  .enbref-grille > h2           { grid-column: 1; grid-row: 2; }
  .enbref-grille .enbref-texte  { grid-column: 1; grid-row: 3; }
  .enbref-grille .portrait-slot { grid-column: 2; grid-row: 2 / span 2; }
  .enbref-priorites             { grid-column: 1 / -1; grid-row: 4; margin-top: 30px; }

  /* La section « binôme » n'a pas de bloc de priorités : le titre y garde
     toute la largeur, comme avant. */
  .binome-grille .enbref-entete { grid-column: 1 / -1; }
  .binome-grille .enbref-texte  { grid-column: 1; grid-row: 2; }
  .binome-grille .portrait-slot { grid-column: 2; grid-row: 2; margin-top: 6px; }
}
@media (max-width: 999px) {
  .enbref-grille .portrait-slot,
  .binome-grille .portrait-slot { max-width: 240px; margin: 26px 0 30px; }
}
/* Section sans portrait : la grille à deux colonnes laisserait une colonne vide
   de 340 px à droite du texte, ce qui se lit comme une image manquante. On
   revient à la colonne unique et à la largeur de lecture confortable.
   Utilisé pour la section « binôme » depuis le 25 août — Sabrina n'autorise pas
   l'usage de son image. Retirer la classe dans le HTML pour rétablir. */
@media (min-width: 1000px) {
  .binome-grille.sans-portrait {
    display: block;
    max-width: 68ch;
  }
}

/* Deux entrées vers le détail : le programme d'abord, le parcours ensuite.
   Discrètes — elles guident sans concurrencer les boutons du hero. */
.enbref-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
}
/* Sorti du bloc de bas de section : le lien vers le parcours suit la citation,
   une fois que René a parlé de lui-même. */
.enbref-lien-parcours { margin: 22px 0 0; }

.enbref-liens a {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--terre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.enbref-liens a:hover { border-bottom-color: var(--terre); }

/* ===== Figures photo ===== */
.figure-photo { margin: 36px 0 0; }
.figure-bande { margin-top: 52px; }
.figure-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.figure-photo figcaption {
  margin-top: 10px;
  font-size: 15px;
  color: var(--encre-douce);
}

/* ===== Pillars ===== */
/* Chapeau des priorités. Placé au-dessus des piliers et non en dessous : poser le
   périmètre avant d'entrer dans le détail est une affirmation, l'ajouter après se lit
   comme un rattrapage. Ne prend aucune position sur le Grand Ajaccio, et n'oppose
   jamais les communes à la Collectivité — deux interdits de la plateforme V4. */
.priorites-chapeau {
  /* 760 et non 720 : à 720 px le texte raccourci du 27 août tombait sur quatre
     lignes dont la dernière ne faisait que deux mots. */
  max-width: 760px;
  margin: -6px auto 0;
  text-align: center;
  color: var(--encre-douce);
}
/* Centré, ce chapeau tient en trois lignes sur grand écran. Sur mobile il en fait
   neuf, et un texte centré au-delà de trois ou quatre lignes se lit mal : l'œil
   perd le bord gauche à chaque retour. Alignement à gauche en dessous de 720 px. */
@media (max-width: 720px) {
  .priorites-chapeau { text-align: left; }
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}
.pillar-num {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--terre);
  font-weight: 600;
  margin-bottom: 14px;
}
.pillar h3 { font-size: 1.3rem; margin-bottom: 14px; }
/* Demi-gras plutôt que gras : à 17 px, le 700 d'Inter alourdit une liste
   d'engagements déjà dense. Le 600 marque l'accroche sans la faire crier. */
.pillar b, .pillar-list b, .lede b { font-weight: 600; }
.pillar p { font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }
.pillar-list {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
}
.pillar-list li { margin-bottom: 8px; }
.pillar-principle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--bleu-nuit);
  border-top: 1px solid var(--filet);
  padding-top: 14px;
  margin-top: 6px;
  margin-bottom: 0;
}

/* ===== Charter ===== */
.charter {
  list-style: none;
  counter-reset: charter;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 16px;
}
.charter li {
  counter-increment: charter;
  position: relative;
  padding-left: 48px;
  font-size: 1.1875rem;
  line-height: 1.55;
}
.charter li::before {
  content: counter(charter);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--terre-lumineuse);
  color: var(--terre-lumineuse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--bleu-nuit);
  color: var(--creme-sur-nuit);
  padding: 36px 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.footer-inner p { margin: 0 0 8px; }

/* Mentions légales et données personnelles : un pavé long, qui doit être
   présent et lisible sans peser dans la page. 12,5 px, comme les crédits
   photo — c'est le plancher : en dessous, le texte cesse d'être lu.
   Le contraste reste de 11,6:1 sur le bleu nuit, très au-delà du minimum. */
.footer-inner .legal {
  color: var(--creme-sur-nuit);
  opacity: 0.85;
  font-size: 12.5px;
  line-height: 1.65;
}
.footer-inner .credits { margin-top: 16px; font-size: 12.5px; line-height: 1.6; opacity: 0.72; }
.footer-inner .credits a { color: var(--creme-sur-nuit); text-decoration: underline; }
.footer-inner .credits a:hover { color: #fff; }
.footer-inner .credits em { font-style: italic; }

/* ===== Reveal on scroll =====
   Amélioration progressive : l'effet n'existe que si JavaScript s'exécute.
   Sans lui, le contenu reste simplement visible — une page blanche serait
   une défaillance totale pour un lecteur dont le navigateur bloque les scripts. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .primary-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--filet);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .primary-nav.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .primary-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--filet); }
  .nav-cta { margin-top: 12px; justify-content: center; border-bottom: none !important; }
  .nav-toggle { display: flex; }
  /* Un membre de phrase par ligne, et le retour forcé du bureau devient inutile. */
  .breaker p span { display: block; }
  .breaker p br { display: none; }
  /* Chaque mention sur sa propre ligne, entière : « Élections sénatoriales de
     Corse-du-Sud » ne tient pas sur 375 px à 14 px sans être tronquée. */
  .eyebrow {
    font-size: clamp(11px, 3.3vw, 14px);
    letter-spacing: 0.03em;
    line-height: 1.7;
  }
  .eyebrow span { display: block; }
  .eyebrow span[aria-hidden] { display: none; }
  .hero { padding: 72px 0 84px; }
  .section { padding: 64px 0; }
  .enbref-grille .portrait-slot,
  .binome-grille .portrait-slot { max-width: 200px; margin: 22px 0 26px; }
  .hero-legende { right: 24px; bottom: 18px; font-size: 13px; }
}


/* ============================================================
   BANDEAU DE CONSENTEMENT
   Refuser a le même poids visuel qu'accepter : même taille, même
   solidité de fond, même niveau. La CNIL l'exige, et un refus rendu
   discret se retourne contre une campagne le jour où on le remarque.
   ============================================================ */
.consentement {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--bleu-nuit);
  border-top: 1px solid var(--bleu-nuit-clair);
  box-shadow: 0 -8px 24px rgba(13, 26, 43, 0.18);
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
}
.consentement[hidden] { display: none; }

.consentement-corps {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.consentement-texte {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--creme-sur-nuit);
}
.consentement-texte b { color: #fff; font-weight: 600; }

.consentement-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}
.consentement-actions .btn {
  min-height: 44px;          /* cible tactile */
  padding: 11px 26px;
  font-size: 15px;
  white-space: nowrap;
}
.btn-refus {
  background: var(--creme-sur-nuit);
  color: var(--bleu-nuit);
  border: 1px solid var(--creme-sur-nuit);
}
.btn-refus:hover { background: #fff; border-color: #fff; }

@media (max-width: 760px) {
  .consentement { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
  .consentement-corps { flex-direction: column; align-items: stretch; gap: 16px; }
  .consentement-actions .btn { flex: 1 1 0; padding: 11px 16px; }
}


/* ============================================================
   REVUE DE PRESSE
   Deux cartes blanches sur le fond crème, comme les encarts de
   document : la structure vient des cartes, pas d'un fond de
   section — la section « Contact » qui suit garde ainsi sa
   respiration sans qu'on ait à alterner les fonds.
   ============================================================ */
.presse-item { margin-top: 20px; }
.presse-item:first-of-type { margin-top: 28px; }

/* Le journal et la date avant le titre : c'est la source qui fait
   la crédibilité, pas le titre. Elle se lit donc en premier. */
.presse-source {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.presse-citation {
  margin: 16px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--filet);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--encre);
}

@media (max-width: 600px) {
  .presse-citation { padding-left: 14px; font-size: 1rem; }
}


/* ============================================================
   L'ÉQUIPE — brouillon
   Trois cartes typographiques, sans photo. Même langage que les
   encarts de document : carte blanche, filet, rayon de la charte.
   ============================================================ */
.equipe-chapeau { max-width: 68ch; }
.equipe-photo { margin: 30px 0 0; }
.equipe-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.equipe-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.equipe-carte {
  background: #fff;
  border: 1px solid var(--filet);
  border-top: 3px solid var(--terre);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
}
.equipe-nom {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--encre);
}
.equipe-role {
  margin: 6px 0 14px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terre);
}
.equipe-texte {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
}
.equipe-texte + .equipe-texte { margin-top: 10px; }
/* Même traitement que les liens de « En bref » : ocre, filet dessous, cible tactile de 44 px. */
.equipe-lien { margin: 12px 0 0; }
.equipe-lien a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--terre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.equipe-lien a:hover { border-bottom-color: var(--terre); }
.equipe-contact {
  margin: 30px 0 0;
  font-size: 1.0625rem;
  color: var(--encre);
}
.equipe-contact a { color: var(--terre); font-weight: 600; }
@media (max-width: 900px) {
  .equipe-grille { grid-template-columns: 1fr; gap: 16px; }
}