/* ============================================================
   ML Endurance — site.css
   Shared styles loaded on every page.
   ============================================================ */

:root{
  --ink: #0e1426;
  --ink-elevated: #161d36;
  --cream: #f8f5ef;
  --cream-2: #f0ece3;

  --line-dark: rgba(255,255,255,0.10);
  --line-dark-strong: rgba(255,255,255,0.18);
  --line-light: rgba(14,20,38,0.08);
  --line-light-strong: rgba(14,20,38,0.16);
  --ink-soft: rgba(14,20,38,.65);

  --muted-dark: rgba(255,255,255,0.65);
  --muted-darker: rgba(255,255,255,0.45);

  --brand-purple: #8b2fc9;
  --brand-red:    #d4294a;
  --brand-orange: #f47b20;
  --brand-amber:  #f5a623;
  --grad: linear-gradient(90deg, #8b2fc9 0%, #d4294a 45%, #f47b20 80%, #f5a623 100%);

  --radius-sect: 48px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-card: 0 30px 60px -25px rgba(14,20,38,.25), 0 8px 18px -10px rgba(14,20,38,.18);
  --shadow-pop: 0 50px 90px -30px rgba(139,47,201,.35), 0 20px 40px -15px rgba(244,123,32,.25);

  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* Base */
*,*::before,*::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font);
  background: var(--ink);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection{ background: var(--brand-red); color:#fff; }
img{ display:block; max-width:100%; }
button{ font-family: inherit; }

/* Layout primitives */
.container{ width: min(1180px, 92%); margin: 0 auto; }
section{ position: relative; }
main{ position:relative; z-index: 2; }

/* Shared effects */
.grid-bg{
  position: absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 50%, transparent 80%);
}
.orb{
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events:none;
  opacity: .55;
}
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none; }

/* Buttons */
.btn-grad{
  background: var(--grad); color:#fff; border:0; cursor:pointer;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
  box-shadow: 0 14px 30px -10px rgba(212,41,74,.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration: none; display:inline-flex; align-items:center; gap:6px;
  font-family: inherit;
}
.btn-grad:hover{ transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(212,41,74,.7); filter: brightness(1.05); }

/* ============ PRIX — CENTS EN SUPERSCRIPT (style Walmart) ============
   Usage : <div class="price">79<span class="cents">99</span>$<small>/mois</small></div>
   - 0.36em → ≈ 23px sur un prix de 64px, ≈ 31px sur un prix de 86px, etc.
   - vertical-align: top + margin-top POSITIF → repousse la box des cents
     vers le bas pour que le SOMMET des chiffres "99" s'aligne avec le
     SOMMET des chiffres "189" (alignement de cap-height). Sans cet ajustement,
     les cents (plus petits) montent naturellement au-dessus de la cap-height
     parce que leur propre ascendeur est plus petit que celui du parent.
   - align-self: flex-start → indispensable pour .plan-card-price d'index.html
     qui est un flex container avec align-items: baseline (sinon les cents
     s'alignent à la baseline, donc tout en bas, au lieu d'en haut).
   - Hérite du gradient/couleur du parent (.price, .plan-card-price, .pricec)
*/
.cents{
  font-size: 0.36em;
  vertical-align: top;
  align-self: flex-start; /* Pour parents flex (.plan-card-price) */
  margin-top: 0.4em; /* Positif → descend les cents pour aligner leurs sommets */
  margin-left: 0px;
  margin-right: 1px;
  font-weight: 800;
  letter-spacing: -.02em;
  display: inline-block;
  line-height: 1;
}

/* ============ TOOLTIP UNIVERSEL (hover desktop + tap mobile via :focus) ============
   Usage :
     <span class="ml-tip" tabindex="0">
       Mot-clé
       <span class="ml-tip-icon" aria-hidden="true">?</span>
       <span class="ml-tip-bubble" role="tooltip">Texte d'explication</span>
     </span>
   - hover (souris) → la bulle apparaît
   - tap (mobile) → focus déclenche l'apparition grâce à tabindex
   - tap ailleurs → focus perdu, bulle disparaît
*/
.ml-tip{
  /* display: inline → le contenu wrap NATURELLEMENT avec le texte autour.
     Avant on utilisait inline-flex avec gap, ce qui faisait que les morceaux
     (strong + texte + icône) étaient traités comme des flex items séparés,
     créant des sauts de ligne bizarres dans les colonnes étroites. */
  display: inline;
  position: relative;
  cursor: help;
  outline: none;
  border-bottom: 1px dashed currentColor;
  border-bottom-color: rgba(14,20,38,.25);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.ml-tip:hover, .ml-tip:focus, .ml-tip:focus-visible{ border-bottom-color: var(--brand-red); }
.ml-tip-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-orange); color: #fff;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 9.5px; line-height: 1;
  flex-shrink: 0;
  margin-left: 5px;
  vertical-align: middle;
  transition: background .2s ease, transform .2s ease;
}
.ml-tip:hover .ml-tip-icon, .ml-tip:focus .ml-tip-icon{
  background: var(--brand-red);
  transform: scale(1.1);
}
.ml-tip-bubble{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 11px 14px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 10px;
  box-shadow: 0 18px 40px -10px rgba(14,20,38,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  white-space: normal;
  text-align: left;
}
.ml-tip-bubble::after{
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.ml-tip:hover .ml-tip-bubble,
.ml-tip:focus .ml-tip-bubble,
.ml-tip:focus-within .ml-tip-bubble{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px){
  .ml-tip-bubble{ font-size: 12px; max-width: min(240px, 75vw); }
}
/* Variante « petit i » dans les stats de coach : juste l'icône (pas de soulignement),
   et on réinitialise le -webkit-text-fill-color (sinon l'icône hérite du dégradé
   transparent du chiffre .cs-num et le « i » devient invisible). */
.cs-tip{ border-bottom: none; padding-bottom: 0; cursor: pointer; }
.cs-tip .ml-tip-icon{ -webkit-text-fill-color: #fff; width: 14px; height: 14px; font-size: 9px; margin-left: 5px; }
/* Stat de DROITE (dernière colonne) : la bulle s'ouvre vers la gauche pour ne pas
   sortir de la carte / de l'écran sur mobile. Couvre les 2 markups (index `> div`, equipe `> .s`). */
.coach-stats > div:last-child .cs-tip .ml-tip-bubble,
.coach-stats > .s:last-child .cs-tip .ml-tip-bubble{ left: auto; right: -6px; transform: translateX(0) translateY(4px); }
.coach-stats > div:last-child .cs-tip:hover .ml-tip-bubble,
.coach-stats > div:last-child .cs-tip:focus .ml-tip-bubble,
.coach-stats > div:last-child .cs-tip:focus-within .ml-tip-bubble,
.coach-stats > .s:last-child .cs-tip:hover .ml-tip-bubble,
.coach-stats > .s:last-child .cs-tip:focus .ml-tip-bubble,
.coach-stats > .s:last-child .cs-tip:focus-within .ml-tip-bubble{ transform: translateX(0) translateY(0); }
.coach-stats > div:last-child .cs-tip .ml-tip-bubble::after,
.coach-stats > .s:last-child .cs-tip .ml-tip-bubble::after{ left: auto; right: 14px; transform: translateX(0); }

/* ============ UNIFIED SITE HEADER ============ */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: padding .35s ease, background .35s ease,
              backdrop-filter .35s ease, border-color .35s ease,
              box-shadow .35s ease;
  /* Toutes les tailles ×1.20 par rapport à la version précédente (+20%) */
  padding: 17px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
  opacity: 0; transition: opacity .35s ease;
}
.site-header.scrolled{
  padding: 10px 0;
  background: rgba(14,20,38,.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}
.site-header.scrolled::before{ opacity: 1; }

.site-header-inner{
  width: 100%;
  padding: 0 clamp(20px, 2.5vw, 44px);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.site-brand{
  display: inline-flex; align-items: center; text-decoration: none;
  justify-self: start;
}
.site-brand-img{
  height: 58px; width: auto; display: block;
  transition: height .35s cubic-bezier(.2,.7,.2,1);
  background: transparent;
}
.site-header.scrolled .site-brand-img{ height: 42px; }

.site-nav{ display: flex; justify-content: center; gap: 0; }
.site-nav a{
  position: relative;
  display: inline-block;
  padding: 12px 13px;
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-radius: 8px;
  transition: padding .35s cubic-bezier(.2,.7,.2,1),
              font-size .35s cubic-bezier(.2,.7,.2,1),
              color .2s ease;
  line-height: 1;
}
.site-header.scrolled .site-nav a{ padding: 10px 12px; font-size: 14px; }
.site-nav a:hover{ color: #fff; }
.site-nav a::after{
  content: ""; position: absolute;
  left: 17px; right: 17px; bottom: 6px;
  height: 1.5px; border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              left .35s cubic-bezier(.2,.7,.2,1),
              right .35s cubic-bezier(.2,.7,.2,1),
              bottom .35s cubic-bezier(.2,.7,.2,1);
}
.site-header.scrolled .site-nav a::after{ left: 14px; right: 14px; bottom: 5px; }
.site-nav a:hover::after,
.site-nav a.active::after{ transform: scaleX(1); }
.site-nav a.active{ color: #fff; }

.site-actions{
  display: flex; align-items: center; gap: 19px;
  justify-self: end;
  transition: gap .35s cubic-bezier(.2,.7,.2,1);
}
.site-header.scrolled .site-actions{ gap: 17px; }

.site-socials{ display: flex; align-items: center; gap: 2px; color: rgba(255,255,255,.65); }
.site-socials a{
  display: inline-grid; place-items: center;
  width: 41px; height: 41px; border-radius: 999px;
  color: inherit;
  transition: width .35s cubic-bezier(.2,.7,.2,1),
              height .35s cubic-bezier(.2,.7,.2,1),
              background .2s ease, color .2s ease, transform .2s ease;
}
.site-header.scrolled .site-socials a{ width: 35px; height: 35px; }
.site-socials a:hover{ background: rgba(255,255,255,.1); color: #fff; }
.site-socials svg{
  width: 18px; height: 18px;
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1);
}
.site-header.scrolled .site-socials svg{ width: 16px; height: 16px; }

.site-cta{
  background: var(--grad); color: #fff;
  padding: 13px 25px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; letter-spacing: .005em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 24px -6px rgba(212,41,74,.55);
  transition: padding .35s cubic-bezier(.2,.7,.2,1),
              font-size .35s cubic-bezier(.2,.7,.2,1),
              transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.site-header.scrolled .site-cta{ padding: 12px 22px; font-size: 13px; gap: 8px; }
.site-cta:hover{
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 12px 30px -8px rgba(212,41,74,.7);
}

.site-burger{
  display: none;
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .2s ease;
  font-family: inherit;
}
.site-burger:hover{ background: rgba(255,255,255,.14); }
.site-burger svg{ width: 22px; height: 22px; }

.site-mobile-menu{
  display: none;
  position: absolute; top: 100%; left: 12px; right: 12px;
  margin-top: 8px;
  background: rgba(14,20,38,.96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 14px;
  flex-direction: column; gap: 2px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.site-mobile-menu.open{ display: flex; }
.site-mobile-menu a{
  display: block;
  padding: 12px 16px;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease;
}
.site-mobile-menu a:hover{ background: rgba(255,255,255,.06); color: #fff; }
.site-mobile-menu a.active{ color: #fff; background: rgba(255,255,255,.04); }
.site-mobile-menu .site-mobile-socials{
  display: flex; justify-content: center; gap: 6px;
  padding: 12px 0 6px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}
.site-mobile-menu .site-mobile-socials a{
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: 999px;
}
.site-mobile-menu .site-mobile-cta{
  margin-top: 6px;
  background: var(--grad); color: #fff; text-align: center;
  font-weight: 700; padding: 14px 16px;
  box-shadow: 0 8px 22px -8px rgba(212,41,74,.55);
}
.site-mobile-menu .site-mobile-cta:hover{ background: var(--grad); color: #fff; }

@media (max-width: 1024px){
  .site-nav{ display: none; }
  .site-socials{ display: none; }
  .site-cta{ display: none; }
  .site-burger{ display: inline-flex; }
  .site-header-inner{ grid-template-columns: 1fr auto; }
}

body.has-top-pad{ padding-top: 104px; }

/* ============================================================
   AURORA LAYER — scroll-driven brand blobs for dark sections
   Usage:
     <section class="<existing> has-aurora">
       <div class="aurora-layer" aria-hidden="true">
         <span class="blob-c"></span>
       </div>
       ...content...
     </section>
   Motion is driven by scroll position (JS sets --scroll on each
   layer, range roughly -1..+1 as the section passes the viewport).
   Each blob has its own parallax multiplier → the 3 blobs ondulate
   at different speeds top→bottom for a continuous, crafted feel.
   ============================================================ */
.has-aurora{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aurora-layer{
  --scroll: 0;
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 115% 105% at 50% 50%, #000 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 115% 105% at 50% 50%, #000 65%, transparent 100%);
}
.aurora-layer::before,
.aurora-layer::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  -webkit-filter: blur(90px);
  will-change: transform;
}
/* Blob A — purple, top-left, slow downward parallax */
.aurora-layer::before{
  width: 38%; aspect-ratio: 1;
  top: -8%; left: -6%;
  background: radial-gradient(circle, rgba(139,47,201,.6) 0%, transparent 65%);
  opacity: .55;
  transform: translate3d(0, calc(var(--scroll) * 60px), 0);
}
/* Blob B — orange, bottom-right, faster opposite parallax */
.aurora-layer::after{
  width: 34%; aspect-ratio: 1;
  bottom: -8%; right: -6%;
  background: radial-gradient(circle, rgba(244,123,32,.6) 0%, transparent 65%);
  opacity: .45;
  transform: translate3d(0, calc(var(--scroll) * -90px), 0);
}
/* Blob C — red, mid, slight horizontal drift + medium vertical */
.aurora-layer .blob-c{
  position: absolute;
  width: 28%; aspect-ratio: 1;
  top: 38%; left: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,41,74,.5) 0%, transparent 65%);
  filter: blur(80px);
  -webkit-filter: blur(80px);
  opacity: .4;
  transform: translate3d(calc(var(--scroll) * 10px), calc(var(--scroll) * 120px), 0);
  will-change: transform;
  display: block;
}

@media (prefers-reduced-motion: reduce){
  .aurora-layer::before,
  .aurora-layer::after,
  .aurora-layer .blob-c{
    transform: none !important;
  }
}

/* ============================================================
   BOTTOM SEQUENCE — FAQ → CTA → FOOTER on unified dark bg
   Three sections feel like one continuous composition.
   ============================================================ */

/* Common eyebrow used in faq-2 / cta-2 (overrides page-level .eyebrow) */
.faq-2 .eyebrow,
.cta-2 .eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.55);
}
.faq-2 .eyebrow .bar,
.cta-2 .eyebrow .bar{
  width: 22px; height: 1px;
  background: rgba(255,255,255,.35);
  display: inline-block;
}
.faq-2 .eyebrow .spark,
.cta-2 .eyebrow .spark{
  display: inline-block; width: 8px; height: 8px;
  background: var(--grad); border-radius: 2px;
  transform: rotate(45deg);
}

/* ============ FAQ — 2-col asymmetric (head left, list right) ============ */
.faq-2{
  background: var(--ink);
  color: #fff;
  padding: 120px 0 60px;
  position: relative;
}
.faq-2 .container{ max-width: 1140px; }
.faq-2-grid{
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 80px;
  align-items: start;
}
.faq-2-head{
  text-align: left;
  margin-bottom: 0;
  position: sticky;
  top: 110px;
}
.faq-2 h2{
  font-weight: 700; margin: 16px 0 18px;
  font-size: clamp(30px, 3.8vw, 48px);
  letter-spacing: -.035em; line-height: 1.02;
  color: #fff;
}
.faq-2 h2 .accent{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faq-2-head p{
  color: rgba(255,255,255,.55); font-size: 14.5px; line-height: 1.65;
  max-width: 38ch; margin: 0 0 26px; font-weight: 400;
}
.faq-2-full-link{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700; font-size: 13px; text-decoration: none;
  letter-spacing: .005em;
  box-shadow: 0 12px 26px -10px rgba(212,41,74,.55);
  transition: transform .2s ease, filter .25s ease, box-shadow .25s ease, gap .25s ease;
}
.faq-2-full-link:hover,
.faq-2-full-link:focus-visible{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 32px -10px rgba(212,41,74,.65);
  gap: 12px;
  outline: none;
}
.faq-2-full-link svg{ transition: transform .25s ease; }
.faq-2-full-link:hover svg{ transform: translateX(2px); }
@media (max-width: 980px){
  .faq-2-grid{ grid-template-columns: 1fr; gap: 36px; }
  .faq-2-head{ position: static; text-align: center; }
  .faq-2-head p{ max-width: 56ch; margin-left: auto; margin-right: auto; }
  /* Bouton "Voir la FAQ" centré sur mobile */
  .faq-2-full-link{ margin: 0 auto; }
}
.faq-2-list{ }
.faq-2-list details{
  border-top: 1px solid rgba(255,255,255,.08);
}
.faq-2-list details:last-of-type{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-2-list summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; padding: 26px 0;
  font-weight: 500; font-size: 16.5px;
  letter-spacing: -.005em; line-height: 1.4;
  color: rgba(255,255,255,.85);
  transition: color .25s ease;
}
.faq-2-list summary::-webkit-details-marker{ display: none; }
.faq-2-list summary:hover{ color: #fff; }
.faq-2-list details[open] summary{ color: #fff; }
.faq-2-list summary .icon{
  flex-shrink: 0; width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.6);
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              background .25s ease, border-color .25s ease, color .25s ease;
}
.faq-2-list summary:hover .icon{
  border-color: rgba(255,255,255,.4); color: #fff;
}
.faq-2-list details[open] summary .icon{
  /* Dégradé de marque complet (mauve → rouge → orange → ambre), cohérent avec
     toutes les sections FAQ du site, y compris la page /faq. */
  background: var(--grad);
  border-color: transparent; color: #fff;
}
.faq-2-list summary .icon svg{
  width: 12px; height: 12px;
  transition: transform .25s ease;
}
/* Rotate uniquement le SVG (le "+" devient "×") — le fond gradient reste horizontal */
.faq-2-list details[open] summary .icon svg{
  transform: rotate(45deg);
}
.faq-2-list details p{
  margin: 0 0 28px; padding-right: 60px;
  font-size: 14.5px; line-height: 1.75;
  color: rgba(255,255,255,.6); font-weight: 400;
}
.faq-2-list details p a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.faq-2-list details p em{ color: rgba(255,255,255,.85); font-style: italic; }
.faq-2-foot{ text-align: center; margin-top: 48px; }
.faq-2-foot a{
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.7);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  transition: color .2s ease, gap .25s ease;
}
.faq-2-foot a svg{
  transition: transform .25s ease;
}
.faq-2-foot a:hover{ color: #fff; gap: 14px; }
.faq-2-foot a:hover svg{ transform: translateX(2px); }

/* ============ FINAL CTA — focused, no photo ============ */
.cta-2{
  background: var(--ink);
  color: #fff;
  padding: 100px 0 110px;
  position: relative; overflow: hidden;
  text-align: center;
}
.cta-2::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 70% at 50% 50%, rgba(139,47,201,.18), transparent 60%),
    radial-gradient(70% 90% at 50% 100%, rgba(244,123,32,.12), transparent 60%);
}
.cta-2 .container{
  position: relative; z-index: 1;
  max-width: 720px;
}
.cta-2 .eyebrow{ margin-bottom: 22px; }
.cta-2 h2{
  font-weight: 700; margin: 0 auto 22px;
  font-size: clamp(38px, 5.6vw, 72px);
  letter-spacing: -.035em; line-height: 1;
  max-width: 14ch;
}
.cta-2 h2 .accent{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-2-lead{
  color: rgba(255,255,255,.6);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.55; max-width: 48ch;
  margin: 0 auto 36px; font-weight: 400;
}
.cta-2-actions{
  display: inline-flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 14px;
}
.cta-2-primary{
  background: var(--grad); color: #fff; border: 0;
  padding: 18px 32px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 15.5px; font-family: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 24px 50px -22px rgba(212,41,74,.7),
              0 0 0 1px rgba(255,255,255,.1) inset;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.cta-2-primary:hover{
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 30px 60px -22px rgba(212,41,74,.85),
              0 0 0 1px rgba(255,255,255,.14) inset;
}
.cta-2-secondary{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 22px; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.cta-2-secondary:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.32);
  color: #fff;
  transform: translateY(-2px);
}
.cta-2-trust{
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 16px;
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4); font-weight: 500;
}
.cta-2-trust span{ display: inline-flex; align-items: center; gap: 8px; }
.cta-2-trust span + span::before{
  content: '·'; color: rgba(255,255,255,.25);
  margin-right: 8px;
}
/* Mobile : la ligne de réassurance passe en liste verticale alignée à gauche.
   Les séparateurs « · » (pensés pour une seule ligne) se retrouvaient flottants
   au centre quand le texte passait sur plusieurs lignes. On empile chaque item
   sur sa propre ligne, aligné à gauche, avec une petite puce dégradée en tête. */
@media (max-width: 600px){
  .cta-2-trust{
    display: grid;
    grid-template-columns: auto auto;    /* 2 colonnes */
    grid-template-rows: auto auto;        /* 2 rangées → grille 2×2 */
    grid-auto-flow: column;               /* remplit colonne par colonne : items courts à gauche, longs à droite (pas de chevauchement) */
    justify-content: center;              /* bloc 2×2 centré (comme les boutons au-dessus) ; items restent alignés à gauche dans leur cellule */
    gap: 12px 28px;
    text-align: left;
  }
  .cta-2-trust span + span::before{ display: none; }   /* plus de séparateur inline */
  .cta-2-trust .dot{
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55);     /* petit point blanc (comme avant) */
    flex-shrink: 0;
  }
}

/* ============ FOOTER — minimal 3-column ============ */
.footer-2{
  background: var(--ink);
  color: rgba(255,255,255,.6);
  padding: 60px 0 28px;
  position: relative;
}
.footer-2::before{
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 92%); height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent);
}
.footer-2 .container{ max-width: 1180px; }
.footer-2-cols{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px 40px;
  margin-bottom: 48px;
}
.footer-2-brand{ }
.footer-2-brand-row{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; color: #fff;
}
.footer-2-brand-row img{ height: 36px; width: auto; }
.footer-2-brand-row strong{
  display: block; font-weight: 700; font-size: 15px;
  color: #fff; line-height: 1.2;
}
.footer-2-brand-row strong .accent{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-2-brand-row small{
  display: block; margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4); font-weight: 500;
}
.footer-2-tagline{
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,.5);
  font-weight: 400; max-width: 32ch;
  margin: 0 0 22px;
}
.footer-2-tagline strong{
  color: rgba(255,255,255,.78); font-weight: 600;
}
.footer-2-brand .footer-2-socials{
  display: flex; gap: 8px;
}
/* Colonnes secondaires du footer (Pages / Ressources / Légal) — tout centré
   pour que chaque lien apparaisse aligné sous le titre de sa colonne. */
.footer-2-col{
  text-align: center;
}
.footer-2-col h5{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.45);
  margin: 6px 0 20px;
}
.footer-2-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 13px;
  align-items: center;
}
.footer-2-list a{
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: color .2s ease;
  display: inline-block;
}
.footer-2-list a:hover{ color: #fff; }
.footer-2-contact-email{
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  margin: 0 0 18px;
  transition: color .2s ease;
  word-break: break-all;
}
.footer-2-contact-email:hover{ color: #fff; }
.footer-2-contact-email svg{ width: 14px; height: 14px; flex-shrink: 0; }
.footer-2-socials{ display: flex; gap: 6px; }
.footer-2-socials a{
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-2-socials a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.footer-2-socials svg{ width: 14px; height: 14px; }
.footer-2-bottom{
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11.5px; color: rgba(255,255,255,.35);
  font-weight: 500;
}
.footer-2-bottom .made-in{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-2-portal{
  color: rgba(255,255,255,.42);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: color .2s ease, border-color .2s ease;
}
.footer-2-portal:hover{
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.42);
}
.footer-2-portal:focus-visible{
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 4px;
}

@media (max-width: 900px){
  .footer-2-cols{ grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .footer-2-brand{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .faq-2{ padding: 80px 0 50px; }
  .cta-2{ padding: 70px 0 90px; }
  .footer-2{ padding: 48px 0 22px; }
  .faq-2-head{ margin-bottom: 36px; }
  .faq-2-list summary{ font-size: 15px; padding: 22px 0; gap: 18px; }
  .faq-2-list details p{ padding-right: 0; }

  /* Footer entièrement centré sur mobile */
  .footer-2-cols{ grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; text-align: center; }
  .footer-2-brand{ grid-column: auto; display: flex; flex-direction: column; align-items: center; }

  /* Logo + texte empilés en colonne sur mobile, tout centré.
     Le logo est sur sa propre ligne en haut, puis "ML Endurance" en dessous,
     puis "Coaching triathlon · Québec" — chaque ligne centrée. */
  .footer-2-brand-row{
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-2-brand-row img{ height: 42px; }     /* Légèrement plus grand car seul sur sa ligne */
  .footer-2-brand-row strong{
    font-size: 16px;   /* matche le style desktop, juste centré */
  }

  .footer-2-tagline{ margin-left: auto; margin-right: auto; }
  .footer-2-contact-email{ margin-left: auto; margin-right: auto; word-break: break-word; }
  .footer-2-brand .footer-2-socials{ justify-content: center; }
  .footer-2-col{ display: flex; flex-direction: column; align-items: center; }
  .footer-2-col h5{ margin-bottom: 14px; }
  .footer-2-list{ align-items: center; }
  .footer-2-bottom{ flex-direction: column; align-items: center; gap: 10px; text-align: center; }

  .cta-2-actions{ flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
  .cta-2-primary, .cta-2-secondary{ justify-content: center; }
}

/* ============================================================
   BANNIÈRE PARTENAIRES — partagée entre /equipe et / (accueil).
   Mise en avant des partenaires avec tuiles + logos prominents.
   ============================================================ */
.partners-banner-inline{
  /* Espace en haut équilibré pour matcher l'espace en bas (padding-bottom de la
     section ~110-120px). Avant : 50px → asymétrique. */
  margin-top: 90px;
}
.pb-card{
  background: linear-gradient(135deg, rgba(139,47,201,.05), rgba(244,123,32,.08));
  border: 1px solid rgba(244,123,32,.25);
  border-radius: 22px;
  padding: 36px 40px 32px;
  display: flex; flex-direction: column; gap: 26px;
}
.pb-head{
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.pb-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-red); font-weight: 700;
}
.pb-eyebrow .bar{ width: 22px; height: 1px; background: var(--brand-red); display: inline-block; }
.pb-eyebrow .spark{ display: inline-block; width: 10px; height: 10px; background: var(--grad); border-radius: 2px; transform: rotate(45deg); }
.pb-head h2{
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: -.02em; line-height: 1.15;
  margin: 0;
  color: #0e1426;
}
.pb-head h2 .accent{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Sous-titre qui explicite l'avantage pour les athlètes ML */
.pb-sub{
  margin: 2px 0 0;
  max-width: 56ch;
  font-size: 14px; line-height: 1.55;
  color: rgba(14,20,38,.65);
  font-weight: 400;
}
.pb-sub strong{ color: var(--brand-red); font-weight: 700; }
.pb-partners-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* Modifier pour 3 partenaires (utilisé sur index.html). On reste en 2 colonnes
   en dessous de 1024px pour ne pas trop serrer les tuiles. La règle 1fr du
   media query 700px reprend ensuite pour le mobile. */
.pb-partners-grid--three{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px){
  .pb-partners-grid--three{ grid-template-columns: 1fr 1fr; }
}
.pb-partner-tile{
  position: relative;        /* PR : pour positionner le badge "Avantage" en haut-droite */
  background: #fff;
  border: 1px solid rgba(14,20,38,.08);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex; align-items: center; gap: 18px;
  text-decoration: none;
  color: #0e1426;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 14px -8px rgba(14,20,38,.10);
}
.pb-partner-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(14,20,38,.20);
  border-color: rgba(14,20,38,.14);
}
/* Badge « Avantage ML » des tuiles partenaires RETIRÉ (trop chargé — il chevauchait
   le nom du partenaire sur mobile, et la bannière dit déjà « avantages exclusifs »). */
.pb-partner-tile::after{ content: none; }
.pb-partner-logo-box{
  width: 88px; height: 88px;
  border-radius: 16px;
  background: #f0ece3;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(14,20,38,.06);
  position: relative;
}
.pb-partner-logo-box.is-grad{
  background: var(--grad);
  border-color: transparent;
}
.pb-partner-logo-text{
  font-family: var(--font-mono); font-weight: 800; font-size: 26px;
  color: #0e1426; letter-spacing: -.02em;
}
.pb-partner-logo-box.is-grad .pb-partner-logo-text{ color: #fff; }
.pb-partner-logo-serif{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: 36px;
  letter-spacing: -.04em;
}
.pb-partner-logo-img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  background: #fff;
}
.pb-partner-info{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pb-partner-info strong{
  font-weight: 700; font-size: 17px; letter-spacing: -.015em;
  color: #0e1426;
}
.pb-partner-info small{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(14,20,38,.6); font-weight: 600; margin-top: 4px;
}
.pb-footer{
  display: flex; justify-content: center;
  margin-top: 4px;
}
@media (max-width: 700px){
  .pb-card{ padding: 28px 22px; }
  .pb-partners-grid{ grid-template-columns: 1fr; gap: 12px; }
  .pb-partner-tile{ padding: 18px; gap: 14px; }
  .pb-partner-logo-box{ width: 72px; height: 72px; }
  .pb-partner-logo-text{ font-size: 22px; }
  .pb-partner-logo-serif{ font-size: 30px; }
}