/* =========================================================================
   PAGES DE PROGRAMME · feuille unique, reconstruite le 30/08/2026
   =========================================================================

   POURQUOI CETTE RÉÉCRITURE

   Fabian, message audio du 30 août : « les formations ne sont pas très
   lisibles, et il y a des moments où il n'y a pas d'effet de contraste et on
   ne voit rien, vers la fin notamment ».

   Diagnostic. Les douze pages ne chargeaient PAS la charte eagle.css. Elles
   empilaient premium.css, refonte-2026.css et charte.css, plus la police
   Fraunces. Deux conséquences mesurées :

   1. Deux variables n'étaient définies NULLE PART : --ea-bg-primary et
      --ea-glass-border. Un fond et une bordure qui valent « rien » ne sont pas
      une erreur visible, ils sont juste absents. Les cartes n'avaient donc
      aucune bordure, et le hero aucun fond propre. C'est très exactement
      l'absence de contraste décrite.
   2. Le bouton de fin de page était en texte SOMBRE sur un dégradé mi-ton.
      C'est le « vers la fin notamment ».

   La feuille ne dépend plus que d'eagle.css. Aucune variable orpheline :
   celles que les pages utilisent encore sont redéclarées ici, sur les jetons
   de la charte, pour que les douze pages n'aient pas à être réécrites une
   par une.

   ⚠️ AUCUN CODE HEXADÉCIMAL HORS CHARTE. `npm run verif` échoue sinon.
   ========================================================================= */

/* --- 1. LE PONT AVEC L'ANCIEN NOMMAGE ------------------------------------
   Les pages écrivent encore var(--ea-gold) et consorts dans leurs styles en
   ligne. On garde ces noms vivants plutôt que d'éditer douze fichiers, et on
   les branche sur la charte. Les deux variables qui manquaient sont ici. */
:root {
  --ea-bg-primary:   var(--fond);
  --ea-bg-card:      var(--fond-carte);
  --ea-glass-border: var(--trait);
  --ea-border:       var(--trait);
  --ea-gold:         var(--indigo);
  --ea-text-primary:   var(--encre);
  --ea-text-secondary: var(--tx-on-dark-2);
  --ea-text-muted:     var(--tx-on-dark-3);
}

/* La page de programme se lit sur le fond de nuit de la charte, comme
   l'accueil. Sora partout, plus de Fraunces ni d'Outfit. */
body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-title);
}

/* --- 2. L'OUVERTURE ------------------------------------------------------ */
.fm-hero {
  padding: clamp(120px, 14vw, 180px) var(--sp-5) clamp(64px, 8vw, 100px);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgb(102 87 232 / 0.22), transparent 62%),
    var(--fond);
  border-bottom: 1px solid var(--trait);
}
.fm-hero__badge {
  display: inline-block; margin-bottom: var(--sp-5);
  background: rgb(102 87 232 / 0.12);
  border: 1px solid rgb(102 87 232 / 0.38);
  color: var(--indigo-pale);
  padding: 8px 20px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
/* ⚠️ PLUS DE TEXTE EN DÉGRADÉ DÉCOUPÉ.
   L'ancien titre utilisait -webkit-text-fill-color: transparent : si la
   police ou le fond de découpe ne se peignent pas, le titre disparaît
   entièrement. Un titre est la dernière chose qu'on rend fragile. Il est
   plein, et seul le mot accentué prend la couleur. */
.fm-hero__title {
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
  color: var(--encre);
  max-width: 20ch; margin-inline: auto;
}
.fm-hero__title .accent { color: var(--indigo-pale); }
.fm-hero__sub {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem);
  color: var(--tx-on-dark-2);
  max-width: 62ch; margin: 0 auto var(--sp-7); line-height: 1.7;
}

/* --- 3. LE RYTHME DES SECTIONS -------------------------------------------
   Une page qui déroule dix blocs identiques se lit mal. Les sections
   alternent fond de nuit et surface soulevée, comme l'accueil. */
.fm-section { padding: clamp(64px, 8vw, 100px) 0; }
.fm-section--alt {
  background: var(--fond-carte);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

/* --- 4. LES CARTES -------------------------------------------------------
   La bordure est désormais RÉELLE. C'était le principal défaut signalé. */
.fm-grid {
  display: grid; gap: var(--sp-6); margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.fm-card {
  position: relative; overflow: hidden;
  background: var(--fond-carte);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--mv-moyen) var(--ease),
              border-color var(--mv-moyen) var(--ease),
              box-shadow var(--mv-moyen) var(--ease);
}
.fm-section--alt .fm-card { background: var(--fond); }
.fm-card:hover {
  transform: translateY(-4px);
  border-color: rgb(102 87 232 / 0.55);
  box-shadow: 0 22px 44px -24px rgb(102 87 232 / 0.6);
}
.fm-card__num {
  position: absolute; top: 14px; right: 20px; line-height: 1;
  font-size: 3rem; font-weight: 800; color: rgb(102 87 232 / 0.22);
}
.fm-card__title {
  font-size: 1.22rem; font-weight: 700; margin-bottom: var(--sp-3);
  color: var(--indigo-pale);
}
.fm-card__text { color: var(--tx-on-dark-2); line-height: 1.65; font-size: .97rem; }

/* --- 5. CE QUE VOUS EN RESSORTEZ ----------------------------------------- */
.fm-result {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--trait);
}
.fm-result:last-child { border: none; }
.fm-result__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgb(102 87 232 / 0.14);
  border: 1px solid rgb(102 87 232 / 0.28);
  border-radius: var(--r-md);
}
.fm-result__text h4 { color: var(--encre); font-weight: 700; margin-bottom: 4px; }
.fm-result__text p { color: var(--tx-on-dark-2); font-size: .93rem; line-height: 1.55; }

/* --- 6. LES EAGLE COACHS -------------------------------------------------
   Ajouté le 30/08/2026. Fabian : « il n'y a pas de photos des coachs, il n'y
   a pas leurs noms, et c'est là que se fait la différence ». Les noms, les
   biographies et les photos viennent de la page Coachs de eagle-academy.com.

   La photo est cadrée sur le haut du sujet (object-position center top) :
   un cadrage centré coupe le menton sur les portraits en pied. */
.fm-coachs {
  display: grid; gap: var(--sp-6); margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.fm-coach {
  background: var(--fond-carte);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--mv-moyen) var(--ease),
              border-color var(--mv-moyen) var(--ease);
}
.fm-section--alt .fm-coach { background: var(--fond); }
.fm-coach:hover { transform: translateY(-4px); border-color: rgb(102 87 232 / 0.55); }
.fm-coach__photo {
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block; margin-bottom: var(--sp-5);
  border: 2px solid rgb(102 87 232 / 0.5);
  background: var(--fond-2);
}
.fm-coach__nom { font-size: 1.18rem; font-weight: 700; color: var(--encre); margin-bottom: 4px; }
.fm-coach__role {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--indigo-pale);
  margin-bottom: var(--sp-4);
}
.fm-coach__bio { color: var(--tx-on-dark-2); font-size: .95rem; line-height: 1.65; margin: 0; }

/* --- 7. LES TÉMOIGNAGES -------------------------------------------------- */
.fm-testimonial {
  position: relative;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.05), transparent);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.fm-testimonial::before {
  content: '\201C'; position: absolute; top: 6px; left: 18px;
  font-size: 4rem; color: var(--indigo); opacity: .35; font-family: Georgia, serif;
}
.fm-testimonial p {
  position: relative; z-index: 1; font-size: 1.08rem;
  color: var(--encre); font-style: italic; line-height: 1.65;
  margin-bottom: var(--sp-4);
}
.fm-testimonial .author { font-weight: 700; color: var(--indigo-pale); font-size: .95rem; }
.fm-testimonial .role { color: var(--tx-on-dark-2); font-size: .85rem; }

/* --- 8. LA RARETÉ -------------------------------------------------------- */
.fm-urgency {
  margin: var(--sp-7) 0; padding: var(--sp-6); text-align: center;
  background: linear-gradient(135deg, rgb(102 87 232 / 0.14), rgb(0 95 204 / 0.08));
  border: 1px solid rgb(102 87 232 / 0.34);
  border-radius: var(--r-lg);
}
.fm-urgency__title { color: var(--indigo-pale); font-size: 1.3rem; font-weight: 700; margin-bottom: var(--sp-3); }
.fm-urgency__bar {
  width: 100%; max-width: 400px; height: 8px; overflow: hidden;
  margin: var(--sp-4) auto; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.12);
}
.fm-urgency__fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--indigo), var(--indigo-pale));
  transition: width 1.5s var(--ease);
}
.fm-urgency__text { color: var(--tx-on-dark-2); font-size: .92rem; }

/* --- 9. LA FIN DE PAGE, LÀ OÙ « ON NE VOYAIT RIEN » ----------------------
   L'ancien bloc posait une carte pâle sur un fond pâle, et un bouton en texte
   sombre sur un dégradé mi-ton. Ici : carte soulevée sur le fond de nuit,
   bordure indigo franche, et bouton indigo à texte clair. */
.fm-waitlist {
  max-width: 560px; margin: 0 auto; padding: clamp(28px, 4vw, 48px);
  background: var(--fond-carte);
  border: 1px solid rgb(102 87 232 / 0.55);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -40px rgb(102 87 232 / 0.7);
}
.fm-waitlist__title {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800;
  color: var(--encre); text-align: center; margin-bottom: var(--sp-2);
}
.fm-waitlist__sub {
  color: var(--tx-on-dark-2); text-align: center;
  margin-bottom: var(--sp-6); font-size: .97rem; line-height: 1.6;
}
.fm-waitlist input {
  width: 100%; box-sizing: border-box; margin-bottom: var(--sp-4);
  padding: 16px 20px; font-size: 1rem;
  font-family: var(--font-title); color: var(--encre);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--r-md);
  transition: border-color var(--mv-court) var(--ease),
              box-shadow var(--mv-court) var(--ease);
}
.fm-waitlist input:focus {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgb(102 87 232 / 0.28);
}
/* Un gris trop clair passait pour du texte déjà saisi. Celui-ci se lit comme
   une invite, sans se confondre avec une valeur. */
.fm-waitlist input::placeholder { color: var(--tx-on-dark-3); }

.fm-waitlist__btn {
  width: 100%; padding: 18px; cursor: pointer;
  font-family: var(--font-title); font-size: 1.06rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre);
  background: var(--indigo);
  border: none; border-radius: var(--r-md);
  transition: transform var(--mv-court) var(--ease),
              background-color var(--mv-court) var(--ease),
              box-shadow var(--mv-court) var(--ease);
}
.fm-waitlist__btn:hover {
  background: var(--indigo-hi); transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgb(102 87 232 / 0.85);
}
.fm-waitlist__btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.fm-waitlist__success { display: none; text-align: center; padding: var(--sp-5); }
.fm-waitlist__success h3 { color: var(--indigo-pale); font-size: 1.4rem; margin-bottom: var(--sp-2); }
.fm-waitlist__success p { color: var(--tx-on-dark-2); }

/* --- 10. LA BARRE COLLANTE ---------------------------------------------- */
.fm-sticky {
  position: fixed; inset: auto 0 0 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: rgb(9 7 27 / 0.96);
  border-top: 1px solid rgb(102 87 232 / 0.55);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
@supports (backdrop-filter: blur(18px)) {
  .fm-sticky { background: rgb(9 7 27 / 0.82); backdrop-filter: blur(18px); }
}
.fm-sticky.visible { transform: translateY(0); }
.fm-sticky__text { color: var(--encre); font-weight: 600; font-size: .95rem; }
.fm-sticky__btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 12px 28px; cursor: pointer; text-decoration: none;
  font-family: var(--font-title); font-size: .95rem; font-weight: 700;
  color: var(--encre); background: var(--indigo);
  border: none; border-radius: var(--r-md);
  transition: transform var(--mv-court) var(--ease),
              background-color var(--mv-court) var(--ease);
}
.fm-sticky__btn:hover { background: var(--indigo-hi); transform: translateY(-2px); }

@media (max-width: 768px) {
  .fm-section { padding: var(--sp-8) 0; }
  .fm-sticky { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
}

/* =========================================================================
   11. LA COQUE DE PAGE · navigation, conteneur, titres, boutons, pied
   =========================================================================
   Ces classes `pr-` vivaient dans premium.css. En retirant cette feuille on
   les a orphelinées : la navigation débordait de 161 px au téléphone parce
   qu'une barre sans style ne sait pas se replier. Elles sont reconstruites
   ici, sur la charte, pour que l'en-tête et le pied des pages de programme
   soient enfin les mêmes que ceux de l'accueil.
   ========================================================================= */

.pr-container {
  width: min(100% - 2 * var(--sp-5), 1180px);
  margin-inline: auto;
}

/* --- La barre --- */
.pr-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgb(9 7 27 / 0.9);
  border-bottom: 1px solid var(--trait);
}
@supports (backdrop-filter: blur(14px)) {
  .pr-nav { background: rgb(9 7 27 / 0.72); backdrop-filter: blur(14px); }
}
.pr-nav__inner {
  width: min(100% - 2 * var(--sp-5), 1180px);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  /* La barre se replie au lieu de forcer le document à s'élargir. C'était
     l'origine exacte du débordement de 161 px. */
  flex-wrap: wrap; gap: var(--sp-4);
  min-height: 78px; padding-block: var(--sp-3);
}
.pr-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.pr-nav__logo img { height: 52px; width: auto; display: block; }
.pr-nav__links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-5); min-width: 0;
}
.pr-nav__link {
  position: relative; padding-block: var(--sp-2);
  font-size: 1.02rem; font-weight: 600; text-decoration: none;
  color: var(--tx-on-dark-2);
  transition: color var(--mv-court) var(--ease);
}
.pr-nav__link:hover { color: var(--encre); }
.pr-nav__link::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--indigo); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .24s var(--ease);
}
.pr-nav__link:hover::after { transform: scaleX(1); }
.pr-nav__cta {
  flex-shrink: 0; padding: 12px 22px; text-decoration: none;
  font-size: .88rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre); background: var(--indigo);
  border-radius: var(--r-md);
  transition: background-color var(--mv-court) var(--ease),
              transform var(--mv-court) var(--ease);
}
.pr-nav__cta:hover { background: var(--indigo-hi); transform: translateY(-2px); }

/* --- Les en-têtes de section --- */
.pr-label {
  display: inline-block; margin-bottom: var(--sp-4);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--indigo-pale);
}
.pr-section-title {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--encre); margin: 0 0 var(--sp-5);
}
/* Les pages marquent le mot fort en <em>. Il porte l'accent, sans italique :
   une italique dans un titre en Sora casse la ligne de base. */
.pr-section-title em { font-style: normal; color: var(--indigo-pale); }
.pr-section-subtitle {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.14rem);
  color: var(--tx-on-dark-2); line-height: 1.7; margin: 0;
}

/* --- Les boutons --- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); cursor: pointer; text-decoration: none;
  padding: 15px 30px; border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-title); font-size: .92rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background-color var(--mv-court) var(--ease),
              border-color var(--mv-court) var(--ease),
              transform var(--mv-court) var(--ease),
              box-shadow var(--mv-court) var(--ease);
}
.pr-btn--primary { color: var(--encre); background: var(--indigo); }
.pr-btn--primary:hover {
  background: var(--indigo-hi); transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgb(102 87 232 / 0.85);
}
.pr-btn--outline {
  color: var(--encre); background: transparent;
  border-color: rgb(255 255 255 / 0.28);
}
.pr-btn--outline:hover { border-color: var(--indigo); background: rgb(102 87 232 / 0.14); }

/* --- Le pied de page --- */
.pr-footer {
  padding: var(--sp-8) 0 var(--sp-6);
  background: var(--fond-carte);
  border-top: 1px solid var(--trait);
}
.pr-footer__top {
  display: grid; gap: var(--sp-6); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--trait);
}
.pr-footer__brand img { height: 62px; width: auto; display: block; margin-bottom: var(--sp-4); }
.pr-footer__brand p { color: var(--tx-on-dark-2); font-size: .95rem; line-height: 1.6; margin: 0; }
.pr-footer__nav { display: flex; flex-direction: column; gap: var(--sp-3); }
.pr-footer__nav a {
  color: var(--tx-on-dark-2); text-decoration: none; font-size: .95rem;
  transition: color var(--mv-court) var(--ease);
}
.pr-footer__nav a:hover { color: var(--indigo-pale); }
.pr-footer__bottom { padding-top: var(--sp-5); }
.pr-footer__bottom p { color: var(--tx-on-dark-3); font-size: .86rem; margin: 0; }

/* --- Le piège à robots ---------------------------------------------------
   Il était posé à gauche = -9999 px, ce qui élargissait le document de 406 px
   au téléphone. Le sortir du flux et le rendre inerte suffit, sans déplacer
   quoi que ce soit. */
.honeypot {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .pr-nav__inner { justify-content: center; }
  .pr-nav__links { justify-content: center; gap: var(--sp-4); }
  .pr-nav__link { font-size: .95rem; }
}

/* Les apprentissages par coach, repris des sites dedies de programme.
   "Avec Clement, vous apprendrez a..." vaut mieux qu'une biographie seule :
   le visiteur passe du prestige de l'intervenant a ce qu'il en retire. */
.fm-coach__avec {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo-pale);
}
.fm-coach__points { list-style: none; padding: 0; margin: 0; }
.fm-coach__points li {
  position: relative; padding-left: 18px; margin-bottom: var(--sp-2);
  font-size: .9rem; color: var(--tx-on-dark-2); line-height: 1.55;
}
.fm-coach__points li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--indigo);
}

/* =========================================================================
   12. LES VISUELS DE PROGRAMME · ajoute le 30/08/2026
   =========================================================================
   Fabian : « il n'y a pas de photos ». Les sites dedies de chaque programme
   en portaient des dizaines, prises en session. Elles sont rapatriees en
   local : Gamma heberge ces sites, et un site de vente dont les photos
   disparaissent le jour ou l'abonnement s'arrete est pire qu'un site sans
   photos.
   ========================================================================= */

/* Bandeau pleine largeur, pour ouvrir ou aerer une page. */
.fm-visuel {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--trait);
  background: var(--fond-carte);
}
.fm-visuel img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; aspect-ratio: 16 / 9;
}
.fm-visuel--haut img { aspect-ratio: 21 / 9; }
.fm-visuel__legende {
  padding: var(--sp-4) var(--sp-5);
  font-size: .88rem; color: var(--tx-on-dark-3); margin: 0;
}

/* Galerie de session. Trois photos suffisent : au dela on ne regarde plus,
   on fait defiler. */
.fm-galerie {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.fm-galerie img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--trait);
  transition: transform var(--mv-moyen) var(--ease);
}
.fm-galerie a:hover img, .fm-galerie img:hover { transform: scale(1.02); }

/* Texte a gauche, photo a droite (ou l'inverse). Le bloc qui manquait le plus :
   une page de vente sans visage se lit comme une brochure. */
.fm-duo {
  display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.fm-duo img {
  display: block; width: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  border: 1px solid var(--trait);
}
.fm-duo--inverse > :first-child { order: 2; }
@media (max-width: 700px) { .fm-duo--inverse > :first-child { order: 0; } }

/* LE MANTRA DES AIGLES.
   C'est un texte d'identite, pas un paragraphe : il se pose en grand, centre,
   sur un fond qui l'isole du reste de la page. */
.fm-mantra {
  max-width: 900px; margin: 0 auto; padding: clamp(28px, 5vw, 56px);
  text-align: center;
  background: linear-gradient(160deg, rgb(102 87 232 / 0.16), rgb(9 7 27 / 0.4));
  border: 1px solid rgb(102 87 232 / 0.34);
  border-radius: var(--r-xl);
}
.fm-mantra p {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 1.85; color: var(--encre); margin: 0 0 var(--sp-5);
}
.fm-mantra strong { color: var(--indigo-pale); font-weight: 700; }
.fm-mantra__signature {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 800; color: var(--indigo-pale); margin: 0;
}

/* Le bandeau de rarete : une date, un lieu, un nombre de places. C'est ce qui
   fait passer a l'action, cela ne doit pas se noyer dans le corps du texte. */
.fm-session {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  max-width: 900px; margin: var(--sp-7) auto 0;
  padding: var(--sp-6);
  background: var(--fond-carte);
  border: 1px solid rgb(102 87 232 / 0.45);
  border-radius: var(--r-lg);
  text-align: center;
}
.fm-session__valeur {
  display: block; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 800; color: var(--indigo-pale); margin-bottom: 4px;
}
.fm-session__legende { font-size: .9rem; color: var(--tx-on-dark-2); }

/* =========================================================================
   13. BUSINESS MASTERY · le programme long
   =========================================================================
   Cette page doit porter la meme offre que la landing page utilisee pour le
   trafic publicitaire : memes villes, memes dates, memes prix. Un prospect
   qui passe de l'une a l'autre et trouve autre chose decroche.
   ========================================================================= */

/* LE LOGO EST PRIS TEL QUEL, ET IL EST SUR FOND NOIR OPAQUE.
   L'original n'a pas de transparence. Plutot que de le detourer, ce qui
   l'abimerait, on assume un cartouche noir borde d'indigo : cela se lit comme
   un choix, pas comme un defaut de decoupe. */
.bm-logo {
  display: inline-block; margin-bottom: var(--sp-6);
  padding: clamp(10px, 2vw, 18px);
  background: #000000;
  border: 1px solid rgb(102 87 232 / 0.4);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -34px rgb(102 87 232 / 0.8);
}
.bm-logo img { display: block; width: clamp(200px, 34vw, 340px); height: auto; }

/* Les cinq villes. Chacune porte ses dix dates : c'est long, mais c'est
   exactement ce qu'un dirigeant regarde avant de s'engager sur dix mois. */
.bm-villes {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.bm-ville {
  background: var(--fond);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color var(--mv-moyen) var(--ease),
              transform var(--mv-moyen) var(--ease);
}
.bm-ville:hover { border-color: rgb(102 87 232 / 0.55); transform: translateY(-3px); }
.bm-ville__nom {
  font-size: 1.3rem; font-weight: 800; color: var(--encre);
  margin: 0 0 var(--sp-2);
}
.bm-ville__nom span {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-on-dark-3); margin-top: 4px;
}
.bm-ville__conf {
  margin: 0 0 var(--sp-4); padding: 8px 12px;
  font-size: .84rem; font-weight: 600; color: var(--indigo-pale);
  background: rgb(102 87 232 / 0.12);
  border: 1px solid rgb(102 87 232 / 0.3);
  border-radius: var(--r-sm);
}
.bm-ville__dates { list-style: none; padding: 0; margin: 0; counter-reset: jour; }
.bm-ville__dates li {
  position: relative; padding: 6px 0 6px 30px;
  font-size: .92rem; color: var(--tx-on-dark-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.bm-ville__dates li:last-child { border-bottom: none; }
.bm-ville__dates li::before {
  counter-increment: jour; content: counter(jour);
  position: absolute; left: 0; top: 6px;
  width: 20px; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--indigo-pale);
}

/* Les trois formules de paiement. La premiere est mise en avant : c'est celle
   qui est annoncee comme l'offre Early Eagle sur la page de vente. */
.bm-prix {
  display: grid; gap: var(--sp-5); max-width: 900px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.bm-prix__carte {
  text-align: center; padding: var(--sp-6) var(--sp-5);
  background: var(--fond);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg);
}
.bm-prix__carte--phare {
  border-color: rgb(102 87 232 / 0.6);
  background: linear-gradient(160deg, rgb(102 87 232 / 0.16), var(--fond));
  box-shadow: 0 26px 60px -38px rgb(102 87 232 / 0.9);
}
.bm-prix__valeur {
  display: block; margin-bottom: var(--sp-2);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 800; color: var(--encre);
}
.bm-prix__carte--phare .bm-prix__valeur { color: var(--indigo-pale); }
.bm-prix__legende { font-size: .9rem; color: var(--tx-on-dark-2); }

/* L'état du bandeau de chaque ville, rendu par agenda-rendu.js. */
.bm-ville__conf.is-urgent {
  background: rgb(102 87 232 / 0.22);
  border-color: rgb(102 87 232 / 0.6);
  color: var(--encre);
}
/* Tournai : conférence annoncée sur la page de vente, mais aucune inscription
   ouverte. On le dit plutôt que de promettre une porte qui n'ouvre pas. */
.bm-ville__conf.is-attente {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.18);
  color: var(--tx-on-dark-2);
}
.bm-ville__conf.is-encours {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.18);
  color: var(--tx-on-dark-2);
}
.bm-ville__note {
  margin: var(--sp-4) 0 0; font-size: .82rem;
  color: var(--tx-on-dark-3); font-style: italic;
}
.bm-ville__precision {
  margin: 0 0 var(--sp-4); font-size: .84rem; line-height: 1.5;
  color: var(--tx-on-dark-3);
}