:root { --thickness: 2px; }
        /* @font-face Nagoda -> assets/css/fonts.css */

        :root {
            --cream: #F2ECE1; --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;
        }
        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;
        }
        /* (Ancien logo « 2 éléments » retiré : il forçait `.site-header.scrolled .logo-full
           { opacity: 0 }` + un `.logo-heart` séparé devenu `display:none` → au scroll le logo
           ENTIER disparaissait. Le mécanisme unique (coeur isolé dans .logo-rest) est plus bas,
           identique à home.css : .scrolled réduit .logo-full à 28px et fait glisser .logo-rest.) */
        .nav-links { display: flex; gap: 1.8rem; align-items: center; font-size: 0.82rem; 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-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; }
        .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; }

        /* ========== HERO ========== */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            /* ====== BREATH ANIMATION — TUNE HERE (DevTools live edit) ====== */
            --stage-size: clamp(150px, 90%, 430px);
            --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;
        }

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

        .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;
        }

        .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 #f2ece1;
            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: var(--ink);
            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;
        }
        .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; }

        /* 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 GLASS WRAPPER (single glass — Josh Comeau pattern) ========== */
        .content-glass-wrapper {
            --thickness: 4px;
            position: relative;
            z-index: 2;
            /* overflow: visible nécessaire pour permettre le sticky de #services */
            overflow: visible;
            background: linear-gradient(to bottom, transparent 0, rgba(250,244,234,0.98) 320px);
            margin-top: -100vh;
        }
        /* Zone unifiée : #services + #contact dans le même flow.
           padding-bottom donne le scroll budget pour la séquence freeze+fadeIn. */
        .reveal-zone {
            position: relative;
            padding-bottom: 60vh;
        }
        #services {
            position: relative;
            z-index: 1;
            will-change: transform;
        }
        /* #contact : rattaché au footer (bloc unique en bas de page).
           Pas de pin/freeze ici — affichage statique normal. */
        .contact-section {
            position: relative;
            z-index: 1;
            background: var(--cream, #F1EADE);
            margin: 0;
            padding-bottom: clamp(3rem, 5vw, 4rem);
        }
        .contact-section + .site-footer {
            margin-top: 0;
        }

        .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);
        }

        /*
          Browsers that support backdrop-filter:
          real glass blur + gradient.
        */
        @supports
        (backdrop-filter: blur(16px)) or
        (-webkit-backdrop-filter: blur(16px))
        {
            .content-glass-wrapper {
                background: linear-gradient(to bottom, transparent 0, rgba(250,244,234,0.85) 320px);
            }

            .content-glass-wrapper > .backdrop {
                position: absolute;
                inset: 0;
                -webkit-backdrop-filter: blur(16px);
                backdrop-filter: blur(16px);
                background: linear-gradient(
                    to bottom,
                    transparent 0,
                    rgba(250,244,234,0.6) 200px,
                    rgba(250,244,234,0.96) 400px
                );
                pointer-events: none;
            }

            /* Top edge */
            .content-glass-wrapper > .backdrop-edge-top {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: var(--thickness);
                background: hsl(0deg 0% 100% / 0.1);
                -webkit-backdrop-filter: blur(12px) brightness(0.96);
                backdrop-filter: blur(12px) brightness(0.96);
                pointer-events: none;
                z-index: 2;
            }

            /* Bottom edge */
            .content-glass-wrapper > .backdrop-edge-bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: var(--thickness);
                background: hsl(0deg 0% 100% / 0.1);
                -webkit-backdrop-filter: blur(12px) brightness(0.96);
                backdrop-filter: blur(12px) brightness(0.96);
                pointer-events: none;
                z-index: 2;
            }
        }

        /*
          Browsers that support mask-image:
          "consider near elements" optimization.
        */
        @supports
        (mask-image: none) or
        (-webkit-mask-image: none)
        {
            .content-glass-wrapper > .backdrop {
                height: 200%;
                -webkit-mask-image: linear-gradient(
                    to bottom,
                    black 0% 50%,
                    transparent 50% 100%
                );
                mask-image: linear-gradient(
                    to bottom,
                    black 0% 50%,
                    transparent 50% 100%
                );
            }
            .content-glass-wrapper > .backdrop-edge-top {
                height: 100%;
                inset: 0;
                -webkit-mask-image: linear-gradient(
                    to bottom,
                    black 0,
                    black var(--thickness),
                    transparent var(--thickness)
                );
                mask-image: linear-gradient(
                    to bottom,
                    black 0,
                    black var(--thickness),
                    transparent var(--thickness)
                );
            }
            .content-glass-wrapper > .backdrop-edge-bottom {
                height: 100%;
                inset: 0;
                -webkit-mask-image: linear-gradient(
                    to top,
                    black 0,
                    black var(--thickness),
                    transparent var(--thickness)
                );
                mask-image: linear-gradient(
                    to top,
                    black 0,
                    black var(--thickness),
                    transparent var(--thickness)
                );
            }
        }
        .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);
        }
        .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; }

        .about-panel {
            flex: 1 1 50%;
            position: relative;
            height: 100%;
            will-change: transform;
        }
        .about-panel-left {
            background: rgba(242, 236, 225, var(--bg-alpha, 1));
            transform: translateX(-100%);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 clamp(2rem, 5vw, 5rem);
        }
        .about-panel-right {
            transform: translateX(100%);
            background: #D9D9D9;
            overflow: hidden;
        }
        .about-panel-content {
            max-width: 603px;
            width: 100%;
        }
        .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.25rem;
            color: #5C5142;
            line-height: 1.25;
            margin-bottom: 2.75rem;
            font-weight: 400;
            font-family: var(--body);
        }
        .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;
            font-size: 1.1rem;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0.01em;
        }
        .about-panel-content .btn-fill:hover { background: #5C5142; }
        .about-panel-content .btn-ghost {
            background: transparent;
            border: none;
            color: #404B43;
            padding: 0.95rem 0;
            font-size: 1.1rem;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0.01em;
        }
        /* Texte blanc au survol : le ::before sombre balaie le bouton (cf. home.css). */
        .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(1.5rem, 3vw, 2.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;
        }
        .about-badge-curtain strong {
            display: block;
            font-family: var(--nagoda);
            font-size: clamp(2rem, 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 (cartes) ==========
           Les cartes de soins sont désormais stylées par le composant partagé
           assets/css/service-cards.css (chargé via head.php sur services/service/
           about), source unique strictement identique à la page d'accueil #services.
           L'ancien bloc .card divergent (vagues blanches, titre sombre, badges
           inversés) a été retiré d'ici pour éviter toute dérive. */

        @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%; }
            .hero-anim-fade { 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;
                -webkit-backdrop-filter: blur(16px);
                backdrop-filter: blur(16px);
                background: linear-gradient(to right, #EDE3CF 70%, #EDE3CF00 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;
                height: var(--thickness);
                background: hsl(0deg 0% 100% / 0.1);
                -webkit-backdrop-filter: blur(12px) brightness(0.96);
                backdrop-filter: blur(12px) brightness(0.96);
                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% 50%,
                        transparent 50% 100%
                );
                mask-image: linear-gradient(
                        to bottom,
                        #EDE3CF 0% 50%,
                        transparent 50% 100%
                );
            }
            .hero-glass-edge {
                height: 100%;
                inset: 0;
                -webkit-mask-image: linear-gradient(
                        to right,
                        #EDE3CF 0,
                        #EDE3CF var(--thickness),
                        transparent var(--thickness)
                );
                mask-image: linear-gradient(
                        to right,
                        #EDE3CF 0,
                        #EDE3CF var(--thickness),
                        transparent var(--thickness)
                );
                /*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). */
        /* 2 colonnes comme partout (le snippet contact n'a que méthodes + widget ;
           le 200px venait de l'ancien orbe "breathing" du statique). */
        .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
        .contact-breathing { position: relative; width: 200px; height: 320px; display: flex; align-items: center; justify-content: center; }
        .contact-orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(181,120,78,0.15), rgba(181,120,78,0.04) 60%, transparent 80%); animation: contactBreathe 6s ease-in-out infinite; position: relative; }
        .contact-orb::before { content: ''; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid rgba(181,120,78,0.1); animation: contactBreathe 6s ease-in-out infinite reverse; }
        .contact-orb::after { content: ''; position: absolute; inset: -35px; border-radius: 50%; border: 1px solid rgba(181,120,78,0.05); animation: contactBreathe 8s ease-in-out infinite; }
        .contact-orb-inner { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(181,120,78,0.2), transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); }
        .contact-orb-label { position: absolute; bottom: 40px; text-align: center; width: 100%; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); opacity: 0.5; }
        @keyframes contactBreathe { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
        .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; }

        /* ========== 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); }
        .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 #3D3226; 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):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):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; }
            .contact-breathing { width: 100%; height: 120px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        }
        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr; }
        }

        /* ========== ISOLATION : fond/positionnement standalone ========== */
        body.services-isolated {
            background: #F1EADE;
            min-height: 100vh;
            padding: clamp(3rem, 6vw, 6rem) 0;
        }
        body.services-isolated #services {
            margin-top: 0;
        }

        /* 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 — services.html
           Bloc isolé : ne s'applique qu'à <= 768px, version desktop intacte
           ============================================================ */
        @media (max-width: 768px) {
            /* Désactivation des effets souris (mobile = pas de hover) */
            :root, body, .btn, .nav-cta, .nav-links > a, .nav-dropdown-toggle, .mandala-card, .card, .about-badge-curtain, .logo-heart, .contact-method, .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 {
                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;
            }

            /* Sections/padding */
            .content-section { padding: 1.75rem 1.25rem !important; }
            .content-section:first-child { padding-top: 2.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; }
            .s-overline { font-size: 14px !important; }

            /* Tailles minimales : 14px partout, 16px pour le texte principal */
            .card-acronym, .card-symptom, .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,
            .nav-dropdown-toggle .dropdown-arrow { font-size: 14px !important; }
            .card-desc, .footer-col p { font-size: 17px !important; }


            /* Cards services en colonne */
            .cards-grid { grid-template-columns: 1fr !important; gap: 1rem !important; opacity: 1 !important; transform: none !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; }

            /* Auto-hover des cards quand au centre du viewport (mobile) */
            .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; }
            .card-cta { display: none !important; }
            .card.is-scroll-active .card-wave-bottom path { animation: none !important; }
            .card-wave-bottom { display: none !important; }
            .card-meta, .card-price { z-index: 5 !important; position: relative; }
        }

        /* ============================================================
           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 (force un repaint au lieu du compositor)
           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;
        }


/* ============================================================
   HEADER — complément (dropdown, burger, drawer mobile)
   Copié depuis service.css : la page services n'avait pas de header
   dans la version statique.
   ============================================================ */
        /* 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); }


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

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