/* ==========================================================================
   Tout pour être heureux ? · feuille de style du site
   Ce fichier fait foi pour le design system. La page /design-system le montre
   en situation : toute évolution ici doit y être reportée.

   Sources de l'identité :
   - site actuel toutpouretreheureux.film : Inter, encre #212F3B, texte #40515D
     (son violet #3E00EE a été abandonné le 25/09 : il jurait avec la couverture) ;
   - couverture du livre : Garamond (Adobe Garamond Pro, remplacé à l'écran par
     EB Garamond, libre et auto-hébergeable) ;
   - couverture du livre : rouge #A5232F (titre et bandeau) ;
   - logo de la fondation : rose #F66587 et noir ;
   - affiche du film : les bleus de l'eau.

   Contrastes vérifiés (WCAG 2.1) : voir la section « Couleurs » de
   design-system.html. Ne jamais poser un texte sur une couleur sans vérifier
   le couple dans ce tableau.
   ========================================================================== */

/* ---------- Polices ---------- */

/* Inter, auto-hébergée (même fichier que le site actuel et captainmarketing.io).
   Fichier variable : une seule ressource couvre les graisses 100 à 900. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* EB Garamond, auto-hébergée (licence libre OFL, fichiers Google Fonts v33, sous-ensemble latin).
   Fichiers variables : graisses 400 à 800, romain et italique. */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: "EB Garamond";
  src: url("../fonts/ebgaramond-italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  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;
}

/* ---------- Jetons (tokens) ---------- */

:root {
  /* Neutres */
  --papier: #F7F4EF;        /* fond général, blanc cassé « page de livre » */
  --blanc: #FFFFFF;
  --encre: #212F3B;         /* titres et texte fort (site actuel) */
  --texte: #40515D;         /* texte courant (site actuel) : 7,5:1 sur papier */
  --texte-doux: #5B6873;    /* légendes, mentions : 5,2:1 sur papier */
  --filet: #DCD6CC;         /* séparateurs décoratifs uniquement */
  --bordure-champ: #6B7883; /* contour des champs de formulaire : 4,1:1 sur papier */

  /* Action : l'encre, soulignée pour les liens */
  --encre-survol: #111A22;  /* survol du bouton principal : 17,6:1 avec du blanc */

  /* Univers */
  --eau: #E2EDEF;           /* fond du hero, bleu très pâle de l'affiche */
  --mer: #1F5466;           /* zone documentaire */
  --mer-clair: #D0DDE1;     /* texte secondaire sur fond mer : 6:1 */
  --livre: #A5232F;         /* rouge de la couverture : 7,3:1 avec du blanc, 6,6:1 sur papier */
  --livre-fonce: #871B26;   /* survol */
  --rose: #F66587;          /* logo de la fondation : décor et fond du bouton de don (texte encre, 4,65:1).
                               Jamais de texte rose sur fond clair. */
  --rose-survol: #F88AA3;
  --rose-pale: #FCEBEF;     /* fond de la zone fondation */

  /* Messages d'erreur des formulaires */
  --erreur: #B3264F;        /* 6,35:1 sur blanc */

  /* Focus clavier */
  --focus: var(--encre);

  /* Typographie */
  --f-titre: "EB Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif;
  --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(2.5rem, 1.55rem + 3.8vw, 4.75rem);
  --t-1: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --t-2: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --t-3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --t-intro: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --t-base: 1.125rem;       /* 18 px : confort de lecture */
  --t-petit: 0.9375rem;
  --t-surtitre: 0.8125rem;

  /* Espacements (échelle de 4 px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gouttiere: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  /* Mise en page */
  --largeur: 72rem;         /* conteneur principal */
  --largeur-texte: 38rem;   /* longueur de ligne idéale pour le texte courant */

  /* Formes */
  --rayon: 6px;
  --rayon-lg: 16px;
  --ombre: 0 1px 2px rgba(33, 47, 59, 0.06), 0 8px 24px rgba(33, 47, 59, 0.08);
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titre);
  font-weight: 500;
  line-height: 1.1;
  color: var(--encre);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

/* Les liens se distinguent du texte par le soulignement, pas par la couleur */
a {
  color: var(--encre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}
a:hover { color: var(--encre); text-decoration-thickness: 2px; }

strong { color: var(--encre); font-weight: 600; }

/* Sigles : le sens complet est écrit dans le texte ; pas de pointillé qui ferait croire à un lien */
abbr[title] { text-decoration: none; }

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

/* Titres d'œuvres (livre, film) : en italique, selon l'usage typographique */
cite, .oeuvre { font-style: italic; }

/* Masqué à l'écran, lu par les lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : premier élément de chaque page */
.lien-evitement {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--encre);
  color: var(--blanc);
  font-weight: 600;
  border-radius: var(--rayon);
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; color: var(--blanc); }

/* ---------- Mise en page ---------- */

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.flux > * + * { margin-top: var(--e-4); }
.flux-large > * + * { margin-top: var(--e-5); }
.mesure { max-width: var(--largeur-texte); }

/* ---------- Typographie : classes de style (indépendantes du niveau de titre) ---------- */

.titre-hero { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.02em; }
.titre-1 { font-size: var(--t-1); }
.titre-2 { font-size: var(--t-2); }
.titre-3 { font-size: var(--t-3); line-height: 1.2; }

.intro {
  font-size: var(--t-intro);
  line-height: 1.55;
  color: var(--encre);
}

.petit { font-size: var(--t-petit); }
.mention { font-size: var(--t-petit); color: var(--texte-doux); }

/* Surtitre : petites capitales au-dessus d'un titre ou d'un extrait */
.surtitre {
  display: block;
  font-family: var(--f-texte);
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

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

.site-header {
  position: relative;
  z-index: 10;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.site-header .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 4.5rem;
}

/* Retour à l'accueil : le titre en toutes lettres, comme le demande Jérôme */
.marque {
  font-family: var(--f-titre);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.marque i { font-style: italic; }   /* « heureux ? » en italique, comme sur la couverture */
.marque:hover { color: var(--encre); text-decoration: underline; }

.nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  list-style: none;
  padding: 0;
}
.nav a:not(.btn) {
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  padding-block: var(--e-2);
}
.nav a:not(.btn):hover { text-decoration: underline; }
.nav .btn { min-height: 2.75rem; padding: var(--e-2) var(--e-4); font-size: var(--t-petit); }
.nav .btn[aria-current="page"] { background: var(--encre); color: var(--blanc); text-decoration: none; }
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
  cursor: pointer;
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; width: 100%; }
  .site-header.nav-ouverte .nav { display: block; }
  .site-header .conteneur { flex-wrap: wrap; padding-block: var(--e-3); }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--e-3); }
  .nav a:not(.btn) { display: block; padding-block: var(--e-3); border-top: 1px solid var(--filet); }
  .nav .btn { margin-top: var(--e-3); }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 3rem;             /* cible tactile confortable */
  padding: var(--e-3) var(--e-5);
  font-family: var(--f-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; }

/* Bouton principal en encre : jamais sur les zones sombres (y utiliser btn--clair) */
.btn--principal { background: var(--encre); color: var(--blanc); }
.btn--principal:hover { background: var(--encre-survol); color: var(--blanc); }

.btn--secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--secondaire:hover { background: var(--encre); color: var(--blanc); }

.btn--livre { background: var(--livre); color: var(--blanc); }
.btn--livre:hover { background: var(--livre-fonce); color: var(--blanc); }

/* Fondation : rose et noir, comme son logo */
.btn--don { background: var(--rose); color: var(--encre); }
.btn--don:hover { background: var(--rose-survol); color: var(--encre); }

/* Sur fond sombre (newsletter, documentaire) */
.btn--clair { background: var(--blanc); color: var(--encre); }
.btn--clair:hover { background: var(--eau); color: var(--encre); }
.btn--contour-clair { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.btn--contour-clair:hover { background: var(--blanc); color: var(--encre); }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

/* Lien qui ouvre un autre site dans un nouvel onglet.
   Toujours accompagné, dans le HTML, d'un texte masqué : « (nouvel onglet) ». */
.lien-externe::after {
  content: "↗";
  content: "↗" / "";   /* texte alternatif vide : la flèche n'est pas lue */
  display: inline-block;
  margin-left: 0.3em;
  font-weight: 400;
}

/* ---------- Zones (sections pleine largeur) ---------- */

.zone { padding-block: var(--section-y); }
.zone--blanc { background: var(--blanc); }
.zone--eau { background: var(--eau); }
.zone--rose { background: var(--rose-pale); }

.zone--encre,
.zone--mer {
  --focus: var(--blanc);
  color: var(--blanc);
}
.zone--encre { background: var(--encre); }
.zone--mer { background: var(--mer); }
.zone--encre :is(h1, h2, h3, h4, h5, h6, strong, .intro),
.zone--mer :is(h1, h2, h3, h4, h5, h6, strong, .intro) { color: var(--blanc); }
.zone--encre a:not(.btn),
.zone--mer a:not(.btn) { color: var(--blanc); }
.zone--encre .surtitre { color: #B9C3CB; }
.zone--mer .surtitre,
.zone--mer .mention { color: var(--mer-clair); }
.zone--encre .mention { color: #B9C3CB; }
.zone--livre { background: var(--blanc); }
.zone--livre .surtitre { color: var(--livre); }
.zone--rose .surtitre { color: var(--encre); }

/* ---------- Hero (accueil, centré sur Jérôme) ---------- */

/* Photo à GAUCHE, pleine hauteur, jusqu'au bord de l'écran : sur les trois
   portraits, Jérôme regarde vers la droite de l'image, donc vers le texte.
   Aucun fondu ni masque sur la photo (retour de Stéphane, 26/09).
   Dans le HTML, le texte vient AVANT la photo (le lecteur d'écran lit
   d'abord le titre) ; la grille replace la photo à gauche. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);   /* 4/8 : titre sur deux lignes, hero d'environ un écran */
  background: var(--eau);
}
.hero__photo {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: 34rem;
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 25%;   /* garde le visage dans le cadre */
}
.hero__texte {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  /* à droite, le texte s'aligne sur le bord du conteneur des autres zones */
  padding-inline: clamp(2rem, 0.5rem + 4.5vw, 5.5rem) max(var(--gouttiere), calc((100vw - var(--largeur)) / 2));
}
.hero__texte > * + * { margin-top: var(--e-5); }
.hero__recit { max-width: 36rem; }
.hero__recit p + p { margin-top: var(--e-4); }
.hero__signature {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--encre);
}

@media (max-width: 48rem) {
  .hero { grid-template-columns: 1fr; }
  .hero__photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 70vh; width: 100%; }
  .hero__photo img { object-position: 40% 20%; }
  .hero__texte { grid-column: 1; grid-row: 2; padding: var(--e-6) var(--gouttiere) var(--e-8); }
}

/* ---------- Bandeau « conviction » (accueil, sous le hero) ---------- */

.conviction { text-align: center; }
.conviction__texte {
  max-width: 42rem;
  margin-inline: auto;
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.45;
  color: var(--encre);
}
.conviction__texte p + p { margin-top: var(--e-3); }

/* ---------- En-tête de section avec lien « tout voir » ---------- */

.entete-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-5);
}

/* Liens de précommande secondaires, sous les boutons */
.autres-libraires { font-size: var(--t-petit); }

/* Champ piège anti-spam des formulaires Netlify : jamais affiché ni lu */
.champ-piege { display: none; }

/* ---------- Pages de lecture (livre, fondation) ---------- */

/* Colonne de lecture centrée : chaque section garde une longueur de ligne confortable */
.article > section { max-width: 44rem; margin-inline: auto; }
.article > section + section { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.article h2 { margin-bottom: var(--e-5); }
.article p + p { margin-top: var(--e-4); }
.article .citation,
.article .depliant,
.article .extrait { margin-top: var(--e-6); }

/* Titre du livre en tête de sa page : rouge de la couverture, « heureux ? » en italique */
.titre-livre { color: var(--livre); }
.titre-livre i { font-style: italic; }
.auteurs { font-size: var(--t-intro); color: var(--encre); }

/* Questions posées par le livre */
.questions { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.questions li {
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.3;
  color: var(--encre);
}

/* Fiche technique */
.fiche {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e-3) var(--e-5);
}
.fiche dt { font-size: var(--t-petit); font-weight: 600; color: var(--encre); padding-top: 0.15em; }
.fiche dd { margin: 0; }
@media (max-width: 30rem) {
  .fiche { grid-template-columns: 1fr; gap: 0; }
  .fiche dd + dt { margin-top: var(--e-3); }
}

/* Grille de cartes sur deux colonnes (cartes longues : pépites de la fondation) */
.grille-cartes.grille-cartes--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.carte--pepite .chiffre-cle .detail { display: block; margin-top: var(--e-1); font-family: var(--f-texte); font-size: var(--t-petit); color: var(--texte); }

/* Principes d'action (fondation) : trois colonnes de texte, sans cadre */
.principes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--e-5) var(--e-7);
}
.principes dt { font-family: var(--f-titre); font-size: 1.5rem; color: var(--encre); }
.principes dd { margin: var(--e-2) 0 0; }

/* Liste de personnes (équipe) */
.personnes { list-style: none; padding: 0; }
.personnes li { padding-block: var(--e-3); border-top: 1px solid var(--filet); }
.personnes li:last-child { border-bottom: 1px solid var(--filet); }
.personnes strong { display: block; }

/* Logo de la fondation (bleu #00778B : 4,55:1 sur rose pâle, 5,2:1 sur blanc) */
.logo-fondation { width: 100%; max-width: 26rem; height: auto; margin-inline: auto; }
/* Variante calée à gauche, au-dessus des trois leviers (accueil) */
.logo-fondation--gauche { max-width: 20rem; margin: 0 0 var(--e-6); }
@media (max-width: 48rem) {
  .visuel-en-premier { order: -1; }
  .logo-fondation { max-width: 16rem; margin-inline: 0; }
}

/* Photo rectangulaire simple (sans effet), ex. encadré « L'auteur » */
.photo { width: 100%; height: auto; border-radius: var(--rayon); }

/* ---------- Bloc « deux colonnes » (livre, fonds, documentaire) ---------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.duo--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* texte à gauche, visuel à droite */
@media (max-width: 48rem) {
  .duo, .duo--inverse { grid-template-columns: 1fr; }
}

/* Couverture du livre (image réelle ou emplacement provisoire) */
.couverture {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  box-shadow: 0 2px 4px rgba(33, 47, 59, 0.12), 0 24px 48px rgba(33, 47, 59, 0.18);
}
.couverture--provisoire {
  aspect-ratio: 15 / 23;          /* format annoncé : 15 × 23 cm */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12% 10%;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--f-titre);
  border: 1px solid var(--filet);
}
.couverture--provisoire .auteur { font-size: 1.25rem; }
.couverture--provisoire .titre { font-size: 2.25rem; line-height: 1.05; }
.couverture--provisoire .editeur { font-size: 1rem; font-style: italic; }

/* Affiche du film (image réelle ou emplacement provisoire) */
.affiche {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}
.affiche--provisoire {
  aspect-ratio: 574 / 812;
  display: grid;
  place-items: center;
  padding: var(--e-5);
  background: linear-gradient(180deg, #A9C3CB 0%, #3F7182 45%, #173F4D 100%);
  color: var(--blanc);
  font-family: var(--f-titre);
  font-size: 1.75rem;
  font-style: italic;
  text-align: center;
}

/* Date de parution, bandeau discret */
.pastille {
  display: inline-block;
  padding: var(--e-1) var(--e-3);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--encre);
  border-radius: 999px;
}

/* ---------- Citations ---------- */

.citation blockquote {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--encre);
}
.citation figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  color: var(--texte-doux);
}
.zone--mer .citation blockquote,
.zone--encre .citation blockquote { color: var(--blanc); }
.zone--mer .citation figcaption { color: var(--mer-clair); }

/* Citation courte en série (presse, spectateurs) */
.citations-courtes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-6);
  list-style: none;
  padding: 0;
}
.citations-courtes blockquote { font-size: 1.375rem; }

/* Extrait du livre (prologue) : on découvre un morceau du livre,
   pas une citation promotionnelle (demande de Jérôme, V5). */
.extrait {
  max-width: 40rem;
  padding-left: var(--e-6);
  border-left: 3px solid var(--encre);
}
.extrait .surtitre { margin-bottom: var(--e-4); }
.extrait__texte {
  font-family: var(--f-titre);
  font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  line-height: 1.5;
  color: var(--encre);
}
.extrait__texte p + p { margin-top: var(--e-4); text-indent: 1.5em; }

/* ---------- Chiffres clés ---------- */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5) var(--e-7);
}
.chiffres div { display: flex; flex-direction: column-reverse; }
.chiffres dt { font-size: var(--t-petit); }
.chiffres dd {
  margin: 0;
  font-family: var(--f-titre);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  line-height: 1;
  color: var(--encre);
}
.zone--mer .chiffres dd { color: var(--blanc); }
.zone--mer .chiffres dt { color: var(--mer-clair); }

/* ---------- Cartes ---------- */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--e-5);
  list-style: none;
  padding: 0;
}
.grille-cartes.grille-cartes--pile { grid-template-columns: 1fr; gap: var(--e-4); }
.grille-cartes__intro { margin-bottom: var(--e-4); }

.carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
}
.carte h3, .carte .titre-carte {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Carte cliquable : SEULES les cartes qui mènent quelque part s'animent.
   Le lien est posé sur le titre et étendu à toute la carte (::after), pour
   qu'un seul lien soit annoncé au lecteur d'écran. Une carte sans lien reste statique. */
.carte--lien {
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte--lien .titre-carte a {
  color: inherit;
  text-decoration: none;
}
.carte--lien .titre-carte a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.carte--lien .titre-carte a:focus-visible { outline: none; }
.carte--lien:hover,
.carte--lien:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(33, 47, 59, 0.08), 0 16px 32px rgba(33, 47, 59, 0.14);
}
.carte--lien:hover .titre-carte a { text-decoration: underline; text-decoration-thickness: 2px; }
.carte--lien:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.carte__suite {
  margin-top: auto;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
}
@media (prefers-reduced-motion: reduce) {
  .carte--lien:hover, .carte--lien:focus-within { transform: none; }
}

/* Carte « pépite » du fonds : programme → action → ce que finance le fonds → chiffre */
.carte--pepite .acteur { font-size: var(--t-petit); font-weight: 600; color: var(--encre); }
.carte--pepite .finance { font-size: var(--t-petit); color: var(--encre); }
.carte--pepite .chiffre-cle {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
  font-family: var(--f-titre);
  font-size: 1.375rem;
  color: var(--encre);
}

/* ---------- Agenda ---------- */

.agenda { list-style: none; padding: 0; }
.agenda-mois + .agenda-mois { margin-top: var(--e-8); }
.agenda-mois > h2 { margin-bottom: var(--e-4); }
.agenda-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--e-5);
  align-items: center;
  padding-block: var(--e-5);
  border-top: 1px solid var(--filet);
}
.agenda-item:last-child { border-bottom: 1px solid var(--filet); }
.agenda-item__date {
  font-family: var(--f-titre);
  line-height: 1;
  color: var(--encre);
  text-align: center;
}
.agenda-item__date .jour { display: block; font-size: 2.5rem; }
.agenda-item__date .mois { display: block; font-size: var(--t-petit); font-family: var(--f-texte); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.agenda-item__type { font-size: var(--t-surtitre); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.agenda-item h3 { font-size: 1.5rem; margin-block: var(--e-1); }
.agenda-item__lieu { font-weight: 600; color: var(--encre); margin-bottom: var(--e-1); }
@media (max-width: 40rem) {
  .agenda-item { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .agenda-item > .btn { grid-column: 1 / -1; }
}

/* ---------- Bloc dépliable (details / summary natifs) ---------- */

.depliant {
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
}
.depliant summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  padding-block: var(--e-4);
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::after {
  content: "+";
  font-family: var(--f-titre);
  font-size: 1.75rem;
  line-height: 1;
}
.depliant[open] summary::after { content: "−"; }
.depliant__contenu { padding-bottom: var(--e-5); }
.depliant__contenu > * + * { margin-top: var(--e-4); }

/* ---------- Formulaires ---------- */

.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ label { font-size: var(--t-petit); font-weight: 600; color: var(--encre); }
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 3rem;
  padding: var(--e-3) var(--e-4);
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
}
.champ input:focus-visible,
.champ textarea:focus-visible { outline-offset: 0; }
.champ .aide { font-size: var(--t-petit); color: var(--texte-doux); }
.champ .erreur { font-size: var(--t-petit); font-weight: 600; color: var(--erreur); }
.champ input[aria-invalid="true"] { border: 2px solid var(--erreur); }

/* Formulaire de contact : champs empilés */
.form-contact { display: grid; gap: var(--e-5); max-width: 40rem; }
.champ textarea { min-height: 12rem; resize: vertical; line-height: 1.5; }

/* Newsletter : sur fond encre */
.form-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--e-4);
  align-items: end;
}
.zone--encre .champ label { color: var(--blanc); }
.zone--encre .champ .aide { color: #B9C3CB; }
.zone--encre .champ input { border-color: var(--blanc); }
@media (max-width: 64rem) {
  .form-newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-newsletter .btn { justify-self: start; }
}
@media (max-width: 48rem) {
  .form-newsletter { grid-template-columns: 1fr; }
}

/* ---------- Presse ---------- */

.presse-annee + .presse-annee { margin-top: var(--e-8); }
.presse-annee > h2 { margin-bottom: var(--e-4); }
.presse { list-style: none; padding: 0; }
.presse-item {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--e-5);
  padding-block: var(--e-5);
  border-top: 1px solid var(--filet);
}
.presse-item:last-child { border-bottom: 1px solid var(--filet); }
.presse-item__quand { font-size: var(--t-petit); color: var(--texte-doux); }
.presse-item__format {
  display: block;
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.presse-item .flux > * + * { margin-top: var(--e-2); }
.presse-item__media { font-family: var(--f-texte); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--encre); letter-spacing: 0; }
.presse-item__titre { font-family: var(--f-titre); font-size: 1.375rem; line-height: 1.3; color: var(--encre); }
.presse-item__liens { font-size: var(--t-petit); }
@media (max-width: 40rem) {
  .presse-item { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* Documents à télécharger */
.documents { list-style: none; padding: 0; display: grid; gap: var(--e-3); }

/* ---------- Signature de fin de page ---------- */

.signature {
  text-align: center;
  padding-block: var(--e-8);
}
.signature p:first-child {
  font-family: var(--f-titre);
  font-size: var(--t-2);
  color: var(--encre);
}
.signature p + p { margin-top: var(--e-3); color: var(--texte-doux); }

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

.site-footer {
  padding-block: var(--e-8) var(--e-6);
  background: var(--encre);
  color: #D5DBE0;
  --focus: var(--blanc);
}
.site-footer a { color: var(--blanc); }
.site-footer h2 {
  font-family: var(--f-texte);
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B9C3CB;
  margin-bottom: var(--e-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--e-2); }
.site-footer__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--e-6);
}
.site-footer__bas {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid #3A4854;
  font-size: var(--t-petit);
  color: #B9C3CB;
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}