/* ===========================================================================
   Site vitrine PartnerProgress v2 — feuille partagée par les 7 pages.

   Aucune ressource distante : police auto-hébergée, images locales, rien
   n'appelle un CDN (ni Google Fonts, ni analytics).

   Couleurs sombres reprises telles quelles de lib/core/theme/pf_colors.dart
   (univers "émotion" : Splash/Onboarding/Connexion/Premium). Les tokens
   clairs (univers "quotidien" de l'app) sont ajoutés ici pour les sections
   claires que ce site introduit — si un token change côté application, le
   répercuter ici.
   =========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Sombre (émotion) --- */
  --bg: #0a0812;
  --bg-deep: #050308;
  --bg-soft: #0d0a18;
  --surface: #141020;
  --border: #241d38;
  --border-soft: #1c1730;
  --text: #ffffff;
  --text-2: #c9c3da;
  --text-3: #8b84a3;
  --violet: #7457f1;
  --violet-light: #a78bfa;
  --grad-start: #2c67ed;
  --grad-end: #7d60ec;
  --signature: linear-gradient(135deg, var(--grad-start), var(--grad-end));

  /* --- Clair (quotidien) --- */
  --bg-light: #fafafc;
  --surface-light: #ffffff;
  --border-light: #e7e3f2;
  --text-light: #14101f;
  --text-light-2: #6e6784;
  --chip-bg: #f1f3fe;
  --violet-deep: #4f48f3;

  --wrap: 1180px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.grad-text {
  background-image: var(--signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Navigation (partagée, avec état actif par page) --------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 8, 18, .78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border-soft); background: rgba(10, 8, 18, .93); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 32px; height: auto; }
.brand-word { font-size: 16.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  text-decoration: none; transition: color .2s ease;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -27px;
  height: 2px; background: var(--signature); border-radius: 2px;
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px;
  background: var(--signature); color: #fff;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none; flex-shrink: 0;
}

/* Bouton hamburger + menu déroulant : n'existent qu'en dessous de 1100px, là
   où .nav-links disparaissait (rien ne permettait plus de naviguer). Au-dessus
   de 1100px, le bouton et la copie du CTA dans le menu sont masqués : le
   header desktop reste strictement identique. */
.nav-burger, .nav-cta-menu { display: none; }
@media (max-width: 1100px) {
  .nav-inner { justify-content: space-between; }
  .nav-burger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; flex-shrink: 0; margin-right: -8px;
    background: transparent; border: 0; border-radius: 12px; cursor: pointer; color: var(--text);
  }
  .nav-burger span {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-inner { position: relative; }
  .nav.is-open { background: var(--bg); border-bottom-color: var(--border-soft); }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 24px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .nav.is-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .nav-links a { padding: 15px 2px; font-size: 16px; border-bottom: 1px solid var(--border-soft); }
  .nav-links a[aria-current="page"] { color: var(--violet-light); font-weight: 700; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links .nav-cta-menu {
    display: flex; justify-content: center; margin-top: 18px;
    padding: 13px 20px; border: 0; font-size: 14.5px; color: #fff;
  }
}
@media (min-width: 481px) { .nav-links .nav-cta-menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-burger span, .nav-links { transition: none; }
}
/* Sous ~420px, logo + bouton (tous deux flex-shrink:0 ci-dessus, volontaire
   pour ne jamais les faire rétrécir sur desktop/tablette) ne tiennent plus
   côte à côte sans déborder — resserré ici plutôt que de laisser l'un des
   deux rétrécir de façon incontrôlée. */
@media (max-width: 480px) {
  .nav-inner { gap: 10px; }
  .brand-word { font-size: 14px; }
  /* Le CTA quitte le header (logo + hamburger seulement) et reste accessible
     en bas du menu déroulant (.nav-cta-menu). */
  .nav-inner > .nav-cta { display: none; }
}

/* --- Badges de téléchargement --------------------------------------------
   Volontairement des <span>, jamais des liens : tant que l'application n'est
   pas publiée, un lien mènerait dans le vide. */

.stores { display: flex; flex-wrap: wrap; gap: 14px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 16px;
  border: 1px solid #2f2846; border-radius: 12px;
  background: #0b0912;
}
.store > svg { width: 26px; height: 26px; flex-shrink: 0; fill: #fff; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-txt small { font-size: 10px; letter-spacing: .04em; color: #cfc9de; }
.store-txt strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.soon {
  align-self: center; margin-left: 4px;
  padding: 4px 9px; border-radius: 6px;
  background: var(--signature);
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
}

/* --- Bannière de tête (héros interne, pages secondaires) ------------------ */

.page-hero { position: relative; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--bg) 4%, rgba(10, 8, 18, .93) 34%, rgba(10, 8, 18, .3) 78%, rgba(10, 8, 18, .55) 100%),
    linear-gradient(to bottom, rgba(10, 8, 18, .55) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}
.page-hero .wrap { position: relative; padding-block: clamp(60px, 8vw, 100px); }
.page-hero-copy { max-width: 620px; }
.page-hero .sec-label { color: var(--violet-light); }

/* --- Grand héros (Accueil) ------------------------------------------------ */

/* min-height en PX FIXE (ni vh ni vw) — c'est le choix important ici : la
   quantité de texte dans .hero-copy diffère d'une page à l'autre (Coachs a un
   surtitre + une 2e ligne que l'Accueil n'a pas), et son retour à la ligne
   varie de façon non linéaire selon la LARGEUR (ex. Coachs : 596px à 950px,
   752px à 1300px, 738px à 357px) — ni un clamp() lié à vw ni un min-height en
   vh ne peuvent suivre cette courbe (un vh dépend en plus de la hauteur de
   fenêtre, sans rapport avec ce qui fait varier le texte ici, ce qui aurait
   recréé l'écart sur une fenêtre simplement plus basse). Une valeur fixe est
   le seul réglage qui garantisse la même hauteur de Hero quelle que soit la
   fenêtre : 760px = le plateau le plus haut observé pour Coachs (752px,
   desktop 1300-1500px) + une petite marge, vérifié ne jamais être dépassé de
   357px à 1920px (retour du 02/10). Partagé par toutes les pages utilisant
   .hero : l'Accueil, plus court, est simplement étiré jusqu'à cette même
   référence, pour une jonction avec la section suivante toujours identique. */
.hero { position: relative; overflow: hidden; min-height: 760px; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 3.3%; }
/* Assombrit seulement la zone du texte (~20% gauche) puis s'efface vite — la
   photo doit rester lumineuse et chaude sur la majorité de sa surface, jamais
   un film sombre uniforme sur toute l'image (retour explicite du 30/09).
   Retour du 02/10 : légèrement renforcé et étendu (mêmes paliers, valeurs un
   peu plus fortes) — certaines photos de Hero (Coachs) ont une zone claire
   à cet endroit que l'ancien voile ne couvrait pas assez ; traitement unique
   et partagé, appliqué à l'identique sur toutes les pages utilisant .hero,
   jamais une solution différente par page. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 2%, rgba(10, 8, 18, .74) 22%, rgba(10, 8, 18, .34) 42%, rgba(10, 8, 18, .1) 58%, transparent 74%);
}
.hero .wrap { position: relative; padding-block: clamp(64px, 9vw, 116px); }
/* 440px (pas 560) : garde le titre/paragraphe clairement dans la zone sombre
   à gauche de la photo, sans jamais atteindre le visage de la femme (vérifié
   à 1024, 1280, 1440, 1920px — la marge la plus juste est à 1024px). */
.hero-copy { max-width: 440px; }

.hero-mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.hero-mark img { width: 34px; }
.hero-mark span { font-size: 14px; font-weight: 800; letter-spacing: .13em; }

h1 {
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance;
}
/* Couleur éclaircie (quasi blanche) + ombre portée, partagées par les deux
   Heroes (Accueil et Coachs) — le voile .hero-bg::after seul puis l'ombre
   seule ne suffisaient toujours pas sur certaines zones très claires de la
   photo (retour du 02/10, confirmé deux fois par capture réelle) ; jamais un
   traitement propre à une seule page — ajouté ici, à la base, donc
   automatiquement identique partout. */
.hero-lead { margin: 0 0 22px; font-size: clamp(1rem, 1.35vw, 1.08rem); color: var(--text); max-width: 42ch; text-shadow: 0 0 2px rgba(5, 3, 8, .95), 0 0 8px rgba(5, 3, 8, .85), 0 2px 18px rgba(5, 3, 8, .85); }

.hero-caption {
  position: absolute; top: 54px; right: 0;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 15px; color: rgba(255,255,255,.75); text-align: center; line-height: 1.35;
}

.hero-feature-card {
  /* top seul (jamais de transform ici) : la classe .reveal partagée par cet
     élément fixe transform:none une fois révélé (.reveal.is-in), ce qui
     annulerait silencieusement un translateY — top:% reste donc la seule
     valeur qui contrôle réellement la position verticale. Calé au milieu du
     torse de l'homme (retour du 30/09 : encore un peu haut). right:0 par
     défaut (jamais négatif ici) : entre 1150 et ~1240px, .wrap occupe déjà
     toute la largeur du .hero (pas encore plafonné à --wrap), donc un léger
     right négatif dépasserait le bord du héros — qui a overflow:hidden — et
     rognerait le coin de la carte. Le décalage vers la droite demandé n'est
     donc appliqué qu'à partir de 1240px, où il reste toujours sous cette
     marge (vérifié : marge réelle ≥22px à 1240px pour un décalage de 19px). */
  position: absolute; right: 0; top: 56%;
  background: rgba(8, 6, 14, .76); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 16px 22px; display: flex; flex-direction: column; gap: 11px;
}
@media (min-width: 1240px) { .hero-feature-card { right: -19px; } }
.hfc-row { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.hfc-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.hfc-ico svg { width: 14px; height: 14px; stroke: #fff; }

@media (max-width: 1150px) { .hero-feature-card, .hero-caption { display: none; } }

/* Badge flottant "Coach certifié" sur la photo (section Coachs) — bleu
   imposé (Product Book §7.8), jamais le dégradé signature réservé au CTA. */
.coach-badge {
  position: absolute; right: 20px; bottom: 20px;
  background: #fff; border-radius: 14px; padding: 12px 16px 12px 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.coach-badge-ico { width: 36px; height: 36px; border-radius: 10px; background: #2563EB; display: grid; place-items: center; flex-shrink: 0; }
.coach-badge-ico svg { width: 18px; height: 18px; }
.coach-badge strong { display: block; font-size: 13px; color: var(--text-light); white-space: nowrap; }
.coach-badge span { font-size: 11.5px; color: var(--text-light-2); white-space: nowrap; }
@media (max-width: 560px) { .coach-badge span { display: none; } }

/* Carte-citation flottante sur une photo (section Partenaires) — fond
   violet profond uni, jamais le dégradé signature déjà pris par le CTA
   de la page (règle CLAUDE.md : un seul usage du dégradé par écran). */
.quote-card {
  position: absolute; left: 24px; bottom: -28px; max-width: 260px;
  background: #1a1035; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 16px 34px rgba(20, 16, 40, .35);
  color: #fff;
}
.quote-card svg { width: 26px; height: 26px; opacity: .55; margin-bottom: 8px; }
.quote-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.quote-card .quote-brand { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; opacity: .9; }
.quote-card .quote-brand img { width: 18px; height: 18px; }
@media (max-width: 900px) { .quote-card { position: static; max-width: none; margin-top: -30px; margin-left: 20px; margin-right: 20px; } }

@media (max-width: 900px) {
  .hero-bg img, .page-hero-bg img { object-position: 68% center; }
  .page-hero-bg::after {
    background:
      linear-gradient(to bottom, rgba(10, 8, 18, .55) 0%, rgba(10, 8, 18, .8) 34%, rgba(10, 8, 18, .96) 62%),
      linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
  }
  /* Accueil : traitement plus clair que les héros secondaires — le haut de la
     photo (visages) reste visible, seul le bas (derrière le texte empilé) est
     assombri pour la lisibilité. */
  .hero-bg::after {
    background: linear-gradient(to bottom, rgba(10, 8, 18, .3) 0%, rgba(10, 8, 18, .6) 34%, rgba(10, 8, 18, .9) 60%, rgba(10, 8, 18, .97) 80%);
  }
  .hero .wrap, .page-hero .wrap { padding-block: 180px 64px; }
}

/* --- Bandeau des 4 valeurs (Accueil) ---------------------------------------
   Carte blanche flottante, légèrement surélevée sur le bas du Hero — pas une
   nouvelle section sombre, une extension claire du Hero. */
.hero-bandeau {
  position: relative; z-index: 2;
  margin-top: clamp(-38px, -3.4vw, -22px);
  background: var(--surface-light);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 40, .28);
}
.hb-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px 28px;
  padding-block: clamp(26px, 3vw, 34px);
}
.hb-item { display: flex; align-items: center; gap: 14px; }
/* Centrage par position absolue + translate(-50%,-50%) : la méthode la plus
   fiable, indépendante du mode d'affichage du parent (flex/grid se sont
   révélés incohérents pour centrer un <svg> ici selon le moteur de rendu). */
.hb-ico { position: relative; width: 52px; height: 52px; min-width: 52px; border-radius: 50%; flex-shrink: 0; }
.hb-ico svg {
  position: absolute; top: 50%; left: 50%;
  width: 23px; height: 23px;
  margin: -11.5px 0 0 -11.5px;
}
.hb-item strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--text-light); line-height: 1.3; }
.hb-item span { display: block; font-size: 12.5px; color: var(--text-light-2); margin-top: 1px; }

@media (max-width: 900px) { .hb-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .hero-bandeau { margin-top: -18px; border-radius: 22px 22px 0 0; }
  .hb-row { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
}

/* --- Coachs : finition du Hero "à la Accueil" sans son bandeau -------------
   Reprend seulement le chevauchement/les coins arrondis/l'ombre de
   .hero-bandeau (mêmes valeurs) sur la section qui suit directement le Hero
   — jamais sa structure de contenu. N'affecte que les pages qui ajoutent
   cette classe en plus de .band ; aucune autre page n'y touche. */
.band-hero-lift {
  position: relative; z-index: 2;
  margin-top: clamp(-38px, -3.4vw, -22px);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 40, .28);
}
@media (max-width: 520px) { .band-hero-lift { margin-top: -18px; border-radius: 22px 22px 0 0; } }

/* --- Sections -------------------------------------------------------------- */

.band { padding: clamp(68px, 8vw, 108px) 0; }
.band-soft { background: var(--bg-soft); }
.band-deep { background: var(--bg-deep); }
/* Lueur violette (nos propres couleurs), pour une section sombre qui a besoin
   de plus de relief qu'un fond uni — jamais une teinte hors de la palette. */
.band-glow {
  background:
    radial-gradient(ellipse 640px 480px at 6% 108%, rgba(116, 87, 241, .4), transparent 62%),
    radial-gradient(ellipse 520px 420px at 100% -10%, rgba(44, 103, 237, .22), transparent 60%),
    var(--bg-deep);
}
.band-light { background: var(--bg-light); color: var(--text-light); }
.band-light .text-2 { color: var(--text-light-2); }

section[id] { scroll-margin-top: 96px; }

.sec-title {
  margin: 0 0 clamp(44px, 5vw, 66px);
  text-align: center;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
h2 { margin: 0 0 18px; font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; }
.sec-label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-light); margin-bottom: 16px;
}
.band-light .sec-label { color: var(--violet-deep); }

.centered { text-align: center; max-width: 640px; margin-inline: auto; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 100px;
  background: var(--signature); color: #fff;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 100px;
  border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.band-light .btn-ghost { border-color: var(--border-light); color: var(--text-light); }

/* --- Comment ça marche (étapes numérotées) ---------------------------------
   Base inchangée (utilisée telle quelle par Coachs et Partenaires aussi) —
   la variante carte de l'Accueil vit entièrement sous .steps-cards plus bas,
   pour ne jamais changer le rendu déjà validé de ces deux autres pages. */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.step { position: relative; text-align: center; padding-inline: 12px; }
.step:not(:last-child)::after {
  content: '';
  position: absolute; top: 30px; left: calc(50% + 46px); right: calc(-50% + 46px);
  border-top: 1px dashed #332a4e;
}
.step-ico {
  width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 17px; background: var(--signature);
  display: grid; place-items: center;
  box-shadow: 0 12px 26px -12px rgba(116, 87, 241, .8);
}
.step-ico svg { width: 27px; height: 27px; stroke: #fff; }
.step-num { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.step h3 {
  margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  min-height: 2.6em;
  display: flex; align-items: flex-start; justify-content: center;
}
.step p { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.65; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 8px; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --- Variante "vraie carte" (Accueil uniquement, class steps-cards) --------
   N'affecte jamais .steps nu (Coachs/Partenaires) : tout est scopé derrière
   ce sélecteur composé. */
.steps-cards { gap: clamp(20px, 3vw, 30px); }
.steps-cards .step {
  text-align: left; padding-inline: 0;
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 28px 24px 30px;
  box-shadow: 0 16px 36px -24px rgba(20, 16, 40, .28);
}
.steps-cards .step:not(:last-child)::after {
  content: '→'; border-top: none;
  top: 36px; left: 100%; right: auto; width: clamp(20px, 3vw, 30px);
  text-align: center; font-size: 19px; font-weight: 700; color: #c9c1e0;
}
.steps-cards .step-ico {
  width: 56px; height: 56px; margin: 0 0 18px;
  border-radius: 16px; box-shadow: none;
  display: grid; place-items: center;
}
.steps-cards .step-ico svg { width: 25px; height: 25px; }
.steps-cards .step-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
.steps-cards .step-num { font-size: 1.1rem; font-weight: 800; color: var(--violet-deep); margin-bottom: 0; }
.steps-cards .step h3 { margin: 0; font-size: 1.12rem; font-weight: 800; min-height: 0; display: block; text-align: left; }
.steps-cards .step p { color: var(--text-light-2); min-height: 3.3em; }

@media (max-width: 900px) {
  .steps-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .steps-cards .step:not(:last-child)::after { display: none; }
  .steps-cards .step p { min-height: 0; }
}
@media (max-width: 560px) { .steps-cards { grid-template-columns: 1fr; } }

/* --- Cartes de fonctionnalités ---------------------------------------------- */

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature {
  padding: 28px 24px 30px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Harmonisation (audit du 02/10) : une carte .feature en contexte CLAIR a
   désormais toujours le même traitement "premium" (coins 22px, ombre douce
   flottante) — avant, seules les pages portant explicitement l'ancienne
   classe -soft (Coachs, une partie de Partenaires/Sécurité) l'avaient,
   pendant que Premium et À propos restaient sur une ombre quasi invisible et
   des coins plus serrés : deux rendus différents pour le même type de carte.
   Scopé à .band-light (jamais à .feature seul) pour ne JAMAIS toucher les
   .feature en contexte sombre déjà validées ailleurs (ex. "Notre engagement"
   sur Sécurité, "Plusieurs types de partenariats" sur Partenaires), hors
   périmètre de cet audit. */
.band-light .feature {
  background: var(--surface-light); border-color: var(--border-light);
  border-radius: 22px;
  box-shadow: 0 16px 36px -24px rgba(20, 16, 40, .28);
}
.feature:hover { border-color: #3a3157; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .feature:hover { transform: none; } }

.feature-ico {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--signature);
  display: grid; place-items: center; margin-bottom: 20px;
}
/* min-width:0 : sans ça, un item de grille refuse de descendre sous la
   largeur intrinsèque de son contenu (titre/texte) et fait déborder toute
   la grille — nécessaire en particulier pour les .features à 3 colonnes
   (coachs/partenaires/sécurité/premium, style inline ci-dessous) sur mobile. */
.feature { min-width: 0; }
.feature-ico svg { width: 20px; height: 20px; stroke: #fff; }
/* Même principe qu'au-dessus : icône en carré arrondi (au lieu d'un rond) sur
   toute carte .feature en contexte clair — Premium et À propos avaient encore
   l'icône ronde héritée de la base, désormais alignées sur Coachs/Partenaires/
   Sécurité. La couleur de fond de chaque icône reste fixée en style="" par
   carte (inchangé, propre à chaque page) ; seules forme et taille changent
   ici, jamais la couleur. */
.band-light .feature-ico { width: 56px; height: 56px; border-radius: 16px; }
.band-light .feature-ico svg { width: 25px; height: 25px; }
.feature h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; min-height: 2.4em; display: flex; align-items: flex-start; }
.feature p { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.62; }
.band-light .feature p { color: var(--text-light-2); }

/* !important : certaines .features (coachs/partenaires/sécurité/premium) ont
   un grid-template-columns EN LIGNE (repeat(3,1fr), pour un variant à 3 cartes
   sur desktop) — un style inline bat toujours une règle de classe, même dans
   une media query, donc sans !important ces grilles ne se replient jamais et
   débordent sur mobile (constaté : 3 colonnes figées jusqu'à 375px). */
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .features { grid-template-columns: 1fr !important; } }

/* --- Emplacement image à fournir (visible seulement en construction) ------- */

.photo-slot {
  position: relative;
  border: 2px dashed #4a4068; border-radius: 20px;
  background: repeating-linear-gradient(135deg, #17132a, #17132a 12px, #1c1730 12px, #1c1730 24px);
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; padding: 24px; text-align: center;
}
.photo-slot span {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-3); max-width: 26ch; line-height: 1.5;
}
.band-light .photo-slot {
  border-color: #d7d1ea;
  background: repeating-linear-gradient(135deg, #f1eefa, #f1eefa 12px, #ebe7f7 12px, #ebe7f7 24px);
}

/* --- Photo réelle "en flux" (remplace un .photo-slot une fois l'image fournie) - */

.photo-fill {
  width: 100%; height: 100%; min-height: 260px;
  object-fit: cover; border-radius: 20px;
  display: block;
}
.band-light .photo-slot span { color: var(--text-light-2); }

/* --- Médaillons de grade (progression) -------------------------------------- */

.grades-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2.6vw, 30px); }
/* Trait qui "progresse" derrière les 7 grades — le dégradé suit les vraies
   couleurs officielles de chaque grade, dans l'ordre. Bien plus présent que
   la version initiale (retour du 30/09 : "la ligne est trop fine"). */
.grades-row::before {
  content: '';
  position: absolute; left: 54px; right: 54px; top: 44px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #5210B7, #3661F7, #10B871, #FF7E02, #FD4715, #AB45A5, #E28F0B);
  opacity: .8; z-index: 0;
}
.grade { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 108px; }
.grade-ico {
  width: 88px; height: 88px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--signature);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.4);
}
.grade-ico svg { width: 34px; height: 34px; stroke: #fff; }
/* Fond sombre (band-deep) : noms en blanc, pas var(--text-light) qui est
   fait pour un fond clair et rendait le libellé quasi invisible ici. */
.grade span { font-size: 15px; font-weight: 800; text-align: center; color: #fff; }

/* Une couleur officielle par grade (relevées dans l'app, pf_colors.dart) —
   jamais les couleurs inventées d'une génération. Chaque grade grossit aussi
   très légèrement par rapport au précédent (+4px, icône intérieure mise à
   l'échelle avec) : Débutant à Champion étaient tous à la même taille (88px)
   avant de sauter d'un coup à 104px pour Légende — retour du 30/09, l'œil
   doit sentir une progression continue, pas un unique palier final. */
.grade-ico.g-debutant  { background: #5210B7; width: 78px; height: 78px; }
.grade-ico.g-debutant  svg { width: 30px; height: 30px; }
.grade-ico.g-amateur   { background: #3661F7; width: 82px; height: 82px; }
.grade-ico.g-amateur   svg { width: 32px; height: 32px; }
.grade-ico.g-confirme  { background: #10B871; width: 86px; height: 86px; }
.grade-ico.g-confirme  svg { width: 33px; height: 33px; }
.grade-ico.g-expert    { background: #FF7E02; width: 90px; height: 90px; }
.grade-ico.g-expert    svg { width: 35px; height: 35px; }
.grade-ico.g-athlete   { background: #FD4715; width: 94px; height: 94px; }
.grade-ico.g-athlete   svg { width: 36px; height: 36px; }
.grade-ico.g-champion  { background: #AB45A5; width: 98px; height: 98px; }
.grade-ico.g-champion  svg { width: 38px; height: 38px; }
.grade-ico.g-legende   { background: linear-gradient(135deg, #E28F0B, #FFCD5C); width: 103px; height: 103px; }
.grade-ico.g-legende svg { width: 40px; height: 40px; }
.grade:has(.g-legende) { gap: 18px; }

@media (max-width: 560px) {
  .grade { width: 82px; }
  .grade-ico { width: 68px; height: 68px; }
  .grade-ico svg { width: 27px; height: 27px; }
  /* Même progression très légère qu'en desktop, juste à une échelle réduite. */
  .grade-ico.g-debutant  { width: 60px; height: 60px; }
  .grade-ico.g-debutant  svg { width: 23px; height: 23px; }
  .grade-ico.g-amateur   { width: 63px; height: 63px; }
  .grade-ico.g-amateur   svg { width: 24px; height: 24px; }
  .grade-ico.g-confirme  { width: 66px; height: 66px; }
  .grade-ico.g-confirme  svg { width: 26px; height: 26px; }
  .grade-ico.g-expert    { width: 70px; height: 70px; }
  .grade-ico.g-expert    svg { width: 27px; height: 27px; }
  .grade-ico.g-athlete   { width: 73px; height: 73px; }
  .grade-ico.g-athlete   svg { width: 28px; height: 28px; }
  .grade-ico.g-champion  { width: 76px; height: 76px; }
  .grade-ico.g-champion  svg { width: 29px; height: 29px; }
  .grade-ico.g-legende { width: 80px; height: 80px; }
  .grade-ico.g-legende svg { width: 30px; height: 30px; }
  .grade span { font-size: 12.5px; }
  .grades-row::before { left: 41px; right: 41px; top: 34px; }
}

/* Légende manuscrite sur une photo (déclinée de .hero-caption, sans son
   positionnement absolu propre au héros — à positionner selon le contexte). */
.caption-italic {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 15px; line-height: 1.4;
}

/* --- Composition organique de portraits (section Communauté, Accueil) -----
   Faite en code (jamais une image aplatie) : chaque portrait garde son propre
   <img>, pour pouvoir être remplacé individuellement plus tard. Quinconce
   HORIZONTAL — coordonnées par portrait, en ligne — volontairement large et
   bas (500×220, jamais un carré) : 9 portraits répartis de gauche à droite en
   hauteurs irrégulières (ni colonne verticale, ni ligne parfaitement droite),
   tailles variées, chevauchements légers entre voisins proches et vrais
   espaces ailleurs pour que le cluster respire. Taille fixe (ne grandit pas
   avec le viewport) : elle tient dans la plus étroite largeur de colonne
   possible (~900px, juste avant le repli mobile), donc jamais de débordement
   qui viendrait écraser la colonne de texte voisine. */
.portrait-cluster { position: relative; width: 500px; max-width: 100%; height: 220px; margin-inline: auto; }
.portrait-cluster img {
  position: absolute;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--bg-light); box-shadow: 0 16px 32px -10px rgba(20, 16, 40, .4);
}
@media (max-width: 900px) {
  .portrait-cluster {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    width: 100%; height: auto;
  }
  .portrait-cluster img {
    position: static !important; margin: 0 !important;
    width: 84px !important; height: 84px !important;
  }
}
@media (max-width: 480px) {
  .portrait-cluster img { width: 68px !important; height: 68px !important; }
}

/* En ligne, sous le cluster désormais pleine largeur (plus de place là qu'à
   côté d'un cluster déjà large). */
.community-values { display: flex; flex-wrap: wrap; gap: 14px 28px; list-style: none; margin: 0; padding: 0; }
.community-values li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 700; color: var(--text-light); }
.community-values .cv-ico {
  width: 34px; height: 34px; border-radius: 50%; background: var(--chip-bg);
  display: grid; place-items: center; flex-shrink: 0;
}
.community-values svg { width: 17px; height: 17px; stroke: var(--violet-deep); flex-shrink: 0; }

/* --- Grille à 5 téléphones (section Expérience, Accueil) ------------------- */
.fonc-phones.fonc-phones-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1300px) { .fonc-phones.fonc-phones-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .fonc-phones.fonc-phones-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .fonc-phones.fonc-phones-5 { grid-template-columns: 1fr; } }

/* --- Placeholder "bientôt" (marques, avis) — structure gardée, contenu vidé - */

.soon-card {
  border: 1px dashed var(--border); border-radius: 16px;
  padding: 40px 24px; text-align: center; background: var(--surface);
}
.band-light .soon-card { background: var(--surface-light); border-color: var(--border-light); }
.soon-card p { margin: 0; color: var(--text-3); font-size: 14px; }
.band-light .soon-card p { color: var(--text-light-2); }

/* --- FAQ --------------------------------------------------------------------- */

.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.band-light .faq details { background: var(--surface-light); border-color: var(--border-light); }
.faq summary {
  padding: 20px 22px; cursor: pointer;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--violet-light); border-bottom: 2px solid var(--violet-light);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.band-light .faq summary::after { border-color: var(--violet-deep); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; color: var(--text-2); line-height: 1.66; }
.band-light .faq p { color: var(--text-light-2); }

.faq-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; }
.faq-cat {
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--border-light); background: var(--surface-light);
  font-size: 13px; font-weight: 600; color: var(--text-light-2);
  text-decoration: none;
}
.faq-cat:hover { color: var(--violet-deep); border-color: var(--violet-deep); }

/* --- Grille de contenu générique (2 colonnes copie/visuel) ------------------ */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: center; }
.split.reverse { grid-template-columns: 1fr 1fr; }
.split.reverse > :first-child { order: 2; }
/* Communauté (Accueil) : colonne des portraits un peu plus large que le texte
   — en classe plutôt qu'en style inline, pour que le repli mobile ci-dessous
   (spécificité plus faible qu'un style inline) continue de s'appliquer. */
@media (min-width: 901px) { .split-community { grid-template-columns: 0.82fr 1.18fr; } }
/* Pourquoi PartnerProgress + Progression : colonne photo élargie (mêmes deux
   sections, même traitement) pour réduire le recadrage object-fit:cover sur
   des photos panoramiques (groupe / sportive) sans jamais les déformer. */
@media (min-width: 901px) {
  .split-media { grid-template-columns: 0.78fr 1.22fr; }
  /* Variante "photo en premier" (Certification, Coachs) : la photo est le
     1er enfant en DOM et doit rester à gauche ET large — donc jamais
     .split.reverse ici (qui la renverrait visuellement à droite, vérifié :
     .split.reverse>:first-child{order:2} poussait déjà la photo à droite
     avant même cet ajout, bug détecté le 01/10), juste les fr inversés. */
  .split-media-lead { grid-template-columns: 1.22fr 0.78fr; }
}
@media (max-width: 900px) {
  /* !important : "Proposer un partenariat" (partenaires.html) a un
     grid-template-columns EN LIGNE (1.3fr .9fr, pour le duo formulaire/FAQ
     sur desktop) — un style inline bat toujours une règle de classe, même
     en media query, donc sans !important ce .split ne repasse jamais en
     1 colonne et reste cramé (deux étroites colonnes côte à côte) sur
     mobile. Même pattern déjà établi pour .features ci-dessus. */
  .split, .split.reverse { grid-template-columns: 1fr !important; }
  .split.reverse > :first-child { order: 0; }
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.checks li { display: flex; align-items: flex-start; gap: 13px; font-size: 14.5px; font-weight: 500; }
.checks svg { width: 21px; height: 21px; flex-shrink: 0; stroke: var(--violet); margin-top: 1px; }
.band-light .checks svg { stroke: var(--violet-deep); }

/* Variante "pastille" : coche blanche sur rond dégradé signature (plutôt que
   la simple coche-contour ci-dessus) — section Coachs "Ton espace coach",
   retour du 01/10, demandé "comme la génération" pour cette liste précise. */
.checks-badge li { align-items: center; }
.check-badge {
  width: 22px; height: 22px; border-radius: 50%; background: var(--signature);
  display: grid; place-items: center; flex-shrink: 0;
}
.check-badge svg { width: 12px; height: 12px; stroke: #fff; margin: 0; }

/* --- 4 emplacements de composition téléphone, sous-titrés (Fonctionnalités) - */

.fonc-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fonc-phone-img { display: block; width: 100%; height: auto; margin: 0 auto 14px; max-width: 260px; }
.fonc-phone-cap { text-align: center; margin-bottom: 14px; }
.fonc-phone-cap strong { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--text-light); }
.fonc-phone-cap span { display: block; font-size: 12px; color: var(--text-light-2); line-height: 1.45; }
.fonc-phones .photo-slot { min-height: 300px; padding: 10px; font-size: 10.5px; }
@media (max-width: 1100px) { .fonc-phones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fonc-phones { grid-template-columns: 1fr; } }

/* --- Communauté (photo pleine largeur) -------------------------------------- */

.community { position: relative; overflow: hidden; }
.community-bg { position: absolute; inset: 0; }
.community-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.community-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--bg) 2%, rgba(10, 8, 18, .88) 28%, rgba(10, 8, 18, .34) 62%, rgba(10, 8, 18, .46) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%);
}
.community .wrap { position: relative; padding-block: clamp(80px, 9vw, 120px); }
.community-copy { max-width: 560px; }
.community-copy p { margin: 0; color: var(--text-2); }
.rule { width: 54px; height: 3px; border-radius: 2px; background: var(--signature); margin-top: 26px; }

/* --- Appel final ------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(72px, 9vw, 116px) 0; }
.cta::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 980px; height: 540px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(116, 87, 241, .3), transparent 66%);
  filter: blur(40px); pointer-events: none;
}
.cta .wrap { position: relative; }
.cta h2 { margin-bottom: 14px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.cta > .wrap > p { margin: 0 auto 36px; max-width: 48ch; color: var(--text-2); }
.cta .stores { justify-content: center; }

/* --- Variante avec photo qui déborde à droite (Accueil uniquement) ---------
   Le .cta de base (utilisé tel quel sur les 6 autres pages) n'est jamais
   modifié : cette variante n'existe que si la classe cta-photo est ajoutée. */
.cta-photo { text-align: left; padding-block: clamp(64px, 8vw, 100px); }
.cta-photo-bg { position: absolute; inset: 0; z-index: 0; }
.cta-photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 28%; }
.cta-photo-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg-deep) 0%, rgba(5, 3, 8, .94) 40%, rgba(5, 3, 8, .58) 60%, rgba(5, 3, 8, .22) 82%, transparent 100%);
}
.cta-photo .wrap { position: relative; z-index: 1; }
.cta-photo h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); max-width: 16ch; }
.cta-photo > .wrap > p { margin: 0 0 30px; text-align: left; }
.cta-photo .stores { justify-content: flex-start; }
@media (max-width: 760px) {
  .cta-photo-bg img { object-position: 68% center; }
  .cta-photo-bg::after {
    background: linear-gradient(to bottom, rgba(5, 3, 8, .5) 0%, rgba(5, 3, 8, .88) 58%, var(--bg-deep) 92%);
  }
}

/* --- Pied de page -------------------------------------------------------------- */

footer { border-top: 1px solid var(--border-soft); background: var(--bg-deep); padding: 56px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.foot-brand img { width: 30px; }
.foot-about { margin: 0; font-size: 13px; color: var(--text-3); max-width: 30ch; line-height: 1.65; }
.foot-col h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col a { font-size: 13.5px; color: var(--text-3); text-decoration: none; transition: color .2s ease; }
.foot-col a:hover { color: var(--violet-light); }
.foot-disabled { font-size: 13.5px; color: var(--text-3); opacity: .45; cursor: default; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; color: var(--text-3);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.socials a:hover { color: var(--text); border-color: #3a3157; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .socials a:hover { transform: none; } }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.copy { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-3); text-align: center; }

@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* --- Coachs : composition de 3 téléphones (section "Ton espace coach") -----
   Retour du 02/10 : la version .fonc-phones/.photo-slot empilée en une seule
   colonne (tentative d'harmonisation stricte avec l'Accueil) ne correspondait
   plus à la composition prévue — on revient au principe d'origine : 3
   téléphones portrait côte à côte, celui du centre légèrement mis en avant
   (plus grand, superposé), les deux autres légèrement décalés derrière, le
   tout regroupé en une seule composition premium. AUCUNE donnée, même
   factice : jamais de nom, photo, note ou statistique inventée (règle
   absolue du projet). Ces emplacements sont volontairement neutres — même
   traitement diagonal que .photo-slot déjà utilisé ailleurs pour "image à
   fournir" — et attendent de vraies captures PartnerProgress (Espace coach /
   Profil coach / Activité), à déposer directement dans .coach-phone-screen
   quand elles seront disponibles, sans toucher au reste de la composition
   (proportions, écart, téléphone central plus grand). */
.coach-phones { display: flex; align-items: center; justify-content: center; margin-bottom: 34px; }
.coach-phone-wrap { position: relative; flex-shrink: 0; margin-inline: -14px; }
.coach-phone-wrap.is-center { z-index: 2; margin-inline: -6px; }
.coach-phone {
  width: 172px; aspect-ratio: 9 / 19.5;
  background: #0d0a18; border: 6px solid #1c1730; border-radius: 34px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
  position: relative; overflow: hidden;
}
.coach-phone-wrap.is-center .coach-phone {
  width: 200px;
  box-shadow: 0 20px 30px -10px rgba(116,87,241,.35), 0 30px 60px -20px rgba(0,0,0,.6);
}
.coach-phone-img { display: block; width: 196px; height: auto; }
.coach-phone-wrap.is-center .coach-phone-img { width: 228px; filter: drop-shadow(0 18px 28px rgba(116,87,241,.35)); }
.coach-phone-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 54px; height: 18px; background: #1c1730; border-radius: 0 0 12px 12px; z-index: 3;
}
.coach-phone-screen {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #14101f, #14101f 9px, #1a1530 9px, #1a1530 18px);
  display: flex; align-items: center; justify-content: center;
}
.coach-phone-screen svg { width: 30%; height: auto; stroke: #4a4068; }
.coach-phone-caption {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 150px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-3);
  text-align: center;
}
@media (max-width: 640px) {
  .coach-phone { width: 108px; }
  .coach-phone-wrap.is-center { margin-inline: 2px; }
  .coach-phone-img { width: 112px; }
  .coach-phone-wrap.is-center .coach-phone-img { width: 134px; }
  .coach-phone-wrap.is-center .coach-phone { width: 128px; }
  .coach-phone-caption { font-size: 10px; max-width: 108px; top: calc(100% + 10px); }
}

/* --- Coachs : petit panneau vitré sombre flottant (section Certification) --
   Même traitement visuel que .hero-feature-card (Accueil), sans son
   positionnement propre au Hero — réutilise .hfc-row/.hfc-ico tels quels. */
.coach-cert-panel {
  position: absolute;
  background: rgba(8, 6, 14, .82); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 11px;
}

/* --- Apparition au défilement --------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .4s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===========================================================================
   RESPONSIVE MOBILE — téléphones (≤640px) UNIQUEMENT.
   Le desktop est le master visuel : tout ce bloc est enfermé dans une seule
   media query, aucune règle ne s'applique au-dessus de 640px. Principe : on
   garde les mêmes couleurs/bordures/rayons/icônes/polices, on réduit seulement
   hauteurs, espacements et zooms de photos. Les !important ne servent qu'à
   passer devant des styles en ligne (hauteurs/tailles propres au desktop).
   =========================================================================== */
@media (max-width: 640px) {

  /* --- Rythme général ------------------------------------------------------ */
  .wrap { padding-inline: 20px; }
  .band { padding: 48px 0; }
  h2 { font-size: clamp(1.5rem, 6.4vw, 1.8rem) !important; margin-bottom: 14px; line-height: 1.16; }
  .sec-label { margin-bottom: 12px; font-size: 11.5px; letter-spacing: .11em; }
  .split, .split.reverse { gap: 24px; }

  /* --- Hero : la photo garde son cadrage naturel (bandeau 16/11, pas de
     zoom pour remplir 760px), fondu vers le fond sombre, texte dessous. --- */
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 11; flex-shrink: 0; }
  .hero-bg::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 56%, rgba(10, 8, 18, .78) 86%, var(--bg) 100%);
  }
  .hero .wrap { padding-block: 0 40px; margin-top: -44px; }
  .hero-copy { max-width: none !important; }
  h1 { font-size: clamp(1.85rem, 8vw, 2.2rem) !important; margin-bottom: 14px; line-height: 1.08; }
  .hero-lead { font-size: 15px; margin-bottom: 18px; max-width: none; }
  .hero-mark { margin-bottom: 18px; }
  .stores { gap: 10px; }
  .store { padding: 9px 14px 9px 13px; gap: 10px; }

  /* --- Bandeau des 4 valeurs (Accueil) ------------------------------------- */
  .hb-row { gap: 14px; padding-block: 20px; }
  .hb-ico { width: 44px; height: 44px; min-width: 44px; }

  /* --- Photos éditoriales dans les sections : ratio fixe 16/10 au lieu d'une
     hauteur de 340-400px qui zoomait ×2 sur une photo paysage. ------------- */
  .photo-fill { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10; border-radius: 18px; }

  /* --- Sections photo pleine largeur (communauté, CTA photo) : même
     traitement que le hero (photo en bandeau + fondu, texte dessous). ----- */
  .community { display: flex; flex-direction: column; }
  .community-bg { position: relative; inset: auto; aspect-ratio: 16 / 10; flex-shrink: 0; }
  .community-bg::after {
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 54%, var(--bg) 100%);
  }
  .community .wrap { padding-block: 0 48px; margin-top: -40px; }

  .cta { padding: 52px 0; }
  .cta-photo { display: flex; flex-direction: column; padding: 0 0 48px; }
  .cta-photo-bg { position: relative; inset: auto; aspect-ratio: 16 / 10; flex-shrink: 0; }
  .cta-photo-bg::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(10, 8, 18, .8) 78%, var(--bg) 100%);
  }
  .cta-photo .wrap { padding-block: 0; margin-top: -28px; }
  .cta-photo::before { display: none; }
  #formulaire { padding-top: 32px !important; }
  .cta h2, .cta-photo h2 { max-width: none; }
  .cta > .wrap > p, .cta-photo > .wrap > p { margin-bottom: 22px; font-size: 15px; }

  /* --- Cartes "avantages" : compactes, icône à gauche, texte à droite ----- */
  .features { gap: 12px; margin-top: 28px !important; }
  .feature { padding: 16px 16px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
  .band-light .feature { border-radius: 18px; box-shadow: 0 12px 28px -22px rgba(20, 16, 40, .28); }
  .feature:hover { transform: none; }
  body .feature > .feature-ico { grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; }
  .band-light .feature-ico { width: 44px; height: 44px; border-radius: 13px; }
  .band-light .feature-ico svg, .feature-ico svg { width: 21px; height: 21px; }
  .feature h3 { min-height: 0; margin: 0 0 4px; font-size: .98rem; align-self: center; }
  .feature p { font-size: 13px; line-height: 1.55; }

  /* --- Étapes "Comment ça marche" : ligne icône + texte ------------------- */
  .steps { gap: 12px; }
  .steps-cards { margin-top: 28px !important; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; text-align: left; padding-inline: 0; }
  .step > :not(.step-ico) { grid-column: 2; }
  .step-ico, .steps-cards .step-ico { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .step-ico svg, .steps-cards .step-ico svg { width: 22px; height: 22px; }
  .step-num { font-size: 1.15rem; margin-bottom: 2px; }
  .step h3 { min-height: 0; margin: 0 0 4px; justify-content: flex-start; }
  .step p { font-size: 13px; }
  .steps-cards .step { padding: 16px; border-radius: 18px; box-shadow: 0 12px 28px -22px rgba(20, 16, 40, .28); }
  .steps-cards .step h3 { font-size: 1.02rem; }
  .steps-cards .step p { min-height: 0; }

  /* --- Panneau de certification (Coachs) : sur une photo plus basse, le
     panneau et le badge flottants se chevauchaient — ils passent sous la
     photo, légèrement remontés dessus. ---------------------------------- */
  .coach-cert-panel { position: static !important; margin: -30px 12px 0; }
  .coach-cert-panel ~ .coach-badge { position: static !important; margin: 10px 12px 0; width: fit-content; }

  /* --- Emplacements téléphone (à remplacer plus tard par les vraies captures)
     Deux par ligne et moins hauts, au lieu d'un par ligne à 300px. -------- */
  .fonc-phones, .fonc-phones.fonc-phones-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fonc-phones .photo-slot { min-height: 210px; }
  .fonc-phones-5 > :last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .grades-row::before { display: none; }
  .fonc-phone-cap { margin-bottom: 10px; }
  .coach-phones { margin-bottom: 30px; }

  /* --- À propos : cartes « écosystème » (photo + texte) en 2 colonnes ----- */
  .eco-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .eco-grid .eco-card { border-radius: 18px; }
  .eco-grid .eco-card-body { padding: 12px 12px 16px; }
  .eco-grid .eco-card .feature-ico { width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; }
  .eco-grid .eco-card .feature-ico svg { width: 17px; height: 17px; }
  .eco-grid .eco-card h3 { font-size: .9rem; margin-bottom: 4px; }
  .eco-grid .eco-card p { font-size: 12px; line-height: 1.45; }

  /* --- Premium : cartes de tarifs et tableau comparatif --------------------- */
  .pricing .price-card { padding: 24px 20px; }
  .price-card .price-amount { font-size: 2rem; }
  .band-light .compare th, .band-light .compare td { padding: 11px 6px; font-size: 13px; }

  /* --- FAQ ------------------------------------------------------------------ */
  .band-light .faq-cat-icons { gap: 10px; margin-bottom: 0; }
  .band-light .faq-cat-icon { padding: 14px 8px; border-radius: 14px; }
  .band-light .faq-cat-icon .ico { width: 34px; height: 34px; margin-bottom: 8px; }
  .band-light .faq-cat-icon .ico svg { width: 17px; height: 17px; }
  .faq { gap: 10px; }
  .faq summary { padding: 15px 16px; font-size: 14.5px; gap: 12px; }
  .faq p { padding: 0 16px 16px; font-size: 14px; }

  /* --- Pied de page : marque en haut, colonnes de liens côte à côte -------- */
  footer { padding: 38px 0 26px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-col h4 { margin-bottom: 12px; }
  .foot-col ul { gap: 9px; }
  .copy { margin-top: 28px; padding-top: 18px; }
}