/* @font-face Nagoda -> assets/css/fonts.css */
        :root {
            --cream: #F1EADE; --cream-light: #F7F2E9;
            --sand: #EAD2BE; --taupe: #C7A999; --mocha: #9C7558; --sage: #9DB3AC;
            --accent: #47433A; --accent-2: #9DB3AC; --accent-soft: #D6CBBC; --accent-sage: #9DB3AC;
            --ink: #47433A; --text-sec: #6B5644; --text-mut: #9C8670;
            --border: #D6CBBC;
            --accent-light: #6B5644;
            --accent-glow: rgba(71, 67, 58, 0.08);
            --white: #F7F2E9;
            --nagoda: 'Nagoda', Georgia, serif;
            --body: 'Manrope', system-ui, sans-serif;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: auto; }
        body {
            font-family: var(--body);
            color: var(--ink);
            background: linear-gradient(to bottom, rgb(230, 222, 208), #f7f2e9);
            background-attachment: fixed;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 1.7;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }

        /* ========== REVEAL ANIMATIONS ========== */
        .reveal {
            opacity: 0;
            /* On utilise la propriété CSS moderne `translate` (et non `transform`)
               pour que la reveal animation n'entre pas en conflit avec les
               transforms magnet. Les deux composent naturellement et indépendamment. */
            translate: 0 30px;
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.visible {
            opacity: 1;
            translate: 0 0;
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* ========== HEADER ========== */
        .site-header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            padding: 1rem 2.5rem;
            display: flex; align-items: center; justify-content: space-between;
            transition: all 0.5s;
        }
        .site-header.scrolled {
            background: rgb(230, 222, 208); /* opaque : pas de transparence, pas de blur derrière */
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            box-shadow: none;
            border: none;
            padding: 0.6rem 2.5rem;
        }
        /* Logo : un seul SVG (.logo-full). Au scroll, le groupe .logo-rest (injecté par JS)
           glisse à gauche et s'efface, ne laissant que le groupe coeur. */
        .logo-full {
            display: inline-block; overflow: hidden;
            height: 22px; width: 196px; flex: 0 0 auto;
            transition: width 0.45s cubic-bezier(0.6, 0, 0.35, 1);
        }
        .logo-full svg { height: 100%; width: auto; display: block; }
        .logo-rest { transition: transform 0.45s cubic-bezier(0.6, 0, 0.35, 1), opacity 0.35s ease; }
        .logo-heart { display: none; }
        .site-header.scrolled .logo-full { width: 28px; }
        .site-header.scrolled .logo-rest { transform: translateX(-110%); opacity: 0; }
        .nav-links { display: flex; gap: 1.8rem; align-items: center; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sec); }
        .nav-links a { transition: color 0.3s; }
        .nav-links a:not(.nav-cta):hover { color: #000; font-weight: 600; }
        .nav-links > a:not(.nav-cta),
        .nav-dropdown-toggle {
            position: relative;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .nav-links > a:not(.nav-cta)::after,
        .nav-dropdown-toggle::after {
            content: '';
            position: absolute;
            left: 50%; bottom: -6px;
            width: 0; height: 1px;
            background: var(--accent);
            transition: width 0.35s ease, left 0.35s ease;
        }
        .nav-links > a:not(.nav-cta):hover::after,
        .nav-dropdown-toggle:hover::after,
        .nav-item-dropdown:hover .nav-dropdown-toggle::after,
        .nav-item-dropdown:focus-within .nav-dropdown-toggle::after {
            width: 100%; left: 0;
        }
        .nav-cta { padding: 0.5rem 1.4rem; border: 1px solid var(--accent); color: var(--accent) !important; font-weight: 500; position: relative; overflow: hidden; z-index: 1; transition: color 0.5s; transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0); }
        .nav-cta::before { content: ''; position: absolute; z-index: -1; background: var(--accent); height: 250px; width: 400px; border-radius: 50%; top: 100%; left: 100%; transition: all 0.7s; }
        .nav-cta:hover { color: #fff !important; }
        .nav-cta:hover::before { top: -50px; left: -50px; }
        .nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }
        .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
        .nav-dropdown-toggle .dropdown-arrow { font-size: 0.85rem; transition: transform 0.3s; line-height: 1; opacity: 0.75; }
        .nav-item-dropdown:hover .nav-dropdown-toggle .dropdown-arrow,
        .nav-item-dropdown:focus-within .nav-dropdown-toggle .dropdown-arrow { transform: rotate(180deg); }
        .nav-dropdown-menu {
            position: absolute; top: 100%; left: 50%;
            transform: translateX(-50%) translateY(-6px);
            min-width: 240px; padding: 0.6rem 0;
            background: rgba(245,239,230,0.96);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border); border-radius: 6px;
            box-shadow: 0 14px 36px rgba(30,26,22,0.10);
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
            display: flex; flex-direction: column;
            margin-top: 0.7rem;
        }
        .nav-dropdown-menu::before { content: ''; position: absolute; top: -0.7rem; left: 0; right: 0; height: 0.7rem; }
        .nav-item-dropdown:hover .nav-dropdown-menu,
        .nav-item-dropdown:focus-within .nav-dropdown-menu {
            opacity: 1; visibility: visible; pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }
        .nav-dropdown-menu a {
            padding: 0.6rem 2.4rem 0.6rem 1.2rem;
            display: flex; flex-direction: column; gap: 0;
            white-space: nowrap;
            position: relative;
            transition: background 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .nav-dropdown-menu a::after {
            content: '→';
            position: absolute;
            right: 1.1rem; top: 50%;
            color: var(--accent);
            font-size: 0.95rem; line-height: 1;
            opacity: 0;
            transform: translate(-10px, -50%);
            transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .nav-dropdown-menu .dd-name {
            font-size: 0.875rem; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--text-sec);
            font-weight: 700;
            transition: color 0.25s;
        }
        .nav-dropdown-menu .dd-desc {
            font-size: 0.875rem; letter-spacing: 0.02em;
            text-transform: none; color: var(--text-mut);
            font-weight: 300;
            transition: color 0.25s;
        }
        .nav-dropdown-menu a:hover { background: rgba(157,181,170,0.10); transform: translateX(5px); font-weight: 600; }
        .nav-dropdown-menu a:hover::after { opacity: 1; transform: translate(0, -50%); }
        .nav-dropdown-menu a:hover .dd-name { color: var(--accent); }
        .nav-dropdown-menu a:hover .dd-desc { color: var(--text-sec); }

        /* ========== HERO ========== */
        /* Wrapper qui réserve 2× la hauteur viewport : le hero reste sticky
           100vh pendant que la suite de la page (story-section) glisse par
           dessus depuis le bas — "ouverture" type curtain comme sur l'accueil. */
        .hero-stick-wrap {
            position: relative;
            height: 200vh;
        }
        .hero {
            position: sticky;
            top: 0;
            height: 100vh;
            min-height: 100vh;
            display: grid;
            /* Texte : ~65 % de la largeur, photo : ~35 %. */
            grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
            gap: clamp(1rem, 3vw, 3rem);
            align-items: center;
            padding: 8rem 2rem 0;
            max-width: 1400px;
            margin: 0 auto;
            /* PAS d'overflow:hidden : les panneaux du rideau peuvent sortir
               complètement de l'écran sur les côtés (le body a overflow-x:hidden
               qui clippe correctement). */
            z-index: 2;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 640px;
            justify-self: end;
            text-align: left;
            padding-right: 1rem;
            /* Curtain reveal — FadeScaleBlurOut piloté par JS :
               glisse à gauche, rétrécit, devient transparent et flou.
               La section story derrière (z-index 1) apparaît à mesure. */
            transform: translateX(var(--curtain-left, 0%)) scale(var(--curtain-scale, 1));
            opacity: var(--curtain-opacity, 1);
            filter: blur(var(--curtain-blur, 0px));
            will-change: transform, opacity, filter;
        }
        /* "Thérapeute énergéticien à Fribourg ·" — petit label au-dessus du titre */
        /* Overline cohérent avec les autres pages (.s-overline / .section-label) */
        .hero-subtitle {
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 500;
            font-style: normal;
            color: var(--accent);
            margin: 0 0 1rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-wrap: balance; /* cohérent avec les autres surtitres (client 2026-07-21) */
        }
        .hero-title {
            font-family: var(--nagoda);
            font-size: clamp(3rem, 6.2vw, 5.2rem);
            font-weight: 400;
            line-height: 1;
            letter-spacing: -0.02em;
            color: var(--ink);
            margin: 0 0 2rem;
        }
        .hero-tagline {
            /* Alignée sur l'intro hero de la page d'ACCUEIL (.hero-desc home.css :
               1.125rem/1.75) — à 17px l'écart avec le grand titre « Nicolas Seydoux »
               était trop marqué (client 2026-07-22). Les FICHES restent à 17px.
               Mobile : 16px via l'override @media plus bas. */
            font-size: 1.125rem;
            line-height: 1.75;
            color: var(--text-sec);
            margin: 0 0 1.8rem;
            max-width: 480px;
        }
        /* Bloc clair avec les badges de certifications */
        .hero-badges {
            display: flex;
            flex-wrap: wrap;
            column-gap: 0.5rem;
            row-gap: 0.5rem;
            margin: 0 0 2.5rem;
            padding: 0;
            background: transparent;
        }
        .hero-badge {
            padding: 0.35rem 0.9rem;
            background-color: rgba(156, 134, 112, 0.19);
            border: none;
            font-size: 12px;
            font-weight: 900;
            color: var(--accent);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin: 0;
        }
        .hero-badge strong { color: var(--accent); font-weight: 900; }

        .hero-ctas {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1.6rem;
            margin-top: 0;
            flex-wrap: wrap;
        }
        /* Photo Nicolas — ancrée en bas à droite de la colonne droite. */
        .hero-photo {
            position: relative;
            align-self: end;
            justify-self: end;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            /* Curtain reveal — FadeScaleBlurOut piloté par JS. */
            transform: translateX(var(--curtain-right, 0%)) scale(var(--curtain-scale, 1));
            opacity: var(--curtain-opacity, 1);
            filter: blur(var(--curtain-blur, 0px));
            will-change: transform, opacity, filter;
        }
        .hero-photo img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 92vh;
            object-fit: contain;
            object-position: bottom right;
        }
        /* Pill "+20 ans / au service des autres" overlay en bas à droite */
        .hero-experience-badge {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            padding: 0.9rem 1.3rem;
            background: var(--ink);
            color: #FDF9F1;
            border-radius: 14px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1.1;
        }
        .hero-experience-badge strong {
            font-family: var(--nagoda);
            font-size: clamp(1.6rem, 2.6vw, 2.1rem);
            font-weight: 400;
            line-height: 1;
        }
        .hero-experience-badge small {
            font-size: 0.78rem;
            font-weight: 400;
            opacity: 0.85;
            margin-top: 0.15rem;
            line-height: 1.2;
            text-align: right;
        }
        /* Boutons de la page : padding et taille de texte UNIFORMES (client 2026-07-16)
           → 0.88rem (standard .btn du site) / 0.9rem 2rem, y compris btn-hero-link
           et services-light-help-btn. Seul .btn-rdv (CTA final contact) garde son
           gabarit plus généreux 1rem 2.5rem, identique sur toutes les pages. */
        .btn-hero-fill, .btn-hero-ghost {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem;
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
            cursor: pointer;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .btn-hero-fill {
            background: var(--accent);
            color: white;
            border: none;
        }
        .btn-hero-fill:hover {
            background: var(--accent);
            border-color: transparent;
            transform: translate3d(var(--magnet-x, 0), calc(var(--magnet-y, 0px) - 2px), 0);
            box-shadow: 0 8px 30px rgba(71, 67, 58, 0.18);
        }
        .btn-hero-ghost {
            background: transparent;
            color: var(--accent);
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: color 0.5s, transform 0.3s, box-shadow 0.3s;
        }
        .btn-hero-ghost::before {
            content: '';
            position: absolute;
            z-index: -1;
            background: var(--accent);
            height: 250px;
            width: 400px;
            border-radius: 50%;
            top: 100%;
            left: 100%;
            transition: all 0.7s;
        }
        .btn-hero-ghost:hover {
            color: #fff;
            transform: translate3d(var(--magnet-x, 0), calc(var(--magnet-y, 0px) - 2px), 0);
        }
        .btn-hero-ghost:hover::before { top: -50px; left: -50px; }
        /* Variante texte uniquement : effet circle slide-in au hover.
           Même gabarit que btn-hero-fill (0.88rem / 0.9rem 2rem / caps 600) :
           en minuscules 0.95rem il PARAISSAIT plus petit que « MON APPROCHE »
           malgré une font-size supérieure (client 2026-07-16). */
        .btn-hero-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem;
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--ink);
            text-decoration: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: color 0.5s, transform 0.3s;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .btn-hero-link::before {
            content: '';
            position: absolute;
            z-index: -1;
            background: var(--accent);
            height: 250px;
            width: 400px;
            border-radius: 50%;
            top: 100%;
            left: 100%;
            transition: all 0.7s;
        }
        .btn-hero-link:hover {
            color: #fff;
            transform: translate3d(calc(var(--magnet-x, 0px) + 3px), var(--magnet-y, 0), 0);
        }
        .btn-hero-link:hover::before { top: -50px; left: -50px; }
        /* Compense le padding horizontal (invisible au repos) pour que l'écart visuel
           avec « MON APPROCHE » reste celui du gap (1.6rem), pas gap + 2rem. */
        .hero-ctas .btn-hero-link { margin-left: -2rem; }

        .hero-scroll {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-mut);
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .hero-scroll-line {
            width: 1px;
            height: 32px;
            background: linear-gradient(to bottom, var(--accent), transparent);
            animation: scrollPulse 2s ease-in-out infinite;
        }
        @keyframes scrollPulse {
            0%, 100% { opacity: 0.4; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(1.2); }
        }

        /* ========== SECTIONS COMMON ========== */
        .section {
            padding: 6rem 2rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .section-label {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent);
            line-height: 1;
            margin-bottom: 0.75rem;
        }
        .section-title {
            font-family: var(--nagoda);
            font-size: clamp(2rem, 4vw, 2.8rem);
            font-weight: 400;
            line-height: 1;
            color: var(--ink);
            margin-bottom: 1rem;
            text-wrap: balance;
        }
        .section-title em {
            color: var(--accent);
            font-style: normal;
        }

        /* ========== WHAT IS EPI ========== */
        .what-section {
            padding: 6rem 2rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .what-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 4rem;
            align-items: center;
            margin-top: 3rem;
        }
        .what-text p {
            color: var(--text-sec);
            font-size: 1.0625em;
            line-height: 1.85;
            margin-bottom: 1.2rem;
        }
        .what-text p:last-child { margin-bottom: 0; }
        .what-text strong {
            color: var(--ink);
            font-weight: 500;
        }
        .what-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .what-diagram {
            width: 320px;
            height: 320px;
            position: relative;
        }
        .what-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid var(--border);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
        .what-ring-1 { width: 320px; height: 320px; }
        .what-ring-2 { width: 220px; height: 220px; border-color: rgba(157, 181, 170, 0.2); }
        .what-ring-3 { width: 120px; height: 120px; border-color: rgba(157, 181, 170, 0.3); }
        .what-ring-core {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--accent);
            animation: breatheCore 6s ease-in-out infinite;
        }
        @keyframes breatheCore {
            0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(156,138,114,0.2); }
            50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 40px 10px rgba(156,138,114,0.1); }
        }
        .what-node {
            position: absolute;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.5;
        }
        .what-node-1 { top: 0; left: 50%; transform: translateX(-50%); }
        .what-node-2 { top: 50%; right: 0; transform: translateY(-50%); }
        .what-node-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
        .what-node-4 { top: 50%; left: 0; transform: translateY(-50%); }

        .what-keywords {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }
        .what-kw {
            padding: 0.35rem 0.9rem;
            background: var(--accent-glow);
            border: 1px solid rgba(157, 181, 170, 0.12);
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--accent);
            letter-spacing: 0.02em;
        }

        /* ========== DIVIDER ========== */
        .divider {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .divider-line {
            height: 1px;
            background: var(--border);
            position: relative;
        }
        .divider-line::after {
            content: '';
            position: absolute;
            left: 50%;
            top: -3px;
            transform: translateX(-50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--pink);
            opacity: 1;
            z-index: 3;
        }

        /* ========== SYMPTOMS GRID ========== */
        .symptoms-section {
            padding: 6rem 2rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .symptoms-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-top: 3rem;
        }
        .symptom-card {
            padding: 2rem 1.5rem;
            background: var(--white);
            border: 1px solid var(--border);
            text-align: center;
            transition: border-color 0.4s, box-shadow 0.4s;
            cursor: default;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .symptom-card:hover {
            border-color: rgba(71, 67, 58, 0.3);
            box-shadow: 0 12px 40px rgba(71, 67, 58, 0.06);
        }
        .symptom-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--accent-glow);
        }
        .symptom-icon svg {
            width: 22px;
            height: 22px;
            stroke: var(--accent);
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .symptom-name {
            font-size: 1.0625em;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.4;
        }

        /* ========== PROCESS TIMELINE ========== */
        .process-section {
            padding: 6rem 2rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .process-timeline {
            margin-top: 3rem;
            position: relative;
            padding-left: 3rem;
        }
        .process-timeline::before {
            content: '';
            position: absolute;
            left: 11px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(to bottom, var(--accent), var(--border));
        }
        .process-step {
            position: relative;
            padding-bottom: 3rem;
        }
        .process-step:last-child { padding-bottom: 0; }
        .process-dot {
            position: absolute;
            left: -3rem;
            top: 0.15rem;
            width: 23px;
            height: 23px;
            border-radius: 50%;
            background: var(--cream);
            border: 2px solid var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: all 0.4s;
        }
        .process-dot-inner {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0;
            transition: opacity 0.4s;
        }
        .process-step:hover .process-dot {
            background: var(--accent);
            box-shadow: 0 0 0 6px rgba(157, 181, 170, 0.1);
        }
        .process-step:hover .process-dot-inner {
            opacity: 1;
            background: white;
        }
        .process-num {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-mut);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.25rem;
        }
        .process-title {
            font-family: var(--nagoda);
            font-size: 1.4rem;
            color: var(--ink);
            margin-bottom: 0.5rem;
        }
        .process-desc {
            color: var(--text-sec);
            font-size: 1.0625em;
            line-height: 1.7;
            max-width: 560px;
        }

        /* ========== STORY (scrollytelling zen + 3 panneaux) ========== */
        .story-section {
            position: relative;
            height: 420vh;
            /* Remonte la story de 100 vh dans la fin du hero-stick-wrap :
               pendant que le rideau du hero s'ouvre (sticky pinné 100 vh),
               la story est déjà en train d'entrer par le bas, derrière le hero.
               L'ouverture du rideau révèle donc directement la story. */
            margin-top: -100vh;
            /* En dessous du hero (z-index 2) pour être révélée par l'ouverture. */
            z-index: 1;
        }
        .story-stage {
            position: sticky;
            /* Centré verticalement dans le viewport : le centre des mains
               reste à 50vh quelle que soit la hauteur du stage. À 500px
               (zen) → 150px de marge en haut/bas. À 100vh (panneaux) → 0.
               Comme le centre reste fixé à 50vh, l'expansion 500→800px
               se fait depuis ce centre, sans "saut" visuel. */
            top: calc((100vh - var(--stage-h, 500px)) / 2);
            height: var(--stage-h, 500px);
            width: 100%;
            overflow: hidden;
            display: block;
            transition: top 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                        height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
        }
        /* Visuel : les mains (lottie) + le cercle pulsé.
           Toujours présentes, position pilotée par --visual-x. */
        .story-visual {
            position: absolute;
            top: 50%;
            left: 50%;
            width: clamp(360px, 46vw, 600px);
            height: clamp(360px, 46vw, 600px);
            transform: translate(calc(-50% + var(--visual-x, 0px)), -50%) scale(var(--visual-scale, 1));
            transform-origin: center center;
            transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
            pointer-events: none;
            z-index: 2;
        }
        /* Halo doux derrière les mains qui amplifie le cercle pulsé */
        .story-visual::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 78%; height: 78%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 72%);
            transform: translate(-50%, -50%);
            filter: blur(20px);
            mix-blend-mode: screen;
            pointer-events: none;
        }
        /* Lumière blanche qui grandit et contracte paisiblement, centrée entre
           les deux mains. Émet aussi des décharges sur les courbes dust
           (cf. JS storyBreathPulse). */
        .story-breath {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 28%;
            height: 28%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0) 72%);
            transform: translate(-50%, -50%);
            animation: storyBreath 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
            filter: blur(6px);
            mix-blend-mode: screen;
            pointer-events: none;
        }
        @keyframes storyBreath {
            0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.55; }
            50%      { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
        }
        .story-hands {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .story-hands svg {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        /* Pile de panneaux textuels — chacun glisse/fade/scale via classes JS.
           z-index volontairement SOUS .story-visual (2) : les textes passent
           "derrière" les mains lors du SlideFadeScaleDownOut. */
        .story-panels {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }
        .story-panel {
            position: absolute;
            top: 50%;
            left: max(2rem, calc((100vw - 1180px) / 2));
            width: min(46vw, 520px);
            padding: 1.5rem;
            /* Quasi-transparent : juste de quoi forcer Safari à appliquer
               le backdrop-filter sans assombrir / teinter le panneau. */
            background: rgba(245, 239, 230, 0.08);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            border-radius: 8px;
            transform: translate(-115%, -50%) scale(0.94);
            opacity: 0;
            transition:
                transform 1.1s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.75s cubic-bezier(0.65, 0, 0.35, 1);
            will-change: transform, opacity;
        }
        .story-panel.is-active {
            transform: translate(0%, -50%) scale(1);
            opacity: 1;
            pointer-events: auto;
        }
        /* SlideFadeScaleDownOut : sort vers la droite, derrière les mains,
           en rétrécissant et en s'estompant. */
        .story-panel.is-out {
            transform: translate(120%, -50%) scale(0.78);
            opacity: 0;
        }
        .story-panel p {
            color: var(--text-sec);
            font-size: 1.0625em;
            line-height: 1.85;
            margin-bottom: 1.2rem;
        }
        .story-panel p:last-of-type { margin-bottom: 0; }
        .story-panel strong {
            color: var(--ink);
            font-weight: 500;
        }
        .story-panel .story-keywords {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }
        .story-panel .story-kw {
            padding: 0.4rem 1rem;
            background: var(--accent-glow);
            border: 1px solid rgba(157, 181, 170, 0.12);
            font-size: 0.875rem;            /* 14 px — lisibilité minimale */
            font-weight: 500;
            color: var(--accent);
            letter-spacing: 0.02em;
            border-radius: 4px;
        }
        /* "Mon parcours" : liste verticale plutôt que grille de cards.
           Plus aéré et plus lisible. */
        .story-panel .story-cards {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            margin-top: 1.4rem;
            list-style: none;             /* on gère le marker via ::before */
            padding-left: 0;
        }
        .story-panel .story-card {
            position: relative;
            padding: 0 0 0 1.15rem;       /* place pour la pastille à gauche */
            background: transparent;
            border: none;
            border-radius: 0;
        }
        /* Pastille ronde en accent, alignée sur la 1re ligne du titre. */
        .story-panel .story-card-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55rem;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
        }
        .story-panel .story-card-title {
            font-size: 1em;                /* 16px */
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.15rem;
            line-height: 1;
        }
        .story-panel .story-card-desc {
            font-size: 1em;            /* 16px */
            color: var(--text-sec);
            line-height: 1.55;
        }

        /* État initial zen : aucun panneau actif. JS applique .stage-N sur .story-stage. */

        /* ========== SERVICES (reprise complète de l'index avec waves SVG) ========== */
        .services-light-section {
            padding: 6rem 2rem 4rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .services-light-section .section-label,
        .services-light-section .section-title {
            text-align: center;
        }
        .services-light-section .section-title em {
            color: var(--accent);
            font-style: normal;
        }
        /* Styles cards services : externalisés dans service-cards.css
           (importé via <link> en <head>). Marge top spécifique à cette page : */
        .cards-grid { margin-top: 3rem; }
        /* Bloc d'appel "Vous ne savez pas quoi choisir ?" sous la grille */
        .services-light-help {
            margin-top: 3rem;
            padding: 2rem 1.5rem;
            background: #f7f2e985;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            text-align: center;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .services-light-help-title {
            font-family: var(--nagoda);
            font-size: 1.25rem;
            color: var(--ink);
            margin: 0;
            line-height: 1.3;
        }
        .services-light-help-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem; /* gabarit uniforme des boutons de la page */
            background: var(--accent);
            color: white;
            text-decoration: none;
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: none;               /* pas de bordure : c'ÉTAIT le liseré au hover (client 2026-07-21) */
            transition: box-shadow 0.3s ease;
            /* Branche l'effet AIMANT : le JS (about.inline.js SELECTORS) pose
               --magnet-x/--magnet-y, mais sans ce transform le bouton ne bougeait
               pas — seul bouton non aimanté du site (client 2026-07-23). */
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .services-light-help-btn svg {
            transition: transform 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .services-light-help-btn:hover svg {
            transform: translateX(4px);
        }
        /* Assurer que le texte/SVG passent au-dessus des pseudo-éléments spotlight. */
        .services-light-help-btn > * { position: relative; z-index: 1; }
        @media (max-width: 768px) {
            .services-light-section { padding: 4rem 1.25rem 3rem; }
            .cards-grid { grid-template-columns: 1fr; gap: 1rem; }
        }

        /* ========== PRICING ========== */
        .pricing-section {
            padding: 6rem 2rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .pricing-card {
            background: var(--white);
            border: 1px solid var(--border);
            padding: 3rem;
            margin-top: 3rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        .pricing-items { display: flex; flex-direction: column; gap: 1.5rem; }
        .pricing-item {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        .pricing-item:last-child { border-bottom: none; padding-bottom: 0; }
        .pricing-label { font-size: 0.95rem; color: var(--text-sec); }
        .pricing-label small { display: block; font-size: 0.8rem; color: var(--text-mut); margin-top: 0.15rem; }
        .pricing-value {
            font-family: var(--nagoda);
            font-size: 1.4rem;
            color: var(--ink);
            white-space: nowrap;
        }

        .pricing-right {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .pricing-note {
            padding: 1.2rem 1.5rem;
            background: var(--accent-glow);
            border-left: 3px solid var(--accent);
            font-size: 0.88rem;
            color: var(--text-sec);
            line-height: 1.7;
        }
        .pricing-location {
            font-size: 0.88rem;
            color: var(--text-mut);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .pricing-location svg {
            width: 16px;
            height: 16px;
            stroke: var(--text-mut);
            fill: none;
            stroke-width: 1.5;
            flex-shrink: 0;
        }
        .btn-rdv {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem; /* gabarit standard des boutons (client 2026-07-21) */
            background: var(--accent);
            color: white;
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            transition: background 0.3s, box-shadow 0.3s;
            text-decoration: none;
            width: fit-content;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .btn-rdv:hover {
            background: var(--accent);
            transform: translate3d(var(--magnet-x, 0), calc(var(--magnet-y, 0px) - 1px), 0);
            box-shadow: 0 8px 30px rgba(71, 67, 58, 0.18);
        }
        .btn-rdv svg {
            width: 16px; height: 16px;
            stroke: white; fill: none;
            stroke-width: 2;
        }

        /* ========== BOUTONS PRIMAIRES — Hover lumineux (spotlight curseur + halo) ==========
           Sélecteurs : boutons primaires « lumineux » de la page. services-light-help-btn
           EN FAIT PARTIE (client 2026-07-21) : il doit avoir le MÊME hover que « Trouver
           le soin adapté » (btn primary). Le « liseré brun » qu'on voyait avant venait de
           son ancien `border: 1px solid transparent` (le spotlight ::before ne couvrait pas
           ce 1px → anneau sombre) ; corrigé par `border: none` sur le bouton. */
        .btn-hero-fill,
        .btn-rdv,
        .services-light-help-btn {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        /* ::before — Gradient mocha→brun foncé qui suit le curseur (background "vivant") */
        .btn-hero-fill::before,
        .btn-rdv::before,
        .services-light-help-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(
                circle 220px at var(--mx, 50%) var(--my, 50%),
                var(--mocha) 30%,
                #684226 90%
            );
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
            mix-blend-mode: lighten;
        }
        /* ::after — Lumière crème mocha-tintée, qui suit aussi le curseur */
        .btn-hero-fill::after,
        .btn-rdv::after,
        .services-light-help-btn::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(
                circle 160px at var(--mx, 50%) var(--my, 50%),
                rgb(255 241 214 / 55%) 0%,
                #9c755878 25%,
                #9c755824 95%
            );
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
            mix-blend-mode: plus-lighter;
        }
        .btn-hero-fill:hover::before,
        .btn-rdv:hover::before,
        .services-light-help-btn:hover::before,
        .btn-hero-fill:hover::after,
        .btn-rdv:hover::after,
        .services-light-help-btn:hover::after {
            opacity: 1;
        }
        .btn-hero-fill:hover,
        .btn-rdv:hover,
        .services-light-help-btn:hover {
            box-shadow:
                0 6px 22px rgba(255, 200, 130, 0.32),
                0 0 40px rgba(255, 224, 170, 0.25);
            transform: none;
        }

        /* ========== FAQ ========== */
        .faq-section {
            padding: 6rem 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .faq-list {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
        }
        .faq-item {
            border-bottom: 1px solid var(--border);
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .faq-item:last-child { border-bottom: none; }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            cursor: pointer;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            text-wrap: balance;
            font-family: var(--body);
            font-size: 18px;
            font-weight: 500;
            color: var(--ink);
            transition: color 0.3s;
        }
        .faq-question:hover { color: var(--accent); }
        .faq-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-left: 1rem;
            transition: background 0.3s, border-color 0.3s;
        }
        .faq-icon svg {
            width: 14px; height: 14px;
            stroke: var(--text-mut);
            fill: none;
            stroke-width: 2;
            transition: transform 0.3s;
        }
        .faq-question:hover .faq-icon {
            background: var(--accent);
            border-color: var(--accent);
        }
        .faq-question:hover .faq-icon svg {
            stroke: white;
        }
        .faq-item.open .faq-icon {
            background: var(--accent);
            border-color: var(--accent);
        }
        .faq-item.open .faq-icon svg {
            stroke: white;
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                        padding 0.4s;
        }
        .faq-item.open .faq-answer {
            max-height: 200px;
        }
        .faq-answer-inner {
            padding-bottom: 1.5rem;
            color: var(--text-sec);
            font-size: 1.0625em;
            line-height: 1.3;
        }

        /* ========== CONTACT (rattaché au footer) ========== */
        .contact-section {
            position: relative;
            z-index: 1;
            background: var(--cream, #F1EADE);
            padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 5vw, 4rem);
            margin: 0;
        }
        .contact-section .section-inner { max-width: 1100px; margin: 0 auto; }
        .contact-section .s-overline { font-size: 0.88rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; }
        .contact-section .s-title { font-family: var(--nagoda); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; color: var(--ink); margin-bottom: 2rem; }
        .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
        .contact-method { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); transition: padding-left 0.3s; text-decoration: none; color: inherit; }
        .contact-method:first-of-type { border-top: 1px solid var(--border); }
        .contact-method:hover { padding-left: 0.4rem; }
        .contact-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .contact-icon svg { width: 18px; height: 18px; stroke: var(--accent); }
        .contact-method-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mut); margin-bottom: 0.15rem; }
        .contact-method-value { font-size: 1rem; color: var(--ink); }
        .contact-method span:not(.contact-icon) { display: flex; flex-direction: column; }
        .contact-address { margin-top: 2rem; }
        .contact-address h4 { font-family: var(--nagoda); font-size: 1.2rem; margin-bottom: 0.5rem; }
        .contact-address p { font-size: 0.95rem; color: var(--text-sec); line-height: 1.7; }
        /* Calendly mock */
        .calendly-widget { background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
        .calendly-header { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.8rem; }
        .calendly-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #93AAB8); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--nagoda); font-size: 0.85rem; flex-shrink: 0; }
        .calendly-header-text h4 { font-size: 0.95rem; font-weight: 500; color: var(--ink); }
        .calendly-header-text p { font-size: 0.78rem; color: var(--text-mut); }
        .calendly-body { padding: 1.2rem 1.5rem; }
        .calendly-month { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .calendly-month span { font-family: var(--nagoda); font-size: 1rem; color: var(--ink); }
        .calendly-month button { background: none; border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; color: var(--text-sec); }
        .calendly-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; margin-bottom: 0.8rem; }
        .calendly-days .day-label { font-size: 0.6rem; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0; }
        .calendly-days .day { font-size: 0.78rem; padding: 0.5rem 0; color: var(--text-sec); border-radius: 50%; transition: all 0.2s; cursor: default; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
        .calendly-days .day.empty { visibility: hidden; }
        .calendly-days .day.available { color: var(--ink); font-weight: 600; cursor: pointer; }
        .calendly-days .day.available:hover { background: rgba(181,120,78,0.08); color: var(--accent); }
        .calendly-days .day.selected { background: var(--accent); color: white; font-weight: 600; }
        .calendly-days .day.past { color: var(--border); }
        .calendly-slots { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
        .calendly-slots-title { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 0.4rem; }
        .calendly-slot { padding: 0.65rem 1rem; border: 1px solid var(--accent); border-radius: 0.4rem; text-align: center; font-size: 0.82rem; color: var(--accent); font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .calendly-slot:hover { background: var(--accent); color: white; }
        .calendly-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); text-align: center; }
        .calendly-footer a { font-size: 0.78rem; color: var(--accent); font-weight: 500; letter-spacing: 0.05em; text-decoration: none; }
        .calendly-powered { font-size: 0.6rem; color: var(--text-mut); text-align: center; margin-top: 0.5rem; }
        .contact-section + .site-footer { margin-top: 0; }
        @media (max-width: 768px) {
            .contact-layout { grid-template-columns: 1fr; }
        }

        /* ========== FOOTER ========== */
        .site-footer { background: var(--ink, #2B2420); padding: 3.5rem 0 1.5rem; position: relative; z-index: 10; border-top: none; max-width: none; margin: 0; display: block; }
        /* Lumière curseur sur le fond foncé du footer — même recette que .btn-fill :
           fond mocha "vivant" (::before) + spot crème (::after), révélés au survol. */
        .site-footer { isolation: isolate; }
        /* z-index:-1 : la lumière éclaire le FOND du footer, le texte reste net
           au-dessus (sinon le spot rendait les liens illisibles au survol). */
        .site-footer::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%),
                var(--mocha, #9C7558) 30%,
                #684226 90%);
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
            mix-blend-mode: lighten;
        }
        .site-footer::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%),
                rgb(255 241 214 / 45%) 0%,
                #9c755878 25%,
                #9c755824 95%);
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
            mix-blend-mode: plus-lighter;
        }
        .site-footer:hover::before,
        .site-footer:hover::after { opacity: 1; }
        .site-footer .section-inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
        .footer-brand { font-family: var(--nagoda); font-size: 1.1rem; color: #FFFFFF; letter-spacing: 0.08em; }
        .footer-brand small { display: block; font-family: var(--body); font-size: 0.6rem; color: #EDE3CF; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.3rem; }
        .footer-brand-desc { font-size: 0.82rem; color: #EDE3CF; line-height: 1.6; margin-top: 1rem; max-width: 280px; }
        .footer-col h5 { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 1rem; font-weight: 500; }
        .footer-col a { display: block; font-size: 0.82rem; color: #EDE3CF; transition: color 0.3s, text-shadow 0.3s; margin-bottom: 0.6rem; text-decoration: none; transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0); }
        .footer-col a:hover { color: #FFFFFF; font-weight: 600; text-shadow: 0 0 1px currentColor, 0 0 14px rgba(255, 255, 255, 0.4); }
        .footer-map-link { line-height: 1.7; transition: color 0.3s, text-shadow 0.3s; }
        .site-footer a.footer-map-link:hover { color: #FFFFFF; font-weight: 600; text-shadow: 0 0 1px currentColor, 0 0 14px rgba(255, 255, 255, 0.4); text-decoration: none; }
        .contact-address a.footer-map-link:hover { color: var(--accent); font-weight: 600; text-decoration: none; text-shadow: none; }
        .footer-col p { font-size: 0.82rem; color: #EDE3CF; line-height: 1.7; }
        .footer-bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(237, 227, 207, 0.12); display: flex; justify-content: space-between; }
        .footer-bottom p, .footer-bottom a { font-size: 0.7rem; color: #EDE3CF; text-decoration: none; }
        .footer-bottom a { transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0); transition: color 0.3s, text-shadow 0.3s; }
        .footer-bottom a:hover { color: #FFFFFF; font-weight: 600; text-shadow: 0 0 1px currentColor, 0 0 14px rgba(255, 255, 255, 0.4); }

        /* Liens simples : hover unifie (font-weight 600 + contraste fort). Exclut boutons / pill-tags. */
        a:not([class*="btn"]):not(.nav-cta):not(.mandala-tag):not(.mandala-modal-tag):not(.sym):not(.calendly-slot):not(.footer-map-link):not(.card):hover {
            font-weight: 600;
            color: #000;
        }
        .site-footer a:not([class*="btn"]):not(.nav-cta):not(.mandala-tag):not(.mandala-modal-tag):not(.sym):not(.calendly-slot):not(.footer-map-link):not(.card):hover { color: #fff !important; }
        /* Mobile : scroll-padding-top pour que les ancres ne passent pas derrière la nav fixe */
        @media (max-width: 768px) {
            html { scroll-padding-top: 70px; }
        }
        @media (max-width: 768px) {
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        }
        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr; }
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .site-header { padding: 0.8rem 1.5rem; }
            .logo-heart { left: 1.5rem; }
            .nav-links { gap: 1rem; font-size: 0.75rem; }

            /* Sur mobile, on n'épingle pas le hero (la photo passe sous le
               texte, le contenu vertical s'allonge — sticky 100vh romprait
               le flow). Le hero scrolle normalement. */
            .hero-stick-wrap { height: auto; position: static; min-height: 100vh; }
            /* Et donc pas de chevauchement avec la story. */
            .story-section { margin-top: 0; }
            .hero {
                position: static;
                height: auto;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
                gap: 2rem;
                min-height: auto;
                padding: 6rem 1.5rem 3rem;
            }
            .hero-content {
                justify-self: stretch;
                max-width: none;
                padding-right: 0;
                order: 1;
            }
            .hero-photo {
                order: 2;
                position: fixed;
                bottom: 0;
                right: 0;
                z-index: 10;
                width: 55vw;
                height: auto;
                min-height: 0;
                pointer-events: none;
                /* fadeOutSlideRight piloté par JS via --photo-x / --photo-op */
                transform: translateX(var(--photo-x, 0%)) !important;
                opacity: var(--photo-op, 1) !important;
                filter: none !important;
                transition: none;
            }
            .hero-photo img { max-height: 60vh; }
            .hero-title { font-size: clamp(3rem, 10vw, 4.5rem); }
            .hero-experience-badge {
                bottom: 1rem; right: 0;
                padding: 0.7rem 1rem;
                border-radius: 10px;
                translate: -40vw 0;
                z-index: -1;
                align-items: flex-start;
            }
            .hero-experience-badge strong { font-size: 1.4rem; }
            .hero-experience-badge small { font-size: 0.7rem; }

            .what-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            .what-visual { order: -1; }
            .what-diagram { width: 240px; height: 240px; }
            .what-ring-1 { width: 240px; height: 240px; }
            .what-ring-2 { width: 170px; height: 170px; }
            .what-ring-3 { width: 100px; height: 100px; }

            .symptoms-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .pricing-card {
                grid-template-columns: 1fr;
                padding: 2rem;
                gap: 2rem;
            }

            /* ===== Story mobile : layout empilé classique =====
               Le scrollytelling (section 360vh + stage sticky + panneaux pilotés
               au scroll) est trop fragile au tactile : on ne contrôlait ni
               l'avance ni le recul. Sur mobile, on désactive tout le mécanisme
               (le JS coupe aussi son staging ≤768px) : les mains s'affichent en
               haut, puis les 3 panneaux à la suite, scroll naturel de la page.
               Les !important neutralisent les classes/styles posés par le JS. */
            .story-section { height: auto; padding: 2.5rem 0 1rem; }
            .story-stage {
                position: static;
                height: auto !important;
                overflow: visible;
                transition: none;
            }
            .story-visual {
                position: relative;
                top: auto; left: auto;
                transform: none !important;
                margin: 0 auto 0.5rem;
                width: 72vw;
                height: 72vw;
                max-width: 400px;
                max-height: 400px;
                opacity: 1;
            }
            .story-panels {
                position: static;
                z-index: 3;
                pointer-events: auto;
            }
            .story-panel {
                position: static;
                width: auto;
                max-width: none;
                max-height: none;
                overflow: visible;
                background: rgb(245 239 230 / 70%);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
                padding: 1.4rem 1.25rem;
                border-radius: 10px;
                margin: 0 1.25rem 1.1rem;
                transform: none !important;
                opacity: 1 !important;
                transition: none;
            }
        }

        @media (max-width: 480px) {
            .process-timeline { padding-left: 2.5rem; }
        }

        /* Dust canvas : poussière émanant de courbes invisibles, en background
           de toute la page. mix-blend-mode: screen → s'additionne au fond crème.
           z-index: -1 → au-dessus du background body, sous tout le contenu. */
        .dust-canvas {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -1;
            mix-blend-mode: screen;
        }
        @media (prefers-reduced-motion: reduce) {
            .dust-canvas { display: none; }
        }

        /* Frosted glass : toutes les sections (sauf le hero) flouttent le canvas
           dust en arrière-plan. Le hero garde le canvas net pour l'effet d'entrée. */
        .what-section,
        .symptoms-section,
        .process-section,
        .pricing-section,
        .faq-section {
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(12px);
            background: rgba(245, 239, 230, 0.1);
        }

        /* Halo curseur page-wide (suit la souris, lumière sur tout le site).
           z-index au-dessus de tout (51) pour rester visible sur photos
           et zones foncées. Intensité réduite pour limiter le blanchiment
           du texte au passage. */
        .cursor-halo {
            position: fixed;
            top: 0;
            left: 0;
            width: 340px;
            height: 340px;
            margin-left: -170px;
            margin-top: -170px;
            pointer-events: none;
            z-index: 51;
            /* Halo blanc lumineux dans tous les états. Le morphing vient uniquement
               de l'évolution des arrêts (qui migrent vers l'extérieur), des alphas
               (qui montent), et du scale (qui réduit) — pilotés par --halo-focus.
               focus=0 → grand halo blanc flou (340px)
               focus=1 → petit disque blanc net (~14px) */
            background: radial-gradient(circle closest-side,
                rgba(255, 255, 255, calc(0.70 + 0.25 * var(--halo-focus, 0))) 0%,
                rgba(255, 255, 255, calc(0.42 + 0.53 * var(--halo-focus, 0))) calc(22% + 66% * var(--halo-focus, 0)),
                rgba(255, 255, 255, calc(0.20 + 0.65 * var(--halo-focus, 0))) calc(45% + 45% * var(--halo-focus, 0)),
                rgba(255, 255, 255, calc(0.07 + 0.43 * var(--halo-focus, 0))) calc(70% + 25% * var(--halo-focus, 0)),
                transparent calc(95% + 5% * var(--halo-focus, 0)));
            mix-blend-mode: screen;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            transform: translate3d(var(--halo-x, -9999px), var(--halo-y, -9999px), 0)
                       scale(calc(1 - 0.959 * var(--halo-focus, 0)));
            transform-origin: center center;
            will-change: transform;
        }
        .cursor-halo.is-active { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
            .cursor-halo { display: none; }
        }

        /* ============================================================
           MOBILE OPTIMIZATION — service-epi.html
           Bloc isolé : ne s'applique qu'à <= 768px, version desktop intacte
           ============================================================ */

        /* Bouton hamburger — invisible par défaut (desktop) */
        .menu-toggle {
            display: none;
            background: transparent;
            border: 0;
            padding: 0.5rem;
            cursor: pointer;
            width: 44px; height: 44px;
            position: relative;
            z-index: 110;
        }
        .menu-toggle span {
            display: block; position: absolute;
            left: 50%; top: 50%;
            width: 22px; height: 2px;
            background: var(--ink, #1e1a16);
            transform: translate(-50%, -50%);
            transition: transform 0.3s, opacity 0.25s, top 0.3s;
        }
        .menu-toggle span:nth-child(1) { top: calc(50% - 7px); }
        .menu-toggle span:nth-child(3) { top: calc(50% + 7px); }
        body.menu-open .menu-toggle span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
        body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
        body.menu-open .menu-toggle span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

        @media (max-width: 768px) {
            /* ----- Header : fond seulement quand scrolled ----- */
            .site-header { padding: 0.75rem 1.25rem; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
            .site-header.scrolled { padding: 0.6rem 1.25rem; }
            .logo-full { height: 18px; }
            .logo-heart { left: 1.25rem; height: 22px; }
            .menu-toggle { display: block; }

            /* Drawer plein écran caché par défaut */
            .nav-links {
                position: fixed;
                top: 0; right: 0; bottom: 0;
                height: 100vh; height: 100dvh;
                width: min(82vw, 340px);
                background: rgba(250,244,234,0.98);
                backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
                box-shadow: -10px 0 40px rgba(43,36,32,0.12);
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 5rem 2rem 2rem;
                transform: translateX(100%);
                transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                overflow-y: auto;
                z-index: 105;
                font-size: 1rem;
            }
            body.menu-open .nav-links { transform: translateX(0); }

            .nav-links > a:not(.nav-cta),
            .nav-dropdown-toggle {
                padding: 1rem 0;
                border-bottom: 1px solid rgba(43,36,32,0.08);
                display: block;
                width: 100%;
            }
            .nav-links > a:not(.nav-cta)::after,
            .nav-dropdown-toggle::after { display: none; }
            .nav-cta { margin-top: 1.25rem; padding: 0.85rem 1.4rem; white-space: nowrap; display: flex; align-items: center; justify-content: center; line-height: 1.4; min-height: 48px; }

            .nav-item-dropdown { display: block; width: 100%; }
            .nav-dropdown-toggle .dropdown-arrow { display: none; }
            .nav-dropdown-menu {
                position: static;
                transform: none !important;
                opacity: 1; visibility: visible; pointer-events: auto;
                background: transparent;
                box-shadow: none;
                border: 0;
                border-bottom: 1px solid rgba(43,36,32,0.08);
                border-radius: 0;
                margin-top: 0;
                padding: 0.5rem 0 0.5rem 1rem;
                min-width: 0;
            }
            .nav-dropdown-menu a { padding: 0.55rem 0; white-space: normal; }
            .nav-dropdown-menu a::after { display: none; }

            body.menu-open::before {
                content: '';
                position: fixed; inset: 0;
                background: rgba(43,36,32,0.35);
                backdrop-filter: blur(2px);
                z-index: 100;
                animation: backdropFadeIn 0.3s ease;
            }
            body.menu-open { overflow: hidden; }
            @keyframes backdropFadeIn { from { opacity: 0; } to { opacity: 1; } }

            /* ----- Désactivation des effets souris (mobile = pas de hover) ----- */
            :root, body, .btn, .btn-hero-fill, .btn-hero-ghost, .btn-rdv, .nav-cta, .nav-links > a, .nav-dropdown-toggle, .symptom-card, .faq-item, .footer-col a, .footer-bottom a, .magnetic {
                --magnet-x: 0px !important;
                --magnet-y: 0px !important;
            }
            .cursor-halo { display: none !important; }
            html, body { overflow-x: clip !important; }

            /* ----- Dust canvas : centré verticalement dans le viewport ----- */
            .dust-canvas {
                width: 100vw !important;
                left: 0 !important;
                top: 50% !important;
                bottom: auto !important;
                height: auto !important;
                transform-origin: center center !important;
                transform: translateY(-50%) scale(1.2) rotate(-15deg) !important;
            }

            /* ----- Hero EPI ----- */
            .hero { padding-top: 6rem !important; padding-bottom: 3rem !important; min-height: auto !important; }
            .hero-content { padding: 0 !important; }
            .hero-title { font-size: 2.5rem !important; line-height: 1 !important; }
            .hero-label { font-size: 14px !important; }
            /* Surtitre « Thérapeute énergéticien à Fribourg » : 14px (client 2026-07-16,
               était encore trop grand à 16px — aligné sur les autres overlines mobiles). */
            .hero-subtitle { font-size: 14px !important; }
            .hero-tagline { font-size: 16px !important; line-height: 1.6 !important; }
            .hero-badges { flex-wrap: wrap !important; justify-content: flex-start !important; align-items: flex-start !important; column-gap: 0.4rem !important; row-gap: 0.4rem !important; margin-bottom: 1rem !important; }
            .hero-badge { font-size: 12px !important; padding: 0.4rem 0.75rem !important; }
            .hero-ctas { flex-wrap: wrap !important; gap: 0.6rem 1.2rem !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; margin-top: 1rem !important; }
            .hero-ctas .btn-hero-fill,
            .hero-ctas .btn-hero-ghost,
            .hero-ctas .btn-hero-link,
            .hero-ctas .btn { justify-content: center !important; padding: 0.9rem 1rem !important; font-size: 14px !important; }
            .hero-ctas .btn-hero-link { padding-left: 0.5rem !important; padding-right: 0 !important; margin-left: 0 !important; }
            .hero-orb, .hero-orb-2 { display: none !important; }
            .scroll-hint, .hero-scroll { display: none !important; }

            /* ----- Sections ----- */
            .section-inner { padding-left: 0 !important; padding-right: 0 !important; }
            .s-title, h3.section-title { font-size: 1.75rem !important; line-height: 1 !important; }
            .s-overline { font-size: 14px !important; }

            /* ----- Tailles minimales : 14px partout, 16px texte principal ----- */
            p, .symptom-card p, .faq-item p, .faq-item .faq-q,
            .footer-brand-desc, .footer-col h5, .footer-col a, .footer-col p,
            .footer-bottom p, .footer-bottom a, .footer-brand small,
            .nav-dropdown-toggle .dropdown-arrow { font-size: 14px !important; }
            .hero-tagline, .symptom-card p, .faq-item p, .footer-col p { font-size: 16px !important; }
            /* Mention déontologique : plus discrète sur mobile (sinon la règle p ci-dessus la remonte à 14px). */
            .medical-note { font-size: 12px !important; }

            /* ----- Symptom cards / FAQ / contenu sur mobile ----- */
            .symptom-grid, .symptoms-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
            .symptom-card { padding: 1rem 0.5rem !important; }
            .faq-question { padding: 1rem 0 !important; font-size: 17px !important; }
            .faq-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
            .faq-list { margin-top: 1rem !important; }
            .faq-item { padding: 0 !important; }
            .faq-answer-inner { font-size: 16px !important; padding: 0.5rem 0 !important; padding-bottom: 1.5rem !important; }

            /* ----- À propos ----- */
            /* About : photo en haut, texte en bas (column-reverse) */
            .about-curtain { flex-direction: column-reverse !important; height: auto !important; }
            .about-panel { width: 100% !important; height: auto !important; position: relative !important; transform: none !important; opacity: 1 !important; }
            .about-panel-left { padding: 1.5rem 1.25rem 3rem !important; }
            .about-panel-right { padding: 3rem 1.25rem 0 !important; min-height: 280px; }
            .about-photo-curtain { width: 100% !important; height: auto !important; max-height: 380px !important; object-fit: cover !important; }
            .about-title { font-size: 2.5rem; }
            .about-text-desc { font-size: 16px; }
            .about-ctas { flex-direction: column; gap: 0.6rem; align-items: stretch; }
            .about-ctas .btn { width: 100%; justify-content: center; }

            /* ----- Contact section ----- */
            .contact-section { padding: 3rem 1.25rem !important; }

            /* ===== Footer mobile : 1 colonne, espacement généreux, bottom centré ===== */
            .site-footer { padding: 3rem 0 1.5rem !important; }
            .site-footer .section-inner { padding: 0 1.5rem !important; }
            .footer-grid {
                grid-template-columns: 1fr !important;
                gap: 0 !important;
                margin-bottom: 1.5rem !important;
            }
            .footer-grid > div {
                padding: 1.5rem 0 !important;
                border-top: 1px solid rgba(237, 227, 207, 0.12);
            }
            .footer-grid > div:first-child {
                padding-top: 0 !important;
                border-top: 0 !important;
            }
            .footer-brand { font-size: 1.3rem !important; }
            .footer-brand small { font-size: 14px !important; margin-top: 0.5rem !important; letter-spacing: 0.18em !important; }
            .footer-brand-desc { font-size: 14px !important; max-width: 100% !important; margin-top: 1rem !important; line-height: 1.65 !important; }
            .footer-col h5 { font-size: 14px !important; letter-spacing: 0.18em !important; margin-bottom: 0.85rem !important; }
            .footer-col a { font-size: 14px !important; margin-bottom: 0.55rem !important; padding: 0.2rem 0; transform: none !important; }
            .footer-col p { font-size: 14px !important; line-height: 1.7 !important; }
            .footer-bottom {
                flex-direction: column !important;
                gap: 0.65rem !important;
                align-items: center !important;
                text-align: center !important;
                margin-top: 1rem !important;
                padding-top: 1.25rem !important;
            }
            .footer-bottom p, .footer-bottom a { font-size: 14px !important; transform: none !important; }
        }

        /* ============================================================
           SAFARI OVERRIDES — étape 2 : on retire tout ce qui force Safari
           à recompositer en software à chaque frame :
           - tous les backdrop-filter (recalcul plein écran sous le dust)
           - tous les mix-blend-mode (repaint au lieu du compositor GPU)
           Les fonds opaques en place suffisent à la lisibilité.
           Chrome/Firefox/Edge gardent les effets complets.
           ============================================================ */
        .is-safari * {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            mix-blend-mode: normal !important;
        }
        /* On remet le blur sur les menus (dropdown desktop + drawer mobile) :
           le pré-cache des gradients halo a tellement allégé le canvas que
           ces blurs ponctuels passent maintenant. À retirer si Safari relague. */
        .is-safari .nav-dropdown-menu,
        .is-safari .nav-links {
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
        }

/* Pages légales en bas du footer (Réglages › Navigation) */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.footer-legal a { font-size: 0.7rem; color: #EDE3CF; opacity: 0.8; text-decoration: none; }

/* Élément de navigation actif : page courante en gras */
.nav-links > a[aria-current="page"],
.nav-links .nav-dropdown-toggle[aria-current="page"] { font-weight: 700; }

/* =========================================================================
   Lisibilité mobile : textes standards/descriptifs à 16px (demande client 2026-07)
   ========================================================================= */
@media (max-width: 768px) {
    .what-text p,
    .story-panel p,
    .story-panel .story-card-title,
    .story-panel .story-card-desc,
    .process-desc {
        font-size: 16px !important;
    }
}