/* =============================================================================
   styles.css — Modèle de site de campagne, sénatoriales 2026.
   Sobre et éditorial : fond blanc cassé, encre foncée, un seul accent
   terracotta. Spectral auto-hébergée pour les titres, aucune ressource externe.
   ============================================================================= */

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --fond: #f3efe7;
  --fond-carte: #e9e3d6;
  --encre: #1c1a17;
  --encre-douce: #6a6357;
  --accent: #a8451a;
  --accent-fonce: #84340f;
  --accent-clair: #ead8ce;
  --filet: #d8d1c2;
  --filet-fort: #877b62;
  --nuit: #14213a;
  --nuit-texte: #c9d3e2;
  --nuit-sourde: #8a99b3;
  /* Éclairci : l'ancien #c9724a donnait 4,62:1 sur le bleu nuit, juste au-dessus
     du seuil AA, pour du très petit texte posé sur une photographie. 5,6:1. */
  --accent-sur-nuit: #d98459;
  /* Éclairci de #736a57 (4,66:1) à 6,2:1 : la liste des communes est le seul
     endroit du site où le lecteur cherche une information précise. */
  --communes: #5f5748;
  --largeur-max: 76rem;
  --marge-cahier: 8.25rem;
  --gouttiere-cahier: 2.5rem;
  --largeur-lecture: 38rem;
  --largeur-editoriale: 60rem;
  --bord: clamp(1.25rem, 5vw, 4.5rem);
  --police-titre: "Spectral", Georgia, "Times New Roman", Times, serif;
  --police-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  border-top: 3px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--nuit) 0 33.333%,
      var(--fond-carte) 33.333% 66.666%,
      var(--accent) 66.666% 100%
    )
    1;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.6em;
  /* Évite les titres dont la dernière ligne ne porte qu'un mot. */
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  /* Évite les lignes veuves en fin de paragraphe. */
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-fonce);
}

/* Utile sur la page des sources officielles, où l'on revient plusieurs fois. */
a:visited {
  color: var(--accent-fonce);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Lien d'évitement ----------------------------------------------------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--fond);
  padding: 0.75rem 1.25rem;
}

.evitement:focus {
  left: 0;
  color: var(--fond);
}

/* --- En-tête et navigation ------------------------------------------------ */

.entete {
  border-bottom: 1px solid var(--filet);
  background: var(--fond);
}

.entete-accueil {
  position: absolute;
  inset: 3px 0 auto;
  z-index: 20;
  border-bottom-color: rgb(255 255 255 / 22%);
  background: linear-gradient(180deg, rgb(7 15 30 / 78%), rgb(7 15 30 / 34%));
}

.entete-accueil .marque,
.entete-accueil .nav-liste a {
  color: #fff;
}

.entete-accueil .nav-liste a:hover {
  color: #fff;
  border-bottom-color: var(--accent-sur-nuit);
}

.entete-accueil .bouton-menu {
  color: #fff;
  border-color: rgb(255 255 255 / 68%);
  background: rgb(7 15 30 / 32%);
}

.entete-accueil .nav-mobile {
  border-top-color: rgb(255 255 255 / 22%);
  background: rgb(7 15 30 / 96%);
}

html:not(.js) .entete-accueil {
  position: relative;
  inset: auto;
  background: var(--nuit);
}

.entete-interieur {
  width: min(100%, calc(var(--largeur-max) + 2 * var(--bord)));
  max-width: none;
  margin: 0 auto;
  padding: 1.15rem var(--bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marque {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}

.nav-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
}

.nav-liste a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.86rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}

.nav-liste a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.bouton-menu {
  display: none; /* affiché par app.js uniquement (html.js) sur mobile */
  font: inherit;
  font-size: 0.95rem;
  background: none;
  border: 1px solid var(--encre);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  color: var(--encre);
  cursor: pointer;
}

html.js .bouton-menu {
  display: inline-block;
}

/* Navigation de bureau : masquée sur mobile (la navigation mobile prend le
   relais), affichée à partir de 52rem. */
.nav-bureau {
  display: none;
}

.nav-mobile {
  border-top: 1px solid var(--filet);
}

.nav-liste-mobile {
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 1.25rem 1.25rem;
}

.nav-liste-mobile a {
  display: block;
  padding: 0.6rem 0;
}

/* Sans JS : la navigation reste visible, tout reste utilisable. */
html.js .nav-mobile[data-fermee] {
  display: none;
}

@media (min-width: 52rem) {
  .nav-bureau {
    display: block;
  }

  .nav-mobile,
  html.js .bouton-menu {
    display: none;
  }
}

/* --- Structure principale ------------------------------------------------- */

.contenu {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

section {
  padding: 3.5rem var(--bord);
  border-top: 1px solid var(--filet);
}

.section-cahier {
  padding: 3.75rem var(--bord);
  border-top: 0;
  border-bottom: 1px solid var(--filet);
}

.grille-cahier {
  display: grid;
  grid-template-columns: var(--marge-cahier) minmax(0, 1fr);
  gap: var(--gouttiere-cahier);
  width: min(100%, var(--largeur-max));
  margin-inline: auto;
}

.marge-cahier {
  border-top: 2px solid var(--encre);
  padding-top: 0.65rem;
}

.corps-cahier {
  width: 100%;
  max-width: var(--largeur-editoriale);
  border-top: 1px solid var(--filet);
  padding-top: 0.65rem;
}

.corps-cahier.corps-large,
.corps-cahier.corps-composition {
  max-width: none;
}

.corps-cahier.corps-editorial {
  max-width: var(--largeur-editoriale);
}

/* La marge suit le défilement dans les longues sections (02 surtout) : numéro
   et libellé restent visibles, comme le titre courant d'un cahier. */
@media (min-width: 52rem) {
  .marge-cahier {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

.introduction-candidature p {
  color: var(--encre);
  font-size: 1.2rem;
  line-height: 1.65;
}

.numero-section {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--encre);
  margin: 0;
  line-height: 1;
}

.titre-section {
  font-size: 0.72rem;
  font-family: var(--police-texte);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0.55rem 0 0;
}

h2.titre-principal {
  font-size: clamp(1.7rem, 3.3vw, 2.3rem);
  font-weight: 500;
  max-width: 34ch;
}

.mesure {
  max-width: var(--largeur-lecture);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(42rem, calc(100svh - 5rem), 48rem);
  padding: clamp(8rem, 11vw, 10rem) var(--bord) 4.5rem;
  display: flex;
  align-items: center;
  border-top: none;
  border-bottom: 1px solid var(--nuit);
  background-color: var(--nuit);
  color: #fff;
}

/* La photographie et ses voiles bleu nuit vivent dans deux pseudo-éléments
   séparés : la photo (::before) est masquée à gauche pour fondre dans le
   fond nuit, les voiles (::after) couvrent toute la largeur sans masque.
   Un masque unique sur la pile entière interromprait aussi le voile au bord
   gauche de la photo, visible comme une coupure nette sur grand écran. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-image, none);
  /* Photo calée sur toute la hauteur du cadre, collée à droite : la
     composition entière reste visible (ciel en haut, eau en bas) sans rien
     rogner. Sa largeur dépend donc de la hauteur du hero :
     largeur = hauteur × ratio de l'image (1920/1277 ≈ 1,5035). Si la photo
     du hero est remplacée, ajuster ce ratio. */
  --photo-largeur: calc(1.5035 * clamp(42rem, 100svh - 5rem, 48rem));
  background-position: right bottom;
  background-size: auto 100%;
  background-repeat: no-repeat;
  /* Le fondu démarre exactement au bord gauche de la photo (100% − sa
     largeur) et se déroule sur elle sur 16 rem : un fondu calé sur le cadre
     finirait avant le début de la photo sur grand écran et laisserait
     apparaître son bord franc. Quand le cadre est plus étroit que la photo,
     les positions négatives replient le fondu hors cadre : pas de bord
     visible non plus. */
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% - var(--photo-largeur)),
    #000 calc(100% - var(--photo-largeur) + 16rem)
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% - var(--photo-largeur)),
    #000 calc(100% - var(--photo-largeur) + 16rem)
  );
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgb(7 15 30 / 97%) 0%,
      rgb(7 15 30 / 91%) 32%,
      rgb(7 15 30 / 72%) 60%,
      rgb(7 15 30 / 30%) 100%
    ),
    linear-gradient(0deg, rgb(7 15 30 / 52%) 0%, transparent 48%);
}

.hero-contenu {
  position: relative;
  z-index: 1;
  width: min(100%, var(--largeur-max));
  margin-inline: auto;
}

/* Les capitales espacées se lisent mal en masse — a fortiori sur deux à trois
   lignes de mobile, et pour une partie du lectorat visé. Le filet terracotta et
   la couleur suffisent à tenir le rôle d'estampille. */
.hero-repere {
  max-width: 68ch;
  padding-left: 1rem;
  border-left: 3px solid var(--accent-sur-nuit);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--accent-sur-nuit);
  margin-bottom: 1.75rem;
}

.hero h1 {
  max-width: 18ch;
  font-size: clamp(2.85rem, 5.3vw, 4.65rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 0.5em;
}

.hero h1 .ligne {
  display: block;
}

.hero-soustitre {
  font-family: var(--police-texte);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.45;
  color: var(--nuit-texte);
  max-width: 34ch;
  margin-bottom: 2.25rem;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.65rem;
}

.bouton {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 2px;
  font-weight: 500;
  /* Sans cela, le bouton hérite du line-height 1.65 du corps de texte : juste
     pour lire un paragraphe, beaucoup trop pour un libellé — 14 px de vide en
     trop dès que le texte passe sur deux lignes. */
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid var(--accent);
}

.bouton-principal {
  background: var(--nuit);
  border-color: var(--nuit);
  color: #fff;
}

.bouton-principal:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: #fff;
}

.bouton-principal:visited {
  color: #fff;
}

.hero .bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
}

.hero .bouton-principal:hover {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
}

.hero .bouton-principal:visited {
  color: #fff;
}

.bouton-secondaire {
  color: var(--encre);
  border-color: var(--filet-fort);
  background: transparent;
}

.bouton-secondaire:hover {
  background: var(--fond-carte);
  color: var(--encre);
}

.hero .bouton-secondaire {
  color: #fff;
  border-color: rgb(255 255 255 / 68%);
}

.hero .bouton-secondaire:hover {
  background: #fff;
  border-color: #fff;
  color: var(--nuit);
}

.bouton-secondaire:visited {
  color: var(--encre);
}

.hero .bouton-secondaire:visited {
  color: #fff;
}

.hero-identite {
  width: min(100%, 46rem);
  margin-top: 2.75rem;
  border-top: 1px solid var(--nuit-sourde);
  padding-top: 1.35rem;
  font-size: 0.95rem;
  color: var(--nuit-texte);
}

.hero-identite strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1rem;
  color: #fff;
}

.hero-identite span {
  display: block;
}

.hero-appartenance {
  margin-top: 0.55rem;
  color: var(--accent-sur-nuit);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.035em;
}

@media (min-width: 52rem) {
  .hero h1 {
    max-width: none;
  }
}

/* --- Section 01 : candidature --------------------------------------------- */

.portraits {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0;
}

@media (min-width: 40rem) {
  .portraits {
    grid-template-columns: 1fr 0.68fr;
    align-items: end;
  }
}

.portrait {
  background: transparent;
  border-left: 0;
  padding: 0;
}

.portrait-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  margin-bottom: 1rem;
  /* Cadrage uniforme quel que soit le fichier fourni. L'aspect-ratio réserve
     en outre l'espace avant le chargement (pas de décalage de mise en page),
     sans dépendre des attributs width/height. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.28) sepia(0.08) saturate(0.82) contrast(1.04);
  border-top: 3px solid var(--accent);
}

/* Emplacement vide de portrait (modèle de démonstration) : rectangle encre,
   mêmes gabarit et liséré que la photographie qu'il remplace. Le filet
   intérieur et le libellé discret en font un élément dessiné du cahier, pas
   un trou laissé vide. */
.portrait-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  margin-bottom: 1rem;
  background: var(--encre);
  border-top: 3px solid var(--accent);
  box-shadow: inset 0 0 0 1px rgb(243 239 231 / 14%);
}

.portrait-vide span {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: rgb(243 239 231 / 40%);
}

.portrait .role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
}

.portrait .nom {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
}

.portrait p {
  margin: 0;
}

.assume {
  margin-top: 2.5rem;
  background-color: var(--nuit);
  background-image:
    linear-gradient(
      90deg,
      rgb(7 15 30 / 94%) 0%,
      rgb(7 15 30 / 84%) 62%,
      rgb(7 15 30 / 66%) 100%
    ),
    var(--assume-image, none);
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  border-left: 3px solid var(--accent-sur-nuit);
  padding: 2.35rem 2.75rem;
  color: var(--nuit-texte);
  width: 100%;
  max-width: none;
}

.assume p {
  max-width: 37rem;
}

.assume h3 {
  font-size: 1.25rem;
  color: #fff;
}

@media (max-width: 39.99rem) {
  .assume {
    padding: 1.65rem 1.5rem;
  }
}

/* --- Section 02 : engagements --------------------------------------------- */

.combat {
  margin: 3.5rem 0 4.5rem;
}

.combat-entete {
  border-top: 1px solid var(--encre);
  padding-top: 1.25rem;
  margin-bottom: 0.7rem;
}

.combat h3 {
  max-width: 35rem;
  /* Nettement sous le h2 de section (1,62–2,15 rem) : les deux niveaux, à
     quasi la même échelle, ne se distinguaient plus à la lecture. */
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.combat-chapeau {
  color: var(--encre-douce);
  max-width: 35rem;
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.engagement {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0;
  padding: 1.55rem 0 1.7rem;
  border-top: 1px solid var(--filet);
}

.liste-engagements {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 72rem) {
  .liste-engagements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

.engagement-numero {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 0.28rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.engagement > :not(.engagement-numero) {
  grid-column: 2;
}

.engagement h4 {
  font-family: var(--police-titre);
  font-size: clamp(1.12rem, 2.1vw, 1.26rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}

/* L'engagement se lit maintenant en deux temps : un titre-repère, puis le
   texte concret — qui passe en encre pleine, sa place réelle dans la
   hiérarchie. L'ancienne glose grisée et son filet « Concrètement » ont
   disparu. */
.engagement-corps {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 39.99rem) {
  .engagement {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .engagement-numero {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
    margin-bottom: 0.45rem;
  }

  .engagement > :not(.engagement-numero) {
    grid-column: 1;
  }
}

/* --- Section 03 : mandat --------------------------------------------------- */

.points-mandat {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 40rem) {
  .points-mandat {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }
}

@media (min-width: 70rem) {
  .points-mandat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

.point-mandat .numero {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  display: block;
  margin-bottom: 0.25rem;
}

.point-mandat h3 {
  font-size: 1.2rem;
}

.section-nuit {
  background-color: var(--nuit);
  background-image:
    linear-gradient(
      90deg,
      rgb(8 18 37 / 94%) 0%,
      rgb(8 18 37 / 86%) 52%,
      rgb(8 18 37 / 91%) 100%
    ),
    linear-gradient(180deg, transparent 0%, rgb(8 18 37 / 38%) 100%),
    var(--mandat-image, none);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--nuit-texte);
  border-bottom-color: var(--nuit);
}

@media (max-width: 51.99rem) {
  .section-nuit {
    background-image:
      linear-gradient(rgb(8 18 37 / 92%), rgb(8 18 37 / 95%)),
      var(--mandat-image, none);
    background-position: center bottom;
  }
}

.section-nuit .marge-cahier {
  border-top-color: var(--nuit-sourde);
}

.section-nuit .corps-cahier {
  border-top-color: color-mix(in srgb, var(--nuit-texte) 28%, transparent);
}

.section-nuit .numero-section,
.section-nuit h2,
.section-nuit h3 {
  color: var(--fond);
}

.section-nuit .titre-section,
.section-nuit .point-mandat p {
  color: var(--nuit-texte);
}

.section-nuit .point-mandat {
  border-top: 1px solid color-mix(in srgb, var(--nuit-texte) 22%, transparent);
  padding-top: 1rem;
}

.section-nuit .point-mandat .numero {
  color: var(--accent-sur-nuit);
}

/* --- Appel au contact dans le flux --------------------------------------- */

.rappel-contact {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet-fort);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.rappel-contact p {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.2rem;
}

.rappel-contact a {
  flex: 0 0 auto;
  font-weight: 700;
}

.section-nuit .rappel-contact {
  border-top-color: var(--nuit-sourde);
}

.section-nuit .rappel-contact p {
  color: var(--fond);
}

.section-nuit .rappel-contact a,
.section-nuit .rappel-contact a:visited {
  color: var(--accent-sur-nuit);
}

@media (max-width: 39.99rem) {
  .rappel-contact {
    display: block;
  }

  .rappel-contact a {
    display: inline-block;
    margin-top: 0.45rem;
  }
}

/* --- Section 04 : communes ------------------------------------------------- */

.legende-communes {
  font-size: 0.95rem;
  color: var(--encre-douce);
  margin: 1.5rem 0 1.25rem;
}

/* C'est le seul endroit du site où le lecteur cherche une information précise :
   sa commune. En texte courant séparé par des points médians, il fallait lire ;
   en colonnes, l'œil descend et balaye l'alphabet. Registre d'index, cohérent
   avec « Le cahier des communes ». */
.index-communes {
  margin: 0;
  padding: 0;
  color: var(--communes);
  font-size: 0.8125rem;
  line-height: 1.75;
  columns: 12rem;
  column-gap: 2.5rem;
}

.groupe-communes {
  break-inside: auto;
  margin: 0 0 1.3rem;
}

.groupe-communes h3 {
  margin: 0 0 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--filet);
  color: var(--accent);
  font-family: var(--police-titre);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  break-after: avoid;
}

.groupe-communes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.groupe-communes li {
  display: block;
  break-inside: avoid;
}

/* Sur mobile, une colonne unique imposerait 198 lignes de défilement : on
   resserre la mesure pour en tenir deux. */
@media (max-width: 39.99rem) {
  .index-communes {
    columns: 9rem;
    column-gap: 1.25rem;
    font-size: 0.78rem;
  }

  .groupe-communes h3 {
    font-size: 1.25rem;
  }
}

/* --- Section 05 : contact -------------------------------------------------- */

.section-contact-photo {
  background-color: var(--nuit);
  background-image:
    linear-gradient(
      90deg,
      rgb(7 15 30 / 96%) 0%,
      rgb(7 15 30 / 88%) 50%,
      rgb(7 15 30 / 68%) 100%
    ),
    linear-gradient(0deg, rgb(7 15 30 / 48%), transparent 55%),
    var(--contact-image, none);
  background-position: center 56%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--nuit-texte);
  border-bottom-color: var(--nuit);
}

.section-contact-photo .marge-cahier {
  border-top-color: var(--nuit-sourde);
}

.section-contact-photo .corps-cahier {
  border-top-color: color-mix(in srgb, var(--nuit-texte) 32%, transparent);
}

.section-contact-photo .numero-section,
.section-contact-photo .titre-section,
.section-contact-photo h2 {
  color: #fff;
}

/* Le terracotta de base est trop sombre sur le bleu nuit : les liens de la
   section de contact reprennent la variante éclaircie. */
.section-contact-photo a {
  color: var(--accent-sur-nuit);
}

.section-contact-photo a:hover,
.section-contact-photo a:visited {
  color: #fff;
}

.contact-coordonnees {
  margin-top: 1.5rem;
  padding: 1.4rem 1.5rem;
  background: transparent;
  border-top: 1px solid var(--filet-fort);
  border-left: 0;
  padding-left: 0;
}

.contact-coordonnees p {
  margin: 0 0 0.4rem;
}

.contact-coordonnees .label {
  font-weight: 700;
}

.section-contact-photo .contact-coordonnees {
  border-top-color: var(--nuit-sourde);
}

@media (max-width: 51.99rem) {
  .section-contact-photo {
    background-image:
      linear-gradient(rgb(7 15 30 / 91%), rgb(7 15 30 / 95%)),
      var(--contact-image, none);
    background-position: center;
  }
}

/* --- Pied de page ----------------------------------------------------------- */

.pied {
  border-top: 3px solid var(--accent-sur-nuit);
  margin-top: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--nuit-texte);
  background-color: var(--nuit);
  background-image:
    linear-gradient(
      105deg,
      rgb(7 15 30 / 98%) 0%,
      rgb(7 15 30 / 93%) 52%,
      rgb(7 15 30 / 79%) 100%
    ),
    var(--pied-image, none);
  background-position: center 58%;
  background-size: cover;
}

.pied-contenu {
  width: min(100%, calc(var(--largeur-max) + 2 * var(--bord)));
  margin-inline: auto;
  padding: clamp(3.25rem, 7vw, 5.75rem) var(--bord) 2rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: minmax(20rem, 1.5fr) repeat(2, minmax(11rem, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.pied-grille.avec-contact {
  grid-template-columns: minmax(18rem, 1.4fr) repeat(3, minmax(10rem, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.pied-colonne > :last-child {
  margin-bottom: 0;
}

.pied .identite {
  font-family: var(--police-titre);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.65rem;
}

.pied-identite > p:not(.identite) {
  max-width: 33rem;
}

.pied-appartenance {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 24%);
  color: #fff;
  font-weight: 600;
}

.pied-titre {
  margin-bottom: 1rem;
  color: var(--accent-sur-nuit);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pied-navigation ul {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied a,
.pied a:visited {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 42%);
}

.pied a:hover {
  color: var(--accent-sur-nuit);
  text-decoration-color: currentColor;
}

.pied a:focus-visible {
  outline-color: var(--accent-sur-nuit);
}

.pied-contact p {
  overflow-wrap: anywhere;
}

.pied-contact .label {
  display: block;
  color: var(--nuit-sourde);
  font-size: 0.83rem;
  font-weight: 700;
}

.pied-bas {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgb(255 255 255 / 24%);
  color: var(--nuit-sourde);
  font-size: 0.88rem;
}

.pied-bas p {
  margin: 0;
}

.pied .note-traceurs {
  max-width: 38rem;
}

@media (max-width: 63.99rem) {
  .pied-grille,
  .pied-grille.avec-contact {
    grid-template-columns: minmax(18rem, 1.4fr) minmax(11rem, 1fr);
  }
}

@media (max-width: 39.99rem) {
  .pied {
    background-image:
      linear-gradient(rgb(7 15 30 / 94%), rgb(7 15 30 / 96%)),
      var(--pied-image, none);
    background-position: 58% center;
  }

  .pied-contenu {
    padding-top: 3.5rem;
  }

  .pied-grille,
  .pied-grille.avec-contact {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .pied-bas {
    display: grid;
  }
}

/* --- Pages secondaires ------------------------------------------------------- */

.page-simple {
  padding: 4rem var(--bord);
}

.page-document > .page-simple,
.page-document > section {
  width: min(100%, var(--largeur-max));
  margin-inline: auto;
}

.page-document > section {
  position: relative;
}

.page-document > section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.page-simple h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}

.sources-officielles ul {
  padding-left: 1.2rem;
}

/* Chiffres clés du scrutin (page « Comprendre l'élection ») : fiche. */

.chiffres-cles {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.5rem;
}

@media (min-width: 52rem) {
  .chiffres-cles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.chiffre-cle {
  background: var(--fond-carte);
  border-top: 3px solid var(--accent);
  padding: 1.25rem 1.25rem 1.1rem;
}

.chiffre-cle p {
  margin: 0;
}

.chiffre-valeur {
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.1;
}

.chiffre-libelle {
  font-size: 0.92rem;
  color: var(--encre-douce);
  margin-top: 0.3rem;
}

@media (max-width: 51.99rem) {
  .hero {
    min-height: 0;
    padding-top: 8.5rem;
    padding-bottom: 2.75rem;
  }

  .hero::before {
    background-image: var(--hero-image, none);
    /* Pleine hauteur également sur mobile ; l'excédent de largeur recadre
       vers la citadelle. */
    background-position: 62% bottom;
    /* Sur mobile la photo, plus large que le cadre, déborde à gauche : le
       masque peut être plus généreux. */
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  }

  .hero::after {
    background-image:
      linear-gradient(
        90deg,
        rgb(7 15 30 / 93%) 0%,
        rgb(7 15 30 / 84%) 58%,
        rgb(7 15 30 / 64%) 100%
      ),
      linear-gradient(0deg, rgb(7 15 30 / 72%) 0%, transparent 52%);
  }

  .hero h1 {
    font-size: clamp(2.4rem, 10.8vw, 3.3rem);
  }

  .hero-repere {
    padding-left: 0.75rem;
    font-size: 0.8rem;
  }

  .section-cahier {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .grille-cahier {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .marge-cahier {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .numero-section {
    font-size: 1.05rem;
  }

  .titre-section {
    margin-top: 0;
  }

  .corps-cahier {
    border-top: 0;
    padding-top: 0;
  }

  .hero-actions {
    gap: 0.65rem;
  }

  .bouton {
    width: 100%;
    text-align: center;
  }
}

/* --- Accessibilité et mouvement --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bouton,
  .nav-liste a {
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease;
  }
}

/* --- Impression -------------------------------------------------------------
   Le site doit pouvoir être imprimé et posé sur une table de conseil
   (direction « Le cahier des communes ») : fond blanc, encre noire, marges
   propres, un chapitre par page, liens externes suivis de leur URL. */

@media print {
  @page {
    margin: 2cm;
  }

  body {
    border-top: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .entete-accueil {
    position: static;
    background: #fff;
    border-bottom-color: #000;
  }

  .entete-accueil .marque {
    color: #000;
  }

  .assume {
    background: #fff;
    color: #000;
    border-color: #000;
  }

  .assume h3 {
    color: #000;
  }

  /* L'emplacement vide n'a rien à imprimer : rôle, nom et texte suffisent. */
  .portrait-vide {
    display: none;
  }

  .section-contact-photo {
    background: #fff;
    color: #000;
    border-color: #000;
  }

  .section-contact-photo .numero-section,
  .section-contact-photo .titre-section,
  .section-contact-photo h2 {
    color: #000;
  }

  .pied {
    border-top: 2px solid #000;
    background: #fff;
    color: #000;
  }

  .pied-contenu {
    width: 100%;
    padding: 1.5rem 0 0;
  }

  .pied .identite,
  .pied-appartenance,
  .pied-bas {
    color: #000;
  }

  .pied-appartenance,
  .pied-bas {
    border-color: #000;
  }

  /* Ni navigation, ni boutons, ni menu mobile sur papier. */
  .evitement,
  .entete nav,
  .bouton-menu,
  .nav-mobile,
  .hero-actions,
  .pied nav {
    display: none;
  }

  a {
    color: #000;
  }

  /* Les liens externes sont suivis de leur URL entre parenthèses. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Un chapitre par page (la première section suit l'en-tête, sans saut). */
  main section ~ section {
    break-before: page;
  }

  .hero,
  .section-cahier,
  section {
    padding-left: 0;
    padding-right: 0;
  }

  .hero {
    background: #fff;
    color: #000;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero-repere,
  .hero-soustitre,
  .hero-identite,
  .hero-identite strong {
    color: #000;
  }

  .hero-identite {
    border-color: #000;
  }

  .grille-cahier {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1.25rem;
  }

  .section-nuit {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 1rem;
  }

  .section-nuit .numero-section,
  .section-nuit h2,
  .section-nuit h3,
  .section-nuit .titre-section,
  .section-nuit .point-mandat p {
    color: #000;
  }

  .portrait,
  .engagement,
  .point-mandat {
    break-inside: avoid;
  }

  /* Sur papier, la liste des communes tient en trois colonnes plutôt qu'en
     une longue colonne étalée sur plusieurs pages. */
  .index-communes {
    columns: 3;
    font-size: 9pt;
    line-height: 1.6;
  }

  .groupe-communes h3 {
    color: #000;
    border-color: #000;
  }

}