/* ==========================================================================
   A6RG — Sommet International de la Diaspora Africaine de France
   Feuille de style unique. Aucune dépendance, aucun framework.

   SOMMAIRE
     01. Variables         — couleurs, typo, rythme
     02. Base & reset
     03. Utilitaires
     04. Navbar
     05. Fond vidéo & curseur
     06. Boutons
     07. Accueil — hero
     08. Accueil — sections
     09. Accueil — monument
     10. Cartes (comité, invités)
     11. Modale de préréservation
     12. Billetterie
     13. Vidéothèque
     14. Pied de page
     15. Animations
     16. Responsive
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES
   Les couleurs sont en oklch (le format du site d'origine). L'équivalent
   hexadécimal est indiqué en commentaire pour pouvoir les remplacer à l'œil.
   ========================================================================== */

:root {
  /* — Surfaces : brun sépia très sombre — */
  --fond:            oklch(19% 0.018 60);    /* ≈ #241c14 */
  --fond-profond:    oklch(14% 0.015 55);    /* ≈ #1a130d */
  --carte:           oklch(24% 0.02 58);     /* ≈ #302519 */
  --sourdine:        oklch(27% 0.02 58);     /* ≈ #372b1e */

  /* — Texte — */
  --texte:           oklch(97% 0.008 80);    /* ≈ #f8f4ef */
  --texte-doux:      oklch(72% 0.02 70);     /* ≈ #b3a693 */

  /* — Accents — */
  --or:              oklch(79% 0.13 68);     /* ≈ #d4af37 — couleur principale */
  --or-contraste:    oklch(18% 0.02 60);     /* texte posé sur l'or */
  --terre:           oklch(64% 0.15 48);     /* ≈ #c07040 */
  --emeraude:        oklch(68% 0.11 78);     /* ≈ #b08f4a */

  /* — Palette panafricaine (vidéothèque) — */
  --patrimoine-vert: oklch(62% 0.14 150);
  --patrimoine-or:   oklch(85% 0.16 92);
  --patrimoine-rouge:oklch(65% 0.19 27);

  /* — Bordures — */
  --bord:            oklch(100% 0 0 / 0.10);
  --bord-fort:       oklch(100% 0 0 / 0.25);

  /* — Typographie — */
  --titre:  "Playfair Display", ui-serif, Georgia, serif;
  --corps:  "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, monospace;

  /* — Rythme — */
  --rayon:   0.375rem;
  --largeur: 80rem;          /* largeur max du contenu */

  /* — L'easing signature du site : départ vif, arrivée feutrée — */
  --courbe: cubic-bezier(0.19, 1, 0.22, 1);
}


/* ==========================================================================
   02. BASE & RESET
   ========================================================================== */

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

/* L'attribut hidden doit gagner contre n'importe quelle classe qui pose un
   display (.champs est en grid, par exemple). Sans ce !important, un élément
   marqué hidden reste visible — c'est ce qui affichait les trois étapes du
   formulaire de préréservation en même temps. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.1; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }


/* ==========================================================================
   03. UTILITAIRES
   ========================================================================== */

.contenu { max-width: var(--largeur); margin-inline: auto; padding-inline: 1.5rem; }
.contenu--etroit { max-width: 64rem; }

.section { padding-block: 8rem; border-top: 1px solid var(--bord); position: relative; }
.section--voile::before {      /* voile flou qui détache la section du fond vidéo */
  content: ""; position: absolute; inset: 0;
  background: oklch(19% 0.018 60 / 0.6);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.section--voile > .contenu { position: relative; z-index: 1; }

/* Le petit intitulé doré « § 01 — Le Chiffre » */
.etiquette {
  font-family: var(--mono); font-size: 0.75rem; color: var(--or);
  text-transform: uppercase; letter-spacing: 0.3em;
}
.mono {
  font-family: var(--mono); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.25em; color: var(--texte-doux);
}

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

.grille-fond {                 /* quadrillage discret en arrière-plan */
  background-image:
    linear-gradient(90deg, oklch(100% 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(oklch(100% 0 0 / 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   04. NAVBAR — identique sur les trois pages
   ========================================================================== */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: oklch(19% 0.018 60 / 0.5);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bord);
  padding-top: env(safe-area-inset-top);
}

.navbar__interieur {
  max-width: var(--largeur); margin-inline: auto; padding-inline: 1.5rem;
  height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}

.navbar__logo img { height: 2.5rem; width: auto; transition: opacity 0.3s; }
.navbar__logo:hover img { opacity: 0.8; }

.navbar__menu { display: flex; gap: 1.75rem; }
.navbar__menu a {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: 0.22em; transition: color 0.3s;
}
.navbar__menu a:hover { color: var(--or); }
.navbar__menu a[aria-current="page"] { color: var(--or); }

.navbar__actions { display: flex; align-items: center; gap: 0.5rem; }

/* Bouton hamburger — masqué au-dessus de 1024 px */
.navbar__burger {
  display: none; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--bord); border-radius: 0.125rem;
  align-items: center; justify-content: center;
}
.navbar__burger span {
  display: block; width: 1rem; height: 1px; background: currentColor; position: relative;
}
.navbar__burger span::before,
.navbar__burger span::after {
  content: ""; position: absolute; left: 0; width: 1rem; height: 1px; background: currentColor;
  transition: transform 0.3s var(--courbe);
}
.navbar__burger span::before { top: -5px; }
.navbar__burger span::after  { top:  5px; }
.navbar__burger[aria-expanded="true"] span { background: transparent; }
.navbar__burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.navbar__burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }


/* ==========================================================================
   05. FOND VIDÉO & CURSEUR
   ========================================================================== */

.fond-video { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fond-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.45) brightness(0.82);
  transform: translateZ(0); will-change: transform, opacity; backface-visibility: hidden;
}
.fond-video__voile-1 {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.15), #000);
}
.fond-video__voile-2 {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.6), transparent, rgb(0 0 0 / 0.45));
}

/* Le point doré qui remplace le curseur système au-dessus de 768 px */
/* z-index au-dessus des modales (200) : sinon le point disparaît derrière elles
   alors que cursor:none s'applique toujours — on se retrouve sans curseur.
   will-change isole le point sur sa propre couche de composition : sans ça,
   son déplacement force le recalcul du backdrop-filter des modales à chaque
   frame, et l'écran se met à saccader. */
.curseur {
  position: fixed; left: 0; top: 0; z-index: 300;
  pointer-events: none; display: none;
  will-change: transform;
}
.curseur span {
  display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 20px rgb(212 175 55 / 0.9);
}

@media (min-width: 768px) and (pointer: fine) {
  .curseur { display: block; }
  body { cursor: none; }
  body :is(a, button, input, select, textarea, label, [role="button"]) { cursor: none; }
}


/* ==========================================================================
   06. BOUTONS
   ========================================================================== */

.bouton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  padding: 0.875rem 1.75rem; border-radius: 0.125rem;
  border: 1px solid transparent; transition: all 0.3s;
}
.bouton--or {
  background: var(--or); color: var(--or-contraste);
}
.bouton--or:hover { box-shadow: 0 0 40px rgb(212 175 55 / 0.7); transform: translateY(-2px); }
.bouton--contour { border-color: oklch(97% 0.008 80 / 0.4); }
.bouton--contour:hover { border-color: var(--or); color: var(--or); }
.bouton--discret {
  border-color: var(--bord); font-size: 0.6875rem; padding: 0.5rem 1rem; letter-spacing: 0.22em;
}
.bouton--discret:hover { border-color: var(--or); color: var(--or); }
.bouton--petit { padding: 0.5rem 1rem; font-size: 0.6875rem; letter-spacing: 0.22em; }
.bouton--large { width: 100%; justify-content: center; padding-block: 0.875rem; }
.bouton--geant { padding: 1.25rem 2.5rem; font-size: 0.875rem; letter-spacing: 0.25em; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.bouton .fleche { transition: transform 0.3s; }
.bouton:hover .fleche { transform: translateX(4px); }


/* ==========================================================================
   07. ACCUEIL — HERO
   ========================================================================== */

.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.hero__contenu {
  position: relative; z-index: 1; text-align: center;
  padding: 7rem 1.5rem 3rem; max-width: 72rem; margin-inline: auto;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid oklch(79% 0.13 68 / 0.4);
  background: oklch(19% 0.018 60 / 0.4); backdrop-filter: blur(12px);
  padding: 0.375rem 1rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.625rem; color: var(--or);
  text-transform: uppercase; letter-spacing: 0.3em;
}

.hero__titre {
  margin-top: 2rem;
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 0.95; letter-spacing: -0.025em;
}
.hero__titre span { display: inline-block; margin-right: 0.75rem; }

.hero__accroche { margin-top: 1.5rem; font-family: var(--titre); font-size: clamp(1.25rem, 3vw, 1.5rem); color: var(--or); letter-spacing: 0.025em; }
.hero__sous-titre { margin-top: 0.75rem; font-family: var(--titre); font-size: clamp(1rem, 2vw, 1.25rem); color: oklch(97% 0.008 80 / 0.85); max-width: 42rem; margin-inline: auto; line-height: 1.375; }

.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Compte à rebours + chiffres clés */
.compteur { margin-top: 3rem; }
.compteur__boite {
  max-width: 20rem; margin-inline: auto;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: oklch(19% 0.018 60 / 0.6); backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
  padding: 1.25rem; text-align: center;
}
.compteur__valeur { font-family: var(--titre); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--or); }

.chiffres-cles {
  margin-top: 1.5rem; max-width: 56rem; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--bord); border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
}
.chiffres-cles > div { background: oklch(19% 0.018 60 / 0.6); backdrop-filter: blur(12px); padding: 1.5rem; }
.chiffres-cles strong { display: block; font-family: var(--titre); font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; }


/* ==========================================================================
   08. ACCUEIL — SECTIONS
   ========================================================================== */

/* § 01 — le grand pourcentage */
.grand-chiffre {
  margin-top: 2.5rem;
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(5rem, 18vw, 14rem); line-height: 1; letter-spacing: -0.05em;
  background: linear-gradient(to bottom, var(--or), var(--or), oklch(79% 0.13 68 / 0.4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grand-chiffre + p {
  margin-top: 2rem; font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  max-width: 48rem; margin-inline: auto; line-height: 1.625; text-wrap: balance;
}

/* § 02 — les cinq piliers */
.piliers__entete {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 2rem; margin-bottom: 4rem;
}
.piliers__entete h2 { margin-top: 1rem; font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -0.025em; max-width: 36rem; }
.piliers__compte { display: flex; align-items: flex-end; gap: 0.75rem; }
.piliers__compte strong { font-family: var(--titre); font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: var(--or); }

.piliers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.pilier {
  position: relative; overflow: hidden;
  padding: 2rem; border: 1px solid var(--bord); border-radius: 0.5rem;
  background: oklch(24% 0.02 58 / 0.4); backdrop-filter: blur(12px);
  transition: transform 0.5s var(--courbe), border-color 0.3s;
}
.pilier:hover { transform: translateY(-6px); }
.pilier::before {              /* filet coloré en haut de carte */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--pilier-couleur); opacity: 0.4; transition: opacity 0.3s;
}
.pilier:hover::before { opacity: 1; }
.pilier__icone { width: 2rem; height: 2rem; color: var(--pilier-couleur); }
.pilier__numero { margin-top: 1.5rem; }
.pilier h3 { margin-top: 0.5rem; font-size: clamp(1.25rem, 2.5vw, 1.5rem); letter-spacing: -0.025em; }
.pilier p  { margin-top: 0.75rem; font-size: 0.875rem; color: var(--texte-doux); line-height: 1.625; }


/* ==========================================================================
   09. ACCUEIL — MONUMENT (§ 03)
   ========================================================================== */

.solidaire { display: grid; gap: 4rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .solidaire { grid-template-columns: 1fr 1fr; } }

.monument {
  position: relative; aspect-ratio: 5 / 4; max-height: 32rem;
  border: 1px solid var(--bord); border-radius: 0.5rem; overflow: hidden;
}
.monument__grille { position: absolute; inset: 0; opacity: 0.4; }
.monument__scene {
  position: absolute; inset: 0; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.75rem;
}
.monument__halo {
  position: absolute; left: 2rem; right: 2rem; bottom: 3.5rem; height: 6rem;
  border-radius: 50%; background: oklch(79% 0.13 68 / 0.2); filter: blur(2rem); pointer-events: none;
}

.monument__fronton { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.monument__lettres { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; }
.monument__lettre  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.monument__pierres { position: relative; display: flex; flex-wrap: wrap-reverse; gap: 0.25rem; justify-content: center; max-width: 100%; }

/* Une « pierre » : la transition imite le ressort de Framer Motion */
.pierre {
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease;
}
.pierre--fronton { width: 0.875rem; height: 0.875rem; border-radius: 2px; }
.pierre--pixel   { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.pierre--vide    { width: 0.625rem; height: 0.625rem; }
.pierre--bloc    { width: 1.75rem; height: 0.875rem; border-radius: 0.125rem; border: 1px solid var(--bord); }

.monument__sol {
  position: relative; margin-top: 0.25rem; height: 0.375rem; width: 100%; border-radius: 0.125rem;
  background: linear-gradient(to right, transparent, oklch(79% 0.13 68 / 0.6), transparent);
}
.monument__legende { position: relative; margin-top: 0.75rem; text-align: center; }

.contribution {
  margin-top: 2.5rem; padding: 1.5rem;
  border: 1px solid var(--bord); border-radius: 0.5rem; background: var(--carte);
}
.contribution__ligne { display: flex; align-items: baseline; justify-content: space-between; }
.contribution__montant { font-family: var(--titre); font-size: 1.875rem; font-weight: 700; color: var(--or); }
.contribution input[type="range"] { width: 100%; margin-top: 1rem; accent-color: var(--or); background: transparent; cursor: pointer; }
.contribution__palier { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; }
.contribution__palier strong { font-family: var(--titre); font-size: 1.125rem; font-weight: 600; }


/* ==========================================================================
   10. CARTES — comité & invités d'honneur
   ========================================================================== */

.cartes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* Comité : portrait plein cadre, légende qui remonte au survol */
.membre { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--bord); border-radius: 0.25rem; }
.membre img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 0.7s, transform 0.7s;
}
.membre:hover img { filter: grayscale(0); }
.membre__voile { position: absolute; inset: 0; background: linear-gradient(to top, var(--fond), oklch(19% 0.018 60 / 0.3), transparent); }
.membre__lueur {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s;
  background: linear-gradient(to top, oklch(79% 0.13 68 / 0.3), transparent, transparent);
}
.membre:hover .membre__lueur { opacity: 1; }
.membre__legende {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
  transform: translateY(1rem); transition: transform 0.5s;
}
.membre:hover .membre__legende { transform: translateY(0); }
.membre__legende h3 { font-size: 1.5rem; }

/* Invités : vignette + bloc de texte */
.invite { border: 1px solid var(--bord); border-radius: 0.5rem; background: oklch(24% 0.02 58 / 0.7); overflow: hidden; }
.invite__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sourdine); }
.invite__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 0.7s, transform 0.7s;
}
.invite:hover .invite__photo img { filter: grayscale(0); transform: scale(1.05); }
.invite__texte { padding: 1.25rem; }
.invite__texte h3 { margin-top: 0.75rem; font-size: 1.25rem; line-height: 1.2; }
.invite__role { margin-top: 0.5rem; color: var(--or); }
.invite__pays { margin-top: 0.25rem; }


/* ==========================================================================
   11. MODALE DE PRÉRÉSERVATION
   ========================================================================== */

.modale { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modale[hidden] { display: none; }
.modale__fond { position: absolute; inset: 0; background: oklch(19% 0.018 60 / 0.85); backdrop-filter: blur(12px); }
.modale__panneau {
  position: relative; width: 100%; max-width: 56rem; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 0.5rem;
  box-shadow: 0 20px 80px rgb(0 0 0 / 0.6);
}
.modale__entete { flex-shrink: 0; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bord); }
.modale__entete-haut { display: flex; align-items: center; justify-content: space-between; }
.modale__entete h3 { margin-top: 0.25rem; font-size: clamp(1.5rem, 3vw, 1.875rem); }
.modale__fermer {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--bord);
  display: grid; place-items: center; transition: border-color 0.3s, color 0.3s; flex-shrink: 0;
}
.modale__fermer:hover { border-color: var(--or); color: var(--or); }
.modale__mentions { margin-top: 1rem; font-size: 0.75rem; line-height: 1.625; color: var(--texte-doux); }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1.25rem 1.5rem 0; }
.etapes__barre { height: 2px; border-radius: 999px; background: var(--bord); transition: background 0.3s; }
.etape.actif .etapes__barre { background: var(--or); }
.etape.actif .mono { color: var(--or); }
.etape { display: flex; flex-direction: column; gap: 0.5rem; }

/* Chaîne de défilement de la modale — les trois maillons sont nécessaires :
   1. .modale__formulaire doit être un conteneur flex, sinon le flex:1 de
      .modale__corps ne s'applique à rien et la hauteur n'est jamais contrainte ;
   2. min-height:0 partout, car un élément flex refuse par défaut de rétrécir
      sous la hauteur de son contenu (min-height:auto) ;
   3. seul .modale__corps défile, l'en-tête et le pied restent fixes. */
.modale__formulaire { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modale__corps { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem; }
.champs { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .champs { grid-template-columns: 1fr 1fr; } }
.champs .pleine-largeur { grid-column: 1 / -1; }
.champs--colonne { grid-template-columns: 1fr; gap: 1.5rem; }

.champ { display: block; }
.champ__etiquette { font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--texte-doux); }
.champ__etiquette .requis { color: var(--or); margin-left: 0.25rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; margin-top: 0.5rem; padding: 0.625rem 0.75rem;
  background: oklch(19% 0.018 60 / 0.6); border: 1px solid var(--bord);
  border-radius: 0.125rem; font-size: 0.875rem; outline: none; transition: border-color 0.3s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); }
.champ textarea { resize: none; }
.champ.erreur input, .champ.erreur select { border-color: #f87171; }
.champ__erreur { display: block; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.6875rem; color: #f87171; }
.champ__erreur[hidden] { display: none; }

.recap-contribution { padding: 1.5rem; border: 1px solid oklch(79% 0.13 68 / 0.4); border-radius: 0.25rem; background: oklch(79% 0.13 68 / 0.05); }
.recap-contribution__montant { font-family: var(--titre); font-size: 3rem; font-weight: 700; color: var(--or); }

.consentement { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.consentement input { margin-top: 0.25rem; width: 1rem; height: 1rem; accent-color: var(--or); flex-shrink: 0; }

.modale__pied { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.succes { flex: 1; min-height: 0; overflow-y: auto; padding: 4rem 1.5rem; text-align: center; }
.succes__icone {
  width: 5rem; height: 5rem; margin-inline: auto; border-radius: 50%;
  background: oklch(79% 0.13 68 / 0.15); border: 1px solid var(--or);
  display: grid; place-items: center; color: var(--or);
}
.succes h4 { margin-top: 2rem; font-size: clamp(1.5rem, 3vw, 1.875rem); }
.succes__recap {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: 1.5rem;
  padding: 1rem 1.5rem; border: 1px solid var(--bord); border-radius: 0.25rem;
  background: oklch(19% 0.018 60 / 0.4); text-align: left;
}
.succes__separateur { width: 1px; height: 2.5rem; background: var(--bord); }


/* ==========================================================================
   12. BILLETTERIE
   ========================================================================== */

.billetterie { display: grid; gap: 2rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .billetterie { grid-template-columns: 1fr 24rem; } }

.formule {
  padding: 1.5rem; border: 1px solid var(--bord); border-radius: 0.25rem;
  background: oklch(24% 0.02 58 / 0.6);
}
.formule + .formule { margin-top: 1rem; }
.formule__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.formule h2 { font-size: 1.5rem; }
.formule__desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--texte-doux); max-width: 28rem; line-height: 1.625; }
.formule__prix { text-align: right; flex-shrink: 0; }
.formule__prix strong { display: block; font-family: var(--titre); font-size: 1.5rem; color: var(--or); }
.formule__jauge { margin-top: 1.25rem; height: 0.375rem; border-radius: 999px; background: var(--bord); overflow: hidden; }
.formule__jauge div { height: 100%; background: var(--or); }
.formule__bas { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; }

.quantite { display: flex; align-items: center; gap: 0.75rem; }
.quantite button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--bord);
  display: grid; place-items: center; transition: border-color 0.3s;
}
.quantite button:hover:not(:disabled) { border-color: var(--or); }
.quantite button:disabled { opacity: 0.3; cursor: not-allowed; }
.quantite output { font-family: var(--titre); font-size: 1.125rem; width: 1.5rem; text-align: center; }

.commande {
  position: sticky; top: 6rem;
  padding: 1.5rem; border: 1px solid var(--bord); border-radius: 0.25rem; background: var(--carte);
}
.commande__lignes { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.commande__ligne { display: flex; justify-content: space-between; font-size: 0.875rem; }
.commande__ligne span:last-child { font-family: var(--mono); }
.commande__coordonnees { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.commande__coordonnees input {
  padding: 0.5rem 0.75rem; background: oklch(19% 0.018 60 / 0.6);
  border: 1px solid var(--bord); border-radius: 0.125rem; font-size: 0.75rem; outline: none;
}
.commande__coordonnees input:focus { border-color: var(--or); }
.commande__coordonnees .pleine-largeur { grid-column: 1 / -1; }
.commande__totaux { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); display: grid; gap: 0.5rem; font-size: 0.875rem; }
.commande__totaux > div { display: flex; justify-content: space-between; color: var(--texte-doux); }
.commande__totaux .total { font-family: var(--titre); font-size: 1.25rem; font-weight: 700; color: var(--texte); }
.commande__totaux .total span:last-child { color: var(--or); }
.commande__erreur { margin-top: 1rem; font-size: 0.75rem; color: #f87171; }
.commande__erreur[hidden] { display: none; }
.commande__mentions { margin-top: 1rem; font-size: 0.625rem; line-height: 1.625; color: var(--texte-doux); }


/* ==========================================================================
   13. VIDÉOTHÈQUE
   ========================================================================== */

.videotheque-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--bord); padding-block: 4rem; text-align: center; }
.videotheque-hero h1 { margin-top: 1rem; font-size: clamp(2.25rem, 6vw, 3.75rem); letter-spacing: -0.025em; }

.statistiques {
  margin-top: 2.5rem; max-width: 36rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--bord); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
}
.statistiques > div { background: oklch(19% 0.018 60 / 0.6); padding: 1rem; }
.statistiques strong { display: block; font-family: var(--titre); font-size: 1.875rem; color: var(--or); }

/* Carrousel « À la une » */
.une { margin-top: 1.5rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.une__carte { position: relative; flex-shrink: 0; width: min(85%, 26rem); scroll-snap-align: start; overflow: hidden; border: 1px solid var(--bord); border-radius: 0.75rem; text-align: left; }
.une__carte img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; transition: transform 0.5s; }
.une__carte:hover img { transform: scale(1.05); }
.une__voile { position: absolute; inset: 0; background: linear-gradient(to top, var(--fond-profond), oklch(14% 0.015 55 / 0.4), transparent); }
.une__texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; }
.une__texte h3 { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.375; }

/* Badge de secteur — la couleur vient de --secteur, posée en HTML */
.badge {
  display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--secteur) 40%, transparent);
  background: color-mix(in oklch, var(--secteur) 15%, transparent);
  color: var(--secteur);
  font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.16em;
}

/* Filtres */
.recherche {
  width: 100%; padding: 0.75rem 1rem; font-size: 0.875rem;
  background: oklch(24% 0.02 58 / 0.6); border: 1px solid var(--bord);
  border-radius: var(--rayon); outline: none; transition: border-color 0.3s;
}
.recherche:focus { border-color: var(--or); }
.filtres { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.filtres__groupe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtre {
  padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--bord);
  font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--texte-doux); transition: all 0.3s;
}
.filtre:hover { border-color: var(--or); color: var(--or); }
.filtre[aria-pressed="true"] { border-color: var(--or); background: oklch(79% 0.13 68 / 0.15); color: var(--or); }

/* Grille de vidéos */
.videos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.video[hidden] { display: none; }
.video {
  overflow: hidden; border: 1px solid var(--bord); border-radius: 0.75rem;
  background: oklch(24% 0.02 58 / 0.7); backdrop-filter: blur(4px);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
  transition: transform 0.3s;
}
.video:hover { transform: scale(1.02); }
.video__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sourdine); }
.video__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, opacity 0.5s; }
.video:hover .video__media img { transform: scale(1.05); }
.video:hover .video__media.a-clip img { opacity: 0; }
.video__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.video:hover .video__media video { opacity: 1; }
.video__voile { position: absolute; inset: 0; background: linear-gradient(to top, oklch(14% 0.015 55 / 0.85), oklch(14% 0.015 55 / 0.2), transparent); }
.video__lire { position: absolute; inset: 0; display: grid; place-items: center; }
.video__lire span {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: oklch(79% 0.13 68 / 0.9); color: var(--or-contraste);
  display: grid; place-items: center; box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
  transition: transform 0.3s;
}
.video:hover .video__lire span { transform: scale(1.1); }
.video__badge { position: absolute; left: 0.75rem; top: 0.75rem; }
.video__favori {
  position: absolute; right: 0.75rem; top: 0.75rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: oklch(14% 0.015 55 / 0.7); display: grid; place-items: center; transition: color 0.3s;
}
.video__favori:hover, .video__favori[aria-pressed="true"] { color: var(--patrimoine-rouge); }
.video__duree {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  padding: 0.25rem 0.5rem; border-radius: 0.25rem;
  background: oklch(14% 0.015 55 / 0.8); font-family: var(--mono); font-size: 0.6875rem;
}
.video__texte { padding: 1.25rem; display: grid; gap: 1rem; }
.video__texte h3 { font-size: 1.125rem; line-height: 1.375; }
.video__texte h3 a:hover { color: var(--or); }
.video__origine { margin-top: 0.25rem; }
.video__gens { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; font-size: 0.75rem; }
.video__personne { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.video__personne img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--bord); flex-shrink: 0; }
.video__personne div { min-width: 0; }
.video__personne .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.video__tags span { font-family: var(--mono); font-size: 0.625rem; color: var(--texte-doux); }
.video__pied { display: flex; align-items: center; justify-content: space-between; }
.video__pied button { font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--or); }
.video__pied button:hover { text-decoration: underline; }

/* Lecteur */
.lecteur { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.lecteur[hidden] { display: none; }
.lecteur__fond { position: absolute; inset: 0; background: oklch(19% 0.018 60 / 0.9); backdrop-filter: blur(12px); }
.lecteur__panneau {
  position: relative; width: 100%; max-width: 56rem; max-height: 90vh; overflow-y: auto;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 0.5rem;
  box-shadow: 0 20px 80px rgb(0 0 0 / 0.6);
}
.lecteur__fermer {
  position: absolute; right: 1rem; top: 1rem; z-index: 1;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--bord); background: oklch(14% 0.015 55 / 0.7);
  display: grid; place-items: center; transition: border-color 0.3s, color 0.3s;
}
.lecteur__fermer:hover { border-color: var(--or); color: var(--or); }
.lecteur video { width: 100%; aspect-ratio: 16 / 9; background: var(--fond-profond); object-fit: cover; }
.lecteur__infos { padding: 1.5rem; }
.lecteur__infos h3 { margin-top: 0.75rem; font-size: 1.5rem; line-height: 1.375; }
/* Carte mentor : avatar, nom et biographie */
.lecteur__mentor {
  margin-top: 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border: 1px solid var(--bord); border-radius: 0.75rem;
  background: oklch(27% 0.02 58 / 0.4);
}
.lecteur__mentor img { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--bord); }
.lecteur__mentor .nom { font-family: var(--titre); font-size: 1rem; }
.lecteur__mentor .bio { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: var(--texte-doux); }

/* Compétences liées : trois vidéos proches, cliquables */
.lecteur__liees { margin-top: 1.5rem; }
.lecteur__liees h4 { margin-bottom: 0.75rem; }
.lecteur__liees ul { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lecteur__liees ul { grid-template-columns: repeat(3, 1fr); } }
.lecteur__liees button {
  width: 100%; overflow: hidden; text-align: left;
  border: 1px solid var(--bord); border-radius: 0.75rem; transition: border-color 0.3s;
}
.lecteur__liees button:hover { border-color: oklch(79% 0.13 68 / 0.5); }
.lecteur__liees img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.lecteur__liees span { display: block; padding: 0.5rem; font-size: 0.75rem; line-height: 1.375; }

/* Barre de partage */
.lecteur__partage {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.lecteur__partage a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--bord); border-radius: 0.75rem;
  background: oklch(27% 0.02 58 / 0.6); color: var(--texte-doux);
  transition: border-color 0.3s, color 0.3s;
}
.lecteur__partage a:hover { border-color: oklch(79% 0.13 68 / 0.5); color: var(--or); }


/* Bouton flottant de la bande-son d'ambiance (vidéothèque) */
.ambiance {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--bord); background: oklch(24% 0.02 58 / 0.8);
  backdrop-filter: blur(16px); color: var(--texte-doux);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  margin-bottom: env(safe-area-inset-bottom);
}
.ambiance:hover { color: var(--texte); }
.ambiance[aria-pressed="true"] {
  border-color: oklch(79% 0.13 68 / 0.5);
  background: oklch(79% 0.13 68 / 0.15);
  color: var(--or);
}


/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */

.pied { border-top: 1px solid var(--bord); padding: 4rem 0 2rem; }
.pied__haut { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pied__haut { grid-template-columns: 2fr 1fr; } }
.pied__marque { display: flex; align-items: center; gap: 0.75rem; }
.pied__marque img { height: 3rem; width: auto; }
.pied__marque span { font-family: var(--titre); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.05em; }
.pied p { margin-top: 1rem; font-size: 0.875rem; color: var(--texte-doux); max-width: 24rem; }
.pied form { display: flex; gap: 0.5rem; margin-top: 1rem; }
.pied form input {
  flex: 1; padding: 0.5rem 0.75rem; font-family: var(--mono); font-size: 0.75rem;
  background: var(--fond-profond); border: 1px solid var(--bord); border-radius: 0.125rem; outline: none;
}
.pied form input:focus { border-color: var(--or); }
.pied__bas {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
}


/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes apparition      { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fondu           { from { opacity: 0; } to { opacity: 1; } }
@keyframes mot-flou        { from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
                             to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes remontee        { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes derive          { 0%, 100% { transform: translate(0); } 50% { transform: translate(2%, -2%); } }
@keyframes pulsation-noeud { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes rotation        { to { transform: rotate(360deg); } }

/* Séquence d'entrée du hero. Les délais font tout le caractère du site :
   rien ne bouge avant 400 ms, la séquence s'étale sur 2,6 s. */
.anim-badge    { animation: apparition 0.8s var(--courbe) 0.4s both; }
.hero__titre span { animation: mot-flou 0.8s var(--courbe) both; }
.hero__titre span:nth-child(1) { animation-delay: 0.60s; }
.hero__titre span:nth-child(2) { animation-delay: 0.75s; }
.hero__titre span:nth-child(3) { animation-delay: 0.90s; }
.hero__titre span:nth-child(4) { animation-delay: 1.05s; }
.anim-accroche { animation: fondu 1s 1.4s both; }
.anim-soustitre{ animation: fondu 1s 1.6s both; }
.anim-actions  { animation: apparition 0.8s 1.9s both; }
.anim-compteur { animation: fondu 1s 2.4s both; }
.anim-chiffres { animation: fondu 1s 2.6s both; }

/* Révélation à l'entrée dans le viewport (pilotée par js/site.js) */
.reveler { opacity: 0; transform: translateY(20px); }
.reveler.visible { animation: remontee 0.8s var(--courbe) both; }

.tourne { animation: rotation 1s linear infinite; }

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


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .navbar__burger { display: flex; }
  .navbar__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: oklch(19% 0.018 60 / 0.98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bord);
    max-height: 0; overflow: hidden; transition: max-height 0.4s var(--courbe);
  }
  .navbar__menu.ouvert { max-height: 24rem; }
  .navbar__menu a { padding: 1rem 1.5rem; border-top: 1px solid var(--bord); }
  .commande { position: static; }
}

@media (max-width: 767px) {
  .section { padding-block: 5rem; }
  .contenu { padding-inline: 1.25rem; }
  .navbar__actions .bouton--discret { display: none; }
  .champs { grid-template-columns: 1fr; }
  .modale { padding: 0; align-items: flex-end; }
  .modale__panneau { max-height: 92vh; border-radius: 0.5rem 0.5rem 0 0; }
  .video__gens { grid-template-columns: 1fr; }
  .succes__recap { flex-direction: column; gap: 1rem; }
  .succes__separateur { width: 2.5rem; height: 1px; }
  .lecteur { padding: 0; }
  .lecteur__panneau { max-height: 100vh; border-radius: 0; }
}


/* ==========================================================================
   17. PAGES LÉGALES
   ========================================================================== */

.page-legale { padding-block: 9rem 6rem; }
.page-legale h1 { margin-top: 0.75rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.025em; }
.page-legale h2 {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--bord);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}
.page-legale h3 { margin-top: 1.75rem; font-size: 1.05rem; color: var(--or); }
.page-legale p, .page-legale li { margin-top: 0.875rem; color: var(--texte-doux); line-height: 1.7; }
.page-legale ul { margin-top: 0.875rem; }
.page-legale li { position: relative; padding-left: 1.25rem; }
.page-legale li::before { content: "—"; position: absolute; left: 0; color: var(--or); }
.page-legale strong { color: var(--texte); font-weight: 600; }
.page-legale a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }

/* Marqueur des informations que l'éditeur doit renseigner lui-même */
.a-completer {
  display: inline-block; padding: 0.05em 0.45em; border-radius: 0.125rem;
  background: oklch(64% 0.15 48 / 0.18); border: 1px dashed var(--terre);
  color: var(--terre); font-family: var(--mono); font-size: 0.8em;
}

.page-legale__date { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--bord); }

/* Encart d'avertissement */
.encart {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--terre); border-left-width: 3px; border-radius: 0.25rem;
  background: oklch(64% 0.15 48 / 0.07);
}
.encart p { margin-top: 0.5rem; }
.encart p:first-child { margin-top: 0; }

/* Les deux mentions légales du pied de page sont des liens discrets */
.pied__bas a { color: inherit; text-decoration: none; transition: color 0.3s; }
.pied__bas a:hover { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }

/* Piège à robots : hors écran plutôt que display:none, que certains robots
   détectent. Inaccessible au clavier et ignoré par les lecteurs d'écran. */
.piege-robots {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Message d'échec d'envoi, sous les boutons de la modale */
.modale__erreur {
  flex-shrink: 0; margin: 0; padding: 0 1.5rem 1.25rem;
  font-size: 0.8125rem; color: #f87171;
}