/* ============================================================================
   EAGLE ACADEMY, SYSTÈME DE DESIGN
   ----------------------------------------------------------------------------
   Une seule feuille pour tout le site public.

   BASCULE DU 29/08/2026 : LA CHARTE PASSE SUR CELLE DE ROMAIN BOUVET.
   Décision de Rudy, prise après lecture de la newsletter de Romain transmise
   par Fabian le 29/08. Les valeurs sont relevées dans la feuille de style de
   romainbouvet.fr, elles ne sont pas approchées :

     Fond      #F7F6FA   blanc très légèrement violacé
     Encre     #1F1F23   anthracite
     Accent    #6657E8   indigo, sa couleur
     Textes    #52525A, #7A7A82, #A7A7AE
     Sombre    #09071B
     Typo      Sora pour les titres, Manrope pour le corps

   CE QUE CELA CHANGE : le site passe du fond nuit au fond clair, et l'or
   #6657E8 cède la place à l'indigo. L'ancienne charte est conservée dans
   eagle.css.avant-romain, au cas où.

   ⚠️ RÉSERVE EXPRIMÉE, ET LEVÉE PAR RUDY. Reprendre l'accent et la
   typographie exacts d'un consultant reconnu expose Eagle Academy à la
   comparaison directe. Rudy a tranché en connaissance de cause.

   PERFORMANCE, règles tenues dans ce fichier :
   - Zéro @import, zéro appel réseau depuis la feuille.
   - Zéro filtre sur des éléments plein écran (coût GPU sur mobile).
   - Les animations ne touchent que transform et opacity.
   - Tout est désactivé sous prefers-reduced-motion.
   ========================================================================= */

:root {
  /* ==========================================================================
     PALETTE ROMAIN BOUVET, relevée le 29/08/2026 dans sa feuille de style
     (romains-marvelous-site-ded2cd.webflow.shared.css). Décision de Rudy,
     confirmée après que j'aie exprimé ma réserve : reprendre l'identité d'un
     consultant reconnu expose à la comparaison. Elle est assumée.

     ⚠️ LE SITE PASSE DU FOND NUIT AU FOND CLAIR.
     Les noms de variables sont conservés parce qu'ils sont employés plusieurs
     centaines de fois et qu'un renommage à dix jours de la conférence serait
     déraisonnable. Mais ILS NE VEULENT PLUS DIRE CE QU'ILS DISENT :
       --ink        n'est plus l'encre, c'est LE FOND CLAIR
       --tx-on-dark n'est plus le texte clair, c'est LE TEXTE SOMBRE
     Les alias en français juste en dessous portent le sens réel. Écrire tout
     nouveau code avec eux.
     ========================================================================== */

  /* Les vraies valeurs, nommées correctement */
  /* ⚠️ CORRIGÉ LE 29/08 : le site de Romain Bouvet est SOMBRE, pas clair.
     Son hero est un presque noir avec une photo de lui sur scène, puis les
     sections alternent sombre, blanc, anthracite. J'avais éclairci Eagle sur
     une lecture fausse. La base redevient sombre, aux valeurs relevées chez
     lui, et l'indigo redevient ce qu'il est chez lui : un accent RARE, sur
     les boutons et sur un seul mot du titre. */
  --fond:        #09071B;   /* presque noir bleuté, le fond de son hero */
  --fond-carte:  #16142A;   /* surfaces soulevées sur le sombre */
  --fond-2:      #1F1F23;   /* anthracite, sa section alternée */
  --fond-clair:  #FFFFFF;   /* les sections blanches */
  --fond-sombre: #09071B;   /* les rares sections sombres */
  --trait:       rgb(255 255 255 / 0.10);  /* filets sur le sombre */
  --trait-clair: #E7E6EA;   /* filets sur les sections blanches */
  --encre:       #F4F3F8;   /* texte principal, sur fond sombre */
  --encre-sombre:#1F1F23;   /* texte des sections blanches */
  --encre-2:     #52525A;   /* texte secondaire */
  --encre-3:     #7A7A82;   /* mentions */
  --encre-4:     #A7A7AE;   /* désactivé */
  --indigo:      #6657E8;   /* L'ACCENT. Sa couleur. */
  --indigo-hi:   #7A6CEE;
  --indigo-pale: #9A8DF2;
  --bleu:        #005FCC;
  --sable:       #D7D4CA;

  /* --- Alias historiques. Ne pas s'y fier pour lire le sens. --- */
  --ink:        var(--fond);
  --ink-2:      var(--fond-carte);
  --ink-3:      var(--trait);

  /* L'ancien or devient l'indigo : c'est l'accent de la marque partout. */
  --gold:       var(--indigo);
  --gold-hi:    var(--indigo-hi);
  --gold-dim:   var(--indigo-pale);

  --cyan:       var(--bleu);
  --cyan-hi:    #3D8AE0;
  --violet:     var(--indigo-pale);
  --violet-hi:  #B8AEF7;

  /* Les trois piliers. La palette de Romain est monochrome indigo : elle ne
     porte pas nativement un code à trois couleurs. On reste dans sa famille
     plutôt que d'y injecter des teintes étrangères, quitte à ce que les trois
     soient plus proches qu'avant. Le rang se lit aussi au numéro et au filet. */
  --pilier-etre:  var(--indigo);
  --pilier-faire: var(--bleu);
  --pilier-exit:  var(--encre);

  --rouge:      #C6283C;
  --rouge-hi:   #E05A6B;

  --bone:   #FFFFFF;
  --bone-2: #F7F6FA;
  --white:      #FFFFFF;

  /* ⚠️ Inversés. « on-dark » désigne désormais le texte SUR FOND CLAIR. */
  --tx-on-dark:  #F4F3F8;
  --tx-on-dark-2:#A7A7AE;
  --tx-on-dark-3:#7A7A82;
  --tx-on-light: #1F1F23;
  --tx-on-light-2:#52525A;

  --ok:   #1F8A6D;
  --warn: var(--indigo);
  --bad:  var(--rouge);

  --tx-1: var(--tx-on-dark);
  --tx-2: var(--tx-on-dark-2);
  --tx-3: var(--tx-on-dark-3);
  --turquoise: #1F8A6D;
  --gold-dark: #5346C4;
  --cyan-dark: #004FA8;

  /* Typographie de Romain : Sora pour les titres, Manrope pour le corps.
     Sora est géométrique et sérieuse, Manrope très lisible en petit corps. */
  --font-title: 'Sora', 'Sora', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:  'Manrope', 'Sora', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Échelle typographique fluide : un seul jeu, pas de media query à écrire.

     ⚠️ RELEVÉE D'UN CRAN EN JUILLET 2026. Le corps était à 1.0625rem (17 px) et
     l'échelle entière était timide : lu sur un ordinateur de bureau, le site
     paraissait écrit en petit. Le corps passe à 1.15rem (18,4 px), les titres
     et les libellés suivent. Rien ici n'est en pixels fixes : un visiteur qui
     grossit la police de son navigateur voit toute la page grossir avec lui. */
  --t-hero:  clamp(2.55rem, 1.40rem + 5.0vw, 5.4rem);
  --t-h1:    clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  --t-h2:    clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  --t-h3:    clamp(1.55rem, 1.28rem + 1.2vw, 2.2rem);
  --t-lead:  clamp(1.42rem, 1.18rem + 1.05vw, 1.92rem);
  --t-body:  1.4rem;
  --t-small: 1.2rem;
  --t-micro: 1.02rem;

  /* ⚠️ SIGNALÉ QUATRE FOIS PAR RUDY : « l'écriture est trop petite ».
     Le corps était déjà remonté à 1,375 rem, mais ce n'était pas là que se
     jouait l'impression de petitesse : une quinzaine de composants
     (navigation, boutons, témoignages, FAQ, pied de page, mentions) portaient
     une taille écrite en dur entre 0,95 et 1,02 rem, soit 15 à 16 px, à côté
     d'un corps de 22 px. C'est ce contraste qui faisait « écrit petit ».
     Ces tailles passent toutes par les trois jetons ci-dessus.

     Cas particulier trouvé en relisant : `.nav__link` déclarait
     `font-size: 1.12rem` PUIS `font-size: 0.98rem` sur la ligne suivante.
     La seconde gagnait, la première n'a jamais rien fait. Corrigé plus bas. */

  /* Hauteur de la barre de navigation et taille du logo, en un seul endroit.
     Le logo était à 76 px et Rudy le trouvait « pas du tout représentatif » :
     il monte à 100 px, puis 110 px au-delà de 1400 px de large. Pour que la
     barre ne mange pas le premier écran une fois la lecture commencée, elle
     se resserre au défilement (classe `is-compact`, posée par eagle.js).
     Si le script ne tourne pas, la barre reste à sa grande taille : rien ne
     casse, le logo reste simplement grand tout du long. */
  --nav-h:  88px;
  --logo-h: 64px;

  /* Rythme */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(76px, 9vw, 152px);

  /* Formes : angles peu arrondis, volontairement.
     Une forme arrondie signale la chaleur, une forme anguleuse signale la
     compétence et la robustesse. Eagle Academy s'adresse à des dirigeants sur
     un sujet de valorisation d'entreprise : c'est la compétence qui doit
     primer. D'où des rayons courts (6 à 20 px) et aucune pilule décorative. */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --line: 1px solid rgb(0 0 0 / 0.10);
  --line-dark: 1px solid var(--trait);

  /* Ombres : discrètes. Une ombre forte fait « template acheté ». */
  --sh-1: 0 1px 2px rgb(31 31 35 / 0.06);
  --sh-2: 0 6px 22px rgb(11 14 20 / 0.09);
  --sh-3: 0 20px 50px rgb(31 31 35 / 0.12);
  /* Halos colorés : la profondeur des cartes sur fond nuit. */
  --halo-or:     0 24px 60px -30px rgb(102 87 232 / 0.55);
  --halo-cyan:   0 24px 60px -30px rgb(0 188 212 / 0.5);
  --halo-violet: 0 24px 60px -30px rgb(124 58 237 / 0.5);

  /* Largeurs.
     `--w-page` gouverne l'occupation de l'écran, `--w-text` gouverne la
     lecture. Les deux ne vont pas dans le même sens et c'est normal : la page
     peut s'étaler, une ligne de texte non. */
  --w-page: min(92vw, 1680px);
  /* ⚠️ 56ch, pas 68. Mesuré sur la page après l'élargissement de `--w-page` :
     à 68ch, les paragraphes atteignaient 86 caractères réels à 1920 px. Au-delà
     de 80, l'oeil ne retrouve plus le début de la ligne suivante. L'unité `ch`
     mesure la largeur du chiffre zéro, plus large que la moyenne des minuscules
     d'Outfit : 56ch donnent environ 71 caractères, la bonne longueur. */
  --w-text: 56ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Identité de mouvement : trois durées, une seule courbe.
     Tout ce qui bouge sur ce site n'anime que `transform` et `opacity` :
     aucune de ces propriétés ne provoque de recalcul de mise en page, donc
     aucune saccade sur un téléphone d'entrée de gamme. */
  --mv-court: 0.18s;
  --mv-moyen: 0.28s;
  --mv-long:  0.6s;
}

@media (min-width: 940px)  { :root { --nav-h: 124px; --logo-h: 100px; } }
@media (min-width: 1400px) { :root { --nav-h: 136px; --logo-h: 110px; } }

/* --- 2. Réinitialisation ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barre de navigation ne masque plus les ancres. La valeur suit la
     hauteur réelle de la barre, qui a grandi avec le logo. */
  scroll-padding-top: calc(var(--nav-h, 96px) + 16px);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--tx-on-dark);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* Titres en graisse forte : c'est le caractère du site d'origine (900 sur les
   grands titres). On garde 900 pour h1/h2 et 800 pour les sous-titres, sinon
   la hiérarchie s'écrase.

   ⚠️ `h2` n'avait AUCUNE taille déclarée : il tombait sur la valeur par défaut
   du navigateur (1.5 em). C'est une des causes de l'impression d'écriture trop
   petite : les titres de section étaient plus discrets que prévu. */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;      /* évite le mot orphelin en fin de titre */
  overflow-wrap: break-word;  /* un mot long ne pousse jamais la page */
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.28rem; }
h3, h4 { font-weight: 800; letter-spacing: -0.012em; line-height: 1.2; }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; overflow-wrap: break-word; }
strong, b { font-weight: 700; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
hr { border: 0; border-top: var(--line-dark); margin: var(--sp-7) 0; }

/* Accessibilité : la cible clavier doit toujours être visible. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: var(--sp-4); z-index: 200;
  background: var(--gold); color: var(--ink); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); }

@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;
  }
}

/* --- 2 bis. L'OUVERTURE AU LOGO -----------------------------------------
   L'aigle arrive en grand, tient l'écran un instant, puis s'en va vers le
   spectateur. 1,55 s en tout, une seule fois par session.

   ⚠️ RÈGLE DE SÛRETÉ, LA MÊME QUE POUR LES APPARITIONS AU DÉFILEMENT :
   cette animation ne conditionne JAMAIS l'affichage du contenu. Le voile se
   superpose à une page déjà peinte et déjà lisible. Trois garde-fous :

     1. `display: none` par défaut. Le voile n'existe visuellement que si un
        script de six lignes, dans le <head> de index.html, a posé la classe
        `ea-intro` sur <html>. Pas de script, pas de voile.
     2. `pointer-events: none` en permanence : aucun clic n'est jamais avalé.
     3. La dernière image-clé se termine sur `visibility: hidden` avec
        `animation-fill-mode: forwards`. La disparition est donc tenue par le
        moteur CSS seul, sans attendre le moindre événement JavaScript. C'est
        exactement le piège déjà rencontré sur ce projet, une page blanche
        parce qu'un effet attendait un événement qui n'est jamais venu.

   Sous `prefers-reduced-motion`, le script ne pose pas la classe, et la règle
   globale plus haut ramènerait de toute façon la durée à 0,01 ms.
   ---------------------------------------------------------------------- */
.intro-eagle { display: none; }

html.ea-intro .intro-eagle {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at 50% 44%, rgb(102 87 232 / 0.2), transparent 70%),
    radial-gradient(52% 44% at 50% 66%, rgb(0 188 212 / 0.14), transparent 72%),
    var(--ink);
  animation: intro-voile 1.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html.ea-intro .intro-eagle__scene {
  grid-area: 1 / 1; display: grid; place-items: center;
  animation: intro-envol 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Le logo d'origine mesure 204 x 184 px : au-delà d'environ 440 px de large
   il commence à se ramollir. On le monte donc jusqu'à 420 px, et c'est la
   COMPOSITION autour de lui (deux anneaux et un trait de lumière) qui donne
   l'échelle de l'écran, sans rien ajouter au logo lui-même. */
html.ea-intro .intro-eagle__logo {
  width: min(64vw, 50vh, 470px); height: auto;
  filter: drop-shadow(0 0 38px rgb(102 87 232 / 0.45))
          drop-shadow(0 0 108px rgb(0 188 212 / 0.34));
}
html.ea-intro .intro-eagle__anneau {
  grid-area: 1 / 1; width: min(92vw, 80vh, 880px); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid rgb(102 87 232 / 0.42);
  animation: intro-anneau 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.ea-intro .intro-eagle__anneau--2 {
  width: min(68vw, 60vh, 650px);
  border-color: rgb(0 188 212 / 0.38);
  animation-delay: 0.09s;
}
html.ea-intro .intro-eagle__trait {
  grid-area: 1 / 1; width: min(86vw, 780px); height: 1px;
  background: linear-gradient(90deg, transparent, rgb(102 87 232 / 0.9), transparent);
  animation: intro-trait 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes intro-voile {
  0%, 60%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; }
}
@keyframes intro-envol {
  0%   { opacity: 0; transform: translateY(30px) scale(0.66); }
  32%  { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.7); }
}
@keyframes intro-anneau {
  0%   { opacity: 0; transform: scale(0.42); }
  38%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes intro-trait {
  0%   { opacity: 0; transform: scaleX(0.08); }
  28%  { opacity: 0.95; }
  56%  { opacity: 0.45; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.4); }
}

/* --- 3. Mise en page ---------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--sp-5), var(--w-page)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--sp-5), 900px); margin-inline: auto; }
.section {
  padding-block: var(--section-y);
  position: relative;
  isolation: isolate;   /* le décor d'une section ne déborde jamais sur l'autre */
}
.section--light { background: var(--bone); color: var(--tx-on-light); }
.section--light h1, .section--light h2, .section--light h3 { color: var(--tx-on-light); }
.section--paper { background: var(--bone-2); color: var(--tx-on-light); }
.section--paper h2, .section--paper h3 { color: var(--tx-on-light); }
.section--ink { background: var(--ink); }
.section--ink-2 { background: var(--ink-2); }
/* Surface la plus haute : le fond des moments forts (le calendrier, l'audit). */
.section--ink-3 { background: var(--ink-3); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- 3 bis. Le duo : deux colonnes de poids différents ------------------
   ⚠️ POURQUOI UNE MEDIA QUERY ET PAS `grid-template-columns` PARTOUT.
   Un gabarit à deux colonnes déclaré en permanence ne peut pas descendre
   sous la somme de ses minimums : c'est exactement ce qui avait fait
   déborder toute la page d'accueil sur téléphone (voir le pied de page).
   Ici la mise en page part en UNE colonne, et la deuxième n'apparaît qu'à
   partir de 900 px de large. Il n'existe donc aucune largeur d'écran où le
   gabarit puisse être plus large que l'écran. */
.duo { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.08fr 0.92fr; align-items: center; }
  .duo--large  { grid-template-columns: 1.35fr 0.65fr; }
  .duo--etroit { grid-template-columns: 0.65fr 1.35fr; }
  .duo--haut   { align-items: start; }
  /* Colonne qui accompagne la lecture de la colonne voisine, plus longue.
     Sans elle, le titre restait en haut et laissait 400 px de vide dessous, 
     c'était le défaut le plus visible de la composition en deux colonnes. */
  .colle { position: sticky; top: calc(var(--nav-h) + 20px); }
  /* Inverse l'ordre visuel sans toucher à l'ordre de lecture du document. */
  .duo--inverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.lead { font-size: var(--t-lead); color: var(--tx-on-dark-2); max-width: var(--w-text); line-height: 1.55; }
.section--light .lead, .section--paper .lead { color: var(--tx-on-light-2); }
.measure { max-width: var(--w-text); }
.center .lead, .center .measure { margin-inline: auto; }

/* --- 3 bis 2. LA LONGUEUR DE LIGNE, GOUVERNÉE EN UN SEUL ENDROIT --------
   Mesuré sur la page à 1920 px après l'élargissement de `--w-page` : le texte
   courant montait à 94 caractères par ligne, et une mention centrée sous une
   grille atteignait 169. C'est le défaut classique d'un site élargi : la page
   gagne en présence, la lecture y perd tout.

   Les blocs sont listés un par un plutôt que réglés par une règle sur `p` :
   une règle générale briderait aussi les cartes, les listes de faits et les
   lignes d'information (date, lieu, heure), qui ne sont PAS du texte courant
   et dont la mise en page dépend de leur largeur disponible. */
.wrap > p,
.entete > p,
.faq__a > p,
.card > p,
.duo > div > p:not(.hero__note):not(.session__detail) { max-width: var(--w-text); }
/* Un bloc centré et bridé doit aussi être recentré, sinon il se colle à gauche. */
.wrap > p.center, .entete--centre > p, .center > p { margin-inline: auto; }

/* L'en-tête de section : sur-titre, titre, chapô. Centré ou aligné à gauche
   selon la composition · c'est ce qui casse la répétition « titre centré +
   grille de cartes » que la page enchaînait six fois de suite. */
.entete { margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9)); }
.entete--centre { text-align: center; }
.entete--centre .lead { margin-inline: auto; }

/* --- 3 ter. Le décor : la matière graphique ----------------------------
   Le reproche était « trop sobre, presque austère ». On ajoute de la matière
   SANS ajouter une seule image ni une seule couleur : uniquement des dégradés
   et des filets construits à partir des trois teintes de la charte.

   Règles tenues : aucun `filter: blur()` sur un élément plein écran (coût GPU
   sur téléphone), aucun décor cliquable (`pointer-events: none`), aucun décor
   qui puisse élargir le document (`overflow: clip` sur la section porteuse).
   ---------------------------------------------------------------------- */
.section--deco { overflow: clip; }
.section--deco > * { position: relative; z-index: 1; }

/* Halo coloré. La teinte se choisit par une variable, pas par trois règles. */
.halo {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-teinte, rgb(102 87 232 / 0.10)), transparent 68%);
}
.halo--or     { --halo-teinte: rgb(102 87 232 / 0.20); }
.halo--cyan   { --halo-teinte: rgb(0 188 212 / 0.18); }
.halo--violet { --halo-teinte: rgb(124 58 237 / 0.22); }
.halo--haut-gauche  { inset: -18% auto auto -14%; width: min(62vw, 620px); aspect-ratio: 1; }
.halo--haut-droite  { inset: -22% -12% auto auto; width: min(58vw, 560px); aspect-ratio: 1; }
.halo--bas-droite   { inset: auto -16% -24% auto; width: min(64vw, 640px); aspect-ratio: 1; }
.halo--bas-gauche   { inset: auto auto -22% -16%; width: min(60vw, 600px); aspect-ratio: 1; }

/* Trame de lignes : la « matière » d'un fond nuit, presque invisible mais qui
   empêche l'aplat de paraître plat. Estompée sur les bords par un masque. */
.trame {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(102 87 232 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(102 87 232 / 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
}
.trame--points {
  background-image: radial-gradient(rgb(0 188 212 / 0.16) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}

/* Le filet des trois piliers : or → cyan → violet. C'est le code de lecture du
   site réduit à trois pixels de haut ; il sert de couture entre les sections. */
.trait-piliers {
  height: 3px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 28%,
                              var(--cyan) 50%, var(--violet) 78%, var(--violet) 100%);
}
.trait-piliers--fondu {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Le chiffre fantôme : un repère de lecture géant, posé derrière le contenu.
   Il donne de l'échelle à une section sans ajouter un mot. */
.fantome {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-title); font-weight: 900; line-height: 0.8;
  font-size: clamp(9rem, 26vw, 26rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(102 87 232 / 0.09);
  inset: auto -2% -8% auto;
}
.section--light .fantome, .section--paper .fantome {
  -webkit-text-stroke-color: rgb(17 24 39 / 0.07);
}

/* --- 4. Marque ---------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--indigo); }
/* ⚠️ LE TEXTE DU LOGO EST BLANC, CUIT DANS LE PNG.
   Sur l'ancien fond nuit il ressortait. Sur le fond clair de la charte Romain
   Bouvet il devient illisible. On pose donc la marque sur une pastille
   anthracite : le blanc redevient lisible et le logo n'est pas retouché.
   Le jour où un logo à texte séparé existe, cette pastille peut sauter. */
/* La pastille anthracite posée pendant l'épisode « fond clair » est retirée :
   le fond redevient sombre, le texte blanc du PNG ressort seul. */
/* ⚠️ Le fichier logo-eagle-academy.png ne fait que 204 x 184 px. Au-delà
   d'environ 220 px d'affichage il se ramollit. La valeur ci-dessous (jusqu'à
   110 px) reste sous la définition native, même sur un écran à 2x.
   Pour aller plus loin, il faudrait un logo en SVG ou un PNG plus défini. */
.logo__mark {
  width: auto; height: var(--logo-h); flex: none;
  transition: height var(--mv-moyen) var(--ease);
}
.logo__mark:hover { filter: drop-shadow(0 0 14px rgb(0 188 212 / 0.55)); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-title);
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.24em;
  color: var(--tx-on-dark);
}
.logo__sub {
  font-size: 0.56rem; letter-spacing: 0.42em; color: var(--gold);
  margin-top: 5px; font-weight: 500;
}
.section--light .logo__name, .section--paper .logo__name { color: var(--tx-on-light); }

/* --- 5. Éléments d'écriture -------------------------------------------- */
/* Le sur-titre : dit de quoi parle la section avant que le titre ne frappe.
   Il est devenu une étiquette pleine plutôt qu'un simple mot souligné : c'est
   un point de couleur de plus dans la page, et il se repère du coin de l'œil. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-5);
  padding: 7px 15px 7px 12px; border-radius: var(--r-sm);
  background: rgb(102 87 232 / 0.10);
  border: 1px solid rgb(102 87 232 / 0.28);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; flex: none;
  background: currentColor; transform: rotate(45deg);
}
/* ⚠️ Dans une carte en colonne flexible, un enfant s'étire à toute la largeur
   même s'il est en `inline-flex` : l'étiquette devenait une barre pleine
   largeur. `align-self` la ramène à sa largeur de contenu. */
.eyebrow, .tag { align-self: flex-start; }
/* Sur un écran étroit, un interlettrage de 0,24 em fait passer le sur-titre
   sur deux lignes et l'étiquette devient un pavé. On le resserre. */
@media (max-width: 520px) {
  .eyebrow { letter-spacing: 0.13em; font-size: 0.9rem; padding: 6px 12px 6px 10px; }
}
.center .eyebrow::after { content: none; }
/* ⚠️ ACCESSIBILITÉ · l'or pur sur fond clair ne dépasse pas 2:1 de contraste :
   illisible pour une bonne partie des lecteurs. Sur fond clair, le sur-titre
   et les étiquettes passent sur l'or sombre de la charte (#9A8DF2, ~4,6:1). */
.section--light .eyebrow, .section--paper .eyebrow {
  color: var(--gold-dim);
  background: rgb(138 114 56 / 0.09);
  border-color: rgb(138 114 56 / 0.30);
}
.eyebrow--cyan   { color: var(--cyan);   background: rgb(0 188 212 / 0.10);  border-color: rgb(0 188 212 / 0.30); }
.eyebrow--violet { color: var(--violet-hi); background: rgb(124 58 237 / 0.14); border-color: rgb(124 58 237 / 0.38); }

/* Le mot accentué : un seul par titre, sinon il ne veut plus rien dire. */
/* Un seul mot par titre, jamais deux lignes. C'est ce qui fait que
   l'accent reste un accent. */
.accent { color: var(--indigo); font-style: normal; }
.accent--cyan   { color: var(--cyan); }
.accent--violet { color: var(--violet-hi); }
.section--light .accent, .section--paper .accent { color: var(--gold-dark); }
.section--light .accent--cyan, .section--paper .accent--cyan { color: var(--cyan-dark); }
.section--light .accent--violet, .section--paper .accent--violet { color: var(--violet); }
.underline-gold {
  background-image: linear-gradient(transparent 58%, rgb(102 87 232 / 0.22) 58%);
  padding-inline: 0.08em;
}

/* Le chapeau d'ouverture : la phrase qui porte une section à elle seule.
   Plus grande que le corps, plus petite qu'un titre. */
.exergue {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem);
  line-height: 1.32; letter-spacing: -0.015em;
  max-width: 26ch; text-wrap: balance;
}

/* La citation de Fabian. Elle porte le positionnement : elle mérite sa forme. */
.quote {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 1.0rem + 1.35vw, 2.05rem);
  line-height: 1.32; font-weight: 500; font-style: italic;
  border-left: 2px solid var(--gold);
  padding-left: clamp(var(--sp-5), 3vw, var(--sp-7));
  margin: 0 0 var(--sp-5); max-width: 26ch;
  text-wrap: balance;
}
.quote--wide { max-width: 38ch; }
.quote__author {
  display: block; margin-top: var(--sp-5);
  font-family: var(--font-body); font-style: normal;
  font-size: var(--t-small); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}

/* --- 6. Boutons --------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: 16px 30px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  font-size: 1.08rem; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform var(--mv-court) var(--ease),
              background-color var(--mv-court) var(--ease),
              border-color var(--mv-court) var(--ease),
              color var(--mv-court) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background-image: linear-gradient(135deg, var(--gold-hi), var(--gold) 58%);
  box-shadow: 0 10px 26px -14px rgb(102 87 232 / 0.9);
}
.btn--primary:hover {
  --btn-bd: var(--gold-hi);
  box-shadow: 0 16px 34px -14px rgb(102 87 232 / 0.95);
}
/* Un reflet qui traverse le bouton principal au survol. `transform` seul :
   aucun recalcul de mise en page, donc aucune saccade. */
.btn--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.42) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.65s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--tx-on-dark);
  --btn-bd: rgb(255 255 255 / 0.28);
}
.btn--ghost:hover { --btn-bd: var(--gold); --btn-fg: var(--gold); background: rgb(102 87 232 / 0.08); }
.section--light .btn--ghost, .section--paper .btn--ghost {
  --btn-fg: var(--tx-on-light); --btn-bd: rgb(0 0 0 / 0.22);
}
.section--light .btn--ghost:hover, .section--paper .btn--ghost:hover {
  --btn-fg: var(--gold-dark); --btn-bd: var(--gold-dark);
}
/* Bouton cyan : la deuxième action possible d'un écran, jamais la première.
   Le bleu-cyan est la couleur du logo et celle du pilier « Le Faire ». */
.btn--cyan { --btn-bg: var(--cyan); --btn-bd: var(--cyan); --btn-fg: var(--ink); }
.btn--cyan:hover { --btn-bg: var(--cyan-hi); --btn-bd: var(--cyan-hi); }
.btn--lg { padding: 20px 40px; font-size: 1.2rem; }
.btn--sm { padding: 12px 22px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-busy='true'] { opacity: 0.55; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.center .btn-row { justify-content: center; }

/* Lien d'action secondaire : le même poids qu'un lien de texte, pas celui d'un
   bouton. Une seule action évidente par écran : le reste s'efface. */
.lien-action {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-small); font-weight: 600; color: var(--gold);
  border-bottom: 1px solid rgb(102 87 232 / 0.4); padding-bottom: 2px;
  transition: color var(--mv-court) var(--ease), border-color var(--mv-court) var(--ease);
}
.lien-action:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.section--light .lien-action, .section--paper .lien-action {
  color: var(--gold-dark); border-color: rgb(184 148 31 / 0.5);
}

/* --- 7. Cartes ---------------------------------------------------------- */
.card {
  --carte-teinte: var(--gold);
  position: relative;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.045), transparent 46%),
    var(--ink-2);
  border: var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  transition: transform var(--mv-moyen) var(--ease),
              border-color var(--mv-moyen) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--carte-teinte) 45%, transparent);
  box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--carte-teinte) 85%, transparent);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p:last-child { margin-bottom: 0; }
.section--light .card, .section--paper .card {
  background: var(--white); border: var(--line); box-shadow: var(--sh-1);
}
.section--light .card:hover, .section--paper .card:hover { box-shadow: var(--sh-2); }
.card--flat:hover { transform: none; }

/* Cartes teintées : la couleur devient de la matière, pas un simple filet.
   Trois teintes seulement, celles des trois piliers, pour que la couleur
   reste un code de lecture et ne se transforme pas en décoration. */
.card--or     { --carte-teinte: var(--gold); }
.card--cyan   { --carte-teinte: var(--cyan); }
.card--violet { --carte-teinte: var(--violet); }
.card--teinte {
  border-color: color-mix(in srgb, var(--carte-teinte) 34%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--carte-teinte) 15%, transparent),
      transparent 52%),
    var(--ink-2);
}
.section--light .card--teinte, .section--paper .card--teinte {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--carte-teinte) 12%, transparent), transparent 52%),
    var(--white);
  border-color: color-mix(in srgb, var(--carte-teinte) 32%, transparent);
}
/* Le liseré supérieur : la signature colorée d'une carte, en trois pixels. */
.card--barre::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--carte-teinte), transparent 88%);
}
/* Carte transparente, posée sur un fond déjà travaillé : on ne superpose pas
   deux boîtes opaques, on laisse le fond respirer. */
.card--verre {
  background: rgb(255 255 255 / 0.045);
  border-color: rgb(255 255 255 / 0.11);
}

/* --- 7 bis. Les trois piliers ------------------------------------------
   Chaque pilier a sa couleur depuis toujours : L'Être en or, Le Faire en
   cyan, L'Exit en violet. C'était appliqué à la main, en style en ligne, avec
   une valeur écrite en dur à chaque endroit. Ici, on pose la classe, la
   couleur suit : y compris le filet du haut, le numéro et le sur-titre. */
.pilier {
  position: relative; overflow: hidden;
  --pilier: var(--gold); --carte-teinte: var(--pilier);
  display: flex; flex-direction: column;
  padding-top: clamp(var(--sp-7), 4.5vw, var(--sp-8));
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--pilier) 17%, transparent), transparent 42%),
    var(--ink-2);
  border-color: color-mix(in srgb, var(--pilier) 26%, transparent);
}
.pilier::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--pilier), color-mix(in srgb, var(--pilier) 15%, transparent));
}
/* Le halo de couleur derrière le numéro : le « graphisme » de la carte. */
.pilier::after {
  content: ''; position: absolute; z-index: 0;
  inset: -30% -30% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--pilier) 24%, transparent), transparent 66%);
  pointer-events: none;
}
.pilier > * { position: relative; z-index: 1; }
.pilier--etre  { --pilier: var(--pilier-etre); }
.pilier--faire { --pilier: var(--pilier-faire); }
.pilier--exit  { --pilier: var(--pilier-exit); }
.pilier:hover { border-color: color-mix(in srgb, var(--pilier) 55%, transparent); }
.pilier .card__num { color: var(--pilier); }
.pilier .eyebrow {
  color: var(--pilier);
  background: color-mix(in srgb, var(--pilier) 13%, transparent);
  border-color: color-mix(in srgb, var(--pilier) 36%, transparent);
}
.pilier--exit .eyebrow, .pilier--exit .accent { color: var(--violet-hi); }
.pilier .accent { color: var(--pilier); }
/* `margin-top: auto` pousse le mot-clé au bas de la carte : les trois cartes
   ont des textes de longueurs différentes, mais leurs trois mots-clés
   s'alignent sur la même ligne. */
.pilier__cle {
  margin: auto 0 0; padding-top: var(--sp-5); margin-top: auto;
  border-top: var(--line-dark);
  font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pilier) 70%, var(--tx-on-dark-2));
  font-weight: 600;
}

/* Le numéro d'étape : lit comme un chapitre, pas comme une puce.
   En version pleine, il est passé en contour : il occupe la place d'un grand
   chiffre sans jamais concurrencer le titre à la lecture. */
.card__num {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px currentColor;
  opacity: 0.45; display: block; pointer-events: none;
}
/* Repli : sur les cartes qui n'ont pas de position relative dédiée, on garde
   le numéro dans le flux (c'est le cas dans marque.html). */
.card--flat .card__num {
  position: static; -webkit-text-stroke: 0; color: var(--gold);
  font-size: 2.6rem; opacity: 0.45; margin-bottom: var(--sp-3);
}

/* --- 8. Chiffres (preuve) ---------------------------------------------- */
.stat { text-align: center; padding: var(--sp-5) var(--sp-3); position: relative; }
.stat__value {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(2.7rem, 1.6rem + 3.6vw, 4.4rem);
  line-height: 1; display: block; letter-spacing: -0.03em;
  background: linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat__label {
  margin-top: var(--sp-3); font-size: var(--t-small);
  color: var(--tx-on-dark-2); letter-spacing: 0.05em; line-height: 1.45;
  display: block;
}
.section--light .stat__label, .section--paper .stat__label { color: var(--tx-on-light-2); }
.section--light .stat__value, .section--paper .stat__value {
  background: linear-gradient(140deg, var(--gold-dark), var(--gold-dim));
  -webkit-background-clip: text; background-clip: text;
}

/* La barre d'autorité : trois chiffres séparés par un filet vertical.
   Le filet ne s'affiche qu'à partir du moment où les trois tiennent sur une
   ligne : sur téléphone, il devient un filet horizontal. */
.barre-preuve { display: grid; gap: var(--sp-2); }
.barre-preuve > * + * { border-top: 1px solid rgb(102 87 232 / 0.16); }
@media (min-width: 780px) {
  .barre-preuve { grid-template-columns: repeat(3, 1fr); }
  .barre-preuve > * + * { border-top: 0; border-left: 1px solid rgb(102 87 232 / 0.16); }
}

/* --- 9. Barre de navigation -------------------------------------------- */
/* LA BARRE ENTRE EN GLISSANT, PUIS SE RESSERRE AU DÉFILEMENT.
   Sans mouvement d'entrée elle apparaissait d'un bloc, ce qui donnait une
   page qui démarre à froid. L'animation ne joue qu'une fois, au chargement :
   une barre qui bouge en permanence fatigue et vole l'attention au contenu. */
.nav {
  position: sticky; top: 0; z-index: 100;
  animation: nav-entre 0.55s var(--ease) both;
  background: rgb(9 7 27 / 0.86);
  border-bottom: var(--line-dark);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* backdrop-filter seulement là où il est supporté : sinon on garde un fond opaque
   lisible plutôt qu'un fond translucide illisible. */
@supports (backdrop-filter: blur(10px)) {
  .nav { backdrop-filter: blur(14px) saturate(1.3); }
}
.nav.is-scrolled { background: rgb(9 7 27 / 0.97); box-shadow: 0 1px 0 rgb(102 87 232 / 0.22); }

@keyframes nav-entre {
  from { transform: translate3d(0, -100%, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}

/* Le filet de couleur sous la barre respire lentement au lieu d'etre fixe :
   c'est le seul mouvement permanent qu'on s'autorise ici, il est en peripherie
   du regard et ne gene pas la lecture. */
@keyframes nav-filet {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
.nav__inner {
  width: min(100% - 2 * var(--sp-5), var(--w-page));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--nav-h);
  transition: min-height var(--mv-moyen) var(--ease);
}
/* La barre se resserre dès que la lecture commence. Le logo arrive grand,
   comme demandé, puis il libère l'écran au lieu de suivre le visiteur en
   occupant 136 px de haut sur toute la page.
   Les deux variables sont redéfinies SUR la barre : tout ce qu'elle contient
   suit, y compris le panneau déroulant du téléphone qui se cale dessous. */
.nav.is-compact { --nav-h: 76px; --logo-h: 54px; }
@media (min-width: 940px)  { .nav.is-compact { --nav-h: 84px; --logo-h: 64px; } }
/* La barre de navigation porte le filet des trois piliers : la première touche
   de couleur de la page, avant même le premier mot. */
.nav::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--cyan) 52%, var(--violet));
  opacity: 0.55;
}
.nav__links { display: flex; align-items: center; gap: var(--sp-5); }
/* ⚠️ Cette règle portait DEUX `font-size` de suite, 1.12rem puis 0.98rem :
   seule la seconde s'appliquait. Les liens étaient donc à 15,7 px alors qu'on
   les croyait à 17,9 px. Une seule déclaration, désormais. */
.nav__link {
  /* Agrandi le 30/08/2026 : Rudy lisait mal la barre. Le clamp evite qu'un
     libelle long ne fasse deborder la barre sur les ecrans intermediaires. */
  font-size: clamp(1.14rem, 1rem + 0.35vw, 1.32rem);
  font-weight: 600; color: var(--tx-on-dark-2); position: relative;
  padding-block: var(--sp-2);
  transition: color var(--mv-court) var(--ease),
              transform var(--mv-court) var(--ease);
}
.nav__link:hover { transform: translateY(-2px); }
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--tx-on-dark); }
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.22s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__burger {
  display: none; width: 44px; height: 44px; background: none;
  border: var(--line-dark); border-radius: var(--r-sm); cursor: pointer;
  padding: 0; place-items: center;
}
.nav__burger span {
  display: block; width: 18px; height: 1.5px; background: var(--tx-on-dark);
  margin: 3.5px auto; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Le bouton compact de la barre mobile : masqué sur ordinateur, où le vrai
   bouton de navigation est déjà visible. */
.nav__cta-mobile { display: none; padding: 12px 19px; font-size: 1.02rem; margin-left: auto; }

@media (max-width: 940px) {
  .nav__burger { display: grid; }
  .nav__cta-mobile { display: inline-flex; }
  .nav__inner { gap: var(--sp-3); }
  /* Le panneau déroulant part du bas de la barre. Il suit donc la même
     variable qu'elle : sans ça, resserrer la barre laissait un trou. */
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: var(--line-dark);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding-block: var(--sp-4); border-bottom: var(--line-dark); }
  .nav__links .btn { margin-top: var(--sp-5); }
}

/* --- 10. Hero ----------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(56px, 8vw, 116px) clamp(72px, 10vw, 140px);
  background: var(--ink);
}
/* Le fond du premier écran. Trois couches, aucune image, aucun `blur` :
   1. deux halos d'or qui posent la marque,
   2. une touche de cyan en bas à gauche · la couleur du logo,
   3. une trame de lignes qui empêche l'aplat noir de paraître plat.
   Le `blur` plein écran a été écarté volontairement : il coûte cher en GPU
   sur téléphone pour un résultat visuellement identique. */
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  /* Une seule respiration, très basse, au lieu de trois lavis colorés.
     Chez Romain le fond est quasi plat : c'est la photo et le blanc des
     sections suivantes qui créent le relief, pas des dégradés. */
  background:
    radial-gradient(60% 50% at 70% 10%, rgb(102 87 232 / 0.13), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(102 87 232 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(102 87 232 / 0.05) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(90% 80% at 30% 20%, #000, transparent 78%);
  mask-image: radial-gradient(90% 80% at 30% 20%, #000, transparent 78%);
}
.hero > * { position: relative; z-index: 1; }

/* --- 10 ter. LA NUÉE D'AIGLES DU PREMIER ÉCRAN --------------------------
   Le sujet est celui de la marque : des aigles qui montent dans une
   ascendance. Ils tournent tous dans le même sens, comme les rapaces le font
   réellement dans un thermique, les uns proches et nets, les autres perdus
   dans la brume d'altitude. La caméra suit la souris et s'élève au
   défilement : la nuée passe alors au-dessus du visiteur.

   CE QUI EST TENU :
   - Aucune librairie, aucun CDN, aucune requête réseau. La scène est écrite
     en WebGL brut dans eagle.js, et l'aigle lui-même est CALCULÉ au
     chargement (152 triangles). Charger Three.js aurait coûté 150 Ko
     compressés pour ce seul effet, et importer un maillage d'oiseau une
     requête de plus.
   - Le canevas démarre à `opacity: 0` et ne se montre qu'une fois la première
     image rendue. Tant que ce n'est pas le cas (WebGL absent, écran étroit,
     animations réduites, script en échec), il reste invisible et c'est le
     décor CSS du hero, juste au-dessus, qui tient l'écran seul.
   - `pointer-events: none` : la scène ne peut pas intercepter un clic sur
     l'appel à l'action.
   ---------------------------------------------------------------------- */
/* La scène occupe tout le premier écran : le ciel n'a pas de raison de
   s'arrêter à mi-hauteur. C'est le MASQUE, juste dessous, qui garde le texte
   au premier plan, pas un découpage de la surface.
   (La version précédente n'occupait que la bande basse, parce que son sujet
   était un relief vu d'en haut : il fallait de la place SOUS l'horizon. Des
   oiseaux demandent l'inverse.) */
.hero .hero__scene {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: clip;
}
/* Le canevas 3D a été retiré le 29/08/2026 : sur le fond clair de la charte
   Romain Bouvet, des silhouettes en volume ne rendaient pas premium. Le décor
   du hero est désormais entièrement en CSS. */
/* L'atmosphère de l'horizon, calée sur le haut de la bande. Elle existe AVEC
   ou SANS la 3D : sur téléphone, où la scène ne se lance pas, c'est elle
   seule qui donne la profondeur et l'impression d'altitude. */
/* ⚠️ Cet élément est un FRÈRE de la scène, pas son enfant. Placé dedans, il
   était rogné par le `overflow: clip` de la bande et son halo se coupait net
   sur une ligne horizontale bien visible en haut du premier écran. */
.hero .hero__horizon {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 26% at 50% 30%, rgb(0 188 212 / 0.19), transparent 72%),
    radial-gradient(76% 22% at 28% 29%, rgb(102 87 232 / 0.10), transparent 74%),
    linear-gradient(to bottom, transparent 78%, rgb(11 14 20 / 0.7));
}
@media (max-width: 899px) {
  .hero .hero__horizon {
    background:
      radial-gradient(140% 28% at 50% 42%, rgb(0 188 212 / 0.24), transparent 72%),
      radial-gradient(96% 24% at 26% 41%, rgb(102 87 232 / 0.2), transparent 74%),
      linear-gradient(to bottom, transparent 70%, rgb(11 14 20 / 0.8));
  }
}

/* ⚠️ La largeur du titre est bridée en `ch`, donc proportionnelle à sa propre
   taille de caractère. Sans ce frein, la colonne de gauche passe de 855 px à
   1091 px entre 1440 et 1920, et le titre se recompose en « à un système qui
   grandit sans » puis « vous. » : un mot seul sur la dernière ligne, alors que
   `text-wrap: balance` est pourtant déclaré (il ne rééquilibre pas au travers
   d'un `<br>` forcé). À 13ch, la coupe de 1440 est tenue jusqu'à 2560. Sur
   téléphone la valeur est plus large que la colonne : elle n'a aucun effet. */
.hero__title {
  font-size: var(--t-hero); font-weight: 800; margin-bottom: var(--sp-5);
  letter-spacing: -0.035em; max-width: 13ch;
}
.hero__lead { font-size: var(--t-lead); color: var(--tx-on-dark); max-width: 54ch; opacity: 0.86; }
.hero__note {
  margin-top: var(--sp-6); font-size: var(--t-small); color: var(--tx-on-dark-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
}
.hero__note > span { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* --- 10 bis. La carte « prochaine conférence » -------------------------
   Elle occupe la colonne droite du premier écran. C'est le seul endroit de
   la page où l'information de réservation est donnée avant même que le
   visiteur ait défilé : date, lieu, heure, prix.

   Placement volontaire (principe : information rationnelle en haut, argument
   émotionnel en bas) : la date, l'heure et la gratuité sont en haut de la
   carte ; la phrase qui rassure · « vous repartez avec, que vous continuiez
   ou non » : est en bas, juste sous le bouton. */
.carte-conf {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgb(102 87 232 / 0.34);
  background:
    linear-gradient(165deg, rgb(102 87 232 / 0.10), transparent 46%),
    var(--ink-2);
  padding: clamp(var(--sp-5), 3.4vw, var(--sp-7));
  box-shadow: var(--halo-or);
}
.carte-conf::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--cyan) 70%, transparent);
}
/* Dans une carte étroite, l'interlettrage large du sur-titre le faisait passer
   à la ligne : on le resserre ici, et seulement ici. */
.carte-conf .eyebrow { letter-spacing: 0.16em; padding-inline: 12px 13px; }
.carte-conf__date {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
  line-height: 1.12; letter-spacing: -0.025em; color: var(--tx-on-dark);
  margin: 0 0 var(--sp-2);
}
.carte-conf__lieu { color: var(--gold-hi); font-weight: 600; font-size: var(--t-lead); margin: 0; }
.carte-conf__faits {
  list-style: none; padding: 0; margin: var(--sp-5) 0;
  display: grid; gap: var(--sp-3); font-size: var(--t-small);
}
.carte-conf__faits li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--tx-on-dark); }
.carte-conf__faits li::before {
  content: ''; flex: none; width: 17px; height: 17px; margin-top: 4px;
  background: var(--gold);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 8%, 38% 70%);
}
.carte-conf__note {
  margin: var(--sp-4) 0 0; font-size: var(--t-small);
  color: var(--tx-on-dark-2); text-align: center;
}
.carte-conf__autres {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid rgb(102 87 232 / 0.2);
  font-size: var(--t-small); color: var(--tx-on-dark-2); text-align: center;
}

/* Le bandeau de rappel : la prochaine conférence, toujours visible. */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 8px 17px; border-radius: var(--r-pill);
  border: 1px solid rgb(102 87 232 / 0.34);
  background: rgb(102 87 232 / 0.07);
  font-size: var(--t-small); color: var(--gold-hi); font-weight: 600;
  margin-bottom: var(--sp-5);
}
.pill--cyan { border-color: rgb(0 188 212 / 0.4); background: rgb(0 188 212 / 0.1); color: var(--cyan-hi); }
.pill--cyan .pill__dot { background: var(--cyan); }
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

/* --- 11. Formulaires ---------------------------------------------------- */
.field { margin-bottom: var(--sp-5); }
.field__label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--t-small); font-weight: 600; color: var(--tx-on-dark);
  letter-spacing: 0.01em;
}
.input, .select, .textarea {
  width: 100%; padding: 15px 16px;
  background: rgb(31 31 35 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-sm);
  color: var(--tx-on-dark); font-size: var(--t-small);
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: rgb(156 163 175 / 0.6); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); background: rgb(31 31 35 / 0.05);
}
.input[aria-invalid='true'] { border-color: var(--bad); }
.textarea { resize: vertical; min-height: 108px; }
.select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.select option { background: var(--ink-2); color: var(--tx-on-dark); }
/* Le message d'erreur : c'est le seul autre emploi autorisé du rouge, parce
   qu'un champ mal rempli est le seul autre moment où la page doit alerter.
   Il est masqué tant qu'il n'y a pas d'erreur, donc il n'entre jamais en
   concurrence avec l'unique bandeau d'urgence de la page. */
.field__error {
  margin-top: var(--sp-3); font-size: var(--t-small); color: var(--rouge-hi);
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: rgb(225 29 72 / 0.11); border: 1px solid rgb(225 29 72 / 0.34);
}
.field__error[hidden] { display: none; }
.field__hint  { margin-top: var(--sp-2); font-size: var(--t-small); color: var(--tx-on-dark-2); }
/* Confirmation d'envoi : le turquoise de la charte, réservé à cet usage. */
.succes {
  border: 1px solid rgb(45 212 191 / 0.38); border-radius: var(--r-lg);
  background: rgb(45 212 191 / 0.07);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  text-align: center;
}
.succes__pastille {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  background: rgb(45 212 191 / 0.16); color: var(--turquoise);
}
.succes h3 { color: var(--turquoise); }
/* Piège à robots : présent dans le DOM, invisible et hors du parcours clavier. */
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.section--light .input, .section--paper .input,
.section--light .select, .section--paper .select,
.section--light .textarea, .section--paper .textarea {
  background: var(--white); border-color: rgb(0 0 0 / 0.16); color: var(--tx-on-light);
}
.section--light .field__label, .section--paper .field__label { color: var(--tx-on-light-2); }

/* --- 12. Fenêtre modale ------------------------------------------------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgb(31 31 35 / 0.44);
  overflow-y: auto;
  animation: fade 0.2s var(--ease);
}
.modal__panel {
  width: min(100%, 520px);
  background: var(--ink-2); border: var(--line-dark);
  border-radius: var(--r-lg); padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  box-shadow: var(--sh-3); position: relative;
  animation: rise 0.26s var(--ease);
}
.modal__panel--wide { width: min(100%, 760px); }
.modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: none; border: var(--line-dark); color: var(--tx-on-dark-2);
  cursor: pointer; font-size: 1.15rem; line-height: 1;
}
.modal__close:hover { color: var(--gold); border-color: var(--gold); }
/* Le rappel de la session choisie, dans la fenêtre de réservation. */
.modal__session {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-6);
  padding: 13px 16px; border-radius: var(--r-md);
  background: rgb(102 87 232 / 0.1); border: 1px solid rgb(102 87 232 / 0.3);
  color: var(--gold-hi); font-weight: 600; font-size: var(--t-small);
}
.modal__session::before {
  content: ''; flex: none; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
body.is-locked { overflow: hidden; }

/* --- 13. Accordéon (FAQ) ------------------------------------------------ */
/* <details>/<summary> natif : accessible au clavier sans une ligne de JS. */
.faq__item {
  border: var(--line); border-radius: var(--r-md);
  background: var(--white); margin-bottom: var(--sp-3);
  padding-inline: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  transition: border-color var(--mv-moyen) var(--ease), box-shadow var(--mv-moyen) var(--ease);
}
.faq__item[open] { border-color: rgb(184 148 31 / 0.5); box-shadow: var(--sh-2); }
.section--ink .faq__item, .section--ink-2 .faq__item, .section--ink-3 .faq__item {
  border: var(--line-dark); background: rgb(255 255 255 / 0.03);
}
.section--ink .faq__item[open], .section--ink-2 .faq__item[open], .section--ink-3 .faq__item[open] {
  border-color: rgb(102 87 232 / 0.45); background: rgb(102 87 232 / 0.05);
}
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5) 0;
  font-family: var(--font-title); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600; line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ''; flex: none; width: 26px; height: 26px; margin-top: 2px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--gold), var(--gold)) center / 12px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 12px no-repeat,
    rgb(102 87 232 / 0.10);
  transition: transform var(--mv-moyen) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__a { padding-bottom: var(--sp-5); max-width: var(--w-text); }
.faq__a p:last-child { margin-bottom: 0; }

/* --- 14. Témoignages ---------------------------------------------------- */
.testimonial { display: flex; flex-direction: column; height: 100%; }
.testimonial__text { font-size: var(--t-small); line-height: 1.66; flex: 1; }
.testimonial__who {
  display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: var(--line-dark);
}
.section--light .testimonial__who, .section--paper .testimonial__who { border-top: var(--line); }
.testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgb(102 87 232 / 0.10); color: var(--gold);
  font-family: var(--font-title); font-size: 1.14rem;
}
.testimonial__name { font-weight: 600; font-size: 1.08rem; }
.testimonial__role { font-size: var(--t-small); color: var(--tx-on-dark-2); }
.section--light .testimonial__role, .section--paper .testimonial__role { color: var(--tx-on-light-2); }

/* --- 15. Pied de page --------------------------------------------------- */
.footer {
  position: relative; background: var(--ink);
  border-top: 1px solid rgb(102 87 232 / 0.10);
  padding-block: var(--sp-9) var(--sp-6);
}
/* Le filet des trois piliers ferme la page comme il l'a ouverte. */
.footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--cyan) 52%, var(--violet));
  opacity: 0.5;
}
/* ⚠️ LE `min(100%, …)` N'EST PAS DÉCORATIF : NE PAS LE RETIRER.
   Cette grille demandait `minmax(240px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr))`,
   soit 240 + 150 + 48 de gouttière = 438 px au minimum. Une colonne de grille
   ne descend JAMAIS sous son minimum : sur un téléphone de 390 px, le document
   passait donc à 462 px.

   Et comme `.wrap` vaut `min(100% - 48px, …)` où 100 % = la largeur du corps
   élargi, TOUTE LA PAGE était mise en page pour 462 px puis rognée à 390 par
   le `overflow-x: hidden` du corps. Résultat : titres et paragraphes coupés
   en plein mot, sur toute la page d'accueil : à cause de cette seule règle.

   `minmax(min(100%, 220px), 1fr)` autorise la colonne à descendre jusqu'à la
   largeur disponible. Vérifiable avec : npm run verif:mobile */
.footer__grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: var(--sp-7);
}
.footer__title {
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-4); font-weight: 600;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer__list a {
  font-size: 1.1rem; color: var(--tx-on-dark-2);
  transition: color var(--mv-court) var(--ease);
}
.footer__list a:hover { color: var(--gold); }
.footer__legal {
  border-top: var(--line-dark); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: var(--t-small); color: var(--tx-on-dark-2);
}
.footer__legal a:hover { color: var(--gold); }

/* Les réseaux : discrets, en icônes, et toujours en nouvel onglet.
   Un lien sortant ne doit pas faire perdre la page au visiteur, c'est ce
   qui vidait le site de ses vidéos vers YouTube. */
.reseaux { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.reseaux a {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: var(--line-dark); background: rgb(255 255 255 / 0.03);
  color: var(--tx-on-dark-2);
  transition: color var(--mv-court) var(--ease),
              border-color var(--mv-court) var(--ease),
              transform var(--mv-court) var(--ease);
}
.reseaux a:hover {
  color: var(--gold); border-color: rgb(102 87 232 / 0.5); transform: translateY(-2px);
}

/* --- 16. Apparition au défilement -------------------------------------- */
/* Classe posée par JS uniquement s'il tourne : sans JS, tout reste visible. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* --- 17. Braise : l'urgence, et rien d'autre ---------------------------
   L'ancienne page collait « 🔥 PLACES LIMITÉES » sur chaque bouton. Répétée,
   l'urgence ne veut plus rien dire et abîme la crédibilité, exactement le
   reproche de Fabian : « on dirait une agence de marketing automation ».
   Une seule occurrence par page, et seulement quand c'est vrai. */
.urgence {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 13px; border-radius: var(--r-sm);
  background: rgb(225 29 72 / 0.13);
  border: 1px solid rgb(225 29 72 / 0.4);
  color: var(--rouge-hi);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- 18. Niveaux d'adhésion (Aiglon → Membre → Eagle) ------------------ */
.niveau {
  display: flex; flex-direction: column; height: 100%;
  --carte-teinte: var(--etape-teinte, var(--gold));
}
.niveau__nom {
  font-family: var(--font-title); font-size: var(--t-h3); font-weight: 800;
  color: var(--etape-teinte, var(--gold)); margin-bottom: var(--sp-2);
  letter-spacing: -0.015em;
}
.niveau__prix {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.7rem);
  line-height: 1.05; margin-bottom: var(--sp-2); letter-spacing: -0.035em;
}
/* La mention « sur inscription » passe sous le prix : accolée, elle laissait
   un point médian orphelin en bout de ligne. */
.niveau__prix small {
  display: block; margin-top: var(--sp-2);
  font-size: var(--t-small); font-family: var(--font-body); font-weight: 500;
  color: var(--tx-on-dark-2); letter-spacing: 0;
}
.section--light .niveau__prix small, .section--paper .niveau__prix small { color: var(--tx-on-light-2); }
.niveau__liste { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: grid; gap: var(--sp-4); flex: 1; }
.niveau__liste li { display: flex; gap: var(--sp-3); font-size: var(--t-small); line-height: 1.5; }
.niveau__liste li::before {
  content: ''; flex: none; width: 17px; height: 17px; margin-top: 5px;
  background: var(--etape-teinte, var(--gold));
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 8%, 38% 70%);
}
.niveau--phare {
  border-color: rgb(0 188 212 / 0.5);
  background:
    linear-gradient(168deg, rgb(0 188 212 / 0.13), transparent 48%),
    var(--ink-2);
  box-shadow: var(--halo-cyan);
}

/* --- 19. Bandeau défilant « ils nous font confiance » ------------------
   Deux copies de la liste + translation de 50 % = boucle sans couture.
   `aria-hidden` sur la 2ᵉ copie : un lecteur d'écran ne lit pas deux fois. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__piste { display: flex; width: max-content; animation: defile 42s linear infinite; }
.marquee__piste span {
  padding-inline: var(--sp-6); white-space: nowrap;
  font-size: 1.14rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--tx-on-dark-2); text-transform: uppercase;
}
@keyframes defile { to { transform: translateX(-50%); } }
.marquee:hover .marquee__piste { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__piste { animation: none; }
}

/* --- 20. Agréments (Région wallonne, Chèques-Formations) --------------- */
.agrements { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.agrement {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 18px; border-radius: var(--r-md);
  border: var(--line-dark); background: rgb(255 255 255 / 0.03);
}
.agrement__sigle {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
}
.agrement__nom { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.agrement__sous { font-size: var(--t-micro); color: var(--tx-on-dark-2); }

/* --- 21. Le calendrier des conférences ---------------------------------
   Les quatre dates sont affichées ensemble, pas une seule. Le visiteur n'a
   plus à espérer que « la prochaine » lui convienne : il choisit la sienne.
   Chaque ligne porte son propre bouton, et ce bouton transmet l'étiquette de
   SA session : pas une étiquette générique.
   ---------------------------------------------------------------------- */
.sessions { display: grid; gap: var(--sp-4); }
.session {
  position: relative; display: grid; gap: var(--sp-5);
  align-items: center;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-radius: var(--r-lg);
  border: 1px solid rgb(255 255 255 / 0.10);
  background: rgb(255 255 255 / 0.032);
  transition: border-color var(--mv-moyen) var(--ease),
              background-color var(--mv-moyen) var(--ease),
              transform var(--mv-moyen) var(--ease);
}
.session:hover { border-color: rgb(102 87 232 / 0.4); transform: translateY(-2px); }
/* Une seule colonne par défaut, trois à partir de 860 px : aucune largeur
   d'écran ne peut donc rendre ce gabarit plus large que la fenêtre. */
@media (min-width: 860px) {
  .session { grid-template-columns: 128px 1fr auto; gap: var(--sp-6); }
}
.session--prochaine {
  border-color: rgb(102 87 232 / 0.5);
  background:
    linear-gradient(120deg, rgb(102 87 232 / 0.09), transparent 58%),
    rgb(255 255 255 / 0.035);
  box-shadow: var(--halo-or);
}
.session__quand {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  background: rgb(102 87 232 / 0.07);
  border: 1px solid rgb(102 87 232 / 0.20);
  width: max-content;
}
@media (min-width: 860px) {
  .session__quand { flex-direction: column; align-items: center; gap: 0; width: auto; }
}
.session__jour {
  font-family: var(--font-title); font-weight: 900; line-height: 0.92;
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3.1rem); color: var(--gold);
  letter-spacing: -0.04em;
}
.session__mois {
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-hi);
}
.session__lieu {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin: 0 0 var(--sp-2); letter-spacing: -0.02em;
}
.session__detail {
  margin: 0; color: var(--tx-on-dark-2); font-size: var(--t-small);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.session__detail > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.session__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  background: var(--gold); border-radius: var(--r-sm);
  padding: 5px 11px; margin-bottom: var(--sp-3);
}
.sessions__vide {
  padding: var(--sp-6); border-radius: var(--r-lg);
  border: 1px dashed rgb(102 87 232 / 0.32); background: rgb(102 87 232 / 0.05);
  text-align: center; color: var(--tx-on-dark-2);
}

/* --- 22. Les vidéos, gardées sur le site --------------------------------
   AUCUNE IFRAME AU CHARGEMENT. Chaque vidéo est représentée par une façade
   construite en CSS · pas de vignette distante, donc aucune requête vers
   Google tant que le visiteur n'a pas cliqué, et rien à télécharger.
   L'iframe n'est créée qu'au clic, dans une fenêtre modale : le visiteur
   regarde la vidéo SANS quitter le site.
   ---------------------------------------------------------------------- */
.videos { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .videos { grid-template-columns: repeat(3, 1fr); } }

.video-carte {
  --carte-teinte: var(--gold);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: var(--line);
  background: var(--white); box-shadow: var(--sh-1);
  transition: transform var(--mv-moyen) var(--ease), box-shadow var(--mv-moyen) var(--ease);
}
.video-carte:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.section--ink .video-carte, .section--ink-2 .video-carte, .section--ink-3 .video-carte {
  background: var(--ink-2); border: var(--line-dark); box-shadow: none;
}
.video-carte--cyan   { --carte-teinte: var(--cyan); }
.video-carte--violet { --carte-teinte: var(--violet); }

/* La façade. C'est un vrai bouton : accessible au clavier, avec un libellé. */
.video-facade {
  position: relative; display: block; width: 100%; border: 0; padding: 0;
  aspect-ratio: 16 / 10; cursor: pointer; overflow: hidden;
  background:
    radial-gradient(120% 100% at 18% 8%, color-mix(in srgb, var(--carte-teinte) 42%, transparent), transparent 62%),
    linear-gradient(150deg, var(--ink-3), var(--ink));
  color: var(--tx-on-dark);
}
.video-facade::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgb(31 31 35 / 0.10) 1px, transparent 1px);
  background-size: 18px 18px; opacity: 0.6; pointer-events: none;
}
/* La vraie miniature de la vidéo. Elle occupe toute la façade ; un voile
   sombre en dégradé garde le bouton de lecture et le libellé lisibles quelle
   que soit l'image. */
.video-facade__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.35s var(--ease);
  filter: saturate(0.92) brightness(0.86);
}
.video-facade::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(9 7 27 / 0.66), rgb(11 14 20 / 0.06) 55%);
}
.video-facade:hover .video-facade__image,
.video-facade:focus-visible .video-facade__image {
  transform: scale(1.045); filter: saturate(1) brightness(1);
}

/* Le mot « Témoignage » posé sur l'image : il dit ce qu'on va regarder
   avant même de cliquer. */
.video-facade__duree {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: rgb(9 7 27 / 0.72);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tx-on-dark);
}
.video-facade__lecture {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--carte-teinte); color: var(--ink);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--carte-teinte) 90%, transparent);
  transition: transform var(--mv-moyen) var(--ease);
}
.video-facade:hover .video-facade__lecture,
.video-facade:focus-visible .video-facade__lecture { transform: scale(1.09); }
.video-facade__duree {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: rgb(9 7 27 / 0.66); color: var(--tx-on-dark);
}
.video-carte__corps {
  padding: clamp(var(--sp-5), 2.6vw, var(--sp-6));
  display: flex; flex-direction: column; flex: 1;
}
/* La carte de programme : le bouton d'action se cale en bas, quelle que soit
   la longueur du texte. Sinon, sur douze cartes, aucun bouton n'est aligné. */
.carte-programme { display: flex; flex-direction: column; }
.carte-programme > ul { margin-bottom: var(--sp-5); }
.carte__action { margin-top: auto; margin-bottom: 0; padding-top: var(--sp-4); }
.video-carte__resultat {
  font-family: var(--font-title); font-weight: 800; line-height: 1.25;
  font-size: 1.32rem; letter-spacing: -0.015em; margin: var(--sp-4) 0 var(--sp-3);
}
.video-carte__texte { font-size: var(--t-small); line-height: 1.6; flex: 1; margin-bottom: var(--sp-5); }
.section--light .video-carte__texte, .section--paper .video-carte__texte { color: var(--tx-on-light-2); }

/* --- 23. Les symptômes (« le piège ») ----------------------------------
   Trois cartes identiques côte à côte, c'était la composition la plus répétée
   de la page. Ici, la même information devient une liste rythmée par de très
   grands chiffres en contour : on lit de haut en bas, pas de gauche à droite.
   ---------------------------------------------------------------------- */
.symptomes { display: grid; gap: 0; }
.symptome {
  display: grid; gap: var(--sp-3) var(--sp-5);
  grid-template-columns: auto 1fr;
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-top: var(--line);
  align-items: start;
}
.symptome:last-child { border-bottom: var(--line); }
.section--ink .symptome, .section--ink-2 .symptome, .section--ink-3 .symptome { border-color: rgb(31 31 35 / 0.10); }
.symptome__num {
  font-family: var(--font-title); font-weight: 900; line-height: 0.82;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem);
  color: transparent; -webkit-text-stroke: 1.6px rgb(17 24 39 / 0.3);
  grid-row: span 2; letter-spacing: -0.05em;
}
.section--ink .symptome__num, .section--ink-2 .symptome__num {
  -webkit-text-stroke-color: rgb(102 87 232 / 0.42);
}
.symptome h3 { margin: 0; align-self: center; }
.symptome p { margin: 0; grid-column: 2; max-width: 62ch; }
.section--light .symptome p, .section--paper .symptome p { color: var(--tx-on-light-2); }

/* --- 24. Bento des résultats -------------------------------------------
   Six livrables, six cartes de tailles différentes : la variation de format
   fait le rythme visuel, et hiérarchise en même temps (les deux premiers
   livrables sont les plus grands parce que ce sont les plus décisifs).
   ---------------------------------------------------------------------- */
.bento { display: grid; gap: var(--sp-5); }
@media (min-width: 780px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > * { grid-column: span 2; }
  .bento > :nth-child(1), .bento > :nth-child(2) { grid-column: span 3; }
  .bento > :nth-child(6) { grid-column: span 6; }
}
.bento__item {
  position: relative; overflow: hidden;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  border-radius: var(--r-lg); border: var(--line);
  background: var(--white); box-shadow: var(--sh-1);
  transition: transform var(--mv-moyen) var(--ease), box-shadow var(--mv-moyen) var(--ease);
}
.bento__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.bento__item::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--bento-teinte, var(--gold)), transparent 86%);
}
.bento__item:nth-child(3n+2) { --bento-teinte: var(--cyan); }
.bento__item:nth-child(3n)   { --bento-teinte: var(--violet); }
.bento__num {
  font-family: var(--font-title); font-weight: 900;
  font-size: var(--t-small); letter-spacing: 0.2em;
  color: var(--bento-teinte, var(--gold-dim)); display: block; margin-bottom: var(--sp-3);
}
.bento__item p { margin-bottom: 0; color: var(--tx-on-light-2); }
.bento__item:nth-child(6) { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .bento__item:nth-child(6) { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
}

/* --- 25. Le parcours en trois étapes -----------------------------------
   L'ancienne présentation était une grille de trois tarifs. C'est devenu un
   chemin : 1, puis 2, puis 3, reliés par un trait. On lit un ordre, pas un
   catalogue : et l'étape 1, la seule gratuite, ouvre la marche.
   ---------------------------------------------------------------------- */
.etapes { display: grid; gap: var(--sp-6); position: relative; }
@media (min-width: 940px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  /* Le trait de liaison part du centre de chaque pastille et rejoint la
     suivante. Il est porté par l'étape elle-même · un seul trait posé sur le
     conteneur ne pourrait pas tomber juste, les colonnes n'étant pas
     symétriques une fois la gouttière déduite. */
  .etape:not(:last-child)::after {
    content: ''; position: absolute; z-index: 0;
    top: 26px; left: 54px; right: calc(-1 * var(--sp-5) - 1px); height: 2px;
    background: linear-gradient(90deg,
      var(--etape-teinte, var(--gold)), var(--etape-suivante, var(--cyan)));
    opacity: 0.45;
  }
  .etape--1 { --etape-suivante: var(--cyan); }
  .etape--2 { --etape-suivante: var(--violet-hi); }
}
.etape { position: relative; z-index: 1; display: flex; flex-direction: column; }
.etape__pastille {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-bottom: var(--sp-5);
  font-family: var(--font-title); font-weight: 900; font-size: 1.35rem;
  background: var(--ink); color: var(--etape-teinte, var(--gold));
  border: 2px solid var(--etape-teinte, var(--gold));
}
.etape--1 { --etape-teinte: var(--gold); }
.etape--2 { --etape-teinte: var(--cyan); }
.etape--3 { --etape-teinte: var(--violet-hi); }
.etape--2 .etape__pastille { background: var(--cyan); color: var(--ink); }

/* --- 26. Pour qui : trois profils en bande -----------------------------
   Ni carte ni grille : une bande de trois blocs séparés par un filet, avec un
   pictogramme dans la couleur du pilier correspondant.
   ---------------------------------------------------------------------- */
.profils { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .profils { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .profils > * + * { border-left: var(--line); padding-left: var(--sp-7); }
  .profils > * { padding-right: var(--sp-6); }
}
.profil__icone {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--profil-teinte, var(--gold)) 14%, transparent);
  color: var(--profil-teinte, var(--gold-dim));
  border: 1px solid color-mix(in srgb, var(--profil-teinte, var(--gold)) 32%, transparent);
}
.profil--or     { --profil-teinte: var(--gold-dim); }
.profil--cyan   { --profil-teinte: var(--cyan-dark); }
.profil--violet { --profil-teinte: var(--violet); }
.profil p { color: var(--tx-on-light-2); margin-bottom: 0; }

/* --- 27. Le portrait du fondateur --------------------------------------
   Le cadre décalé donne du relief à une photo carrée sans la retoucher.
   La photo est un vrai portrait de Fabian sur scène : pas une image de
   banque, pas une image générée · une photo de banque ferait baisser la
   confiance au lieu de la construire.
   ---------------------------------------------------------------------- */
.portrait { position: relative; width: min(100%, 420px); margin-inline: auto; }
.portrait::before {
  content: ''; position: absolute; inset: 22px -22px -22px 22px;
  border: 2px solid rgb(102 87 232 / 0.55); border-radius: var(--r-xl);
  z-index: 0;
}
.portrait img {
  position: relative; z-index: 1; width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid rgb(102 87 232 / 0.3);
  background: var(--ink-2);
}
.portrait__jeton {
  position: absolute; z-index: 2; left: -8px; bottom: -18px;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 11px 17px; border-radius: var(--r-md);
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: var(--t-small); letter-spacing: 0.02em;
  box-shadow: var(--sh-3);
}

/* --- 28. Utilitaires ---------------------------------------------------- */
.tag {
  display: inline-block; padding: 6px 13px; border-radius: var(--r-sm);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; line-height: 1.25;
  background: rgb(102 87 232 / 0.09); color: var(--gold);
  border: 1px solid rgb(102 87 232 / 0.24);
}
/* Sur fond clair, l'or pur n'est pas lisible : on descend sur l'or sombre. */
.section--light .tag, .section--paper .tag {
  color: var(--gold-dim); background: rgb(138 114 56 / 0.10);
  border-color: rgb(138 114 56 / 0.3);
}
.tag--cyan { color: var(--cyan); background: rgb(0 188 212 / 0.13); border-color: rgb(0 188 212 / 0.3); }
.section--light .tag--cyan, .section--paper .tag--cyan {
  color: var(--cyan-dark); background: rgb(0 153 196 / 0.1); border-color: rgb(0 153 196 / 0.32);
}
.tag--violet { color: var(--violet-hi); background: rgb(124 58 237 / 0.16); border-color: rgb(124 58 237 / 0.36); }
.section--light .tag--violet, .section--paper .tag--violet {
  color: var(--violet); background: rgb(124 58 237 / 0.1); border-color: rgb(124 58 237 / 0.32);
}
.divider { height: 1px; background: rgb(102 87 232 / 0.20); margin-block: var(--sp-7); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
/* ⚠️ CONTRASTE · la mention de source des chiffres et les mentions légales
   étaient en gris #7A7A82 sur fond nuit : environ 3,4:1, sous le seuil de 4,5:1
   exigé pour un petit texte. Or c'est précisément le texte qu'un lecteur doit
   pouvoir lire s'il veut vérifier une affirmation. Elles passent sur le gris
   clair de la charte (#52525A, environ 6,5:1). */
.micro { font-size: var(--t-micro); color: var(--tx-on-dark-2); }
.section--light .micro, .section--paper .micro { color: var(--tx-on-light-2); }
.petit { font-size: var(--t-small); color: var(--tx-on-dark-2); }
.section--light .petit, .section--paper .petit { color: var(--tx-on-light-2); }
.hide { display: none !important; }
@media (max-width: 700px) { .hide-sm { display: none !important; } }
@media print {
  .nav, .footer, .btn, .modal { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================================
   29. REFONTE « SIMPLE » DE L'ACCUEIL · 29 août 2026
   ----------------------------------------------------------------------------
   Fabian a comparé les deux sites et a tranché : « plus clair, plus classe,
   et beaucoup plus simple ». L'écart mesuré ne venait pas des couleurs, qui
   étaient déjà les bonnes, mais du NOMBRE de sections : douze chez nous,
   sept chez la référence.

   Ce bloc ne réécrit rien de ce qui existe. Il ajoute quatre fonds explicites,
   trois composants neufs (les repères du hero, le mur de références, le trio
   de piliers) et les rares réglages nécessaires pour que des composants
   pensés pour le fond sombre restent lisibles sur les sections blanches.

   Durées et courbes : celles du socle (--mv-court 0,18 s pour un état de
   bouton, --mv-moyen 0,28 s pour une carte), jamais un rythme improvisé.
   ========================================================================= */

/* --- 29.1 Le rythme des fonds -------------------------------------------
   Quatre classes qui ne font QUE fixer une couleur de fond. Elles se posent
   toujours EN PLUS de `.section--light` (contexte de texte sombre) ou de
   `.section--ink` (contexte de texte clair) : c'est la seconde qui gouverne
   la couleur des titres, des liens et des champs, et tout le fichier en
   dépend déjà. Écrites ici, en fin de feuille, elles gagnent sur le fond
   déclaré plus haut sans avoir à toucher à une seule règle existante.

   L'alternance de l'accueil : nuit, blanc, anthracite, sable, blanc,
   anthracite, nuit. */
.section--nuit       { background: var(--fond); }        /* #09071B */
.section--anthracite { background: var(--fond-2); }      /* #1F1F23 */
.section--blanc      { background: var(--fond-clair); }  /* #FFFFFF */
.section--sable      { background: var(--sable); }       /* #D7D4CA */

/* --- 29.2 Les boutons ---------------------------------------------------
   Capitales, petites, lettres espacées, coins courts. La taille descend de
   1,08 à 1,02 rem pour compenser l'élargissement dû aux capitales : à
   libellé égal, un bouton n'occupe pas plus de place qu'avant. */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 15px 26px;
}
.btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.btn--sm { padding: 11px 20px; font-size: 0.94rem; }

/* Le second appel à l'action n'est jamais un second bouton plein : c'est un
   simple texte souligné. Deux boutons pleins côte à côte, c'est deux
   priorités, donc aucune. */
.lien-caps {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre);
  border-bottom: 1px solid rgb(244 243 248 / 0.45);
  padding-bottom: 5px;
  transition: color var(--mv-court) var(--ease),
              border-color var(--mv-court) var(--ease);
}
.lien-caps:hover { color: var(--indigo-hi); border-color: var(--indigo-hi); }
.section--light .lien-caps, .section--paper .lien-caps {
  color: var(--encre-sombre); border-color: rgb(31 31 35 / 0.35);
}
.section--light .lien-caps:hover, .section--paper .lien-caps:hover {
  color: var(--gold-dark); border-color: var(--gold-dark);
}
/* Le filet du lien secondaire était resté sur l'ancien or (184 148 31). */
.section--light .lien-action, .section--paper .lien-action {
  color: var(--gold-dark); border-color: rgb(83 70 196 / 0.45);
}

/* --- 29.3 Le premier écran ----------------------------------------------
   Le fond redevient un aplat presque noir. Les deux lavis colorés et la
   trame quadrillée qui l'habillaient sont retirés : ils faisaient « fond
   d'écran de logiciel » là où il faut du calme. Il ne reste qu'une seule
   lueur indigo, très basse, en haut à droite, à l'endroit exact où une
   photo de scène viendra se placer le jour où nous en aurons une. */
/* ⚠️ TOUT CE BLOC EST PORTÉ PAR `.accueil`, ET CE N'EST PAS DÉCORATIF.
   Dix-sept autres pages du site emploient `.hero__title` : accompagnement,
   formation, blog, booking et les douze fiches de formations/. Écrites sans
   ce préfixe, les deux dernières règles auraient rétréci leur titre et bridé
   sa largeur à 22 caractères, sur des pages que personne ne regardait dans
   ce lot. Une refonte de l'accueil ne doit rien changer ailleurs. */
.accueil .hero { padding-block: clamp(56px, 6.5vw, 108px) clamp(52px, 6vw, 88px); }
.accueil .hero::before, .accueil .hero::after { content: none; }
.accueil .hero__lueur {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 60% at 80% 8%, rgb(102 87 232 / 0.17), transparent 70%);
}
/* Le titre du hero descend d'un cran (l'échelle h1 et non l'échelle hero) et
   s'autorise 22 caractères par ligne : il tombe alors en trois lignes, comme
   la référence, au lieu de quatre lignes très courtes. */
.accueil .hero__title { font-size: var(--t-h1); max-width: 22ch; }
.accueil .hero__lead { max-width: 46ch; opacity: 1; color: var(--tx-on-dark-2); }

/* --- 29.4 La rangée des trois repères ------------------------------------
   Elle remplace le bloc de statistiques qui prenait un écran entier. Trois
   faits, une petite icône cerclée, un filet vertical entre chacun. Sur
   téléphone les filets verticaux disparaissent : ils deviendraient des
   traits horizontaux inutiles. */
.reperes {
  margin-top: clamp(44px, 5.5vw, 76px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgb(255 255 255 / 0.13);
  display: grid; gap: var(--sp-5);
}
.repere { display: flex; align-items: center; gap: var(--sp-4); }
@media (min-width: 800px) {
  .reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .repere { padding-inline: clamp(22px, 3vw, 52px); }
  .repere:first-child { padding-left: 0; }
  .repere + .repere { border-left: 1px solid rgb(255 255 255 / 0.13); }
}
.repere__icone {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 0.30);
  color: var(--encre);
}
.repere__texte { display: grid; gap: 1px; min-width: 0; }
.repere__valeur {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem);
  line-height: 1.2; letter-spacing: -0.02em;
}
.repere__legende {
  font-size: var(--t-small); line-height: 1.35; color: var(--tx-on-dark-2);
}
/* La mention de source des chiffres. Elle reste, en petit : un prospect qui
   demande d'où vient le « 843+ » doit trouver la réponse sur la page. */
.hero__source {
  margin: var(--sp-6) 0 0; max-width: 82ch;
  font-size: var(--t-micro); line-height: 1.55; color: var(--tx-on-dark-2);
}

/* --- 29.5 Le mur de références (section blanche) -------------------------
   Onze noms dans onze cartes bordées, en gris. Ce sont des NOMS, pas des
   logos : la bibliothèque du projet n'en contient aucun fichier. Le jour où
   les logos arriveront, ils se glisseront dans la même carte sans que rien
   d'autre ne bouge. Disposition en flex et non en grille, pour que la
   dernière rangée incomplète reste centrée. */
/* LA BANDE PASSANTE DES RÉFÉRENCES.
   Elle remplace la grille figée : le mouvement attire l'oeil sur la preuve,
   et une bande qui défile porte plus de noms qu'une grille sans allonger la
   page. Le masque en dégradé fait entrer et sortir les cartes au lieu de les
   couper net sur le bord. */
.bande {
  --bande-duree: 45s;
  position: relative;
  display: flex; gap: var(--sp-4);
  width: 100%; overflow: hidden;
  padding-block: 6px;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.bande__piste {
  display: flex; gap: var(--sp-4); flex: 0 0 auto;
  padding-right: var(--sp-4);
  animation: bande-defile var(--bande-duree) linear infinite;
}
/* Au survol la bande s'arrête : un visiteur qui reconnaît un nom doit pouvoir
   le lire sans lui courir après. */
.bande:hover .bande__piste,
.bande:focus-within .bande__piste { animation-play-state: paused; }

@keyframes bande-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.bande__suite {
  margin-top: var(--sp-5); text-align: center;
  max-width: none; margin-inline: auto;
  font-size: 1.04rem; font-style: italic;
  color: var(--tx-on-light-2);
}

/* Le visiteur qui a demandé moins d'animations voit une bande immobile, qu'il
   fait défiler lui-même. On ne lui impose pas un mouvement permanent. */
@media (prefers-reduced-motion: reduce) {
  .bande { overflow-x: auto; }
  .bande__piste { animation: none; }
  .bande__piste[aria-hidden="true"] { display: none; }
}
.logo-client {
  flex: 0 0 clamp(230px, 21vw, 300px); min-height: clamp(96px, 8vw, 116px);
  display: grid; place-items: center;
  padding: 14px 18px;
  border: 1px solid var(--trait-clair); border-radius: var(--r-md);
  background: var(--fond-clair);
  transition: border-color var(--mv-moyen) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.logo-client span {
  font-family: var(--font-title); font-weight: 700;
  /* Ecriture agrandie le 30/08/2026 : a 1.05rem les noms se lisaient mal dans
     une bande en mouvement, l'oeil n'a qu'une seconde par carte. */
  font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  text-align: center; color: var(--encre-2);
  transition: color var(--mv-moyen) var(--ease);
}
.logo-client:hover { border-color: var(--sable); box-shadow: var(--sh-1); }
.logo-client:hover span { color: var(--encre-sombre); }

/* --- 29.6 « Rencontrez Fabian Delahaut » (section anthracite) ------------
   Texte à gauche, portrait à droite.

   ⚠️ LA PHOTO DISPONIBLE EST DÉTOURÉE EN ROND, en 400 x 400 px. Elle est
   donc affichée EN ROND, à sa taille native, et jamais étirée dans un
   rectangle : un portrait déformé fait perdre exactement la confiance que
   cette section est censée construire. Le double cercle indigo remplace le
   cadre rectangulaire de la référence. */
.duo-portrait { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) {
  .duo-portrait { grid-template-columns: 1.12fr 0.88fr; }
}
.duo-portrait h2 { max-width: 20ch; margin-bottom: var(--sp-5); }
.duo-portrait p { max-width: 54ch; }
.portrait-rond { position: relative; width: min(100%, 380px); justify-self: center; }
.portrait-rond img {
  width: 100%; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.14);
}
.portrait-rond::after {
  content: ''; position: absolute; inset: -16px; border-radius: 50%;
  border: 1px solid rgb(102 87 232 / 0.45); pointer-events: none;
}
.attenue { color: var(--tx-on-dark-2); }
.section--light .attenue, .section--paper .attenue { color: var(--tx-on-light-2); }
.signature { margin-top: var(--sp-6); }
.signature strong { font-family: var(--font-title); font-size: 1.22rem; font-weight: 700; }

/* --- 29.7 Les trois piliers (section sable) ------------------------------
   Trois cartes blanches sur le beige. Volontairement sans code couleur à
   trois teintes : la palette de référence est monochrome indigo, et le rang
   se lit déjà au numéro. */
.trio {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.trio__carte {
  background: var(--fond-clair);
  border: 1px solid rgb(31 31 35 / 0.10);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 44px);
  transition: transform var(--mv-moyen) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.trio__carte:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.trio__num {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--font-title); font-weight: 800;
  font-size: 1.1rem; letter-spacing: 0.16em; color: var(--gold-dark);
}
.trio__carte h3 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.72rem);
  color: var(--encre-sombre);
}
.trio__carte p { margin: 0; color: var(--tx-on-light-2); }

/* --- 29.8 Le calendrier sur fond blanc -----------------------------------
   Le composant « session » a toujours vécu sur fond sombre. Le calendrier
   étant désormais la section la plus lisible de la page, il passe sur blanc
   et a besoin de ses équivalents clairs. Rien n'est dupliqué : seules les
   couleurs qui étaient exprimées en blanc translucide sont redéclarées. */
.section--light .session, .section--paper .session {
  background: var(--fond-clair);
  border-color: rgb(31 31 35 / 0.12);
  box-shadow: var(--sh-1);
}
.section--light .session:hover, .section--paper .session:hover {
  border-color: rgb(102 87 232 / 0.45); box-shadow: var(--sh-2);
}
.section--light .session--prochaine, .section--paper .session--prochaine {
  border-color: rgb(102 87 232 / 0.55);
  background:
    linear-gradient(120deg, rgb(102 87 232 / 0.07), transparent 58%),
    var(--fond-clair);
  box-shadow: 0 18px 44px -30px rgb(102 87 232 / 0.85);
}
.section--light .session__quand, .section--paper .session__quand {
  background: rgb(102 87 232 / 0.08); border-color: rgb(102 87 232 / 0.24);
}
.section--light .session__jour, .section--light .session__mois,
.section--paper .session__jour, .section--paper .session__mois {
  color: var(--gold-dark);
}
.section--light .session__lieu, .section--paper .session__lieu { color: var(--encre-sombre); }
.section--light .session__detail, .section--paper .session__detail { color: var(--tx-on-light-2); }
.section--light .session__badge, .section--paper .session__badge {
  background: var(--gold-dark); color: var(--fond-clair);
}
.section--light .sessions__vide, .section--paper .sessions__vide { color: var(--tx-on-light-2); }

/* --- 29.9 Les témoignages sur l'anthracite -------------------------------
   Les cartes vidéo étaient réglées sur `--ink-2` (#16142A), plus SOMBRE que
   l'anthracite : elles s'enfonçaient au lieu de se détacher. Elles passent
   sur un blanc très translucide, donc légèrement plus claires que la
   section, ce qui est le sens attendu d'une carte posée sur un fond. */
.section--anthracite .video-carte {
  background: rgb(255 255 255 / 0.045);
  border: 1px solid rgb(255 255 255 / 0.10);
}
/* Cinq témoignages dans une grille de trois : la dernière rangée en compte
   deux et restait collée à gauche. En flex centré, elle se recentre. */
.videos--centre { display: flex; flex-wrap: wrap; justify-content: center; }
.videos--centre > * { flex: 1 1 300px; max-width: 400px; }

/* --- 29.10 L'appel final ------------------------------------------------- */
.duo-final { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
  .duo-final { grid-template-columns: 1fr 0.82fr; }
}
.duo-final .lead { max-width: 52ch; }

/* --- 29.11 Corrections relevées en regardant la page, pas en la relisant ---

   1. LE LIEN D'ÉVITEMENT DÉPASSAIT. `.skip-link` était rangé à `top: -60px`
      alors que sa hauteur réelle est de 62 px (corps 1,4 rem, interligne 1,72,
      plus 24 px de rembourrage) : deux pixels d'indigo restaient visibles en
      haut à gauche de CHAQUE page du site. Cause racine : une position en dur
      calculée sur une taille de texte qui a grandi depuis. La valeur ne se
      devine plus, elle se déduit de la hauteur de la barre.

   2. LE SUR-TITRE ÉTAIT ILLISIBLE SUR LES SECTIONS CLAIRES. La règle posait
      `--gold-dim`, en se fiant à un commentaire qui annonçait « l'or sombre de
      la charte, environ 4,6:1 ». Or, depuis le passage à l'indigo, `--gold-dim`
      vaut `--indigo-pale` (#9A8DF2), soit 2,8:1 sur blanc : sous le seuil.
      C'est `--gold-dark` (#5346C4, 4,7:1) qui était visé. */
.skip-link { top: calc(-1 * var(--nav-h) - 40px); }
.section--light .eyebrow, .section--paper .eyebrow {
  color: var(--gold-dark);
  background: rgb(83 70 196 / 0.08);
  border-color: rgb(83 70 196 / 0.24);
}

/* --- 29.12 La respiration de l'accueil ----------------------------------
   Mesuré sur les deux captures posées côte à côte : la colonne de contenu de
   la référence occupe environ 78 % de la largeur à 1440 px, la nôtre en
   occupait 92 %. C'est là, et pas ailleurs, que se jouait l'impression de
   page « plus aérée ». La variable est redéfinie SUR le corps de l'accueil :
   la barre de navigation, les sections et le pied de page la suivent d'un
   coup, et aucune autre page du site n'est touchée. */
.accueil { --w-page: min(90vw, 1200px); }

/* Le filet tricolore sous la barre de navigation (or, cyan, violet) datait de
   l'ancienne charte à trois couleurs. Sur une palette monochrome indigo, il ne
   code plus rien : il décore. Retiré sur l'accueil. */
.accueil .nav::after { content: none; }

/* Le sur-titre perd sa pastille sur l'accueil : un mot en capitales espacées
   suffit à annoncer une section, et c'est exactement ce que fait la référence.
   Les autres pages gardent l'étiquette pleine, qui y sert de repère de
   navigation dans des contenus beaucoup plus longs. */
.accueil .eyebrow {
  padding: 0; background: none; border: 0;
  letter-spacing: 0.26em;
}
.accueil .eyebrow::before { content: none; }

/* Cinq témoignages : trois sur la première rangée, deux centrés sur la
   seconde. Avec une base de 300 px, une quatrième carte se glissait sur la
   première rangée et la cinquième restait seule. */
.videos--centre > * { flex: 1 1 320px; max-width: 380px; }

/* Le titre de l'appel final vit dans une colonne d'environ 620 px, face au
   formulaire. À la taille h2 pleine (54 px), il n'y tenait pas : deux lignes
   demandées, quatre lignes obtenues, avec le point d'interrogation seul sur
   la derniere. Il descend d'un cran, ce qui est cohérent avec sa position :
   ce n'est pas le titre de la page, c'est l'intitulé d'une action. */
.duo-final h2 {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.85rem);
  max-width: 20ch;
}

/* Sur téléphone, une base de 240 px ne laisse passer qu'une seule référence
   par ligne : onze lignes, soit près de 800 px de haut pour un mur de noms.
   Deux par ligne, et la section retrouve sa juste place. Le trafic de ce site
   vient de Facebook, donc du téléphone : c'est là que la longueur coûte. */
@media (max-width: 560px) {
  .logo-client { flex: 1 1 calc(50% - var(--sp-2)); min-height: 68px; padding: 12px; }
  .logo-client span { font-size: 0.95rem; letter-spacing: 0.04em; }
}

/* L'adresse d'une session et son lien « Voir le plan » forment UN seul bloc
   de texte. Sans ce conteneur, chacun devenait un élément flexible distinct
   dans `.session__detail > span`, donc une colonne à lui : sur téléphone,
   l'adresse de Casteau tombait sur sept lignes de trois mots à côté d'un
   lien coupé en deux. `min-width: 0` autorise ce bloc à se rétrécir sous sa
   largeur de contenu, ce qu'un élément flexible refuse par défaut. */
.session__adresse { min-width: 0; }

/* =========================================================================
   L'AGENDA · ajouté le 30/08/2026
   =========================================================================
   Une ligne par date, dans l'ordre. Ce qui est passé n'est pas barré, il
   n'est simplement plus là : une session terminée sur une page de vente ne
   rend service à personne.
   ========================================================================= */
.agenda { display: grid; gap: var(--sp-4); max-width: 980px; margin-inline: auto; }

.agenda__ligne {
  display: grid; gap: var(--sp-4); align-items: center;
  grid-template-columns: minmax(150px, 200px) 1fr auto;
  padding: var(--sp-5);
  background: var(--fond-clair);
  border: 1px solid var(--trait-clair);
  border-left: 3px solid var(--trait-clair);
  border-radius: var(--r-md);
  transition: border-color var(--mv-moyen) var(--ease),
              transform var(--mv-moyen) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.agenda__ligne:hover {
  transform: translateY(-2px);
  border-color: rgb(102 87 232 / 0.4);
  border-left-color: var(--indigo);
  box-shadow: var(--sh-2);
}
/* Une date à huit jours ou moins porte un filet indigo permanent : c'est
   l'information la plus utile de la ligne. */
.agenda__ligne.is-urgent { border-left-color: var(--indigo); }

.agenda__date { display: grid; gap: 2px; }
.agenda__date time {
  font-weight: 700; font-size: .98rem; color: var(--encre-sombre);
}
/* Seule la PREMIERE lettre prend la majuscule. text-transform: capitalize la
   mettait a chaque mot, ce qui donnait « Mardi 1 Septembre 2026 ». */
.agenda__date time::first-letter { text-transform: uppercase; }
.agenda__proche {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--indigo);
}
.agenda__type {
  display: inline-block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--indigo);
}
.agenda__titre { font-size: 1.08rem; font-weight: 700; color: var(--encre-sombre); margin: 0 0 2px; }
.agenda__detail { font-size: .9rem; color: var(--encre-2); margin: 0; line-height: 1.5; }
.agenda__lien {
  white-space: nowrap; padding: 10px 18px;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo); text-decoration: none;
  border: 1px solid rgb(102 87 232 / 0.35); border-radius: var(--r-sm);
  transition: background-color var(--mv-court) var(--ease),
              color var(--mv-court) var(--ease);
}
.agenda__lien:hover { background: var(--indigo); color: var(--encre); }
.agenda__reste {
  margin: var(--sp-5) 0 0; text-align: center;
  font-size: .95rem; color: var(--encre-2);
}

@media (max-width: 720px) {
  .agenda__ligne { grid-template-columns: 1fr; gap: var(--sp-3); }
  .agenda__lien { justify-self: start; }
}

/* --- Refonte du 30/08/2026, cahier Fabian ------------------------------
   Les classes ci-dessous portent les sections qu'il a redefinies. */

/* Le portrait rectangulaire. Le cahier interdit les decoupes en cercle :
   photos editoriales, naturelles, cadrage droit. */
.portrait-cadre { position: relative; width: min(100%, 420px); justify-self: center; }
.portrait-cadre img {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid rgb(255 255 255 / 0.14);
}
.portrait-cadre::after {
  content: ''; position: absolute; inset: 14px -14px -14px 14px;
  border-radius: var(--r-lg);
  border: 1px solid rgb(102 87 232 / 0.45);
  pointer-events: none; z-index: -1;
}

/* La promesse du hero, au-dessus du sous-titre. */
.hero__lead--fort { font-size: 1.22rem; color: var(--tx-on-dark); font-weight: 600; }
/* La ligne d'activite : Form'Actions, Coaching, Conseil. */
.hero__activite {
  margin-top: var(--sp-4);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--indigo-pale);
}

/* Cinq cartes : les attentes, et les raisons de choisir la maison. */
.quinte {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 1180px; margin-inline: auto;
}
.quinte__carte {
  background: var(--fond-clair);
  border: 1px solid var(--trait-clair); border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  transition: transform var(--mv-moyen) var(--ease), box-shadow var(--mv-moyen) var(--ease);
}
.quinte__carte:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.quinte__carte h3 { font-size: 1.16rem; margin-bottom: var(--sp-3); color: var(--encre-sombre); }
.quinte__carte p { margin: 0; color: var(--tx-on-light-2); font-size: .97rem; line-height: 1.7; }
.quinte__carte--sombre { background: var(--fond-carte); border-color: var(--trait); }
.quinte__carte--sombre h3 { color: var(--tx-on-dark); }
.quinte__carte--sombre p { color: var(--tx-on-dark-2); }

/* Les photos de conference : Fabian en intervention, public visible. */
.conf-photos {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  max-width: 1080px; margin: var(--sp-6) auto 0;
}
.conf-photos--une { max-width: 880px; }
.conf-photos img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--trait-clair);
}

/* Vignette de temoignage sobre : le visage et le nom, sans citation
   reecrite. Les vrais visages valent mieux que des accroches surmarketees. */
.video-carte--sobre .video-carte__corps { padding: 14px 18px; }
.video-carte--sobre .testimonial__who { margin: 0; }

/* --- LE DIAPORAMA DES CONFÉRENCES ---------------------------------------
   Demande de Rudy du 30/08/2026 : « que ça bouge pour que ça donne envie ».
   Les six photos réelles défilent en fondu, chacune avec un lent mouvement
   de zoom (effet Ken Burns) : la salle semble vivre sans qu'on touche à
   rien. Le mouvement s'arrête au survol, quand l'onglet est masqué, et
   n'existe pas du tout sous prefers-reduced-motion (la règle globale coupe
   déjà les animations, la première photo reste simplement affichée). */
.diapo {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 980px; margin: var(--sp-6) auto 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--trait-clair);
  background: var(--fond-carte);
}
.diapo__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.diapo__img.est-active {
  opacity: 1;
  animation: diapo-zoom 7s ease-out forwards;
}
@keyframes diapo-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}
/* Le voile du bas porte la légende et le bouton : lisible sur toute photo. */
.diapo__voile {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(18px, 4vw, 30px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: linear-gradient(180deg, transparent, rgb(9 7 27 / .82));
}
.diapo__legende {
  margin: 0; color: #FFFFFF; font-weight: 600;
  font-size: clamp(.95rem, .8rem + .7vw, 1.2rem);
  text-shadow: 0 1px 8px rgb(9 7 27 / .6);
}
.diapo__points {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  display: flex; gap: 6px;
}
.diapo__point {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(255 255 255 / .45); border: 0; padding: 0; cursor: pointer;
  transition: background var(--mv-court) var(--ease), transform var(--mv-court) var(--ease);
}
.diapo__point.est-actif { background: #FFFFFF; transform: scale(1.25); }