:root{
  --ink:#111111;
  --ink-soft:#55524c;
  --white:#ffffff;
  --off:#faf9f7;
  --gold:#b8925a;
  --gold-dark:#96703f;
  --gold-pale:#f3e9da;
  --line:rgba(17,17,17,0.09);
  --shadow:0 4px 30px rgba(17,17,17,0.05);
  --radius:20px;
  --maxw:1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* overflow-x:hidden ici (pas juste sur .greviews__list) : 100vw dans le
   breakout plein écran du bandeau d'avis est plus large que la fenêtre
   visible dès qu'une barre de défilement verticale existe (elle compte dans
   100vw mais pas dans la largeur réellement visible) — sans ce filet, ça
   crée une barre de défilement horizontale sur tout le site. */
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
}
sup{font-size:0.55em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%; height:auto; display:block;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* padding-right réserve la zone de la bulle .nav-bubble (fixed, ~212px de
   large) — 240px ne laissait que ~4px de marge réelle avec le lien "Coaching"
   ajouté le 29/09 (justify-content:space-between colle .nav__links à cette
   limite quelle que soit la largeur de son contenu, donc réduire la police
   des liens ne change rien à cette marge : seul ce padding la contrôle). */
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px; padding-right:270px;}
.logo{
  display:inline-flex; align-items:center;
  transition:opacity .2s ease; flex-shrink:0;
}
.logo:hover{opacity:0.75;}
.logo__mark{height:34px; width:auto;}
/* Ajout du lien "Coaching" (29/09) : le 7e lien (avec Actualité, sur les
   pages qui l'ont) ne laissait plus que ~4px avant la bulle flottante
   .nav-bubble à 1280px (--maxw) — gap et taille de police resserrés pour
   retrouver une vraie marge plutôt que de frôler le chevauchement. */
.nav__links{display:flex; align-items:center; gap:16px; flex-wrap:nowrap;}
.nav__links a{
  font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:color .2s; position:relative;
  padding-bottom:4px; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold);
  transition:width .25s ease;
}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after, .nav__links a.is-active::after{width:100%;}
.nav__links a.is-active{color:var(--ink);}
.nav__links .nav__mobile-cta{display:none;}
.nav__links a.nav__mobile-cta,
.nav__links a.nav__mobile-cta:hover{color:var(--white); padding-bottom:0;}
.nav__links a.nav__mobile-cta::after{display:none;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; flex-shrink:0;}
.burger span{width:22px; height:1.5px; background:var(--ink);}

/* Ancien mécanisme "nav transparente sur héros plein cadre" — n'a plus lieu
   d'être depuis que l'accueil n'a plus de héros plein cadre en photo (nav
   fixed+transparente qui se superposait au bandeau de preuve sur mobile,
   relevé le 28/09). La nav de l'accueil suit maintenant le même
   sticky/opaque que les autres pages. */

/* ---------- FLOATING BOOKING BUBBLE ---------- */
.nav-bubble{
  position:fixed; top:16px; right:24px; z-index:200;
  padding:10px 20px; font-size:13px; box-shadow:0 8px 20px -6px rgba(17,17,17,0.35);
}
.nav-bubble:hover{transform:translateY(-2px) scale(1.03);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:14.5px;
  transition:opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap; border:1.5px solid transparent;
}
.btn--primary{background:var(--ink); color:var(--white);}
.btn--primary:hover{opacity:0.9; transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(17,17,17,0.35);}
.btn--secondary{border-color:var(--gold); color:var(--ink); background:var(--white);}
.btn--secondary:hover{background:var(--gold-pale); transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(184,146,90,0.4);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn--block{width:100%; margin-top:24px;}
.btn--sm{padding:10px 20px; font-size:13.5px;}

/* ---------- HERO ---------- */
/* Photo pleine largeur (accompagnement humain, un vrai visage plutôt qu'une
   décoration abstraite) sous un voile dégradé, header fixe qui devient opaque
   au scroll — même traitement que le hero YLEVIO Académie, calibré sur la
   position de texte déjà en place ici (.wrap max-width:1280px padding:0 24px). */
.hero{
  position:relative;
  background:#14110d; color:#f5f1ea;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(84px + 28px) 0 clamp(44px,6vh,76px);
  overflow:hidden;
  isolation:isolate;
}
@keyframes bgDrift{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.04) translate(-8px,6px);}
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:62% 38%;
}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(12,11,9,.88) 0%, rgba(12,11,9,.68) 34%, rgba(12,11,9,.32) 60%, rgba(12,11,9,.08) 82%);
}
.hero > .wrap{position:relative; z-index:2; width:100%;}
.hero__inner{max-width:640px; margin:0; text-align:left; position:relative; z-index:2;}
.eyebrow{
  color:var(--gold-dark); font-weight:700; font-size:12.5px; letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:22px;
}
.hero .eyebrow{color:var(--gold);}
.hero h1{
  font-family:'Manrope', sans-serif; font-weight:600; font-size:clamp(38px,5.6vw,72px);
  line-height:1.05; letter-spacing:-0.01em; text-wrap:balance; color:#faf7f2;
}
.hero .accent{color:var(--gold); font-style:italic;}
.hero__lead{margin:26px 0 0; font-size:17.5px; color:rgba(245,241,234,0.72); max-width:540px; position:relative; z-index:1; line-height:1.65;}
.hero__inner .btn{margin-top:40px;}
.hero__ctas{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hero .btn--primary{background:var(--gold); color:#1a1408;}
.hero .btn--primary:hover{opacity:1; background:#c9a066; box-shadow:0 14px 30px -10px rgba(184,146,90,0.55);}
.hero__cta-secondary{
  margin-top:40px; font-family:'Manrope', sans-serif; font-weight:700; font-size:14px;
  color:rgba(250,247,242,0.88); border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.hero__cta-secondary:hover{color:var(--gold); border-color:var(--gold);}
/* Sous 1024px, .hero__inner restait plafonné à 640px alors que le hero
   Académie équivalent (.hero__text) laisse sa colonne remplir le conteneur
   disponible en dessous de ce seuil — décalage relevé en retour terrain. */
@media (max-width:1023px){
  .hero__inner{max-width:none; width:100%;}
}

/* ---------- FORK (conseiller / agence) ---------- */
.fork__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:56px auto 0;
  position:relative; z-index:1;
}
.fork__card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:22px 24px;
  transition:border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.fork__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.fork__card:hover::before{transform:scaleX(1);}
.fork__link{position:absolute; inset:0; border-radius:16px; z-index:1;}
.fork__card:hover{border-color:var(--gold); transform:translateY(-6px) scale(1.015); box-shadow:0 22px 42px -20px rgba(17,17,17,0.2);}
.fork__label{font-weight:700; font-size:15px;}
.fork__desc{font-size:13px; color:var(--ink-soft);}
.fork__cta{margin-top:8px; font-size:12.5px; font-weight:700; color:var(--gold-dark);}


/* ---------- SECTION SHARED ---------- */
.section-kicker{
  text-align:center; text-transform:uppercase; letter-spacing:0.14em; font-size:12.5px;
  font-weight:700; color:var(--gold-dark); margin-bottom:14px;
}
.section-title{text-align:center; font-size:clamp(24px,3vw,32px); max-width:680px; margin:0 auto 20px;}
.section-subtitle{text-align:center; color:var(--ink-soft); max-width:560px; margin:0 auto 50px; font-size:15.5px;}

/* ---------- AVIS GOOGLE ---------- */
/* Le bandeau d'avis écrits n'apparaît que si l'appel Google Places
   (script.js) répond — sinon il reste masqué et seul le petit lien de
   secours vers Google reste visible, pour ne jamais laisser la section
   vide. Défilement en boucle : même technique que le bandeau de la page
   d'accueil Ilotis (contenu dupliqué une fois, translateX 0 -> -50% en
   boucle infinie, pause au survol). */
.greviews{margin:28px auto 0;}
.greviews__fallback-link:not([hidden]){display:inline-flex; margin-top:24px; font-weight:600; color:var(--gold-dark);}
/* Bandeau plein écran : sort du conteneur centré (.wrap/.greviews) pour
   occuper toute la largeur de la fenêtre, comme le bandeau de sources de
   données de la page d'accueil Ilotis. */
.greviews__list{position:relative; left:50%; width:100vw; margin-left:-50vw; margin-top:24px; overflow:hidden; text-align:left; padding:8px 0; mask-image:linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);}
.greviews__track{display:flex; width:max-content; gap:20px; padding-left:24px; animation:greviews-scroll 45s linear infinite;}
.greviews__list:hover .greviews__track{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){ .greviews__track{animation:none;} }
@keyframes greviews-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.greviews__group{display:flex; gap:20px; flex-shrink:0;}
.greview-card{border:1px solid var(--line); border-radius:14px; background:var(--white); padding:22px 24px; box-shadow:var(--shadow); width:320px; flex-shrink:0;}
.greview-card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.greview-card__who{display:flex; align-items:center; gap:10px; min-width:0;}
.greview-card__avatar{width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--gold-pale); flex-shrink:0;}
.greview-card__id{min-width:0;}
.greview-card__name{font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;}
.greview-card__stars{color:var(--gold-dark); letter-spacing:1px; font-size:12.5px; margin-top:2px;}
.greview-card__meta{font-size:12px; color:var(--ink-soft); white-space:nowrap; flex-shrink:0;}
.greview-card__text{margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
.greview-card__text::before{content:'\201C'; font-family:'Manrope', sans-serif; color:var(--gold); font-size:26px; margin-right:2px;}

/* ---------- PROMESSE ---------- */
.promesse{padding:60px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.promesse__portrait{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px;}
.promesse__portrait img, .promesse__portrait-placeholder{
  width:116px; height:116px; border-radius:50%; object-fit:cover;
  box-shadow:0 8px 22px -8px rgba(17,17,17,.28);
}
.promesse__portrait-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-pale); color:var(--gold-dark);
  font-family:'Manrope', sans-serif; font-size:26px; font-weight:700;
  border:1px dashed var(--gold);
}
.promesse__name{font-size:13.5px; font-weight:800; color:var(--ink); text-align:center;}
.promesse__name span{display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--ink-soft);}
.promesse__text{
  text-align:center; max-width:760px; margin:0 auto; font-size:clamp(19px,2.4vw,25px);
  font-weight:500; color:var(--ink); line-height:1.5;
}
.promesse__text strong{color:var(--gold-dark);}
.promesse__sub{
  text-align:center; max-width:640px; margin:18px auto 0; font-size:15px;
  color:var(--ink-soft); line-height:1.6;
}
.promesse__stats{
  display:flex; justify-content:center; flex-wrap:wrap; gap:40px 56px;
  max-width:640px; margin:36px auto 0;
}
.promesse__stat{text-align:center;}
.promesse__stat strong{
  display:block; font-family:'Manrope', sans-serif; font-size:clamp(30px,4vw,40px);
  font-weight:700; color:var(--gold-dark); line-height:1.1;
}
.promesse__stat span{
  display:block; margin-top:4px; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- PARCOURS CLIENT / TIMELINE ---------- */
.parcours-client{padding:90px 0; background:var(--off);}
.timeline{max-width:520px; margin:50px auto 0; position:relative;}
.timeline::before{
  content:""; position:absolute; left:19px; top:6px; bottom:6px; width:1.5px; background:var(--gold);
}
.timeline li{display:flex; align-items:center; gap:20px; padding:13px 0; position:relative;}
.timeline__num{
  width:38px; height:38px; border-radius:50%; background:var(--white); border:1.5px solid var(--gold);
  color:var(--gold-dark); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.timeline li:hover .timeline__num{background:var(--gold); color:var(--white); transform:scale(1.1);}
.timeline__label{font-size:15px; color:var(--ink-soft); font-weight:500; transition:color .25s ease;}
.timeline li:hover .timeline__label{color:var(--ink);}
.timeline li.reveal.in .timeline__num{animation:numPop .5s ease-out backwards;}
@keyframes numPop{
  0%{transform:scale(.6); opacity:0;}
  60%{transform:scale(1.18); opacity:1;}
  100%{transform:scale(1);}
}
.timeline li:nth-child(1){transition-delay:0s;}
.timeline li:nth-child(1) .timeline__num{animation-delay:.1s;}
.timeline li:nth-child(2){transition-delay:.05s;}
.timeline li:nth-child(2) .timeline__num{animation-delay:.15s;}
.timeline li:nth-child(3){transition-delay:.1s;}
.timeline li:nth-child(3) .timeline__num{animation-delay:.2s;}
.timeline li:nth-child(4){transition-delay:.15s;}
.timeline li:nth-child(4) .timeline__num{animation-delay:.25s;}
.timeline li:nth-child(5){transition-delay:.2s;}
.timeline li:nth-child(5) .timeline__num{animation-delay:.3s;}
.timeline li:nth-child(6){transition-delay:.25s;}
.timeline li:nth-child(6) .timeline__num{animation-delay:.35s;}

/* ---------- DIAGNOSTIC ---------- */
.diagnostic-section{padding:90px 0;}
.diagnostic-layout{display:grid; grid-template-columns:0.75fr 1.25fr; gap:40px; align-items:center; max-width:1040px; margin:0 auto;}
.diagnostic-layout__media{border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5;}
.diagnostic-layout__media img{width:100%; height:100%; object-fit:cover; display:block;}
.diagnostic-layout .diagnostic{max-width:none; margin:0;}
.diagnostic{
  max-width:760px; margin:0 auto; background:var(--white); border:1px solid var(--line);
  border-radius:24px; padding:44px; box-shadow:var(--shadow);
}
.diagnostic.reveal{transition:opacity .4s ease, transform .3s ease, box-shadow .3s ease;}
.diagnostic.reveal:hover{transform:translateY(-4px); box-shadow:0 20px 44px -20px rgba(17,17,17,0.18);}
.diagnostic__grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:40px;}
.diagnostic__cta-secondary{
  display:block; text-align:center; margin-top:16px; font-family:'Manrope', sans-serif; font-weight:700;
  font-size:13.5px; color:var(--ink-soft); border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.diagnostic__cta-secondary:hover{color:var(--gold-dark); border-color:var(--gold-dark);}
.price{font-weight:800; font-size:34px; color:var(--ink);}
.price span{font-size:34px;}
.price-sub{color:var(--gold-dark); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; margin-top:8px;}
.checklist li{
  position:relative; padding-left:24px; margin-bottom:12px; font-size:14.5px; color:var(--ink-soft);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.checklist--highlight{color:var(--gold-dark); font-weight:700;}

/* ---------- BULLE FLOTTANTE "NOUS CONTACTER" ----------
   Deuxième bulle, sous la bulle de réservation existante (.nav-bubble) —
   même position fixe/desktop-only, mais en style secondaire (gold outline)
   pour rester visuellement en retrait par rapport au CTA principal. Pointe
   vers la page de contact centralisée sur le Hub (ylevio.fr/contact.html),
   partagée avec le site Hub plutôt que dupliquée ici (retour Maxime,
   18/09/2026 : un formulaire complet en pleine page cassait le rythme du
   site — la page dédiée vit désormais côté Hub). */
.nav-bubble--contact{top:auto; bottom:20px; box-shadow:0 8px 20px -6px rgba(17,17,17,0.18);}

.callouts{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:36px; padding-top:32px;
  border-top:1px solid var(--line);
}
.guarantee{
  display:flex; gap:14px; align-items:flex-start; color:var(--gold-dark);
  background:var(--gold-pale); border-radius:18px; padding:20px;
}
.guarantee strong{color:var(--ink); font-size:14.5px; display:block; margin-bottom:4px;}
.guarantee p{color:var(--ink-soft); font-size:13.5px;}

/* ---------- SANS ENGAGEMENT (à la carte) ---------- */
.a-la-carte{padding:90px 0; background:var(--off);}
.a-la-carte__panel{
  margin:50px auto 0; max-width:820px; padding:44px 46px;
  background:var(--white); border:1px solid var(--line); border-radius:28px;
  box-shadow:0 4px 24px rgba(17,17,17,0.05);
}
.a-la-carte__durations{display:grid; grid-template-columns:1fr 1fr; margin:24px 0 32px;}
.a-la-carte__duration{padding:0 30px;}
.a-la-carte__duration:first-child{padding-left:0;}
.a-la-carte__duration:last-child{padding-right:0;}
.a-la-carte__duration + .a-la-carte__duration{border-left:1px solid var(--line);}
.a-la-carte__duration h3{font-size:16px; font-weight:700; color:var(--ink);}
.a-la-carte__duration h3 span{display:block; font-weight:500; font-size:13px; color:var(--ink-soft); margin-top:2px;}
.a-la-carte__duration .checklist{margin-top:14px;}
@media (max-width:720px){
  .a-la-carte__durations{grid-template-columns:1fr; gap:28px;}
  .a-la-carte__duration{padding:0;}
  .a-la-carte__duration + .a-la-carte__duration{border-left:none; border-top:1px solid var(--line); padding-top:24px;}
}

/* ---------- ACCOMPAGNEMENTS ---------- */
.accompagnements{padding:90px 0;}
.shared{text-align:center; color:var(--ink-soft); font-size:14px; max-width:680px; margin:0 auto 12px;}
.shared--note{font-size:12.5px; color:var(--gold-dark); margin-bottom:50px;}
.founding-offer{
  display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;
  max-width:600px; margin:44px auto 0; padding:22px 28px;
  background:var(--gold-pale); border:1px solid rgba(184,146,90,0.35); border-radius:18px;
}
.founding-offer strong{font-size:14.5px; color:var(--gold-dark);}
.founding-offer p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.availability-badge{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content; margin:32px auto 0; padding:8px 18px;
  background:var(--gold-pale); border:1px solid rgba(184,146,90,0.35); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--gold-dark);
}
.availability-badge__dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;
  animation:availabilityPulse 2.4s ease-in-out infinite;
}
@keyframes availabilityPulse{
  0%, 100%{opacity:1; transform:scale(1);}
  50%{opacity:.45; transform:scale(0.8);}
}
.duration-selector{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.duration-selector__btn{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink-soft);
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 20px; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.duration-selector__btn:hover{border-color:var(--gold);}
.duration-selector__btn.is-active{
  background:var(--ink); border-color:var(--ink); color:var(--white);
}
.duration-selector__save{
  font-size:11px; font-weight:700; color:var(--gold-dark); background:var(--gold-pale);
  border-radius:999px; padding:2px 7px;
}
.duration-selector__btn.is-active .duration-selector__save{color:var(--ink); background:var(--gold);}
.duration-selector__note{
  text-align:center; font-size:13px; color:var(--ink-soft); margin-bottom:40px;
}
.duration-selector__engagement{
  text-align:center; font-size:13px; color:var(--ink-soft); margin-top:32px;
}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:stretch;}
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:34px; display:flex; flex-direction:column; position:relative; min-width:0;
}
/* min-width:0 + .btn white-space:normal ci-dessous : sans ça, un CTA long
   en white-space:nowrap (voir .btn) force sa piste de grille à sa largeur
   de texte complète et peut déborder la grille — même bug que celui déjà
   corrigé sur mobile le 28/09 (voir plus bas), gardé ici en général plutôt
   que de le re-découvrir à la prochaine formule ajoutée. */
.plan .btn{white-space:normal; text-align:center;}
.plan.reveal{transition:opacity .4s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.plan.reveal:hover{transform:translateY(-8px); box-shadow:0 24px 44px -22px rgba(17,17,17,0.2); border-color:rgba(17,17,17,0.16);}
.plan--featured{border:2px solid var(--gold); animation:planGlow 4s ease-in-out infinite alternate;}
.plan--featured.reveal:hover{transform:translateY(-8px) scale(1.015); box-shadow:0 24px 50px -20px rgba(184,146,90,0.35);}
@keyframes planGlow{
  0%{box-shadow:0 0 0 rgba(184,146,90,0);}
  100%{box-shadow:0 0 32px -6px rgba(184,146,90,0.45);}
}
.pricing .plan:nth-child(1){transition-delay:0s;}
.pricing .plan:nth-child(2){transition-delay:.08s;}
.pricing .plan:nth-child(3){transition-delay:.16s;}
.pricing .plan:nth-child(4){transition-delay:.24s;}
.plan__ribbon{
  position:absolute; top:-13px; right:24px; background:var(--gold); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:0.04em;
  padding:6px 14px; border-radius:999px;
}
.plan__tag{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-dark); margin-bottom:12px; display:block;}
.plan h3{font-size:21px; margin-bottom:10px;}
.plan__price{font-weight:800; font-size:28px; margin-bottom:4px;}
.plan__price span{font-size:28px;}
.plan__price-total{font-size:13px; color:var(--ink-soft); margin-bottom:14px;}
.plan__price-desc{font-size:14px; color:var(--ink-soft); line-height:1.5; margin-bottom:20px;}
.plan .checklist{flex-grow:1;}
.price-cta-badge{
  display:inline-block; color:var(--gold-dark); background:var(--gold-pale);
  border-radius:999px; padding:6px 14px; font-weight:700; font-size:12px;
  letter-spacing:0.03em; text-transform:uppercase; margin-bottom:14px;
}

/* ---------- AGENCES ---------- */
.agences{padding:90px 0; background:var(--ink); color:var(--white); position:relative; overflow:hidden;}
.agences::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(560px 360px at 12% 0%, rgba(184,146,90,0.16), transparent 70%),
    radial-gradient(480px 420px at 92% 90%, rgba(184,146,90,0.10), transparent 70%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 35%, #000 40%, transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 35%, #000 40%, transparent 100%);
  animation:heroDrift 18s ease-in-out infinite alternate;
}
.agences > .wrap{position:relative; z-index:1;}
.agences .section-kicker{color:var(--gold);}
.agences .section-title{color:var(--white);}
.agences .section-subtitle{color:#c9c5bd;}
.agences .shared{color:#c9c5bd;}
.agences .shared--note{color:var(--gold); font-style:normal;}
.agences .checklist li{color:#c9c5bd;}
.agences .checklist li::before{background:var(--gold);}
.agences .checklist--highlight{color:var(--gold);}
.agences .btn--primary{background:var(--gold); color:#1a1408;}
.agences .btn--primary:hover{opacity:1; background:#c9a066; box-shadow:0 14px 30px -10px rgba(184,146,90,0.55);}
/* align-items:start (pas stretch, la valeur par défaut d'une grid) — les 3
   offres n'ont pas le même volume de contenu (Diagnostic Performance est
   volontairement plus détaillé) ; en stretch, les cartes plus courtes
   héritent de la hauteur de la plus grande, laissant un vide sous leur
   bouton "Nous contacter" plutôt que de garder leur hauteur naturelle. */
.agences__photos{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px;}
.agences__photo{border-radius:22px; overflow:hidden; aspect-ratio:3/2; box-shadow:0 24px 48px -22px rgba(0,0,0,0.55);}
.agences__photo img{width:100%; height:100%; object-fit:cover; display:block;}
.agences__grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:36px; align-items:start;}
/* Diagnostic Performance sorti de la grille — c'est le point d'entrée le
   plus simple pour un directeur d'agence (prix fixe, un seul livrable,
   aucun engagement), il mérite sa propre place plutôt que d'être noyé comme
   1 carte parmi 3. Même logique que .pioneer-banner sur le site Ilotis. */
.diagnostic-feature{
  position:relative; margin-top:50px; background:#1a1a1a; border:2px solid var(--gold);
  border-radius:28px; padding:44px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px;
}
/* Sans min-width:0, les enfants de grille gardent leur largeur "max-content"
   par défaut — un paragraphe un peu long suffit à faire déborder toute la
   carte horizontalement sur mobile, même repassée en 1 colonne (bug
   remonté le 09/09 : texte tronqué à droite sur la page audit). */
.diagnostic-feature__pitch, .diagnostic-feature__details{min-width:0;}
/* .btn a white-space:nowrap par défaut : sur ce libellé long ("Réserver un
   rendez-vous découverte gratuit"), dans cette colonne étroite, le bouton
   dépassait le bord droit de l'écran sur mobile (bug remonté le 09/09). */
.diagnostic-feature__pitch .btn{white-space:normal; text-align:center;}
.diagnostic-feature__eyebrow{color:var(--gold); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px;}
.diagnostic-feature h3{font-size:24px; color:var(--white); margin-bottom:14px;}
.diagnostic-feature .plan__price{color:var(--white);}
.diagnostic-feature__timeline{color:var(--gold); font-weight:600; font-size:13px; margin-top:12px;}
.diagnostic-feature__label{color:#c9c5bd; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px;}
.diagnostic-feature__details .checklist{margin-bottom:20px;}
.diagnostic-feature__details .checklist:last-child{margin-bottom:0;}
.diagnostic-feature__details .checklist li{color:#c9c5bd;}
.diagnostic-feature__details .checklist li::before{background:var(--gold);}
.diagnostic-feature__details .checklist--highlight{color:var(--gold);}
.agence-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:34px;
  position:relative;
}
/* Illustration en tête de carte (page Actualité) — bord à bord malgré le
   padding:34px du conteneur (marge négative égale au padding), coins
   arrondis uniquement en haut pour prolonger ceux de la carte. */
.agence-card__photo{
  margin:-34px -34px 22px; border-radius:24px 24px 0 0; overflow:hidden; aspect-ratio:16/9;
}
.agence-card__photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* Logo de marque (ex. Ilotis) plutôt qu'une photo — centré, propre, sans
   bord à bord ni recadrage. */
.agence-card__logo{display:flex; align-items:center; justify-content:center; padding:6px 0 18px;}
.agence-card__logo img{height:40px; width:auto;}
/* Diagnostic Performance = point d'entrée le plus simple pour un directeur
   (prix fixe, un seul livrable, aucun engagement 3 mois) — mis en avant par
   rapport aux 2 autres offres agence, même traitement "ruban" que l'offre
   phare des accompagnements individuels. */
.agence-card--featured{border:2px solid var(--gold);}
.agence-card__ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#17130a; font-family:'Manrope', sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.04em;
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}
.agence-card.reveal{transition:opacity .4s ease, transform .3s ease, border-color .3s ease;}
.agence-card.reveal:hover{transform:translateY(-6px); border-color:rgba(184,146,90,0.5);}
.agences__grid .agence-card:nth-child(1){transition-delay:0s;}
.agences__grid .agence-card:nth-child(2){transition-delay:.1s;}
.agences__grid .agence-card:nth-child(3){transition-delay:.2s;}
.agence-card h3{font-size:20px; margin-bottom:16px; color:var(--white);}
.agence-card .plan__price{color:var(--white);}
.agence-card .price-sub{margin-bottom:20px; display:block;}
.agence-card .checklist li{color:#c9c5bd;}
.agence-card .checklist li::before{background:var(--gold);}
.agence-card .checklist li.checklist--highlight{color:var(--gold); font-weight:700;}
.agence-card .btn--secondary{border-color:var(--gold); color:var(--white); background:transparent;}
.agence-card .btn--secondary:hover{background:var(--gold); color:var(--ink);}

/* ---------- À PROPOS ---------- */
.apropos{padding:90px 0;}
.apropos__inner{max-width:640px; margin:0 auto; text-align:center;}
.apropos__bio{color:var(--ink-soft); font-size:16px; margin-bottom:36px;}
.apropos__quote{font-size:clamp(20px,2.6vw,26px); font-weight:700; color:var(--ink); line-height:1.4;}

/* ---------- POURQUOI YLEVIO — HERO ---------- */
.why-hero{padding:110px 0 20px; text-align:center;}
.why-hero h1{font-size:clamp(22px,3.8vw,44px); max-width:760px; margin:14px auto 0; line-height:1.25;}
.why-hero__line{display:block; white-space:nowrap;}
@media (max-width:480px){ .why-hero h1{font-size:clamp(17px,5.2vw,22px);} }
.why-hero__lead{color:var(--ink-soft); font-size:17px; margin-top:20px;}
.why-hero__media{
  max-width:920px; margin:44px auto 0; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(17,17,17,0.35); aspect-ratio:16/9;
}
.why-hero__media img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- POURQUOI YLEVIO — INTRO ---------- */
.why-intro{padding:50px 0 90px;}
.why-intro .wrap{max-width:660px;}
.why-intro p{color:var(--ink-soft); font-size:17px; margin-bottom:18px;}
.why-intro__punch{color:var(--ink); font-weight:600; font-size:19px;}

/* ---------- 7 DÉFIS ---------- */
.challenges{padding:90px 0; background:var(--off);}
.challenges__list{max-width:760px; margin:50px auto 0; display:flex; flex-direction:column; gap:0;}
.challenge{display:flex; gap:26px; padding:28px 4px; border-bottom:1px solid var(--line);}
.challenge:first-child{padding-top:0;}
.challenge:last-child{border-bottom:none; padding-bottom:0;}
.challenge__num{
  font-weight:800; font-size:22px; color:var(--gold); flex-shrink:0; width:44px;
  font-variant-numeric:tabular-nums;
}
.challenge h3{font-size:17.5px; margin-bottom:8px;}
.challenge p{color:var(--ink-soft); font-size:14.5px;}
.challenges__list .challenge:nth-child(1){transition-delay:0s;}
.challenges__list .challenge:nth-child(2){transition-delay:.04s;}
.challenges__list .challenge:nth-child(3){transition-delay:.08s;}
.challenges__list .challenge:nth-child(4){transition-delay:.12s;}
.challenges__list .challenge:nth-child(5){transition-delay:.16s;}
.challenges__list .challenge:nth-child(6){transition-delay:.2s;}
.challenges__list .challenge:nth-child(7){transition-delay:.24s;}

/* ---------- CE QUI FAIT LA DIFFÉRENCE ---------- */
.difference{padding:90px 0;}
.difference__layout{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; max-width:1080px; margin:0 auto;}
.difference__media{border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5;}
.difference__media img{width:100%; height:100%; object-fit:cover; display:block;}
.difference__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:50px;}
.difference__grid--split{grid-template-columns:repeat(2,1fr); margin-top:0;}
.difference__item{
  text-align:center; border:1px solid var(--line); border-radius:20px; padding:28px 18px;
  transition:border-color .25s ease, transform .25s ease;
}
.difference__item:hover{border-color:var(--gold); transform:translateY(-4px);}
.difference__item span{display:block; color:var(--gold); font-weight:800; font-size:15px; margin-bottom:12px;}
.difference__item p{font-size:14.5px; font-weight:600; color:var(--ink);}

/* ---------- CONVICTION (pourquoi.html) ---------- */
.why-conviction{padding:70px 0; background:var(--ink); color:var(--white);}
.why-conviction .wrap{max-width:700px; text-align:center;}
.why-conviction p{font-size:19px; line-height:1.6;}
.why-conviction__cycle{margin-top:20px; color:var(--gold-pale); font-weight:700; letter-spacing:0.02em;}

/* ---------- RAISON D'ÊTRE ---------- */
.raison-etre{padding:90px 0;}
/* "Le Constat", juste sous le hero de la page d'accueil — léger surplus
   par rapport à un raison-etre générique (ex. pourquoi.html), et moins
   d'espace avant la section suivante (Ce que nous développons) pour ne
   pas laisser un vide entre les deux. */
#constat{padding-top:70px; padding-bottom:50px;}
.raison-etre__list{max-width:520px; margin:0 auto 44px;}
.raison-etre__list li{font-size:16px; padding-left:28px; margin-bottom:20px;}
.raison-etre__list li::before{top:9px;}
.raison-etre__punch{
  text-align:center; max-width:600px; margin:38px auto 0; font-size:17px; color:var(--ink-soft); line-height:1.6;
}
.raison-etre__punch strong{color:var(--ink); font-size:19px;}

/* ---------- NOS CONVICTIONS ---------- */
.convictions{padding:90px 0; background:var(--ink); color:var(--white);}
.convictions__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px;}
.conviction-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:28px;
  transition:border-color .25s ease, transform .25s ease;
}
.conviction-card:hover{border-color:rgba(184,146,90,0.5); transform:translateY(-4px);}
.conviction-card p{color:#d8d4cb; font-size:15px; line-height:1.5;}
.conviction-card strong{color:var(--gold-pale);}

/* ---------- SELF CHECK ---------- */
.self-check{padding:90px 0; background:var(--off); text-align:center;}
.self-check h2{font-size:clamp(24px,3vw,32px); max-width:600px; margin:0 auto 36px;}
.self-check__list{max-width:560px; margin:0 auto 40px; text-align:left;}
.self-check__list li{
  position:relative; padding:14px 0 14px 30px; font-size:15.5px; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.self-check__list li:last-child{border-bottom:none;}
.self-check__list li::before{
  content:""; position:absolute; left:0; top:20px; width:7px; height:7px; border-radius:2px;
  border:1.5px solid var(--gold); background:none;
}

/* ---------- BIBLIOTHÈQUE — HERO ---------- */
.lib-hero{padding:110px 0 70px; text-align:center;}
.lib-hero .wrap{max-width:680px;}
.lib-hero h1{font-size:clamp(28px,3.6vw,40px); margin:14px 0 0;}
.lib-hero__lead{font-size:18px; font-weight:600; color:var(--ink); margin-top:22px;}
.lib-hero__text{color:var(--ink-soft); font-size:16px; margin:12px 0 32px;}
.lib-hero__trust{color:var(--gold-dark); font-size:13.5px; font-weight:600; margin-top:24px;}

/* ---------- CATÉGORIES ---------- */
.categories{padding:90px 0; background:var(--off);}
.categories__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:50px;}
.category{
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:28px 22px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--gold-dark); transition:border-color .25s ease, transform .25s ease;
}
.category:hover{border-color:var(--gold); transform:translateY(-4px);}
.category svg{transition:transform .3s ease;}
.category:hover svg{transform:scale(1.12) rotate(-6deg);}
.category p{color:var(--ink); font-size:13.5px; font-weight:600;}
.category__text{display:flex; flex-direction:column; gap:6px;}
.category__desc{color:var(--ink-soft); font-size:12px; font-weight:400; line-height:1.5;}

/* ---------- CROSS-SELL ---------- */
.lib-crosssell{padding:60px 0; text-align:center; border-top:1px solid var(--line);}
.lib-crosssell p{color:var(--ink-soft); font-size:16px; margin-bottom:24px;}

/* ---------- APP — HERO ---------- */
.app-hero{padding:110px 0 70px; text-align:center; position:relative; overflow:hidden;}
.app-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(500px 340px at 50% 0%, rgba(184,146,90,0.12), transparent 70%),
    radial-gradient(400px 400px at 85% 75%, rgba(184,146,90,0.07), transparent 70%);
  animation:bgDrift 24s ease-in-out infinite alternate;
}
.app-hero > .wrap{position:relative; z-index:1;}
.app-hero__brand{display:inline-flex; align-items:center; gap:8px; justify-content:center;}
.app-icon{flex-shrink:0; border-radius:5px;}
.app-hero .wrap{max-width:700px;}
.app-hero h1{font-size:clamp(28px,3.8vw,42px); margin-top:14px;}
.app-hero__lead{color:var(--ink-soft); font-size:17px; margin:24px 0 28px;}
.app-hero__platforms{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-bottom:32px;}
.app-hero__platforms span{
  display:inline-flex; align-items:center; gap:8px; color:var(--gold-dark);
  font-size:13.5px; font-weight:700;
}
.app-hero__ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- APP — POINTS FORTS ---------- */
.app-strengths{padding:90px 0;}
.app-strengths__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px; max-width:900px; margin-left:auto; margin-right:auto;}
.app-strength{
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:28px;
  color:var(--gold-dark); transition:border-color .25s ease, transform .25s ease;
}
.app-strength:hover{border-color:var(--gold); transform:translateY(-4px);}
.app-strength svg{transition:transform .3s ease;}
.app-strength:hover svg{transform:scale(1.12) rotate(-6deg);}
.app-strength h3{color:var(--ink); font-size:16px; margin:14px 0 8px;}
.app-strength p{color:var(--ink-soft); font-size:13.5px; line-height:1.55;}

/* ---------- APP — SHOWCASE (captures d'écran) ---------- */
.app-showcase{padding:90px 0; background:var(--off);}
.app-showcase__row{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center;
  padding:56px 0; border-bottom:1px solid var(--line);
}
.app-showcase__row:first-of-type{padding-top:50px;}
.app-showcase__row:last-of-type{border-bottom:none; padding-bottom:0;}
.app-showcase__row--reverse .app-showcase__image{order:2;}
.app-showcase__row--reverse .app-showcase__text{order:1;}
.app-showcase__image{display:flex; justify-content:center;}
.app-showcase__image img{max-width:220px; width:100%; border-radius:32px; box-shadow:var(--shadow);}
.app-showcase__num{
  display:block; color:var(--gold-dark); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px;
}
.app-showcase__text h3{font-size:clamp(20px,2.4vw,25px); margin-bottom:14px;}
.app-showcase__text p{color:var(--ink-soft); font-size:15px; margin-bottom:18px;}
.app-showcase__text .checklist{margin-bottom:0;}

/* ---------- APP — TARIFS ---------- */
.app-pricing{padding:90px 0; background:var(--off);}
.pricing--two{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto;}
.app-pricing__trial{
  display:inline-block; color:var(--gold-dark); background:var(--gold-pale);
  border-radius:999px; padding:4px 12px; font-weight:700; font-size:11.5px;
  letter-spacing:0.03em; text-transform:uppercase; margin-bottom:12px;
}
.app-pricing__annual{color:var(--ink-soft); font-size:13.5px; margin-bottom:10px;}
.app-pricing__pref{color:var(--gold-dark); font-weight:600; font-size:13px; margin-bottom:14px;}
.app-pricing__note{text-align:center; max-width:640px; margin:40px auto 0; color:var(--ink-soft); font-size:13.5px;}

/* ---------- APP — CLOSING ---------- */
.app-closing{padding:70px 0; text-align:center; border-top:1px solid var(--line);}
.app-closing p{color:var(--ink-soft); font-size:16px; margin-bottom:24px;}

/* ---------- FAQ TEASER (homepage) ---------- */
.faq-teaser{padding:80px 0; background:var(--off);}
.faq-teaser__inner{max-width:560px; margin:0 auto; text-align:center;}
.faq-teaser__inner h2{font-size:clamp(22px,2.6vw,28px); margin-bottom:28px;}

/* ---------- FAQ HERO (faq.html) ---------- */
.faq-hero{padding:110px 0 20px; text-align:center;}
.faq-hero h1{font-size:clamp(28px,4vw,42px); max-width:680px; margin:14px auto 0;}

/* ---------- FAQ ---------- */
.faq{padding:60px 0 90px; background:var(--off);}
.faq__list{max-width:720px; margin:50px auto 0;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q-heading{margin:0; font-size:inherit; font-weight:inherit;}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; text-align:left; padding:22px 4px; font-family:inherit;
  font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:color .2s ease, padding-left .2s ease;
}
.faq__q:hover{color:var(--gold-dark); padding-left:8px;}
.faq__chevron{color:var(--gold-dark); font-size:18px; font-weight:400; flex-shrink:0; transition:transform .25s ease;}
.faq__item.open .faq__chevron{transform:rotate(45deg);}
.faq__a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq__a p{padding:0 4px 22px; color:var(--ink-soft); font-size:14.5px; max-width:640px;}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink); color:var(--white); padding:52px 0 22px;}
.footer__inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px;}
.footer__cta strong{display:block; font-size:20px; margin-bottom:8px;}
.footer__cta p{color:#c9c5bd; font-size:14px; margin-bottom:18px;}
.footer__cta .btn--primary{background:var(--gold); }
.footer__contacts{display:flex; gap:34px; flex-wrap:wrap; justify-content:center;}
.footer__contacts a{display:flex; align-items:center; gap:9px; color:#d8d4cb; font-size:14px; transition:color .2s;}
.footer__contacts a:hover{color:var(--gold);}

.footer__bottom-row{
  display:flex; justify-content:center; align-items:flex-start;
  width:100%; max-width:640px; margin:0 auto; gap:24px;
}
/* Repassé d'une colonne (6-7 liens empilés, une ligne chacun) à une rangée
   qui se replie — Maxime trouvait le bas de page trop étiré verticalement
   (retour du 29/09). row-gap gère l'espacement entre les lignes une fois
   repliées ; les séparateurs verticaux remplacent l'alignement centré
   colonne par colonne. */
.footer__legal-col{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:8px; text-align:center;}
.footer__legal-col a{color:#7a776f; font-size:12.5px; transition:color .2s ease; padding:0 12px; border-right:1px solid rgba(255,255,255,0.14);}
.footer__legal-col a:last-child{border-right:none; padding-right:0;}
.footer__legal-col a:first-child{padding-left:0;}
.footer__legal-col a:hover, .footer__legal-col a.is-active{color:var(--gold);}

.footer__brands{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.footer__brands a{color:#7a776f; transition:color .2s ease;}
.footer__brands a:hover{color:var(--gold);}
.footer__brands strong{color:var(--white); font-weight:700;}
.footer__brands span{color:#54524c;}
.footer__bottom{color:#7a776f; font-size:12px; border-top:1px solid rgba(255,255,255,0.08); padding-top:18px; width:100%; text-align:center;}

/* ---------- LEGAL PAGES ---------- */
.legal-hero{padding:110px 0 20px; text-align:center;}
.legal-hero h1{font-size:clamp(26px,3.4vw,36px); margin:14px auto 0; max-width:820px;}
.legal-content{padding:50px 0 100px;}
.legal-content .wrap{max-width:720px;}
.legal-content p{color:var(--ink-soft); font-size:15.5px; margin-bottom:16px;}
.legal-content h2{font-size:19px; margin:44px 0 14px;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content h3{font-size:15.5px; margin:24px 0 10px; color:var(--ink);}
.legal-content ul{margin:0 0 16px; padding-left:0;}
.legal-content ul li{
  position:relative; padding-left:22px; margin-bottom:8px; color:var(--ink-soft); font-size:15px;
}
.legal-content ul li::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.legal-content strong{color:var(--ink);}

/* ---------- PILLAR PAGE EXTRAS (audit / accompagnement / prospection) ---------- */
.legal-content .cta-block{
  background:var(--off); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; margin:40px 0; text-align:center;
}
.legal-content .cta-block h2{margin-top:0; font-size:19px;}
.legal-content .cta-block p{margin-bottom:20px;}
.legal-content .cta-block .btn{margin-top:0;}
.legal-content .faq-item{padding-top:18px; margin-top:18px; border-top:1px solid var(--line);}
.legal-content .faq-item:first-of-type{padding-top:0; margin-top:0; border-top:none;}
.legal-content .faq-item h3{margin-top:0;}
.legal-disclaimer{
  display:flex; gap:14px; align-items:flex-start; background:var(--gold-pale); border:1px solid var(--gold);
  border-radius:18px; padding:20px 22px; margin-bottom:44px;
}
.legal-disclaimer svg{color:var(--gold-dark); flex-shrink:0; margin-top:2px;}
.legal-disclaimer p{color:var(--ink); font-size:14px; margin:0; font-weight:500;}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Staggered choreography for repeating grid cards */
.app-strength:nth-child(1), .category:nth-child(1), .difference__item:nth-child(1), .conviction-card:nth-child(1), .challenge:nth-child(1){transition-delay:0s;}
.app-strength:nth-child(2), .category:nth-child(2), .difference__item:nth-child(2), .conviction-card:nth-child(2), .challenge:nth-child(2){transition-delay:.06s;}
.app-strength:nth-child(3), .category:nth-child(3), .difference__item:nth-child(3), .conviction-card:nth-child(3), .challenge:nth-child(3){transition-delay:.12s;}
.app-strength:nth-child(4), .category:nth-child(4), .difference__item:nth-child(4), .conviction-card:nth-child(4), .challenge:nth-child(4){transition-delay:.18s;}
.app-strength:nth-child(5), .category:nth-child(5), .difference__item:nth-child(5), .conviction-card:nth-child(5), .challenge:nth-child(5){transition-delay:.24s;}
.difference__item:nth-child(6){transition-delay:.3s;}
.difference__item:nth-child(7){transition-delay:.36s;}
.difference__item:nth-child(8){transition-delay:.42s;}
.category:nth-child(n+6), .conviction-card:nth-child(6), .challenge:nth-child(6), .challenge:nth-child(7){transition-delay:.3s;}

/* ---------- RESPONSIVE ---------- */

/* Seuil dédié au menu (29/09) : le point de bascule général du site reste à
   980px (bloc suivant), mais les 7 liens de nav (avec "Coaching" +
   "Actualité" sur les pages qui l'ont) plus la bulle flottante ne
   retrouvent une vraie marge qu'à partir de ~1220px — entre 980 et 1220px,
   le menu texte finit toujours par déborder ou se faire couper par la
   bulle, quelle que soit la taille de police (le padding-right sur
   .nav__inner fixe cette limite, pas la largeur du texte). Plutôt que de
   resserrer indéfiniment, on bascule le menu en burger plus tôt, sans
   toucher au seuil 980px des autres composants (grilles de prix, hero,
   etc.) qui n'ont pas ce problème. Placé ici, après les règles de base
   .btn/.nav-bubble (sinon la cascade CSS applique la règle de base
   display:inline-flex, déclarée plus bas dans le fichier, par-dessus ce
   display:none malgré la condition media qui matche). */
@media (max-width:1220px){
  .nav__inner{padding-right:0;}
  .nav__links{display:none;}
  .burger{display:flex;}
  .nav-bubble{display:none;}
}

@media (max-width:980px){
  .nav__inner{padding-right:0;}
  .nav__links{display:none;}
  .burger{display:flex;}
  .nav-bubble{display:none;}
  .nav__links .nav__mobile-cta{display:inline-flex; margin-top:6px;}
  .hero__bg{object-position:68% 42%;}
  .diagnostic-layout{grid-template-columns:1fr; gap:28px;}
  .diagnostic-layout__media{max-width:360px; margin:0 auto; aspect-ratio:16/10;}
  /* Sans min-width:0, .diagnostic (élément de grille dans .diagnostic-layout)
     refusait de rétrécir sous la taille min-content de son contenu (padding
     44px + texte non-cassable), forçant toute la page en scroll horizontal
     sur mobile — bug relevé par l'audit responsive du 05/09. */
  .diagnostic{min-width:0; padding:28px;}
  .diagnostic__grid{grid-template-columns:1fr; gap:28px;}
  .callouts{grid-template-columns:1fr;}
  /* Même bug que .diagnostic ci-dessus, retrouvé le 28/09 sur les cartes de
     tarifs (audit responsive) : sans min-width:0 sur .plan, le bouton
     width:100% en white-space:nowrap ("Demander mon diagnostic — 1 250 €
     HT") forçait la carte, la grille, puis toute la page en scroll
     horizontal sur mobile. */
  .pricing{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .plan{min-width:0;}
  .plan .btn{white-space:normal;}
  .fork__grid{grid-template-columns:1fr;}
  .agences__photos{grid-template-columns:1fr;}
  .diagnostic-feature{grid-template-columns:1fr; gap:28px; padding:32px 26px;}
  .agences__grid{grid-template-columns:1fr;}
  .difference__layout{grid-template-columns:1fr; gap:28px;}
  .difference__media{order:-1; max-width:360px; margin:0 auto; aspect-ratio:16/10;}
  .difference__grid{grid-template-columns:1fr 1fr;}
  .difference__grid--split{grid-template-columns:1fr 1fr;}
  .convictions__grid{grid-template-columns:1fr;}
  .categories__grid{grid-template-columns:repeat(2,1fr);}
  .app-showcase__row{grid-template-columns:1fr; gap:30px; text-align:center;}
  .app-showcase__row--reverse .app-showcase__image{order:1;}
  .app-showcase__row--reverse .app-showcase__text{order:2;}
  .app-showcase__text .checklist{text-align:left; max-width:420px; margin:0 auto;}
}
@media (max-width:560px){
  .categories__grid{grid-template-columns:1fr;}
  .app-strengths__grid{grid-template-columns:1fr;}
  .app-hero__platforms{flex-direction:column; align-items:center; gap:10px;}
  .footer__contacts{flex-direction:column; gap:16px;}
  .footer__bottom-row{gap:14px;}
  .challenge{flex-direction:column; gap:10px;}
  .difference__grid{grid-template-columns:1fr;}
  .app-hero__ctas{flex-direction:column; width:100%;}
  .app-hero__ctas .btn{width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .app-hero::before, .agences::before{animation:none;}
  .plan--featured{animation:none; box-shadow:none;}
  .timeline li.reveal.in .timeline__num{animation:none;}
  .reveal{transition:none;}
  .btn, .plan, .diagnostic, .agence-card, .timeline__num, .fork__card{transition:none;}
  .category svg, .app-strength svg{transition:none;}
}

/* Mobile nav overlay */
.nav__links.open{
  display:flex; flex-direction:column; position:absolute; top:84px; left:0; right:0;
  background:var(--white); padding:20px 24px; gap:18px; border-bottom:1px solid var(--line);
}