/* ===== Variables — palette CoachTanguy ===== */
:root {
  --orange: #ff5a00;
  --orange-dark: #e04d00;
  --orange-light: #ff7a30;
  --black: #0a0a0a;
  --dark: #0c0c0e;
  --surface: #f7f6f4;
  --gray-900: #1a1a1a;
  --gray-700: #777777;
  --gray-500: #999999;
  --gray-200: #eaeaea;
  --gray-100: #f6f6f6;
  --white: #ffffff;
  --radius: 16px;
  --radius-lg: 28px;
  --maxw: 1160px;
  --shadow-sm: 0 4px 16px rgba(10,10,10,.06);
  --shadow-md: 0 18px 40px rgba(10,10,10,.10);
  --shadow-orange: 0 12px 30px rgba(255,90,0,.30);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Inter Tight', 'Inter', sans-serif;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Décalage des ancres = hauteur de la barre (+ encoche) -> l'ancre arrive pile sous
   le nav, sans laisser voir la section précédente (ex : FAQ qui mordait le calculateur). */
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top)); background: var(--surface); }
body {
  font-family: var(--font);
  color: var(--black);
  background: transparent;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Fond dynamique & sportif : halos orange chauds + fines lignes de vitesse */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 50% at 100% 0%, rgba(255,90,0,.055), transparent 60%),
    radial-gradient(42% 48% at 0% 100%, rgba(255,90,0,.04), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: repeating-linear-gradient(-22deg, rgba(255,90,0,.028) 0 1px, transparent 1px 38px);
  -webkit-mask-image: radial-gradient(60% 60% at 88% 12%, #000, transparent 72%);
          mask-image: radial-gradient(60% 60% at 88% 12%, #000, transparent 72%);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
  padding: 6px 14px;
  background: rgba(255,90,0,.08);
  border-radius: 999px;
}

/* ===== Reveal animations ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600; font-size: 15px;
  transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s;
  cursor: pointer; border: 1px solid transparent;
  position: relative; overflow: hidden;
}
.btn--primary { background: linear-gradient(135deg, var(--orange-light), var(--orange)); color: #fff; box-shadow: var(--shadow-orange); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(255,90,0,.42); }
.btn--ghost { background: transparent; color: var(--black); border-color: var(--gray-200); }
.btn--ghost:hover { border-color: var(--black); transform: translateY(-3px); }
.btn--lg { padding: 17px 38px; font-size: 16px; }

/* Bouton WhatsApp flottant — logo seul, orange, sans fond */
.wa-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  width: 56px; height: 56px;
  display: block; color: var(--orange);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  transition: transform .2s ease;
}
.wa-fab svg { width: 100%; height: 100%; display: block; }
.wa-fab:hover { transform: scale(1.08); }
@media (max-width: 720px) { .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } }

/* ===== Navbar ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s, backdrop-filter .3s;
}
/* État "solide" : au scroll, ou sur les pages à fond clair (body.nav-solid) */
.nav.scrolled,
body.nav-solid .nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; max-width: 1640px; padding-left: clamp(24px, 4vw, 52px); padding-right: clamp(24px, 4vw, 52px); }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 38px; width: auto; }
.nav__logo-light { display: none; }
.nav__links { display: flex; gap: 34px; }
.nav__links a { white-space: nowrap; }
@media (max-width: 1240px) { .nav__links { gap: 20px; } .nav__links a { font-size: 14px; } .nav__cta { padding: 10px 16px; font-size: 14px; } }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--gray-900); position: relative; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--orange); transition: width .25s; border-radius: 2px; }
.nav__links a:hover { color: var(--orange); }
.nav__links a:hover::after { width: 100%; }
.nav__menu-logo { display: none; }   /* logo du menu : visible uniquement dans le menu mobile (voir media query) */
/* Groupe de droite (bouton + sélecteur dans le coin) */
.nav__right { display: flex; align-items: center; gap: 16px; }
/* Sélecteur de langue */
.lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid var(--gray-200); border-radius: 999px; padding: 3px; }
.lang-switch a { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--gray-700); padding: 5px 9px; border-radius: 999px; transition: .15s; }
.lang-switch a:hover { color: var(--orange); }
.lang-switch a.active { background: var(--orange); color: #fff; }
body.nav-over-dark .nav .lang-switch { border-color: rgba(255,255,255,.3); }
body.nav-over-dark .nav .lang-switch a { color: rgba(255,255,255,.8); }
body.nav-over-dark .nav .lang-switch a.active { background: var(--orange); color: #fff; }
.nav__cta { padding: 11px 22px; flex-shrink: 0; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: var(--black); border-radius: 2px; transition: .3s; }

/* Nav ADAPTATIVE : par-dessus une section sombre (hero, services sombre, CTA, footer) */
body.nav-over-dark .nav { background: transparent; backdrop-filter: none; border-color: transparent; box-shadow: none; }
/* Quand on scrolle en restant sur du sombre : verre dépoli sombre (pas blanc) */
body.nav-over-dark .nav.scrolled { background: rgba(12,12,14,.62); backdrop-filter: blur(12px); border-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
body.nav-over-dark .nav .nav__links a { color: #fff; }
body.nav-over-dark .nav .nav__links a:hover { color: #fff; }
body.nav-over-dark .nav .nav__burger span { background: #fff; }
body.nav-over-dark .nav .nav__logo-dark { display: none; }
body.nav-over-dark .nav .nav__logo-light { display: block; }
/* menu mobile ouvert (fond blanc) : liens foncés même par-dessus le sombre */
body.nav-over-dark .nav .nav__links.open a { color: var(--gray-900); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Zone sombre continue (hero + stats + services) =====
   Une seule surface : --dark + UN halo orange. Les enfants sont transparents,
   la photo du hero se dissout dedans (masque). => aucune couture possible. */
.darkzone {
  position: relative; isolation: isolate;
  background: var(--dark);
}
.darkzone > .trust { background: transparent; }
.darkzone > .section--dark { background: transparent; }

/* ===== Hero pleine largeur ===== */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 130px 0 90px; overflow: hidden; }
.hero__media {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 96%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,12,14,.9) 0%, rgba(12,12,14,.6) 42%, rgba(12,12,14,.22) 74%, transparent 100%);
}
.hero__inner { position: relative; }
.hero__text { max-width: 640px; }
.hero h1 { font-size: clamp(40px, 6vw, 70px); font-weight: 800; margin-bottom: 22px; color: #fff; }
.hero p { font-size: 19px; color: rgba(255,255,255,.82); max-width: 500px; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(18,18,20,.3); backdrop-filter: blur(8px); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(18,18,20,.5); }
.hero__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero__pills span {
  font-size: 14px; font-weight: 500; color: #fff;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px; border-radius: 999px;
}

/* ===== Sections ===== */
.section { position: relative; padding: 96px 0; }
.section > .container { position: relative; z-index: 2; }
.section--alt { background: transparent; }

/* Séparateur épuré : filet fin + losange orange centré */
.divider { display: flex; align-items: center; justify-content: center; max-width: 760px; margin: 0 auto; padding: 6px 24px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; }
.divider::before { background: linear-gradient(90deg, transparent, rgba(10,10,10,.14)); }
.divider::after  { background: linear-gradient(90deg, rgba(10,10,10,.14), transparent); }
.divider__mark { flex: 0 0 auto; width: 8px; height: 8px; margin: 0 22px; background: var(--orange); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 6px rgba(255,90,0,.10); }
.divider--on-dark::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18)); }
.divider--on-dark::after  { background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }

/* Section sombre (premium / contraste) */
.section--dark {
  position: relative; color: #fff; overflow: hidden;
  background: var(--dark);
}
.section--dark > .container { position: relative; z-index: 2; }
.section--dark .eyebrow { background: rgba(255,90,0,.16); color: var(--orange-light); }
.section--dark .section__head h2 { color: #fff; }
.section--dark .section__head p { color: rgba(255,255,255,.6); }
.section--dark .card { background: #161619; border-color: rgba(255,255,255,.08); }
.section--dark .card:hover { box-shadow: 0 26px 54px rgba(0,0,0,.55); }
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: rgba(255,255,255,.64); }
.section--dark .card__tag { background: rgba(22,22,25,.82); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section__head h2, .section__head h1 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 14px; line-height: 1.08; letter-spacing: -0.025em; }
.section__head p { color: var(--gray-700); font-size: 18px; }

/* ===== Service cards ===== */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__tag {
  position: absolute; bottom: 16px; left: 16px;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.card__tag img { width: 28px; height: 28px; }
.card__body { padding: 30px 32px 34px; }
.card h3 { font-size: 25px; margin-bottom: 12px; }
.card p { color: var(--gray-700); margin-bottom: 22px; }
.card__link { font-weight: 600; color: var(--orange); transition: color .2s; }
.card__link:hover { color: var(--orange-dark); }

/* ===== About ===== */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.about__photo { position: relative; }
.about__photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.about__photo::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px; z-index: -1;
  border: 2px solid var(--orange); border-radius: var(--radius-lg); opacity: .5;
}
.about__text h2 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 20px; }
.about__text p { color: var(--gray-700); font-size: 17px; margin-bottom: 16px; }
.stats { list-style: none; display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; }
.stats li { display: flex; flex-direction: column; }
.stats strong { font-family: var(--font-head); font-size: 32px; color: var(--orange); font-weight: 800; }
.stats span { font-size: 14px; color: var(--gray-700); }

/* ===== FAQ ===== */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white); overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq__item[open] { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-size: 26px; font-weight: 400; color: var(--orange);
  transition: transform .25s; line-height: 1; flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 26px 24px; }
.faq__body p { color: var(--gray-700); }

/* ===== CTA ===== */
.cta { position: relative; background: var(--dark); color: #fff; padding: 100px 0; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 720px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,0,.17), transparent 62%); filter: blur(64px);
}
.cta__inner { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; }
.cta h2 { font-size: clamp(34px, 5vw, 50px); margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,.72); font-size: 18px; margin-bottom: 32px; }

/* ===== Footer ===== */
.footer { background: var(--dark); color: #fff; padding-top: 88px; }
.footer__inner { display: flex; justify-content: space-between; gap: 72px; flex-wrap: wrap; padding-bottom: 64px; max-width: 1640px; padding-left: clamp(24px, 4vw, 52px); padding-right: clamp(24px, 4vw, 52px); }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { color: rgba(255,255,255,.6); margin-top: 18px; max-width: 280px; }
.footer__areas { color: rgba(255,255,255,.4); font-size: 12.5px; line-height: 1.7; margin-top: 18px; max-width: 300px; }
.footer__links.footer__local { grid-template-columns: 1fr; }
.footer__local a { font-size: 14px; }
.footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 20px 64px; align-content: start; }
.footer__links a { color: rgba(255,255,255,.78); font-weight: 500; font-size: 15px; transition: color .2s; }
.footer__links a:hover { color: var(--orange); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; color: rgba(255,255,255,.45); font-size: 14px; text-align: center; }

/* Footer mobile : colonnes empilées, aéré et lisible */
@media (max-width: 760px) {
  .footer { padding-top: 52px; }
  .footer__inner { flex-direction: column; gap: 36px; padding-bottom: 40px; }
  .footer__brand p, .footer__areas { max-width: 460px; }
  .footer__links { gap: 16px 44px; }
  .footer__local a { font-size: 14.5px; }
  .footer__bottom { padding: 22px 0; font-size: 13px; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero { min-height: 80vh; }
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 420px; margin: 0 auto; }
  /* À propos : tout le texte centré sur mobile (eyebrow, titre, paragraphes) ;
     la liste de diplômes (.ticks, page collaboration) reste alignée à gauche. */
  .about__text { text-align: center; }
  .about__text .ticks { text-align: left; }
  .stats { justify-content: center; }
  /* bouton « Travailler avec moi » centré sous les stats */
  .about__text > .btn { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; }
}
/* ===== Menu mobile / tablette : plein écran sombre, moderne ===== */
@media (max-width: 1024px) {
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .lang-switch { display: none; }            /* plus de langues dans la barre */
  .nav__links {
    position: fixed; inset: 0; z-index: 95;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 0; padding: calc(74px + env(safe-area-inset-top)) 28px calc(116px + env(safe-area-inset-bottom));
    overflow-y: auto;
    /* Fond opaque, PAS de backdrop-filter (flou très coûteux sur mobile).
       On garde le menu PEINT en permanence — opacity 0 + pointer-events none au lieu
       de visibility:hidden — et sur sa propre couche GPU (translateZ). Du coup
       l'ouverture n'est qu'une transition d'opacité composée : plus de re-création de
       couche ni de re-décodage du logo à chaque fois → fini le micro-saccade. */
    background: #0a0a0c;
    opacity: 0; pointer-events: none;
    transform: translateX(100%);                 /* hors écran à droite → glisse comme un tiroir */
    will-change: transform, opacity;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  }
  .nav__links.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
  /* Plus de cascade lente : le menu s'ouvre d'un bloc (voir .nav__links).
     Seul le sélecteur de langue garde une petite entrée. */
  @keyframes navLangIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  /* logo centré, au-dessus de « Accueil » */
  .nav__menu-logo { display: block; width: 134px; height: auto; margin: 0 auto 20px; flex-shrink: 0; }
  body.menu-open .nav__right,
  body.menu-open .nav__burger { position: relative; z-index: 96; }
  .nav__links a,
  body.nav-over-dark .nav .nav__links a,
  body.nav-over-dark .nav .nav__links.open a {
    color: #fff; font-family: var(--font-head); font-size: 22px; font-weight: 700; padding: 10px 12px; flex-shrink: 0;
  }
  .nav__links a::after { display: none; }
  .nav__links a.is-active,
  body.nav-over-dark .nav .nav__links a.is-active { color: var(--orange); }
  /* Barre transparente quand le menu est ouvert (rendu sombre cohérent) */
  /* Fond sombre quand le menu est ouvert : iOS peint les safe-areas (encoche / barre
     d'accueil) avec le fond du body -> sinon bande blanche en haut/bas sur les pages
     claires alors que l'overlay du menu est noir. */
  body.menu-open { overflow: hidden; background: var(--dark); }
  /* CAUSE RACINE du menu cassé : un backdrop-filter sur la nav crée un "bloc conteneur"
     qui piège le menu plein écran (position:fixed) → menu écrasé à la taille de la nav,
     puis "snap" plein écran quand le flou finit sa transition .3s. On retire donc le
     backdrop-filter de la nav en mobile (et c'est aussi un gros gain de perf). Les fonds
     restent lisibles (nav-solid déjà .92 ; nav-over-dark scrollé remonté à .92). */
  .nav, .nav.scrolled, body.nav-solid .nav, body.nav-over-dark .nav.scrolled {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body.nav-over-dark .nav.scrolled { background: rgba(12,12,14,.92); }
  body.menu-open .nav,
  body.menu-open .nav.scrolled {
    background: transparent !important; box-shadow: none !important;
    border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body.menu-open .nav__burger span { background: #fff !important; }
  body.menu-open .nav__logo { display: none; }   /* logo de la barre masqué (le logo du menu prend le relais) */
  /* Sélecteur de langue premium, centré sous « Contact » */
  body.menu-open .lang-switch {
    display: flex; position: fixed; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 97;
    gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    animation: navLangIn .22s ease both .06s;
  }
  body.menu-open .lang-switch a { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; letter-spacing: .03em; padding: 9px 18px; border-radius: 999px; transition: .15s; }
  body.menu-open .lang-switch a.active { background: var(--orange); color: #fff; }
  body.menu-open .wa-fab { display: none; }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  /* hero accueil : on dégage l'espace sous le nav fixe (~74px) + aération */
  .hero { padding: 116px 0 80px; min-height: 88vh; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 18px; }
  .hero p { margin-bottom: 28px; }
  /* recadrage : coach légèrement décalé pour libérer le texte sur sa tête */
  .hero__media img { object-position: 60% 14%; }
}

/* ============================================================
   COMPOSANTS PAGES (services, contact, légal…)
   ============================================================ */

/* Lien de nav actif */
.nav__links a.is-active { color: var(--orange); }
.nav__links a.is-active::after { width: 100%; }

/* Bandeau confiance */
.trust { position: relative; z-index: 1; color: #fff; background: var(--dark); }
.trust__inner { position: relative; z-index: 2; }
.trust__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 24px; text-align: center; }
.trust__item { display: flex; flex-direction: column; gap: 4px; }
.trust__item strong { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--orange); }
.trust__item span { font-size: 13px; color: rgba(255,255,255,.62); }

/* Mise en avant du calculateur (accueil) */
.calcpromo { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 40px; background: linear-gradient(135deg, #101013, #1b1b20); border: 1px solid rgba(255,90,0,.28); border-radius: 26px; padding: 56px 60px; color: #fff; }
.calcpromo__glow { position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,90,0,.32), transparent 65%); pointer-events: none; }
.calcpromo .eyebrow { background: rgba(255,90,0,.14); color: var(--orange); }
.calcpromo h2 { color: #fff; margin: 14px 0 14px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; }
.calcpromo p { color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: 22px; }
.calcpromo__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.calcpromo__chips span { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 8px 14px; border-radius: 999px; }
.calcpromo__visual { display: flex; justify-content: center; position: relative; z-index: 1; }
@media (max-width: 880px) {
  .calcpromo { grid-template-columns: 1fr; padding: 40px 26px; gap: 28px; text-align: center; }
  .calcpromo p { margin-left: auto; margin-right: auto; }
  .calcpromo__chips { justify-content: center; }
  .calcpromo .btn { display: inline-block; }
  .calcpromo__visual svg { width: 170px; height: 170px; }
  .calcpromo__visual { order: -1; margin-bottom: -6px; }
}

/* Paiement sécurisé (au-dessus du footer) */
.payments { background: var(--dark); color: #fff; border-top: 1px solid rgba(255,255,255,.07); padding: 28px 0 32px; }
.payments__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.payments__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; letter-spacing: .02em; color: rgba(255,255,255,.6); }
.payments__lock { color: var(--orange); flex-shrink: 0; }
.payments__icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; max-width: 540px; }
.payments__icons .pay { height: 32px; width: auto; display: block; }

/* Étapes "Comment ça marche" */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { position: relative; padding: 36px 30px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: transform .3s, box-shadow .3s; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step__num { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--orange); opacity: .25; }
.step h3 { font-size: 22px; margin: 10px 0 10px; }
.step p { color: var(--gray-700); }

/* Atouts (3 colonnes icône) */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature { padding: 36px 30px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: transform .3s, box-shadow .3s; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature__ico { width: 60px; height: 60px; display: grid; place-items: center; background: rgba(255,90,0,.1); border-radius: 16px; margin-bottom: 20px; }
.feature h3 { font-size: 21px; margin-bottom: 10px; }
.feature p { color: var(--gray-700); }

/* Hero de page intérieure */
.phero { position: relative; min-height: 62vh; display: flex; align-items: center; padding: 140px 0 80px; overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: -1; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.phero__overlay { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(12,12,14,.9) 0%, rgba(12,12,14,.64) 45%, rgba(12,12,14,.26) 100%),
  linear-gradient(0deg, rgba(12,12,14,.5) 0%, transparent 30%); }
/* La section qui suit le hero "monte" par-dessus avec coins arrondis (pattern premium) */
.phero-lift {
  position: relative; z-index: 2; margin-top: -44px;
  background: var(--surface);
  border-top-left-radius: 34px; border-top-right-radius: 34px;
  box-shadow: 0 -18px 44px rgba(0,0,0,.16);
}
/* Une section sombre qui "monte" par-dessus la section claire au-dessus */
.section-lift {
  position: relative; z-index: 2; margin-top: -40px;
  border-top-left-radius: 34px; border-top-right-radius: 34px;
  box-shadow: 0 -16px 40px rgba(0,0,0,.10);
}
/* Héro des pages internes : bloc + texte + boutons centrés (desktop ET mobile),
   comme les titres de section. */
.phero__inner { position: relative; max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }
.phero h1 { font-size: clamp(36px, 5.5vw, 60px); font-weight: 800; color: #fff; margin: 16px 0 18px; }
.phero p { font-size: 18px; color: rgba(255,255,255,.82); margin-bottom: 30px; }
.phero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Tarifs */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.pricing--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; }
/* Flux "Accompagnement initial -> puis -> Suivi mensuel" */
.pricing--flow { grid-template-columns: 1fr auto 1fr; max-width: 920px; }
.flow-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; align-self: center; padding: 0 2px; }
.flow-connector__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--orange); background: rgba(255,90,0,.14); border: 1px solid rgba(255,90,0,.45); }
.flow-connector__label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
/* Note "uniquement après l'accompagnement initial" — bien visible */
.price__prereq { display: inline-flex; align-items: center; gap: 6px; color: var(--orange) !important; font-weight: 600; background: rgba(255,90,0,.12); border-radius: 8px; padding: 7px 11px; }
.price__prereq::before { content: "🔒"; font-size: 13px; }
@media (max-width: 820px) {
  .pricing--flow { grid-template-columns: 1fr; }
  .flow-connector { flex-direction: row; gap: 12px; }
  .flow-connector__icon { transform: rotate(90deg); }
}
.price { position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 36px 32px; transition: transform .3s, box-shadow .3s; }
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price--featured { border: 2px solid var(--orange); box-shadow: 0 24px 50px rgba(255,90,0,.18); }
.price__ribbon { position: absolute; top: -13px; left: 32px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.price__name { font-size: 21px; margin-bottom: 14px; }
.price__amount { font-family: var(--font-head); font-size: 44px; font-weight: 800; line-height: 1; color: var(--black); display: flex; flex-direction: column; gap: 6px; }
.price__amount span { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--orange); }
/* Le nombre (prix éditable) garde le gros style du conteneur, pas celui du sous-prix */
.price__amount .price__num { font: inherit; color: inherit; }
.price__meta { font-size: 14px; color: var(--gray-700); margin: 12px 0 4px; }
.price__list { list-style: none; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.price__list li { position: relative; padding-left: 28px; color: var(--gray-700); font-size: 15px; }
.price__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 800; }
.price__note { font-size: 13px; font-weight: 600; color: var(--orange); margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }
.price__btn { width: 100%; }
.section--dark .price { background: #161619; border-color: rgba(255,255,255,.08); }
.section--dark .price__name { color: #fff; }
.section--dark .price__amount { color: #fff; }
.section--dark .price__list li { color: rgba(255,255,255,.66); }
.section--dark .price--featured { border-color: var(--orange); }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.section--dark .btn--ghost:hover { border-color: #fff; }

/* Liste à coches (suivi) */
.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ticks li { position: relative; padding-left: 30px; color: var(--gray-700); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

/* Vitrine app FitPros (2 blocs alternés) */
.appshow { display: flex; flex-direction: column; gap: 28px; margin: 38px 0 4px; }
.appshow__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.appshow__media { display: flex; justify-content: center; }
.appshow__media img { width: 100%; max-width: 310px; height: auto; border-radius: 28px; box-shadow: 0 24px 50px rgba(0,0,0,.22); }
.appshow__text h3 { font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin-bottom: 16px; }
.appshow__text p { color: var(--gray-700); font-size: 17px; }
/* Texte aligné vers le téléphone : bloc du haut à droite, bloc du bas à gauche */
.appshow__row:nth-child(odd) .appshow__text { text-align: right; }
.appshow__row:nth-child(even) .appshow__text { text-align: left; }
.appshow__cta { text-align: center; margin-top: 26px; }
@media (max-width: 820px) {
  .appshow__row { grid-template-columns: 1fr; gap: 26px; }
  .appshow__row .appshow__media { order: -1; }
  .appshow__text,
  .appshow__row:nth-child(odd) .appshow__text,
  .appshow__row:nth-child(even) .appshow__text { text-align: center; }
}

/* Page contact */
/* Même niveau de départ que .page-top (collaboration) : plus de centrage vertical
   qui faisait "mordre" le contenu par le nav sur mobile. */
.contact-page { padding-top: 138px; }
.contact-page > .container { width: 100%; }
.contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: start; max-width: 1040px; margin: 0 auto; }
.contact__aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #161518 0%, var(--dark) 60%);
  color: #fff; border-radius: var(--radius-lg); padding: 40px 36px;
  border: 1px solid rgba(255,255,255,.06);
}
.contact__aside::before {
  content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,90,0,.35), transparent 62%);
  pointer-events: none;
}
.contact__aside > * { position: relative; z-index: 1; }
.contact__aside h3 { font-size: 25px; margin-bottom: 10px; }
.contact__aside > p { color: rgba(255,255,255,.66); margin-bottom: 24px; }
.contact__channel { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.contact__channel:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }
.contact__ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 12px; color: var(--orange); }
.contact__ico svg { display: block; }
.contact__ico--wa { background: #25D366; color: #fff; }
.contact__channel span span, .contact__channel > span { display: flex; flex-direction: column; }
.contact__channel strong { font-weight: 600; }
.contact__channel small { color: rgba(255,255,255,.55); font-size: 13px; }
.contact__note { margin-top: 26px; font-weight: 600; color: var(--orange); }
.contact__form { position: relative; background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--orange); border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow-md); }
.contact__form h3 { font-size: 24px; margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font-family: var(--font); font-size: 15px; padding: 13px 16px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-100); transition: border-color .2s, background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field textarea { resize: vertical; }
.contact__small { font-size: 13px; color: var(--gray-500); margin-top: 14px; text-align: center; }

/* Pages légales */
.legal { position: relative; padding: 130px 0 90px; }
.legal > .container { position: relative; z-index: 2; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); margin: 14px 0 6px; }
.legal__update { color: var(--gray-500); font-size: 14px; margin-bottom: 36px; }
.legal h2 { font-size: 22px; margin: 34px 0 12px; }
.legal p, .legal li { color: var(--gray-700); }
.legal ul { margin: 0 0 8px 20px; display: flex; flex-direction: column; gap: 8px; }
.legal__back { margin-top: 40px; }
.legal__back a { color: var(--orange); font-weight: 600; }

/* Page confirmation */
.confirm { position: relative; background: var(--dark); color: #fff; min-height: 78vh; display: flex; align-items: center; overflow: hidden; padding: 140px 0 90px; }
.confirm__inner { position: relative; text-align: center; max-width: 600px; margin: 0 auto; }
.confirm__check { width: 96px; height: 96px; margin: 0 auto 26px; display: grid; place-items: center; background: rgba(255,90,0,.12); border-radius: 50%; }
.confirm h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 16px; }
.confirm p { color: rgba(255,255,255,.72); font-size: 18px; margin-bottom: 32px; }
.confirm__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.confirm .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.confirm .btn--ghost:hover { border-color: #fff; }

/* Responsive composants */
@media (max-width: 900px) {
  .steps, .features, .pricing, .pricing--2 { grid-template-columns: 1fr; }
  .trust__inner { grid-template-columns: repeat(3, 1fr); gap: 24px 10px; }
  .contact { grid-template-columns: 1fr; }
  .phero { min-height: 54vh; padding: 120px 0 64px; }
}

/* ============================================================
   POLISH VISUEL — micro-interactions & profondeur
   (esprit "calcpromo" : l'orange s'allume au survol)
   ============================================================ */

/* Confort global */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: rgba(255,90,0,.22); }
:focus-visible { outline: 3px solid rgba(255,90,0,.45); outline-offset: 2px; }

/* Boutons : effet de pression */
.btn:active { transform: translateY(-1px) scale(.985); }

/* Cartes services : liseré orange + flèche du lien qui glisse */
.card:hover { border-color: rgba(255,90,0,.38); }
.section--dark .card:hover { border-color: rgba(255,90,0,.45); }
.card__link { display: inline-flex; align-items: center; gap: 7px; }
.card__link::after { content: "→"; transition: transform .25s; }
.card__link:hover::after { transform: translateX(4px); }

/* Étapes : numéro en filigrane + barre orange qui se déploie */
.step { overflow: hidden; }
.step__num {
  position: absolute; top: 14px; right: 22px;
  font-size: 64px; opacity: .10; line-height: 1;
  transition: opacity .3s, transform .3s;
}
.step:hover .step__num { opacity: .2; transform: scale(1.06); }
.step h3 { margin-top: 0; }
.step::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--orange-light), var(--orange));
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.step:hover::before { width: 100%; }
.step:hover { border-color: rgba(255,90,0,.32); }

/* Atouts : l'icône s'allume en orange */
.feature__ico { transition: background .3s, transform .3s, box-shadow .3s; }
.feature:hover { border-color: rgba(255,90,0,.32); }
.feature:hover .feature__ico {
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  box-shadow: 0 10px 24px rgba(255,90,0,.32);
  transform: scale(1.06);
}
.feature:hover .feature__ico img,
.feature:hover .feature__ico svg { filter: brightness(0) invert(1); }

/* FAQ : survol orangé + fond chaud quand ouvert */
.faq__item summary { transition: color .2s; }
.faq__item summary:hover { color: var(--orange); }
.faq__item[open] { background: linear-gradient(180deg, #fff, #fff8f3); }

/* Bandeau stats : fins séparateurs verticaux */
.trust__item + .trust__item { border-left: 1px solid rgba(255,255,255,.09); }

/* Tarifs : liseré orange au survol */
.price:hover { border-color: rgba(255,90,0,.4); }

/* Pills du hero : réaction au survol */
.hero__pills span { transition: border-color .25s, background .25s; }
.hero__pills span:hover { border-color: rgba(255,90,0,.55); background: rgba(255,90,0,.14); }

/* À propos : photo qui respire dans son cadre */
.about__photo { overflow: visible; }
.about__photo img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.about__photo:hover img { transform: scale(1.02); }

/* Vitrine app : le téléphone se soulève */
.appshow__media img { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.appshow__row:hover .appshow__media img { transform: translateY(-6px); box-shadow: 0 32px 60px rgba(0,0,0,.28); }

/* Badges de paiement : petite levée au survol */
.payments__icons .pay { transition: transform .25s; }
.payments__icons .pay:hover { transform: translateY(-3px); }

/* Footer : liens qui glissent */
.footer__links a { display: inline-block; transition: color .2s, transform .2s; }
.footer__links a:hover { transform: translateX(3px); }

/* Canaux de contact : l'icône s'allume */
.contact__ico { transition: transform .25s, box-shadow .25s; }
.contact__channel:hover .contact__ico { transform: scale(1.07); box-shadow: 0 8px 20px rgba(0,0,0,.3); }

/* ===== Optimisations mobiles fines ===== */
@media (max-width: 760px) {
  /* iOS : un champ < 16px déclenche un zoom automatique au focus */
  .field input, .field select, .field textarea { font-size: 16px; }
  /* Cibles tactiles confortables dans le footer */
  .footer__links a { padding: 8px 0; }
  .footer__local a { padding: 6px 0; }
}
/* Très petits écrans (≤ 360px) : la page contact respire */
@media (max-width: 360px) {
  .contact { gap: 20px; }
  .contact > * { min-width: 0; }
  .contact__aside { padding: 30px 22px; }
  .contact__form { padding: 28px 20px; }
}

/* Page collaboration */
.page-top { padding-top: 138px; }
.calcpromo--solo { grid-template-columns: 1fr; }
.calcpromo--solo .calcpromo__text { max-width: 720px; }

/* ===== Préloader d'intro — accueil (fond sombre, révélation du mot) ===== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  animation: preloaderHide .55s ease 1.05s forwards;
}
#preloader::before {   /* halo orange signature, comme le hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 46% at 50% 47%, rgba(255,90,0,.15), transparent 70%);
}
.preloader__line { overflow: hidden; padding: .2em .18em; position: relative; }
.preloader__word {
  display: inline-block;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(40px, 8.5vw, 96px); letter-spacing: -.04em; line-height: 1.16;
  color: #fff;
  transform: translateY(118%); opacity: 0;
  animation: preloaderRise .9s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.preloader__dot { color: var(--orange); }
@keyframes preloaderRise { to { transform: translateY(0); opacity: 1; } }
@keyframes preloaderHide { to { opacity: 0; visibility: hidden; } }
body.preloaded #preloader { opacity: 0; visibility: hidden; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { #preloader { display: none !important; } }

/* ===== Zones sûres iOS (viewport-fit=cover : encoche + barre d'accueil) ===== */
.nav { padding-top: env(safe-area-inset-top); }
.container { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.wa-fab { bottom: calc(24px + env(safe-area-inset-bottom)); right: calc(24px + env(safe-area-inset-right)); }
.footer__bottom { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
body.menu-open .lang-switch { bottom: calc(26px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .footer__bottom { padding-bottom: calc(22px + env(safe-area-inset-bottom)); } }
@media (max-width: 720px) { .wa-fab { bottom: calc(16px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); } }

/* ===== Barres safe area iOS (peintes selon le haut/bas de la page) ===== */
.safe-top, .safe-bottom { position: fixed; left: 0; right: 0; z-index: 200; pointer-events: none; }
.safe-top { top: 0; height: env(safe-area-inset-top); background: var(--dark); }
.safe-bottom { bottom: 0; height: env(safe-area-inset-bottom); background: var(--dark); }
/* Pages à fond clair (nav blanche) : encoche claire pour rester cohérent */
body.nav-solid .safe-top { background: #ffffff; }
/* Menu mobile ouvert : les DEUX safe-areas redeviennent sombres (l'overlay est sombre),
   même sur les pages claires. Le fond html sombre couvre le cas où iOS peint via html. */
body.menu-open .safe-top,
body.menu-open .safe-bottom { background: var(--dark) !important; }
html:has(body.menu-open) { background: var(--dark); }

/* ===== Fond de page SOMBRE sur les pages à hero sombre (.has-hero) =====
   Safari iOS peint les safe areas (encoche / barre d'accueil) avec le fond du
   body/html — comme sur la page calculateur (body sombre) qui n'a jamais eu de
   bande blanche. On rend donc le body sombre ICI, et on redonne un fond clair
   EXPLICITE aux sections claires pour que le rendu reste identique. */
body.has-hero { background: var(--dark); }
body.has-hero .section { background: var(--surface); }
body.has-hero .section.section--dark { background: var(--dark); }
/* Sections sombres "lift" : coins hauts droits -> aucun clair révélé à la jonction
   (la version arrondie laissait voir la section claire derrière les coins). */
.section--dark.section-lift { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Séparateurs (.divider) entre sections claires : centrés/limités à 760px, donc sur
   fond sombre le noir du body débordait des deux côtés. On étire leur fond clair sur
   TOUTE la largeur et on garde les traits courts et centrés (rendu identique). */
body.has-hero .divider:not(.divider--on-dark) { background: var(--surface); max-width: none; }
body.has-hero .divider:not(.divider--on-dark)::before,
body.has-hero .divider:not(.divider--on-dark)::after { flex: 0 1 330px; }