/* ==========================================================================
   Concorde — design system
   Une seule feuille pour tout le site : tokens de la charte (octobre 2026),
   base, mise en page, composants. Pas de build, pas de framework.
   Référence visuelle de chaque composant : /_design-system.html

   Parti pris : la charte est classique (bleus, Oswald, Source Sans 3) ;
   le site la pousse vers un registre éditorial moderne — grands aplats de
   bleu électrique, typographie géante, chiffres en contour, coupes en biais
   reprises de la découpe des lettres du logo, ruban défilant.
   ========================================================================== */

/* Polices auto-hébergées : polices variables, sous-ensemble latin, licence OFL */
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-italique-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de la charte */
  --bleu: #0031ff;
  --bleu-fonce: #00269e;
  --bleu-nuit: #00024f;
  --bleu-clair: #bdccf7;
  --gris: #e8e8e8;
  --blanc: #ffffff;

  /* Teintes dérivées, obtenues uniquement par mélange des couleurs de la charte */
  --bleu-lumiere: color-mix(in srgb, var(--bleu) 80%, var(--blanc));
  --bleu-pale: color-mix(in srgb, var(--bleu-clair) 28%, var(--blanc));
  --texte: var(--bleu-nuit);
  --texte-doux: color-mix(in srgb, var(--bleu-nuit) 74%, var(--blanc));
  --bordure: color-mix(in srgb, var(--bleu-nuit) 14%, var(--blanc));
  --bordure-champ: color-mix(in srgb, var(--bleu-nuit) 28%, var(--blanc));

  /* Dégradé des grands aplats bleus : lumière en haut à droite */
  --degrade-bleu: radial-gradient(120% 90% at 85% 0%, var(--bleu-lumiere) 0%, var(--bleu) 42%, var(--bleu-fonce) 100%);

  /* Couleur fonctionnelle hors charte : messages d'erreur des formulaires */
  --erreur: #b3261e;

  /* Typographie : Oswald pour les titres, Source Sans 3 pour le texte */
  --police-titre: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --taille-mega: clamp(3.1rem, 1rem + 8.4vw, 10rem);
  --taille-geant: clamp(6rem, 2rem + 16vw, 19rem);
  --taille-h1: clamp(2.8rem, 1.5rem + 5vw, 6.5rem);
  --taille-h2: clamp(2.1rem, 1.4rem + 2.8vw, 3.9rem);
  --taille-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --taille-declaration: clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem);
  --taille-chapo: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --taille-corps: 1.0625rem;
  --taille-petit: 0.9rem;
  --taille-surtitre: 0.95rem;

  /* Espacements */
  --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: 4.5rem;
  --section: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --gouttiere: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --pente: clamp(2rem, 1rem + 4vw, 5.5rem);

  /* Formes et mouvements */
  --largeur: 1280px;
  --largeur-texte: 66ch;
  --rayon: 6px;
  --rayon-l: 16px;
  --rayon-xl: 28px;
  --ombre: 0 24px 60px -24px rgb(0 2 79 / 0.45);
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hauteur-entete: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--police-texte);
  font-size: var(--taille-corps);
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-ouvert {
  overflow: hidden;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/* L'attribut hidden l'emporte toujours sur l'affichage défini par une classe */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--police-titre);
  line-height: 1.02;
  color: inherit;
  text-wrap: balance;
}

h1 {
  font-size: var(--taille-h1);
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  font-size: var(--taille-h2);
  font-weight: 700;
  text-transform: uppercase;
}

h3 {
  font-size: var(--taille-h3);
  font-weight: 600;
  line-height: 1.15;
}

p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

p {
  text-wrap: pretty;
}

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

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

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

/* Tout ce qui se clique affiche la main */
button:not(:disabled),
[role="button"],
summary,
select,
input[type="checkbox"],
input[type="radio"],
label:has(> input[type="checkbox"], > input[type="radio"]) {
  cursor: pointer;
}

.sur-fonce :focus-visible {
  outline-color: var(--blanc);
}

::selection {
  background: var(--bleu-clair);
  color: var(--bleu-nuit);
}

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

/* --------------------------------------------------------------------------
   3. Utilitaires et mise en page
   -------------------------------------------------------------------------- */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  top: -100px;
  left: var(--e-4);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--police-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lien-evitement:focus {
  top: var(--e-4);
  color: var(--blanc);
}

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.conteneur--etroit {
  width: min(100% - 2 * var(--gouttiere), 860px);
}

.pile > * + * {
  margin-top: var(--pile, var(--e-5));
}

.pile--large {
  --pile: var(--e-7);
}

.grille {
  display: grid;
  gap: var(--grille-espace, var(--e-5));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grille-min, 15rem)), 1fr));
}

.grille--duo {
  --grille-min: 22rem;
}

.actions {
  margin-top: var(--e-7);
}

/* Sections : chaque variante déclare sa couleur de fond dans --fond,
   réutilisée par la coupe en biais qui la prolonge vers le haut. */
.section {
  position: relative;
  padding-block: var(--section);
  background: var(--fond, transparent);
}

.section--serree {
  padding-block: calc(var(--section) * 0.6);
}

.section--blanc {
  --fond: var(--blanc);
}

.section--pale {
  --fond: var(--bleu-pale);
}

.section--clair {
  --fond: var(--bleu-clair);
}

.section--gris {
  --fond: var(--gris);
}

.section--bleu {
  --fond: var(--bleu);
  color: var(--blanc);
}

.section--nuit {
  --fond: var(--bleu-nuit);
  color: var(--blanc);
}

.section--bleu .surtitre,
.section--nuit .surtitre {
  color: var(--bleu-clair);
}

.section--bleu a:not(.bouton),
.section--nuit a:not(.bouton) {
  color: var(--blanc);
}

/* Coupe en biais : un triangle de la couleur de la section mord sur la
   section précédente, comme la découpe qui traverse les lettres du logo */
.coupe::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: var(--pente);
  background: var(--fond);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.entete-section {
  display: grid;
  gap: var(--e-4);
  max-width: 50rem;
  margin-bottom: var(--e-7);
  justify-items: start;
}

.entete-section--centre {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* Apparition au défilement (classe .js posée par site.js) */
.js .revele {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--courbe), transform 0.8s var(--courbe);
  transition-delay: var(--delai, 0s);
}

.js .revele.est-visible {
  opacity: 1;
  transform: none;
}

.delai-1 {
  --delai: 0.1s;
}

.delai-2 {
  --delai: 0.18s;
}

.delai-3 {
  --delai: 0.26s;
}

/* --------------------------------------------------------------------------
   4. Typographie éditoriale
   -------------------------------------------------------------------------- */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--taille-surtitre);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--bleu);
}

/* Repère du surtitre : le losange du ruban défilant, à la place d'un tiret */
.surtitre::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  transform: rotate(45deg);
}

.chapo {
  font-size: var(--taille-chapo);
  line-height: 1.55;
}

.texte-doux {
  color: var(--texte-doux);
}

.prose {
  max-width: var(--largeur-texte);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2,
.prose h3 {
  margin-top: 1.8em;
}

.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
}

.prose ul {
  padding-left: 1.2em;
}

/* Signature manuscrite sous le manifeste : tracée à la plume quand elle apparaît */
.signature-manuscrite {
  display: grid;
  gap: var(--e-2);
  justify-items: start;
  margin-top: var(--e-6);
}

.js .signature-manuscrite.revele {
  opacity: 1;
  transform: none;
}

.signature-manuscrite__trace {
  width: clamp(170px, 30vw, 260px);
  height: auto;
  overflow: visible;
}

.signature-manuscrite__trace path {
  fill: none;
  stroke: var(--bleu-nuit);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2; /* l'écart évite un point rond au départ de chaque trait encore caché */
  stroke-dashoffset: 0;
}

.js .signature-manuscrite.revele path {
  stroke-dashoffset: 1;
}

.js .signature-manuscrite.revele.est-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--duree, 0.4s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--depart, 0s);
}

.signature {
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Lettres en contour : chiffres, mots mis en relief.
   (currentColor vaudrait transparent ici : la couleur du trait passe par une variable) */
.contour {
  color: transparent;
  -webkit-text-stroke: 0.035em var(--couleur-contour, var(--bleu));
}

.une,
.bandeau-page,
.section--bleu,
.section--nuit {
  --couleur-contour: var(--blanc);
}

/* Mot ou nombre décoratif géant, en contour, derrière le contenu */
.geant {
  position: absolute;
  z-index: -1;
  font-family: var(--police-titre);
  font-size: var(--taille-geant);
  font-weight: 700;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--bleu-clair) 70%, var(--blanc));
  pointer-events: none;
  user-select: none;
}

/* Passage souligné au surligneur bleu clair */
.surligne {
  padding: 0 0.06em;
  background: linear-gradient(transparent 60%, var(--bleu-clair) 60%, var(--bleu-clair) 92%, transparent 92%);
  color: inherit;
}

/* --------------------------------------------------------------------------
   5. Boutons et liens d'action
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 0.85em 1.6em;
  border: 2px solid var(--bleu);
  border-radius: var(--rayon);
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duree), border-color var(--duree), color var(--duree), transform var(--duree);
}

.bouton::after {
  content: "→";
  transition: transform 0.25s var(--courbe);
}

.bouton--sans-fleche::after {
  content: none;
}

.bouton:hover {
  border-color: var(--bleu-fonce);
  background: var(--bleu-fonce);
  color: var(--blanc);
}

.bouton:hover::after {
  transform: translateX(4px);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--contour {
  background: transparent;
  color: var(--bleu);
}

.bouton--contour:hover {
  border-color: var(--bleu);
  background: var(--bleu);
  color: var(--blanc);
}

.bouton--blanc {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--bleu);
}

.bouton--blanc:hover {
  border-color: var(--bleu-nuit);
  background: var(--bleu-nuit);
  color: var(--blanc);
}

.bouton--contour-blanc {
  border-color: rgb(255 255 255 / 0.7);
  background: transparent;
  color: var(--blanc);
}

.bouton--contour-blanc:hover {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--bleu-nuit);
}

.bouton--compact {
  min-height: 42px;
  padding: 0.65em 1.2em;
  font-size: 0.95rem;
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--police-titre);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.lien-fleche::after {
  content: "→";
  transition: transform var(--duree);
}

.lien-fleche:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. En-tête et navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--bordure);
}

/* Fond flouté porté par un pseudo-élément : un backdrop-filter sur l'en-tête
   lui-même piégerait le panneau du menu mobile (position: fixed) */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: saturate(1.4) blur(10px);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
}

.entete__logo {
  flex: none;
}

.entete__logo img {
  width: auto;
  height: 46px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.nav__panneau {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  list-style: none;
  padding: 0;
}

.nav__lien {
  position: relative;
  display: block;
  padding: 0.6rem 0.75rem;
  font-family: var(--police-titre);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--bleu-nuit);
}

.nav__lien::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.3rem;
  left: 0.75rem;
  height: 2px;
  background: var(--bleu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--courbe);
}

.nav__lien:hover,
.nav__lien[aria-current="page"],
.nav__item--parent:focus-within > .nav__lien {
  color: var(--bleu);
}

.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__item--parent {
  position: relative;
}

.nav__sous-liste {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  padding: var(--e-2);
  list-style: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duree), transform var(--duree), visibility var(--duree);
}

.nav__item--parent:hover > .nav__sous-liste,
.nav__item--parent:focus-within > .nav__sous-liste {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__sous-liste a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bleu-nuit);
}

.nav__sous-liste a:hover,
.nav__sous-liste a[aria-current="page"] {
  background: var(--bleu-pale);
  color: var(--bleu);
}

.nav__bascule {
  display: none;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--bleu-nuit);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--bleu-nuit);
  font-family: var(--police-titre);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__bascule-icone,
.nav__bascule-icone::before,
.nav__bascule-icone::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duree), background-color var(--duree);
}

.nav__bascule-icone {
  position: relative;
}

.nav__bascule-icone::before,
.nav__bascule-icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav__bascule-icone::before {
  top: -6px;
}

.nav__bascule-icone::after {
  top: 6px;
}

.nav__bascule[aria-expanded="true"] .nav__bascule-icone {
  background: transparent;
}

.nav__bascule[aria-expanded="true"] .nav__bascule-icone::before {
  transform: translateY(6px) rotate(45deg);
}

.nav__bascule[aria-expanded="true"] .nav__bascule-icone::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 920px) {
  :root {
    --hauteur-entete: 68px;
  }

  .entete__logo img {
    height: 38px;
  }

  .nav__bascule {
    display: inline-flex;
  }

  .nav__panneau {
    position: fixed;
    inset: var(--hauteur-entete) 0 0;
    display: none;
    overflow-y: auto;
    padding: var(--e-5) var(--gouttiere) var(--e-7);
    background: var(--blanc);
  }

  .entete[data-menu-ouvert] .nav__panneau {
    display: block;
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__liste > li {
    border-bottom: 1px solid var(--bordure);
  }

  .nav__lien {
    padding: var(--e-4) 0;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .nav__lien::after {
    content: none;
  }

  .nav__sous-liste {
    position: static;
    min-width: 0;
    padding: 0 0 var(--e-3) var(--e-4);
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__panneau .bouton {
    width: 100%;
    margin-top: var(--e-5);
  }
}

/* --------------------------------------------------------------------------
   7. À la une (bandeau d'accueil)
   -------------------------------------------------------------------------- */
.une {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 2.5vw; /* le bleu passe sous le bout gauche du ruban incliné */
  background: var(--degrade-bleu);
  color: var(--blanc);
}

.une__grille {
  display: grid;
  gap: var(--e-5);
  min-height: min(calc(100vh - var(--hauteur-entete)), 940px);
}

@media (min-width: 900px) {
  .une__grille {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.une__texte {
  display: grid;
  gap: var(--e-5);
  align-self: center;
  justify-items: start;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(5rem, 3rem + 6vw, 9rem);
}

.une__texte > * {
  animation: monte 0.9s var(--courbe) both;
}

.une__texte > :nth-child(2) {
  animation-delay: 0.08s;
}

.une__texte > :nth-child(3) {
  animation-delay: 0.16s;
}

.une__texte > :nth-child(4) {
  animation-delay: 0.24s;
}

.une .surtitre {
  color: var(--bleu-clair);
}

.une__titre {
  font-size: var(--taille-mega);
  line-height: 0.88;
  letter-spacing: -0.005em;
}

.une__chapo {
  max-width: 36rem;
  font-size: var(--taille-chapo);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.92);
}

.une__portrait {
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 36rem);
  animation: monte 1.1s 0.1s var(--courbe) both;
}

.une__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4.1;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 999px 999px 0 0;
}

/* Profondeur au mouvement de la souris (variables posées par site.js) */
[data-profondeur] .une__portrait img,
[data-profondeur] .une__legende,
[data-profondeur].bloc__media img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-profondeur] .une__portrait img {
  transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -8px), 0);
}

[data-profondeur] .une__legende {
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
}

[data-profondeur].bloc__media img {
  transform: perspective(1000px) rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -5deg));
}

/* Portrait détouré posé sur un aplat bleu : la silhouette glisse devant le fond */
.bloc__media--detoure {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon-xl);
  background:
    radial-gradient(circle at 70% 25%, rgb(255 255 255 / 0.22), transparent 55%),
    var(--degrade-bleu);
}

.bloc__media--detoure img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

[data-profondeur].bloc__media--detoure img {
  transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -6px), 0) scale(1.04);
  transform-origin: bottom center;
}

.une__legende {
  position: absolute;
  bottom: clamp(4rem, 3rem + 3vw, 6.5rem);
  left: clamp(-2rem, -1rem - 1vw, -1rem);
  display: grid;
  padding: 0.85rem 1.15rem;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--bleu-nuit);
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.une__legende span {
  font-family: var(--police-texte);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bleu);
}

/* Entrée du haut de page : simple glissement, sans jouer sur l'opacité,
   pour que le texte reste lisible même si l'animation ne se joue pas
   (onglet en arrière-plan, robots d'indexation) */
@keyframes monte {
  from {
    transform: translateY(28px);
  }
}

@media (max-width: 899px) {
  .une__grille {
    min-height: 0;
    gap: 0;
  }

  .une__portrait {
    order: -1;
    justify-self: center;
    width: min(78%, 24rem);
    margin-top: var(--e-6);
  }

  .une__legende {
    left: -1rem;
    bottom: 2.5rem;
  }

  .une__texte {
    padding-top: var(--e-6);
  }
}

/* Ruban défilant, posé en biais sur le bas du bandeau */
.ruban-zone {
  position: relative;
  z-index: 3;
  overflow: hidden;
  margin-top: calc(-1 * (clamp(2rem, 1.5rem + 2vw, 3.5rem) + 2.5vw));
  padding-block: var(--e-5) var(--e-4);
}

.ruban {
  width: 112%;
  margin-left: -6%;
  overflow: hidden;
  padding-block: clamp(0.8rem, 0.6rem + 0.8vw, 1.3rem);
  background: var(--bleu-nuit);
  color: var(--blanc);
  box-shadow: 0 14px 30px -14px rgb(0 2 79 / 0.6);
  transform: rotate(-2deg);
}

.ruban__piste {
  display: flex;
  width: max-content;
  animation: defile 45s linear infinite;
}

.ruban__liste {
  display: flex;
  padding: 0;
  list-style: none;
}

.ruban__liste li {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.8rem + 1.5vw, 2.5rem);
  padding-right: clamp(1.2rem, 0.8rem + 1.5vw, 2.5rem);
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ruban__liste li::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--bleu);
  transform: rotate(45deg);
}

@keyframes defile {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   8. Bandeau des pages intérieures et sous-navigation
   -------------------------------------------------------------------------- */
.bandeau-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem) calc(clamp(3.5rem, 2.5rem + 5vw, 7.5rem) + var(--pente));
  background: var(--degrade-bleu);
  color: var(--blanc);
}

.bandeau-page .surtitre {
  color: var(--bleu-clair);
}

.bandeau-page__contenu {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
  max-width: 60rem;
}

.bandeau-page__contenu > * {
  animation: monte 0.9s var(--courbe) both;
}

.bandeau-page__contenu > :nth-child(2) {
  animation-delay: 0.08s;
}

.bandeau-page__contenu > :nth-child(n + 3) {
  animation-delay: 0.16s;
}

.bandeau-page .chapo {
  max-width: 44rem;
  color: rgb(255 255 255 / 0.92);
}

.bandeau-page .geant {
  right: -2vw;
  bottom: calc(var(--pente) - 0.12em);
  -webkit-text-stroke-color: rgb(255 255 255 / 0.22);
}

.sous-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: 0;
  list-style: none;
}

.sous-nav a {
  display: block;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--duree), color var(--duree), border-color var(--duree);
}

.sous-nav a:hover {
  border-color: var(--blanc);
}

.sous-nav a[aria-current="page"] {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--bleu);
}

/* --------------------------------------------------------------------------
   9. Compositions de l'accueil
   -------------------------------------------------------------------------- */

/* Section avec mot géant en arrière-plan */
.section--geant {
  isolation: isolate;
  overflow: hidden;
}

.section--geant .geant {
  top: clamp(1.5rem, 1rem + 2vw, 3rem);
  right: -1.5vw;
}

/* Déclaration à la première personne, en très grand corps */
.declaration {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .declaration {
    grid-template-columns: 0.75fr 1.25fr;
  }
}

.declaration__texte {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
}

.declaration__citation {
  font-size: var(--taille-declaration);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.005em;
}

.declaration__photo {
  position: relative;
  max-width: 28rem;
}

.declaration__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon-xl);
}

.etiquette {
  position: absolute;
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--rayon);
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--ombre);
}

.declaration__photo .etiquette {
  right: -1rem;
  bottom: 1.5rem;
}

/* Tuiles des quatre piliers */
.tuiles {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tuiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .tuiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tuile {
  --tuile-fond: var(--bleu);
  --tuile-texte: var(--blanc);
  --tuile-trait: var(--bleu-clair);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-7);
  height: 100%;
  min-height: clamp(18rem, 14rem + 9vw, 26rem);
  padding: var(--e-6) var(--e-5) var(--e-5);
  border-radius: var(--rayon-l);
  background: var(--tuile-fond);
  color: var(--tuile-texte);
  text-decoration: none;
  transition: transform 0.4s var(--courbe), box-shadow 0.4s var(--courbe);
}

a.tuile:hover {
  color: var(--tuile-texte);
  box-shadow: var(--ombre);
  transform: translateY(-8px);
}

.tuile--nuit {
  --tuile-fond: var(--bleu-nuit);
  --tuile-trait: var(--bleu-lumiere);
}

.tuile--clair {
  --tuile-fond: var(--bleu-clair);
  --tuile-texte: var(--bleu-nuit);
  --tuile-trait: var(--bleu);
}

.tuile--gris {
  --tuile-fond: var(--gris);
  --tuile-texte: var(--bleu-nuit);
  --tuile-trait: var(--bleu);
}

.tuile__numero {
  font-family: var(--police-titre);
  font-size: clamp(4.5rem, 3rem + 4vw, 7.5rem);
  font-weight: 700;
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 2px var(--tuile-trait);
}

.tuile h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.tuile p {
  margin-top: var(--e-3);
  opacity: 0.9;
}

.tuile__fleche {
  position: absolute;
  top: var(--e-5);
  right: var(--e-5);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity 0.3s, transform 0.4s var(--courbe);
}

a.tuile:hover .tuile__fleche {
  opacity: 1;
  transform: rotate(-45deg);
}

/* Parcours : grande photo et faits marquants */
.parcours {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .parcours {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.parcours__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon-xl);
}

.parcours__texte {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
}

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  list-style: none;
}

.pastilles li {
  padding: 0.4rem 1rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section--nuit .pastilles li,
.section--bleu .pastilles li {
  border-color: rgb(255 255 255 / 0.4);
}

/* Index des groupes de travail : lignes pleine largeur */
.index {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

@media (min-width: 960px) {
  .index {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .index__tete {
    position: sticky;
    top: calc(var(--hauteur-entete) + 2rem);
  }
}

.index__tete {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
}

.index__liste {
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--bleu-nuit);
}

.index__ligne {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e-5);
  align-items: center;
  padding: clamp(1.2rem, 0.8rem + 1.2vw, 2rem) var(--e-4);
  border-bottom: 1.5px solid var(--bleu-nuit);
  color: var(--bleu-nuit);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, padding 0.4s var(--courbe);
}

a.index__ligne:hover {
  padding-left: var(--e-6);
  background: var(--bleu);
  color: var(--blanc);
}

.index__numero {
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bleu);
}

a.index__ligne:hover .index__numero {
  color: var(--bleu-clair);
}

.index__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
}

.index__fleche {
  font-size: 1.5rem;
  transition: transform 0.3s var(--courbe);
}

a.index__ligne:hover .index__fleche {
  transform: translateX(6px);
}

/* Grand appel à l'action */
.appel {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
  max-width: 64rem;
}

.appel__titre {
  font-size: var(--taille-mega);
  line-height: 0.88;
}

.appel .chapo {
  max-width: 46rem;
  color: rgb(255 255 255 / 0.92);
}

/* --------------------------------------------------------------------------
   10. Composants des pages intérieures
   -------------------------------------------------------------------------- */

/* Bloc texte + image */
.bloc {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .bloc {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .bloc--inverse {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .bloc--inverse > .bloc__media {
    order: -1;
  }
}

.bloc__texte {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
}

.bloc__media {
  position: relative;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
}

.bloc__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon-xl);
}

/* Cartes */
.carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-5) var(--e-5);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--bleu);
  border-radius: var(--rayon-l);
  background: var(--blanc);
}

.carte h3 {
  font-size: 1.35rem;
  text-transform: uppercase;
}

.carte p {
  color: var(--texte-doux);
}

/* Pilier détaillé : grand numéro en contour + texte */
.pilier {
  display: grid;
  gap: var(--e-5);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-top: 1.5px solid var(--bleu-nuit);
}

@media (min-width: 860px) {
  .pilier {
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: var(--e-7);
  }
}

.pilier__numero {
  font-family: var(--police-titre);
  font-size: clamp(5rem, 3rem + 6vw, 10rem);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--bleu);
}

.pilier__texte {
  display: grid;
  gap: var(--e-4);
  max-width: 44rem;
}

.pilier__texte h2 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
}

/* Texte du manifeste */
.manifeste {
  max-width: 46rem;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.75;
}

.manifeste > p + p {
  margin-top: 1.1em;
}

.manifeste__fort {
  margin-block: 1.4em !important;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--bleu);
}

/* Lecture guidée (classe posée par site.js) : le paragraphe en cours est surligné,
   ceux qui restent à lire sont atténués */
.manifeste--guide > p {
  transition: opacity 0.6s var(--courbe);
}

.manifeste--guide > p:not(.est-lu):not(.signature) {
  opacity: 0.45;
}

.manifeste__surligne {
  background-image: linear-gradient(var(--bleu-clair), var(--bleu-clair));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.9s var(--courbe);
}

.est-en-cours > .manifeste__surligne {
  background-size: 100% 0.42em;
}

.progression-lecture {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 4px;
  background: var(--bleu);
  opacity: 0;
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: opacity 0.4s;
}

.progression-lecture.est-active {
  opacity: 1;
}

/* Questions fréquentes */
.faq {
  border-top: 1.5px solid var(--bleu-nuit);
}

.faq details {
  border-bottom: 1.5px solid var(--bleu-nuit);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s var(--courbe);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq__reponse {
  max-width: var(--largeur-texte);
  padding-bottom: var(--e-5);
  font-size: 1.1rem;
  color: var(--texte-doux);
}

.titre-moyen {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
}

.bandeau-page .pastilles li {
  border-color: rgb(255 255 255 / 0.45);
}

/* Repères chronologiques */
.reperes {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding: 0;
  list-style: none;
}

.reperes li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding: var(--e-5);
  border-top: 4px solid var(--bleu);
  border-radius: 0 0 var(--rayon-l) var(--rayon-l);
  background: var(--blanc);
}

.reperes strong {
  font-family: var(--police-titre);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bleu);
}

/* La ligne des repères se trace d'une date à l'autre, et chaque date s'allume à son passage */
.js .reperes li {
  border-top-color: var(--bleu-clair);
}

.js .reperes li::before,
.js .reperes li::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
}

.js .reperes li::before {
  right: calc(-1 * var(--e-4));
  height: 4px;
  background: var(--bleu);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--courbe) calc(var(--delai, 0s) * 2 + 0.2s);
}

.js .reperes li:last-child::before {
  right: 0;
}

.js .reperes li::after {
  width: 14px;
  height: 14px;
  margin: -5px 0 0 -2px;
  border: 3px solid var(--bleu);
  border-radius: 50%;
  background: var(--blanc);
  transform: scale(0);
  transition: transform 0.5s var(--courbe) calc(var(--delai, 0s) * 2 + 0.1s);
}

.js .reperes strong {
  color: var(--bleu-clair);
  transition: color 0.6s calc(var(--delai, 0s) * 2 + 0.5s);
}

.js .reperes li.est-visible::before {
  transform: scaleX(1);
}

.js .reperes li.est-visible::after {
  transform: scale(1);
}

.js .reperes li.est-visible strong {
  color: var(--bleu);
}

/* Deux colonnes : contenu principal + encadré */
.colonnes {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

@media (min-width: 960px) {
  .colonnes {
    grid-template-columns: 1.4fr 0.9fr;
    align-items: start;
  }
}

.encadre {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
  padding: var(--e-6);
  border-radius: var(--rayon-l);
  background: var(--bleu-pale);
}

.encadre--nuit {
  background: var(--bleu-nuit);
  color: var(--blanc);
}

.encadre--nuit .surtitre {
  color: var(--bleu-clair);
}

/* --------------------------------------------------------------------------
   11. Vidéo YouTube chargée au clic
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-xl);
  background: var(--bleu-nuit);
  box-shadow: var(--ombre);
}

.video img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transition: transform 0.8s var(--courbe);
}

.video__lancer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-5);
  border: 0;
  background: linear-gradient(0deg, rgb(0 2 79 / 0.85) 0%, rgb(0 2 79 / 0.15) 65%);
  color: var(--blanc);
  font: inherit;
  cursor: pointer;
}

.video:hover img {
  transform: scale(1.03);
}

.video__icone {
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bleu);
  box-shadow: 0 0 0 12px rgb(0 49 255 / 0.3);
  transition: transform 0.3s var(--courbe), background-color var(--duree), box-shadow 0.3s;
}

.video__icone svg {
  width: 38%;
  margin-left: 8%;
  fill: var(--blanc);
}

.video__lancer:hover .video__icone {
  background: var(--bleu-fonce);
  box-shadow: 0 0 0 18px rgb(0 49 255 / 0.25);
  transform: scale(1.06);
}

.video__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.video--a-venir .video__icone {
  background: rgb(255 255 255 / 0.18);
  box-shadow: none;
}

/* Accord demandé dans le cadre de la vidéo, quand les cookies de YouTube n'ont pas été acceptés */
.video__accord {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-4);
  padding: var(--e-5);
  background: rgb(0 2 79 / 0.92);
  color: var(--blanc);
  text-align: center;
}

.video__accord p {
  max-width: 34rem;
}

.video__accord a,
.bandeau-cookies a {
  color: inherit;
}

/* Bandeau de consentement aux cookies, en bas de l'écran à la première visite */
.bandeau-cookies {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  left: var(--e-4);
  z-index: 200;
  display: grid;
  gap: var(--e-4);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--e-5);
  border-radius: var(--rayon-l);
  background: var(--bleu-nuit);
  color: var(--blanc);
  box-shadow: 0 20px 50px -20px rgb(0 2 79 / 0.8);
}

.bandeau-cookies h2 {
  margin-bottom: var(--e-2);
  font-size: 1.3rem;
}

.bandeau-cookies p {
  font-size: 0.95rem;
}

.bandeau-cookies__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

@media (min-width: 720px) {
  .bandeau-cookies {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   12. Formulaires
   -------------------------------------------------------------------------- */
.formulaire {
  display: grid;
  gap: var(--e-4);
}

.champ {
  display: grid;
  gap: var(--e-2);
}

.champ > label,
.champ__libelle {
  font-size: 0.95rem;
  font-weight: 600;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--bordure-champ);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  font: inherit;
  transition: border-color var(--duree), box-shadow var(--duree);
}

.champ textarea {
  min-height: 10rem;
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px rgb(0 49 255 / 0.18);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--erreur);
}

.champ__aide {
  font-size: var(--taille-petit);
  color: var(--texte-doux);
}

.champs-duo {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 640px) {
  .champs-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.case {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--taille-petit);
  line-height: 1.45;
}

.case input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem 0 0;
  accent-color: var(--bleu);
}

/* Champ piège invisible pour les robots : jamais rempli par un humain */
.pot-de-miel {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__message {
  padding: var(--e-4);
  border-radius: var(--rayon);
  font-weight: 600;
}

.formulaire__message:empty {
  display: none;
}

.formulaire__message--succes {
  border-left: 4px solid var(--bleu);
  background: var(--bleu-pale);
  color: var(--bleu-nuit);
}

.formulaire__message--erreur {
  border-left: 4px solid var(--erreur);
  background: color-mix(in srgb, var(--erreur) 8%, var(--blanc));
  color: var(--erreur);
}

/* --------------------------------------------------------------------------
   12 bis. Collecte : pages d'entrée (montants, formules) et tunnel de paiement
   Le tunnel (/don/, /adhesion/) est plein écran : ni en-tête, ni pied de page,
   une barre minimale, une progression, un récapitulatif toujours visible.
   -------------------------------------------------------------------------- */

/* Cartes de montant et de formule, utilisées en entrée de tunnel et dans le tunnel */
.montants {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .montants {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.montant {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.3rem;
  min-height: 6.5rem;
  padding: var(--e-4) var(--e-3);
  border: 2px solid var(--bordure-champ);
  border-radius: var(--rayon-l);
  background: var(--blanc);
  color: var(--bleu-nuit);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duree), background-color var(--duree), color var(--duree), transform 0.25s var(--courbe), box-shadow 0.25s var(--courbe);
}

.montant input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.montant:hover {
  border-color: var(--bleu);
  color: var(--bleu-nuit);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgb(0 2 79 / 0.5);
}

.montant__valeur {
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bleu);
}

.montant__fiscal {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--texte-doux);
}

/* Coût réel après réduction d'impôt, mis en avant */
.montant__fiscal strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bleu-nuit);
}

.montant:has(input:checked) .montant__fiscal strong {
  color: inherit;
}

.montant__libelle {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.montant:has(input:checked) {
  border-color: var(--bleu);
  background: var(--bleu);
  color: var(--blanc);
  box-shadow: 0 14px 30px -16px rgb(0 49 255 / 0.9);
}

.montant:has(input:checked) .montant__valeur,
.montant:has(input:checked) .montant__fiscal {
  color: var(--blanc);
}

.montant:has(input:focus-visible) {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

/* Variante formule : libellé et durée en plus du montant */
.montants--formules {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .montants--formules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.montants--formules .montant {
  justify-items: start;
  min-height: 8.5rem;
  padding: var(--e-5);
  text-align: left;
}

/* Explication fiscale chiffrée */
.fiscal {
  display: grid;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-6);
  border-radius: var(--rayon-l);
  background: var(--bleu-nuit);
  color: var(--blanc);
}

@media (min-width: 720px) {
  .fiscal {
    grid-template-columns: auto 1fr;
    gap: var(--e-6);
  }
}

.fiscal__chiffre {
  font-family: var(--police-titre);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 700;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--blanc);
}

.garanties {
  display: grid;
  gap: var(--e-3);
  padding: 0;
  list-style: none;
}

.garanties li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  line-height: 1.4;
}

.garanties li::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---- Tunnel ---- */
.page-tunnel {
  background: var(--bleu-pale);
}

.tunnel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.tunnel__barre {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--bordure);
  background: var(--blanc);
}

.tunnel__barre-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
}

.tunnel__logo img {
  width: auto;
  height: 40px;
}

.tunnel__securite {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.tunnel__securite svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--bleu);
}

.tunnel__corps {
  display: grid;
  flex: 1;
  gap: var(--e-6);
  align-items: start;
  padding-block: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);
}

@media (min-width: 980px) {
  .tunnel__corps {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--e-7);
  }
}

.tunnel__carte {
  --marge-carte: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  min-width: 0;
  padding: var(--marge-carte);
  border-radius: var(--rayon-xl);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.progression {
  display: flex;
  gap: var(--e-2);
  margin: 0 0 var(--e-6);
  padding: 0;
  list-style: none;
}

.progression li {
  display: grid;
  flex: 1;
  gap: 0.45rem;
  font-family: var(--police-titre);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.progression li::before {
  content: "";
  height: 4px;
  border-radius: 2px;
  background: var(--bordure);
  transition: background-color 0.4s var(--courbe);
}

.progression li.est-fait,
.progression li[aria-current="step"] {
  color: var(--bleu);
}

.progression li.est-fait::before,
.progression li[aria-current="step"]::before {
  background: var(--bleu);
}

.tunnel__etape {
  display: grid;
  gap: var(--e-5);
  animation: glisse 0.4s var(--courbe) both;
}

.tunnel__etape[hidden] {
  display: none;
}

@keyframes glisse {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}

.tunnel__titre {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.tunnel__titre:focus {
  outline: none;
}

.tunnel__intro {
  margin-top: calc(var(--e-3) * -1);
  color: var(--texte-doux);
}

.tunnel__sous-titre {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tunnel__actions {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

.tunnel__actions .bouton {
  flex: 1 1 auto;
}

@media (min-width: 640px) {
  .tunnel__actions .bouton {
    flex: 0 0 auto;
  }
}

/* Sur mobile, le bouton principal reste toujours visible en bas d'écran */
@media (max-width: 979px) {
  .tunnel__actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(-1 * var(--marge-carte));
    margin-bottom: calc(-1 * var(--marge-carte));
    padding: var(--e-3) var(--marge-carte) calc(var(--e-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bordure);
    border-radius: 0 0 var(--rayon-xl) var(--rayon-xl);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 -10px 24px -16px rgb(0 2 79 / 0.35);
  }
}

.bouton--large {
  min-height: 58px;
  padding-inline: 2rem;
  font-size: 1.1rem;
}

.lien-retour {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lien-retour:hover {
  color: var(--bleu);
}

/* Code postal, ville, pays sur une ligne */
.champs-adresse {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 640px) {
  .champs-adresse {
    grid-template-columns: 1fr 2fr 1.4fr;
  }
}

/* Champ en euros : symbole collé à droite */
.champ-euros {
  position: relative;
  display: block;
}

.champ-euros input {
  padding-right: 2.75rem;
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 600;
}

.champ-euros::after {
  content: "€";
  position: absolute;
  top: 50%;
  right: 1rem;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--texte-doux);
  transform: translateY(-50%);
  pointer-events: none;
}

.champ__erreur {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--erreur);
}

.champ__erreur:empty {
  display: none;
}

/* Suggestions d'adresse (base adresse nationale) */
.champ--suggestions {
  position: relative;
}

.suggestions {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 20;
  margin: 4px 0 0;
  padding: var(--e-1);
  list-style: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.suggestions[hidden] {
  display: none;
}

.suggestions li {
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.suggestions li[aria-selected="true"],
.suggestions li:hover {
  background: var(--bleu-pale);
  color: var(--bleu);
}

/* Récapitulatif latéral */
.resume {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-6);
  border-radius: var(--rayon-xl);
  background: var(--bleu-nuit);
  color: var(--blanc);
}

@media (min-width: 980px) {
  .resume {
    position: sticky;
    top: calc(64px + var(--e-5));
  }
}

.resume__entete {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.resume__entete img {
  flex: none;
  width: 56px;
  height: 56px;
  border: 2px solid var(--bleu);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
}

.resume__entete p {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Carte de membre composée en direct ; elle se retourne au départ vers le paiement */
.carte-membre {
  position: relative;
  aspect-ratio: 85.6 / 54;
  perspective: 1200px;
}

.carte-membre__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 7% 8%;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(115deg, transparent 55%, rgb(255 255 255 / 0.1) 55% 62%, transparent 62%),
    linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  backface-visibility: hidden;
  transition: transform 0.9s var(--courbe);
}

.carte-membre__logo {
  width: 42%;
  height: auto;
}

.carte-membre__etiquette {
  align-self: end;
  font-family: var(--police-titre);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}

.carte-membre__nom {
  overflow: hidden;
  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.carte-membre__formule {
  font-size: 0.8rem;
  opacity: 0.8;
}

.carte-membre__verso {
  grid-template-rows: 1fr auto auto;
  justify-items: start;
  background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu-nuit));
  transform: rotateY(180deg);
}

.carte-membre__glyphe {
  width: 22%;
  height: auto;
  opacity: 0.9;
}

.carte-membre__merci {
  font-family: var(--police-titre);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  text-transform: uppercase;
}

.carte-membre.est-retournee .carte-membre__recto {
  transform: rotateY(-180deg);
}

.carte-membre.est-retournee .carte-membre__verso {
  transform: rotateY(0deg);
}

.resume__lignes {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding-bottom: var(--e-4);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}

.resume__lignes div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
}

.resume__lignes div[hidden] {
  display: none;
}

.resume__lignes dt {
  color: rgb(255 255 255 / 0.8);
}

.resume__lignes dd {
  font-weight: 700;
}

.resume__total {
  display: grid;
  gap: 0.2rem;
}

.resume__montant {
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
}

.resume__fiscal {
  color: var(--bleu-clair);
  font-weight: 600;
}

.resume__fiscal s {
  font-weight: 400;
  opacity: 0.75;
}

.resume .garanties {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.88);
}

.tunnel__pied {
  padding-block: var(--e-5) var(--e-6);
  font-size: 0.8rem;
  text-align: center;
  color: var(--texte-doux);
}

.tunnel__pied a {
  color: inherit;
}

/* Mentions légales repliées sous le formulaire */
.mentions-paiement {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

.mentions-paiement summary {
  font-weight: 600;
  color: var(--bleu-nuit);
}

.mentions-paiement > :not(summary) {
  margin-top: 0.75em;
}

/* Salut après paiement : séquence plein écran façon générique.
   Fond bleu électrique, halo, « MERCI » géant dont les lettres montent puis se
   remplissent, reflet en biais, message personnalisé, ruban, sortie en biais.
   Visible par défaut (pas de flash de la page dessous), retiré par tunnel.js
   s'il n'y a pas de paiement à saluer, masqué d'office si l'animation est
   réduite, et repli CSS qui le retire seul au bout de 7 s sans JavaScript. */
.salut {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--gouttiere);
  background: var(--degrade-bleu);
  color: var(--blanc);
  text-align: center;
  cursor: pointer;
  animation: salut-repli 0s 7s forwards;
}

@keyframes salut-repli {
  to {
    visibility: hidden;
  }
}

/* Halo qui s'ouvre au centre */
.salut::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.06) 35%, transparent 62%);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: salut-halo 2.6s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes salut-halo {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Reflet lumineux qui traverse en biais */
.salut__lumiere {
  position: absolute;
  inset: -30%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.22) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: salut-balayage 1.5s 1.5s cubic-bezier(0.5, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes salut-balayage {
  to {
    transform: translateX(100%);
  }
}

.salut__contenu {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--e-5);
  max-width: 60rem;
  margin-bottom: clamp(4rem, 3rem + 6vh, 8rem); /* place réservée au ruban */
}

.salut__surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  animation: salut-apparait 0.8s 0.2s var(--courbe) both;
}

.salut__surtitre::before,
.salut__surtitre::after {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: currentColor;
}

/* « MERCI » : chaque lettre monte depuis une ligne de coupe, puis se remplit */
.salut__titre {
  display: flex;
  justify-content: center;
  overflow: hidden;
  font-size: clamp(4.5rem, 1rem + 17vw, 17rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* La boîte de chaque lettre englobe tout le dessin du caractère : le remplissage
   (fond découpé à la forme du texte) doit couvrir la lettre jusqu'en bas */
.salut__titre span {
  display: inline-block;
  padding-block: 0.04em 0.08em;
  color: transparent;
  -webkit-text-stroke: 0.02em var(--blanc);
  background: linear-gradient(to top, var(--blanc) 50%, transparent 50%) 0 0 / 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(105%);
  animation:
    salut-lettre 0.9s calc(0.35s + var(--i) * 0.07s) var(--courbe) forwards,
    salut-remplit 1.1s calc(1.15s + var(--i) * 0.08s) cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.salut__titre span:nth-child(1) { --i: 0; }
.salut__titre span:nth-child(2) { --i: 1; }
.salut__titre span:nth-child(3) { --i: 2; }
.salut__titre span:nth-child(4) { --i: 3; }
.salut__titre span:nth-child(5) { --i: 4; }

@keyframes salut-lettre {
  to {
    transform: none;
  }
}

@keyframes salut-remplit {
  to {
    background-position: 0 100%;
  }
}

.salut__message {
  max-width: 40rem;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
  animation: salut-apparait 0.9s 2s var(--courbe) both;
}

.salut__message strong {
  font-family: var(--police-titre);
  font-weight: 600;
  white-space: nowrap;
}

.salut__suite {
  animation: salut-apparait 0.8s 2.6s var(--courbe) both;
}

@keyframes salut-apparait {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* Ruban qui entre en biais en bas d'écran */
.salut__ruban {
  position: absolute;
  right: 0;
  bottom: clamp(0.25rem, 3vh, 2.5rem);
  left: 0;
  overflow: hidden;
  padding-block: var(--e-5);
  pointer-events: none;
}

.salut__ruban .ruban {
  animation: salut-ruban 1.1s 2.3s var(--courbe) both;
}

@keyframes salut-ruban {
  from {
    transform: rotate(-2deg) translateX(-110%);
  }
  to {
    transform: rotate(-2deg);
  }
}

/* Sortie : l'écran remonte selon la coupe en biais et découvre la page */
.salut.est-sortant {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 9vw));
  animation: salut-sortie 0.9s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes salut-sortie {
  to {
    transform: translateY(-105%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .salut {
    display: none;
  }
}

/* Partage après paiement */
.partage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  list-style: none;
}

.partage a,
.partage button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.partage a:hover,
.partage button:hover {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--bleu);
}

/* --------------------------------------------------------------------------
   13. Bandeau du livre (transversal, au-dessus du pied de page)
   -------------------------------------------------------------------------- */
.livre {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 760px) {
  .livre {
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: clamp(3rem, 2rem + 5vw, 7rem);
  }
}

/* Le livre en volume : couverture, tranche des pages, dos et quatrième, en CSS 3D.
   Posé de trois quarts ; au survol il se redresse, la couverture s'entrouvre
   sur la page de titre et deux feuilles la suivent avec un léger retard. */
.livre3d {
  --ep: 34px;
  --ep: 13cqi; /* épaisseur : 256 pages, environ 2 cm pour 15 cm de large */
  container-type: inline-size;
  position: relative;
  justify-self: center;
  width: min(300px, 74%);
  perspective: 1000px;
}

@media (min-width: 760px) {
  .livre3d {
    width: 84%;
  }
}

/* Ombre portée au sol, qui se resserre quand le livre se redresse */
.livre3d::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -7%;
  left: 10%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 2 79 / 0.45), transparent);
  filter: blur(6px);
  transition: transform 0.9s var(--courbe), opacity 0.9s var(--courbe);
}

.livre3d__corps {
  position: relative;
  aspect-ratio: 480 / 769;
  transform-style: preserve-3d;
  transform: rotateX(3deg) rotateY(-34deg);
  transition: transform 1s var(--courbe);
}

.livre3d__corps > * {
  position: absolute;
  inset: 0;
}

/* Quatrième de couverture et dos */
.livre3d__quatrieme {
  border-radius: 3px 6px 6px 3px;
  background: var(--bleu-nuit);
  transform: translateZ(calc(var(--ep) / -2));
}

.livre3d__dos {
  inset: 0 auto 0 0;
  width: var(--ep);
  background: linear-gradient(90deg, #000 0%, #1a1a24 40%, #000 100%);
  transform-origin: left center;
  transform: translateZ(calc(var(--ep) / 2)) rotateY(90deg);
}

/* Tranche des pages : fines lignes, légèrement ombrée vers le dos */
.livre3d__tranche {
  inset: 3px 0 3px auto;
  width: var(--ep);
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.18), transparent 30%, transparent 70%, rgb(0 0 0 / 0.12)),
    repeating-linear-gradient(90deg, #f4f1e8 0 1.5px, #dcd7c9 1.5px 2.2px);
  transform-origin: right center;
  transform: translateZ(calc(var(--ep) / 2)) rotateY(-90deg);
}

/* Page de titre et feuilles, sous la couverture */
.livre3d__page,
.livre3d__feuille {
  inset: 3px 3px 3px 0;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #e9e4d6, #f8f6ef 12%, #fbfaf5);
  transform-origin: left center;
}

.livre3d__page {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6em;
  padding: 12%;
  color: var(--bleu-nuit);
  font-family: var(--police-titre);
  text-align: center;
  text-transform: uppercase;
  transform: translateZ(calc(var(--ep) / 2 - 3px));
}

.livre3d__page small {
  font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.8rem);
  letter-spacing: 0.18em;
}

.livre3d__page strong {
  font-size: clamp(1.1rem, 0.8rem + 1vw, 1.7rem);
  line-height: 1.05;
}

.livre3d__feuille {
  box-shadow: inset 8px 0 14px -10px rgb(0 0 0 / 0.35);
  transition: transform 1s var(--courbe);
}

.livre3d__feuille--1 {
  transform: translateZ(calc(var(--ep) / 2 - 1px));
}

.livre3d__feuille--2 {
  transform: translateZ(calc(var(--ep) / 2 - 2px));
}

/* Couverture : charnière à gauche, contre-plat bleu nuit au revers */
.livre3d__couverture {
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(calc(var(--ep) / 2));
  transition: transform 1s var(--courbe);
}

.livre3d__couverture img,
.livre3d__couverture::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px 6px 6px 2px;
  backface-visibility: hidden;
}

.livre3d__couverture img {
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* Pli de la charnière, visible sur la couverture */
.livre3d__couverture::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 4%;
  z-index: 1;
  width: 2.5%;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.1), rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.06));
  pointer-events: none;
}

.livre3d__couverture::after {
  content: "";
  background: linear-gradient(270deg, var(--bleu-nuit), #000 90%);
  transform: rotateY(180deg);
}

/* Reflet qui glisse sur la couverture au survol */
.livre3d__reflet {
  border-radius: 2px 6px 6px 2px;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.16) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
  transform-origin: left center;
  transform: translateZ(calc(var(--ep) / 2 + 0.5px));
  transition: background-position 1.2s var(--courbe), transform 1s var(--courbe);
}

/* Entrée en scène : le livre pivote depuis la tranche quand il apparaît */
.js .livre3d.revele {
  transform: none;
}

.js .livre3d.revele .livre3d__corps {
  transform: rotateX(4deg) rotateY(-75deg) translateX(-12%);
}

.js .livre3d.revele.est-visible .livre3d__corps {
  transform: rotateX(3deg) rotateY(-34deg);
  transition-duration: 1.6s;
}

/* Survol (ou focus sur le lien du bandeau) : le livre se redresse et s'entrouvre */
@media (hover: hover) {
  .livre:hover .livre3d .livre3d__corps,
  .livre:focus-within .livre3d .livre3d__corps,
  .js .livre:hover .livre3d.revele.est-visible .livre3d__corps,
  .js .livre:focus-within .livre3d.revele.est-visible .livre3d__corps {
    transform: rotateX(0deg) rotateY(-12deg) translateY(-6px);
    transition-duration: 1s;
  }

  .livre:hover .livre3d__couverture,
  .livre:focus-within .livre3d__couverture {
    transform: translateZ(calc(var(--ep) / 2)) rotateY(-38deg);
  }

  .livre:hover .livre3d__reflet,
  .livre:focus-within .livre3d__reflet {
    background-position: -40% 0;
    transform: translateZ(calc(var(--ep) / 2 + 0.5px)) rotateY(-38deg);
  }

  .livre:hover .livre3d__feuille--1,
  .livre:focus-within .livre3d__feuille--1 {
    transform: translateZ(calc(var(--ep) / 2 - 1px)) rotateY(-24deg);
    transition-delay: 0.08s;
  }

  .livre:hover .livre3d__feuille--2,
  .livre:focus-within .livre3d__feuille--2 {
    transform: translateZ(calc(var(--ep) / 2 - 2px)) rotateY(-12deg);
    transition-delay: 0.16s;
  }

  .livre:hover .livre3d::after,
  .livre:focus-within .livre3d::after {
    transform: scaleX(0.85);
    opacity: 0.8;
  }
}

.livre__texte {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
}

.livre__texte h2 {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  overflow: hidden;
  padding-block: var(--e-8) var(--e-5);
  background: var(--bleu-nuit);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.975rem;
}

.pied a {
  color: inherit;
  text-decoration: none;
}

.pied a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

.pied__haut {
  display: grid;
  gap: var(--e-7);
}

@media (min-width: 960px) {
  .pied__haut {
    grid-template-columns: 1fr 1.4fr;
  }
}

.pied__inscription {
  display: grid;
  gap: var(--e-4);
  align-content: start;
}

.pied__accroche {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--blanc);
}

.pied__titre {
  margin-bottom: var(--e-3);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}

.pied__colonnes {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.pied__colonnes ul {
  display: grid;
  gap: var(--e-2);
  padding: 0;
  list-style: none;
}

.pied .champ > label {
  color: var(--blanc);
}

.pied .case a {
  text-decoration: underline;
}

/* Logo en très grand, sur toute la largeur : simple agrandissement, sans déformation */
.pied__signature {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.pied__signature img {
  width: 100%;
  height: auto;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.65);
}

/* --------------------------------------------------------------------------
   15. Repères de préprod : contenu à compléter avant ouverture
   Le déploiement en production refusera toute page qui en contient encore.
   -------------------------------------------------------------------------- */
[data-a-completer] {
  position: relative;
  outline: 2px dashed #e0a100;
  outline-offset: 4px;
}

[data-a-completer]::after {
  content: "À compléter : " attr(data-a-completer);
  position: absolute;
  top: -6px;
  right: 0;
  z-index: 5;
  max-width: calc(100% - 1rem);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: #ffd84d;
  color: #1a1a1a;
  font: 600 0.75rem/1.3 var(--police-texte);
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-stroke: 0;
  transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   Page d'attente de la production (attente.html), avant l'ouverture au public
   -------------------------------------------------------------------------- */
.attente {
  min-height: 100vh;
  background: var(--degrade-bleu);
  color: var(--blanc);
}

.attente__corps {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-6);
  min-height: 100vh;
  padding: var(--e-6);
  text-align: center;
}

.attente__texte {
  font-family: var(--police-titre);
  font-size: clamp(3rem, 2rem + 6vw, 7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanc);
}