:root {
            --thickness: 2px;
        }
        /* @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;
            --nagoda: 'Nagoda', Georgia, serif; --body: 'Manrope', system-ui, sans-serif;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: var(--body); color: var(--ink); font-weight: 400; -webkit-font-smoothing: antialiased;
            background: linear-gradient(to bottom, rgb(230, 222, 208), #f7f2e9);
            background-attachment: fixed;
            min-height: 100vh;
            transition: background-color 0.3s linear;
        }
        a { color: inherit; text-decoration: none; }

        /* ========== 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, les éléments "texte" (groupe .logo-rest
           injecté par JS) glissent vers la gauche et s'effacent. Le conteneur rétrécit
           en width pour ne pas laisser de vide (max-width n'est pas respecté par un flex item
           contenant un SVG à dimensions intrinsèques — d'où le width fixe). */
        .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; } /* obsolète : le coeur est désormais dans .logo-full */
        .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:not(.nav-cta),
        .nav-dropdown-toggle {
            position: relative;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
            transition: color 0.3s;
        }
        .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,
        .nav-dropdown-toggle:hover,
        .nav-item-dropdown:hover .nav-dropdown-toggle,
        .nav-item-dropdown:focus-within .nav-dropdown-toggle { color: var(--ink); font-weight: 700; }
        .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(250,244,234,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(71,67,58,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(154,179,172,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 ========== */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            /* ====== BREATH ANIMATION — TUNE HERE (DevTools live edit) ====== */
            --stage-size: clamp(170px, 94%, 540px);
            --ring-size: 100%;
            --ring-color: #D6CBBC;
            --ring-width: 1px;
            --tick-length: 18px;
            --tick-offset: 0px;
            --tick-color: #D6CBBC;
            --disk-size: 85%;
            --disk-bg: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, #F2EDE3 31.73%, rgba(242, 237, 227, 0.3) 84.62%, rgba(255, 255, 255, 0.4) 99.99%);
            --disk-border-color: #FFFFFF;
            --disk-border-width: 1px;
            --disk-glow-size: 100%;
            --disk-glow-size-min: 20%;
            --disk-glow-color: #FEFBEF;
            --disk-glow-blur-max: 10px;
            --disk-glow-blur-min: 0px;
            --disk-scale-min: 0.55;
            --orbit-dot-size: 25px;
            --orbit-dot-color: #b2afa5;
            --text-color: #47433A;
            --text-opacity: 0.55;
            --text-size: 1.6rem;
            --text-weight: 200;
            --text-letter-spacing: 0.04em;
            --text-transform: lowercase;
            --cycle-duration: 16s;
            --orbit-duration: 8s;
            /* ============================================================== */
        }

        .hero-inner {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1.5rem, 4vw, 3rem);
            display: flex;
            align-items: center;
            min-height: 100vh;
        }

        .hero-text-side {
            position: relative;
            z-index: 3;
            width: 55%;
            padding: 8rem 0 4rem 0;
            background: #e9e1d31c;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 520px;
        }
        .hero-text-side .hero-h1,
        .hero-text-side .hero-h1 .hero-name,
        .hero-text-side .hero-h2,
        .hero-text-side .hero-h2 em,
        .hero-text-side .hero-desc { color: #2f2c25; }

        .hero-anim-side {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 90vh;
            height: 90vh;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        /* Dust canvas global — calque d'ambiance fixed, reste à l'écran tout au long du scroll.
           État initial décalé/incliné, redressé progressivement au scroll par le JS.
           z-index: -1 → peint juste au-dessus du fond crème du body, mais derrière tout
           le contenu (textes, images, panneaux). Pour qu'il reste visible derrière les
           sections, on rend transparents les fonds des conteneurs (wrapper, panneau
           gauche) — le body, lui, garde la couleur crème comme base et le mix-blend-mode
           screen y dessine les particules. */
        .dust-canvas {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -1;
            mix-blend-mode: screen;
            transform-origin: center center;
            transform: translate(0vw, 7vh) scale(1.2) rotate(-15deg);
            will-change: transform;
        }
        /* Glass + edge : sources de "glass" du hero — masquées pour l'instant. */
        .hero-glass,
        .hero-glass-edge {
            display: none;
            transition: transform 0.1s linear, opacity 0.1s linear;
            will-change: transform;
        }

        /* 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. Gradient FIGÉ (sans `calc()` dans les stops)
               pour permettre au compositor de cacher la rampe — recalculer 8 calc()
               à chaque frame étouffait Safari et causait le lag visible derrière le
               curseur. Le morphing focus=0→1 se fait uniquement via transform: scale()
               (340px → ~14px) qui suffit visuellement.
               `transparent` remplacé par rgba(255,255,255,0) pour éviter le fade
               gris-sale sur Safari (transparent = rgba(0,0,0,0)). */
            background: radial-gradient(circle closest-side,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.55) 35%,
                rgba(255, 255, 255, 0.28) 65%,
                rgba(255, 255, 255, 0.10) 85%,
                rgba(255, 255, 255, 0) 100%);
            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) {
            .dust-canvas { display: none; }
            .cursor-halo { display: none; }
        }

        /* Breath stage : initialement caché, apparaît au scroll par-dessus le canvas */
        .breath-stage,
        .breathing-label {
            opacity: 0;
            transition: opacity 0.4s ease-out;
        }

        .hero-anim-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .breath-stage {
            position: relative;
            width: var(--stage-size);
            aspect-ratio: 1;
            transform: scale(0.3);
            transform-origin: center center;
        }

        .breath-ring,
        .breath-orbit,
        .breath-disk {
            position: absolute;
            inset: 0;
            margin: auto;
            border-radius: 50%;
            aspect-ratio: 1;
        }

        .breath-ring {
            width: var(--ring-size);
            border: var(--ring-width) solid var(--ring-color);
            pointer-events: none;
        }

        .breath-tick {
            position: absolute;
            top: calc(50% - var(--ring-size) / 2 + var(--tick-offset) - var(--tick-length) / 2);
            left: 50%;
            width: var(--ring-width);
            height: var(--tick-length);
            background: var(--tick-color);
            transform: translateX(-50%);
            pointer-events: none;
        }

        .breath-tick-bottom {
            position: absolute;
            bottom: calc(50% - var(--ring-size) / 2 + var(--tick-offset) - var(--tick-length) / 2);
            left: 50%;
            width: var(--ring-width);
            height: var(--tick-length);
            background: var(--tick-color);
            transform: translateX(-50%);
            pointer-events: none;
        }

        .breath-orbit {
            width: var(--ring-size);
            animation: breath-orbit var(--orbit-duration) linear infinite;
            pointer-events: none;
        }

        .breath-orbit-dot {
            position: absolute;
            top: calc(-1 * var(--orbit-dot-size) / 2);
            left: 50%;
            width: var(--orbit-dot-size);
            height: var(--orbit-dot-size);
            border-radius: 50%;
            background: var(--orbit-dot-color);
            transform: translateX(-50%);
            border: 5px solid #f1eade;
            outline: 1px solid #d7cdbe;
        }

        @keyframes breath-orbit {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        .breath-disk {
            width: var(--disk-size);
            background: var(--disk-bg);
            border: var(--disk-border-width) solid var(--disk-border-color);
            pointer-events: none;
        }

        .breath-disk::before {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            top: 0; right: 0; bottom: 0; left: 0;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--disk-glow-color);
            animation: breath-pulse var(--cycle-duration) ease-in-out infinite;
        }

        @keyframes breath-pulse {
            0%   { width: var(--disk-glow-size-min); filter: blur(var(--disk-glow-blur-max)); }
            25%  { width: var(--disk-glow-size);     filter: blur(var(--disk-glow-blur-min)); }
            50%  { width: var(--disk-glow-size);     filter: blur(var(--disk-glow-blur-min)); }
            75%  { width: var(--disk-glow-size-min); filter: blur(var(--disk-glow-blur-max)); }
            100% { width: var(--disk-glow-size-min); filter: blur(var(--disk-glow-blur-max)); }
        }





        /* Glass separator between animation and content */
        /*.hero-glass {*/
        /*    position: absolute;*/
        /*    top: 0; bottom: 0;*/
        /*    left: 0;*/
        /*    width: 60%;*/
        /*    z-index: 2;*/
        /*    background: linear-gradient(90.48deg, rgba(250, 244, 234, 0.5) 75%, rgba(250, 244, 234, 0));*/
        /*    -webkit-backdrop-filter: blur(12px);*/
        /*    backdrop-filter: blur(12px);*/
        /*    pointer-events: none;*/
        /*}*/

        /* Fade mask: cream gradient from left covering the animation */
        /*.hero-anim-fade {*/
        /*    position: absolute;*/
        /*    top: 0; left: 0; bottom: 0;*/
        /*    width: 45%;*/
        /*    background: linear-gradient(to right, var(--cream) 0%, rgba(250,244,234,0.6) 40%, rgba(250,244,234,0) 100%);*/
        /*    z-index: 1;*/
        /*    pointer-events: none;*/
        /*}*/

        .hero-h1 {
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 400;
            letter-spacing: 0.12em;
            color: var(--accent);
            margin-bottom: 1.25em;
            text-transform: uppercase;
        }

        .hero-h1 .hero-name { color: #000; }

        .hero-h2 {
            font-family: var(--nagoda);
            font-size: clamp(2.2rem, 4.5vw, 3.2rem);
            line-height: 1;
            color: #2f2c25;
            margin-bottom: 1.5rem;
            max-width: 560px;
        }

        .hero-h2 em { color: var(--accent); font-style: normal; }

        .hero-desc {
            font-size: 1.125rem;
            color: var(--text-sec);
            line-height: 1.75;
            margin-bottom: 2.5rem;
            max-width: 480px;
            font-weight: 300;
        }

        .hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }

        .btn {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.85rem 2rem;
            font-family: var(--body); font-size: 0.88rem; font-weight: 500;
            letter-spacing: 0.08em; text-transform: uppercase;
            cursor: pointer; transition: all 0.3s; border: none;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .btn-fill { background: var(--accent); color: white; }
        .btn-fill:hover { background: #8F5E38; }
        .btn-ghost { background: transparent; border: none; color: var(--accent); position: relative; overflow: hidden; z-index: 1; transition: color 0.5s; }
        .btn-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-ghost:hover { background: transparent; color: #fff; }
        .btn-ghost:hover::before { top: -50px; left: -50px; }

        /* === Bouton primaire — Hover lumineux (spotlight curseur + halo) === */
        .btn-fill {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        /* ::before — Gradient mocha→brun foncé qui suit le curseur (background "vivant") */
        .btn-fill::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-fill::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-fill:hover::before,
        .btn-fill:hover::after {
            opacity: 1;
        }
        .btn-fill:hover {
            box-shadow:
                0 6px 22px rgba(255, 200, 130, 0.32),
                0 0 40px rgba(255, 224, 170, 0.25);
        }

        /* Scroll hint */
        .scroll-hint {
            position: absolute; bottom: 2rem; left: 5%;
            z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
            animation: floatH 2.5s ease-in-out infinite;
        }
        .scroll-hint span { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mut); }
        .scroll-hint-line { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--accent), transparent); }
        @keyframes floatH { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


        /* ========== BREATHING LABEL ========== */
        .breathing-label {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            font-family: 'Manrope', sans-serif;
            font-weight: var(--text-weight);
            font-size: var(--text-size);
            letter-spacing: var(--text-letter-spacing);
            text-transform: var(--text-transform);
            color: var(--text-color);
            opacity: var(--text-opacity);
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        /* ========== CONTENT WRAPPER ==========
           Glass effect désactivé sur #services : le wrapper a juste un fond crème uni
           qui assure la transition depuis le hero. Les divs .backdrop* restent dans
           le DOM mais sont neutralisées (display:none). */
        .content-glass-wrapper {
            position: relative;
            z-index: 2;
            /* overflow: visible nécessaire pour permettre le sticky de #services */
            overflow: visible;
            /* Fond transparent pour laisser transparaître le canvas (z:-1) et le body
               crème en arrière-plan. Les sections qui ont besoin d'un fond opaque
               (ex. .contact-section) le portent elles-mêmes. */
            background: transparent;
            margin-top: -100vh;
        }
        .content-glass-wrapper > .backdrop,
        .content-glass-wrapper > .backdrop-edge-top,
        .content-glass-wrapper > .backdrop-edge-bottom {
            display: none;
        }
        .reveal-zone {
            position: relative;
        }
        #services {
            position: relative;
            z-index: 1;
        }
        .contact-section {
            position: relative;
            z-index: 1;
            background: #f1eade30;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .content-section {
            position: relative;
            z-index: 1;
            padding: clamp(1rem, 3vw, 3rem) clamp(1.5rem, 4vw, 3rem);
        }
        /* Grande zone transparente en haut pour laisser la fleur visible */
        .content-section:first-child {
            padding-top: clamp(16rem, 25vw, 22rem);
        }
        .section-inner {
            position: relative;
            z-index: 1;
            max-width: 1100px;
            margin: 0 auto;
        }
        .section-divider {
            display: flex; align-items: center; gap: 1rem;
            margin-bottom: 3rem;
        }
        .section-divider::before, .section-divider::after {
            content: ''; flex: 1; height: 1px; background: var(--border);
        }
        .section-divider span {
            font-family: var(--nagoda);
            font-size: 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-mut);
        }
        /* ========== DIVIDER (ligne + point rose, cohérent avec les fiches soin) ========== */
        .divider {
            max-width: 1100px;
            margin: 0 auto 3rem;
            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;
        }
        .s-overline {
            font-size: 0.88rem; font-weight: 500; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem;
        }
        .s-title {
            font-family: var(--nagoda);
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            line-height: 1; color: var(--ink); margin-bottom: 1rem;
        }
        .s-subtitle {
            font-size: 1.125rem; color: var(--text-sec); line-height: 1.7;
            max-width: 600px; margin-bottom: 2.5rem; font-weight: 300;
        }
        /* Services header: centered */
        #services .s-overline,
        #services .s-title,
        #services .s-subtitle {
            text-align: center;
        }
        #services .s-subtitle {
            margin-left: auto;
            margin-right: auto;
        }

        #services {
            margin-top: clamp(1rem, 5vw, 6rem);
        }

        /* ========== ABOUT SECTION (CURTAIN) ========== */
        .about-curtain {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            z-index: 20;
            display: flex;
            pointer-events: none;
        }
        .about-curtain.is-closed { pointer-events: auto; }
        /* Les CTA et badges internes restent cliquables même quand le curtain n'a pas atteint l'état .is-closed
           (sinon les boutons sont morts pendant et autour de l'animation scrub). */
        .about-curtain .about-ctas,
        .about-curtain .about-ctas a,
        .about-curtain .about-ctas .btn-fill,
        .about-curtain .about-ctas .btn-ghost {
            pointer-events: auto;
        }

        .about-panel {
            flex: 1 1 50%;
            position: relative;
            height: 100%;
            will-change: transform;
        }
        .about-panel-left {
            transform: translateX(-100%);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 clamp(2rem, 5vw, 5rem);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .about-panel-right {
            transform: translateX(100%);
            background: #D9D9D9;
        }
        .about-panel-content {
            max-width: 603px;
            width: 100%;
        }
        /* Surtitre À propos : traité comme les autres sections (overline standard). */
        .about-panel-content .s-overline {
            font-family: var(--body);
            font-size: 0.88rem;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 0.75rem;
        }
        .about-panel-content .about-title {
            font-family: var(--nagoda);
            font-size: clamp(2.4rem, 4.5vw, 3.5rem);
            font-weight: 400;
            color: #47433A;
            line-height: 1;
            margin-bottom: 1.75rem;
        }
        .about-panel-content .about-title span {
            color: #47433A;
            font-style: normal;
        }
        .about-panel-content .about-text-desc {
            font-size: 1.0625em;
            color: #5C5142;
            line-height: 1.7; /* aligné sur les autres descriptifs (card-desc 1.7, hero-desc 1.75) — était 1.25, trop serré (client 2026-07-22) */
            margin-bottom: 2rem;
            font-weight: 400;
            font-family: var(--body);
        }
        .about-panel-content .about-credentials {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2.5rem;
        }
        .about-panel-content .credential-tag {
            padding: 0.35rem 0.9rem;
            border: none;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--accent);
            background: #9c867030;
        }
        .about-panel-content .about-ctas {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1.25rem 2.5rem;
            margin-top: 0;
        }
        .about-panel-content .btn-fill {
            background: #47433A;
            color: #FDF9F1;
            padding: 0.95rem 1.5rem;
            border-radius: 4px;
            /* Typo alignée sur le gabarit standard des boutons du site
               (0.88rem / caps / 600 / 0.06em) : ces 2 liens étaient à 1.1rem
               minuscules, seuls boutons hors-norme du site (client 2026-07-21). */
            font-size: 0.88rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .about-panel-content .btn-fill:hover { background: #5C5142; }
        .about-panel-content .btn-ghost {
            background: transparent;
            border: none;
            color: #404B43;
            /* Padding horizontal PERMANENT (pas seulement au hover, sinon le texte
               saute au survol) : le fond sombre qui balaie au hover a ainsi la même
               respiration que le btn-fill voisin (client 2026-07-16). Le margin
               négatif compense pour garder le texte aligné comme avant au repos. */
            padding: 0.95rem 1.5rem;
            margin-left: -1.5rem;
            font-size: 0.88rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        /* Le ::before (cercle var(--accent) sombre) balaie au survol : le texte doit
           passer blanc pour rester lisible (sinon sombre-sur-sombre = invisible). */
        .about-panel-content .btn-ghost:hover { color: #fff; }

        .about-photo-curtain {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .about-badge-curtain {
            position: absolute;
            bottom: clamp(2rem, 6vh, 4.5rem);
            left: clamp(-2.5rem, -3vw, -1.5rem);
            background: #47433A;
            color: #FDF9F1;
            padding: 1.5rem 1.5rem 1.6rem;
            border-radius: 10px;
            text-align: center;
            width: clamp(170px, 13.5vw, 206px);
            min-height: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            /* Parallax léger : --badge-shift est piloté par le JS du curtain.
               Au repos (panneau hors écran), shift = ~260px → le badge reste
               caché derrière la photo malgré son left négatif. Le translate
               magnétique --magnet-x/--magnet-y se compose au-dessus. */
            transform: translate(calc(var(--badge-shift, 260px) + var(--magnet-x, 0px)), var(--magnet-y, 0px));
            will-change: transform;
        }
        .about-badge-curtain strong {
            display: block;
            font-family: var(--nagoda);
            font-size: clamp(1.5rem, 2.4vw, 2.625rem);
            font-weight: 400;
            line-height: 1;
        }
        .about-badge-curtain small {
            font-size: clamp(0.95rem, 1.05vw, 1.125rem);
            font-weight: 400;
            line-height: 1.1;
            font-family: var(--body);
        }

        /* ========== SERVICES SECTION ========== */


        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.2rem;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .cards-grid.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .card {
            padding: 1.8rem 1.5rem 1.5rem;
            position: relative;
            background: #FBF5E9;
            transition: all 0.4s;
            display: flex;
            flex-direction: column;
            border: 1px solid transparent;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
        }
        .card:hover {
            background: #FBF5E9;
            transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(1.01);
            border-color: transparent;
        }
        /* Card avec badge "Recommandé" : border permanent var(--border).
           :has() a une spécificité supérieure à :hover, donc la couleur reste même au survol. */
        .card:has(.card-badge.visible) {
            border-color: var(--border);
        }
        .card.dimmed { opacity: 0.5; transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(0.97); }
        /* Card désactivée → redevient pleinement lisible au hover (le client peut quand même consulter). */
        .card.dimmed:hover { opacity: 1; transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(1); }
        /* --- Vagues SVG façon Tympanus ShapeHoverEffect ---
           Vague TOP : grande au repos (cache .card-desc), rétrécit au hover.
           Vague BOTTOM : invisible au repos, "blop" au hover pour masquer .card-meta.
           overflow:hidden ici (et plus sur .card) → les badges peuvent dépasser le cadre. */
        .card-wave-top, .card-wave-bottom {
            position: absolute;
            left: 0; right: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .card-wave-top { top: 0; height: 40%; z-index: 1; }
        .card-wave-bottom { bottom: 0; height: 27%; z-index: 4; }
        .card-wave-top svg, .card-wave-bottom svg {
            display: block; width: 100%; height: 100%;
        }
        .card-wave-top path, .card-wave-bottom path { fill: var(--ink); }
        /* Dust overlay : canvas étendu de 30px hors du cadre, pour laisser les particules dériver. */
        .card-dust {
            position: absolute;
            top: -30px;
            left: -30px;
            pointer-events: none;
            opacity: 0;
            z-index: 6;
            transition: opacity 0.45s ease;
        }
        .card:hover .card-dust { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
            .card-dust { display: none; }
        }
        /* Vagues TOP/BOTTOM : interpolation pilotée en JS via setAttribute('d', ...).
           Safari ne supporte ni `transition: d` ni `@keyframes { d: ... }` avant la v18
           — d'où le tween JS bidirectionnel (mouseenter ↔ mouseleave). */

        /* Stack des éléments par-dessus les vagues. .card-top-bar a sa propre règle absolute. */
        .card > .card-name,
        .card > .card-acronym,
        .card > .card-symptoms {
            position: relative;
            z-index: 3;
        }
        /* .card-desc cachée derrière la vague top au repos, révélée au hover.
           NE BOUGE PAS : juste opacity. L'espace est réservé en permanence dans le layout. */
        .card > .card-desc {
            position: relative;
            z-index: 0;
            opacity: 0;
            translate: 0 -1.5em;
            text-wrap: balance;
            transform-origin: top left;
            transition: opacity .35s ease;
        }
        .card:hover > .card-desc {
            opacity: 1;
            transition-delay: .18s;
        }

        /* Titre : scale plus marqué au hover. Acronym : fade only. */
        .card > .card-name {
            transform-origin: left center;
            transition: transform .45s cubic-bezier(.5, 0, .25, 1);
        }
        .card:hover > .card-name { transform: translateY(-7px) scale(0.85); }
        .card:hover > .card-name.is-multiline { transform: translateY(-17px) scale(0.85); }
        .card > .card-acronym {
            text-wrap: balance;
            transition: opacity .3s ease;
        }
        .card:hover > .card-acronym { opacity: 0; }

        /* Footer : prix au-dessus, meta empilée en petit en dessous. */
        .card-footer {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;
            border-top: 1px solid var(--border);
            padding-top: 1rem;
        }
        .card-price { position: relative; z-index: 5; }
        /* Meta (durée · séances) reste visible au hover ; juste recouverte visuellement par la wave-bottom. */
        .card-meta {
            position: relative;
            z-index: 3;
        }
        /* CTA "Détails →" : positionné sur la BULLE de la wave-bottom (pas sur le footer). */
        .card-cta {
            position: absolute;
            bottom: 1.4rem;
            right: 1.5rem;
            transform: translateY(12px);
            opacity: 0;
            font-size: 0.82rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #FDF9F1;
            pointer-events: none;
            z-index: 5;
            transition: opacity .35s ease, transform .4s cubic-bezier(.5, 0, .25, 1);
        }
        .card-cta::after {
            content: '\00A0\2192';
            display: inline-block;
            transition: transform .3s ease;
        }
        .card:hover .card-cta {
            animation: cta-elastic 1.4s linear forwards;
            animation-delay: .15s;
        }
        .card:hover .card-cta::after { transform: translateX(3px); }

        @media (prefers-reduced-motion: reduce) {
            .card-wave-top path, .card-wave-bottom,
            .card-name, .card-acronym, .card-desc,
            .card-cta, .card-cta::after, .card-meta { transition: none; }
        }
        /* Badges en absolute → n'occupent pas d'espace dans le flux. */
        .card-top-bar {
            position: absolute; top: -0.5rem; right: 1rem;
            display: flex; align-items: stretch; gap: 0;
            opacity: 0; pointer-events: none;
            z-index: 5;
            transition: opacity 0.35s;
        }
        .card-top-bar.visible {
            opacity: 1; pointer-events: auto;
        }
        .card-badge {
            background: #FFFFFF; color: var(--accent);
            font-size: 0.75rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase;
            padding: 0.3rem 0.75rem;
            border: none;
            display: none;
        }
        .card-badge.visible { display: block; }
        .card-score {
            background: var(--accent); color: white;
            font-size: 0.75rem; font-weight: 600;
            padding: 0.3rem 0.65rem;
            letter-spacing: 0.04em;
            border: 1px solid var(--border);
            display: none;
        }
        .card-score.visible { display: block; }
        .card-name {
            font-family: var(--nagoda);
            font-size: clamp(1.4rem, 2.2vw, 1.7rem);
            color: #FDF9F1; margin-bottom: 0.25rem;
            line-height: 1;
            /* Réserve ~2 lignes pour aligner .card-desc en bas du bloc header
               même quand le nom tient sur 1 seule ligne. */
            min-height: 2.3em;
            align-content: end;
        }
        .card-acronym {
            font-size: 0.82rem; font-weight: 500;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #FDF9F1; margin-bottom: 0;
            line-height: 1.4;
            /* Réserve ~2 lignes pour que les acronymes courts (1 ligne)
               occupent autant de hauteur que les longs (2 lignes). */
            min-height: 2.8em;
        }
        .card-desc {
            font-size: 1.0625em; line-height: 1.7;
            color: var(--text-sec); font-weight: 300;
            margin-bottom: 1.2rem;
        }
        .card-symptoms {
            display: flex; flex-wrap: wrap; gap: 0.3rem;
            margin-bottom: 1.5rem;
            flex: 1;
            /* flex-end pour que les tags se collent au bas de l'espace dispo,
               juste au-dessus du footer. Évite que les cards à peu de contenu
               (desc courte) aient leurs tags qui débordent sur la wave-top. */
            align-content: flex-end;
        }
        .card-symptom {
            padding: 0.2rem 0.55rem;
            font-size: 0.875em;
            font-weight: 500;
            letter-spacing: 0;
            border: 1px solid var(--ink);
            color: var(--ink);
            transition: all 0.3s;
            background: #eae2d5;
            border: none;
        }
        .card-symptom.match {
            background: #6b5644;
            color: white;
            font-weight: 600;
            border-color: var(--accent);
        }
        .card-symptom.card-symptom--more {
            background: transparent;
            color: var(--text-mut);
            font-style: italic;
            cursor: default;
            opacity: 0.85;
        }
        .card-price {
            font-family: var(--nagoda);
            font-size: 1.25rem; color: var(--ink);
        }
        .card-meta {
            font-size: 0.88rem; color: var(--text-mut);
            letter-spacing: 0.04em;
        }

        @media (max-width: 900px) {
            .about-curtain { flex-direction: column; }
            .about-panel-left {
                transform: translateY(-100%);
                padding: 2rem 1.5rem;
                justify-content: center;
            }
            .about-panel-right {
                transform: translateY(100%);
            }
            .about-panel-content .about-title { font-size: 2.2rem; }
            .about-panel-content .about-text-desc { font-size: 1.05rem; }
            .about-badge-curtain {
                width: 140px;
                min-height: 110px;
                padding: 1rem;
            }
        }

        /* Next section placeholder */
        .next-section p { font-family: var(--nagoda); font-size: 1.3rem; color: var(--text-mut); }

        @media (max-width: 900px) {
            .hero { flex-direction: column; }
            .hero-inner { flex-direction: column; min-height: auto; padding: 0; }
            .hero-text-side { width: 100%; padding: 8rem 1.5rem 2rem; }
            .hero-anim-side { position: relative; width: 100%; height: 50vh; }
            .hero-anim-container { right: 0; width: 100%; height: 100%; }
            /* position: absolute OBLIGATOIRE : sans elle, ce div (dégradé de fondu du
               haut de l'anim) redevient un flex-item frère de .hero-anim-container dans
               .hero-anim-side (display:flex) → 2 items à width:100% se partagent 50/50 et
               l'animation est écrasée à gauche (client 2026-07-21). En absolute il
               redevient un simple calque de dégradé par-dessus, sans prendre de place. */
            .hero-anim-fade { position: absolute; width: 100%; height: 40%; left: 0; top: 0; bottom: auto; background: linear-gradient(to bottom, var(--cream) 0%, rgba(250,244,234,0) 100%); }
            .hero-glass { display: none; }
            .hero-ctas { flex-direction: column; }
            .btn { width: 100%; justify-content: center; }
            .site-header { padding: 0.8rem 1.5rem; }
            .logo-heart { left: 1.5rem; }
        }


        header {
            position: sticky;
            top: 0;
            /*
              Very opaque, for unsupported browsers.
              Overwritten in the feature queries below.
            */
            background: hsl(0deg 0% 100% / 0.95);
        }

        /*
          This code gets applied for folks using
          browsers that support backdrop-filter.
        */
        @supports
        (backdrop-filter: blur(16px)) or
    (-webkit-backdrop-filter: blur(16px))
        {
            header {
                background: transparent;
            }

            .hero-glass {
                position: absolute;
                inset: 0;
                z-index: 2;
                -webkit-backdrop-filter: blur(46px);
                backdrop-filter: blur(46px);
                background: linear-gradient(to right, #f5efe8 40%, #f5efe800 100%);
                /*border-right: 1px solid rgba(250, 244, 234, 0.3);*/
                pointer-events: none;
            }

            .hero-glass-edge {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                height: 1px;
                background: rgba(255, 255, 255, 0.85);
                transform: translateX(60%);
                pointer-events: none;
            }
        }

        /*
          This code gets applied for folks using
          browsers that support mask-image. This
          adds the "consider near elements"
          optimization discussed in this article.
        */
        @supports
        (mask-image: none) or
    (-webkit-mask-image: none)
        {
            .hero-glass {
                height: 200%;
                width: 60%;
                -webkit-mask-image: linear-gradient(
                        to bottom,
                        #EDE3CF 0% 30%,
                        transparent 50% 100%
                );
                mask-image: linear-gradient(
                        to bottom,
                        #EDE3CF 0% 30%,
                        transparent 50% 100%
                );
            }
            .hero-glass-edge {
                height: 100%;
                inset: 0;
                -webkit-mask-image: linear-gradient(
                        to right,
                        #EDE3CF 0,
                        #EDE3CF 1px,
                        transparent 1px
                );
                mask-image: linear-gradient(
                        to right,
                        #EDE3CF 0,
                        #EDE3CF 1px,
                        transparent 1px
                );
                /*border-left: 1px solid #EDE3CF29;*/
            }
        }

        /*#accueil ~ section {*/
        /*    -webkit-backdrop-filter: blur(16px);*/
        /*    backdrop-filter: blur(16px);*/
        /*    background: linear-gradient(to bottom, #EDE3CF 70%, #EDE3CF00 100%);*/
        /*}*/

        /* ========== CONTACT ========== */
        /* États du #contact : voir .reveal-zone et .contact-section plus haut.
           Tout le pin/freeze est unifié via JS (zone unique .reveal-zone). */
        .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; transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0); }
        .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; }

        /* ========== FOOTER ========== */
        .site-footer { background: var(--ink, #2B2420); padding: 3.5rem 0 1.5rem; position: relative; z-index: 10; }
        /* 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); }
        /* Lien adresse cabinet : hover sobre, sans soulignement. Le même composant
           sert dans le footer (fond sombre → blanc) ET dans la section contact
           (fond clair → reste foncé comme tél/e-mail). On scope donc par contexte. */
        .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) {
            .contact-layout { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        }
        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr; }
        }

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


        /* Bouton hamburger : invisible par défaut (desktop), affiché en mobile */
        .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, #2B2420);
            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 (le défaut transparent reste) ----- */
            .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); }

            /* Items du drawer */
            .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; }

            /* Dropdown : toujours ouvert dans le drawer mobile */
            .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; }

            /* Backdrop quand menu ouvert */
            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 de souris (mobile = pas de hover) ----- */
            /* Force toutes les vars magnet à 0 pour neutraliser tous les translate3d(var(--magnet-x)…) */
            :root, body, .btn, .nav-cta, .nav-links > a, .nav-dropdown-toggle, .mandala-card, .sym, .card, .about-badge-curtain, .logo-heart, .contact-method, .footer-col a, .footer-bottom a, .magnetic {
                --magnet-x: 0px !important;
                --magnet-y: 0px !important;
            }
            /* Curseur halo : aucun sens sans souris */
            .cursor-halo { display: none !important; }

            /* ----- Pas de scroll horizontal (le drawer mobile fermé déborde via translateX 100%) ----- */
            html, body { overflow-x: clip !important; }

            /* ----- Hero : layout vertical avec breath-stage conservé ----- */
            .breathing-scroll-container { height: auto !important; }
            .content-glass-wrapper { margin-top: 0 !important; }
            .hero {
                position: static !important;
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
                padding: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }
            /* Animation respiration : APRÈS le texte (order 2) */
            .hero-anim-side {
                display: block !important;
                position: relative !important;
                top: auto !important; left: auto !important;
                width: 100% !important;
                height: 62vh !important;
                margin: 0 0 2.5rem !important;
                transform: none !important;
                order: 2 !important;
            }
            .hero-anim-container {
                position: relative !important;
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            /* Breath-stage rendu visible et taille adaptée */
            .breath-stage {
                opacity: 1 !important;
                transform: scale(0.95) !important;
                --stage-size: 96vw !important;
                max-width: 600px !important;
            }
            .breathing-label { opacity: 1 !important; font-size: clamp(1.3rem, 7vw, 2.2rem) !important; }
            .hero-anim-fade { display: none !important; }
            .hero-glass, .hero-glass-edge { display: none !important; transform: none !important; }

            /* Texte hero AVANT l'animation (order 1) */
            .hero-inner {
                min-height: auto !important;
                padding: 0 !important;
                flex-direction: column !important;
                align-items: stretch !important;
                order: 1 !important;
            }
            .hero-text-side {
                width: 100% !important;
                padding: 6rem 1.25rem 1.5rem !important;
                /* Annule le slide left + fade JS scroll-driven du desktop */
                transform: none !important;
                opacity: 1 !important;
                /* Fond transparent : le backdrop-filter agit seul sur le canvas derrière */
                background: transparent !important;
                backdrop-filter: blur(7px) !important;
                -webkit-backdrop-filter: blur(7px) !important;
                border-radius: 0 !important;
            }
            /* Tailles min 14px : overline 14px, titre 32px, desc 16px */
            .hero-h1 { font-size: 14px !important; letter-spacing: 0.12em !important; }
            .hero-h2 { font-size: 2.1rem !important; line-height: 1.1 !important; margin-top: 0.7rem !important; text-wrap: balance; }
            .hero-desc { font-size: 16px !important; line-height: 1.55 !important; }
            .hero-ctas { flex-direction: column !important; gap: 0.6rem !important; align-items: stretch !important; margin-top: 1rem !important; }
            .hero-ctas .btn { width: 100% !important; justify-content: center !important; padding: 0.9rem 1rem !important; font-size: 14px !important; }

            /* Indicateur "Explorer" caché */
            .scroll-hint { display: none !important; }

            /* ----- Canvas dust : centré verticalement dans le viewport, height auto ----- */
            .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;
                transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }
            /* Quand .breath-stage entre dans la zone centrale du viewport, on redresse
               le canvas (rotate 0) et on garde le centrage vertical. */
            body.breath-centered .dust-canvas {
                transform: translateY(-50%) scale(1.05) rotate(0deg) !important;
            }

            /* ===== Instant de pause : seul le breath-stage est visible quand au centre =====
               Le hero-inner s'efface rapidement quand le breath-stage est au centre,
               puis revient en fade-in retardé. */
            .hero-inner {
                /* Transition par défaut : delay 0.25s pour fade-in retardé en sortie */
                transition: opacity 0.55s ease 0.25s !important;
            }
            body.breath-centered .hero-inner {
                opacity: 0.06 !important;
                /* Override transition : pas de delay, fade-out rapide */
                transition: opacity 0.35s ease 0s !important;
            }
            /* L'image about-panel-right est gérée en JS (fade-in scroll-driven dès qu'elle
               entre à 70vh). On laisse juste une petite transition pour le smoothing. */
            .about-panel-right {
                transition: opacity 0.18s linear !important;
            }

            /* ----- Section "À propos" : photo en haut, texte en dessous (column-reverse) ----- */
            .about-curtain {
                flex-direction: column-reverse !important;
                height: auto !important;
                position: relative !important;
                top: auto !important;
                overflow: visible !important;
            }
            .about-panel {
                width: 100% !important;
                height: auto !important;
                position: relative !important;
                /* Annule les transforms scroll-driven qui cachent les panneaux en mobile */
                transform: none !important;
            }
            /* Le panel-left (texte) reste plein opacity. L'opacity du panel-right (image)
               est pilotée en JS pour le fade-in scroll-driven. */
            .about-panel-left { opacity: 1 !important; }
            /* Panneaux about : pas de fonds sur mobile, paddings serrés */
            .about-panel-left { padding: 2rem 1.25rem 1.5rem !important; background: transparent !important; }
            .about-panel-right { padding: 1.5rem 1.25rem 0 !important; min-height: auto !important; background: transparent !important; }
            .about-panel-content { padding: 0 !important; }
            .about-photo-curtain { width: 100% !important; height: auto !important; max-height: 380px !important; object-fit: cover !important; }
            .about-badge-curtain { right: 1.5rem !important; bottom: -1.5rem !important; font-size: 14px !important; }
            .about-title { font-size: 2.5rem !important; }
            .about-text-desc { font-size: 16px !important; line-height: 1.6 !important; }
            .about-credentials { gap: 0.4rem !important; }
            .credential-tag { font-size: 12px !important; padding: 0.4rem 0.75rem !important; }
            .about-ctas { flex-direction: column !important; gap: 0.6rem !important; align-items: stretch !important; }
            /* 14px capitales = gabarit uniforme des boutons (comme le hero) : ces 2 CTA
               sont désormais de vrais boutons en capitales, plus des liens « texte »
               (client 2026-07-21, uniformisation globale des boutons). margin-left: 0
               annule le margin négatif desktop du btn-ghost. */
            .about-ctas .btn { width: 100% !important; justify-content: center !important; font-size: 14px !important; margin-left: 0 !important; }


            /* ----- Sections : paddings réduits sur mobile ----- */
            .content-section { padding: 1rem 1.25rem !important; }
            .content-section:first-child { padding-top: 1.5rem !important; }
            .section-inner, .content-section .section-inner { padding-left: 0 !important; padding-right: 0 !important; }
            .s-title { font-size: 1.7rem !important; line-height: 1 !important; margin-bottom: 0.75rem !important; }
            .s-overline { font-size: 14px !important; margin-bottom: 0.4rem !important; }

            /* ===== Tailles minimales : 14px partout, 16px pour le texte principal =====
               Override général pour s'assurer qu'aucun texte ne descend sous 14px sur mobile. */
            .card-acronym,
            .card-symptom,
            .card-desc,
            .card-meta,
            .card-cta,
            .footer-brand-desc,
            .footer-col h5,
            .footer-col a,
            .footer-col p,
            .footer-bottom p,
            .footer-bottom a,
            .footer-brand small,
            .contact-method-label,
            .calendly-header-text p,
            .calendly-month button,
            .calendly-days .day-label,
            .calendly-days .day,
            .calendly-slots-title,
            .calendly-slot,
            .calendly-avatar,
            .nav-dropdown-toggle .dropdown-arrow { font-size: 14px !important; }
            /* Texte principal et descriptions : 16px */
            .card-desc, .about-text-desc, .hero-desc, .footer-col p, .contact-method-value { font-size: 16px !important; }

            /* ----- Cards services (grid 1 col) ----- */
            .cards-grid { grid-template-columns: 1fr !important; gap: 1rem !important; opacity: 1 !important; transform: none !important; }

            /* ===== Auto-hover des cards quand au centre du viewport (mobile) =====
               Réplique les effets du :hover desktop via la classe .is-scroll-active
               injectée par JS quand la card arrive au centre de l'écran. */
            .card.is-scroll-active .card-wave-top path {
                d: path('M155 85 C 232.822 79.7, 249.752 80.7, 336.5 79.6 V0.5 H0.5 V92.5 C 26 96.9, 96 89, 155 85 Z');
            }
            .card.is-scroll-active .card-name { transform: translateY(-7px) scale(0.85) !important; }
            .card.is-scroll-active .card-name.is-multiline { transform: translateY(-17px) scale(0.85) !important; }
            .card.is-scroll-active .card-acronym { opacity: 0 !important; }
            .card.is-scroll-active .card-desc { opacity: 1 !important; transition-delay: 0.18s !important; }

            /* Le card-cta est masqué sur mobile pour ne pas couvrir le card-footer.
               La card entière reste cliquable, donc le bouton "Détails" est redondant. */
            .card-cta { display: none !important; }

            /* Wave-bottom : reste invisible en mobile pour que le card-meta + card-price
               restent toujours lisibles. La wave-top suffit à donner l'effet visuel. */
            .card.is-scroll-active .card-wave-bottom path { animation: none !important; }
            .card-wave-bottom { display: none !important; }

            /* Card meta toujours visible en mobile (z-index élevé en sécurité) */
            .card-meta, .card-price { z-index: 5 !important; position: relative; }

            /* ----- Contact section ----- */
            .contact-section { padding: 1.75rem 1.25rem 2.25rem !important; }
            .filter-area { margin-bottom: 0.75rem !important; }
            .filter-separator { margin: 1rem 0 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 : empilé et centré sur mobile */
            .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;
        }
        /* .hero-glass n'a pas de bg fully opaque (gradient fade-to-transparent),
           on lui donne un fond plus dense côté gauche pour conserver la lecture
           du texte hero sans le flou. */
        .is-safari .hero-glass {
            background: linear-gradient(to right, #f5efe8 50%, #f5efe800 100%) !important;
        }

/* === Cards : tags + footer alignés en bas ===
   margin-top:auto pousse tags+footer au bas de la carte (flex column) :
   tous les symptômes et tarifs sont alignés quelle que soit la desc. */
.card > .card-symptoms,
.cards-grid .card > .card-symptoms { margin-top: auto; }
/* Vague bottom plus fine : démarre plus bas, pour ne plus entrer en collision
   avec le CTA « Découvrir le soin » ni recouvrir le footer. */
.card-wave-bottom,
.cards-grid .card-wave-bottom { height: 21%; }

/* 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; }