/* Témoignages · Pays bigouden sud 2030 — feuille de styles unique.
   Système extrait des maquettes (design/), fluide de 360 à 1440 px. */

@font-face {
  font-family: 'Vista Sans OT';
  src: url('/assets/fonts/vista-sans-ot-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vista Sans OT';
  src: url('/assets/fonts/vista-sans-ot-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --noir: #000000;
  --blanc: #ffffff;
  --gris: #2e2e2e;

  --axe-vivant: #ffcc00;
  --axe-vivant-texte: #000000;
  --axe-durable: #ffffff;
  --axe-durable-texte: #000000;
  --axe-solidaire: #e30613;
  --axe-solidaire-texte: #ffffff;

  --focus: #ffcc00;

  /* Hauteur de l'en-tête, fixé en haut de l'écran pendant le défilement. */
  --entete: 95px;
  --bandeau: 76px;
  /* Hauteurs au chargement : espace réservé en haut de page (ne changent pas au défilement). */
  --entete-0: 95px;
  --bandeau-0: 76px;
  --transition-entete: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Largeur maximale du contenu (logo, bandeau, article, mur, pied de page).
     Les fonds de couleur restent pleine largeur. */
  --largeur-max: 1440px;
  /* Marge latérale : 20 px à 360 px de large, 80 px à 1440 px, puis elle
     grandit pour centrer le contenu au-delà de --largeur-max. */
  --marge: max(clamp(20px, 5.556vw, 80px), calc((100vw - var(--largeur-max)) / 2 + 80px));
  --police: 'Vista Sans OT', 'Vista Sans', 'Alegreya Sans', sans-serif;
  --gras: 700;
}

/* Couleur d'axe portée par un ancêtre ; les composants lisent --accent. */
.axe-vivant    { --accent: var(--axe-vivant);    --sur-accent: var(--axe-vivant-texte); }
.axe-durable   { --accent: var(--axe-durable);   --sur-accent: var(--axe-durable-texte); }
.axe-solidaire { --accent: var(--axe-solidaire); --sur-accent: var(--axe-solidaire-texte); }

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

html {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  /* Ancres et focus clavier ne passent jamais sous l'en-tête fixe. */
  scroll-padding-top: calc(var(--entete) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Pages témoignages : le bandeau d'axe s'ajoute à l'en-tête fixe. */
/* Marge large : sur mobile, avant compactage, le bandeau peut passer sur deux lignes. */
html.page-temoignage body { padding-top: calc(var(--entete-0) + var(--bandeau-0)); }
html.page-temoignage { scroll-padding-top: calc(var(--entete) + var(--bandeau) + 48px); }
/* Mobile et tablette : bandeau d'ambition compact dès le chargement (une ligne,
   « Un territoire » masqué à l'écran mais lu par les lecteurs d'écran). */
@media (max-width: 959px) {
  :root, html.bandeau-multiple { --bandeau: 44px; --bandeau-0: 44px; }
  .bandeau-axe { padding-top: 6px; padding-bottom: 6px; }
  .bandeau-axe .bandeau-axe__intro {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .bandeau-axe .bandeau-axe__nom { font-size: 18px; }
  .bandeau-axe .bandeau-axe__theme { font-size: 15px; }
  .bandeau-axe .bandeau-axe__theme::before { height: 22px; }
  .bandeau-axe--multiple .bandeau-axe__nom { font-size: 16px; }
}

/* Desktop : en-tête et bandeau resserrés (bandeau sur une ligne), pour que la photo
   démarre plus haut. */
@media (min-width: 960px) {
  :root { --entete: 112px; --bandeau: 48px; --entete-0: 112px; --bandeau-0: 48px; }
  .bandeau-axe { padding-top: 8px; padding-bottom: 8px; }
  .bandeau-axe .bandeau-axe__axe { flex-direction: row; align-items: baseline; gap: 0; }
  /* « Un territoire » se replie en fondu en mode compact (reste lu par les lecteurs d'écran). */
  .bandeau-axe .bandeau-axe__intro {
    display: inline-block; max-width: 8em; margin-right: 0.35em; overflow: hidden; white-space: nowrap;
    transition: max-width var(--transition-entete), margin var(--transition-entete), opacity 0.25s ease;
  }
  .bandeau-axe .bandeau-axe__intro { font-size: 15px; }
  .bandeau-axe .bandeau-axe__nom { font-size: 20px; }
  .bandeau-axe .bandeau-axe__theme { font-size: 15px; }
  .bandeau-axe .bandeau-axe__theme::before { height: 24px; }
}

/* En-tête et bandeau compacts pendant le défilement (classe posée par entete.js). */
html.defile, html.defile.bandeau-multiple { --entete: 72px; --bandeau: 44px; }
@media (min-width: 960px) { html.defile { --entete: 88px; } }
.entete { transition: height var(--transition-entete); }
.entete__logo img { transition: width var(--transition-entete); }
.entete__nav a { transition: padding var(--transition-entete); }
.bandeau-axe { transition: top var(--transition-entete), min-height var(--transition-entete), padding var(--transition-entete); }
.bandeau-axe__nom, .bandeau-axe__theme { transition: font-size var(--transition-entete); }
.bandeau-axe__theme::before { transition: height var(--transition-entete); }
.temoignage__portrait { transition: top var(--transition-entete); }
html.defile .entete__logo img { width: 84px; }
@media (min-width: 960px) { html.defile .entete__logo img { width: 92px; } }
html.defile .bandeau-axe { padding-top: 6px; padding-bottom: 6px; flex-wrap: nowrap; }
html.defile .bandeau-axe .bandeau-axe__intro { max-width: 0; margin-right: 0; opacity: 0; }
html.defile .bandeau-axe__nom { font-size: 18px; }
html.defile .bandeau-axe__theme { font-size: 15px; }
html.defile .bandeau-axe__theme::before { height: 22px; }
html.defile .bandeau-axe--multiple .bandeau-axe__nom { font-size: 16px; }
html.defile .bandeau-axe__axe + .bandeau-axe__axe { padding-left: 12px; }

body {
  margin: 0;
  /* Espace réservé sous l'en-tête fixe (et le bandeau sur les témoignages). */
  padding-top: var(--entete-0);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 17px;
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--axe-vivant);
  color: var(--noir);
  padding: 12px 16px;
  font-weight: var(--gras);
}
.evitement:focus { left: 16px; }

.lien-souligne { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- En-tête ---------- */

.entete {
  /* Fixé par-dessus la page : son rétrécissement au défilement ne déplace pas le contenu. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5;
  background: var(--noir);
  height: var(--entete);
  /* Toujours un peu d'air au-dessus et au-dessous du logo. */
  padding: 10px var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.entete__logo { display: block; flex-shrink: 0; }
.entete__logo img { width: 120px; height: auto; }
@media (max-width: 719px) {
  :root { --entete: 76px; --entete-0: 76px; }
  .entete__logo img { width: 90px; }
  html.defile, html.defile.bandeau-multiple { --entete: 65px; }
  html.defile .entete__logo img { width: 72px; }
  html.defile .entete__nav a { padding: 11px 0; }
  /* Photo de la page témoignage : 24 px d'air de chaque côté ; la légende
     s'aligne sur la photo. */
  .temoignage__portrait { padding: 0 24px; }
  .temoignage__portrait .credit { padding-left: 0; padding-right: 0; }
}
.entete__nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 clamp(16px, 3vw, 40px);
}
.entete__nav a {
  display: inline-block;
  padding: 14px 0;
  font-size: clamp(15px, calc(15px + 2 * (100vw - 390px) / 1050), 17px);
  font-weight: var(--gras);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.entete__nav a[aria-current='page'] { text-decoration-thickness: 3px; }
/* « Donner mon avis » : bouton rouge (texte blanc, contraste 4,9:1). */
.entete__nav .nav-avis a, html.defile .entete__nav .nav-avis a {
  background: var(--axe-solidaire); color: var(--blanc);
  padding: 10px 16px; text-decoration: none;
}
.entete__nav .nav-avis a:hover { text-decoration: underline; }
@media (max-width: 719px) {
  .entete__nav .nav-large { display: none; }
}

/* ---------- Frise ---------- */

.frise { color: var(--blanc); height: auto; }
/* Frise colorée (accueil) : rouge, jaune, blanc en alternance, comme le pied de page. */
.frise--couleur .r { fill: var(--axe-solidaire); }
.frise--couleur .j { fill: var(--axe-vivant); }
.frise--couleur .b { fill: var(--axe-durable); }

/* ---------- Page témoignage ---------- */

.temoignage { display: grid; grid-template-columns: minmax(0, 1fr); }

.temoignage__portrait picture { display: block; }
.temoignage__portrait img { background: var(--gris); }
.temoignage__portrait img {
  width: 100%;
  aspect-ratio: 390 / 440;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
}

.bandeau-axe {
  /* Fixé sous l'en-tête, par-dessus la page. */
  position: fixed;
  top: var(--entete); left: 0; right: 0;
  z-index: 4;
  min-height: var(--bandeau);
  padding: 10px var(--marge);
  background: var(--accent);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
}
.bandeau-axe--multiple { --accent: var(--blanc); --sur-accent: var(--noir); flex-wrap: wrap; }
.bandeau-axe__axe { display: flex; flex-direction: column; }
/* Plusieurs axes : séparés par le même filet vertical que le thème. */
.bandeau-axe__axe + .bandeau-axe__axe { padding-left: 16px; border-left: 1px solid currentColor; }
.bandeau-axe__intro { font-size: 17px; line-height: 1.2; }
.bandeau-axe__nom { font-size: 24px; font-weight: var(--gras); line-height: 1.05; }
.bandeau-axe__theme {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  text-align: left;
}
.bandeau-axe__theme::before {
  content: '';
  width: 1px;
  height: 36px;
  flex-shrink: 0;
  background: currentColor;
}

.identite { padding: 24px var(--marge) 20px; }
.identite h1 {
  font-size: clamp(40px, calc(40px + 16 * (100vw - 390px) / 1050), 56px);
  font-weight: var(--gras);
  line-height: 1.1;
  hyphens: manual;
}
.identite__fonctions { margin-top: 4px; list-style: none; padding: 0; font-size: 18px; line-height: 1.35; }
.identite__fonctions li + li { margin-top: 4px; }
.citation {
  padding: 24px var(--marge) 0;
  font-size: clamp(22px, calc(22px + 4 * (100vw - 390px) / 1050), 26px);
  line-height: 1.3;
}

/* Lecteur audio */
.lecteur { padding: 24px var(--marge) 32px; }
.lecteur__natif { width: 100%; }
.lecteur__ui { display: flex; align-items: center; gap: 18px; }
.lecteur__ui[hidden] { display: none; }
.lecteur__bouton {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lecteur__bouton svg { width: 24px; height: 34px; }
.lecteur__bouton .icone-play { margin-left: 6px; }
.lecteur__bouton .icone-pause { display: none; }
.lecteur__bouton[data-etat='lecture'] .icone-play { display: none; }
.lecteur__bouton[data-etat='lecture'] .icone-pause { display: block; }
.lecteur__commandes { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Barre de position + bouton volume à sa droite. */
.lecteur__ligne { display: flex; align-items: center; gap: 10px; }
.lecteur__ligne .lecteur__position { flex: 1; min-width: 0; }
.volume { position: relative; flex-shrink: 0; }
.volume[hidden] { display: none; }
.volume__bouton {
  width: 44px; height: 44px; padding: 0; border: none; background: none; color: var(--blanc);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.volume__bouton svg { width: 24px; height: 24px; }
.icone-son__muet { display: none; }
.volume[data-muet] .icone-son__ondes { display: none; }
.volume[data-muet] .icone-son__muet { display: inline; }
/* Panneau étroit avec un curseur vertical (haut = plus fort). Desktop : il s'ouvre
   vers le bas, sous le bouton, pour ne jamais passer devant l'en-tête ni le bandeau
   fixes (z-index inférieur au leur). */
.volume__panneau {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 3;
  transform: translateX(-50%);
  padding: 10px 6px; background: var(--noir); border: 1px solid var(--blanc);
}
.volume__panneau[hidden] { display: none; }
.volume__curseur {
  display: block; width: 32px; height: 90px; margin: 0;
  writing-mode: vertical-lr; direction: rtl;
  accent-color: var(--accent); cursor: pointer;
}
.lecteur__titre { font-size: 15px; font-weight: var(--gras); }
.lecteur__position {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}
.lecteur__temps { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.lecteur__a-venir { font-size: 17px; border: 1px solid var(--blanc); padding: 16px; }
.lecteur__titre-barre, .lecteur__sep { display: none; }

/* Mobile et tablette : le lecteur (quand il y a un audio) est fixé en bas de
   l'écran pour être visible dès l'arrivée. La page réserve sa hauteur en bas,
   pour que rien (pied de page, focus clavier) ne passe dessous. */
@media (max-width: 959px) {
  html.avec-lecteur { --lecteur: 88px; scroll-padding-bottom: calc(var(--lecteur) + env(safe-area-inset-bottom) + 16px); }
  html.avec-lecteur body { padding-bottom: calc(var(--lecteur) + env(safe-area-inset-bottom)); }
  .lecteur[data-lecteur] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    min-height: var(--lecteur);
    padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
    background: var(--noir);
    border-top: 3px solid var(--accent);
    display: flex; flex-direction: column; justify-content: center;
  }
  .lecteur[data-lecteur] .lecteur__ui { gap: 14px; }
  .lecteur[data-lecteur] .lecteur__bouton { width: 56px; height: 56px; }
  .lecteur[data-lecteur] .lecteur__bouton svg { width: 19px; height: 27px; }
  .lecteur[data-lecteur] .lecteur__commandes { gap: 0; }
  /* Barre : nom à gauche, « 0:12 / 2:22 » à droite, curseur en dessous. */
  .lecteur[data-lecteur] .lecteur__commandes {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titre temps" "position position"; align-items: center; column-gap: 12px;
  }
  .lecteur[data-lecteur] .lecteur__titre { grid-area: titre; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lecteur[data-lecteur] .lecteur__titre-large { display: none; }
  .lecteur[data-lecteur] .lecteur__titre-barre { display: inline; }
  .lecteur[data-lecteur] .lecteur__temps { grid-area: temps; justify-content: flex-end; gap: 4px; }
  .lecteur[data-lecteur] .lecteur__sep { display: inline; }
  .lecteur[data-lecteur] .lecteur__ligne { grid-area: position; }
  /* Le panneau de volume s'ouvre au-dessus de toute la barre fixe. */
  .lecteur[data-lecteur] .volume { position: static; }
  .lecteur[data-lecteur] .volume__panneau { left: auto; right: calc(var(--marge) + 2px); top: auto; bottom: calc(100% + 8px); transform: none; }
  .lecteur[data-lecteur] .lecteur__temps { font-size: 13px; }
}

/* Transcription */
.transcription { padding: 40px var(--marge) 40px; }
@media (min-width: 960px) { .transcription { padding-top: 24px; } }
.transcription__tete {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.transcription__tete h2 { font-size: 16px; font-weight: 400; color: rgb(255 255 255 / 0.8); }
.transcription__tete .frise { width: 220px; flex-shrink: 1; min-width: 0; opacity: 0.8; }
.transcription__texte { max-width: 68ch; }
.transcription__texte p { font-size: 17px; line-height: 1.55; }
.transcription__texte p + p { margin-top: 16px; }

/* Crédit photo : légende juste sous le portrait. */
.credit { padding: 10px var(--marge) 0; font-size: 12px; line-height: 1.45; color: rgb(255 255 255 / 0.8); }

/* Portrait cliquable : ouvre la photo entière en grand (visionneuse.js). */
.temoignage__agrandir { display: block; cursor: zoom-in; }
.visionneuse {
  /* Plein écran sans la barre de défilement ; marges égales en haut et en bas
     (le bouton Fermer est dans la marge du haut) : photo centrée. */
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 60px 16px; border: none;
  background: rgb(0 0 0 / 0.94); color: var(--blanc);
}
.visionneuse[open] { display: flex; align-items: center; justify-content: center; }
.visionneuse::backdrop { background: rgb(0 0 0 / 0.94); }
.visionneuse__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-out; }
.visionneuse__fermer {
  position: absolute; top: 8px; right: 8px;
  min-width: 44px; min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--blanc); background: var(--noir); color: var(--blanc);
  font-weight: var(--gras); cursor: pointer;
}

/* Témoignage suivant */
/* Bloc pleine largeur, juste avant le pied de page. */
.suivant { padding: 40px var(--marge) 56px; }
.suivant__titre { font-size: 15px; margin-bottom: 12px; }
.suivant__lien {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  max-width: 560px;
}
.suivant__lien img { width: 72px; height: 96px; object-fit: cover; flex-shrink: 0; background: var(--gris); }
.suivant__texte { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.suivant__nom { font-size: 20px; font-weight: var(--gras); line-height: 1.2; }
.suivant__fonction { font-size: 15px; }
.suivant__fleche { width: 24px; height: 24px; flex-shrink: 0; }
.suivant__lien:hover .suivant__nom, .suivant__lien:focus-visible .suivant__nom { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .temoignage {
    /* La part belle au texte et à l'audio : photo sur 1/3, texte sur 2/3. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 64px;
    padding: 32px var(--marge) 64px;
    align-items: start;
  }
  .temoignage__portrait { grid-column: 1; grid-row: 1 / span 6; }
  .temoignage > :not(.temoignage__portrait) { grid-column: 2; }
  /* Toujours en 3:4, sur toute la largeur de la colonne : jamais recadrée davantage. */
  .temoignage__portrait img { aspect-ratio: 3 / 4; }
  .temoignage > :not(.temoignage__portrait), .temoignage .credit { padding-left: 0; padding-right: 0; }
}
/* Fenêtre haute : photo et texte à parts égales (photo ≈ 600 × 800 px), seulement
   si la photo tient entière à l'écran sous l'en-tête et le bandeau compacts :
   format au plus 4:3, ou au moins 1010 px de haut quand le contenu est plafonné. */
@media (min-width: 960px) and (max-aspect-ratio: 4/3), (min-width: 1440px) and (min-height: 1010px) {
  .temoignage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La photo (environ 540 px de haut au plus) accompagne le défilement dès que la
   fenêtre est assez haute pour l'afficher entière avec sa légende. */
@media (min-width: 960px) and (min-height: 760px) {
  .temoignage__portrait { position: sticky; top: calc(var(--entete) + var(--bandeau) + 24px); }
}

/* ---------- Accueil ---------- */

.intro {
  padding: 40px var(--marge) clamp(40px, 6vw, 88px);
  display: grid;
  gap: 24px 64px;
  align-items: end;
}
.intro__annee {
  display: block;
  font-size: clamp(96px, calc(96px + 124 * (100vw - 390px) / 1050), 220px);
  font-weight: var(--gras);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* « 2030 » : compteur de 2020 à 2030. Les unités font un tour complet
   (0 → 9 → 0) pendant que les dizaines passent de 2 à 3. Chiffres tabulaires :
   tous de même largeur. L'état final (2030) est l'état par défaut, donc sans
   animation (prefers-reduced-motion, en fin de fichier) on lit 2030. */
.intro__annee { display: flex; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; animation: fondu 0.5s ease-out both; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.compteur { display: block; height: 0.9em; overflow: hidden; }
.compteur__rouleau { display: flex; flex-direction: column; }
.compteur__rouleau > span { display: block; height: 0.9em; }
.compteur__rouleau--unites { transform: translateY(-9em); animation: compteur-unites 1.5s linear 0.2s both; }
.compteur__rouleau--dizaines { transform: translateY(-0.9em); animation: compteur-dizaines 1.5s linear 0.2s both; }
/* Généré : progression 1 - (1 - t)^4, rapide au début, douce à partir de 2026. */
@keyframes compteur-unites {
  0% { transform: translateY(-0.000em); }
  4.17% { transform: translateY(-1.409em); }
  8.33% { transform: translateY(-2.645em); }
  12.5% { transform: translateY(-3.724em); }
  16.67% { transform: translateY(-4.660em); }
  20.83% { transform: translateY(-5.465em); }
  25% { transform: translateY(-6.152em); }
  29.17% { transform: translateY(-6.734em); }
  33.33% { transform: translateY(-7.222em); }
  37.5% { transform: translateY(-7.627em); }
  41.67% { transform: translateY(-7.958em); }
  43.77% { transform: translateY(-8.100em); }
  45.83% { transform: translateY(-8.225em); }
  50% { transform: translateY(-8.438em); }
  54.17% { transform: translateY(-8.603em); }
  58.33% { transform: translateY(-8.729em); }
  62.5% { transform: translateY(-8.822em); }
  66.67% { transform: translateY(-8.889em); }
  70.83% { transform: translateY(-8.935em); }
  75% { transform: translateY(-8.965em); }
  79.17% { transform: translateY(-8.983em); }
  83.33% { transform: translateY(-8.993em); }
  87.5% { transform: translateY(-8.998em); }
  91.67% { transform: translateY(-9.000em); }
  95.83% { transform: translateY(-9.000em); }
  100% { transform: translateY(-9.000em); }
}
@keyframes compteur-dizaines {
  0% { transform: translateY(-0.000em); }
  4.17% { transform: translateY(-0.000em); }
  8.33% { transform: translateY(-0.000em); }
  12.5% { transform: translateY(-0.000em); }
  16.67% { transform: translateY(-0.000em); }
  20.83% { transform: translateY(-0.000em); }
  25% { transform: translateY(-0.000em); }
  29.17% { transform: translateY(-0.000em); }
  33.33% { transform: translateY(-0.000em); }
  37.5% { transform: translateY(-0.000em); }
  41.67% { transform: translateY(-0.000em); }
  43.77% { transform: translateY(-0.000em); }
  45.83% { transform: translateY(-0.125em); }
  50% { transform: translateY(-0.338em); }
  54.17% { transform: translateY(-0.503em); }
  58.33% { transform: translateY(-0.629em); }
  62.5% { transform: translateY(-0.722em); }
  66.67% { transform: translateY(-0.789em); }
  70.83% { transform: translateY(-0.835em); }
  75% { transform: translateY(-0.865em); }
  79.17% { transform: translateY(-0.883em); }
  83.33% { transform: translateY(-0.893em); }
  87.5% { transform: translateY(-0.898em); }
  91.67% { transform: translateY(-0.900em); }
  95.83% { transform: translateY(-0.900em); }
  100% { transform: translateY(-0.900em); }
}

/* « Une vision partagée » monte depuis un masque, ligne par ligne,
   quand le compteur atteint 2030. */
.intro__ligne { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.intro__ligne > span { display: block; animation: ligne-monte 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) 0.85s both; }
.intro__ligne + .intro__ligne > span { animation-delay: 0.95s; }
@keyframes ligne-monte {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

.intro h1 {
  font-size: clamp(40px, calc(40px + 32 * (100vw - 390px) / 1050), 72px);
  font-weight: var(--gras);
  line-height: 1.05;
}
.intro__axes { font-size: clamp(18px, calc(18px + 4 * (100vw - 390px) / 1050), 22px); font-weight: var(--gras); line-height: 1.35; list-style: none; padding: 0; }
/* Surlignage des ambitions : la copie colorée du mot se dévoile de gauche à
   droite après l'animation du titre (« 2030 » puis « Une vision partagée »).
   État final par défaut : sans animation, le mot est simplement surligné. */
.surligne { position: relative; display: inline-block; padding: 0 0.18em; margin: 0 -0.04em; transform: rotate(-2deg); }
/* Légère inclinaison « à la main », montante de gauche à droite (3° au plus). */
.intro__axes li:nth-child(2) .surligne { transform: rotate(-1.5deg); }
.intro__axes li:nth-child(3) .surligne { transform: rotate(-2.5deg); }
.intro__axes li + li { margin-top: 0.35em; }
.surligne__fond {
  position: absolute; inset: 0; padding: 0 0.18em;
  background: var(--accent); color: var(--sur-accent);
  clip-path: inset(0 0 0 0);
  animation: surligne 0.55s cubic-bezier(0.3, 0.6, 0.3, 1) 1.75s both;
}
.intro__axes li:nth-child(2) .surligne__fond { animation-delay: 1.95s; }
.intro__axes li:nth-child(3) .surligne__fond { animation-delay: 2.15s; }
@keyframes surligne {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.intro__texte { margin-top: 16px; font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px); line-height: 1.5; max-width: 520px; }
.intro .frise { margin-top: 28px; width: min(408px, 100%); }
@media (min-width: 960px) {
  .intro { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 72px; }
}

.mur { padding: 40px var(--marge) clamp(56px, 7vw, 96px); }
.mur__tete { display: flex; flex-direction: column; gap: 28px; margin-bottom: clamp(20px, 3vw, 48px); }
.mur__tete h2 {
  max-width: 680px;
  font-size: clamp(28px, calc(28px + 12 * (100vw - 390px) / 1050), 40px);
  font-weight: var(--gras);
  line-height: 1.15;
}
.filtres-bloc { display: flex; flex-direction: column; gap: 10px; }
.filtres-bloc[hidden] { display: none; }
.filtres-bloc__titre { font-size: 15px; font-weight: var(--gras); }
.filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.filtres button {
  min-height: 64px;
  padding: 8px 12px;
  border: 3px solid var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--gras);
  line-height: 1.1;
  cursor: pointer;
}
.filtres button[aria-pressed='false'] { background: var(--noir); color: var(--blanc); }
/* Bouton actif : un picto de la frise devant le libellé (l'état ne passe pas que
   par la couleur). Sa place est toujours réservée, et équilibrée à droite par un
   espace vide de même largeur : le bouton ne change jamais de taille. */
.filtres button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; }
.filtres button::after { content: ''; width: 0.8em; flex-shrink: 0; }
.filtres__picto { width: 0.8em; height: 0.8em; flex-shrink: 0; fill: currentColor; visibility: hidden; }
.filtres button[aria-pressed='true'] .filtres__picto { visibility: visible; }
@media (min-width: 960px) {
  .mur__tete { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 64px; }
  .filtres-bloc { flex-shrink: 0; }
  .filtres { display: flex; }
  .filtres button { min-height: 52px; padding: 0 24px; }
}

/* Chaque carte a 10 px d'air + 3 px de bordure (transparente au repos) :
   la grille déborde d'autant pour que les photos restent alignées sur la marge. */
.cartes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px clamp(16px, 2.2vw, 30px);
}
/* 1 colonne sur petit téléphone, puis 2, puis 3 au maximum. */
@media (min-width: 400px)  { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px)  { .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartes li[hidden] { display: none; }
/* Au survol et au focus : la photo zoome légèrement dans son cadre (la carte ne
   change pas de taille) et le nom se souligne. Le focus clavier garde en plus
   son cadre jaune. Zoom coupé sous prefers-reduced-motion. */
.carte { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.carte picture { display: block; overflow: hidden; background: var(--gris); }
.carte img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
  transform-origin: var(--cadrage, 50% 50%);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.carte:hover img, .carte:focus-visible img { transform: scale(1.12); }
.carte__cartel {
  flex-grow: 1;
  padding: 12px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.carte__nom { font-size: clamp(18px, calc(18px + 4 * (100vw - 390px) / 1050), 22px); font-weight: var(--gras); line-height: 1.2; }
.carte__fonction { font-size: clamp(14px, calc(14px + 2 * (100vw - 390px) / 1050), 16px); line-height: 1.3; }
.carte__ecouter { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.carte__ecouter svg { width: 10px; height: 14px; color: var(--accent); flex-shrink: 0; }
.carte:hover .carte__nom, .carte:focus-visible .carte__nom { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bloc « Et vous » ---------- */

.et-vous {
  background: var(--axe-solidaire);
  color: var(--axe-solidaire-texte);
  padding: clamp(40px, 5vw, 72px) var(--marge);
  display: grid;
  gap: 16px 64px;
  align-items: center;
}
.et-vous h2 {
  font-size: clamp(32px, calc(32px + 20 * (100vw - 390px) / 1050), 52px);
  font-weight: var(--gras);
  line-height: 1.12;
}
.et-vous__action { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 24px); }
.et-vous__texte { font-size: clamp(18px, calc(18px + 6 * (100vw - 390px) / 1050), 24px); line-height: 1.4; }
.bouton {
  display: inline-block;
  background: var(--noir);
  color: var(--blanc);
  font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
  font-weight: var(--gras);
  padding: 15px 24px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 960px) { .et-vous { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pages de texte ---------- */

.page-texte { padding: 40px var(--marge) 72px; max-width: calc(72ch + 2 * var(--marge)); }
.page-texte h1 { font-size: clamp(36px, calc(36px + 12 * (100vw - 390px) / 1050), 48px); font-weight: var(--gras); line-height: 1.1; margin-bottom: 28px; }
.page-texte h2 { font-size: 24px; font-weight: var(--gras); margin: 36px 0 12px; }
.page-texte p, .page-texte li { font-size: 17px; line-height: 1.55; }
.page-texte p + p, .page-texte ul, .page-texte ol { margin-top: 12px; }
.page-texte .liste { list-style: disc; padding-left: 1.3em; }
.page-texte .liste li + li { margin-top: 4px; }
.a-remplacer { border: 1px dashed var(--blanc); padding: 16px; }
/* ---------- Répondeur « Donner mon avis » ---------- */

/* Grand écran : titre, texte et « Vous préférez écrire ? » à gauche ;
   enregistreur à droite. Le conteneur des formulaires s'efface de la grille
   (simple div, sans rôle) pour que ses deux enfants s'y placent. */
@media (min-width: 1100px) {
  .page-texte.repondeur {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto; column-gap: clamp(48px, 6vw, 112px); row-gap: 24px; align-items: start;
  }
  .repondeur .repondeur__formulaires { display: contents; }
  .repondeur .repondeur__formulaires[hidden] { display: none; }
  .repondeur__tete { grid-column: 1; grid-row: 1; }
  .repondeur__ecrit { grid-column: 1; grid-row: 2; }
  .repondeur__vocal, .repondeur__merci { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; }
  .repondeur [data-annonce] { grid-column: 2; grid-row: 3; }
  .repondeur__savoir { grid-column: 2; grid-row: 3; margin-top: 0 !important; }
}

.repondeur__intro { font-size: clamp(18px, calc(18px + 4 * (100vw - 390px) / 1050), 22px) !important; line-height: 1.45; }
.repondeur__formulaires { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.repondeur__formulaires[hidden], .repondeur__vocal[hidden] { display: none; }
.repondeur__tete h1 { margin-bottom: 20px; }
.repondeur__merci[hidden], .enregistreur[hidden], .enregistreur__ecoute[hidden] { display: none; }
.repondeur__obligatoire, .repondeur__aide { font-size: 15px !important; color: rgb(255 255 255 / 0.85); }
/* Au repos : bloc blanc, bouton noir. Pendant l'enregistrement : tout passe au rouge. */
.enregistreur {
  border: none; margin: 0; min-width: 0;
  background: var(--blanc); color: var(--noir);
  padding: clamp(24px, 4vw, 40px);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.enregistreur[data-etat='enregistre'], .enregistreur[data-etat='fin'] { background: var(--axe-solidaire); color: var(--blanc); }
.enregistreur[data-etat='fin'] .enregistreur__cercle { background: var(--blanc); }
.enregistreur__bouton[data-etat='fin'] { cursor: progress; }
/* Légende flottante : elle s'affiche dans le bloc et non sur sa bordure. */
.enregistreur legend { float: left; width: 100%; padding: 0; margin-bottom: clamp(20px, 3vw, 28px); font-size: clamp(24px, calc(24px + 8 * (100vw - 390px) / 1050), 32px); font-weight: var(--gras); line-height: 1.15; }
.enregistreur legend + * { clear: both; }
.enregistreur :focus-visible { outline-color: var(--noir); }
.enregistreur[data-etat='enregistre'] :focus-visible { outline-color: var(--blanc); }
.enregistreur__ligne { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); }
.enregistreur__bouton {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 8.5em; padding: 0; background: none; border: none; color: inherit;
  font: inherit; font-size: 17px; font-weight: var(--gras); cursor: pointer;
}
.enregistreur__cercle { position: relative; width: clamp(104px, 12vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--noir); display: grid; place-items: center; transition: transform 0.2s ease, background-color 0.3s ease; }
.enregistreur__bouton:hover .enregistreur__cercle { transform: scale(1.05); }
.enregistreur__bouton:focus-visible { outline: none; }
.enregistreur__bouton:focus-visible .enregistreur__cercle { outline: 3px solid var(--noir); outline-offset: 4px; }
.enregistreur[data-etat='enregistre'] .enregistreur__bouton:focus-visible .enregistreur__cercle { outline-color: var(--blanc); }
.enregistreur__anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.enregistreur__anneau circle { fill: none; stroke-width: 6; }
.enregistreur__piste { stroke: transparent; }
.enregistreur__progression { stroke: transparent; transition: stroke-dashoffset 0.1s linear; }
.enregistreur[data-etat='enregistre'] .enregistreur__cercle { background: var(--blanc); }
.enregistreur[data-etat='enregistre'] .enregistreur__piste { stroke: rgb(227 6 19 / 0.15); }
.enregistreur[data-etat='enregistre'] .enregistreur__progression { stroke: var(--axe-solidaire); }
.enregistreur__rond { width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--axe-solidaire); transition: border-radius 0.2s ease, width 0.2s ease; }
.enregistreur__bouton[data-etat='enregistre'] .enregistreur__rond { width: 30%; border-radius: 4px; animation: enregistre 1.2s ease-in-out infinite; }
.enregistreur__bouton[data-etat='prepare'] { cursor: progress; }
.enregistreur__bouton[data-etat='prepare'] .enregistreur__rond { background: #8a8a8a; }
@keyframes enregistre { 50% { opacity: 0.4; } }
.enregistreur__libelle { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.enregistreur__bouton:hover .enregistreur__libelle { text-decoration-color: currentColor; }
.enregistreur__temps { font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 28px; white-space: nowrap; }
/* Petit écran : « restantes » / « enregistrées » passe sous le compteur. */
@media (max-width: 599px) {
  .enregistreur__ligne { gap: 20px; }
  .enregistreur .enregistreur__temps { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .enregistreur .enregistreur__chrono, .enregistreur .enregistreur__max { line-height: 1; }
  .enregistreur .enregistreur__max { margin-left: 3px; }
  .enregistreur__bouton { min-width: 0; }
  .enregistreur__chrono { font-size: 44px; }
}
.enregistreur__chrono { font-size: clamp(44px, calc(44px + 20 * (100vw - 390px) / 1050), 64px); font-weight: var(--gras); }
.enregistreur__max { font-size: clamp(17px, 1.6vw, 20px); margin-left: 10px; }
.enregistreur .repondeur__conseil { margin-top: 24px; }
.enregistreur .repondeur__aide { color: inherit; margin-top: 8px; }
.enregistreur .lien-bouton { color: inherit; }
.enregistreur__ecoute { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid currentColor; }
.enregistreur__ecoute audio { width: 100%; max-width: 480px; }
.lien-bouton { background: none; border: none; padding: 8px 0; color: var(--blanc); font: inherit; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.repondeur__ecrit summary { cursor: pointer; font-size: 18px; font-weight: var(--gras); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; width: fit-content; }
.repondeur__ecrit form { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.repondeur__ecrit form > label { font-size: 17px; margin-bottom: -12px; }
.repondeur__envoi { display: flex; flex-direction: column; gap: 20px; }
.enregistreur__ecoute .repondeur__envoi { width: 100%; margin-top: 12px; padding-top: 20px; border-top: 1px solid currentColor; }
.repondeur__ecrit textarea {
  width: 100%; padding: 12px; background: var(--noir); color: var(--blanc);
  border: 2px solid var(--blanc); font: inherit; font-size: 17px; line-height: 1.5; resize: vertical;
}
.repondeur__conseil { font-weight: var(--gras); }
.case { display: flex; align-items: flex-start; gap: 12px; }
.case input {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; margin: 1px 0 0; flex-shrink: 0;
  border: 2px solid var(--blanc); background: var(--noir); cursor: pointer;
}
.case input:checked {
  background: var(--axe-vivant) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--axe-vivant);
}
.case input[aria-invalid='true'] { outline: 3px solid var(--axe-vivant); outline-offset: 3px; }
.case label { font-size: 17px; line-height: 1.5; cursor: pointer; }
/* Bloc d'envoi dans le panneau blanc de l'enregistreur : couleurs inversées. */
.enregistreur .repondeur__obligatoire { color: inherit; }
.enregistreur .case input { border-color: var(--noir); background: var(--blanc); }
.enregistreur .case input:checked { background-color: var(--noir); border-color: var(--noir);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); }
.enregistreur .case input[aria-invalid='true'] { outline-color: var(--axe-solidaire); }
.enregistreur .repondeur__erreur { border-left-color: var(--axe-solidaire); }
.repondeur .enregistreur .bouton { background: var(--noir); color: var(--blanc); }
.pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.repondeur__erreur:empty { display: none; }
.repondeur__erreur { border-left: 4px solid var(--axe-vivant); padding: 8px 0 8px 16px; font-weight: var(--gras); }
.repondeur .bouton { background: var(--axe-vivant); color: var(--noir); align-self: flex-start; min-height: 52px; }
.repondeur .bouton:disabled { opacity: 0.6; cursor: wait; }
.repondeur__merci { margin-top: 32px; border: 2px solid var(--axe-vivant); padding: 24px; }
.repondeur__merci h2 { margin-top: 0 !important; }
.repondeur__savoir { margin-top: 32px !important; font-size: 15px !important; color: rgb(255 255 255 / 0.85); }

.mesure-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.mesure-choix .bouton { border: 1px solid var(--blanc); }

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

.pied { margin-top: auto; }
.et-vous { margin-bottom: clamp(32px, 4vw, 56px); }
.moquette {
  margin: 0 var(--marge);
  padding-top: 15px;
  height: 81px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 16px;
}
.moquette svg { width: 23px; height: 66px; flex-shrink: 0; }
.moquette .r { fill: var(--axe-solidaire); }
.moquette .j { fill: var(--axe-vivant); }
.moquette .b { fill: var(--axe-durable); }
.pied__bas {
  padding: 24px var(--marge) 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.pied__nom { font-weight: var(--gras); }
.pied__liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2vw, 28px); }
.pied__liens a { display: inline-block; padding: 12px 0; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
  .pied__bas { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 36px; }
}

/* Écrans peu hauts (zoom 200 %, téléphone à l'horizontale) : l'en-tête et le
   bandeau ne restent plus fixés, pour laisser la place au contenu (RGAA 10.11). */
@media (max-height: 520px) {
  .entete, .bandeau-axe { position: absolute; }
  html, html.page-temoignage { scroll-padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Cadrages des portraits — généré par build.py */
.c-florence-moses { --cadrage: 68% 60%; }
.c-guillaume-esteva { --cadrage: 47% 55%; }
.c-thibaut-alnet { --cadrage: 50% 45%; }
.c-catherine-artur { --cadrage: 65% 60%; }
.c-morgan-lambotin { --cadrage: 65% 60%; }
.c-frank-philippe { --cadrage: 35% 50%; }
.c-emma-zussy-pascal-peron { --cadrage: 45% 55%; }
.c-mobilites { --cadrage: 50% 45%; }
.c-reserve-naturelle-regionale { --cadrage: 30% 60%; }
.c-francoise-le-bourdon { --cadrage: 50% 60%; }
.c-camille-kerouedan { --cadrage: 45% 45%; }
.c-aquasud { --cadrage: 50% 50%; }
.c-morgane-loch { --cadrage: 50% 60%; }
.c-solene-garo { --cadrage: 40% 40%; }
.c-florence-stephan { --cadrage: 40% 40%; }
.c-mael-le-gall { --cadrage: 50% 50%; }
.c-tiffanie-train { --cadrage: 60% 45%; }