/*
Theme Name: Aedifice Consult
Theme URI: https://aedifice-consult.be
Author: Christophe Keyen
Author URI: https://aedifice-consult.be
Description: Thème sur mesure pour Aedifice Consult — conseil indépendant en rénovation. Design verrouillé, contenu éditable via ACF, Customizer et Custom Post Types.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aedifice
*/

/* ============================================================
   Design tokens — source unique de vérité (voir CLAUDE.md §3)
   Ne pas modifier ces valeurs sans discussion : elles sont
   consommées partout dans le CSS et dans les composants JS.
   ============================================================ */

:root {
  /* Couleurs */
  --green: #1F4A4F;
  --green-deep: #15363A;
  --green-ink: #0E2528;
  --beige: #C8BC9A;
  --beige-soft: #C8BC9A;
  --ivory: #F6F2E8;
  --ivory-warm: #EFE9DA;
  --ink: #0B1819;
  --white: #FFFFFF;

  /* Mise en page */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --rail: clamp(48px, 6vw, 88px);
  --radius: 0px;

  /* Typographie */
  --font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --title-weight: 700;
  --body-weight: 400;
  --title-tracking: -0.02em;

  /* Animation */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Hero — opacité de l'overlay sur la vidéo (plus bas = vidéo plus visible) */
  --hero-overlay-opacity: 0.55;
}

/* ============================================================
   Reset & base
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--green-ink);
  color: var(--ink);
  font-weight: var(--body-weight);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  margin: 0;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

/* ============================================================
   Helpers structurels
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}


/* Drawer mobile : l'état fermé est géré via clip-path + visibility +
   pointer-events (voir .mobile-menu dans la media query ≤980px). On
   n'utilise plus display:none afin de pouvoir animer l'ouverture. */

/* ============================================================
   Composants portés depuis design-source/index.html
   Structure figée du design : nav, hero, stat-shock, about, props,
   modules, differ, testi, alc, faq, final-cta, footer, mobile,
   context strips, module example, pull-quote.
   Les règles body.twk-* correspondent au panneau Tweaks de
   Claude Design, qui n'est pas monté en production : elles sont
   inertes ici (dead code volontairement conservé pour lisibilité
   du CSS d'origine).
   ============================================================ */
  /* --------- Helpers --------- */
  .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--beige);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .section-label::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--beige);
  }
  .section-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--beige);
    font-size: 13px;
  }

  /* --------- Logo --------- */
  .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
  }
  .logo-img {
    height: var(--nav-logo-h);
    width: auto;
    display: block;
    transition: height .35s var(--ease);
  }
  .nav.is-scrolled .logo-img { height: var(--nav-scr-logo-h); }
  body.twk-nav-static .nav.is-scrolled .logo-img { height: var(--nav-logo-h); }
  .foot-brand .logo-img { height: 64px; }

  /* --------- Navigation — two independent states --------- */
  :root {
    /* Initial state (top of page) */
    --nav-bg: rgba(11, 24, 25, 0);
    --nav-blur: 0px;
    --nav-pad-y: 22px;
    --nav-border: transparent;
    --nav-link-color: #FFFFFF;
    --nav-logo-h: 70px;
    --nav-cta-bg: transparent;
    --nav-cta-color: #FFFFFF;
    --nav-cta-border: #FFFFFF;
    /* Scrolled state */
    --nav-scr-bg: rgba(31, 74, 79, 0.85);
    --nav-scr-blur: 14px;
    --nav-scr-pad-y: 14px;
    --nav-scr-border: rgba(175, 161, 125, 0.18);
    --nav-scr-link-color: #FFFFFF;
    --nav-scr-logo-h: 58px;
    --nav-scr-cta-bg: #C8BC9A;
    --nav-scr-cta-color: #1F4A4F;
    --nav-scr-cta-border: #C8BC9A;
    /* Shared */
    --nav-gap: 40px;
    --nav-link-size: 11px;
  }
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: var(--nav-pad-y) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(140%);
    border-bottom: 1px solid var(--nav-border);
    transition: background-color .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  }
  /* Décale la nav fixe sous la barre d'admin WordPress (visible seulement
     pour les utilisateurs connectés ; aucun effet côté visiteur). */
  .admin-bar .nav { top: 32px; }
  @media screen and (max-width: 782px) {
    .admin-bar .nav { top: 46px; }
  }
  .nav.is-scrolled {
    background: var(--nav-scr-bg);
    backdrop-filter: blur(var(--nav-scr-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--nav-scr-blur)) saturate(140%);
    padding-top: var(--nav-scr-pad-y);
    padding-bottom: var(--nav-scr-pad-y);
    border-bottom-color: var(--nav-scr-border);
  }
  /* Static mode — initial state never changes */
  body.twk-nav-static .nav.is-scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur)) saturate(140%);
    padding-top: var(--nav-pad-y);
    padding-bottom: var(--nav-pad-y);
    border-bottom-color: var(--nav-border);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links > li { position: relative; }

  /* Déroulant "Accompagnements" (desktop) */
  .nav-links .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 260px;
    background: rgba(11, 24, 25, 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(175, 161, 125, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
    z-index: 60;
  }
  .nav-links > li:hover > .sub-menu,
  .nav-links > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links .sub-menu li { display: block; }
  .nav-links .sub-menu a {
    display: block;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    transition: color .2s var(--ease), background-color .2s var(--ease);
  }
  .nav-links .sub-menu a:hover {
    color: var(--beige);
    background: rgba(175, 161, 125, 0.08);
    opacity: 1;
  }
  /* Chevron discret sur l'entrée à déroulant */
  .nav-links > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.6;
  }
  .nav-links > li > a:not(.nav-cta) {
    font-size: var(--nav-link-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nav-link-color);
    transition: color .25s var(--ease), opacity .25s var(--ease), background-color .25s var(--ease);
    position: relative;
    padding: 6px 0;
  }
  .nav.is-scrolled .nav-links > li > a { color: var(--nav-scr-link-color); }
  body.twk-nav-static .nav.is-scrolled .nav-links > li > a { color: var(--nav-link-color); }
  .nav-links > li > a:not(.nav-cta):hover { opacity: 0.7; }
  /* Le <li> du CTA ne doit PAS recevoir le style bouton (seul le <a>) :
     sinon double bordure (li.nav-cta + a.nav-cta). */
  .nav-links > li.nav-cta {
    border: 0;
    padding: 0;
    background: none;
  }

  /* Hover style variants */
  body.twk-nav-hover-underline .nav-links a:not(.nav-cta) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    opacity: 1;
    transition: background-size .35s var(--ease), color .25s var(--ease);
  }
  body.twk-nav-hover-underline .nav-links a:not(.nav-cta):hover { background-size: 100% 1px; opacity: 1; }
  body.twk-nav-hover-pill .nav-links a:not(.nav-cta) { padding: 6px 14px; border-radius: 999px; opacity: 1; }
  body.twk-nav-hover-pill .nav-links a:not(.nav-cta):hover { background: rgba(255,255,255,0.10); opacity: 1; }
  body.twk-nav-hover-bracket .nav-links a:not(.nav-cta) { opacity: 1; }
  body.twk-nav-hover-bracket .nav-links a:not(.nav-cta)::before,
  body.twk-nav-hover-bracket .nav-links a:not(.nav-cta)::after {
    content: ""; display: inline-block; width: 0;
    color: var(--beige);
    transition: width .3s var(--ease), margin .3s var(--ease), opacity .3s var(--ease);
    overflow: hidden; opacity: 0;
  }
  body.twk-nav-hover-bracket .nav-links a:not(.nav-cta):hover::before { content: "["; width: 0.6em; margin-right: 4px; opacity: 1; }
  body.twk-nav-hover-bracket .nav-links a:not(.nav-cta):hover::after  { content: "]"; width: 0.6em; margin-left: 4px;  opacity: 1; }

  .nav-cta {
    border: 1px solid var(--nav-cta-border);
    padding: 10px 22px;
    font-size: var(--nav-link-size);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nav-cta-color) !important;
    background: var(--nav-cta-bg);
    transition: all .25s var(--ease);
  }
  .nav.is-scrolled .nav-cta {
    background: var(--nav-scr-cta-bg);
    color: var(--nav-scr-cta-color) !important;
    border-color: var(--nav-scr-cta-border);
  }
  body.twk-nav-static .nav.is-scrolled .nav-cta {
    background: var(--nav-cta-bg);
    color: var(--nav-cta-color) !important;
    border-color: var(--nav-cta-border);
  }
  /* Hover en état haut (contour blanc) : remplissage blanc, texte vert. */
  .nav-cta:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--green) !important;
  }
  /* Hover en état scrollé (bouton doré) : inversion vers vert plein,
     texte blanc. Sélecteur plus spécifique pour battre .nav.is-scrolled
     .nav-cta (3 classes). */
  .nav.is-scrolled .nav-cta:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--white) !important;
  }

  /* Logo variants */
  .logo--in-nav.logo--light { display: inline-flex; }
  .logo--in-nav.logo--dark  { display: none; }
  body.twk-nav-logo-dark .logo--in-nav.logo--light { display: none; }
  body.twk-nav-logo-dark .logo--in-nav.logo--dark  { display: inline-flex; }
  /* Scrolled-state logo variant: opt-in via twk-nav-scr-logo-dark */
  body.twk-nav-scr-logo-dark .nav.is-scrolled .logo--in-nav.logo--light { display: none; }
  body.twk-nav-scr-logo-dark .nav.is-scrolled .logo--in-nav.logo--dark  { display: inline-flex; }
  body.twk-nav-static.twk-nav-logo-dark .nav.is-scrolled .logo--in-nav.logo--light { display: none; }
  body.twk-nav-static.twk-nav-logo-dark .nav.is-scrolled .logo--in-nav.logo--dark  { display: inline-flex; }

  /* Mobile menu — hidden by default; mobile media query enables it */
  .mobile-menu { display: none; }

  .nav-toggle { display: none; }

  /* --------- Hero --------- */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    background-color: var(--green-ink);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
  }
  .hero-media {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: -2;
  }
  .hero-media video,
  .hero-media .hero-fallback {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) contrast(1.05) saturate(0.85);
  }
  .hero-media .hero-fallback {
    background:
      radial-gradient(130% 100% at 78% 12%, rgba(31, 74, 79, 0.85) 0%, rgba(31, 74, 79, 0) 55%),
      linear-gradient(135deg, var(--green-deep) 0%, var(--green-ink) 55%, var(--ink) 100%);
  }
  @keyframes heroPan {
    0%   { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(1.18); }
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background:
      linear-gradient(120deg, rgba(31,74,79,1) 0%, rgba(14,37,40,0.92) 60%, rgba(11,24,25,1) 100%);
    opacity: var(--hero-overlay-opacity);
    z-index: -1;
  }
  .hero-overlay::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 80% 50%, transparent 0%, rgba(0,0,0,0.35) 90%);
  }
  /* Seamless blend: dissolve the hero video into the next section's color (#15363A) */
  .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(to bottom,
      rgba(21,54,58,0) 0%,
      rgba(21,54,58,0.35) 48%,
      rgba(21,54,58,0.82) 82%,
      #15363A 100%);
    z-index: -1;
    pointer-events: none;
  }

  .hero-rail {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--rail);
    border-right: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 140px 0 56px;
    z-index: 2;
  }
  .hero-rail .num {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.55);
  }
  .hero-rail .num strong {
    color: var(--beige-soft);
    font-weight: 700;
  }
  .hero-rail .scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .hero-rail .scroll-cue .line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
    animation: scrollCue 2.4s var(--ease) infinite;
  }
  @keyframes scrollCue {
    0%, 100% { transform: scaleY(0.6); transform-origin: top; }
    50% { transform: scaleY(1); }
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 140px var(--gutter) 80px var(--gutter);
    max-width: var(--container);
    margin: 0 auto;
  }
  .hero-content {
    max-width: 880px;
    text-transform: uppercase;
  }
  .hero-content .hero-sub {
    letter-spacing: 0.04em;
  }
  .hero-content .btn { /* already uppercase, keep tracking */ }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--beige-soft);
    margin-bottom: 32px;
  }
  .hero h1 {
    font-weight: 700;
    font-size: clamp(32px, 4.4vw, 62px);
    line-height: 1.14;
    letter-spacing: -0.025em;
    margin: 0 0 28px;
    color: var(--white);
    max-width: 16ch;
  }
  .hero h1 span {
    display: block;
  }
  .hero h1 .accent {
    color: var(--beige-soft);
    font-weight: 700;
  }
  .hero-sub {
    max-width: 100%;
    color: rgba(255,255,255,0.78);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    margin: 0 0 48px;
    font-weight: 400;
  }
  .hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all .3s var(--ease);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-arrow {
    width: 18px; height: 1px;
    background: currentColor;
    position: relative;
    transition: width .3s var(--ease);
  }
  .btn-arrow::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 7px; height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translate(0, -50%) rotate(45deg);
  }
  .btn:hover .btn-arrow { width: 26px; }

  .btn-outline-light {
    color: var(--white);
    border-color: var(--white);
  }
  .btn-outline-light:hover {
    background: var(--white);
    color: var(--green);
  }
  /* Hero "Prendre rendez-vous" : blanc plein → doré au hover */
  .hero .hero-cta-row .btn-outline-light,
  .stat-punch .btn-outline-light,
  .modules .btn-outline-light {
    background: var(--white);
    color: var(--green);
    border-color: var(--white);
  }
  .hero .hero-cta-row .btn-outline-light:hover,
  .stat-punch .btn-outline-light:hover,
  .modules .btn-outline-light:hover {
    background: #C8BC9A;
    color: var(--green);
    border-color: #C8BC9A;
  }
  .btn-ghost-light {
    color: var(--white);
    padding: 18px 4px;
  }
  .btn-ghost-light:hover { color: var(--beige-soft); }

  .btn-solid-green {
    background: var(--green);
    color: var(--ivory);
    border-color: var(--green);
  }
  .btn-solid-green:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
  }
  .btn-solid-beige {
    background: var(--beige);
    color: var(--green-ink);
    border-color: var(--beige);
  }
  .btn-solid-beige:hover {
    background: var(--beige-soft);
    border-color: var(--beige-soft);
  }
  .btn-outline-green {
    color: var(--green);
    border-color: var(--green);
  }
  .btn-outline-green:hover {
    background: var(--green);
    color: var(--ivory);
  }
  .btn-ghost-green {
    color: var(--green);
    padding: 18px 4px;
  }
  .btn-ghost-green:hover { color: var(--beige); }

  /* Hero floating meta (bottom-right) */
  .hero-meta {
    position: absolute;
    right: var(--gutter);
    bottom: 56px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 32px;
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .hero-meta .label {
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--beige-soft);
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .hero-meta .value {
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
  }
  .hero-meta-block { display: flex; flex-direction: column; }

  /* Scroll cue — bottom-left, aligned with title gutter & meta baseline */
  .scroll-mouse {
    position: absolute;
    left: var(--gutter);
    bottom: 56px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.78);
    user-select: none;
    text-decoration: none;
    transition: transform .35s var(--ease), color .35s var(--ease);
  }
  .scroll-mouse:hover { color: var(--white); transform: translateY(-4px); }
  .scroll-mouse .mouse {
    width: 22px;
    height: 36px;
    border: 1.5px solid currentColor;
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
  }
  .scroll-mouse .mouse::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 2px;
    height: 7px;
    background: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollMouseDot 1.8s cubic-bezier(.6,0,.4,1) infinite;
  }
  .scroll-mouse .label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--beige-soft);
  }
  @keyframes scrollMouseDot {
    0%   { transform: translate(-50%, 0);   opacity: 0; }
    20%  { opacity: 1; }
    80%  { transform: translate(-50%, 12px); opacity: 0; }
    100% { transform: translate(-50%, 12px); opacity: 0; }
  }

  /* --------- Section: Stat shock (Enjeu) --------- */
  .stat-shock {
    background: linear-gradient(to bottom, #15363A 0%, #1F4A4F 100%);
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
    overflow: hidden;
  }
  .stat-shock .container {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 100px);
  }
  .stat-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(20px, 2.4vw, 36px);
  }
  .stat-shock-num {
    font-weight: 700;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--white);
    font-feature-settings: "tnum";
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 48px);
  }
  .stat-shock-num .from { color: rgba(255,255,255,0.42); }
  .stat-shock-num .dash {
    color: var(--beige);
    font-weight: 400;
    font-size: 0.5em;
    letter-spacing: 0;
    align-self: center;
    transform: translateY(-0.05em);
  }
  .stat-shock-num .to { color: var(--beige); }
  .stat-shock-num em {
    font-style: normal;
    color: var(--beige-soft);
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 0.1em;
  }
  .stat-caption {
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.3;
    color: var(--white);
    font-weight: 700;
    margin: 0 auto;
    max-width: 720px;
    text-align: center;
  }
  .stat-caption p { margin: 0; }
  .stat-caption .accent,
  .stat-caption em { color: var(--beige-soft); font-style: normal; }
  .stat-causes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(175,161,125,0.22);
  }
  .stat-causes li {
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px) 0 clamp(24px, 2.5vw, 36px);
    border-right: 1px solid rgba(175,161,125,0.18);
    position: relative;
  }
  .stat-causes li:first-child { padding-left: 0; }
  .stat-causes li:last-child { border-right: none; padding-right: 0; }
  .stat-causes .n {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--beige);
    margin-bottom: 18px;
  }
  .stat-causes h4 {
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--white);
  }
  .stat-causes li p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    margin: 0;
    max-width: 32ch;
  }
  .stat-punch {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    border-top: 1px solid rgba(175,161,125,0.22);
    padding-top: clamp(32px, 4vw, 48px);
  }
  .stat-punch .rule {
    width: 60px;
    height: 1px;
    background: var(--beige);
    margin-top: 0.7em;
    flex-shrink: 0;
  }
  .stat-punch p {
    font-size: clamp(18px, 1.9vw, 26px);
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
    color: var(--white);
    max-width: 780px;
  }
  .stat-punch p .hl { color: var(--beige); }
  @media (max-width: 768px) {
    .stat-causes { grid-template-columns: 1fr; }
    .stat-causes li {
      border-right: none;
      border-bottom: 1px solid rgba(175,161,125,0.18);
      padding: 28px 0;
    }
    .stat-causes li:last-child { border-bottom: none; padding-bottom: 0; }
    .stat-punch { flex-direction: column; align-items: flex-start; }
  }

  /* --------- Section: Value props --------- */
  .props {
    background: var(--green);
    color: var(--white);
    padding: clamp(100px, 14vw, 180px) 0;
    position: relative;
    overflow: hidden;
  }
  .props::before {
    content: "";
    display: none;
    left: var(--gutter);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: rgba(175, 161, 125, 0.7);
  }
  .props-head {
    margin-bottom: clamp(60px, 8vw, 100px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: end;
  }
  .props-head .section-num { display: block; margin-bottom: 24px; }
  .props-head h2 {
    font-size: clamp(28px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--white);
    text-transform: uppercase;
  }
  .props-head h2 .accent { color: var(--beige); text-transform: uppercase; display: block; }
  .props-head h2 em {
    font-style: italic;
    color: var(--beige-soft);
    font-weight: 700;
  }
  .props-head p {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    max-width: 460px;
  }
  .props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(175, 161, 125, 0.18);
    border: 1px solid rgba(175, 161, 125, 0.18);
  }
  .prop {
    background: var(--green);
    padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
    transition: background-color .4s var(--ease);
    cursor: default;
  }
  .prop:hover { background: var(--green-deep); }
  .prop-num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--beige);
    margin-bottom: 36px;
    display: block;
  }
  .prop-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 32px;
    color: var(--beige);
  }
  .prop h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    color: var(--white);
  }
  .prop p {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }

  /* --------- Section: Modules --------- */
  .modules {
    background: #15363A;
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
  }
  .modules-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: end;
    margin-bottom: clamp(60px, 8vw, 100px);
  }
  .modules-head .section-num { display: block; margin-bottom: 24px; }
  .modules-head h2 {
    font-size: clamp(28px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--white);
    text-transform: uppercase;
  }
  .modules-head h2 .accent { color: var(--beige); text-transform: uppercase; display: block; }
  .modules-head h2 em {
    font-style: italic;
    color: var(--beige-soft);
    font-weight: 700;
  }
  .modules-head p {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    max-width: 480px;
    opacity: 1;
  }
  .modules-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.5vw, 32px);
  }
  .module-card {
    background: var(--green-card, #15363A);
    border: 1px solid rgba(175, 161, 125, 0.15);
    padding: clamp(36px, 4vw, 56px);
    position: sticky;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    grid-template-columns: clamp(100px, 13vw, 220px) 1fr;
    column-gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
    min-height: 360px;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
    text-decoration: none;
    color: inherit;
  }
  /* Sticky stack — each card pins a little lower so the next slides up and over it */
  .modules-grid .module-card:nth-child(1) { top: 104px; }
  .modules-grid .module-card:nth-child(2) { top: 132px; }
  .modules-grid .module-card:nth-child(3) { top: 160px; }
  .modules-grid .module-card:nth-child(4) { top: 188px; }
  /* Shadow above each card reads as it overlaps the one beneath */
  .modules-grid .module-card { box-shadow: 0 -28px 60px -34px rgba(0,0,0,0.6); }
  .module-card:hover {
    transform: translateY(-6px);
    background: var(--green-soft, #1F4A4F);
    border-color: var(--beige);
    box-shadow: 0 30px 60px -28px rgba(0,0,0,0.45);
  }
  .module-watermark {
    position: static;
    grid-column: 1;
    align-self: start;
    font-size: clamp(64px, 8vw, 144px);
    font-weight: 800;
    line-height: 0.8;
    color: rgba(175, 161, 125, 0.32);
    letter-spacing: -0.05em;
    user-select: none;
    pointer-events: none;
    transition: color .4s var(--ease);
  }
  .module-card:hover .module-watermark { color: rgba(175, 161, 125, 0.55); }
  .module-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  @media (max-width: 640px) {
    .modules-grid .module-card { grid-template-columns: 1fr; row-gap: 4px; }
    .module-watermark { font-size: clamp(48px, 16vw, 84px); margin-bottom: 6px; }
  }
  .module-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
  }
  .module-card h3 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
  }
  .module-card .subtitle {
    color: var(--beige-soft);
    font-style: italic;
    font-size: 14px;
    margin: 0 0 24px;
    position: relative;
    z-index: 1;
  }
  .module-card p.desc {
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 auto;
    opacity: 1;
    position: relative;
    z-index: 1;
  }
  .module-foot {
    margin-top: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 1;
    padding-top: 28px;
    border-top: 1px solid rgba(175, 161, 125, 0.18);
  }
  .module-price .label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 6px;
  }
  .module-price .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .module-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--beige);
    transition: gap .3s var(--ease), color .3s var(--ease);
  }
  .module-link::after {
    content: "→";
    font-size: 14px;
    transition: transform .3s var(--ease);
  }
  .module-card:hover .module-link { color: var(--white); gap: 18px; }
  .module-card:hover .module-link::after { transform: translateX(4px); }

  /* --------- Section: Differentiator --------- */
  .differ {
    background: #15363A;
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
  }
  .differ .container {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(48px, 7vw, 120px);
    align-items: center;
  }
  .differ-quote {
    position: relative;
  }
  /* Differ quote overlay big mark — lighter on dark */
  .differ-quote::before {
    content: "”";
    position: absolute;
    top: -40px; left: -10px;
    font-size: 240px;
    color: var(--beige);
    opacity: 0.18;
    line-height: 1;
    font-family: 'Montserrat', serif;
    pointer-events: none;
  }
  .differ-quote p {
    font-size: clamp(22px, 2.8vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--white);
    margin: 0 0 28px;
    position: relative;
    z-index: 1;
  }
  .differ-quote p em {
    font-style: italic;
    color: var(--beige-soft);
  }
  .differ-quote cite {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    opacity: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .differ-quote cite::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--beige);
  }
  .differ-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .differ-list li {
    display: grid;
    grid-template-columns: 28px 36px 1fr;
    gap: 0;
    padding: 24px 0;
    border-bottom: 1px solid rgba(175, 161, 125, 0.22);
    align-items: center;
    list-style: none;
  }
  .differ-list li:last-child { border-bottom: none; }
  .differ-list .idx {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--beige);
  }
  .differ-list .dash {
    width: 20px; height: 1px;
    background: var(--beige);
  }
  .differ-list .text {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.005em;
  }
  .differ-list ul { padding: 0; margin: 0; }

  /* --------- Section: Testimonials --------- */
  .testi {
    background-color: #15363A;
    background-image:
      linear-gradient(to bottom, #15363A 0%, rgba(21,54,58,0.9) 16%, rgba(21,54,58,0.85) 55%, #1F4A4F 100%),
      var(--testi-bg, none);
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
    overflow: hidden;
  }
  .testi-head {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 80px);
  }
  .testi-head .section-label {
    color: var(--beige-soft);
    margin-bottom: 28px;
  }
  .testi-head .section-label::before { background: var(--beige); }
  .testi-head h2 {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 720px;
    margin-inline: auto;
    color: var(--white);
  }
  .testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .testi-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(175, 161, 125, 0.2);
    padding: clamp(32px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: background-color .4s var(--ease), border-color .4s var(--ease);
  }
  .testi-card:hover {
    background: rgba(175, 161, 125, 0.06);
    border-color: rgba(175, 161, 125, 0.4);
  }
  .testi-mark {
    color: var(--beige);
    font-size: 36px;
    line-height: 0.5;
    height: 14px;
    font-weight: 700;
  }
  .testi-card blockquote {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.86);
    font-weight: 400;
    flex: 1;
  }
  .testi-card blockquote strong {
    color: var(--white);
    font-weight: 600;
    background: linear-gradient(transparent 60%, rgba(175,161,125,0.22) 60%);
  }
  .testi-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid rgba(175, 161, 125, 0.2);
    padding-top: 20px;
  }
  .testi-foot .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .testi-foot .meta {
    font-size: 12px;
    color: var(--beige-soft);
    letter-spacing: 0.04em;
  }

  /* --------- Section: À la carte --------- */
  .alc {
    background: #15363A;
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
  }
  /* Sur la page dédiée, la section précède directement le CTA final :
     dégradé étiré vers le vert du CTA (#1F4A4F) pour un raccord doux. */
  .alc--page-end {
    background: linear-gradient(to bottom, #15363A 0%, #1F4A4F 100%);
  }
  .alc-head {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
  }
  .alc-head h2 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--white);
  }
  .alc-head h2 em {
    font-style: italic;
    color: var(--beige-soft);
  }
  .alc-head p {
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    max-width: 480px;
    opacity: 1;
  }
  .alc-list {
    border-top: 1px solid rgba(175, 161, 125, 0.25);
  }
  .alc-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(175, 161, 125, 0.18);
    transition: background-color .3s var(--ease), padding-left .3s var(--ease);
    cursor: pointer;
  }
  .alc-row:hover {
    background: linear-gradient(to right, rgba(175,161,125,0.10), transparent 80%);
    padding-left: 16px;
  }
  .alc-row .num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--beige);
  }
  .alc-row .title {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .alc-row .desc {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    opacity: 1;
    max-width: 320px;
    text-align: right;
  }
  .alc-row .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--beige-soft);
    letter-spacing: -0.01em;
    min-width: 130px;
    text-align: right;
  }
  .alc-row .price small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--beige);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* --------- Section: FAQ (master–detail explorer) --------- */
  .faq {
    background: var(--green-ink);
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
  }
  .faq .container { display: block; }
  .faq-head { margin-bottom: clamp(48px, 6vw, 80px); }
  .faq-head h2 {
    font-size: clamp(28px, 6vw, 45px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
  }
  .faq-head h2 .accent { color: var(--beige); text-transform: uppercase; }

  /* Bold editorial Q&A — fewer questions, more prominent */
  .faq-big {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(175,161,125,0.25);
  }
  .faq-big-row {
    display: grid;
    grid-template-columns: clamp(80px, 8vw, 132px) 1fr;
    gap: clamp(24px, 5vw, 80px);
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid rgba(175,161,125,0.18);
    align-items: start;
    transition: padding-left .45s var(--ease);
  }
  .faq-big-row:hover { padding-left: 14px; }
  .faq-big-num {
    font-size: clamp(38px, 4.6vw, 76px);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(175,161,125,0.55);
    text-stroke: 1.5px rgba(175,161,125,0.55);
    transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
  }
  .faq-big-row:hover .faq-big-num {
    color: var(--beige);
    -webkit-text-stroke-color: var(--beige);
  }
  .faq-big-body { max-width: 66ch; }
  .faq-big-cat {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--beige);
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
  }
  .faq-big-cat::before { content: ""; width: 24px; height: 1px; background: var(--beige); }
  .faq-big-q {
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 20px;
  }
  .faq-big-a {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: rgba(255,255,255,0.8);
    margin: 0;
  }
  @media (max-width: 760px) {
    .faq-big-row { grid-template-columns: 1fr; gap: 14px; padding: clamp(32px, 9vw, 48px) 0; }
    .faq-big-num { font-size: clamp(34px, 14vw, 56px); }
  }

  /* --------- Section: Final CTA --------- */
  .final-cta {
    background: var(--green);
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
    overflow: hidden;
  }
  .cta-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(48px, 7vw, 100px);
    align-items: stretch;
  }
  .cta-text .section-num { margin-bottom: 28px; display: inline-block; }
  .cta-text h2 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 32px;
    max-width: 22ch;
  }
  .cta-text h2 .accent {
    color: var(--beige);
    font-style: normal;
    text-transform: uppercase;
    display: block;
  }
  .cta-text p {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    margin: 0 0 48px;
    max-width: 50ch;
  }
  .cta-row {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
  .cta-aside {
    border: 1px solid rgba(175,161,125,0.3);
    padding: clamp(32px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    background: rgba(14,37,40,0.4);
  }
  .cta-aside-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .cta-aside-title::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--beige);
  }
  .cta-channel {
    padding: 22px 0;
    border-top: 1px solid rgba(175,161,125,0.2);
  }
  .cta-channel:last-child { border-bottom: 1px solid rgba(175,161,125,0.2); }
  .cta-channel .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
    display: block;
  }
  .cta-channel a {
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.005em;
    transition: color .25s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .cta-channel a::after {
    content: "\2192";
    color: var(--beige);
    transition: transform .3s var(--ease);
  }
  .cta-channel a:hover { color: var(--beige-soft); }
  .cta-channel a:hover::after { transform: translateX(4px); }

  /* --------- Footer --------- */
  footer {
    background: #15363a;
    color: rgba(255,255,255,0.6);
    padding: 80px 0 32px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .foot-col h4 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--beige-soft);
    margin: 0 0 20px;
  }
  .foot-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .foot-col a {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    transition: color .25s var(--ease);
  }
  .foot-col a:hover { color: var(--beige-soft); }
  .foot-brand p {
    margin: 24px 0 0;
    font-size: 13px;
    line-height: 1.6;
    max-width: 380px;
    color: rgba(255,255,255,0.6);
  }
  .foot-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .foot-bottom .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .foot-bottom .badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--beige);
  }

  /* --------- Reveal on scroll --------- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* --------- Mobile --------- */
  @media (max-width: 980px) {
    .nav-links { display: none; }
    .nav-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 26px; right: var(--gutter);
      z-index: 120;
      width: 44px; height: 44px;
      color: var(--white);
    }
    .nav-toggle span {
      display: block;
      width: 22px; height: 1.5px;
      background: currentColor;
      position: relative;
      transition: background .2s var(--ease);
    }
    .nav-toggle span::before, .nav-toggle span::after {
      content: "";
      position: absolute; left: 0; right: 0;
      height: 1.5px;
      background: currentColor;
      transition: top .25s var(--ease), transform .25s var(--ease) .04s;
    }
    .nav-toggle span::before { top: -7px; }
    .nav-toggle span::after { top: 7px; }
    /* Morph en croix quand le menu est ouvert (hook sur aria-expanded) */
    .nav-toggle[aria-expanded="true"] span { background: transparent; }
    .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
    .mobile-menu {
      display: flex;
      position: fixed;
      inset: 0;
      /* Halo qui émane du hamburger → renforce la lecture de la bulle. */
      background:
        radial-gradient(circle at calc(100% - 42px) 44px,
          var(--green) 0%, var(--green-deep) 26%, var(--green-ink) 62%);
      background-color: var(--green-ink);
      z-index: 100;
      flex-direction: column;
      padding: 20px var(--gutter) 32px;
      overflow-y: auto;
      /* Révélation en cercle depuis le hamburger (coin haut-droit). */
      clip-path: circle(0px at calc(100% - 42px) 44px);
      visibility: hidden;
      pointer-events: none;
      /* Fermeture : la bulle se referme vers le bouton (miroir de l'ouverture). */
      transition: clip-path .7s cubic-bezier(.5, 0, .2, 1), visibility 0s linear .7s;
    }
    .mobile-menu.is-open {
      clip-path: circle(150% at calc(100% - 42px) 44px);
      visibility: visible;
      pointer-events: auto;
      transition: clip-path .85s cubic-bezier(.5, 0, .2, 1), visibility 0s;
    }
    .mobile-menu .mm-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 32px;
    }
    /* Ancienne croix du drawer masquée : le hamburger (fixe) sert de
       bouton de fermeture en se transformant en croix. */
    .mobile-menu .mm-close {
      display: none;
      width: 44px; height: 44px;
      color: var(--white);
      position: relative;
    }
    .mobile-menu .mm-close::before, .mobile-menu .mm-close::after {
      content: ""; position: absolute;
      top: 50%; left: 50%;
      width: 22px; height: 1.5px;
      background: currentColor;
    }
    .mobile-menu .mm-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .mobile-menu .mm-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
    /* Liste centrée verticalement dans l'espace sous le logo. Les marges
       auto se répartissent l'espace libre → équilibré ; s'il n'y a pas de
       place (petit écran), elles retombent à 0 et la liste se cale en haut,
       défilable via overflow-y:auto → jamais de coupure. */
    .mobile-menu nav { width: 100%; margin-top: auto; margin-bottom: auto; }
    .mobile-menu-list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 14px;
      counter-reset: mm;
    }
    .mobile-menu-list > li { counter-increment: mm; }
    .mobile-menu-list > li > a {
      display: block;
      font-size: 22px; font-weight: 700;
      color: var(--white);
      letter-spacing: -0.01em;
    }
    .mobile-menu-list > li > a::before {
      content: "/0" counter(mm);
      display: block;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.32em;
      color: var(--beige);
      margin-bottom: 3px;
    }
    /* Sous-menu des modules dans le drawer : indenté, plus discret */
    .mobile-menu-list .sub-menu {
      list-style: none; margin: 10px 0 0; padding: 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .mobile-menu-list .sub-menu a {
      font-size: 14px; font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
    }
    /* Apparition en cascade du logo puis des items à l'ouverture. */
    .mobile-menu .mm-head,
    .mobile-menu-list > li {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }
    .mobile-menu.is-open .mm-head,
    .mobile-menu.is-open .mobile-menu-list > li {
      opacity: 1;
      transform: none;
    }
    .mobile-menu.is-open .mm-head { transition-delay: .28s; }
    .mobile-menu.is-open .mobile-menu-list > li:nth-child(1) { transition-delay: .36s; }
    .mobile-menu.is-open .mobile-menu-list > li:nth-child(2) { transition-delay: .44s; }
    .mobile-menu.is-open .mobile-menu-list > li:nth-child(3) { transition-delay: .52s; }
    .mobile-menu.is-open .mobile-menu-list > li:nth-child(4) { transition-delay: .60s; }
    .mobile-menu.is-open .mobile-menu-list > li:nth-child(5) { transition-delay: .68s; }
    /* Le CTA reste un simple grand lien dans le drawer (pas un bouton) */
    .mobile-menu-list .nav-cta {
      border: none; padding: 0;
      background: none !important;
      color: var(--white) !important;
      text-transform: none;
      letter-spacing: -0.01em;
    }
    /* Masque le bouton CTA de la barre supérieure sur mobile
       (le menu desktop est déjà caché ; ceinture-bretelles). */
    .nav-primary { display: none; }

    .hero-rail { width: 40px; padding: 110px 0 32px; }
    .hero-rail .num { font-size: 10px; }
    .hero-rail .scroll-cue { display: none; }
    .hero-meta { display: none; }
    .scroll-mouse { display: none; }
    .hero-inner { padding: 130px var(--gutter) 80px var(--gutter); }

    .stat-shock .container,
    .props-head,
    .props-grid,
    .modules-head,
    .modules-grid,
    .differ .container,
    .testi-grid,
    .alc-head,
    .faq .container,
    .foot-grid {
      grid-template-columns: 1fr !important;
    }
    .props-grid { gap: 1px; }
    .faq h2 { position: static; }
    .cta-grid { grid-template-columns: 1fr; }

    .alc-row {
      grid-template-columns: 40px 1fr;
      gap: 16px;
    }
    .alc-row .desc { display: none; }
    .alc-row .price { grid-column: 2; text-align: left; min-width: 0; }
  }

  @media (max-width: 600px) {
    .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
    .hero-cta-row .btn { width: 100%; justify-content: space-between; }
    .differ-quote::before { display: none; }
  }

  .module-card,
  .testi-card,
  .btn,
  .nav-cta,
  .prop {
    border-radius: var(--radius);
  }

  /* --------- About Christophe --------- */
  .about {
    background: var(--green);
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
    position: relative;
  }
  .about .container {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
  }
  .about-media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--green-ink) url('https://images.unsplash.com/photo-1542621334-a254cf47733d?auto=format&w=1600&q=80') center / cover;
  }
  .about-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,37,40,0.45));
  }
  .about-tag {
    position: absolute;
    bottom: 24px; left: 24px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--beige-soft);
    z-index: 1;
  }
  .about-tag::before {
    content: "";
    display: inline-block;
    width: 24px; height: 1px;
    background: var(--beige);
    margin-right: 12px;
    vertical-align: middle;
  }
  .about-content .section-num { margin-bottom: 28px; color: var(--beige-soft); }
  .about-content h2 {
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: var(--white);
    text-transform: uppercase;
  }
  .about-content h2 .accent { color: var(--beige); text-transform: uppercase; }
  .about-content h2 em { font-style: italic; color: var(--beige-soft); }
  .about-content p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 16px;
    max-width: 540px;
  }
  .about-sign {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid rgba(175, 161, 125, 0.25);
  }
  .about-sign .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .about-sign .role {
    font-size: 11px;
    font-weight: 500;
    color: var(--beige-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* --------- Context image strips --------- */
  .context-strip {
    position: relative;
    height: clamp(280px, 36vw, 480px);
    overflow: hidden;
    background: var(--green-ink);
  }
  .context-strip .bg {
    position: absolute; inset: 0;
    background-image: var(--context-bg);
    background-size: cover;
    background-position: center;
    filter: grayscale(0.3) contrast(1.04) saturate(0.85);
  }
  .context-strip::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(14,37,40,0.7) 0%, rgba(31,74,79,0.5) 60%, rgba(14,37,40,0.85) 100%);
  }
  .context-strip .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(36px, 6vw, 64px);
  }
  .context-strip p {
    font-size: clamp(18px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--white);
    max-width: 100%;
    margin: 0;
    text-wrap: balance;
  }
  .context-strip p em { font-style: normal; color: var(--beige-soft); }

  /* --------- Module example + contextual CTA --------- */
  .module-example {
    margin: 0 0 24px;
    padding: 14px 18px;
    background: rgba(175, 161, 125, 0.08);
    border-left: 2px solid var(--beige);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
    position: relative;
    z-index: 1;
  }
  .module-example strong {
    color: var(--beige-soft);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .module-cta-row {
    margin-top: 18px;
    padding: 18px 20px;
    background: rgba(175, 161, 125, 0.08);
    border: 1px dashed rgba(175, 161, 125, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
  }
  .module-card:hover .module-cta-row {
    background: rgba(175, 161, 125, 0.14);
    border-color: var(--beige);
    border-style: solid;
  }
  .module-cta-row .copy {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,0.88);
    font-weight: 500;
  }
  .module-cta-row .copy strong { color: var(--beige-soft); font-weight: 600; }
  .module-cta-row .arrow {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: 1px solid var(--beige);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--beige);
    transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  }
  .module-card:hover .module-cta-row .arrow {
    background: var(--beige);
    color: var(--green-deep);
    transform: translateX(4px);
  }

  /* --------- Pull-quote breath section --------- */
  .pull-quote {
    background: #15363A;
    color: var(--white);
    padding: clamp(140px, 18vw, 240px) 0;
    position: relative;
    overflow: hidden;
  }
  .pull-quote::before {
    content: "\201C";
    position: absolute;
    top: 4vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(160px, 22vw, 320px);
    font-weight: 700;
    color: var(--beige);
    opacity: 0.12;
    line-height: 1;
    pointer-events: none;
    font-family: 'Montserrat', serif;
  }
  .pull-quote .container {
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .pull-quote blockquote {
    margin: 0 auto;
    max-width: 920px;
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--white);
  }
  .pull-quote blockquote em {
    font-style: italic;
    color: var(--beige-soft);
  }
  .pull-quote .attribution {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
  }
  .pull-quote .attribution::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--beige);
  }

  @media (max-width: 980px) {
    .about .container { grid-template-columns: 1fr; }
    .about-media { aspect-ratio: 4/3; }
    .context-strip { height: 320px; }
    .module-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  }

/* ============================================================
   Composants spécifiques aux pages secondaires
   (portés depuis design-source/approche.html, contact.html,
   module-01-coaching.html)
   ============================================================ */
  /* =====================================================
     1. PAGE HEADER — typographic banner, no image
     ===================================================== */
  .page-header {
    background: var(--green-ink);
    color: var(--white);
    padding: 150px 0 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .ph-media {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: -2;
  }
  .ph-media video,
  .ph-media .ph-fallback {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) contrast(1.05) saturate(0.85);
  }
  .ph-media .ph-fallback {
    background:
      radial-gradient(130% 100% at 78% 12%, rgba(31, 74, 79, 0.85) 0%, rgba(31, 74, 79, 0) 55%),
      linear-gradient(135deg, var(--green-deep) 0%, var(--green-ink) 55%, var(--ink) 100%);
  }
  @keyframes heroPan {
    0%   { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(1.18); }
  }
  .ph-overlay {
    position: absolute; inset: 0;
    background:
      linear-gradient(120deg, rgba(31,74,79,1) 0%, rgba(14,37,40,0.92) 60%, rgba(11,24,25,1) 100%);
    opacity: 0.78;
    z-index: -1;
  }
  .ph-overlay::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 80% 50%, transparent 0%, rgba(0,0,0,0.35) 90%);
  }
  .ph-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 40px;
  }
  .ph-crumb .sep { color: rgba(175,161,125,0.4); font-weight: 400; }
  .ph-crumb .here { color: rgba(255,255,255,0.6); }
  .ph-top {
    display: block;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(175,161,125,0.22);
  }
  /* Pas de barre quand rien ne suit le bloc titre (approche, contact).
     Sur les modules, la barre sépare le titre des métas → conservée. */
  .ph-top:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .page-header h1 {
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
  }
  /* Seamless blend: dissolve the header video into the next section's color (#15363A) */
  .page-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(to bottom,
      rgba(21,54,58,0) 0%,
      rgba(21,54,58,0.35) 48%,
      rgba(21,54,58,0.82) 82%,
      #15363A 100%);
    z-index: -1;
    pointer-events: none;
  }
  .ph-lead {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.7;
    color: rgba(255,255,255,0.74);
    margin: 28px 0 0;
    max-width: 56ch;
  }
  /* Inline meta strip on a hairline rule */
  .ph-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid rgba(175,161,125,0.22);
    border-bottom: 1px solid rgba(175,161,125,0.22);
  }
  .ph-meta-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px clamp(20px, 2.6vw, 40px);
    flex: 1 1 auto;
    min-width: 180px;
    position: relative;
  }
  .ph-meta-block + .ph-meta-block::before {
    content: "";
    position: absolute;
    left: 0; top: 22px; bottom: 22px;
    width: 1px;
    background: rgba(175,161,125,0.22);
  }
  .ph-meta-block:first-child { padding-left: 0; }
  .ph-meta-block .label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--beige);
  }
  .ph-meta-block .value {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.005em;
  }

  /* =====================================================
     2. STORY — editorial intro + dynamic photo collage
     ===================================================== */
  .story {
    background: var(--green);
    color: var(--white);
    padding: clamp(110px, 14vw, 180px) 0;
    position: relative;
    overflow: hidden;
  }
  /* Intro — asymmetric two-column header */
  .story .container {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(40px, 6vw, 104px);
    align-items: center;
  }
  /* Layered photo composition */
  .story-visual {
    position: relative;
    padding: clamp(18px, 2.4vw, 36px) clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px) clamp(18px, 2.4vw, 36px);
  }
  .story-visual .frame-line {
    position: absolute;
    top: 0; left: 0;
    right: clamp(56px, 7vw, 116px);
    bottom: clamp(64px, 8vw, 132px);
    border: 1px solid rgba(175, 161, 125, 0.45);
    z-index: 0;
  }
  .story-visual .photo-main {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
  }
  .story-visual .photo-float {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 54%;
    aspect-ratio: 5 / 4;
    box-shadow: 0 36px 70px -30px rgba(0,0,0,0.6);
  }
  /* Narrative column */
  .story-text .section-num { display: block; margin-bottom: 22px; }
  .story-text h2 {
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 28px;
  }
  .story-text h2 .accent {
    color: var(--beige-soft);
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    display: block;
  }
  .story-lede p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255,255,255,0.82);
    margin: 0 0 16px;
  }
  .story-lede p:last-of-type { margin-bottom: 0; }
  .story-sign {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(175,161,125,0.28);
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
  }
  .story-sign .name { font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: 0.01em; }
  .story-sign .role { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beige); }

  .cphoto {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(14,37,40,0.12), rgba(14,37,40,0.5)),
      repeating-linear-gradient(135deg, rgba(175,161,125,0.10) 0 14px, transparent 14px 28px),
      var(--green-deep);
    border: 1px solid rgba(175,161,125,0.18);
    transition: transform .5s var(--ease), border-color .4s var(--ease);
  }
  .cphoto::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(14,37,40,0.55));
    pointer-events: none;
  }
  .cphoto:hover { transform: scale(1.015); border-color: rgba(175,161,125,0.45); }
  .cphoto .tag {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--beige);
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(14,37,40,0.6);
    border: 1px solid rgba(175,161,125,0.4);
  }
  .cphoto .tag::before { content: ""; width: 7px; height: 7px; background: var(--beige); }
  .cphoto .cap {
    position: absolute;
    bottom: 16px; left: 18px; right: 18px;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cphoto .cap::before { content: ""; flex: 0 0 auto; width: 22px; height: 1px; background: var(--beige); }
  /* aspect handled per element (.photo-main / .photo-float) */

  /* =====================================================
     3. PROCESS — vertical timeline, alternating cards
     ===================================================== */
  /* =====================================================
     1. PROCESS — full-screen panels, horizontal on scroll
     ===================================================== */
  .process {
    background: var(--green-deep);
    color: var(--white);
    position: relative;
  }
  .process-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .process-hud {
    position: absolute;
    top: clamp(94px, 13vh, 140px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container);
    padding: 0 var(--gutter);
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    pointer-events: none;
  }
  .process-hud .eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--beige);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .process-hud .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--beige); }
  .process-hud .counter { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
  .process-hud .counter b { color: var(--beige); font-size: 16px; }
  .process-track {
    display: flex;
    height: 100%;
    will-change: transform;
  }
  .pstep {
    flex: 0 0 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    padding: clamp(150px, 20vh, 240px) var(--gutter) clamp(72px, 11vh, 120px);
  }
  .pstep-inner {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 6vw, 104px);
    align-items: center;
  }
  .pstep-left { position: relative; }
  .pstep-photo {
    position: relative;
    width: 100%;
    height: min(60vh, 600px);
  }
  .pstep-num {
    position: absolute;
    right: -1px; bottom: -1px;
    z-index: 3;
    width: clamp(58px, 5vw, 88px);
    height: clamp(58px, 5vw, 88px);
    background: var(--beige);
    color: var(--green-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 2vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .pstep-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(18px, 2.4vh, 28px);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--beige);
  }
  .pstep-meta::before { content: ""; width: 26px; height: 1px; background: var(--beige); }
  .pstep h3 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 3vh, 32px);
  }
  .pstep-right p {
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    margin: 0 0 clamp(24px, 3.4vh, 40px);
    max-width: 54ch;
  }
  .pstep-right ul {
    list-style: none;
    margin: 0;
    padding: clamp(24px, 3vh, 34px) 0 0;
    border-top: 1px solid rgba(175,161,125,0.25);
    display: grid;
    gap: 14px;
  }
  .pstep-right li {
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    padding-left: 26px;
    position: relative;
  }
  .pstep-right li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 1px; background: var(--beige); }
  .process-progress {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(175,161,125,0.18);
    z-index: 3;
    opacity: 1;
    transition: opacity .45s var(--ease);
  }
  .process-progress.is-done { opacity: 0; }
  .process-progress span {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 8%;
    background: var(--beige);
  }
  @media (max-width: 900px) {
    .process-sticky { position: static; height: auto; overflow: visible; }
    .process-hud {
      position: static;
      transform: none;
      margin: 0 auto;
      padding-top: clamp(100px, 16vw, 140px);
      padding-bottom: 0;
    }
    .process-track {
      height: auto;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      transform: none !important;
      padding-bottom: 16px;
    }
    .pstep {
      flex-basis: 88%;
      height: auto;
      scroll-snap-align: start;
      padding: clamp(32px, 8vw, 56px) 0 clamp(8px, 3vw, 16px);
    }
    .pstep:not(:last-child) { padding-right: clamp(16px, 4vw, 28px); }
    .pstep-inner { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); align-items: start; }
    .pstep-photo { height: clamp(220px, 52vw, 360px); }
    .process-progress { display: none; }
  }

  /* =====================================================
     4. FAQ — 2-column open layout, no accordion
     ===================================================== */
  .faq {
    background: linear-gradient(to bottom, #15363A 0%, #1F4A4F 100%);
    color: var(--white);
    padding: clamp(120px, 16vw, 200px) 0;
  }
  .faq-head {
    display: block;
    margin-bottom: clamp(60px, 8vw, 100px);
  }
  .faq-head h2 {
    font-size: clamp(28px, 3.3vw, 45px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .faq-head h2 .accent {
    color: var(--beige);
    font-style: normal;
    text-transform: uppercase;
    display: inline;
  }
  .faq-head p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0;
    max-width: 44ch;
  }
  /* Master–detail explorer */
  .faq-explorer {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
    border-top: 1px solid rgba(175,161,125,0.22);
  }
  .faq-q-list { display: flex; flex-direction: column; }
  .faq-q-item { border-bottom: 1px solid rgba(175,161,125,0.16); }
  .faq-q-btn {
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    gap: 16px;
    align-items: center;
    padding: clamp(18px, 1.9vw, 24px) 0;
    color: rgba(255,255,255,0.62);
    position: relative;
    transition: color .3s var(--ease), padding-left .3s var(--ease);
  }
  .faq-q-btn::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 2px; height: 0;
    background: var(--beige);
    transform: translateY(-50%);
    transition: height .3s var(--ease);
  }
  .faq-q-btn .qnum {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; color: var(--beige);
    transition: opacity .3s var(--ease);
  }
  .faq-q-btn .qtxt {
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 600; line-height: 1.32;
    letter-spacing: -0.005em;
  }
  .faq-q-btn .qchev {
    justify-self: end;
    width: 16px; height: 1px;
    background: currentColor;
    position: relative;
    opacity: 0.45;
    transition: width .3s var(--ease), opacity .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  }
  .faq-q-btn .qchev::after {
    content: ""; position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }
  .faq-q-btn:hover { color: rgba(255,255,255,0.95); padding-left: 12px; }
  .faq-q-item.is-active .faq-q-btn { color: var(--white); padding-left: 18px; }
  .faq-q-item.is-active .faq-q-btn::before { height: calc(100% - 24px); }
  .faq-q-item.is-active .qchev { width: 26px; opacity: 1; color: var(--beige); }

  /* Detail panel */
  .faq-detail {
    position: sticky;
    top: 116px;
    border: 1px solid rgba(175,161,125,0.25);
    background: rgba(255,255,255,0.025);
    padding: clamp(30px, 3.4vw, 52px);
    min-height: 340px;
    display: flex;
    flex-direction: column;
  }
  .faq-detail .d-cat {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--beige);
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: clamp(22px, 3vh, 34px);
  }
  .faq-detail .d-cat::before { content: ""; width: 26px; height: 1px; background: var(--beige); }
  .faq-detail .d-q {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700; line-height: 1.15;
    letter-spacing: -0.02em; color: var(--white);
    margin: 0 0 clamp(18px, 2.4vh, 26px);
  }
  .faq-detail .d-a {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.75; color: rgba(255,255,255,0.82);
    margin: 0;
  }
  .faq-detail .d-foot {
    margin-top: auto;
    padding-top: clamp(26px, 3.4vh, 40px);
    border-top: 1px solid rgba(175,161,125,0.2);
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: rgba(255,255,255,0.55);
  }
  .faq-detail .d-foot a {
    color: var(--beige);
    font-weight: 600;
    border-bottom: 1px solid rgba(175,161,125,0.4);
    transition: color .25s var(--ease);
  }
  .faq-detail .d-foot a:hover { color: var(--white); }
  @keyframes faqSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .faq-detail.swap .d-cat,
  .faq-detail.swap .d-q,
  .faq-detail.swap .d-a { animation: faqSwap .5s var(--ease) both; }
  .faq-detail.swap .d-q { animation-delay: .05s; }
  .faq-detail.swap .d-a { animation-delay: .1s; }

  /* Inline answers — desktop hides (detail panel shows them); mobile accordion */
  .faq-a { display: none; }
  .faq-a-inner {
    padding: 0 0 clamp(20px, 2.4vw, 26px);
    font-size: 14.5px; line-height: 1.72;
    color: rgba(255,255,255,0.78);
    max-width: 60ch;
  }
  @media (max-width: 900px) {
    .faq-explorer { grid-template-columns: 1fr; gap: 0; }
    .faq-detail { display: none; }
    .faq-q-btn { grid-template-columns: 42px 1fr 24px; }
    .faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
    .faq-q-item.is-open .faq-a { max-height: 420px; }
    .faq-q-item.is-open .faq-q-btn { color: var(--white); }
    .faq-q-item.is-open .qchev { transform: rotate(90deg); color: var(--beige); opacity: 1; }
    .faq-q-item.is-active .faq-q-btn { padding-left: 0; }
    .faq-q-item.is-active .faq-q-btn::before { height: 0; }
  }
  /* ===================== Contact & Devis ===================== */
  .contact-section {
    color: var(--white);
    padding: clamp(72px, 9vw, 120px) 0 clamp(100px, 14vw, 180px);
    background: #15363A;
  }
  /* Intégration Contact Form 7 : neutralise les marges par défaut et
     laisse le style .field prendre le relais. */
  .contact-form .wpcf7-form-control-wrap { display: block; }
  .contact-form .wpcf7 form.wpcf7-form p { margin: 0; }
  .contact-form .wpcf7-not-valid-tip { color: #ffb4a2; font-size: 12px; margin-top: 6px; display: block; }
  .contact-form .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 14px 18px !important;
    border-color: rgba(175,161,125,0.5) !important;
    font-size: 14px;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
  .contact-form .section-num { display: block; margin-bottom: 22px; }
  .contact-form h2 {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.025em; text-transform: uppercase;
    color: var(--white); margin: 0 0 22px;
  }
  .contact-form h2 .accent { color: var(--beige); text-transform: uppercase; display: block; }
  .contact-intro {
    font-size: 16px; line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 clamp(32px, 4vw, 48px); max-width: 54ch;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
  .field label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--beige);
  }
  .field input, .field select, .field textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(175,161,125,0.28);
    color: var(--white);
    padding: 15px 16px;
    font-family: inherit; font-size: 15px;
    border-radius: 0;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
  }
  .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.4); }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--beige); background: rgba(175,161,125,0.07);
  }
  .field select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C8BC9A' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    padding-right: 42px;
  }
  .field select option { color: #0E2528; }
  .field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
  .form-foot { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
  .form-consent { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.5); margin: 0; max-width: 38ch; }
  .form-success {
    display: none; margin: 24px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--beige);
    background: rgba(175,161,125,0.1);
    color: var(--white); font-size: 14px;
  }
  .form-success.show { display: block; }

  .contact-aside { display: flex; flex-direction: column; gap: 20px; }
  .contact-aside .cta-aside { background: rgba(14,37,40,0.4); }
  .after-panel {
    border: 1px solid rgba(175,161,125,0.3);
    padding: clamp(28px, 2.6vw, 40px);
    background: rgba(14,37,40,0.4);
  }
  .after-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
  .after-list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
  .after-list .an { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--beige); padding-top: 2px; }
  .after-list strong { display: block; font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 5px; }
  .after-list li span { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.65); }

  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .form-row { grid-template-columns: 1fr; }
  }
  /* ===================== Module page body ===================== */
  .ph-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 22px;
  }
  .mod-section {
    color: var(--white);
    padding: clamp(100px, 14vw, 180px) 0;
  }
  /* Dégradés alternés des sections module (repris des styles inline
     de l'export module-01-coaching.html). */
  .mod-intro {
    background: #15363A;
  }
  .mod-offer {
    background: #15363A;
  }
  .mod-pricing {
    background: linear-gradient(to bottom, #15363A 0%, #1F4A4F 100%);
  }
  .mod-section h2 {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 24px;
  }
  .mod-section h2 .accent {
    color: var(--beige);
    text-transform: uppercase;
    display: block;
  }
  /* Titre des tarifs : accent sur la même ligne (évite "Un forfait / clair.") */
  .mod-pricing-head h2 .accent { display: inline; }
  .mod-section .section-num { display: block; margin-bottom: 22px; }

  /* A — intro */
  .mod-intro .container {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
  }
  .mod-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.82);
    margin: 0 0 18px;
    max-width: 56ch;
  }
  .mod-goal {
    margin-top: 34px;
    padding: 24px 28px;
    border-left: 2px solid var(--beige);
    background: rgba(175,161,125,0.07);
  }
  .mod-goal .label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--beige);
    display: block; margin-bottom: 10px;
  }
  .mod-goal p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--white); font-weight: 500; max-width: none; }
  .mod-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background:
      linear-gradient(180deg, rgba(14,37,40,0.12), rgba(14,37,40,0.5)),
      repeating-linear-gradient(135deg, rgba(175,161,125,0.10) 0 14px, transparent 14px 28px),
      var(--green-ink);
    border: 1px solid rgba(175,161,125,0.18);
    overflow: hidden;
  }
  .mod-photo-tag {
    position: absolute; top: 18px; left: 18px;
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Courier New', monospace;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--beige);
    padding: 7px 11px;
    background: rgba(14,37,40,0.6);
    border: 1px solid rgba(175,161,125,0.4);
  }
  .mod-photo-tag::before { content: ""; width: 7px; height: 7px; background: var(--beige); }
  .mod-photo-cap {
    position: absolute; bottom: 20px; left: 22px; right: 22px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    display: flex; align-items: center; gap: 10px;
  }
  .mod-photo-cap::before { content: ""; flex: 0 0 auto; width: 22px; height: 1px; background: var(--beige); }

  /* B — deliverables */
  .mod-offer-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
  .mod-offer-head p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.72); margin: 0; }
  .mod-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 80px);
    border-top: 1px solid rgba(175,161,125,0.22);
  }
  .mod-list li {
    padding: clamp(24px, 2.4vw, 32px) 0 clamp(24px, 2.4vw, 32px) 36px;
    border-bottom: 1px solid rgba(175,161,125,0.16);
    position: relative;
  }
  .mod-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: calc(clamp(24px, 2.4vw, 32px) + 6px);
    width: 14px; height: 8px;
    border-left: 1.5px solid var(--beige);
    border-bottom: 1.5px solid var(--beige);
    transform: rotate(-45deg);
  }
  .mod-list-t {
    display: block;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.005em;
    margin-bottom: 8px;
  }
  .mod-list-d {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
  }

  /* C — pricing */
  .mod-pricing-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
  .mod-pricing-head p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.72); margin: 0; }
  .price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .price-card {
    border: 1px solid rgba(175,161,125,0.25);
    background: rgba(255,255,255,0.02);
    padding: clamp(30px, 2.8vw, 44px);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  }
  .price-card:hover { transform: translateY(-6px); border-color: rgba(175,161,125,0.55); }
  .price-card.featured {
    border-color: var(--beige);
    background: rgba(175,161,125,0.08);
  }
  .price-flag {
    position: absolute; top: -1px; right: -1px;
    background: var(--beige); color: var(--green-ink);
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 7px 12px;
  }
  .price-card .ptag {
    font-size: 10px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--beige); margin-bottom: 18px;
  }
  .price-card .pname {
    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 700; color: var(--white);
    margin: 0 0 12px; letter-spacing: -0.01em;
  }
  .price-card .pdesc {
    font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0 0 32px; flex: 1;
  }
  .price-card .pamount {
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 800; letter-spacing: -0.03em;
    color: var(--white); line-height: 1;
    display: flex; align-items: baseline; gap: 10px;
  }
  .price-card .pamount .old {
    font-size: 17px; font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-decoration: line-through;
  }
  .price-card .punit {
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-top: 10px;
  }
  .price-note {
    margin: clamp(36px, 4vw, 52px) 0 0;
    font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,0.6);
    max-width: 60ch;
  }
  .price-note a { color: var(--beige); border-bottom: 1px solid rgba(175,161,125,0.4); }
  .price-note a:hover { color: var(--white); }

  @media (max-width: 900px) {
    .mod-intro .container { grid-template-columns: 1fr; gap: 44px; }
    .mod-intro-media { max-width: 480px; }
    .mod-list { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   Uniformisation des titres de section (h2)
   Source unique de vérité : tous les titres de niveau 2 des
   sections partagent la même taille. Placé en fin de fichier
   pour l'emporter sur les valeurs héritées du portage.
   ============================================================ */
  .props-head h2,
  .about-content h2,
  .modules-head h2,
  .alc-head h2,
  .testi-head h2,
  .faq-head h2,
  .cta-text h2,
  .mod-section h2,
  .pstep h3 {
    font-size: clamp(26px, 3.2vw, 44px);
  }

/* ------------------------------------------------------------
   Accent doré des titres de section : beige + capitales, sur
   sa propre ligne (le passage à la ligne vient du display:block,
   d'où le retrait des <br /> dans les templates).
   ------------------------------------------------------------ */
  .testi-head h2 .accent,
  .alc-head h2 .accent,
  .faq-head h2 .accent,
  .differ-quote p .accent {
    color: var(--beige);
    text-transform: uppercase;
    display: block;
  }

/* Espace sous le numéro de section (cohérent avec /03 et /04). */
  .alc-head .section-num,
  .differ-quote .section-num,
  .faq-head h2 .section-num {
    display: block;
    margin-bottom: 24px;
  }

/* ============================================================
   Écran de chargement (accueil)
   ============================================================ */
  #preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--green-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .6s var(--ease), visibility .6s var(--ease);
  }
  #preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .preloader-logo {
    height: clamp(52px, 7vw, 72px);
    width: auto;
    opacity: 0;
    transform: translateY(10px);
    animation: preloaderLogoIn .8s var(--ease) forwards;
  }
  @keyframes preloaderLogoIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .preloader-bar {
    display: block;
    position: relative;
    width: clamp(140px, 20vw, 200px);
    height: 2px;
    background: rgba(175, 161, 125, 0.18);
    overflow: hidden;
  }
  .preloader-bar > span {
    position: absolute;
    top: 0; bottom: 0; left: -40%;
    width: 40%;
    background: var(--beige);
    animation: preloaderBar 1.3s var(--ease) infinite;
  }
  @keyframes preloaderBar {
    0%   { left: -40%; }
    100% { left: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .preloader-logo { animation: none; opacity: 1; transform: none; }
    .preloader-bar > span { animation: none; left: 0; width: 100%; }
  }

/* ============================================================
   Pages de contenu génériques (page.php) — confidentialité,
   mentions légales, CGV… Rendu « lecture » éditorial.
   ============================================================ */
.page-header--doc h1 {
  white-space: normal;
  max-width: 22ch;
}
.doc-section {
  background: var(--green-deep);
  padding: clamp(56px, 7vw, 104px) 0 clamp(80px, 10vw, 140px);
}
.doc-section .prose {
  max-width: 74ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.85;
  /* Fondu au chargement (pas au scroll) : le texte est sous le bandeau,
     on veut qu'il apparaisse tout de suite en douceur. */
  animation: docReveal .9s var(--ease) both;
}
@keyframes docReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .doc-section .prose { animation: none; }
}

/* ============================================================
   Correctifs responsive (mobile)
   ============================================================ */
@media (max-width: 640px) {
  /* CTA à libellé long : éviter le débordement à droite.
     On autorise le retour à la ligne et on réduit interlettrage/padding. */
  .btn {
    white-space: normal;
    letter-spacing: 0.14em;
    padding: 16px 22px;
    max-width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Modules : désactiver l'empilement sticky sur mobile — les cartes,
     hautes en une colonne, se chevauchaient et coupaient le texte.
     Elles s'affichent désormais l'une sous l'autre, entièrement lisibles. */
  .modules-grid .module-card {
    position: static;
    top: auto;
    min-height: 0;
    box-shadow: none;
    grid-template-columns: 1fr;
  }
  /* Chiffre au-dessus, texte sur toute la largeur (au lieu de 2 colonnes) */
  .module-watermark { grid-column: 1; }
  .module-body { grid-column: 1; }

  /* Espace entre la description et l'exemple : sur mobile le margin-bottom:auto
     de .desc retombe à 0 (flex sans hauteur libre), les blocs se collaient. */
  .module-example { margin-top: 22px; }

  /* Titres du bandeau et de la FAQ : autoriser le retour à la ligne,
     sinon ils débordent/sont coupés à droite sur mobile. */
  .page-header h1 { white-space: normal; }
  .faq-head h2 { white-space: normal; }

  /* Process : empiler les étapes verticalement au lieu du carrousel
     horizontal (plus lisible sur mobile). */
  .process-track {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .pstep {
    width: 100%;
    flex-basis: auto;
    scroll-snap-align: none;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .pstep:not(:last-child) {
    padding-right: var(--gutter);
    border-bottom: 1px solid rgba(175, 161, 125, 0.18);
  }
}
.doc-section .prose > *:first-child { margin-top: 0; }
.doc-section .prose h2 {
  color: var(--white);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 56px 0 18px;
  padding-top: 32px;
  border-top: 1px solid rgba(175, 161, 125, 0.22);
}
.doc-section .prose h3 {
  color: var(--beige);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  margin: 32px 0 12px;
}
.doc-section .prose p { margin: 0 0 18px; }
.doc-section .prose a {
  color: var(--beige);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.doc-section .prose a:hover { color: var(--white); }
.doc-section .prose strong { color: var(--white); font-weight: 600; }
.doc-section .prose ul,
.doc-section .prose ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.doc-section .prose li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.doc-section .prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--beige);
  transform: rotate(45deg);
}
.doc-section .prose ol { counter-reset: doc-ol; }
.doc-section .prose ol li { counter-increment: doc-ol; }
.doc-section .prose ol li::before {
  content: counter(doc-ol);
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--beige);
  font-size: 12px;
  font-weight: 700;
}
.doc-section .prose hr {
  border: 0;
  border-top: 1px solid rgba(175, 161, 125, 0.22);
  margin: 40px 0;
}
.doc-section .prose .doc-updated {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 40px;
}

/* ============================================================
   Menu mobile — verrou du scroll de fond + accessibilité
   ============================================================ */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open,
  .mobile-menu .mm-head,
  .mobile-menu-list > li,
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   Page 404 — introuvable
   ============================================================ */
.error-404 {
  background: var(--green-deep);
  color: var(--white);
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 10vh, 140px);
}
.error-404-inner { max-width: 640px; }
.error-404-num {
  display: block;
  font-size: clamp(96px, 22vw, 210px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(175, 161, 125, 0.26);
  margin-bottom: 14px;
}
.error-404 h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 18px;
}
.error-404 p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 36px;
  max-width: 48ch;
}
.error-404-actions { margin-bottom: 40px; }
.error-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(175, 161, 125, 0.22);
}
.error-404-links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color .2s var(--ease);
}
.error-404-links a:hover { color: var(--beige); }

/* ============================================================
   Bouton « revisiter le consentement cookies » (plugin) — discret
   au repos, pleinement visible au survol.
   ============================================================ */
.wcc-revisit-bottom-left {
  opacity: 0.1;
  transition: opacity .25s var(--ease);
}
.wcc-revisit-bottom-left:hover {
  opacity: 1;
}
/* Photos sous les témoignages */
.testi-item {
    display: flex;
    flex-direction: column;
}

.testi-photo {
    margin-top: 18px;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.testi-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Photos - étapes page Approche */
.pstep-photo {
    position: relative;
    overflow: hidden;
}

.pstep-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Photo complète – Manon et Martin */ .testi-photo:has(img[src*="MART-ET-MANON.png"]) { aspect-ratio: auto; } .testi-photo img[src*="MART-ET-MANON.png"] { width: 100%; height: auto; object-fit: contain; object-position: center; }