/* ============================================================
   THOMAS RIFF · Coach & formateur en nutrition · Montpellier
   Design system issu de la landing V4 validée (DA Simon Sam) :
   grain papier double couche, bordures 2px navy, surligneurs
   .hl ajustés au mot, gros chiffres bold, zéro ombre.
   ============================================================ */

/* Polices hébergées sur le site (29/09) : servies par Google, elles arrivaient 2 à 3 s
   après le texte sur mobile, et les titres changeaient de police sous les yeux.
   Sous-ensemble latin, fichiers variables, préchargés dans le <head>. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --peach:        #F4D5B5;
  --peach-light:  #FBEAD0;
  --peach-deep:   #EFB87E;
  --cream:        #FBE3B0;
  --cream-soft:   #F8E8C5;
  --cream-light:  #FCF4E1;
  --navy:         #0E1B30;
  --navy-soft:    #1A2A45;
  --navy-deep:    #06101F;
  --orange:       #E07A3C;
  --orange-deep:  #C0612A;
  --orange-bright:#EE9A55;
  --ink:          #16243B;
  --ink-soft:     #16243B; /* = --ink : plus de gris, texte noir partout (retour Julien 09/08) */
  --white:        #FFF9F0;
  --green:        #3FAE6A;
  --red:          #E04E2F;
  --border:       rgba(14, 27, 48, 0.12);
  --maxw:         1180px;
}

html {
  overscroll-behavior: none;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden;
  /* PAS de scroll-behavior: smooth (règle JBC) : les ancres sautent direct */
  /* décalage des ancres = hauteur réelle du header, qui change avec l'écran
     (défaut repéré sur le site d'Isabelle Olivrie : valeur desktop laissée en
     mobile, l'ancre atterrissait 80px trop bas) */
  scroll-padding-top: 100px;
}

html, body {
  background: var(--peach-light);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* clip, PAS hidden : hidden crée un conteneur de scroll qui casse le sticky et bloque la molette */
}
main { flex: 1; }
/* Page courte à section unique (404) : la section remplit tout le main jusqu'au
   footer, sinon le fond crème du body apparaît en bande vide entre les deux
   (vu par Julien sur la 404, 07/09). Le contenu se centre dans la hauteur libre. */
main.remplir { display: flex; flex-direction: column; }
main.remplir > section { flex: 1; display: flex; align-items: center; }
main.remplir > section > .container { width: 100%; }

/* 🔴 PAS de verrou de scroll par overflow quand le menu burger est ouvert.
   Piège corrigé le 10/08 : mettre `overflow-y: hidden` sur html (le conteneur
   de scroll) prive `position: sticky` de son scrollport. Le header perdait
   instantanément son collage et sautait hors de l'écran AVEC le menu ouvert
   dès que la page était un peu défilée. Symptôme : « le burger bug à fond ».
   À la place, nav.js referme le menu si l'utilisateur fait défiler la page. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
/* dans le texte courant, l'italique garde la typo du texte (retour Julien 09/08) ;
   l'Instrument Serif est réservé aux titres et accents de titres */
p em, li em { font-family: inherit; letter-spacing: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Sauts de ligne responsives : pattern socle span + ::after
   (usage : <span class="br-mobile"><br></span>, jamais de <br class="..."> nu) */
.br-desktop, .br-mobile { display: inline; }
@media (max-width: 600px) {
  .br-desktop br { display: none; }
  .br-desktop::after { content: " "; }
}
@media (min-width: 601px) {
  .br-mobile br { display: none; }
  .br-mobile::after { content: " "; }
}

/* surligneur façon miniatures Simon Sam
   (cadrage revu 06/08 sur retour Thomas : les lettres touchaient les bords
   de la boîte et les accents étaient coupés → padding latéral élargi,
   boîte remontée pour laisser respirer i/é/t) */
.hl, .hl-navy {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0 0.14em;
  margin-inline: 0.04em;
  z-index: 0;
}
.hl::before, .hl-navy::before {
  content: '';
  position: absolute;
  inset: 0.06em 0 -0.07em;
  border-radius: 0.12em;
  z-index: -1;
}
.hl { color: var(--navy); }
.hl::before { background: var(--cream); }
.hl-navy { color: var(--cream); }
.hl-navy::before { background: var(--navy); }

/* texture papier granulée façon DA Simon Sam : taches larges + grain fin */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.65'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.13;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.band-navy.grain::after {
  mix-blend-mode: overlay;
  opacity: 0.26;
}
.grain > * { position: relative; z-index: 1; }

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--navy);
  color: var(--cream);
  text-decoration: none;
  /* boutons de page plus imposants que le .nav-cta du header (retour Julien 09/08 :
     mesurés identiques au header mais jugés « pas assez gros » face aux gros titres) */
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  border: 2px solid var(--navy);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); transform: translateY(-2px); }
.btn svg { transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(4px); }
/* icône en TÊTE de bouton : taille fixe, et pas de glissement au survol
   (le translateX est réservé aux flèches placées en fin de bouton) */
.btn.ic-lead svg { width: 19px; height: 19px; flex: 0 0 19px; }
.btn.ic-lead:hover svg { transform: none; }
.btn.outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn.outline:hover { background: var(--navy); color: var(--cream); }
.btn.orange { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn.orange:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }
/* sur bande navy, un hover navy disparaîtrait : on garde le passage crème */
.band-navy .btn.orange:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }

/* ============ NAV ============ */
.nav {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Header plus aéré (retour Julien 08/08). Sélecteur DOUBLE et longhands volontaires :
   .nav-inner porte aussi la classe .container, dont le raccourci `padding: 0 20px`
   déclaré plus bas (media <=600px) remettait le padding vertical à 0. Le header
   mobile tombait alors à 38px. Ne pas repasser ça en `padding: 22px 0`. */
.nav .nav-inner { padding-top: 22px; padding-bottom: 22px; }
.nav-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* wordmark typographique façon templates Simon Sam */
.brand-wm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 19px;
  color: var(--cream); letter-spacing: 0.03em;
  line-height: 1; text-transform: uppercase;
  white-space: nowrap;
}
.brand-wm .wm-box {
  display: inline-block;
  background: var(--cream); color: var(--navy);
  padding: 0.1em 0.24em 0.08em;
  border-radius: 0.14em;
  margin-left: 3px;
}
.brand-wm small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10.4px; font-weight: 600;
  color: var(--orange-bright);
  letter-spacing: 0.18em; margin-top: 6px;
  /* « COACH & FORMATEUR » / « EN NUTRITION » sur 2 lignes (retour Julien 08/08).
     Le white-space: normal annule le nowrap hérité de .brand-wm. */
  line-height: 1.5; white-space: normal;
}
/* Option A validée par Julien (08/08) : sous le seuil téléphone, le logo se réduit
   au wordmark. Le sous-titre faisait 69px de plus que « THOMAS RIFF » à lui seul
   (interlettrage 0.18em) et poussait le header hors du cadre : 374px nécessaires
   contre 320 disponibles sur la landing bilan. Il revient intact dès 431px. */
@media (max-width: 430px) {
  .brand-wm small { display: none; }
  /* landing bilan : le CTA garde sa taille agrandie, c'est son libellé qui raccourcit,
     sinon le header demande 360px pour 320 disponibles */
  .nav-inner { gap: 10px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  /* bloc « contact direct » (page Contact) : l'adresse e-mail est le bouton le plus
     long, on resserre les trois pour qu'ils tiennent dans 320px de large */
  .cabinet-foot .btn { font-size: 15px; padding: 11px 16px; gap: 7px; }
  .cabinet-foot .btn.ic-lead svg { width: 17px; height: 17px; flex: 0 0 17px; }
}
.cta-short { display: none; }
.nav-links {
  display: flex; gap: 26px; align-items: center;
  list-style: none; flex: 1; justify-content: center;
}
.nav-links a {
  color: var(--cream); text-decoration: none;
  font-size: 16.1px; font-weight: 500; transition: color 0.2s;
  white-space: nowrap; /* sinon « Qui suis-je » casse sur le trait d'union */
}
.nav-links a:hover { color: var(--orange-bright); }
.nav-links a[aria-current="page"] { color: var(--orange-bright); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-ig {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: var(--cream);
  border: 1.5px solid rgba(251,227,176,0.25);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-ig:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }
.nav-cta {
  background: var(--orange); color: var(--white);
  text-decoration: none; padding: 11px 20px;
  border-radius: 9px; font-weight: 600; font-size: 16.1px;
  transition: background 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--orange-bright); }
.nav-mobile-only { display: none; }
.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none;
  /* cible tactile de 44px minimum (elle ne faisait que 36x28) */
  width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 3px; border-radius: 6px; }
.hamburger span { width: 24px; height: 2px; background: var(--cream); border-radius: 2px; transition: 0.3s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ACCUEIL ============ */
.hero {
  background: linear-gradient(160deg, #FCF4E1 0%, #F8E8C5 28%, #F4D5B5 64%, #EFB87E 100%);
  padding: 78px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
/* eyebrow bulle façon tag "FAQ" des miniatures */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--navy); color: var(--cream);
  padding: 9px 18px; border-radius: 999px;
  font-size: 14.4px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 30px;
  position: relative;
}
.eyebrow::after {
  content: '';
  position: absolute;
  left: 22px; bottom: -8px;
  border-left: 9px solid var(--navy);
  border-bottom: 9px solid transparent;
}
.eyebrow svg { width: 16px; height: 16px; color: var(--orange-bright); stroke-width: 2; }
.hero h1 {
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 800; line-height: 0.98; margin-bottom: 26px;
}
.hero h1 em { color: var(--orange-deep); font-size: 1.04em; }
.hero .lead {
  font-size: 19.8px; color: var(--ink-soft);
  max-width: 540px; line-height: 1.6; margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.hero-creds {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 42px;
}
.cred {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-size: 14.9px; font-weight: 600; color: var(--navy);
}
.cred .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cred .dot svg { width: 12px; height: 12px; }

.hero-visual { position: relative; aspect-ratio: 4/5; }
.hero-visual .photo {
  width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden;
}
.hero-visual .photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
/* Cadrage du portrait de l'ACCUEIL uniquement (retours Julien 08/08, deux passes) :
   zoom de 25% ancré sur le bas du cadre, le plafond sort du champ,
   Thomas grossit et remonte, ses mains restent en bas.
   Réservé à portrait1 via .photo.zoom : sur qui-suis-je (portrait2),
   ce zoom coupait le haut du crâne (retour Julien 09/08). */
.hero-visual .photo.zoom img {
  transform: scale(1.25);
  transform-origin: 50% 100%;
}
.hero-badge {
  /* à cheval sur le bas de la carte photo et le fond (retour Julien 08/08) */
  position: absolute; bottom: 0; left: 50%;
  transform: translate(-50%, 50%);
  background: var(--cream-soft); color: var(--navy);
  padding: 16px 26px; border-radius: 12px;
  z-index: 4; line-height: 1.15; text-align: center;
  border: 2px solid var(--navy);
  white-space: nowrap;
}
.hero-badge strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  display: block; font-size: 21px;
}
.hero-badge span {
  font-size: 14.5px; color: var(--orange-deep);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-sticker {
  /* médaillon rond conservé (retour Julien 09/08 : seule cette étiquette garde sa forme,
     les stickers des splits sont eux alignés sur .hero-badge) */
  position: absolute; top: 22px; right: -34px;
  background: var(--orange); color: var(--white);
  width: 140px; height: 140px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 21px; line-height: 1.05;
  transform: rotate(8deg); z-index: 4; padding: 16px;
  border: 2px solid var(--navy);
}

/* ============ HERO DE PAGE INTÉRIEURE ============ */
.page-hero {
  background: linear-gradient(160deg, #FCF4E1 0%, #F8E8C5 32%, #F4D5B5 70%, #EFB87E 100%);
  padding: 70px 0 84px;
  position: relative;
  overflow: hidden;
}
.page-hero .inner { max-width: 860px; }
.page-hero h1 {
  font-size: clamp(40px, 5.8vw, 76px);
  font-weight: 800; line-height: 0.99; margin-bottom: 24px;
}
.page-hero h1 em { color: var(--orange-deep); font-size: 1.04em; }
.page-hero .lead {
  font-size: 19.8px; color: var(--ink-soft);
  max-width: 680px; line-height: 1.65; margin-bottom: 32px;
}
.page-hero .hero-cta { margin-top: 4px; }
.page-hero.centered { text-align: center; }
.page-hero.centered .inner { margin: 0 auto; }
.page-hero.centered .lead { margin-left: auto; margin-right: auto; }
.page-hero.centered .eyebrow::after { display: none; }
.page-hero.centered .hero-cta { justify-content: center; }

/* ============ SECTIONS GÉNÉRIQUES ============ */
section { position: relative; }
.pad { padding: 100px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head .tag, .tag-line, .feature .txt .tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16.8px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange-deep);
  margin-bottom: 20px;
}
.section-head .tag svg, .tag-line svg, .feature .txt .tag svg {
  width: 21px; height: 21px; stroke-width: 2; flex-shrink: 0;
}
.section-head h2 { font-size: clamp(40px, 5.4vw, 68px); margin-bottom: 18px; }
/* titre à ligne longue insécable (« pour l'accompagnement ») : corps réduit pour
   tenir en 2 lignes de sens à toutes les largeurs (retour Julien 09/08) */
.section-head h2.h2-fit { font-size: clamp(28px, 8.6vw, 68px); }
.nw { white-space: nowrap; }
.section-head h2 em { color: var(--orange-deep); font-size: 1.04em; }
/* sous-titre de section : +10% et descendu (retour Julien 09/08) */
/* padding et PAS margin : un margin-top fusionnerait avec le margin-bottom du h2
   (margin collapse) et l'écart ne bougerait pas (leçon 09/08) */
.section-head p { color: var(--ink-soft); font-size: 19.8px; line-height: 1.6; padding-top: 26px; }

.band-cream { background: linear-gradient(180deg, #FCF4E1 0%, #F8E8C5 100%); }
.band-peach { background: linear-gradient(180deg, #F4D5B5 0%, #EFB87E 100%); }
/* même dégradé chaud que le CTA final « On fait le point ? » (retour Julien 09/08) */
.band-navy  { background: linear-gradient(135deg, #1A2A45 0%, #0E1B30 40%, #2B1A0E 75%, #4A2410 100%); }

.band-navy .section-head h2,
.band-navy h2, .band-navy h3 { color: var(--cream); }
.band-navy .section-head .tag { color: var(--orange-bright); }
.band-navy .section-head p { color: rgba(251,227,176,0.78); }
.band-navy .section-head h2 em { color: var(--orange-bright); }

/* ============ CARTES ============ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cards.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 18px;
  padding: 44px 35px 37px;
  display: flex; flex-direction: column;
  text-align: center; align-items: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); border-color: var(--orange); }
.card.dark { background: linear-gradient(155deg, #1A2A45 0%, #0E1B30 60%, #06101F 100%); border-color: var(--navy-deep); }
.card.dark h3, .card.dark p { color: var(--cream); }
.card.dark p { color: rgba(251,227,176,0.74); }
.card.dark .pill { background: rgba(224,122,60,0.22); color: var(--orange-bright); }
.card.dark .arrow { color: var(--orange-bright); }
.pill {
  align-self: flex-start;
  background: var(--cream-soft); color: var(--navy);
  padding: 6px 15px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 25px;
}
.pill.soon { background: var(--orange); color: var(--white); }
.card .num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 55px; font-weight: 800; color: var(--orange-deep);
  line-height: 1; margin-bottom: 18px; letter-spacing: -0.04em;
}
.card.dark .num { color: var(--orange-bright); }
.card h3 { font-size: 32px; margin-bottom: 16px; line-height: 1.08; }
.card h3 em { color: var(--orange); }
.card.dark h3 em { color: var(--orange-bright); }
.card p { color: var(--ink-soft); font-size: 17.3px; line-height: 1.62; margin-bottom: 30px; }
.card p:last-child { margin-bottom: 0; }
/* Numéro et titre calés en haut (alignés d'une carte à l'autre), le texte est
   centré verticalement dans la place qui reste (Julien 09/08).
   Le `flex: 1` qui était sur le 1er paragraphe est supprimé : il gonflait ce
   paragraphe et repoussait la ligne italique tout en bas, d'où le grand vide. */
.card:not(:has(.arrow)) > h3 + * { margin-top: auto; }
.card:not(:has(.arrow)) > *:last-child { margin-bottom: auto; }
/* sur les cartes qui ont un lien « En savoir plus », le lien reste en bas */
.card .arrow { margin-top: auto; }
/* ... mais il est CENTRÉ comme le reste du contenu de la carte (Julien 10/08) */
.card .arrow { align-self: center; }
.arrow {
  align-self: flex-start;
  color: var(--navy); text-decoration: none;
  font-weight: 600; font-size: 18.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.2s;
}
/* le soulignement porte sur le TEXTE seul : la flèche se déplace au survol
   mais n'est jamais prise dans le trait (demande Julien 08/08) */
.arrow span { border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.arrow:hover { gap: 12px; }

/* ============ SPLIT TEXTE / PHOTO ============ */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.split.rev { grid-template-columns: 1.1fr 0.9fr; }
.split .visual { position: relative; aspect-ratio: 4/5; }
.split .visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.split .sticker {
  /* même peau que .hero-badge (retour Julien 09/08 : tous les labels sur photo alignés sur le badge) */
  position: absolute; bottom: 0; left: 50%;
  background: var(--orange); color: var(--white);
  padding: 16px 24px; border-radius: 12px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.2; max-width: 240px;
  transform: translate(-50%, 50%); z-index: 4;
  border: 2px solid var(--navy);
  text-align: center;
}
.split .sticker strong {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal; font-weight: 600;
  color: var(--cream); display: block;
  text-transform: uppercase; font-size: 13.8px; letter-spacing: 0.1em; margin-bottom: 4px;
}
.split-text h2 { font-size: clamp(38px, 4.9vw, 62px); margin-bottom: 26px; }
.split-text h2 em { color: var(--orange-deep); font-size: 1.04em; }
.split-text > p { color: var(--ink-soft); font-size: 18.7px; line-height: 1.7; margin-bottom: 16px; }
.split-text .btn { margin-top: 14px; }
.band-navy .split-text > p { color: rgba(251,227,176,0.78); }
.check-list {
  list-style: none; margin-top: 28px;
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 14px; padding: 6px 26px;
}
.check-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; font-size: 16px; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.check-list li:last-child { border-bottom: 0; }
.check-list .ck {
  flex-shrink: 0; width: 30px; height: 30px;
  background: var(--green); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.check-list .ck.no { background: var(--red); }
.check-list .ck svg { width: 15px; height: 15px; }
.check-list strong { font-weight: 700; }

/* ============ STEPS (BANDE NAVY) ============ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.step {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(251,227,176,0.22);
  border-radius: 16px; padding: 35px 28px;
  text-align: center;
  display: flex; flex-direction: column;
}
/* Numéro ET titres (label + h3) calés en haut, donc alignés d'une carte à
   l'autre ; seuls les TEXTES sont centrés verticalement dans la place qui
   reste (Julien 10/08). La marge auto démarre après le h3, pas après le numéro. */
.step > h3 + * { margin-top: auto; }
.step > *:last-child { margin-bottom: auto; }
.step .n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 48px; font-weight: 800; color: var(--orange-bright);
  line-height: 1; margin-bottom: 18px;
}
.step .lbl {
  font-size: 15px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #FFFFFF; margin-bottom: 11px;
}
.step h3 { color: var(--cream); font-size: 22px; margin-bottom: 11px; line-height: 1.15; }
.step p { color: rgba(251,227,176,0.72); font-size: 18.5px; line-height: 1.6; }

/* ligne "levier" sous la liste de sports (script Thomas 05/08) */
.step .focus {
  color: var(--orange-bright); font-size: 17.1px; font-weight: 600;
  margin-top: 11px; line-height: 1.5;
}

/* steps clairs (fonds crème / pêche) */
.steps.light .step { background: var(--white); border: 2px solid var(--navy); }
.steps.light .step .n { color: var(--orange-deep); }
.steps.light .step .lbl { color: var(--ink-soft); }
.steps.light .step h3 { color: var(--navy); }
.steps.light .step p { color: var(--ink-soft); }

/* ============ CITATION ============ */
.quote-wrap { text-align: center; max-width: 880px; margin: 0 auto; position: relative; }
.quote-portrait {
  width: 230px; height: 230px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 28px; border: 4px solid var(--orange);
}
.quote-portrait img { width: 100%; height: 100%; object-fit: cover; }
.quote-wrap blockquote {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--cream); font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.35; max-width: 760px; margin: 0 auto 26px;
}
.quote-wrap cite {
  display: block; font-style: normal; font-weight: 600;
  color: var(--orange-bright); font-size: 14.9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

/* ============ MOSAÏQUE PHOTOS ============ */
.cabinet-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.cabinet-grid .shot {
  border-radius: 16px; overflow: hidden;
  min-height: 280px;
  position: relative;
}
.cabinet-grid .shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cabinet-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 30px;
  font-size: 15px; font-weight: 600; color: var(--navy);
  /* le 2e pictogramme (visio) marque le début d'un second groupe */
  flex-wrap: wrap; text-align: center;
}
.cabinet-foot .pin {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cabinet-foot .pin svg { width: 17px; height: 17px; }
.cabinet-foot .pin.sep { margin-left: 16px; }

/* ============ UNIVERS / INSTAGRAM ============ */
.ig-band { background: linear-gradient(180deg, #F8E8C5 0%, #F4D5B5 100%); }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }
.ig-tile {
  aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  padding: 18px; color: #fff;
  border: 2px solid var(--navy);
  text-decoration: none;
}
.ig-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.65'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ig-tile.t2::before {
  mix-blend-mode: overlay;
  opacity: 0.28;
}
.ig-tile.t1 { background: linear-gradient(155deg, #F4A24E 0%, #E8702F 100%); }
.ig-tile.t2 { background: linear-gradient(155deg, #1E3354 0%, #0E1B30 100%); }
.ig-tile.t3 { background: linear-gradient(155deg, #FBE3B0 0%, #EFB87E 100%); }
.ig-tile.t4 { background: linear-gradient(155deg, #E8702F 0%, #C0612A 100%); }
.ig-tile .ig-tag {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 19px; line-height: 1.18; letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.ig-tile .ig-mark {
  background: var(--cream); color: var(--navy);
  padding: 1px 7px; border-radius: 3px;
}
.ig-tile.t3 .ig-tag { color: var(--navy); }
.ig-tile.t3 .ig-mark { background: var(--navy); color: var(--cream); }
.ig-tile .ig-vf {
  display: flex; gap: 10px; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.ig-tile .ig-vf span {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ig-tile .ig-vf .v { background: var(--green); }
.ig-tile .ig-vf .f { background: var(--red); }
.ig-tile .ig-vf svg { width: 16px; height: 16px; }
.ig-tile .ig-arrow {
  position: absolute; top: 14px; right: 16px; z-index: 1;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px; color: var(--cream);
}
.ig-tile.t3 .ig-arrow { color: var(--navy); }
.ig-foot { text-align: center; }

/* ============ FEATURE (BLOC PHOTO + TEXTE ENCADRÉ) ============ */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 22px; overflow: hidden;
}
.feature .ph { position: relative; min-height: 380px; }
.feature .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .ph .inset {
  position: absolute; bottom: 18px; left: 18px;
  width: 130px; height: 130px;
  border-radius: 14px; overflow: hidden;
}
.feature .ph .inset img { position: static; width: 100%; height: 100%; object-fit: cover; }
.feature .txt { padding: 54px 50px; }
.feature .txt h2 { font-size: clamp(34px, 4vw, 50px); margin-bottom: 18px; }
.feature .txt h2 em { color: var(--orange-deep); }
.feature .txt p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin-bottom: 26px; }

/* ============ TÉMOIGNAGES ============ */
/* Colonnes façon masonry (retour Julien 07/08 : en grille, les citations
   courtes laissaient de gros vides sous elles, la rangée prenant la hauteur
   de la citation la plus longue). Ici chaque carte garde sa hauteur de
   contenu (acquis du 06/08) et les cartes s'empilent en comblant les vides. */
.t-grid { columns: 3; column-gap: 28px; }
.t-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 18px;
  padding: 36px 30px 30px;
  margin: 0 0 28px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.t-card .t-quote-mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 56px; line-height: 0.6; color: var(--orange);
  margin-bottom: 18px;
}
.t-card blockquote {
  font-size: 15.5px; line-height: 1.68; color: var(--ink);
  margin-bottom: 24px;
}
.t-card .t-who { border-top: 2px solid var(--navy); padding-top: 16px; }
.t-card .t-who strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; color: var(--navy); display: block;
}
.t-card .t-who span {
  font-size: 14.4px; color: var(--orange-deep); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* placeholders vidéo témoignages */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vid-ph {
  aspect-ratio: 16/10;
  border: 2px solid rgba(251,227,176,0.28);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: rgba(251,227,176,0.75);
  font-size: 15.5px; font-weight: 600; text-align: center;
  padding: 20px;
}
.vid-ph .play {
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--orange-bright);
  color: var(--orange-bright);
  display: flex; align-items: center; justify-content: center;
}
.vid-ph .play svg { width: 22px; height: 22px; margin-left: 3px; }

/* fiches sportifs suivis
   flex plutôt que grid : quand le nombre de fiches n'est pas un multiple de 4,
   la dernière rangée est CENTRÉE au lieu de laisser un trou à droite
   (retour Julien 07/08). */
.ath-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ath-card {
  flex: 0 1 calc((100% - 66px) / 4);
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 16px; padding: 28px 24px;
  overflow: hidden; /* la photo full-bleed doit épouser les coins arrondis */
  text-align: center;
}
.ath-card h3 { font-size: 20px; margin-bottom: 6px; line-height: 1.1; }
.ath-card .sport {
  font-size: 13.8px; color: var(--orange-deep); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: block; margin-bottom: 16px; line-height: 1.45;
}
/* fiche palmarès sans liste de prestations : pas de vide sous le palmarès */
.ath-card .sport:last-child { margin-bottom: 0; }
.ath-card ul { list-style: none; }
.ath-card li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 15.5px; color: var(--ink-soft); padding: 5px 0;
}
.ath-card li .ck {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px;
  background: var(--green); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ath-card li .ck svg { width: 10px; height: 10px; }

/* ============ PROSE (RÉCIT QUI SUIS-JE) ============ */
/* le texte courant est centré comme les titres et les cartes (Julien 10/08) ;
   les pages légales gardent un ferrage à gauche, c'est de la lecture longue */
.prose { max-width: 720px; margin: 0 auto; text-align: center; }
.prose h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 22px; }
.prose h2 em { color: var(--orange-deep); }
.prose p { color: var(--ink-soft); font-size: 18.7px; line-height: 1.75; margin-bottom: 18px; }
.prose p strong { color: var(--navy); }
.prose ul { margin: 0 0 18px 4px; list-style: none; }
.prose ul li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--ink-soft); font-size: 18.7px; line-height: 1.6;
  padding: 7px 0;
}
.prose ul li .ck {
  flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px;
  background: var(--green); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.prose ul li .ck svg { width: 12px; height: 12px; }

/* ============ TARIFS ============ */
.price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 860px; margin: 0 auto; }
.price-cards.one { grid-template-columns: 1fr; max-width: 520px; }
.price-card {
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 18px; padding: 46px 39px 39px;
  text-align: center;
  display: flex; flex-direction: column;
}
/* label de carte tarif : plus gros que les pills de service (retour Julien 08/08) */
.price-card .pill { align-self: center; font-size: 16.1px; letter-spacing: 0.1em; padding: 10px 21px; }
/* la carte se soulève légèrement au survol */
.price-card { transition: transform 0.22s ease, border-color 0.22s ease; }
.price-card:hover { transform: translateY(-6px); border-color: var(--orange); }
/* CTA des cartes tarif en orange plein, navy au survol */
.price-card .btn,
.price-card .btn.outline {
  background: var(--orange); border-color: var(--orange); color: var(--white);
}
.price-card .btn:hover,
.price-card .btn.outline:hover {
  background: var(--navy); border-color: var(--navy); color: var(--cream);
}
.price-card .amount {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 74px; font-weight: 800; color: var(--navy);
  line-height: 1; letter-spacing: -0.04em;
  margin: 6px 0 4px;
}
.price-card .amount sup { font-size: 30px; font-weight: 800; }
.price-card .per { font-size: 17.1px; color: var(--ink-soft); margin-bottom: 25px; }
.price-card ul { list-style: none; text-align: left; margin: 0 auto 30px; max-width: 345px; }
/* intertitre + liste réunis dans une seule rangée de grille, pour que les cartes
   qui n'ont pas d'intertitre gardent leurs lignes alignées (Thomas, 29/09) */
.price-card .price-more { width: 100%; }
.price-card .price-lead {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16.4px; font-weight: 700; color: var(--navy);
  text-align: center; margin: 0 0 12px;
}
.price-card li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 19.2px; color: var(--ink-soft); padding: 8px 0;
}
.price-card li .ck {
  flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
  background: var(--green); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.price-card li .ck svg { width: 13px; height: 13px; }
.price-card .btn { align-self: center; margin-top: auto; text-align: center; }
.price-note {
  text-align: center; max-width: 640px; margin: 34px auto 0;
  font-size: 15px; color: var(--ink-soft); line-height: 1.65;
}
.price-note strong { color: var(--navy); }

/* ============ FORMULAIRES ============ */
.form-wrap { max-width: 640px; margin: 0 auto; }
.form-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 20px;
  padding: 44px 40px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 14.9px; font-weight: 700; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"] {
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--cream-light);
  padding: 13px 15px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* >= 16px : pas de zoom iOS */
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.form-field input:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
}
.form-checks { margin: 6px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.form-checks .check {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--navy); border-radius: 12px;
  background: var(--cream-light);
  padding: 14px 16px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--navy);
  transition: background 0.2s, border-color 0.2s;
}
.form-checks .check:hover { border-color: var(--orange); }
.form-checks input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--orange);
  flex-shrink: 0; cursor: pointer;
}
.form-legend {
  font-size: 14.9px; font-weight: 700; color: var(--ink-soft);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}
.form-card .btn { width: 100%; justify-content: center; }
.form-note {
  margin-top: 18px; font-size: 15.5px; color: var(--ink-soft);
  text-align: center; line-height: 1.6;
}
/* honeypot anti-spam : champ invisible pour les humains.
   PAS de left:-9999px (cause n°1 de scroll horizontal mobile) : on masque au clip. */
.hp-field {
  position: absolute !important;
  left: 0; top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ============ FORMULAIRE EN 3 ÉTAPES ============ */
/* la boîte ne doit pas être redimensionnable à la main (retour Julien 08/08) */
.form-field textarea { resize: none; }
/* label masqué : l'intitulé passe en placeholder, on garde l'étiquette pour l'accessibilité */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fsteps { counter-reset: fstep; }
.fstep { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.fstep.is-active { display: block; }
.fstep-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px; color: var(--navy);
  padding: 0; margin: 0 0 20px; text-align: center; width: 100%;
  line-height: 1.15;
}
.fstep-nav { display: flex; gap: 12px; margin-top: 8px; }
.fstep-nav .btn { width: auto; flex: 1; }
.form-card .fstep-nav .btn { width: auto; }
.fstep-nav .btn.back {
  background: transparent; color: var(--navy); border-color: var(--navy); flex: 0 0 auto;
}
.fstep-nav .btn.back:hover { background: var(--navy); color: var(--cream); }
/* fil d'avancement */
.fprogress {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 0 0 26px; padding: 0; list-style: none;
}
.fprogress li {
  width: 34px; height: 5px; border-radius: 99px;
  background: var(--border); transition: background 0.25s ease;
}
.fprogress li.on { background: var(--orange); }
/* récapitulatif de l'étape 3 */
.frecap {
  background: var(--cream-light); border: 2px solid var(--navy);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 20px;
  font-size: 16px; color: var(--ink); line-height: 1.7;
}
.frecap dt {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 12px;
}
.frecap dt:first-child { margin-top: 0; }
.frecap dd { margin: 2px 0 0; font-weight: 600; color: var(--navy); }
.fstep .form-error {
  color: var(--red); font-size: 15px; font-weight: 600;
  margin: 10px 0 0; text-align: center;
}

/* réponse après envoi : le formulaire s'efface et laisse la place au message */
.form-reponse { display: none; text-align: center; padding: 6px 0 2px; }
.form-reponse.visible { display: block; }
.form-reponse .rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--green); color: var(--green); margin-bottom: 16px;
}
.form-reponse .rond svg { width: 30px; height: 30px; }
.form-reponse.ko .rond { border-color: var(--red); color: var(--red); }
.form-reponse h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 30px; font-weight: 400; line-height: 1.2;
  color: var(--navy); margin-bottom: 12px;
}
.form-reponse p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.form-reponse p + p { margin-top: 10px; }

/* ============ VIDÉO ============ */
.video-block { max-width: 860px; margin: 0 auto; }
.video-frame {
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-deep);
  line-height: 0;
}
.video-frame video { width: 100%; height: auto; display: block; }
.video-caption {
  text-align: center; margin-top: 18px;
  font-size: 16.7px; color: var(--ink-soft);
}

/* ============ LEVIERS (BILAN) ============ */
.lev-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; max-width: 980px; margin: 0 auto;
}
.lev {
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 14px; padding: 20px 18px;
  display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 15px; color: var(--navy);
  line-height: 1.25;
}
.lev .ini {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 19px; color: #fff;
}
.lev .ini.c1 { background: #5A9E32; }
.lev .ini.c2 { background: var(--orange); }
.lev .ini.c3 { background: #D9A421; }
.lev .ini.c4 { background: #6B4A9E; }
.lev .ini.c5 { background: #2E9E8F; }
.lev .ini.c6 { background: var(--red); }
.lev .ini.c7 { background: #2F6FB2; }

/* freins du cas client */
.freins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
.frein {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(251,227,176,0.25);
  border-radius: 14px; padding: 22px 18px;
  text-align: center;
}
.frein .ini {
  width: 46px; height: 46px; border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 21px; color: #fff;
}
.frein .ini.i { background: var(--red); }
.frein .ini.a { background: #2F6FB2; }
.frein .ini.f { background: #D9A421; }
.frein p { color: var(--cream); font-size: 16.7px; font-weight: 600; line-height: 1.35; }

.result-box {
  background: rgba(63,174,106,0.12);
  border: 2px solid var(--green);
  border-radius: 14px;
  padding: 24px 26px;
  margin-top: 26px;
}
.result-box p { color: var(--cream); font-size: 15.5px; line-height: 1.65; }
.result-box strong { color: #7BDCA4; }

/* ============ FINAL CTA ============ */
.final { padding: 120px 0; text-align: center; }
.final h2 { color: var(--cream); font-size: clamp(44px, 6vw, 84px); margin-bottom: 26px; line-height: 0.96; font-weight: 800; }
.final h2 em { color: var(--orange-bright); font-size: 1.04em; }
.final p { color: rgba(251,227,176,0.82); font-size: 19px; max-width: 560px; margin: 0 auto 40px; line-height: 1.6; }

/* ============ FOOTER ============ */
.footer { background: var(--navy-deep); padding: 56px 0 30px; color: rgba(251,227,176,0.66); font-size: 16.1px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer .brand-block .nav-logo { margin-bottom: 14px; }
/* baseline de marque en italique (Julien 09/08) */
.footer .brand-block p { max-width: 320px; line-height: 1.6; font-style: italic; }
.footer h4 { color: var(--cream); font-size: 16.1px; margin-bottom: 14px; letter-spacing: 0.04em; }
.footer a { color: rgba(251,227,176,0.66); text-decoration: none; display: block; margin-bottom: 9px; transition: color 0.2s; }
.footer a:hover { color: var(--orange-bright); }
.footer-bottom {
  border-top: 2px solid rgba(214,120,65,0.35); /* trait plus épais et plus visible (Julien 09/08) */
  margin-top: 44px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14.9px; opacity: 0.75;
}
.footer-bottom .links a { display: inline; margin: 0 0 0 18px; }
.footer-credit { text-align: center; margin-top: 18px; font-size: 14.9px; opacity: 0.7; }
.footer-credit a { display: inline; color: inherit; } /* même couleur que le texte voisin (Julien 09/08) */
/* lignes de contact à icône (pack Lucide, même trait 2px que les icônes du site) */
.footer .f-line { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }
/* 🔴 Les icônes du footer sont en ORANGE, à pleine opacité (Julien, 07/09 : « j'ai pas
   d'icône dans le footer »). Elles étaient en crème hérité du texte (66 %) puis
   ré-atténuées à 62 % : ~41 % d'opacité réelle sur du navy quasi noir, donc invisibles.
   L'orange est déjà la couleur d'accent du footer (le sous-titre du lettrage). */
.footer .f-line svg {
  width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px;
  color: var(--orange-bright); transition: color 0.2s;
}
.footer a.f-line:hover svg { color: var(--cream); }
.footer .f-line.f-inline { display: inline-flex; align-items: center; margin: 0 18px 0 0; }
.footer .f-line.f-inline svg { margin-top: 0; }
/* retour en haut de page, dans la ligne des liens légaux */
.footer-bottom .f-top { display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom .f-top svg { width: 15px; height: 15px; color: var(--orange-bright); }
.footer-credit svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; color: var(--orange-bright); }
.footer.slim { padding: 40px 0 26px; }
.footer.slim .footer-slim-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* ============ TUILES INSTAGRAM EN PHOTO (vraies pochettes) ============ */
.ig-tile .ig-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease;
}
.ig-tile:hover .ig-photo { transform: scale(1.09); }
.ig-tile.photo { background: var(--navy); }
.ig-tile.photo .ig-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  top: 12px; right: 12px;
}

/* ============ CTA MILIEU DE PAGE ============ */
.cta-strip { text-align: center; padding: 78px 0; }
/* même échelle que les titres de section (retour Julien 09/08) */
.cta-strip h2 { font-size: clamp(40px, 5.4vw, 68px); margin-bottom: 28px; }
.cta-strip h2 em { color: var(--orange-deep); }
.band-navy .cta-strip h2 em { color: var(--orange-bright); }

/* ============ ILS M'ONT FAIT CONFIANCE (athlètes) ============ */
/* flex + centrage : avec 7 cartes, la 2e rangée de 3 est centrée
   au lieu de coller à gauche (retour Julien 09/08) */
.trust-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 34px 22px; max-width: 1020px; margin: 0 auto 46px;
}
.trust-card { flex: 0 1 calc((100% - 66px) / 4); }
/* cartes blanches, photo carrée pleine largeur en moitié haute (retour Julien 06/08) */
.trust-card {
  background: var(--white); border: 2px solid var(--navy);
  border-radius: 16px; overflow: hidden;
  text-align: center; padding-bottom: 20px;
}
.trust-card .tphoto {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  margin: 0 0 16px; border-bottom: 2px solid var(--navy);
  background: var(--white);
}
.trust-card .tphoto img { width: 100%; height: 100%; object-fit: cover; }
.trust-card strong,
.ath-card h3 {
  display: inline-block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; line-height: 1.15;
  /* nom sur boîte navy en orange, façon surligneurs des titres (Julien 09/08) */
  background: var(--navy); color: var(--cream);
  padding: 5px 12px; border-radius: 6px;
  margin: 0 14px 9px;
}
.trust-card span {
  display: block; font-size: 14.4px; color: var(--ink-soft);
  font-weight: 600; line-height: 1.5;
  padding: 0 14px;
}
.trust-foot { text-align: center; }

/* ============ PHOTOS TÉMOIGNAGES ============ */
.t-card .t-who { display: flex; align-items: center; gap: 16px; }
.t-face {
  flex-shrink: 0; width: 88px; height: 88px;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--navy);
}
.t-face img { width: 100%; height: 100%; object-fit: cover; }
/* photo carrée pleine largeur en tête de carte (retour Julien 06/08) */
.ath-card .ath-photo {
  width: calc(100% + 48px); margin: -28px -24px 18px;
  aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 2px solid var(--navy);
}
.ath-card .ath-photo img { width: 100%; height: 100%; object-fit: cover; }
/* monogramme quand Thomas n'a pas de photo du sportif : la carte garde la
   même silhouette que les autres au lieu de creuser un vide (Julien 07/08) */
/* Zoom au survol des visages, contenu dans le cadre (les 3 conteneurs
   portent déjà overflow: hidden). Demande Julien 08/08. */
.t-face img,
.ath-card .ath-photo img,
.trust-card .tphoto img { transition: transform 0.35s ease; }
.t-card:hover .t-face img,
.ath-card:hover .ath-photo img,
.trust-card:hover .tphoto img { transform: scale(1.09); }
/* les monogrammes ne bougent pas : ce ne sont pas des photos */
.t-card:hover .t-face.mono,
.ath-card:hover .ath-photo.mono { transform: none; }
@media (hover: none) {
  .t-card:hover .t-face img,
  .ath-card:hover .ath-photo img,
  .trust-card:hover .tphoto img,
  .ig-tile:hover .ig-photo { transform: none; }
}

.t-face.mono, .ath-card .ath-photo.mono {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--cream);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  letter-spacing: 0.03em; user-select: none;
}
.t-face.mono { font-size: 27px; }
.ath-card .ath-photo.mono { font-size: clamp(46px, 5vw, 62px); }

/* ============ CAS SPORTIVE (LANDING BILAN) : graphique + photo ============ */
.case-visuals {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 22px; align-items: stretch;
  max-width: 780px; margin: 30px auto;
}
.graph-card {
  background: #fff; border-radius: 16px;
  border: 2px solid rgba(251,227,176,0.35);
  padding: 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.graph-card img { width: 100%; height: auto; }
.graph-card figcaption {
  margin-top: 10px; font-size: 14.4px; font-weight: 600;
  color: var(--ink-soft); text-align: center;
}
.case-photo { border-radius: 16px; overflow: hidden; position: relative; min-height: 300px; }
.case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============ TEXTAREA FORMULAIRE ============ */
.form-field textarea {
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--cream-light);
  padding: 13px 15px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* >= 16px : pas de zoom iOS */
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
  width: 100%; min-height: 110px; resize: vertical;
}
.form-field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }

/* ============ TARIFS : VIGNETTES ALIGNÉES ENTRE ELLES ============ */
.price-cards.three { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
/* Les cartes alignent leurs rangées entre elles (pastille / prix / mention / liste /
   bouton) grâce au subgrid : le « 70 € » et le bouton sont sur la même ligne quel que
   soit le nombre de lignes de la pastille (Julien, 07/09 : « les 70 bien alignés »).
   Même recette pour les 2 grandes vignettes .duo (Thomas, 29/09). */
.price-cards.three .price-card,
.price-cards.duo .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-items: start; justify-items: center; }
.price-cards.three .price-card { padding: 42px 26px 36px; } /* padding réduit : entre 1024 et 1200px, la 3e pastille passait sur 3 lignes */
.price-cards.three .price-card .btn,
.price-cards.duo .price-card .btn { margin-top: 0; align-self: end; }
.price-cards.three .price-card .amount,
.price-cards.duo .price-card .amount { align-self: end; }
/* pastille plus compacte à 3 colonnes : elle tient sur 2 lignes, coupées à la main */
.price-cards.three .price-card .pill { font-size: 13.6px; letter-spacing: 0.08em; padding: 9px 16px; line-height: 1.45; }
/* « À partir de » : ligne discrète au-dessus du montant, dans la même rangée */
.price-card .amount .from {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 17.1px; font-weight: 600; letter-spacing: 0;
  color: var(--ink-soft); line-height: 1.25; margin-bottom: 3px;
}

/* ============ RESPONSIVE ============ */

/* Seuil du menu burger, SÉPARÉ du seuil de mise en page (1024px).
   Avec les liens à 16.1px, le menu desktop réclame 1110px + 56px de padding
   conteneur : en dessous de ~1170px il déborde et « Qui suis-je » se coupait
   sur son trait d'union. On passe donc au burger dès 1200px, sans toucher
   aux colonnes du reste du site. */
@media (max-width: 1200px) {
  .nav-links {
    /* ancré sous le header, quelle que soit sa hauteur (avant : 64px en dur) */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--navy);
    padding: 10px 0 24px; flex: initial; justify-content: initial;
    transform: translateY(-130%); transition: transform 0.35s ease;
  }
  .nav-links.active { transform: translateY(0); }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 15px 0; }
  .nav-mobile-only { display: list-item; }
  .nav-cta.nav-desktop-only { display: none; }
  .hamburger { display: flex; }
  /* CTA du menu burger : boîte plus généreuse, le texte était à l'étroit */
  .nav-mobile-only .nav-cta {
    display: inline-block; margin-top: 16px;
    padding: 16px 30px; font-size: 17.5px; border-radius: 11px;
  }
  .nav-links li { padding: 2px 0; }
}

@media (max-width: 1024px) {
  .hero-grid, .split, .split.rev { grid-template-columns: 1fr; gap: 52px; }
  .hero-visual, .split .visual { max-width: 440px; margin: 0 auto; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  .steps, .steps.three { grid-template-columns: repeat(2, 1fr); }
  /* « L'APPROFONDISSEMENT » (qui suis-je) sortait de sa carte de 39 px entre 641 et 750 px */
  .step .lbl { font-size: 14px; letter-spacing: 0.10em; }
  .cabinet-grid { grid-template-columns: 1fr 1fr; }
  .cabinet-grid .shot.wide { grid-column: 1 / -1; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .feature .ph { min-height: 300px; }
  .vid-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .t-grid { columns: 1; max-width: 560px; margin-left: auto; margin-right: auto; }
  .ath-card { flex-basis: calc((100% - 22px) / 2); }
  .lev-grid { grid-template-columns: repeat(2, 1fr); }
  .price-cards, .price-cards.three { grid-template-columns: 1fr; max-width: 520px; }
  .trust-card { flex-basis: calc((100% - 22px) / 2); }
  .case-visuals { grid-template-columns: 1fr; max-width: 480px; }
  /* Le reste du site passe en une colonne ici. Le footer garde deux colonnes
     (Navigation | Contact) et la marque prend toute la largeur : à trois colonnes,
     « Nutrition du sport » et « Témoignages sportifs » se repliaient sur deux lignes
     une fois leur icône posée (mesuré à 768px). */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .footer-grid .brand-block { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .pad { padding: 70px 0; }
  .hero { padding: 44px 0 70px; }
  .page-hero { padding: 48px 0 64px; }
  .hero-sticker, .hero-badge { display: none; }
  .steps, .steps.three, .ig-grid, .cabinet-grid, .lev-grid, .freins { grid-template-columns: 1fr; }
  .ath-card { flex-basis: 100%; }
  .cabinet-grid .shot { min-height: 220px; }
  .trust-grid { gap: 22px; }
  .quote-portrait { width: 190px; height: 190px; }
  .cta-strip { padding: 64px 0; }
  .split .sticker { font-size: 15px; padding: 12px 16px; max-width: 200px; }
  .feature .txt { padding: 40px 26px; }
  .feature .ph .inset { width: 100px; height: 100px; }
  .form-card { padding: 32px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; }
  .footer-bottom .links a { margin: 0 18px 0 0; }
}

/* ============ APPARITION LÉGÈRE AU SCROLL (Julien 09/08) ============
   Classes posées par assets/js/reveal.js, retirées après l'animation
   (transitionend) pour rendre aux cartes leurs transitions de survol. */
/* la transition vit sur .rv-in UNIQUEMENT : sur .rv, l'ajout de la classe au chargement
   animait un fondu vers l'état masqué, dont le transitionend déclenchait le nettoyage
   et tuait toute l'animation (bug corrigé le 09/08) */
.rv, .rv-grid > * { opacity: 0; transform: translateY(26px); }
.rv.rv-in, .rv-grid.rv-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* cascade des cartes portée par le CSS, jamais par un délai posé en JS :
   les cartes arrivent l'une après l'autre, de gauche à droite.
   Retards resserrés le 29/09 (retour Thomas : « les vignettes mettent 1 à 2
   secondes à apparaître ») : la dernière carte d'une grille passait à
   840 ms + 600 ms = 1,44 s après le déclenchement, elle est maintenant à 0,72 s. */
.rv-grid.rv-in > *:nth-child(2) { transition-delay: 60ms; }
.rv-grid.rv-in > *:nth-child(3) { transition-delay: 120ms; }
.rv-grid.rv-in > *:nth-child(4) { transition-delay: 180ms; }
.rv-grid.rv-in > *:nth-child(5) { transition-delay: 240ms; }
.rv-grid.rv-in > *:nth-child(6) { transition-delay: 300ms; }
.rv-grid.rv-in > *:nth-child(n+7) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-grid > * { opacity: 1; transform: none; transition: none; }
}

/* ============ CARTE GOOGLE MAPS (section cabinet, Julien 09/08) ============ */
.map-frame {
  max-width: 860px; margin: 30px auto 0;
  border: 2px solid var(--navy); border-radius: 18px;
  overflow: hidden; /* les coins de l'iframe épousent l'arrondi */
}
.map-frame iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (max-width: 600px) {
  .map-frame iframe { height: 240px; }
}

/* ============ CARTES HORIZONTALES « POUR QUI » (Julien 09/08) ============ */
/* flex + centrage : avec un nombre impair de cartes, la dernière rangée est
   centrée au lieu de coller à gauche (Julien 09/08) */
.gain-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  max-width: 920px; margin: 0 auto;
}
.gain-card { flex: 0 1 calc((100% - 22px) / 2); }
.gain-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 2px solid var(--navy); border-radius: 16px;
  padding: 22px 26px;
  font-size: 17.3px; font-weight: 600; color: var(--ink); line-height: 1.45;
  text-align: left; /* carte horizontale icône + texte : le centrage ne s'applique pas ici */
}
.gain-card .ck {
  flex-shrink: 0; width: 34px; height: 34px;
  background: var(--green); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gain-card .ck svg { width: 16px; height: 16px; }
.gain-card .ck.no { background: var(--red); }
/* logo de la structure à la place de la pastille verte (demande Thomas 15/09) :
   même gabarit de flex-item, fond transparent, le logo ne se déforme jamais */
.gain-card .logo-struct {
  flex-shrink: 0; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.gain-card .logo-struct img { width: 100%; height: 100%; object-fit: contain; }
/* logo en largeur (université, école) : même hauteur, case plus large (Thomas 07/10) */
.gain-card .logo-struct.large { width: 84px; }
.gain-note { text-align: center; max-width: 660px; margin: 34px auto 0; font-size: 18px; }
@media (max-width: 700px) {
  .gain-card { flex-basis: 100%; }
}

/* ============ PAGES LÉGALES ============ */
.prose.legal { max-width: 760px; text-align: left; }
.prose.legal h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin: 46px 0 14px;
}
.prose.legal h2:first-child { margin-top: 0; }
.prose.legal h3 {
  font-size: 20px; margin: 26px 0 8px; color: var(--navy);
}
.prose.legal p { margin-bottom: 14px; }
.prose.legal a { color: var(--orange-deep); font-weight: 600; }
.prose.legal a:hover { text-decoration: underline; }
/* emplacement à compléter par le client : visible, impossible à oublier */
.prose.legal .todo {
  display: inline-block;
  background: var(--orange); color: var(--white);
  padding: 2px 9px; border-radius: 5px;
  font-size: 0.92em; font-weight: 600;
}

/* variantes de grilles (ex-styles en dur de formation.html : un style inline
   écrase les media queries, la grille restait à 2 colonnes sous 600px) */
.cards.one { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.steps.two { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 34px auto 0; }
.steps.prix { max-width: 1000px; margin: 34px auto 0; }
.band-lead { text-align: center; }
.band-navy .band-lead { color: rgba(251,227,176,0.78); }
.trust-foot { margin-top: 38px; }
@media (max-width: 700px) {
  .steps.two { grid-template-columns: 1fr; }
}
/* Sécurité anti-débordement, valable partout : un champ de formulaire a une
   largeur minimale intrinsèque qui peut faire déborder sa colonne de grille. */
.form-card input, .form-card select, .form-card textarea { max-width: 100%; min-width: 0; }
.form-field { min-width: 0; }
@media (max-width: 600px) {
  /* la photo passe au-dessus du nom : elle grandit encore et le palmarès
     récupère toute la largeur de la bulle (retour Thomas 15/09) */
  .t-card .t-who { flex-direction: column; align-items: flex-start; gap: 13px; }
  .t-face { width: 104px; height: 104px; }
  .t-face.mono { font-size: 32px; }
  .price-card { padding: 34px 20px 28px; }
  .price-card li { font-size: 17.4px; }
  .gain-card { padding: 18px 18px; font-size: 16.5px; }
  .step { padding: 28px 20px; }
  .card { padding: 34px 22px 28px; }
}

/* ============ TRÈS PETITS ÉCRANS (≤380px) ============
   Le mot le plus long du site (« accompagnement ») ne tient pas dans la
   largeur utile d'un iPhone SE à 40px de corps : il débordait de 42px et
   se faisait rogner. On réduit les titres plutôt que de couper les mots. */
@media (max-width: 380px) {
  /* logo de structure réduit : à 320px, « Outsiders Academy » (insécable)
     débordait de 5px de sa carte depuis que le logo a remplacé la pastille */
  .gain-card .logo-struct { width: 44px; height: 44px; }
  .gain-card .logo-struct.large { width: 66px; }
  /* .h2-fit garde son propre clamp (28px au plus bas) : le forcer à 33px ici
     faisait déborder « l'accompagnement » de 3px à 320px (mesuré le 29/09) */
  .section-head h2,
  .split-text h2, .prose h2, .cta-strip h2 { font-size: 33px; }
  .page-hero h1, .hero h1 { font-size: 38px; } /* 40px rognait « Physiologique » de 3px à 320px */
  .final h2 { font-size: 38px; }
}
/* filet de sécurité : un mot trop long casse plutôt que de déborder */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.hl, .hl-navy { max-width: 100%; }

/* 16px minimum sur TOUT champ de formulaire, honeypot compris :
   sous 16px, Safari iOS zoome au tap et la page zoomée devient scrollable
   horizontalement (cause n°1 du scroll parasite sur iPhone). */
input, select, textarea, button { font-size: max(16px, 1em); }

/* rangée de pastilles sous un titre de bande (formation 1v1) : évite deux
   paragraphes qui se suivent et donne du rythme (Julien 10/08) */
.creds-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin: 26px auto 18px; max-width: 760px;
}
.band-navy .creds-row .cred {
  background: rgba(255,255,255,0.06);
  border-color: rgba(251,227,176,0.3);
  color: var(--cream);
}
.band-lead.petit { font-size: 16.5px; opacity: 0.85; }

/* survol des cartes tarif de la bande formation, comme les autres cartes */
.steps.two .step,
.steps.prix .step { transition: transform 0.22s ease, border-color 0.22s ease; }
.steps.two .step:hover,
.steps.prix .step:hover { transform: translateY(-6px); border-color: var(--orange); }
@media (hover: none) {
  .steps.two .step:hover,
  .steps.prix .step:hover { transform: none; }
}

/* carte horizontale cliquable (structures suivies) : même boîte, plus un survol */
a.gain-card { text-decoration: none; transition: transform 0.22s ease, border-color 0.22s ease; }
a.gain-card:hover { transform: translateY(-4px); border-color: var(--orange); }
.gain-card strong {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.06em; line-height: 1.25; margin-bottom: 2px;
}
.gain-card span { line-height: 1.4; }
@media (hover: none) { a.gain-card:hover { transform: none; } }

/* ============ INTERTITRE DE SOUS-BLOC ============ */
.sub-head { text-align: center; margin: 56px 0 24px; }

/* ============ CHUTE DE SECTION ============
   Remplace un dernier paragraphe noyé dans la prose : la phrase de conclusion
   se détache, sans devenir un titre. */
.closing {
  text-align: center; max-width: 700px; margin: 52px auto 0;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; color: var(--navy);
  padding-top: 34px; border-top: 2px solid rgba(14,27,48,0.16);
}
.closing em { color: var(--orange-deep); font-size: 1.06em; }
.band-navy .closing { color: var(--cream); border-top-color: rgba(251,227,176,0.22); }
.band-navy .closing em { color: var(--orange-bright); }

/* ============ HARMONIE DES SAUTS DE LIGNE SUR MOBILE ============
   Les <br> des paragraphes sont posés pour la largeur DESKTOP. Sous 600px ils
   se replient et fabriquent des lignes d'un ou deux mots. Ils sont donc rendus
   inopérants (pattern .br-desktop) et le texte coule naturellement, les &nbsp;
   déjà présents empêchant les mots orphelins. Les titres gardent leurs coupes. */
@media (max-width: 600px) {
  .hero .lead, .page-hero .lead { max-width: none; }
  .prose p, .split-text > p, .section-head p { text-wrap: pretty; }
  .closing { font-size: 20px; padding-top: 28px; margin-top: 40px; }
}

/* Équilibrage des fins de ligne confié au navigateur : évite les mots
   orphelins bien mieux qu'''une insécable posée à la main, et s'''adapte à
   toutes les largeurs. Chrome 117+ / Safari 17.5+, ignoré ailleurs. */
p, li, blockquote, figcaption, .gain-card span, .cred, .closing {
  text-wrap: pretty;
}
h1, h2, h3, .amount { text-wrap: balance; }
/* Textes courts en carte : `balance` répartit les mots équitablement sur les
   lignes plutôt que de remplir puis laisser un reste. C'est ce qui donne des
   coupes harmonieuses sur mobile sans insécable posée à la main. */
.step p, .card p, .trust-card span, .ath-card .sport, .cred { text-wrap: balance; }
/* PAS d'équilibrage sur les puces de tarif ni les cartes à icône : l'algorithme
   y préfère « Accompagnement » seul sur la 1re ligne pour équilibrer les
   largeurs, alors que « Accompagnement individuel » tient (mesuré 234px pour
   256 disponibles). On laisse le remplissage naturel. */
.gain-card span, .price-card li span { text-wrap: wrap; }

/* ============ CARTES : AUTORISER LE RÉTRÉCISSEMENT ============
   Par défaut, un enfant de grille ou de flex refuse de descendre sous sa
   largeur min-content : sur un écran de 320px, une carte se met alors à
   déborder son conteneur et se fait rogner par l'overflow. `min-width: 0`
   lève ce plancher et laisse le texte se replier normalement. */
.cards > *, .steps > *, .price-cards > *, .gain-grid > *, .trust-grid > *,
.ath-grid > *, .freins > *, .ig-grid > *, .t-grid > *, .cabinet-grid > *,
.t-who > div, .gain-card > span, .cred { min-width: 0; }

/* Marges intérieures resserrées sur les petits écrans : à 320px, un padding
   de 30px de chaque côté ne laisse plus assez de place au contenu, la carte
   refuse de rétrécir et se fait rogner. */
@media (max-width: 600px) {
  .t-card { padding: 30px 20px 24px; }
  .t-card .t-who { gap: 10px; }
  .t-face { width: 50px; height: 50px; }
  .price-card { padding: 32px 16px 26px; }
  .price-card ul { max-width: none; width: 100%; align-self: stretch; }
  .step { padding: 26px 16px; }
  .card { padding: 32px 18px 26px; }
  .gain-card { padding: 16px 14px; gap: 12px; }
}

/* Les puces à coche sont des conteneurs flex : leur texte doit aussi pouvoir
   descendre sous sa largeur min-content, sinon la liste déborde la carte. */
.price-card li, .price-card li > span,
.prose ul li, .prose ul li > span,
.check-list li, .check-list li > span { min-width: 0; }

/* La liste des puces est un enfant flex de la carte : sans largeur explicite
   elle se dimensionne sur son contenu et dépasse la carte à 320px. */
.price-card ul { width: 100%; align-self: stretch; }

/* header plus bas sur téléphone (66-82px mesurés) : l'ancre doit suivre */
@media (max-width: 600px) { html { scroll-padding-top: 84px; } }