/* =============================================================================
   GRAAL ARENA — css/base.css
   -----------------------------------------------------------------------------
   Rôle : socle visuel commun à TOUT le site (accueil + pages juridiques).
     1. Polices (auto-hébergées dans /fonts : aucune donnée envoyée à Google)
     2. Variables (couleurs, polices, espacements, rayons, ombres)
     3. Reset et typographie
     4. Utilitaires (.sr-only, .conteneur, .section…)
     5. Composants partagés : titres de section, boutons, cartes, médias
        (images et emplacements « Visuel à venir »), formulaires (+ variantes
        .theme-ivoire et .formulaire--compact), animations
        au défilement, visionneuse (lightbox), défilement fluide (Lenis)
   Direction artistique « blanc & nuit » (octobre 2026) : fond blanc sur tout
   le site, ivoire (#f5f1e8) en surface secondaire (cartes, panneaux, pied de
   page), quelques blocs bleu nuit (#09274f) pour le contraste (classe
   .theme-nuit) ; textes bleu nuit ; titres en Instrument Serif avec un mot
   en italique orange foncé (#b0661a, lisible sur blanc) ; orange du logo
   (#e19a30) pour les aplats et sur fond nuit, bleu du logo (#0651a7) pour
   les surtitres, liens et repères.
   L'ancienne version entièrement bleu nuit est sauvegardée dans le dossier
   _sauvegarde-theme-nuit/.
   Données de config.js utilisées : aucune.

   ⚠ Ne modifier ce fichier que si c'est indispensable : tous les blocs en
   dépendent. Pour changer un seul bloc : css/blocs/[nom-du-bloc].css
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. POLICES — Instrument Sans (titres et texte) + Instrument Serif (italique)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. VARIABLES — modifier ici pour changer l'identité de tout le site
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Fonds */
  --c-fond: #ffffff;            /* fond principal : blanc                 */
  --c-carte: #ffffff;           /* cartes, formulaires                    */
  --c-fond-2: #f8f6f1;          /* champs de saisie, cadres d'images      */
  --c-fond-3: #f5f1e8;          /* ivoire : panneaux, pied de page        */

  /* Textes (contrastes AA sur blanc ET sur ivoire) */
  --c-texte: #0b1a33;           /* texte principal (bleu nuit)            */
  --c-texte-doux: #4a5568;      /* texte secondaire                       */
  --c-titre: #0a3166;           /* grands titres : bleu foncé (logo assombri) */
  --c-em: #b0661a;              /* mot en italique des titres (orange foncé) */
  --c-or-texte: #9a5a0c;        /* petit texte orange (lisible sur blanc) */

  /* Couleurs fixes */
  --c-ivoire: #f5f1e8;
  --c-nuit: #0b1a33;            /* texte posé sur fond ivoire ou orange   */
  --c-bleu-nuit: #09274f;       /* fond des blocs « nuit »                */
  --c-blanc: #ffffff;

  /* Couleurs du logo (accents) */
  --c-or: #e19a30;              /* orange : aplats, boutons, repères      */
  --c-bleu: #0651a7;            /* bleu du logo : surtitres, liens        */
  --c-bleu-logo: #0651a7;

  /* Traits, survols et états */
  --c-trait: rgba(11, 26, 51, 0.1);
  --c-trait-fort: rgba(11, 26, 51, 0.2);
  --c-survol: rgba(11, 26, 51, 0.04);
  --c-focus: #0651a7;
  --c-succes: #1f7a4f;
  --c-erreur: #b42318;

  /* Polices */
  --police: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --police-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Tailles de texte fluides (mobile → ordinateur) */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --t-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --t-3xl: clamp(3rem, 1.6rem + 5.8vw, 6.75rem);

  /* 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;
  --e-section: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);   /* espace vertical des sections (réduit : page plus courte) */
  --gouttiere: 20px;
  --largeur-max: 1280px;

  /* Rayons et ombres */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 24px;
  --r-rond: 999px;
  --ombre-douce: 0 1px 2px rgba(11, 26, 51, 0.05), 0 24px 50px -28px rgba(11, 26, 51, 0.3);

  /* Mouvement */
  --courbe: cubic-bezier(0.2, 0.7, 0.1, 1);
  --transition: 300ms var(--courbe);

  --hauteur-entete: 76px;
}
@media (min-width: 768px) { :root { --gouttiere: 40px; } }

/* THÈME NUIT — à poser sur un bloc ou un élément pour le passer en bleu nuit
   (bande des chiffres du projet, chiffres du jeu concours, texte du haut de
   page sur la photo, cartes des pages de confirmation, visionneuse).
   Toutes les variables reprennent les valeurs d'origine « fond sombre ». */
.theme-nuit,
.lightbox {
  color-scheme: dark;
  --c-fond: #09274f;
  --c-carte: #123a72;
  --c-fond-2: #061a38;
  --c-fond-3: #061c3d;
  --c-texte: #f5f1e8;
  --c-texte-doux: #b9c2d1;
  --c-titre: #ffffff;
  --c-em: #e19a30;
  --c-or-texte: #e19a30;
  --c-bleu: #62a3f2;
  --c-trait: rgba(245, 241, 232, 0.14);
  --c-trait-fort: rgba(245, 241, 232, 0.26);
  --c-survol: rgba(245, 241, 232, 0.06);
  --c-focus: #e19a30;
  --c-succes: #6fd3a0;
  --c-erreur: #ff8f80;
  color: var(--c-texte);
}

/* ---------------------------------------------------------------------------
   3. RESET ET TYPOGRAPHIE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.sans-defilement, html.sans-defilement body { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 var(--e-4);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.15; }

/* Grands titres en Instrument Serif (plus élégant sur fond blanc) */
h1, h2 {
  font-family: var(--police-serif);
  font-weight: 400;
  color: var(--c-titre);
  letter-spacing: -0.012em;
  line-height: 1.02;
}

/* Le mot mis en valeur dans un titre : italique serif, orange
   (orange foncé sur fond clair, orange du logo sur fond nuit) */
h1 em, h2 em, h3 em {
  font-family: var(--police-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-em);
}

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--c-bleu); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
strong { font-weight: 600; }

::selection { background: var(--c-or); color: var(--c-nuit); }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
main:focus, [data-bloc]:focus { outline: none; }

[id] { scroll-margin-top: calc(var(--hauteur-entete) + 16px); }

/* ---------------------------------------------------------------------------
   4. UTILITAIRES
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute; top: -100px; left: var(--e-4); z-index: 1000;
  padding: var(--e-3) var(--e-4);
  background: var(--c-ivoire); color: var(--c-nuit);
  border-radius: var(--r-s); text-decoration: none; font-weight: 500;
}
.lien-evitement:focus { top: var(--e-4); color: var(--c-nuit); }

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

.section { padding-block: var(--e-section); position: relative; }

/* FOND DES SECTIONS — blanc uni (--c-fond), sans halo : le contraste vient
   des panneaux ivoire et des blocs bleu nuit.
   Une section passée en .theme-nuit retrouve les halos bleus d'origine,
   dessinés sur un calque (::before) qui glisse très lentement au défilement
   (variables --defile / --defile-x mises à jour par utils.js).
   Réglages possibles (variables CSS) :
   --halo-pos, --halo-force, --halo2-pos, --halo2-force, --ombre-pos */
.section {
  background: var(--c-fond);
  isolation: isolate;
  overflow: clip;            /* le calque des halos ne déborde pas (sans gêner position: sticky) */
}
.section.theme-nuit::before {
  content: "";
  position: absolute;
  inset: -10% 0;             /* marge pour le glissement */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at var(--halo-pos, 88% 50%), rgba(30, 110, 210, var(--halo-force, 0.22)), transparent 72%),
    radial-gradient(45% 40% at var(--halo2-pos, 8% 55%), rgba(225, 154, 48, var(--halo2-force, 0)), transparent 72%),
    radial-gradient(70% 50% at var(--ombre-pos, 15% 50%), rgba(4, 16, 36, 0.35), transparent 72%);
  transform: translate3d(var(--defile-x, 0px), var(--defile, 0px), 0);
  will-change: transform;
}
main > .section:nth-of-type(even) { --halo-pos: 12% 50%; --halo2-pos: 92% 55%; --ombre-pos: 85% 50%; }
main > .section:nth-of-type(3n) { --halo2-force: 0.07; }

/* .section--alt : conservée pour compatibilité, même fond que les autres */
.section--alt { }

/* Deux sections qui se suivent : on évite de doubler l'espace vertical
   (sauf autour de la section mise en avant) */
.section:not(.section--nuit) + .section:not(.section--nuit) { padding-top: 0; }

/* Section mise en avant (jeu concours) : le décor du panneau encadré est
   dessiné dans css/blocs/jeu-concours.css ; ici, simple fond calme autour. */
.section--nuit { --halo-force: 0.12; }

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

[data-bloc][aria-busy="true"] { min-height: 50vh; }
[data-bloc="entete"][aria-busy="true"] { min-height: 0; }

/* ---------------------------------------------------------------------------
   5a. TITRE DE SECTION
   <div class="titre-section">
     <p class="titre-section__surtitre">Le projet</p>
     <h2 class="titre-section__titre revele-titre">Une friche <em>réinventée</em>.</h2>
     <p class="titre-section__intro">…</p>
   </div>
   Variante : .titre-section--centre
   --------------------------------------------------------------------------- */
.titre-section { max-width: 920px; margin-bottom: var(--e-7); }
.titre-section--centre { margin-inline: auto; text-align: center; }

.titre-section__surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  font-size: var(--t-xs);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-bleu);
}
.titre-section__surtitre::before {
  content: "";
  width: 28px; height: 2px;
  border-radius: 2px;
  background: var(--c-or);
}
.titre-section--centre .titre-section__surtitre::before { display: none; }

.titre-section__titre { margin-bottom: var(--e-5); }
.titre-section__intro { max-width: 620px; color: var(--c-texte-doux); font-size: var(--t-l); line-height: 1.55; }
.titre-section--centre .titre-section__intro { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   5b. BOUTONS
   <a class="btn btn--plein" href="#">Texte <span class="btn__fleche" aria-hidden="true">→</span></a>
   Variantes : --plein (ivoire, bouton principal), --contour (secondaire),
   --clair (identique à --plein, conservé pour compatibilité), --large
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 52px;
  padding: 0.5rem 0.75rem 0.5rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-rond);
  font-size: var(--t-s);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:not(:has(.btn__fleche)) { padding-right: 1.6rem; }

.btn__fleche {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--c-or);
  color: var(--c-nuit);
  font-size: 1rem;
  transition: transform var(--transition);
}
.btn:hover .btn__fleche { transform: translateX(3px); }

/* Bouton plein : bleu nuit sur fond clair, ivoire sur fond nuit */
.btn--plein,
.btn--clair { background: var(--c-nuit); color: var(--c-blanc); }
.btn--plein:hover,
.btn--clair:hover { background: var(--c-bleu); color: var(--c-blanc); }
.theme-nuit .btn--plein,
.theme-nuit .btn--clair { background: var(--c-ivoire); color: var(--c-nuit); }
.theme-nuit .btn--plein:hover,
.theme-nuit .btn--clair:hover { background: var(--c-blanc); color: var(--c-nuit); }

/* Bouton orange (action principale du haut de page) */
.btn--or { background: var(--c-or); color: var(--c-nuit); font-weight: 600; }
.btn--or:hover { background: #eaa94a; color: var(--c-nuit); }
.btn--or .btn__fleche { background: var(--c-nuit); color: var(--c-or); }

.btn--contour { border-color: var(--c-trait-fort); color: var(--c-texte); background: transparent; }
.btn--contour:hover { border-color: var(--c-texte); color: var(--c-texte); background: var(--c-survol); }
.btn--contour .btn__fleche { background: transparent; border: 1px solid var(--c-trait-fort); color: var(--c-texte); }

.btn--large { width: 100%; justify-content: space-between; }

.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }

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

/* Indicateur de chargement : <span class="chargement" aria-hidden="true"></span> */
.chargement {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotation 0.8s linear infinite;
}

/* Lien texte avec flèche : <a class="lien-fleche" href="#">Lire le règlement</a> */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   5c. CARTES ET PASTILLES
   <article class="carte">…</article>
   <span class="pastille">Texte</span>  (+ --or, --bleu, --neutre)
   --------------------------------------------------------------------------- */
.carte {
  background: var(--c-carte);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-l);
  padding: var(--e-6);
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.8em;
  border-radius: var(--r-rond);
  border: 1px solid var(--c-trait-fort);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-texte);
  white-space: nowrap;
}
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.pastille--or::before { background: var(--c-or); opacity: 1; }
.pastille--bleu::before { background: var(--c-bleu); opacity: 1; }
.pastille--neutre { color: var(--c-texte-doux); }

/* ---------------------------------------------------------------------------
   5d. MÉDIAS (images) — générés par media() de utils.js
   <figure class="media revele-media" style="--ratio: 16 / 9" data-parallaxe>
     <div class="media__cadre"><img class="media__image" …></div>
     <figcaption class="media__legende">…</figcaption>
   </figure>
   Sans fichier : emplacement élégant « Visuel à venir » (.media__attente).
   --------------------------------------------------------------------------- */
.media { margin: 0; }
.media__cadre {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--c-fond-2);
  isolation: isolate;
}
.media__image,
.media__attente {
  position: absolute;
  inset: -8% 0;               /* marge pour l'effet de parallaxe */
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--parallaxe, 0px), 0);
  will-change: transform;
}
.media__attente {
  display: flex;
  align-items: flex-end;
  padding: 11% var(--e-5);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(6, 81, 167, 0.1), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(225, 154, 48, 0.16), transparent 60%),
    linear-gradient(160deg, #f8f5ee, #ece5d6);
}
.media__attente-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texte-doux);
}
.media__attente-texte strong {
  font-family: var(--police-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-l);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-texte);
}
.media__legende { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--c-texte-doux); }

/* ---------------------------------------------------------------------------
   5e. FORMULAIRES  (logique d'envoi et de validation : js/utils.js)
   Mêmes classes qu'avant : .formulaire, .formulaire__grille, .champ,
   .champ--large, .champ__label, .champ__requis, .champ__controle, .champ__aide,
   .champ__erreur (créé automatiquement), .case, .case__input, .case__label,
   .groupe-cases, .groupe-cases__options, .pot-de-miel, .formulaire__statut,
   .formulaire__consentements, .formulaire__actions, .formulaire__mentions
   --------------------------------------------------------------------------- */
.formulaire {
  background: var(--c-carte);
  color: var(--c-texte);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-l);
  padding: var(--e-5);
  box-shadow: var(--ombre-douce);
}
@media (min-width: 768px) { .formulaire { padding: var(--e-7); } }

.formulaire__titre { color: var(--c-titre); font-family: var(--police-serif); font-weight: 400; letter-spacing: -0.01em; font-size: var(--t-xl); margin-bottom: var(--e-2); }
.formulaire__legende { margin-bottom: var(--e-6); font-size: var(--t-s); color: var(--c-texte-doux); }

.formulaire__grille { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .formulaire__grille { grid-template-columns: 1fr 1fr; }
  .champ--large { grid-column: 1 / -1; }
}

.champ { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.champ__label { font-size: var(--t-s); font-weight: 500; }
.champ__requis { color: var(--c-or-texte); }
.champ__aide { font-size: var(--t-xs); color: var(--c-texte-doux); margin: 0; }

.champ__controle {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  background: var(--c-fond-2);
  border: 1px solid var(--c-trait-fort);
  border-radius: var(--r-m);
  color: var(--c-texte);
  font-size: 1rem;             /* ≥ 16px : pas de zoom automatique sur iPhone */
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ__controle::placeholder { color: #8b929c; }
.champ__controle:hover { border-color: rgba(11, 26, 51, 0.4); }
.champ__controle:focus { outline: none; border-color: var(--c-bleu); background-color: var(--c-blanc); box-shadow: 0 0 0 4px rgba(6, 81, 167, 0.14); }
.theme-nuit .champ__controle::placeholder { color: rgba(245, 241, 232, 0.4); }
.theme-nuit .champ__controle:hover { border-color: rgba(245, 241, 232, 0.45); }
.theme-nuit .champ__controle:focus { background-color: var(--c-fond-2); box-shadow: 0 0 0 4px rgba(76, 147, 236, 0.22); }
textarea.champ__controle { min-height: 130px; resize: vertical; }
select.champ__controle {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-texte) 50%), linear-gradient(135deg, var(--c-texte) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.champ__controle[aria-invalid="true"] { border-color: var(--c-erreur); }
.champ__erreur { margin: 0; font-size: var(--t-s); color: var(--c-erreur); }
.champ__erreur:empty { display: none; }

.case { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
.case + .case { margin-top: var(--e-4); }
.case__input {
  appearance: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--c-trait-fort);
  border-radius: 6px;
  background: var(--c-fond-2);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.case__input::before {
  content: "";
  width: 12px; height: 12px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--c-blanc);
  transform: scale(0);
  transition: transform 150ms ease-in-out;
}
.case__input:checked { background: var(--c-nuit); border-color: var(--c-nuit); }
.case__input:checked::before { transform: scale(1); }
.case__input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.theme-nuit .case__input::before { background: var(--c-nuit); }
.theme-nuit .case__input:checked { background: var(--c-or); border-color: var(--c-or); }
.case__input[aria-invalid="true"] { border-color: var(--c-erreur); }
.case__label { font-size: var(--t-s); line-height: 1.5; cursor: pointer; }
.case .champ__erreur { grid-column: 2; }

.groupe-cases { margin: 0; padding: 0; border: 0; min-width: 0; }
.groupe-cases legend { padding: 0; margin-bottom: var(--e-3); font-size: var(--t-s); font-weight: 500; }
.groupe-cases__options { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.groupe-cases__options .case + .case { margin-top: 0; }
.groupe-cases > .champ__erreur { margin-top: var(--e-2); }

.formulaire__consentements { margin-top: var(--e-6); padding-top: var(--e-6); border-top: 1px solid var(--c-trait); }
.formulaire__actions { margin-top: var(--e-6); }
.formulaire__mentions { margin-top: var(--e-5); font-size: var(--t-xs); color: var(--c-texte-doux); line-height: 1.55; }

.pot-de-miel { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.formulaire__statut:empty { display: none; }
.formulaire__statut { margin-top: var(--e-4); }

.alerte {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border-radius: var(--r-m);
  border: 1px solid;
  font-size: var(--t-s);
}
.alerte svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.alerte--erreur { background: #fdf0ee; border-color: rgba(180, 35, 24, 0.35); color: #7a1a12; }
.alerte--succes { background: #eef7f2; border-color: rgba(31, 122, 79, 0.35); color: #14532d; }
.alerte--info { background: #eef3fa; border-color: rgba(6, 81, 167, 0.3); color: #0b3a75; }
.theme-nuit .alerte--erreur { background: rgba(255, 143, 128, 0.1); border-color: rgba(255, 143, 128, 0.45); color: #ffc2b9; }
.theme-nuit .alerte--succes { background: rgba(111, 211, 160, 0.1); border-color: rgba(111, 211, 160, 0.45); color: #b8f0d2; }
.theme-nuit .alerte--info { background: rgba(76, 147, 236, 0.12); border-color: rgba(76, 147, 236, 0.45); color: #c5dcfb; }
.alerte a { color: inherit; }

.formulaire-succes {
  text-align: center;
  padding: var(--e-8) var(--e-6);
  background: var(--c-carte);
  color: var(--c-texte);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-l);
}
.formulaire-succes:focus { outline: none; }
.formulaire-succes__icone {
  width: 60px; height: 60px;
  margin: 0 auto var(--e-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(225, 154, 48, 0.15);
  color: var(--c-or-texte);
}
.formulaire-succes__icone svg { width: 28px; height: 28px; }
.formulaire-succes__titre { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--e-3); }
.formulaire-succes__texte { color: var(--c-texte-doux); max-width: 480px; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   5e-bis. VARIANTES DE FORMULAIRE
   .theme-ivoire     : à poser sur le CONTENEUR du formulaire (pas sur <form>),
                       pour que le message de remerciement qui remplace le
                       formulaire après l'envoi reste lui aussi en ivoire.
                       Carte ivoire, textes bleu nuit, champs blancs, bouton
                       bleu nuit, messages d'erreur rouge foncé.
   .formulaire--compact : à poser sur <form> ; espacements, champs et textes
                       resserrés pour un formulaire qui prend moins de place.
   --------------------------------------------------------------------------- */
.theme-ivoire {
  --c-carte: #f5f1e8;                 /* fond de la carte : ivoire      */
  --c-fond-2: #ffffff;                /* fond des champs : blanc        */
  --c-trait: rgba(11, 26, 51, 0.12);
  --c-trait-fort: rgba(11, 26, 51, 0.25);
}

.formulaire--compact { padding: var(--e-5); }
@media (min-width: 768px) { .formulaire--compact { padding: var(--e-6); } }
.formulaire--compact .formulaire__titre { font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); margin-bottom: var(--e-1); }
.formulaire--compact .formulaire__legende { margin-bottom: var(--e-4); font-size: var(--t-xs); }
.formulaire--compact .formulaire__grille { gap: var(--e-3) var(--e-4); }
.formulaire--compact .champ { gap: var(--e-1); }
.formulaire--compact .champ__label { font-size: var(--t-xs); }
.formulaire--compact .champ__controle { min-height: 44px; padding: 0.55rem 0.9rem; border-radius: var(--r-s); }
.formulaire--compact select.champ__controle { padding-right: 2.5rem; }
.formulaire--compact textarea.champ__controle { min-height: 84px; }
.formulaire--compact .champ__erreur { font-size: var(--t-xs); }
.formulaire--compact .groupe-cases legend { margin-bottom: var(--e-2); font-size: var(--t-xs); }
.formulaire--compact .groupe-cases__options { gap: var(--e-2) var(--e-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.formulaire--compact .formulaire__consentements { margin-top: var(--e-4); padding-top: var(--e-4); }
.formulaire--compact .case { gap: var(--e-2); }
.formulaire--compact .case + .case { margin-top: var(--e-2); }
.formulaire--compact .groupe-cases__options .case + .case { margin-top: 0; }
/* Mobile : deux champs courts par ligne (les champs .champ--large restent sur toute la ligne) */
@media (min-width: 360px) and (max-width: 639px) {
  .formulaire--compact .formulaire__grille { grid-template-columns: 1fr 1fr; }
  .formulaire--compact .champ--large { grid-column: 1 / -1; }
}
.formulaire--compact .case__input { width: 20px; height: 20px; }
.formulaire--compact .case__label { font-size: var(--t-xs); line-height: 1.45; }
.formulaire--compact .formulaire__actions { margin-top: var(--e-4); }
.formulaire--compact .formulaire__actions .btn { min-height: 48px; }
.formulaire--compact .formulaire__mentions { margin-top: var(--e-3); font-size: 0.72rem; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   5f. ANIMATIONS AU DÉFILEMENT  (activées par observerApparition() de utils.js)
   .apparition    : fondu + léger glissement (délai : style="--delai: 120ms")
   .revele-titre  : le titre se révèle ligne par ligne (mots découpés en JS)
   .revele-media  : l'image s'ouvre depuis un masque
   [data-parallaxe] : l'image se déplace légèrement au défilement
   --------------------------------------------------------------------------- */
.apparition {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--courbe), transform 1s var(--courbe);
  transition-delay: var(--delai, 0ms);
}
.apparition.est-visible { opacity: 1; transform: none; }

.revele-titre .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.08em 0.12em 0;          /* évite de couper l'italique et les jambages */
  margin: 0 -0.08em -0.12em 0;
}
.revele-titre .mot__interieur {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--courbe);
  transition-delay: calc(var(--ligne, 0) * 110ms + var(--delai, 0ms));
}
.revele-titre.est-visible .mot__interieur { transform: none; }

.revele-media .media__cadre {
  clip-path: inset(18% 8% 0 8% round var(--r-l));
  transition: clip-path 1.4s var(--courbe);
}
.revele-media .media__image,
.revele-media .media__attente { scale: 1.12; transition: scale 1.6s var(--courbe); }
.revele-media.est-visible .media__cadre { clip-path: inset(0 0 0 0 round var(--r-l)); }
.revele-media.est-visible .media__image,
.revele-media.est-visible .media__attente { scale: 1; }

/* ---------------------------------------------------------------------------
   5g. VISIONNEUSE DE PHOTOS (lightbox) — ouvrirLightbox() de utils.js
   --------------------------------------------------------------------------- */
.lightbox {
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(5, 14, 29, 0.97);
  color: var(--c-texte);
}
.lightbox::backdrop { background: rgba(5, 14, 29, 0.6); }
.lightbox__scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 12px 84px; }
@media (min-width: 768px) { .lightbox__scene { padding: 72px 96px 40px; } }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.lightbox__image { max-width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border-radius: var(--r-s); }
.lightbox__legende { text-align: center; font-size: var(--t-s); max-width: 70ch; color: rgba(245, 241, 232, 0.85); }
.lightbox__compteur { position: absolute; top: 22px; left: 22px; margin: 0; font-size: var(--t-s); color: rgba(245, 241, 232, 0.7); }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-trait-fort);
  background: transparent;
  color: var(--c-texte);
  transition: background var(--transition);
}
.lightbox__btn:hover { background: rgba(245, 241, 232, 0.12); }
.lightbox__btn:focus-visible { outline-color: var(--c-focus); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__btn--fermer { top: 12px; right: 12px; }
.lightbox__btn--precedent { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--suivant { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .lightbox__btn--precedent, .lightbox__btn--suivant { top: auto; bottom: 18px; transform: none; }
}

/* ---------------------------------------------------------------------------
   DÉFILEMENT FLUIDE (bibliothèque Lenis, js/vendor/lenis.mjs)
   --------------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------------------------------------------------------------------------
   ANIMATIONS PARTAGÉES
   --------------------------------------------------------------------------- */
@keyframes rotation { to { transform: rotate(360deg); } }
@keyframes pulsation {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 154, 48, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(225, 154, 48, 0); }
}

/* ---------------------------------------------------------------------------
   MOUVEMENT RÉDUIT
   --------------------------------------------------------------------------- */
@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;
    transition-delay: 0ms !important;
  }
  .apparition { opacity: 1; transform: none; }
  .revele-titre .mot__interieur { transform: none; }
  .revele-media .media__cadre { clip-path: none; }
  .revele-media .media__image, .revele-media .media__attente { scale: 1; }
  .media__image, .media__attente { transform: none; }
  .chargement { animation: rotation 1.6s linear infinite !important; }
}