/* CL base.css — layout & components (v6.17.0). Palette/fonts live in tokens.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }
        /* v2.2.0 — scroll-behavior: smooth REMOVED. Céline, 2026-08-19, on the Services
           dropdown: "when i click on energy alignment and transformation journey, it has to
           scroll through the whole page before it gets to the anchor ... It's kind of a waste
           of the visitor's time." She is right: #forfait1 and #forfait2 sit near the foot of
           /services/, so smooth scrolling animated the whole page every time.
           CSS gives no per-link control — scroll-behavior belongs to the scrolling container,
           so a nav <a href="#x"> obeys whatever html says. Removing it makes every anchor a
           direct jump, which is what a menu item should do.
           NOTHING WAS RELYING ON IT: the only intentional smooth-scroll affordance would have
           been .scroll-cue, and that element does not exist in any page's markup and has no
           JS handler — its CSS is dead. Checked before removing.
           scrollbar-gutter:stable is unrelated and stays: it reserves the scrollbar track so
           pages do not shift horizontally when content height changes. */
        html { scrollbar-gutter: stable; }
        body {
            font-family: var(--font-body);
            color: var(--ink);
            background: linear-gradient(180deg, var(--cream) 0%, var(--lavender-mist) 100%);
            line-height: 1.6;
            overflow-x: hidden;
            /* v2.2.0 — 300 -> 400. Every piece of body text on the site inherits this, so
               Lukas Zuklys's "too thin" (2026-08-10) was never a per-component problem, it
               was this one declaration. 300 is the lightest roman Lato ships. NOTE: Lato is
               STATIC 300/400/700 with no 500 face — a 500 here would silently snap to 400,
               so 400 IS the improvement he actually saw in devtools. */
            font-weight: 400;
        }

        /* Decorative starlight specks — subtle, only on darker sections */
        .stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        /* v2.2.0 — TWO fixes here, both from Céline's "strange little dot under the C"
           (2026-08-19, mobile, /services/).

           1. ::after WAS AN EXACT DUPLICATE OF ::before — same six gradients, same inset:0,
              same opacity. It painted every speck twice, so the effective alpha was ~0.91
              instead of the 0.7 intended. That is why a speck read as a hard DOT rather than
              as subtle decoration. The two pseudo-elements were presumably meant to differ
              (offset positions, or one animated); they never did. Dropped to ::before alone,
              which restores the intended subtlety and halves the paint.

           2. THE `42% 88%` SPECK LANDED UNDER HER SIGNATURE AT EVERY WIDTH AND IN BOTH
              LANGUAGES — not a one-viewport fluke. Measured against the .stars box, which is
              what these percentages resolve against:
                 signature band  84.24% - 89.44%
                 tags band       89.75% - 98.36%
              across {390, 1425} x {FR, EN}. So 84%-98.5% is a KEEP-CLEAR ZONE: the section is
              1518-2442px tall depending on width and language, and the signature always sits
              near its foot. A speck at y=88% is inside the signature every single time, and
              x=42% is inside its horizontal span too.
              Moved to `42% 48%` — into the empty band between the 32% and 64% specks, so the
              scatter stays even.
           DO NOT place a speck between y=84% and y=98.5%. Anything there collides with the
           signature or the positioning tags. .stars is used in exactly ONE place sitewide,
           services/index.html inside .approach. */
        .stars::before {
            content: "";
            position: absolute;
            background-image:
                radial-gradient(2px 2px at 12% 18%, rgba(254,243,199,0.8), transparent),
                radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.7), transparent),
                radial-gradient(1.5px 1.5px at 55% 32%, rgba(254,243,199,0.6), transparent),
                radial-gradient(1px 1px at 76% 78%, rgba(255,255,255,0.5), transparent),
                radial-gradient(2px 2px at 88% 22%, rgba(254,243,199,0.7), transparent),
                radial-gradient(1px 1px at 42% 48%, rgba(255,255,255,0.6), transparent);
            background-repeat: no-repeat;
            inset: 0;
            opacity: 0.7;
        }

        /* ============================================
           SCROLL PROGRESS BAR
           ============================================ */
        .scroll-progress {
            position: fixed;
            top: 0; left: 0;
            height: 3px;
            width: 0;
            background: linear-gradient(90deg, var(--purple) 0%, var(--magenta) 50%, var(--blue-electric) 100%);
            z-index: 9999;
            transition: width 0.1s ease-out;
        }

        /* ============================================
           LANGUAGE TOGGLE
           ============================================ */
        .lang-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(8px);
            border-radius: 50px;
            padding: 4px;
            box-shadow: var(--shadow-md);
            font-family: var(--font-body);
            /* Overridden to 12px !important further down (search .lang-toggle a). That 12px is a
               DELIBERATE, DOCUMENTED exception to the 13px house floor, set in v2.2.0. Do not
               "fix" it here — this declaration does not win, and changing it only makes the two
               rules disagree. See the note at the override. */
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.2px;
        }
        .lang-toggle button {
            background: transparent;
            border: none;
            padding: 7px 16px;
            border-radius: 50px;
            cursor: pointer;
            color: var(--ink-soft);
            transition: all 0.25s ease;
            font-weight: 700;
            font-family: inherit;
            letter-spacing: inherit;
        }
        .lang-toggle button.active {
            background: linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(107, 70, 193, 0.35);
        }
        .lang-toggle button:not(.active):hover {
            color: var(--purple);
        }

        /* ============================================
           HEADER NAV
           ============================================ */
        .header {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: rgba(250, 248, 245, 0.92);
            backdrop-filter: blur(12px);
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 18px 0;
        }
        .header.scrolled {
            background: rgba(250, 248, 245, 0.92);
            backdrop-filter: blur(12px);
            box-shadow: 0 2px 20px rgba(61, 30, 109, 0.06);
            padding: 12px 0;
        }
        .header-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 16px 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* Brand lockup in header — logo + wordmark */
        .brand-lockup {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--purple-deep);
            transition: opacity 0.25s;
        }
        .brand-lockup:hover { opacity: 0.75; }
        .brand-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .brand-name {
            font-family: var(--font-display);
            font-weight: 500;
            font-size: 22px;
            letter-spacing: 0.3px;
            line-height: 1;
            color: var(--purple-deep);
            white-space: nowrap;
        }

        .nav-menu {
            display: flex;
            gap: 36px;
            list-style: none;
            align-items: center;
        }
        .nav-menu a {
            color: var(--ink-soft);
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: color 0.25s;
            position: relative;
        }
        .nav-menu a::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: -6px;
            height: 1px;
            background: var(--magenta);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        .nav-menu a:hover { color: var(--purple); }
        .nav-menu a:hover::after { transform: scaleX(1); }

        /* Blog: disabled placeholder (page retired) — visible, not clickable, kept in position */
        .nav-menu .nav-disabled {
            display: inline-block;
            color: var(--ink-soft);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            opacity: 0.45;
            pointer-events: none;
            cursor: default;
            user-select: none;
        }

        /* Hamburger */
        .hamburger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1100;
        }
        .hamburger span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--purple-deep);
            margin: 5px 0;
            transition: 0.3s;
            border-radius: 2px;
        }
        .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }




        .btn {
            /* v2.2.0 — 12px -> 14px. Buttons are the one thing on a page a visitor MUST be
               able to read, and 12px uppercase was under every floor in this pass. The hero
               CTAs are unaffected: they run on their own clamp inside .hero-overlay and set
               13.1px desktop / 13px mobile, both above the old value anyway. */
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            text-wrap: nowrap;
        }
        .btn-primary {
            /* v1.5.1 — lighter sage fill (--vert-sauge-light) for more contrast/pop against
               the cream page. Dark plum-charcoal text keeps WCAG AAA on the fill. */
            background: var(--vert-sauge-light);
            color: var(--on-vert-sauge);
            box-shadow: 0 8px 24px rgba(126, 140, 132, 0.40);
        }
        .btn-primary:hover {
            background: var(--vert-sauge-deep);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(126, 140, 132, 0.50);
        }
        .btn-secondary {
            background: transparent;
            color: var(--purple-deep);
            border: 1.5px solid var(--purple);
            box-shadow: none;
        }
        .btn-secondary:hover {
            background: var(--purple);
            color: white;
            transform: translateY(-2px);
        }

        /* Floating crystals — decorative */
        .crystal-float {
            position: absolute;
            opacity: 0.4;
            animation: float 8s ease-in-out infinite;
        }
        .crystal-float.c1 { top: 18%; left: 8%; animation-delay: 0s; }
        .crystal-float.c2 { top: 28%; right: 10%; animation-delay: 2s; }
        .crystal-float.c3 { bottom: 22%; left: 12%; animation-delay: 4s; }
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(8deg); }
        }

        /* ============================================
           SECTIONS — shared
           ============================================ */
        section { position: relative; }
        .section-pad {
            padding: 100px 32px;
        }
        .container {
            /* v2.2.0 — 1100px -> 1200px, SITEWIDE, and this is the fix for two complaints at
               once. Céline said the page "floats in the middle" of her monitor; earlier in
               v2.2.0 only .home-split was widened to 1200, which made the splits the single
               widest block on the site and left everything else on the old 1100. That is
               precisely why she then said "the services photos ... are all way too small now
               by comparison" — measured, the service photos sat 332px wide inside a 1060px
               content box while the split images beside them ran on 1200. Two measures on one
               page. One measure now. #about already ran at 1180, so this width was not new
               territory. With --container-pad:20px the content box is 1160. */
            max-width: 1200px;
            margin: 0 auto;
        }
        .section-eyebrow {
            /* v2.2.0 — 12px -> 13px and --magenta -> --rose-ink. This one rule is the single
               biggest readability win on the site: 27 elements across 7 pages, and it was
               failing AA at 2.94:1 while set in 12px letterspaced uppercase. Contrast is now
               6.29:1 on white. 13px is the house floor for micro-labels — uppercase with 4px
               tracking reads larger than its px value, which is why the label floor sits
               below the 15px secondary-text floor rather than at it. */
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--rose-ink);
            margin-bottom: 18px;
            display: block;
        }
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(34px, 5vw, 52px);
            font-weight: 500;
            color: var(--ink);
            line-height: 1.15;
            margin-bottom: 24px;
            letter-spacing: -0.5px;
        }
        .section-subtitle {
            font-family: var(--font-display);
            font-style: italic;
            font-size: clamp(18px, 2.2vw, 22px);
            color: var(--purple);
            font-weight: 400;
            max-width: 700px;
            margin-bottom: 48px;
        }

        /* Fade-in animation */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================
           ABOUT
           ============================================ */
        .about {
            background: var(--white);
            position: relative;
        }
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 72px;
            align-items: center;
        }
        .about-image-wrap {
            position: relative;
        }
        .about-image {
            aspect-ratio: 4/5;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
        .about-image:hover {
            transform: scale(1.03);
        }
        .about-image-decor {
            position: absolute;
            bottom: -24px;
            right: -24px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--magenta) 0%, var(--starlight) 100%);
            opacity: 0.4;
            filter: blur(40px);
            z-index: -1;
        }
        /* v2.3.0 — 17px -> 18px. Céline, deck slide 3 comment: "smaller picture but bigger
           font??" The two halves of that go together — the photo gave up ~200px of the row
           (see the #about grid block) and the bio is what receives it.
           DESKTOP ONLY, and it falls out of the cascade rather than needing a second query:
           the max-width:700px block below pins .about-body p back to 17px, which is the
           size she says she already prefers on her phone. Do not "tidy" that override away.
           17px remains the house body floor everywhere else; this is one page going above
           it, not the floor moving. */
        .about-body p {
            margin-bottom: 18px;
            color: var(--ink-soft);
            font-size: 18px;
            line-height: 1.75;
        }
        .about-credentials {
            margin-top: 32px;
            padding-top: 28px;
            border-top: 1px solid rgba(107, 70, 193, 0.15);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .credential {
            font-family: var(--font-display);
        }
        .credential-number {
            font-size: 36px;
            font-weight: 600;
            color: var(--purple);
            line-height: 1;
        }
        .credential-label {
            font-family: var(--font-body);
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--ink-soft);
            margin-top: 6px;
        }

        /* ============================================
           SERVICES
           ============================================ */
        .services {
            background: linear-gradient(180deg, var(--lavender-mist) 0%, var(--cream) 100%);
        }
        .services-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }
        .services-header .section-subtitle { margin: 0 auto; }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }
        .service-card {
            background: white;
            border-radius: var(--radius-md);
            padding: 44px 36px;
            box-shadow: var(--shadow-soft);
            transition: all 0.4s ease;
            border: 1px solid rgba(107, 70, 193, 0.08);
            position: relative;
            overflow: hidden;
        }
        .service-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--purple) 0%, var(--magenta) 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s ease;
        }
        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }
        .service-card:hover::before {
            transform: scaleX(1);
        }
        .service-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--lavender-mist) 0%, var(--purple) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-size: 28px;
            color: white;
        }
        .service-card h3 {
            font-family: var(--font-display);
            font-size: 26px;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: 14px;
            line-height: 1.2;
        }
        .service-card p {
            color: var(--ink-soft);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 18px;
        }
        .service-meta {
            /* v2.2.0 — 13 -> 14px, --magenta -> --rose-ink (was 2.94:1, failed AA). */
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--rose-ink);
        }
        .service-private {
            margin-top: 18px;
            padding: 14px 18px;
            background: var(--lavender-mist);
            border-radius: var(--radius-sm);
            font-size: 15px;   /* v2.2.0 — 13.5px -> 15px, secondary-text floor */
            color: var(--ink-soft);
            line-height: 1.6;
            border-left: 3px solid var(--purple);
        }
        .service-private a {
            /* v2.2.0 — --purple -> --purple-deep. This was the LAST WCAG AA failure on the
               site: #8E7CB6 on this panel's --lavender-mist background measured 3.08:1
               against the 4.5:1 minimum. --purple-deep clears it comfortably. It is also
               underlined on hover only, so colour was carrying the whole link affordance at
               3:1 — worth knowing if the underline ever moves. */
            color: var(--purple-deep);
            font-weight: 700;
            text-decoration: none;
        }
        .service-private a:hover { text-decoration: underline; }
        /* v2.2.0 round 3 — left, following .approach-body. */
        .positioning-tags {
            justify-content: flex-start;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 28px;
        }
        .positioning-tag {
            /* v2.2.0 — 12px -> 13px, the micro-label floor. Contrast was already fine and was
               computed by hand because an automated check cannot read text sitting on the
               .approach gradient: rgba(255,255,255,.85) over --purple-deep is 5.92:1, AA. */
            padding: 7px 18px;
            border-radius: 50px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.25);
            font-size: 13px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.85);
            font-weight: 700;
        }
        .footer-photo-credit {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-top: 6px;
            font-style: italic;
        }
        .footer-photo-credit a {
            color: rgba(255,255,255,0.65);
            text-decoration: none;
        }
        .footer-photo-credit a:hover { color: white; }

        /* ============================================
           APPROACH (USP)
           ============================================ */
        .approach {
            background:
                radial-gradient(ellipse 80% 60% at 80% 20%, rgba(219, 39, 119, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 20% 80%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
                linear-gradient(135deg, var(--purple-deep) 0%, var(--indigo) 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        .approach .section-eyebrow {
            color: var(--starlight);
        }
        .approach .section-title {
            color: white;
        }
        .approach .section-subtitle {
            color: rgba(255,255,255,0.85);
        }
        .approach-body {
            /* v2.2.0 round 3 — text-align:center REMOVED. Céline: "This text is all over the
               place. Some is big, some is small, the centered align doesn't work, please fix
               and make it look more professional."
               Centring was the core fault. This panel carries EIGHT body paragraphs; centred
               multi-line prose gives both edges a ragged contour, so the eye loses the line
               start on every return sweep. Centring is for one-line statements, not for
               running copy. Everything here is left-aligned now, on mobile too. */
            max-width: 620px;   /* the single measure for this panel — see note below */
            margin: 0 auto;
            text-align: left;
        }
        /* v2.2.0 round 3 — REAL HEADINGS. The hierarchy was inverted: "Qu'est-ce que le
           Reiki ?" and "Mon approche" were .section-eyebrow at 13px uppercase, i.e. SMALLER
           than the 16px body text they introduced, while the pull quote below ran at 26px.
           That is precisely "some is big, some is small". Headings now sit at the top of the
           scale where they belong and everything below steps down from them. */
        .approach .approach-heading {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: clamp(28px, 3.2vw, 38px);
            line-height: 1.2;
            letter-spacing: -0.2px;
            color: #fff;                 /* 7.45:1 on --purple-deep */
            text-transform: none;        /* it was uppercase as an eyebrow */
            margin: 0 0 20px;
            text-wrap: balance;
        }
        /* the second heading needs air above it, since body copy runs right into it */
        .approach .approach-heading + .approach-quote,
        .approach .approach-heading + .approach-copy { margin-top: 0; }
        .approach-copy--reiki + .approach-heading,
        .approach-copy + .approach-heading { margin-top: 58px; }
        .approach-quote {
            /* v2.2.0 round 3 — was clamp(20px,2.4vw,26px), which made this pull quote the
               LARGEST text in the section, out-shouting the headings above it. Now it steps
               down below them: 38px heading / 24px quote / 17px body is a clean three-step
               scale. Marked as a quote by a rule down its left edge instead of by sheer size,
               which is what a left-aligned pull quote wants. */
            font-family: var(--font-display);
            font-style: italic;
            font-size: clamp(19px, 2.1vw, 24px);
            line-height: 1.55;
            color: rgba(255,255,255,0.95);
            margin: 0 0 34px;
            padding-left: 22px;
            border-left: 2px solid var(--magenta);
            max-width: none;
            position: relative;
        }
        /* v2.2.0 round 3 — the 100px decorative quote glyph is GONE. It was absolutely
           positioned at top:-40px left:-20px, which only ever worked against centred text;
           with the block left-aligned it would hang outside the container. The left rule
           above does the same job of marking a quotation and reads as deliberate rather than
           as an ornament. It also retires the last --magenta decoration sitting near body
           copy. */
        .approach-signature {
            font-family: var(--font-script);
            font-weight: 400;   /* v2.0.0: Mrs Saint Delafield ships a single 400 face. */
            font-size: 38px;    /* was 28px under Dancing Script. MSD is a copperplate with
                                   much finer hairlines — at 28px most of its stroke goes
                                   sub-pixel and washes out, badly so in --starlight on the
                                   dark approach panel. Sized to hold its ink. v2.2.0: the
                                   .footer-signoff this shared a ratio with is gone; the
                                   measurement it rests on is preserved at the foot of this
                                   file. This is now MSD's only use on the site. */
            color: var(--starlight);
            margin-top: 24px;
        }
/* v1.9.3 — Mon approche is now real multi-paragraph copy (her slides 9 and 10) instead of
   two long strings carrying inline styles. .approach-copy replaces the inline
   "max-width:720px; color:rgba(255,255,255,.85)" that used to sit on two .section-subtitle
   paragraphs; .approach-emphasis is the shared treatment for her two one-line paragraphs
   (approach.p3 and approach.p5), which read as emphasis rather than body. */
/* v2.2.0 round 3 — measure and alignment. 720px of 17px Lato is ~85 characters a line, well
   past the 45-75 that reads comfortably; 64ch caps it at ~544px. margin is no longer auto,
   so the block sits at the left edge with the headings rather than floating centred inside
   its own parent. Body colour .85 -> .90 alpha, which measures 6.43:1 on --purple-deep
   against 5.92:1 before. */
/* the children no longer carry their own widths: .approach-body above IS the measure, so the
   headings, the pull quote, the body and her emphasis lines all share one left edge and one
   right edge. Before this they each had a different max-width and the column looked ragged. */
.approach-copy{max-width:none;margin:0;}
.approach-copy p{color:rgba(255,255,255,.90);font-size:1.0625rem;line-height:1.75;margin:0 0 18px;text-wrap:pretty;}
.approach-copy p:last-child{margin-bottom:0;}
.approach-copy--reiki{margin-bottom:38px;}
/* her two one-line statements: still italic and still --starlight, but stepped below the
   pull quote so the scale keeps descending instead of bouncing. */
.approach-copy .approach-emphasis{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(17px,1.8vw,20px);line-height:1.55;
  color:var(--starlight);margin:30px 0;max-width:none;}

        /* ============================================
           CRYSTAL ROW
           ============================================ */
        .crystals {
            background: white;
            padding: 80px 32px;
            text-align: center;
        }
        .crystals-grid {
            max-width: 900px;
            margin: 48px auto 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
        }
        .crystal-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        .crystal-shape {
            width: 80px;
            height: 100px;
            position: relative;
            filter: drop-shadow(0 8px 20px rgba(61, 30, 109, 0.25));
            transition: transform 0.5s ease;
        }
        .crystal-item:hover .crystal-shape {
            transform: translateY(-6px) rotate(-3deg);
        }
        .crystal-name {
            font-family: var(--font-display);
            font-size: 16px;
            color: var(--ink);
            font-weight: 500;
        }
        .crystal-chakra {
            /* v2.2.0 — 11px -> 13px, the micro-label floor. Was the smallest text on the site. */
            font-size: 13px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        /* ============================================
           GALLERY (placeholder for husband's photography)
           ============================================ */
        .gallery {
            background: var(--cream);
        }
        .gallery-header { text-align: center; margin-bottom: 56px; }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 200px;
            gap: 16px;
        }
        .gallery-item {
            border-radius: var(--radius-md);
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            transition: transform 0.5s ease;
        }
        .gallery-item:hover { transform: scale(1.02); }
        .gallery-item.big { grid-row: span 2; }
        .gallery-item.g1 { background: linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%); }
        .gallery-item.g2 { background: linear-gradient(135deg, var(--indigo) 0%, var(--blue-electric) 100%); }
        .gallery-item.g3 { background: linear-gradient(135deg, var(--magenta) 0%, var(--starlight) 100%); }
        .gallery-item.g4 { background: linear-gradient(135deg, var(--blue-electric) 0%, var(--purple) 100%); }
        .gallery-item.g5 { background: linear-gradient(135deg, var(--starlight) 0%, var(--magenta) 100%); }
        .gallery-note {
            /* v2.2.0 — 13px italic -> 15px roman. Smallest italic on the site. */
            text-align: center;
            margin-top: 32px;
            font-size: 15px;
            color: var(--ink-soft);
            font-style: normal;
        }

        /* ============================================
           CONTACT
           ============================================ */
        .contact {
            background: linear-gradient(180deg, var(--lavender-mist) 0%, var(--cream) 100%);
            position: relative;
        }
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 64px;
            align-items: start;
        }
        .contact-info p {
            color: var(--ink-soft);
            font-size: 16px;
            line-height: 1.75;
            margin-bottom: 20px;
        }
        .contact-detail {
            display: flex;
            gap: 14px;
            align-items: center;
            margin-top: 24px;
            font-size: 15px;
            color: var(--ink);
        }
        .contact-detail-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
            font-size: 18px;
        }
        .contact-form {
            background: white;
            padding: 40px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
        }
        .form-group { margin-bottom: 22px; }
        .form-group label {
            /* v2.2.0 — 12px -> 13px, the micro-label floor, and --ink-soft -> --ink. These
               are the contact-form labels: the one place on the site where misreading a label
               means the visitor sends the wrong information or gives up. They were the last
               text under 13px anywhere. --ink-soft passed AA at 5.50:1, so this is a
               legibility change rather than a compliance one — 9.77:1 now, AAA. */
            display: block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--ink);
            margin-bottom: 8px;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 14px 18px;
            border: 1.5px solid rgba(107, 70, 193, 0.15);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 15px;
            color: var(--ink);
            background: var(--cream);
            transition: border-color 0.25s, background 0.25s;
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--purple);
            background: white;
        }
        .form-group textarea {
            resize: vertical;
            min-height: 130px;
            font-family: inherit;
        }
        .form-submit {
            width: 100%;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 16px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(107, 70, 193, 0.35);
        }
        .form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(107, 70, 193, 0.45);
        }

        /* ============================================
           FOOTER
           ============================================ */
        .footer {
            background: var(--purple-deep);
            color: rgba(255,255,255,0.85);
            padding: 56px 32px 28px;
            position: relative;
            overflow: hidden;
        }
        .footer-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }
        .footer-mark {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            color: white;
            line-height: 1;
        }
        .footer-mark-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: clamp(22px, 3.5vw, 30px);
        }
        .footer-mark-logo .footer-portrait {
            display: inline-block;
            width: 3.8em;
            height: 3.8em;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            flex-shrink: 0;
            margin-bottom: 5px;
        }
        .footer-mark-logo .footer-portrait img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .footer-mark-name {
            font-family: var(--font-display);
            font-style: italic;
            font-size: 24px;
            font-weight: 500;
            color: white;
            letter-spacing: 0.3px;
        }
        .footer-body { font-size: 14px; }
        .footer-body p { margin-bottom: 8px; }
        .footer-bottom {
            max-width: 1100px;
            margin: 36px auto 0;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.12);
            font-size: 12px;
            text-align: center;
            color: rgba(255,255,255,0.6);
            letter-spacing: 0.5px;
        }

        /* ============================================
           FAB — floating contact button
           ============================================ */
        .fab {
            position: fixed;
            bottom: 28px;
            right: 28px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 24px;
            box-shadow: 0 8px 24px rgba(107, 70, 193, 0.45);
            z-index: 999;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
        }
        .fab.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .fab:hover { transform: translateY(-4px) scale(1.05); }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 900px) {
            .about-grid,
            .contact-grid { grid-template-columns: 1fr; gap: 40px; }
            .services-grid { grid-template-columns: 1fr; }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
            .crystals-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
            .footer-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
            .footer-mark { display: inline-block; text-align: left; }
        }

        @media (max-width: 700px) {
            .hamburger { display: block; }
            .nav-menu {
                position: fixed;
                top: 0; right: -100%;
                width: 80%;
                height: 100vh;
                background: white;
                flex-direction: column;
                justify-content: center;
                gap: 40px;
                box-shadow: var(--shadow-lg);
                transition: right 0.4s ease;
            }
            .nav-menu.open { right: 0; }
            .nav-menu a, .nav-menu .nav-disabled { font-size: 16px; }
            /* v2.2.0 — horizontal padding 24px -> 8px. THE PADDING WAS DOUBLED AND IT WAS
               eating the line length on small phones. Measured at 320px: this section paid
               24px a side, then .container inside it paid another 20px, so 88px of a 320px
               screen — 27.5% of the viewport — went to nested gutters and the text column
               came out at 232px. That is what Céline meant by "on small phones the view is
               getting very narrow and the text is starting to look weird because of the lines
               with only 2-3 words on them."
               The .container padding is the one that has to stay: it is what guarantees a
               gutter for any .container that ISN'T inside a padded section. This one is the
               redundant half when they nest. 8px + 20px = 28px a side, which is still a
               normal phone gutter, and the text column gains 32px. */
            .section-pad { padding: 70px 8px; }
            .about-credentials { grid-template-columns: 1fr; }
            .contact-form { padding: 28px; }
            .lang-toggle { top: 14px; right: 14px; }
        }

/* ===== v6.17.1 additions ===== */
/* v1.9.1: .hero-eyebrow + the old .hero-headline base removed — the eyebrow element no
   longer exists anywhere, and .hero-headline is now owned entirely by the HERO block at
   the bottom of this file. */
.portal{padding:80px 0 30px 0;text-align:center;}
.portal-quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3.2vw,2.1rem);color:var(--ink);max-width:20ch;margin:0 auto 8px;line-height:1.3;}
/* v2.2.0 — max-width 920px -> 1200px, to match the .home-split container. Céline:
   "the services photos ... are all way too small now by comparison." She was right and it
   was a measured mismatch, not a perception: at 1440 the three service photos rendered
   332x187 inside a 920px grid while the split images next to them were 552 wide on a 1200px
   container. Two different measures on one page. Now every home-page block sits on the same
   1200px measure and the photos come up to ~385 wide. */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;max-width:1200px;margin:0 auto 46px;}
.preview-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);background:var(--white);border-radius:var(--radius-md);padding:30px 22px;box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s;}
.preview-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.preview-card .ring{font-size:2rem;}
.preview-card h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--purple-deep);}
/* v2.2.0 — .footer-signoff DELETED. The Mrs Saint Delafield signoff ("Écoute, ressens,
   aligne-toi, rayonne") is gone at Céline's request, 2026-08-19: "It's not. I think I don't
   want it." It was not readable at any size that fit the mobile footer. The element is
   removed from build-footer.js (the single source), the key is out of both dictionaries,
   and its three CSS rules are deleted here, at ~1010, and at the foot of this file. */
.offerings{max-width:820px;margin:0 auto;padding:10px 0 0;}
.offering{background:var(--white);border-radius:var(--radius-lg);padding:38px 36px;box-shadow:var(--shadow-soft);margin-bottom:34px;text-align:left;}
.offering h3{font-family:var(--font-display);font-size:1.6rem;color:var(--purple-deep);margin-bottom:4px;}
.offering .o-sub{font-size:.875rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--rose-ink);font-weight:700;margin-bottom:14px;} /* v2.2.0 — .82rem (13.1px) -> .875rem (14px); --magenta -> --rose-ink, was 2.94:1 and failed AA */
.offering ul{list-style:none;margin:14px 0;padding:0;}
.offering li{position:relative;padding-left:22px;margin:7px 0;}
.offering li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue-electric));}
.offering .o-steps li::before{background:var(--blue-electric);}
.o-price{font-family:var(--font-display);font-size:1.15rem;color:var(--purple-deep);font-weight:600;margin-top:16px;}
.o-note{font-size:1rem;color:var(--ink-soft);font-style:normal;margin-top:6px;} /* v2.2.0 — .9rem italic (14.4px) -> 1rem roman (16px) */
.o-ideal{margin-top:12px;font-size:.95rem;}
.incl-title{font-weight:700;margin-top:16px;color:var(--ink);}
/* v1.9.3 — her slide 11 intro line above the two forfaits. */
.off-intro{font-family:var(--font-display);font-size:clamp(19px,2.2vw,25px);color:var(--purple-deep);line-height:1.4;max-width:640px;margin:14px auto 0;}

.lang-toggle a{background:transparent;border:none;padding:5px 10px;border-radius:50px;cursor:pointer;color:var(--ink-soft);transition:all .25s;font-weight:700;font-family:inherit;letter-spacing:inherit;text-decoration:none;}
.lang-toggle a.active{background:linear-gradient(135deg,var(--purple),var(--magenta));color:#fff;}
.lang-toggle a:not(.active):hover{color:var(--purple);}


/* ===== v6.17.2 MOBILE-FIRST CORRECTION LAYER (base = phone) ===== */
*{box-sizing:border-box;}
/* v2.2.0 — the SECOND scroll-behavior:smooth lived here and was the one actually winning.
   Removing the declaration at the top of the file was not enough: this correction layer sits
   ~1000 lines lower, so on source order it overrode it and anchor jumps were still animating.
   Verified by reading the COMPUTED value (it still said "smooth") rather than trusting the
   edit — which is the only reason this was caught. Both are gone now. */
body,main{overflow-x:hidden;}
:root{--container-pad:20px;--header-h:70px;}
.container{padding-left:var(--container-pad)!important;padding-right:var(--container-pad)!important;width:100%;}
main > section:first-child{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--header-h) + 28px);}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.65);box-shadow:var(--shadow-soft);cursor:pointer;animation:cueBounce 2s infinite;text-decoration:none;z-index:2;}
.scroll-cue .chev{width:12px;height:12px;border-right:2px solid var(--purple-deep);border-bottom:2px solid var(--purple-deep);transform:rotate(45deg);margin-top:-3px;}
@keyframes cueBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}
.to-top{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue-electric));box-shadow:var(--shadow-md);cursor:pointer;border:none;margin:0 auto 22px;text-decoration:none;}
.to-top .chev-up{width:12px;height:12px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);margin-top:3px;}
.footer-inner{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important;gap:20px!important;}
.footer-mark{display:flex!important;flex-direction:column;align-items:center;text-align:center!important;}
.footer-body,.footer-bottom,.footer-photo-credit{text-align:center!important;} /* v2.2.0 — .footer-signoff dropped from this list with the element */
.footer-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;}
.brand-lockup{display:inline-flex!important;align-items:center!important;gap:10px!important;}
.brand-logo{display:inline-flex!important;align-items:center;margin:0!important;flex:0 0 auto;}
.brand-logo img{display:block;width:26px;height:26px;}
.fab{bottom:22px!important;right:22px!important;background:linear-gradient(135deg,var(--purple),var(--magenta))!important;color:#fff!important;width:52px;height:52px;box-shadow:var(--shadow-md)!important;font-size:0!important;}
.fab svg{width:24px;height:24px;display:block;}
.crystals-feature{display:block;width:min(92%,420px);margin:0 auto 30px;}
/* v1.9.3 — group-classes banner, now sitting under #yoga + #ateliers rather than at the
   page bottom, and with NO text over the photo (her slide 13). The v1.7.2
   .svc-banner-overlay / .svc-banner-textbox overlay rules were DELETED, not out-cascaded,
   and .svc-footer-banner was renamed .svc-group-banner since it is no longer at the footer.
   object-position on .svc-banner still steers the crop. */
.svc-group-banner{position:relative;width:100%;overflow:hidden;line-height:0;}
.svc-group-banner .svc-banner{display:block;width:100%;height:clamp(220px,32vw,360px);object-fit:cover;}
/* the Centre line as an ordinary caption beneath the image */
.svc-banner-lead{color:var(--ink);font-size:1rem;line-height:1.55;margin:0 0 4px;font-weight:700;} /* v2.0.0: was 600; Lato has no 600, so this always painted 700 */
.svc-banner-contact{color:var(--ink-soft);font-size:1rem;line-height:1.55;margin:0;}
.svc-banner-contact a{color:var(--purple-deep);text-decoration:underline;text-underline-offset:2px;}
.svc-banner-contact a:hover,.svc-banner-contact a:focus-visible{color:var(--purple);}

/* v1.7.2 — scenic closing banner on Contact (freedom line + full-width lake photo, above footer). */
/* v2.2.0 round 3 — .closing-banner / .closing-line / .closing-photo DELETED. They styled the
   photo at the foot of /blog/, which Céline removed: "home page only for that pic from now
   on." Nothing else on any page used them. */

/* v2.2.0 — the home page's closing CTA band: full-bleed photo, with her "La liberté
   commence…" line and the Contact button set over it. Round 3 made this the ONLY place the
   photo appears — the /blog/ treatment it used to be "distinct from" has been removed, and
   its .closing-banner / .closing-line / .closing-photo rules deleted with it.
   aspect-ratio + object-fit keeps the band a predictable height instead of letting a
   1920x851 photo dictate it, and the width/height attributes on the img still reserve the
   space so the footer does not jump when the photo decodes. */
.closing-cta{position:relative;display:block;line-height:0;}
.closing-cta-photo{display:block;width:100%;height:auto;aspect-ratio:1920/851;
  object-fit:cover;object-position:50% 55%;max-height:460px;}
/* THE SCRIM. Not a mood effect — it is what makes the text legible at all. Measured on the
   photo's own pixels: the water band means luminance 0.228 (white text = 3.78:1, under AA)
   and its sun glints reach 0.985 (white text = 1.01:1). Contrast therefore cannot come from
   the text colour, because the background changes underneath the line. At peak alpha .45 the
   mean drops to 0.065 (white = 9.1:1) and the worst glint to 0.258 (white = 3.41:1, which
   clears the 3:1 large-text threshold the 24px floor below buys us). Feathered top and bottom
   so the photograph still reads as a photograph. */
/* v2.3.0 — THE FULL-BLEED SCRIM IS GONE; THE SCRIM IS NOW LOCAL TO THE QUOTE.
   Céline, deck slide 6: "I find the picture dark, is it possible to light it up. the original
   was lighter". She put the original photograph on the slide next to the live band to prove it.

   THE EXPORT IS NOT THE PROBLEM, AND THIS WAS MEASURED BEFORE ANYTHING WAS CHANGED. Mean
   relative luminance, each image resampled to the same width:
       brand/images/_originals/photos/scenic-lake-bench.jpg   0.2799
       assets/webp/scenic-lake-bench.webp                     0.2819
       assets/webp/scenic-lake-bench-900.webp                 0.2813
       the original she pasted into the deck herself           0.2799
   A 0.7% spread, which is webp encoding noise. There is no pipeline bug to fix, the source is
   a normally exposed daylight photograph, and lifting it in prep would have been solving the
   wrong thing. What she is comparing is the raw photograph against the band WITH THIS SCRIM ON
   IT. The scrim is what is dark, and it was covering the entire picture.

   WHY IT COVERED EVERYTHING IN THE FIRST PLACE, AND WHY IT NO LONGER HAS TO: the scrim exists
   so the white quote clears WCAG over water that varies from luminance 0.228 to 0.985. That is
   a fact about the ~24ch strip the quote occupies, not about the other 70% of a 1920px band.
   Moving it onto the quote itself gives back the bench, the shoreline and the mountains at full
   exposure while the text keeps the contrast it had. Feathered on both axes, same construction
   as the hero role line earlier in this build.
   PEAK ALPHA STAYS .45. It is the value the original contrast maths was derived from, and the
   24px floor on .closing-cta-line below is still load-bearing for the same reason. Neither is
   a style choice; see the note on that rule.
   The button never needed a scrim: it is a filled pill, so its contrast has never depended on
   the photograph at all. */
/* v2.3.0 round 2 — THE SCRIM BOX IS GONE ENTIRELY. Mat's call after seeing it: "let's just
   remove the shading box behind the letters, and just have it be a drop shadow on the text
   instead." The localised scrim that briefly lived here (a feathered, masked ::before) is
   deleted, not disabled — the quote now carries its own legibility in the layered text-shadow
   on .closing-cta-line below.
   ⚠ READ THIS BEFORE ANYONE RE-RUNS A CONTRAST CHECK AND FILES A BUG. WCAG gives no credit to
   text-shadow: it compares the text colour against the background colour and nothing else. So
   white-on-photograph now computes at about 1.07:1 over the bright cloud tops, and this band
   NO LONGER PASSES AA on paper, where the scrim measured 3.50:1. That is a known, deliberate
   trade, made with the picture in front of us. The perceived legibility comes from the tight
   dark halo hugging the glyph edges, which is a real effect and a real technique — it is just
   not one the standard can score.
   The path back is one block: restore a feathered ::before at peak alpha .45. See the v2.3.0
   changelog, item 8a, for the geometry that worked and the two ways of getting it wrong.
   The button is unaffected either way: a filled pill never depended on the photograph. */
.closing-cta-inner{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:0 24px;line-height:normal;}
.closing-cta-line{font-family:var(--font-display);font-style:italic;
  position:relative;
  /* THE 24px FLOOR STAYS. It was put here because at 24px and up this counts as WCAG "large
     text", which needs 3:1 rather than 4.5:1 — and with the scrim gone (see the note above)
     the band does not meet either threshold on paper. The floor stays anyway: it is the size
     the line is meant to be, it is what makes a shadowed white serif hold together over a busy
     photograph, and it is the first thing that has to be true again if the scrim comes back.
     Do not treat it as free to lower now that the number it protected has gone. */
  font-size:clamp(24px,2.7vw,34px);line-height:1.35;
  color:#fff;text-align:center;max-width:24ch;margin:0;
  /* v2.3.0 round 2 — THE SHADOW IS NOW DOING ALL OF THE WORK, so it is three layers, not one.
     A single soft 14px blur spreads too thin to separate a white glyph from a bright cloud; it
     reads as haze rather than as an edge. The stack below is: a 2px near-opaque core that hugs
     the letterform and gives it a hard edge at any size, a 10px mid layer that carries the
     separation, and a 30px wash that darkens the immediate surround just enough to seat the
     line on the photograph. Warm-black rgb(9,14,20) rather than pure black — it sits better on
     the blues in this picture than a neutral shadow does. */
  text-shadow:
    0 1px 2px  rgba(9,14,20,.90),
    0 2px 10px rgba(9,14,20,.78),
    0 4px 30px rgba(9,14,20,.58);
  text-wrap:balance;}
.closing-cta-btn{line-height:normal;
  padding:14px 34px;font-size:15px;letter-spacing:1.5px;
  box-shadow:0 6px 22px rgba(18,26,36,.42);}
.closing-cta-btn:hover,.closing-cta-btn:focus-visible{transform:scale(1.04);}
@media (max-width:600px){
  /* v2.3.0 — object-position 50% -> 0% on the X axis. Céline, deck slide 6: "it's too bad that
     on my iphone (mini) I don't see me on the bench!!"
     MEASURED, not guessed. At 390px the band is 390x487 (4/5) and the 1920x851 photo covers to
     1100x487 — so the height fits exactly, NOTHING is cropped vertically, and the visible window
     is 390/1100 = 35.5% of the picture's width. Centred, that window ran 32%-68%. The bench sits
     at 1.5%-25% and Céline herself at 7%-17%, so the whole subject was outside the window at
     every phone width: 430px produces the same 35.5%, which is why her daughter's larger iPhone
     would not have shown it either. She can stop waiting for that check.
     0% puts the window at 0%-35.5%, which holds the bench and the figure with room to spare and
     still keeps most of the lake. The Y value is now inert at this breakpoint (no vertical crop)
     and is left at 55% so the desktop rule above stays the single place that matters. */
  .closing-cta-photo{aspect-ratio:4/5;max-height:520px;object-position:15% 55%;}
  .closing-cta-line{font-size:clamp(24px,6.2vw,28px);max-width:20ch;}
  .closing-cta-inner{gap:20px;padding:0 20px;}
  .closing-cta-btn{padding:12px 26px;font-size:14px;}
}

/* v1.9.3 — the v1.7.4 .page-cta / .page-cta-title / .page-cta .btn band rules were
   DELETED here, not out-cascaded. All 9 bands came out of the 8 pages this pass;
   Céline never confirmed the copy, which had been flagged PROVISIONAL since v1.7.5.
   Contact is reached from the nav, which is present on every page. */

/* v1.7.7 — offering-card CTAs as simple text links (varied copy), with breathing room. */
.offer-link{display:inline-block;margin:18px 0 2px;color:var(--purple-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;} /* v2.0.0: was 600; Lato has no 600 — see .svc-banner-lead. v2.2.0: --purple -> --purple-deep, was 3.69:1 and failed AA */
.offer-link:hover,.offer-link:focus-visible{color:var(--purple-deep);}
.page-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:48px 20px 8px;}
.page-links a{text-decoration:none;color:var(--purple-deep);font-weight:700;border:1.5px solid rgba(142,124,182,.4);border-radius:50px;padding:10px 22px;transition:all .2s;}
.page-links a:hover{background:var(--purple);color:#fff;}


/* ===== v6.17.3 ===== */
/* Header: solid + persistent (fixes hero-under-nav + weird transition) */
.header,.header.scrolled{background:rgba(245,236,228,.97)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:none!important;box-shadow:0 1px 0 rgba(92,74,134,.08)!important;z-index:1000!important;}


/* Back-to-top: fixed bottom-LEFT, identical size/style to the contact FAB, mirrored */
.to-top{position:fixed;left:22px;bottom:22px;width:52px;height:52px;margin:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s;z-index:90;}
.to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}

/* Footer: two columns, tightened, signoff full width */
.footer{padding:46px 22px 30px!important;}
.footer-cols{display:grid;grid-template-columns:auto 1fr;gap:26px;max-width:560px;margin:0 auto;align-items:start;}
.footer-col-left{display:flex;flex-direction:column;gap:6px;}
.footer-brand{display:inline-flex;align-items:center;gap:10px;}
.footer-brand img{width:26px;height:26px;}
.footer-brand .fname{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:#fff;}
.footer-role{font-size:.82rem;color:rgba(255,255,255,.8);}
.footer-col-right{display:flex;flex-direction:column;gap:9px;}
.footer-col-right a{color:rgba(255,255,255,.9);text-decoration:none;font-size:.92rem;transition:color .2s;}
.footer-col-right a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:16px;font-size:.8125rem;color:rgba(255,255,255,.85);} /* v2.2.0 — .78rem (12.5px) -> .8125rem (13px); alpha .7 -> .85, this is 46 elements across all 8 pages */

/* Tasteful per-page continue nav (replaces the gray strip) */
.continue{padding:60px 20px 14px;text-align:center;}
.continue p{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--ink-soft);margin-bottom:18px;}
.continue .links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.continue a{text-decoration:none;color:var(--purple-deep);font-weight:700;border:1.5px solid rgba(142,124,182,.4);border-radius:50px;padding:10px 24px;transition:all .2s;}
.continue a:hover{background:var(--purple);color:#fff;}

/* Legal page */
.legal-wrap{max-width:760px;margin:0 auto;padding-top:calc(var(--header-h) + 30px);}
.legal-wrap h1{font-family:var(--font-display);color:var(--purple-deep);font-size:2rem;margin-bottom:10px;}
.legal-sec{margin:30px 0;padding-top:10px;}
.legal-sec h2{font-family:var(--font-display);color:var(--purple-deep);font-size:1.4rem;margin-bottom:10px;}
.legal-sec p{color:var(--ink);line-height:1.7;margin-bottom:10px;}
.legal-draft{display:inline-block;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--magenta);border:1px dashed var(--magenta);border-radius:50px;padding:5px 14px;}

/* remove old gray page-links if any remain */
.page-links{display:none!important;}



@keyframes cueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}




/* ===== v6.18.2 NAV — lang toggle in-header + proper hamburger breakpoint =====
   The lang toggle now lives INSIDE <nav> (moved in the HTML), so it is part of
   the header flex row: it vertically centers automatically and can no longer
   float over "Lafrance"/Contact. Nav items are locked to one line; the menu
   collapses to a hamburger at 1024px so items never wrap or get crammed.
   ── TO TUNE (Mat): hamburger switch width = the 1024px in the @media below. */

/* nav cluster = menu links + lang toggle, vertically centered, on the right */
.header-inner > nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}

/* lang toggle: in normal flow now (was position:fixed) → auto vertical-center.
   v1.4.1 — z-index raised to match .hamburger (1100): the mobile drawer
   (.nav-menu.open, z-index 1090) otherwise paints over the toggle and hides
   it behind the panel once the menu is open, worst at narrow widths like
   390px where the drawer covers nearly the full header row. Flex items keep
   z-index even at position:static, so this doesn't need position:relative. */
.lang-toggle{position:static!important;top:auto!important;right:auto!important;
  z-index:1100!important;box-shadow:var(--shadow-soft);flex:0 0 auto;}

/* nav links never wrap or shrink-to-wrap */
.nav-menu{flex-wrap:nowrap!important;}
.nav-menu a{white-space:nowrap!important;}

/* collapse to hamburger BEFORE the row can crowd (was 700px → too late) */
@media (max-width: 1024px){
  .hamburger{display:block!important;order:3;}
  .lang-toggle{order:2;}
  .header-inner > nav{gap:14px;}
  .nav-menu{
    position:fixed; top:0; right:-100%;
    width:80%; max-width:320px; height:100dvh;
    background:#fff; flex-direction:column; justify-content:center;
    gap:40px; box-shadow:var(--shadow-lg); transition:right .4s ease; z-index:1090;
  }
  .nav-menu.open{right:0;}
  .nav-menu a, .nav-menu .nav-disabled{font-size:16px!important;}
}


/* ===== v1.3.0 — MY JOURNEY: formations & certifications (replaces old stats block) =====
   Mobile-first: single column of cards, expands to 3 columns ≥860px. */
.journey-creds{background:linear-gradient(180deg,var(--lavender-mist) 0%,var(--cream) 100%);}
.creds-head{max-width:760px;margin:0 auto 36px;text-align:center;}
.creds-head .section-eyebrow{display:block;margin-bottom:8px;}
.creds-intro{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;margin-top:12px;}
.creds-groups{display:grid;grid-template-columns:1fr;gap:22px;max-width:1100px;margin:0 auto;}
.cred-group{background:#fff;border-radius:var(--radius-md);padding:28px 26px;box-shadow:var(--shadow-soft);border:1px solid rgba(107,70,193,.08);}
.cred-group h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--purple-deep);margin-bottom:6px;}
.cred-group-sub{color:var(--ink-soft);font-style:normal;font-size:1rem;margin-bottom:16px;line-height:1.5;} /* v2.2.0 — .95rem italic (15.2px) -> 1rem roman (16px) */
.cred-group ul{list-style:none;margin:0;padding:0;}
.cred-group li{position:relative;padding-left:20px;margin:10px 0;color:var(--ink);line-height:1.55;font-size:.97rem;}
.cred-group li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue-electric));}
@media(min-width:860px){.creds-groups{grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}}


/* ===== v1.3.0 — TESTIMONIALS page (built, hidden until Céline's 6 finals + images) =====
   6 testimonial slots + 6 image slots. Mobile-first: 1 col → 2 (≥720) → 3 (≥1040). */
.testi-head{max-width:760px;margin:0 auto 40px;text-align:center;}
.testi-sub{color:var(--ink-soft);margin-top:10px;font-size:1.02rem;}
.testi-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:1120px;margin:0 auto;}
/* v1.4.1 — horizontal card: fixed-aspect image column beside the quote, so
   portrait/low-res source photos never dictate the card's shape or height. */
.testi-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);border:1px solid rgba(107,70,193,.08);overflow:hidden;display:flex;flex-direction:row;align-items:center;}
.testi-img{flex:0 0 auto;width:clamp(104px,30vw,190px);aspect-ratio:3/4;margin:18px;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(135deg,var(--lavender-mist),var(--starlight));display:grid;place-items:center;color:var(--ink-soft);font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;text-align:center;padding:6px;}
.testi-img img{width:100%;height:100%;object-fit:cover;display:block;}
.testi-body{padding:22px 22px 22px 0;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0;}
@media (max-width:480px){
  .testi-img{width:clamp(84px,26vw,110px);margin:14px;}
  .testi-body{padding:14px 14px 14px 0;}
}
/* v2.2.0 — four thinness factors were stacked here and this was the worst offender on the
   site: a high-contrast display serif, set italic, at ~17px, inheriting weight 300.
   font-style:normal is Celine's call (2026-08-19, "kill the italics"); font-weight:500 is
   Lukas's number and it is REAL here — Cormorant Garamond is a VARIABLE face 300-700, so
   500 is native and costs no new font file. Do NOT copy this 500 onto anything set in
   Lato: Lato has no 500 and would snap back to 400. */
.testi-quote{font-family:var(--font-display);font-style:normal;font-weight:500;font-size:1.0625rem;line-height:1.6;color:var(--ink);text-wrap:pretty;}
.testi-attr{margin-top:auto;font-weight:700;color:var(--purple-deep);font-size:.95rem;}
.testi-tag{display:block;font-weight:400;font-size:.8125rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;} /* v2.2.0 — .78rem (12.5px) -> .8125rem (13px), micro-label floor */
.testi-card.pending .testi-body{justify-content:center;align-items:flex-start;gap:18px;min-height:160px;}
.testi-card.pending .testi-quote{color:var(--ink-soft);opacity:.65;}
.testi-pending-badge{display:inline-block;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--magenta);border:1px dashed var(--magenta);border-radius:50px;padding:5px 14px;}
@media(min-width:720px){.testi-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.testi-grid{grid-template-columns:repeat(3,1fr);}}


/* ===== v1.3.0 — WOVEN HERO (scaffold; started today) =====
   Goal: portrait woven into a sitewide spanning backdrop with subtle,
   bandwidth-friendly motion — mobile-first, beating the J. Thériault ref.
   This is the STRUCTURE. Final art = Céline's AI portrait-on-background
   (working folder) + logo, both swapped in once locked next session.
   - .site-aura : fixed, full-viewport backdrop layer (shows through the
     transparent hero now; can be promoted across more sections later).
   (v1.9.1: the .hero.woven / .hero-photo rules that lived here went with the
     old full-viewport hero; only .site-aura is still in use.) */
.site-aura{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(161,173,166,.20), transparent 70%),
    radial-gradient(55% 40% at 18% 30%, rgba(181,138,166,.16), transparent 70%),
    radial-gradient(60% 50% at 82% 65%, rgba(142,124,182,.16), transparent 72%);
  background-size:140% 140%;
  animation:auraDrift 38s ease-in-out infinite;}
@keyframes auraDrift{
  0%,100%{background-position:50% 50%, 18% 30%, 82% 65%;}
  50%{background-position:52% 46%, 24% 36%, 76% 60%;}
}
@media(prefers-reduced-motion:reduce){
  .site-aura{animation:none;}
}



/* ===== v1.3.0 — SAGE WAVE DIVIDER (direction hint, hero → portal) =====
   Cheap, reversible nod toward the Image-2 green/sage direction. Full-width,
   fixed-ratio, no overflow, mobile-safe. Sits in normal flow at the seam. */
.wave-divider{display:block;width:100%;line-height:0;margin-top:-1px;position:relative;z-index:1;}
.wave-divider svg{display:block;width:100%;height:clamp(38px,6vw,70px);}
.wave-divider .wave-a{fill:var(--vert-sauge);fill-opacity:.28;}
.wave-divider .wave-b{fill:var(--vert-sauge);fill-opacity:.16;}
/* v2.3.0 — THE WHITE LINE. Céline, deck slide 5: "white line at top, I see it also on iPad
   and cell. If we have no choice the line should be at the bottom?! less obvious".
   IT IS A REAL SEAM AND IT IS NOT A DEVICE ARTIFACT. Measured on the rendered page at 1440,
   sampling the pixel rows either side of each divider's box edge:
       divider 0 bottom   rgb(212,211,204) -> rgb(255,255,255)
       divider 2 bottom   rgb(209,211,204) -> rgb(255,255,255)
   That is a 44-point step in one pixel, running the full width of the page, dead straight.
   The cause: .wave-a and .wave-b are TRANSLUCENT sage over whatever is behind them, and each
   path runs from its curve down to y=70 — the box edge. Where the next section paints its own
   background (.home-about and .home-teaser--alt are both --white) the sage band ends against
   pure white on a straight line. The wave was supposed to BE the transition; instead the
   transition is the box edge and the wave is decoration above it.
   THE FIX IS A THIRD PATH, NOT A NUDGE. .wave-cap carries the same curve family, sits LAST in
   the SVG so it paints over both sage bands, and is filled with the adjoining section's colour
   at full opacity. The straight edges of .wave-a and .wave-b are then hidden underneath it, the
   box edge matches the section it meets exactly, and the only boundary left in view is the
   curve. The sage now reads as a ribbon following the wave, which is what it looked like it was
   doing already.
   WHY IT IS NOT ON ALL FIVE: .wave-divider--cap is on dividers 1-4, the four that abut a white
   section. The fifth sits above the closing photo, and there is no flat colour to match a
   photograph to — its step measures +7, against +44 here, and capping it would put a white bar
   over the top of the picture. Left alone deliberately.
   WHY IT WORKS FLIPPED TOO: the cap fills toward the SVG's own bottom edge, and .wave-flip
   mirrors the whole element, so on a flipped divider the cap lands at the top — which is the
   side where a flipped divider meets its white section. One path, both orientations.
   NOTE FOR THE NEXT PASS: this removes the seam Chrome renders. If she still reports a hairline
   on iPad after this, that is a separate Safari compositing rounding issue on the .wave-flip
   transform, which does not reproduce in headless Chrome and needs her device to chase. */
.wave-divider .wave-cap{fill:none;}
.wave-divider--cap .wave-cap{fill:var(--white);}
/* TOP divider: same wave flipped vertically so its rounded part faces inward (down) */
.wave-divider.wave-flip{transform:scaleY(-1);}


.photo-credit {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    color: var(--ink-soft);
    margin: 24px 0 40px;
}



/* ============================================================
   v1.5.0 — homepage service-preview photos, Mon parcours home teaser,
   Read More toggle
   (v1.9.1: the .hero-eyebrow rules + eyebrowBreathe keyframes that opened this
   block are gone — no .hero-eyebrow element has existed since the v1.3.0 hero
   rewrite, so they were animating nothing.)
   ============================================================ */

/* Homepage service previews: real photos, one fixed card aspect (3:2),
   object-fit:cover + per-image object-position (set inline). No stretch. */
.preview-card{padding:0!important;overflow:hidden;gap:0!important;}
.preview-card .preview-img{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--lavender-mist);}
.preview-card .preview-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.preview-card:hover .preview-img img{transform:scale(1.04);}
.preview-card h3{padding:18px 20px 22px;margin:0;text-align:center;}

/* ============================================================
   v2.0.0 — EXPANDABLE SERVICE BOXES (home #portal)
   Restores the in-place expand Céline asked for on 2026-07-30, and answers the one
   thing she repeated twice in that meeting: "the three colored boxes, I want them
   bigger… I want them bigger" — because these three are HER services, as opposed to
   the Centre Charles-Émile Claude collaborations. So the grid track floor goes
   190px -> 280px and the whole block is allowed more width than the old preview grid.
   Behaviour comes from the existing [data-readmore] handler in site.js; there is no
   new JS. The panel is a plain [hidden] block, so a collapsed box costs nothing and
   the content is still in the DOM for search engines.
   ============================================================ */
.portal-cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;max-width:1080px;}
.portal-card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-soft);transition:box-shadow .25s;text-align:left;}
.portal-card:hover{box-shadow:var(--shadow-md);}
.portal-card .preview-img{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--lavender-mist);}
.portal-card .preview-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}

/* v2.4.0 — PLACEHOLDER SLOT, temporary. Céline owes two wide photos for the Yoga and
   Méditation boxes. This keeps the 16/9 box so the strip's proportions are the real ones
   she is reviewing, while reading unmistakably as "not chosen yet" rather than as artwork.
   Deliberately NOT a stock photo and NOT a Centre group-class shot: this pass exists to take
   the Centre off the home page, so dressing the boxes in Centre photos would contradict it.
   REMOVE THIS BLOCK when her photos land and the span goes back to being a <picture>.
   The label is 13px — the house micro-label floor — not smaller. */
.portal-card .preview-img--placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(160deg,var(--lavender-mist) 0%,var(--cream) 100%);
  border-bottom:1px solid rgba(125,84,105,.14);
}
.portal-card .preview-img--placeholder svg{
  width:auto;height:34%;min-height:44px;
  fill:var(--purple-deep);opacity:.34;
}
.portal-card .preview-img--placeholder .ph-line,
.portal-card .preview-img--placeholder .ph-ring{
  fill:none;stroke:var(--purple-deep);stroke-width:2.5;stroke-linecap:round;
}
.portal-card .preview-img--placeholder .ph-ring--faint{opacity:.5;}
.portal-card .preview-img__label{
  font-family:var(--font-body);font-size:13px;font-weight:400;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--rose-ink);opacity:.85;
}

/* v2.4.0 — the read-more button used to sit between the h3 and this panel and carried the
   gap. The boxes are open by default now (her call, 2026-08-27: the copy is short enough
   that collapsing it "is dry"), so the panel supplies its own top spacing. */
.portal-panel{padding-top:4px;}

/* v2.4.0 — AUTRES SERVICES on /services/. Deliberately quieter than everything above it:
   smaller heading, muted ground, no eyebrow. The Centre is credited, not promoted. If this
   ever starts competing visually with her own offerings, it has drifted from the decision. */
.other-services{background:var(--cream);padding:44px 0 64px;}
.other-services h2{
  font-family:var(--font-display);font-size:clamp(24px,2.4vw,30px);font-weight:600;
  color:var(--purple-deep);margin:0 0 20px;text-align:center;
}
/* v2.4.0b — align-items:flex-start, not center. With two offerings the body column is taller
   than the photo, and centring left the photo floating in the middle of the text. */
.other-services__inner{
  display:flex;gap:26px;align-items:flex-start;
  max-width:820px;margin:0 auto;
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:0 6px 20px rgba(76,64,104,.08);
  padding:20px;
}
.other-services__media{flex:0 0 auto;width:clamp(140px,26%,240px);display:block;
  border-radius:var(--radius-sm);overflow:hidden;background:var(--lavender-mist);}
.other-services__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.other-services__body{flex:1 1 auto;min-width:0;}
.other-services__body p{color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0 0 10px;}

/* The two Centre offerings. Headings are small but still real headings — at 17px they sit at the
   body floor, not below it, which is the trap the v2.2.0 audit had to undo elsewhere (eyebrows at
   13px introducing 17px body text). */
.other-offering{margin:0 0 18px;}
.other-offering h3{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  color:var(--purple-deep);margin:0 0 6px;line-height:1.3;
}
.other-offering p{margin:0 0 6px;}
.other-offering__meta{
  display:block;font-family:var(--font-body);font-size:13px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--rose-ink);
}
.other-services__lead{margin-top:18px;padding-top:16px;border-top:1px solid var(--lavender-mist);}
.other-services__contact{font-weight:400;}
.other-services__contact a{color:var(--rose-ink);text-decoration:underline;}
.other-services__contact a:hover,.other-services__contact a:focus-visible{color:var(--purple-deep);}

@media (max-width:640px){
  /* Stacks and centres, matching how every other split on the site behaves on a phone:
     with no picture beside it, there is nothing for the text to rag against. */
  .other-services__inner{flex-direction:column;text-align:center;gap:18px;}
  .other-services__media{width:min(260px,70%);}
}
.portal-card:hover .preview-img img{transform:scale(1.04);}
.portal-card h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--purple-deep);
  padding:20px 22px 0;margin:0;text-align:center;}

/* The toggle is a real <button> (keyboard + screen-reader correct out of the box).
   aria-expanded is maintained by the shared handler. */
/* v2.2.0 — text colour --purple -> --purple-deep and .86rem -> .875rem (14px). --purple
   #8E7CB6 on white measures 3.69:1 and fails AA for normal text; --purple-deep #5C4A86 is
   7.45:1. The BORDER stays --purple: a 1px decorative rule has no contrast minimum to meet,
   and keeping it preserves the soft look. */
.portal-toggle{display:block;margin:14px auto 20px;padding:9px 20px;border:1px solid var(--purple);
  border-radius:999px;background:transparent;color:var(--purple-deep);font-family:var(--font-body);
  font-size:.875rem;font-weight:700;letter-spacing:.04em;cursor:pointer;
  transition:background .2s,color .2s;}
.portal-toggle:hover,.portal-toggle:focus-visible{background:var(--purple);color:#fff;}
.portal-toggle[aria-expanded="true"]{background:var(--purple);color:#fff;}

.portal-panel{padding:0 22px 24px;}
.portal-panel p{color:var(--ink-soft);font-size:.97rem;line-height:1.7;margin:0 0 12px;}
.portal-panel .service-meta{display:block;margin-bottom:12px;}
.portal-panel .service-private{margin:0;}
/* the Centre block, repeated under Yoga and Ateliers at her request */
.portal-centre{margin-top:16px;padding-top:14px;border-top:1px solid var(--lavender-mist);}
.portal-centre p{font-size:.9rem;margin:0 0 6px;}
.portal-centre p:last-child{margin-bottom:0;}
@media (prefers-reduced-motion:reduce){
  .portal-card,.portal-card .preview-img img{transition:none;}
}

/* Mon parcours — homepage teaser (portrait + short bio + CTA) */
.home-about{background:var(--white);}
/* v2.0.0 — .home-split is the Mon parcours layout, generalised so Témoignages and Blog
   render identically. .home-about-inner / .home-about-portrait are kept as aliases so the
   existing Mon parcours markup does not have to change, and so all three sections are
   guaranteed the SAME image box rather than three near-copies that drift apart.
   --reverse swaps the column order on desktop only; on mobile every section stacks
   media-then-text regardless, which keeps the reading order sane. */
/* minmax(0,1fr) not 1fr: a bare 1fr track floors at the items' min-content, so at 320px the
   Mon parcours CTA ("En savoir plus sur mon parcours") pushed its track to 260px while the
   shorter teaser CTAs left theirs at 217px — same rules, different image widths, and Mon
   parcours quietly overflowing its container. minmax(0,…) lets the track shrink, which both
   fixes that overflow and makes all three images genuinely identical at every width. */
/* v2.2.0 — max-width 960px -> 1200px. The 960 cap is what made the page "float in the
   middle of the monitor" for Celine: the hero column already caps at 1450px, so the body
   content stopping at 960 was the actual inconsistency she was pointing at. 1200 is the
   measured compromise — see the changelog for the widths considered. The 60ch cap on the
   paragraphs below is retained deliberately so the text does not become a wall. */
.home-about-inner,.home-split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;max-width:1200px;text-align:center;}
.home-about-portrait,.home-split-media{justify-self:center;width:100%;max-width:260px;}
/* height:auto is load-bearing — the holistic graphic carries width/height attributes (for
   CLS reservation), and without this the attribute height wins and aspect-ratio is ignored,
   rendering it 280x1024 instead of 280x350. aspect-ratio still prevents CLS on its own. */
.home-about-portrait img,.home-split-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:block;}
.home-split-text .section-eyebrow{display:block;margin-bottom:10px;}
.home-split-text .section-title{margin:8px 0 18px;}
/* v2.2.0 — 1.02rem (16.32px) -> 1.0625rem (exactly 17px); --ink-soft #6B6584 (5.50:1, AA)
   -> --ink #44415A (9.77:1, AAA). Mat's call 2026-08-19. Weight comes free from the global
   300 -> 400 above. Accepted trade: it flattens the primary/secondary text hierarchy. */
.home-split-text p{color:var(--ink);font-size:1.0625rem;line-height:1.75;margin:0 auto 26px;max-width:60ch;text-wrap:pretty;}
.home-split-text .btn{display:inline-block;}
.home-about-text .section-title{margin:8px 0 18px;}
.home-about-text p{color:var(--ink);font-size:1.0625rem;line-height:1.75;margin:0 auto 26px;max-width:60ch;text-wrap:pretty;} /* v2.2.0 — see .home-split-text p */
.home-about-text .btn{display:inline-block;}
@media(min-width:820px){
  /* v2.2.0, SECOND PASS — the media track is now exactly as wide as the image.
     History, because this moved twice in one version and the reasoning matters:
       v2.1.0    280px 1fr        — ~29% image / 71% text. Céline: image too small.
       v2.2.0 a  1fr 1fr          — a true 50/50, what she asked for. Overshot: the image
                                    filled its half at 552x690, measuring 2.64x the text
                                    area. Céline: "gone too far the other way."
       v2.2.0 b  <image> 1fr      — this. The image is capped at clamp(280px,34vw,420px) and
                                    the track is that same width, so the text takes whatever
                                    is left.
     WHY NOT KEEP 50/50 AND JUST CAP THE IMAGE: tried it and measured it. Once the image no
     longer fills its half, the leftover has to go somewhere. Centred in the track it left
     the photo 66px inside the page margin, agreeing with no other alignment on the page.
     Pushed to the outer edge it aligned properly but opened a 188px gutter between the photo
     and its own text, which reads as two unrelated blocks. Sizing the track to the image
     puts the image flush with the page margin AND holds the gutter at the intended 56px AND
     hands the spare width to the text column, which she also said was too small. One change,
     three complaints.
     WHAT THIS COSTS: the tracks are no longer literally 50/50, which was her word. At 1440
     it is 420 image / 684 text. The image is still 1.5x its v2.1.0 width, so the substance
     of her request — give the image real presence — holds. ⚠ Flagged for Mat: this is the
     one place in v2.2.0 that softens something she asked for by name.
     minmax(0,...) on the text track and NEVER a bare 1fr — see the note above the base rule:
     a bare 1fr floors at min-content and caused the v2.0.0 grid blowout at 320px. */
  .home-about-inner,.home-split{grid-template-columns:clamp(280px,34vw,420px) minmax(0,1fr);gap:56px;text-align:left;}
  .home-about-text p,.home-split-text p{margin-left:0;margin-right:0;}
  /* v2.2.0 — CAP THE IMAGE INSIDE ITS 50/50 COLUMN. Was max-width:none, so the image filled
     the whole track: 552px wide and, at the site-wide 4/5 box, 690px TALL. Measured
     image-area vs text-area at 1440 that is 2.64x on the Témoignages and Blog splits and
     1.92x on Mon parcours, against 0.6-0.9x on a phone. Céline, 2026-08-19: "the images are
     disproportionately large compared to the text now, we've gone too far the other way. It
     works on mobile but does not work on desktop."
     280px (v2.1.0) -> 552px (earlier in v2.2.0) overshot; 420px lands between the two and
     brings the worst ratio to ~1.4x. THE TRACKS STAY A TRUE 50/50 — that was her earlier
     request and it is not being undone. What changes is that the picture no longer has to
     fill its half; it is centred in it (justify-self:center, set on the base rule), so the
     slack reads as margin rather than as a shrunken column.
     This also covers her portrait on Mon parcours, which shares the rule — Mat expected her
     to ask for that one to come down too, so one number handles both.
     A FLAT 420px WAS NOT ENOUGH — it fixed 1440 and 1920 but left 1025 at a 2.03x ratio,
     because there the 50/50 track is only ~420px wide so the image still filled it while the
     text column had less room. The cap has to scale with the viewport the way the rest of the
     page does. clamp(280px,34vw,420px): 34vw is 279px at the 820px breakpoint, so it picks up
     exactly where the mobile 260px cap leaves off with no jump, reaches the 420px ceiling at
     ~1235px, and holds there. Measured ratios fall to 1.30 at 1025 and 1.53 at 1440/1920,
     against 0.62-0.93 on a phone.
     ⚠ 420px AND 34vw ARE THE NUMBERS TO TUNE BY EYE. The ratio maths only bounds the range. */
  .home-about-portrait,.home-split-media{max-width:clamp(280px,34vw,420px);
    /* v2.2.0 — justify-self:start, overriding the base rule's :center. Once the image no
       longer fills its 50/50 track (see the cap above), centring it inside that track left
       it floating 66px in from the container's left edge at 1440 — a THIRD vertical alignment
       on the page, agreeing with neither the nav/logo nor the body text beside it. Hugging
       the outer edge puts the image on the same left margin as everything else and moves the
       slack into the middle gutter, where it reads as breathing room instead of a misaligned
       photo. --reverse hugs the RIGHT edge for the same reason, since its media sits in
       column 2. Mobile keeps :center from the base rule: there the image is a centred block
       in a single-column stack, which is correct. */
    justify-self:start;}
  .home-split--reverse .home-split-media{justify-self:end;}
  /* media on the RIGHT: flip the track sizes and reorder, so the text column stays the
     flexible one. Source order is media-then-text, which is also the mobile stack order. */
  /* v2.2.0 — this hard-codes its own track sizes SEPARATELY from the rule above, so it has
     to be updated IN LOCKSTEP or the alternation silently breaks. Mirrored: the text track
     comes first here because the media sits in column 2 (see the grid-column swaps below). */
  .home-split--reverse{grid-template-columns:minmax(0,1fr) clamp(280px,34vw,420px);}
  .home-split--reverse .home-split-media{grid-column:2;grid-row:1;}
  .home-split--reverse .home-split-text{grid-column:1;grid-row:1;}
}

/* v1.8.1 - homepage Témoignages + Blog teasers: text-only centered blocks,
   same eyebrow/title/body/button language as home-about. --alt paints white
   so the teasers alternate against the transparent page gradient. */
/* v2.0.0 — these were written for the ORIGINAL text-only teasers and are all scoped
   :not(.home-split) now. Both teasers became two-column splits in v2.0.0, so without the
   guard these would win on source order (they sit below .home-split) and re-centre the
   text and cap the container at 760px, silently undoing the new layout. Kept rather than
   deleted so a future text-only teaser still gets the old treatment for free. */
.home-teaser{text-align:center;}
.home-teaser--alt{background:var(--white);}
.home-teaser .container:not(.home-split){max-width:760px;}
.home-teaser .container:not(.home-split) .section-eyebrow{display:block;margin-bottom:10px;}
.home-teaser .container:not(.home-split) .section-title{margin:0 0 18px;}
.home-teaser .container:not(.home-split) p{color:var(--ink);font-size:1.0625rem;line-height:1.75;margin:0 auto 28px;max-width:60ch;text-wrap:pretty;} /* v2.2.0 — dormant text-only-teaser fallback, moved with the live rules so it cannot drift */
.home-teaser .container:not(.home-split) .btn{display:inline-block;}
/* The split must re-assert alignment here: .home-teaser{text-align:center} sits BELOW the
   .home-split rules in this file, so on source order alone it would re-centre the desktop
   split. .home-teaser .home-split is (0,2,0) and wins outright. */
.home-teaser .home-split{text-align:center;}
@media(min-width:820px){
  .home-teaser .home-split{text-align:left;}
  /* v2.2.0 round 3 — THE TEXT NOW FOLLOWS ITS PICTURE. Céline: "the alignment on the home
     page previews needs to follow the pics ... testimonial preview needs right aligned, blog
     needs left aligned." Témoignages is the --reverse row, so its photo sits in column 2 on
     the right and its text should rag toward it. The other two rows keep left, which already
     matched their left-hand photos. Mobile is untouched and stays centred: below 820px every
     row is a single centred column, so there is no picture to align to. */
  .home-teaser .home-split--reverse{text-align:right;}
  .home-teaser .home-split--reverse .home-split-text p{margin-left:auto;margin-right:0;}
}

/* Read More toggle (Mon parcours formations) */
.readmore-panel{overflow:hidden;transition:max-height .5s ease;}
.readmore-panel[hidden]{display:block!important;max-height:0;}
.readmore-toggle{display:inline-block;margin:26px auto 0;cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--purple-deep);background:transparent;border:1.5px solid var(--purple);border-radius:50px;padding:10px 26px;transition:all .25s ease;}
.readmore-toggle:hover{background:var(--purple);color:#fff;}
.readmore-wrap{text-align:center;}

/* Service-page cards: photo header on each card, uniform 3:2 (v1.5) */
.service-card{padding:0!important;display:flex;flex-direction:column;}
.service-card .service-photo{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--lavender-mist);}
.service-card .service-photo img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}

/* v1.7.3 — click-to-fullscreen lightbox for the service photos (16:9 reads small on phones). */
#photo-lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(20,18,28,.93);cursor:zoom-out;}
#photo-lightbox.open{display:flex;}
#photo-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
#photo-lightbox .pl-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer;}
#photo-lightbox .pl-close:hover{background:rgba(255,255,255,.3);}
#photo-lightbox .pl-hint{display:none;position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:.85rem;padding:0 16px;}
@media (max-width:820px) and (orientation:portrait){#photo-lightbox .pl-hint{display:block;}}
.service-card .service-card-body{padding:32px 30px 34px;display:flex;flex-direction:column;flex:1;}
.service-card .service-card-body h3{margin-top:0;}
/* v2.4.0 — .svc-credit REMOVED. It styled the collaborator credit lines, which are now gone for
   good: she struck all three off her annotated slide 7 and Mat confirmed it 2026-08-27. The keys
   svc1.credit / svc2.credit went with them and no markup carries the class. See
   _build/DECISIONS.md, which keeps the two practitioners' names on the record. */
.svc-centre-line{max-width:760px;margin:0 auto 40px;text-align:center;font-size:.92rem;color:var(--ink-soft);line-height:1.6;}
.svc-centre-line a{color:var(--purple);font-weight:700;text-decoration:none;}
.svc-centre-line a:hover{text-decoration:underline;}
@media(min-width:901px){.services-grid{grid-template-columns:repeat(3,1fr);}}

/* Footer legal link + legal-page governing-law line (v1.5) */
.footer-bottom a{color:rgba(255,255,255,.72);text-decoration:none;}
.footer-bottom a:hover{color:#fff;text-decoration:underline;}
.legal-gov{margin-top:30px;padding-top:16px;border-top:1px solid rgba(107,70,193,.15);font-size:.9rem;color:var(--ink-soft);}


/* ============================================================
   v1.5.1 — POLISH PASS (overrides win by being last in the cascade)
   ============================================================ */

/* ---- GLOBAL: inner-page top spacing (clear the fixed nav, don't vertically
   center content), centered eyebrows, orphan-safe headings, smaller lang toggle ---- */
main > section:first-child:not(.hero-banner){
  min-height:auto !important;
  justify-content:flex-start !important;
  padding-top:calc(var(--header-h) + 72px) !important;
}
.legal-wrap{padding-top:0 !important;}   /* section now owns the top spacing */

.section-eyebrow{text-align:center;}
/* grid text-columns keep their own alignment (eyebrow follows the block) */
.about-body .section-eyebrow,
.home-about-text .section-eyebrow{text-align:inherit;}
/* v2.2.0 fix — .section-eyebrow carries a global text-align:center, and only .home-about-text
   had an inherit override. So Mon parcours' eyebrow followed its row while Temoignages' and
   Blog's stayed centred against right- and left-aligned text. Same override, applied to the
   split text column. */
.home-split-text .section-eyebrow{text-align:inherit;}

/* v2.2.0 — TIGHTENED THE DESKTOP-TO-MOBILE RATIO. Was clamp(28px,5vw,52px): 52/28 = 1.86x
   between a phone and a desktop, which is the "HUGE difference" Céline flagged on
   2026-08-19. Now 52/34 = 1.53x. The MOBILE FLOOR WENT UP (28 -> 34), the desktop cap is
   unchanged — deliberately, because she also said the text is too small next to the images,
   so the fix there belongs on the image side, not by shrinking headings. This floor now
   matches the base .section-title rule higher up the file (they disagreed before: 34 there,
   28 here, and this one won). */
.section-title{font-size:clamp(34px,4.6vw,52px);text-wrap:balance;}
/* v2.2.0 — text-wrap:balance on headings, text-wrap:pretty on body copy. This is the other
   half of Céline's narrow-phone note: it was not only the column width, it was WHERE the
   lines broke. Measured before: the Mon parcours paragraph set [15,10,1] words per line at
   1440 and [8,8,5,4,1] at 390 — a one-word orphan at both — and [5,7,5,4,3,2] at 320.
   text-wrap:pretty exists specifically to pull a word back from the last line to prevent
   orphans; text-wrap:balance evens a heading so it never drops a single word onto line two.
   Both are progressive enhancement: unsupported browsers just get the old greedy wrap, so
   there is nothing to fall back to and no layout risk. Chrome and Safari both support them
   today, which covers her iPhone. */

/* v2.2.0 — THE `about.title` OVERRIDE IS DELETED. It read:
       white-space:nowrap; font-size:clamp(15px,4.4vw,30px)!important;
   The intent was "always fits on ONE line, no orphan". The cost was indefensible: it
   rendered the Mon parcours heading at 15px on a 320px phone and 17.2px at 390 — SMALLER
   THAN THE 17px BODY TEXT UNDERNEATH IT — and 30px against 52px for the two sibling split
   headings on the same page. A section heading smaller than its own body copy is a
   hierarchy failure, and it is exactly the kind of thing behind "there's no way a legally
   blind person could read this text."
   It was also fragile: nowrap on a 45-character FR string ("Une rencontre entre la
   structure et l'intuition") inside a 232px column can only fit by shrinking without limit.
   The heading now wraps to two lines at the normal scale like its siblings. Two lines at
   34px beats one line at 15px, and the orphan the nowrap was avoiding is the far cheaper
   problem. DO NOT REINTRODUCE nowrap HERE — size-to-fit on a long translated string always
   loses to the longest translation. */

.lang-toggle{padding:3px!important;}
.lang-toggle a{padding:4px 9px!important;font-size:12px!important;} /* v2.2.0 — 11px -> 12px. The language toggle is a compact control, so it sits one step under the 13px label floor deliberately, but 11px was below anything defensible. */


/* ---- HOMEPAGE: Services eyebrow above the preview photos ---- */
.portal-head{text-align:center;margin-bottom:24px;}
.portal-head .section-eyebrow{margin-bottom:0;}

/* ---- MON PARCOURS: bio measure tightened, left-aligned; smaller on mobile ---- */
.about-body{max-width:640px;}
.about-body p{max-width:62ch;text-align:left;}
@media (max-width:700px){
  .about-body{max-width:none;}
  /* v2.2.0 — 15px -> 17px. A mobile query that SHRINKS body copy is backwards: the phone is
     where the screen is worst, and this was the main body text on /my-journey/ (8 paragraphs)
     losing 2px exactly where it mattered most. 17px matches the home-page body floor set
     earlier in v2.2.0, so body copy is now 17px on every page at every width. */
  .about-body p{font-size:17px;line-height:1.7;}
  .creds-intro{font-size:1.02rem;} /* v2.2.0 — .96rem (15.4px) -> 1.02rem (16.3px), matching its own desktop size. Mobile no longer shrinks it. */
}

/* ---- SERVICES: intro block reveals as one unit; keep it centered ---- */
.services-intro{text-align:center;margin-bottom:8px;}
.services-intro .services-header{margin:0 auto 26px;}
/* v1.9.3 — the caption block under the group-classes banner. The bottom padding matters:
   #approach starts immediately below with a hard colour change to the dark panel, and
   without it the caption sits right on that edge. */
.svc-banner-caption{max-width:820px;margin:18px auto 0;padding:0 24px 30px;text-align:center;}

/* ---- TESTIMONIALS: YEV-style full-width alternating rows
   (image one side + quote/attribution the other; mobile = image first) ---- */
.testi-grid{display:flex !important;flex-direction:column;gap:36px;max-width:1080px;margin:0 auto;grid-template-columns:none !important;}
.testi-card{display:flex;flex-direction:row;align-items:stretch;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid rgba(107,70,193,.08);overflow:hidden;}
.testi-card:nth-child(even){flex-direction:row-reverse;}
/* Container conforms to the picture's native ratio (2624x1632) so the whole image
   shows with no crop; card's overflow:hidden rounds the outer corners to match. */
.testi-card .testi-img{flex:0 0 44%;width:auto;aspect-ratio:auto;margin:clamp(16px,2.2vw,26px);border-radius:0;min-height:0;overflow:hidden;}
.testi-card .testi-img img{width:100%;height:100%;object-fit:cover;display:block;}
.testi-card .testi-body{flex:1 1 56%;padding:34px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0;}
.testi-card .testi-quote{font-size:1.12rem;}
.testi-card.pending .testi-body{min-height:0;}
@media (max-width:780px){
  .testi-grid{gap:26px;}
  .testi-card,.testi-card:nth-child(even){flex-direction:column;}
  .testi-card .testi-img{flex:none;width:100%;aspect-ratio:2624/1632;min-height:0;margin:0;border-radius:0;}
  .testi-card .testi-body{padding:24px 24px 28px;}
}

/* ---- CONTACT: white SVG icons in the rounded chips ---- */
.contact-detail-icon svg{width:20px;height:20px;display:block;}

/* ---- BLOG: intro + large embed frame with graceful fallback ---- */
.blog{background:linear-gradient(180deg,var(--lavender-mist) 0%,var(--cream) 100%);}
.blog-head{max-width:780px;margin:0 auto 34px;text-align:center;}
.blog-head .section-subtitle{margin:0 auto 10px;}
.blog-intro2{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:640px;margin:0 auto;}
.blog-embed-wrap{position:relative;max-width:1000px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;min-height:min(78vh,760px);}
/* v2.2.0 fix — taller. At min(80vh,780px) the embed cut off partway down the first post's
   image. 1180px shows the first post whole on a normal desktop; the vh term still keeps it
   from exceeding the viewport on short windows. */
.blog-frame{display:block;width:100%;height:min(94vh,1180px);border:0;background:#fff;}
.blog-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 28px;background:linear-gradient(160deg,var(--white),var(--lavender-mist));}
.blog-fallback[hidden]{display:none;}
.blog-fallback-inner{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.blog-fallback-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--purple),var(--blue-electric));}
.blog-fallback-mark svg{width:30px;height:30px;}
.blog-fallback h3{font-family:var(--font-display);font-size:1.7rem;color:var(--purple-deep);}
.blog-fallback p{color:var(--ink-soft);line-height:1.7;}
.blog-fallback .btn{margin-top:6px;}
@media (max-width:700px){
  .blog-embed-wrap{min-height:min(82vh,640px);border-radius:var(--radius-md);}
  .blog-frame{height:88vh;}
}

/* ---- FOOTER: one-line copyright + Légal (wraps to 2 max on mobile);
   keep the fixed corner buttons clear of it ---- */
.footer-bottom{display:flex !important;flex-direction:row !important;flex-wrap:wrap;
  justify-content:center;align-items:baseline;gap:4px 0;text-align:center;}
.footer-sep{margin:0 .3em;}
@media (max-width:600px){
  .footer{padding-bottom:92px !important;}   /* clear the fixed FAB + back-to-top */
}


/* ============================================================
   v1.6 — POLISH PASS (overrides win by being last in the cascade)
   ============================================================ */


/* ---- HOMEPAGE SERVICES INTRO (item 1): heading + 3 pillars above the cards ---- */
.portal-title{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4.5vw,44px);color:var(--ink);line-height:1.15;margin:8px 0 16px;}
.portal-pillars{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 26px;margin:0 auto 4px;max-width:660px;}
.portal-pillars span{position:relative;font-family:var(--font-body);font-size:.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--vert-sauge-deep);}
.portal-pillars span:not(:last-child)::after{content:"·";position:absolute;right:-15px;color:var(--magenta);font-weight:700;}

/* ---- TÉMOIGNAGES (item 6): watermark zoom-hack REMOVED (v1.7.1) — source images are now
   watermark-free (…-no-wm masters), so the full frame shows with no scale/crop. ---- */

/* ---- MON PARCOURS (item 4): "Photo par François" caption under the inner image ---- */
.about-photo-caption{margin-top:10px;text-align:center;font-size:.8rem;font-style:italic;color:var(--ink-soft);}
.about-photo-caption[hidden]{display:none;}

/* ---- FOOTER REDESIGN (item 3): compact, social icons + tagline (portrait/name removed) ---- */
.footer{padding:28px 24px 80px !important;}   /* shorter; bottom clears the fixed corner buttons */
.footer-inner{display:flex !important;flex-direction:column;align-items:center;gap:14px;grid-template-columns:none !important;max-width:640px;}
.footer-social{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;}
.footer-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background .2s,transform .2s;}
.footer-social a:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);color:#fff;}
.footer-social svg{width:19px;height:19px;}
/* v2.0.0 — "Approche holistique" graphic in the home Témoignages teaser.
   Square source (1024x1024, both languages), capped so it never dominates a teaser block
   that is otherwise type-only. width/height are on the <img> too, so the box is reserved
   before the file lands and the toggle cannot shift layout. */
/* (v2.0.0: .holistic-figure removed — the graphic moved into .home-split-media, which
   gives it the same box as every other home image. Nothing uses those rules now.) */

/* v2.2.0 — the signoff's effective-size block is DELETED along with the element itself.
   THE MEASUREMENT IS KEPT because .approach-signature still cites it and is still 38px:
   Mrs Saint Delafield is a formal copperplate whose hairlines go sub-pixel early. Rasterised
   at 20px only 2.8% of MSD's ink was solid (alpha>200) against 20.1% for Dancing Script at
   the same size, so it rendered as almost pure antialiased edge. Matching Dancing Script's
   presence needs ~38-40px. That is why .approach-signature is 38px and not 28px.
   The mobile problem this block existed to manage is now moot: 38px measured 446px wide and
   the 390px footer only gives 327px, so mobile had to drop to 26px and stayed ~2.7x thinner
   than the old Dancing Script with no size that fixed it. That accepted compromise retires
   with the element.
   MSD IS STILL SHIPPED AND STILL NEEDED — .approach-signature (services/index.html, the word
   "Céline") is now its ONLY job on the site. Worth Mat's call whether one word justifies an
   18.8KB face, but it is a live dependency today, not an orphan. See the changelog. */
.footer-bottom{margin-top:14px !important;}

/* ---- BOTTOM FIXED BUTTONS (item 5): symmetric + aligned across all breakpoints ----
   Root cause of the old misalignment: the two buttons used DIFFERENT resting transforms
   (fab translateY(20px) vs to-top translateY(12px)), so they never sat on the same line.
   Unify position, size, and transform state so they always match, left/right mirrored. */
.fab{left:auto !important;right:20px !important;bottom:20px !important;width:52px !important;height:52px !important;}
.to-top{left:20px !important;right:auto !important;bottom:20px !important;width:52px !important;height:52px !important;margin:0 !important;}
.fab, .to-top{transform:translateY(14px);}
.fab.visible, .to-top.visible{transform:translateY(0) !important;}
.fab:hover, .to-top:hover, .fab.visible:hover, .to-top.visible:hover{transform:translateY(-3px) scale(1.04) !important;}


/* ============================================================
   v1.6.2 — HOME-PAGE ROUND 2 (overrides win by being last)
   ============================================================ */


/* ---- ITEM 6: floating Contact + Back-to-top removed; footer no longer needs bottom clearance ---- */
.fab, .to-top{display:none !important;}
.footer{padding:28px 24px 28px !important;}
@media (max-width:600px){ .footer{padding-bottom:28px !important;} }

/* ---- ITEM 7: enlarge the nav crystal on desktop/laptop (mobile unchanged, --header-h token unchanged) ---- */
@media (min-width:1025px){
  .header{padding-top:14px !important;padding-bottom:14px !important;}
  .brand-logo img{width:auto !important;height:48px !important;}
}


/* ============================================================
   v1.6.3 — HOME-PAGE ROUND 3 (overrides win by being last)
   ============================================================ */


/* ---- ITEM 4: on the smaller/mobile breakpoint nudge the crystal down so it is optically
   centred with the name text (Cormorant caps sit high; align-items:center alone reads high).
   Large-screen alignment + size unchanged; --header-h unchanged. ---- */
@media (max-width:1024px){
  .brand-logo img{transform:translateY(2px);}
}

/* ============================================================
   v1.7.0 — SERVICES restructure: three stacked full-width detail sections.
   The former .services-grid (3-col) becomes a single-column stack so each service
   (#yoga/#ateliers/#reiki) is its own full-width section + deep-link anchor. Reuses
   the existing .service-card component and the same 28px gap the grid used — no new
   design-system, palette or font changes. scroll-margin-top clears the fixed nav so
   deep-linked titles land fully below the header (desktop + mobile).
   ============================================================ */
.services-stack{display:grid;grid-template-columns:1fr;gap:28px;}
#yoga,#ateliers,#reiki{scroll-margin-top:calc(var(--header-real, var(--header-h)) + 16px);}


/* ============================================================
   v1.7.5 — CC hotfix + UX polish (overrides win by being last)
   ============================================================ */

/* ---- H3: homepage service pillars stack vertically on tablet + mobile (<=1024),
   the middot separators hidden; desktop (>=1025) keeps the inline row + dots. ---- */
@media (max-width:1024px){
  .portal-pillars{flex-direction:column;}
  .portal-pillars span:not(:last-child)::after{display:none;}
}

/* ---- J1: Mon Parcours intro (#about, the FIRST content section) centres its text on
   tablet + mobile (<=1024) for a calmer read; the formations block + desktop unchanged.
   The id-scoped selector (specificity beats the base `.about-body p{text-align:left}`). ---- */
@media (max-width:1024px){
  #about .about-body,
  #about .about-body p{text-align:center;}
}

/* v1.9.3 — the T1 .page-cta-band modifier and its contrast note went with the band
   itself; see the .page-cta note further up this file. */


/* ============================================================
   v1.9.0 — POST-MEETING PASS (2026-07-30). Overrides win by being last.
   1. Services nav dropdown (hover on desktop, tap-to-expand on mobile)
   2. Homepage service boxes: bigger + more visual weight
   3. Mon parcours photo enlarged to balance the family paragraph
   4. Hero tagline/headline/buttons decoupled from the image (real HTML overlay)
   ============================================================ */

/* ---- 1a. ANCHORS the Services dropdown deep-links into. The approach + the two
   forfaits are merged back INTO /services/, so every dropdown item is an in-page
   jump that must clear the fixed header. ---- */
#approach,#offerings,#forfait1,#forfait2{scroll-margin-top:calc(var(--header-real, var(--header-h)) + 16px);}

/* ---- 1b. DROPDOWN — shared shell (both breakpoints).
   The parent stays a real link; a sibling chevron BUTTON owns the open/close so the
   control is keyboard-reachable and screen-reader-labelled without nesting
   interactives inside the <a>. ---- */
.nav-has-sub{position:relative;display:flex;align-items:center;gap:2px;}
.nav-sub-toggle{
  background:none;border:none;padding:5px;margin:0;cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  border-radius:50%;transition:color .25s ease,background .25s ease;}
.nav-sub-toggle svg{width:14px;height:14px;display:block;transition:transform .28s ease;}
.nav-sub-toggle:hover,.nav-sub-toggle:focus-visible{color:var(--purple);}
.nav-sub-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}
.nav-sub{list-style:none;margin:0;padding:0;}
.nav-sub a{text-decoration:none;transition:color .2s ease,background .2s ease;}
.nav-sub a::after{display:none !important;}   /* no sliding underline inside the panel */
.nav-has-sub.open > .nav-sub-toggle svg{transform:rotate(180deg);}

/* ---- 1c. DESKTOP (>=1025): floating panel, opens on hover / keyboard focus / click ---- */
@media (min-width:1025px){
  /* --nav-sub-drop = distance from the nav row's baseline down to where the panel
     hangs. The nav links sit vertically centred in a header row made taller by the
     48px brand crystal, so ~30px is what clears the header's bottom edge.
     ── TO TUNE (Mat): one value, here. */
  .nav-has-sub{--nav-sub-drop:30px;}
  .nav-sub{
    position:absolute;top:100%;left:50%;
    transform:translate(-50%,calc(var(--nav-sub-drop) - 12px));
    min-width:210px;padding:8px 0;
    background:#fff;border-radius:var(--radius-sm);
    border:1px solid rgba(107,70,193,.10);box-shadow:var(--shadow-md);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    z-index:1200;}
  /* invisible bridge: lets the pointer travel from the label down into the panel
     without crossing a dead gap that would snap it shut mid-move */
  .nav-has-sub::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:var(--nav-sub-drop);}
  .nav-has-sub:hover > .nav-sub,
  .nav-has-sub:focus-within > .nav-sub,
  .nav-has-sub.open > .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,var(--nav-sub-drop));}
  .nav-has-sub:hover > .nav-sub-toggle svg{transform:rotate(180deg);}
  .nav-sub a{
    display:block;padding:9px 20px;white-space:nowrap;
    color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;}
  .nav-sub a:hover,.nav-sub a:focus-visible{background:var(--lavender-mist);color:var(--purple-deep);}
}

/* ---- 1d. MOBILE / TABLET (<=1024, the hamburger drawer): tap the chevron to expand
   in place. Tapping "Services" itself still navigates, so the parent page is never
   trapped behind the submenu. ---- */
@media (max-width:1024px){
  .nav-menu{gap:26px;}                    /* was 40 — makes room for the expanded submenu */
  .nav-has-sub{
    display:grid;grid-template-columns:auto auto;
    justify-content:center;align-items:center;gap:0 12px;}
  .nav-has-sub > a{grid-column:1;}
  .nav-sub-toggle{
    grid-column:2;width:40px;height:40px;   /* >=40px tap target */
    background:rgba(142,124,182,.10);}
  .nav-sub-toggle svg{width:18px;height:18px;}
  .nav-sub{
    grid-column:1 / -1;display:block;text-align:center;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .32s ease,opacity .25s ease,margin-top .32s ease;}
  .nav-has-sub.open > .nav-sub{max-height:280px;opacity:1;margin-top:16px;}
  .nav-sub a{
    display:block;padding:11px 0;
    font-size:14px !important;font-weight:400;letter-spacing:.6px;text-transform:none;
    color:var(--ink-soft);}
  .nav-sub a:hover,.nav-sub a:focus-visible{color:var(--purple);}
}

/* ---- 2. HOMEPAGE SERVICE BOXES — bigger and heavier so they pull the eye.
   BEHAVIOUR IS UNCHANGED on purpose (Céline confirmed 2026-07-30): these stay the
   same deep-link cards they were, no accordion, no new page pattern. Size, radius,
   shadow, photo ratio, type scale and a per-box colour crown are the only changes. ---- */
.preview-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,2.4vw,32px);
  max-width:1160px;margin:0 auto 56px;}
.preview-card{
  position:relative;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(107,70,193,.07);
  transition:transform .28s ease,box-shadow .28s ease;}
.preview-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.preview-card .preview-img{aspect-ratio:4/3;}   /* was 16/9 — taller card, more presence */
.preview-card h3{
  padding:22px 22px 26px;
  font-size:clamp(1.28rem,1.9vw,1.62rem);
  line-height:1.25;}
/* colour crown — three brand hues, in card order
   (Reiki / Yoga / Ateliers). This is what makes them read as "the coloured boxes". */
.preview-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:2;}
.preview-grid > .preview-card:nth-child(1)::before{background:linear-gradient(90deg,var(--purple),var(--purple-deep));}
.preview-grid > .preview-card:nth-child(2)::before{background:linear-gradient(90deg,var(--vert-sauge-light),var(--vert-sauge-deep));}
.preview-grid > .preview-card:nth-child(3)::before{background:linear-gradient(90deg,var(--magenta),#A06C89);}
@media (max-width:700px){
  .preview-grid{gap:20px;margin-bottom:40px;}
  .preview-card h3{padding:18px 18px 22px;}
}

/* ---- 3. MON PARCOURS — the portrait column.
   v1.9.3 enlarged it to ~49% of the row to balance the longer bio. v2.3.0 takes that
   back: Céline, deck slide 3 comment, "smaller picture but bigger font??" and "you kept
   the small one on my iPhone and I prefer it". The phone she is referring to has always
   shown a compact image — below 901px this section is a single stacked column and none
   of the desktop sizing here has ever applied to it. So this is the desktop catching up
   to the mobile view she already likes, not a new treatment.
   The track is sized to the image the way the home splits are (v2.2.0), rather than as a
   fraction of the row: a fraction re-grows the photo on every wider screen, which is what
   put it back at ~561px at 1440 in the first place.
   ── TO TUNE (Mat): the 360px ceiling is the picture's size on desktop; 26vw is what gets
      it there. Both are eyeball numbers, not derived — move them freely. ---- */
/* v2.3.0 round 2 — NEWSPAPER WRAP. This is what "having text on the right and finishing at
   the bottom" meant: the text runs beside the photo and then carries on underneath it, the way
   an article wraps a picture. Two columns could never do that, which is why the first attempt
   at this — a square photo top-aligned in a grid track — left a tall void down the left side.
   The grid becomes a block and the photo becomes a float. The heading and the first paragraph
   sit beside it; from the second paragraph on, the text uses the full measure.
   THE MEASURE IS THE WHOLE TRADE-OFF HERE. A wrapped single column has two line lengths, one
   beside the picture and one below it, and the container has to serve both: 900px gives ~53
   characters beside the photo and ~96 below. Wider reads long underneath, narrower gets cramped
   alongside. 1180px (what this section used with two columns) would have run ~126 characters a
   line below the photo, which is why the container comes down here rather than staying put.
   ── TO TUNE (Mat): the 900px container sets the long lines, the 320px ceiling sets the short
      ones. They move against each other. */
@media (min-width:901px){
  #about .container{max-width:900px;}
  #about .about-grid{display:block;}
  #about .about-grid::after{content:"";display:block;clear:both;}
  #about .about-image-wrap{
    float:left;width:clamp(240px,24vw,320px);
    /* bottom margin is what stops the first full-width line from butting against the photo */
    margin:6px 40px 22px 0;}
  #about .about-body{max-width:none;}
  /* 62ch was sized for a fixed-width column. Under a float the beside-photo lines are already
     short and the below-photo lines are the container, so a per-paragraph cap here would only
     stop the full-width text from filling the measure the container just set. */
  #about .about-body p{max-width:none;}
  /* Wrapped text has to be left-aligned — the ragged edge is what makes the wrap read as a
     wrap. The <=1024px rule further up centres this section, which overlaps this breakpoint
     from 901 to 1024; centred text flowing around a float looks like a mistake, so it is
     overridden for the range where the float applies. Below 901px the photo stacks above the
     text and the centring stands, untouched. */
  #about .about-body,
  #about .about-body p{text-align:left;}
}

/* v2.3.0 — THE FULL-HEIGHT PORTRAIT STRETCH IS REMOVED. This block used to say
   align-items:stretch / height:100% / max-height:1150px, which scaled the photo's height to
   the bio column so the two finished together. It worked, and Céline does not want it:
   deck slide 3, "I prefer to go back to the original more square but with round corners,
   having text on the right and finishing at the bottom."
   "The original" is the base .about-image rule further up this file — a fixed box with
   --radius-lg and --shadow-lg. It is still there and now governs again; the only thing this
   block does is make it SQUARER than 4/5 and park it at the foot of the row.
   1/1 rather than 4/5 is a [PICK]: "more square" has no number in it. One line to change.
   "FINISHING AT THE BOTTOM" IS HANDLED BY THE FLOAT, not by an alignment. Two alignments were
   tried against the two-column grid first and both were wrong: `end` parked the photo at the
   foot of the row and left a ~1100px void beside the heading, `start` moved the same void to
   the bottom. The bio is roughly 2.5x the height of a square photo, so a fixed two-column row
   always has slack somewhere. The wrap removes it — see the newspaper-wrap block further down
   this file, which is where the layout actually lives now.
   object-position 50% 40%: the box is now WIDER than it is tall relative to the 1388x1600
   source, so cover crops VERTICALLY and the vertical anchor is live again (it was inert at
   the old proportions). 40% holds her face and the horizon; a centred crop sat too low.
   Scoped to min-width:901px ON PURPOSE: 900px is where .about-grid collapses to one column
   and the photo stacks above the text. That view is the one she said she prefers — it is
   untouched, here and everywhere else in this pass. */
/* v2.4.0 — SQUARE -> PORTRAIT, AND BIGGER. Supersedes the 1/1 [PICK] above, which was her
   deck slide 3 ask ("more square"). Seeing it built, she reversed on the call 2026-08-27:
   "you kept the small one on my iPhone and I prefer it ... On computer and iPad, now it's
   too small, can you ask to go for in between, medium size" [1:27:09], and when Mat asked
   rectangular or portrait: "Portrait, so you can take a bit more. Last time, it was taking
   too much." [1:29:03]

   MOBILE IS UNTOUCHED. This is scoped to min-width:901px, and below that the photo stacks
   above the text — the view she explicitly said she prefers as-is.

   THE SIZE IS A [PICK] AND SHE SHOULD REACT TO IT. Her reference was "about same size as the
   pictures in the Témoignages", which is ambiguous: the testimonial CARDS are far smaller
   (clamp(104px,30vw,190px)) and would be a reduction, not the increase she asked for. Read as
   the HOME PAGE Témoignages picture instead — the .home-split media track at
   clamp(280px,34vw,420px) — which is the only "Témoignages picture" that reads as medium.
   ⚠ THE BOTTOM EDGE DOES NOT REACH "SUR LE PLAN PERSONNEL", AND CHASING IT WAS ABANDONED
   DELIBERATELY. Mat asked whether the photo should "extend to the bottom of, say, le plan
   personnel, that paragraph" and she said "Right. That's what I meant." [1:29:21] It is a
   MOVING TARGET: this photo floats, so widening it narrows the column beside it, which makes
   the FIRST paragraph taller, which pushes "Sur le plan personnel" further down. Measured at
   1440 — 400px wide: photo ends y=648, paragraph starts y=717, gap 69. 470px wide: ends y=706,
   paragraph starts y=750, gap 44. The gap closes ~25px per 70px of width, so landing inside it
   needs roughly 590px — 41vw, with the text beside it squeezed under 530px. That is back in
   "taking too much" territory, which is the thing she rejected.
   It is also unstable on purpose: coupling a photo's size to paragraph flow means her next copy
   edit silently moves it, and her copy is still being rewritten.
   SO: clearly bigger and portrait (320x320 -> 470x588 at 1440, +47% wide, +84% tall), stopping
   just above that paragraph rather than inside it. Flagged for her to react to — if she wants
   it lower, it is one clamp value, and the trade above is the conversation to have. */
@media (min-width:901px){
  #about .about-image-wrap{width:clamp(260px,33vw,480px);}
  #about .about-image{aspect-ratio:4/5;height:auto;object-position:50% 35%;}
}



/* ============================================================================
   v1.9.1 — HERO GEOMETRY  (2026-08-01)  +  v1.9.2 — HERO OVERLAY  (2026-08-02)
   THE single authoritative block for hero banner sizing and the text overlay.
   The GEOMETRY half (banner, media, frame, image, height cap, --hero-img-vw,
   --hero-reserve) is v1.9.1 and settled five versions of CSS debt. v1.9.2 did
   not touch a line of it: measured at 1280/1440/1920/2560/390, the banner box
   is identical to v1.9.1. Only the OVERLAY half below changed, to match
   Celine's mockup (new-ppt-pics/image12.png).
   Everything from v1.3.0, v1.5.1, v1.6, v1.6.2, v1.6.3, v1.6.5 and v1.6.6 that
   used to govern #heroMedia / .hero-frame / .hero-banner-pic / .hero-banner-img
   has been DELETED, not out-cascaded. If you are changing hero sizing, change it
   here — there is nowhere else for it to be fighting you.

   THE RULE THIS PASS SETTLES
   Five prior rounds all failed trying to satisfy three constraints at once:
   full-bleed width, whole image visible uncropped, and fits the first screen.
   Those three are mathematically incompatible whenever the viewport ratio differs
   from the image ratio, which is always. "Uncropped" is the one that gets dropped:
   the banner now fills 100% width, is capped to the first screen, and object-fit
   cover takes the (small) difference. At the five tested desktop sizes the crop is
   0 to 101px off a 1441px-tall source, i.e. at most about 7%.

   HOW THE HEIGHT CAP WORKS (>=1025px)
     min(56.29vw, 100svh - header - reserve)
   - 56.29vw = the image's own height at full width (100 / 1.7765, the 2560x1441
     source ratio). Never taller than that, so the image is never upscaled.
   - the svh term keeps the banner, and therefore the CTAs inside it, on the first
     screen. --header-real is measured live by site.js.
   -- TO TUNE (Mat): --hero-reserve is the strip of page left visible under the
      banner (the wave divider peeking through as a scroll hint). Raise it to show
      more wave and crop more image; lower it for a taller banner.
   NOTE: if the hero artwork is ever replaced with a different aspect ratio, update
   --hero-img-vw to 100 / (width / height) of the new file.
   ============================================================================ */
:root{
  --hero-img-vw:56.29vw;   /* natural height at full width: 2560x1441 source */
  --hero-reserve:28px;     /* page left visible below the banner on the first screen */
}

/* --- structure: banner section, media box, frame ------------------------- */
.hero-banner{position:relative;width:100%;margin-top:var(--header-h);
  min-height:0 !important;padding:0 !important;display:block !important;}
/* neutralise the global "first section fills the viewport" rule */
main > section.hero-banner:first-child{min-height:0;padding-top:0;display:block;justify-content:initial;}

.hero-media{position:relative;width:100%;overflow:hidden;z-index:0;line-height:0;
  cursor:default;}
.hero-frame{position:relative;display:block;width:100%;line-height:0;}
.hero-banner-pic{display:block;width:100%;line-height:0;}

/* --- the image ----------------------------------------------------------- */
/* <1025px: natural flow, full width, no cap. The mobile banner is short enough
   that it already fits, and the overlay drops below it (see the 768px block). */
.hero-banner-img{display:block;width:100%;height:auto;object-fit:cover;
  object-position:50% 70%;}

/* >=1025px: full-bleed AND first-screen. object-position keeps the amethyst
   cluster (lower left) and the dock anchored; the crop is taken mostly off the
   empty sky at the top. */
@media (min-width:1025px){
  /* v2.2.0 — .hero-video dropped from this selector with the element itself. */
  .hero-banner-img{
    height:max(380px, min(var(--hero-img-vw),
      calc(100svh - var(--header-real,76px) - var(--hero-reserve)))) !important;
    width:100%;object-fit:cover;object-position:50% 70%;}
}

/* v2.2.0 — the .hero-video and .hero-play rule blocks are DELETED along with the elements.
   The .hero-media.playing state class went with them; nothing sets it any more. The hero is
   now exactly what Céline asked for: a still background with HTML copy over it, no video
   facade, no tap-to-play, no cursor:pointer on the banner. */

/* --- the overlay --------------------------------------------------------- */
/* Order (Celine's mockup): headline, flourish, signature, role, CTAs.
   Sits inside .hero-frame so its % coordinates track the visible image box.
   -- TO TUNE (Mat): these four variables are the whole control surface. */
.hero-overlay{
  --hero-ov-x:50%;        /* centre X, % of the image box */
  /* v2.2.0 — 11% -> 64%, AND the anchor moved from the top of the block to its BOTTOM
     (see transform below). Measured from assets/hero/hero-banner-desktop-1600.webp on
     2026-08-19: sampling the central 56% of the width — the exact band this overlay
     occupies — the far shore meets the lake at y=590 of 900, i.e. 65.6% of image height
     (row mean 149.85 at 64.44% -> 195.29 at 65.78%). 64% puts the CTA row just above that
     line with clearance, rather than straddling it. */
  --hero-ov-y:64%;        /* BOTTOM Y, % of the image box — see transform below */
  --hero-ov-w:56%;        /* text column width, % of the image box */
  /* v1.9.4 — .0265 -> .0611, DERIVED BY MEASUREMENT, not assumed.
     Her mockup's headline cap height is 65px on a 1672px-wide image = 3.95% of the image
     width, and that ratio is the thing being matched. Cormorant Garamond's cap height was
     measured on a canvas at the rendered size: 44px at 68px font = 0.647em. So the
     font-size fraction that yields a 0.0395 cap fraction is 0.0395 / 0.647 = 0.0611.
     Measured result: cap/frame = .0395 at 1280, .0400 at 1440, .0399 at 1920, .0397 at
     2560 — all inside the +-0.002 tolerance. */
  /* v2.2.0 — .0611 -> .0519, a 15% shrink. Mat on the 2026-08-19 call, Celine agreed
     immediately: "shrink it all, the whole thing down maybe by 10, 20% and center it over
     the water." 15% is the middle of the range she agreed to; she gave a range, not a
     number, so this is the one value in the hero meant to be settled by Mat's eye.
     THIS DELIBERATELY SUPERSEDES THE v1.9.4 CALIBRATION recorded in the comment above —
     her mockup's 3.95% cap-to-frame ratio is overridden by her direct instruction on
     2026-08-19. Do not "restore" .0611 as a regression. */
  --hero-ov-scale:.0519;  /* headline size as a fraction of the image width */
  /* v1.9.4 — 68px -> 156px. The v1.9.3 prompt said 68px was correct, and against the OLD
     scale it was; against the calibrated scale it binds at every desktop width and makes
     the target ratio unreachable (68px font = 44px cap = .0309 at 1440, not .0395).
     156px is exactly where 2560 lands at the calibrated scale, so 2560 and below run
     unclamped and proportional, and anything wider is still ceilinged. This is a
     deliberate deviation from that instruction; see the changelog. */
  /* v2.2.0 — 156px -> 133px. THIS MUST MOVE WITH --hero-ov-scale AND BY THE SAME FACTOR.
     156px is precisely where 2560px landed at the old calibrated scale, which is what let
     2560 and below run unclamped and proportional. Shrink the scale alone and that
     relationship breaks silently — the ceiling stops binding where it was designed to.
     .0611 x .85 = .0519 and 156 x .85 = 132.6 -> 133px, so the pair holds. */
  --hero-ov-max:133px;    /* ceiling on that scale, see note below */
  position:absolute;left:var(--hero-ov-x);
  /* v2.2.0 — ANCHORED TO THE MEASURED WATERLINE, not to a percentage.
     First half of this change: translateX(-50%) -> translate(-50%,-100%). Anchoring the
     BOTTOM is load-bearing and not cosmetic. With the old TOP anchor, shrinking the overlay
     pulled the buttons UP, away from the horizon — the exact opposite of what was asked for,
     so the shrink and the drop fought each other. Bottom-anchoring makes the block grow
     upward from a fixed line instead.
     Second half, after Céline reviewed it: the anchor is now --hero-wl, the waterline in px,
     published live by setHeroMetrics in site.js. A FIXED PERCENTAGE COULD NOT TRACK IT —
     the banner is object-fit:cover, so the waterline sits at 65.53% of the frame at 1440x900
     but 63.60% on a 3440x1440 ultrawide. Measured against the old fixed 64%, the CTA row was
     12.2px ABOVE the line at 1440 and 5.4px BELOW it at 3440. It drifted with aspect ratio.
     WHAT THE ANCHOR MEANS NOW: her role line ("Praticienne en soins énergétiques") sits
     --hero-wl-lift above the waterline, and the CTA row falls just below it, over the water.
     Her instruction, 2026-08-19: "lower the whole thing so the energy healing line is say 5
     or so pixel above the water horizon line".
     --hero-sub-gap is the CTA row's height plus its gap, measured by site.js. It CANNOT be
     an em value: the buttons run on their own clamp and do not scale with the overlay font
     (1.149em of it at 1440, 0.743em at 2560 — not a constant).
     SIDE EFFECT, GOOD: lowering the block also cured a top-clipping bug the bottom anchor
     had introduced. At a windowed 2560x1200 the headline was rendering at -25px, i.e. off
     the top of the banner — which is what she meant by "the words go right off the top".
     The percentage fallbacks keep this sane if site.js has not run yet. */
  --hero-wl-lift:5px;    /* how far her role line clears the waterline */
  top:calc(var(--hero-wl, var(--hero-ov-y)) - var(--hero-wl-lift) + var(--hero-sub-gap, 92px));
  transform:translate(-50%,-100%);
  /* v1.9.4 — 760px -> 1450px. The absolute cap is what breaks proportionality: the type
     and the column both scale with the frame, so a fixed pixel ceiling on one of them
     forces the headline to outgrow its own measure. At the calibrated scale the FR
     headline measures 771px at 1440 and 1378px at 2560, so 760 would have broken it to
     three lines. 1450 clears 2560 (56% of 2545 = 1425) and only binds above ~2590px.
     The <768px block below replaces this with width:auto, so mobile is unaffected. */
  width:min(var(--hero-ov-w),1450px);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,.9vw,14px);
  text-align:center;line-height:1.4;
  pointer-events:none;                 /* taps fall through to the banner ... */
  /* The type scales with the IMAGE width, but the column is capped at 760px, so an
     uncapped scale outgrows its own measure on very wide screens: at 2560 the FR
     headline broke to four lines. --hero-ov-max stops the growth at the point where
     the longest headline still sets two lines inside 760px. */
  font-size:clamp(12px,calc(var(--hero-frame-w,100vw) * var(--hero-ov-scale)),var(--hero-ov-max));}
.hero-overlay .btn{pointer-events:auto;}   /* ... except the buttons */

/* v1.9.5 — the v1.9.1 .hero-overlay::before cream halo is DELETED, not disabled. Mat could
   see its rectangular edges past the text. The copy now sits fully transparent over the
   banner, as in her mockup. The mobile display:none override went with it.
   The halo existed for legibility, so contrast was re-measured afterwards against the ACTUAL
   banner pixels behind each text element rather than against an assumed background — see the
   v1.9.5 changelog for the per-element ratios. */

/* --- headline: two lines, two colours (v1.9.2) --------------------------- */
/* Her mockup gives sentence 1 the forest green and sentence 2 the purple, each on
   its own line. The spans are display:block, so the break is explicit rather than
   guessed — which is why the old text-wrap:balance is gone, along with the 2560px
   four-line break it was there to paper over. */
.hero-overlay .hero-headline{
  margin:0;font-family:var(--hero-ov-font-display);font-weight:600;
  font-size:1em;line-height:1.16;
  text-shadow:0 1px 10px rgba(245,236,228,.9);}
.hero-overlay .hero-headline-1{display:block;color:var(--vert-foret);}
.hero-overlay .hero-headline-2{display:block;color:var(--purple-mockup);}

/* --- flourish: rule + dot, lotus, rule + dot (v1.9.2) -------------------- */
/* The rules flex to fill, so the whole ornament keeps the mockup's proportions
   (lotus ~9.5% of the total width) at any size. Dots are pseudo-elements on the
   OUTER end of each rule — no extra markup. */
/* v1.9.4 — every number here is measured off her flourish in image12.png rather than
   estimated. On the 1672px mockup: total width 694px, lotus 75x56px, gap between a rule
   end and the lotus 21px, end dot 11px across, rule 1.5px thick. Her headline cap is 65px
   and Cormorant's cap is .647em, so her headline em is ~100.5px and this element's em
   (half of that) is ~50.2px. Dividing through:
     width 694/50.2 = 13.8em · lotus 75/50.2 = 1.5em · gap 21/50.2 = .42em
     dot 11/50.2 = .22em · rule 1.5/50.2 = .03em
   The rule now scales with the type instead of sitting at a fixed 1px, with a 1px floor so
   it cannot vanish on small screens. */
.hero-flourish{display:flex;align-items:center;justify-content:center;gap:.42em;
  color:var(--purple-mockup);font-size:.5em;line-height:1;
  width:min(100%,13.8em);}
.flourish-rule{display:block;position:relative;flex:1 1 auto;
  height:max(1px,.03em);background:currentColor;opacity:.85;}
.hero-flourish > .flourish-rule:first-child::before,
.hero-flourish > .flourish-rule:last-child::after{
  content:"";position:absolute;top:50%;
  width:.22em;height:.22em;border-radius:50%;background:currentColor;}
.hero-flourish > .flourish-rule:first-child::before{left:0;transform:translateY(-50%);}
.hero-flourish > .flourish-rule:last-child::after{right:0;transform:translateY(-50%);}
/* v1.9.4 lotus viewBox is 128x98, so the box must hold that ratio or the glyph letterboxes.
   1.5em = her 75px lotus at this element's em; it was 2.5em, which made the lotus 18% of
   the ornament against her 11%. */
.flourish-lotus{width:1.5em;height:1.148em;flex:0 0 auto;}

/* v2.1.0 — THE SIGNATURE IS NOW AN IMAGE, not type.
   History, because it explains why the old numbers are gone: v1.9.4 derived font-size
   1.24em from her mockup (signature cap = 1.446x the headline cap) and picked Mrs Saint
   Delafield by ink-width-to-cap ratio. Céline then said, consistently and more than once,
   that it was TOO BIG and not bold enough, and on 2026-08-15 she supplied her own artwork.
   Artwork beats matching a face by measurement — there is nothing left to approximate.

   SIZING: --hero-sig-w is in em, so it rides the SAME overlay font-size scale as the
   headline, flourish and role line. That is what keeps the whole overlay locked together
   as the banner is capped. Change the ONE variable to resize; do not add rules elsewhere.
   Set to 4.9em, down from the 6.18em the type rendered at — a ~21% reduction, which is
   the "too big" correction. Tuned by measurement against % of frame width, not by eye.

   The drop-shadow is the same value as the text-shadow it replaces, so contrast against
   the busy part of the banner is unchanged. filter: drop-shadow follows the alpha channel,
   unlike box-shadow which would draw a rectangle.

   MRS SAINT DELAFIELD IS STILL LOADED, just not here — in v2.1.0 it carried the footer
   signoff and the approach signature; v2.2.0 removed the signoff, so the approach signature
   is its only remaining job. It is not ABOVE THE FOLD on the home page, which is why its
   preload was dropped from index.html in v2.1.0. */
.hero-signature{
  /* font-size:1em is LOAD-BEARING, do not delete it as redundant. This is an <h1>, and the
     browser's UA stylesheet gives h1 font-size:2em. The old rule set 1.24em explicitly so
     the default never showed; removing it silently handed every em below to a 2x base and
     rendered the signature at 59.9% of frame width instead of 30%. Pinning 1em makes
     --hero-sig-w mean what it says: a multiple of the OVERLAY's font size, same scale as
     the headline and role line. */
  font-size:1em;
  margin:0;line-height:0;padding:.06em .12em;}
.hero-signature img{
  display:block;margin:0 auto;
  width:var(--hero-sig-w,4.9em);height:auto;
  filter:drop-shadow(0 1px 10px rgba(245,236,228,.9));}

/* v1.9.4 — role line grown toward her mockup. Its cap height there is 18px on a 1672px
   image = 0.01077 of the image width; Lato's cap is .7165em, so the font-size fraction is
   0.01077 / .7165 = .01503, and the ceiling moves 13.5px -> 25px (where 1672px lands, the
   same width at which the headline hits its own ceiling). It was on .0092/13.5px and did
   not track the scale at all, so once the headline grew it would have looked stranded.
   NOTE: the CTA labels are on their own clamp in the .hero-overlay .btn rule below and
   deliberately still use .0092/14px — Mat has signed those off at the current size. The
   two only ever looked like one value; they are separate rules and changing this one does
   not drag the buttons with it. */
.hero-overlay .hero-subtitle{
  margin:0;font-family:var(--hero-ov-font-body);
  /* v2.4.0 push 9 — floor 10px -> 13px. The cross-device audit caught this rendering at
     11.9px on a 810px iPad, under the 13px absolute floor in CLAUDE.md. Desktop is unchanged:
     at 1440 the computed value is 21.6px and never touches the minimum. Only the tablet band,
     which nobody had measured, was falling through. */
  font-size:clamp(13px,calc(var(--hero-frame-w,100vw) * .01503),25px);
  font-weight:700;letter-spacing:.2em;line-height:1.4;
  text-transform:uppercase;color:var(--vert-foret);
  text-shadow:0 1px 10px rgba(245,236,228,.9);
  /* v2.3.0 — anchors the scrim below. No z-index here on purpose: .hero-subtitle must NOT
     become a stacking context, or the ::before's z-index:-1 would be trapped inside it and
     paint behind the paragraph's own background instead of behind the whole overlay. */
  position:relative;}

/* v2.3.0 — LOCALISED SCRIM BEHIND THE ROLE LINE. Céline, deck slide 1: "hard to read ... but
   I don't have a better idea! without disturbing the rest! Darker? It's the same on my iPad ...
   on mobile it's ok because it's under the picture."

   WHY NOT "DARKER", WHICH IS WHAT SHE ASKED FOR. Measured on the rendered banner, FR copy,
   with the glyphs blanked so only the backdrop is sampled — the box this line occupies is not
   one colour, it runs from the shaded forest hillside on the left to the lit lake in the
   middle:
       1440x900    L 0.075 - 0.777   worst 1.24:1   p05 2.09:1   mean 5.06:1
       1920x1080   L 0.078 - 0.806   worst 1.27:1   p05 2.15:1   mean 5.15:1
       3440x1440   L 0.195 - 0.861   worst 2.43:1   p05 3.54:1   mean 5.83:1
   The ink is --vert-foret #334436 (relative luminance 0.051), so contrast RISES with a
   lighter backdrop and needs L >= 0.401 to reach 4.5:1. A dark scrim — the closing band's
   answer — moves it the wrong way here, because that band sets WHITE text and this one sets
   dark green. Same technique, opposite polarity. Darkening the type itself cannot work
   either, and for the reason already on file: the backdrop varies ACROSS the line, so no
   single ink value fixes both ends of it.

   WHY NOT THE v1.9.1 CREAM HALO, WHICH WAS DELETED. That one was a rectangle and Mat could
   see its edges past the text. This feathers on BOTH axes independently: a vertical gradient
   for the top/bottom falloff, a horizontal mask for the sides. Independent axes are the whole
   point — a single radial ellipse cannot hold a flat core across a line this wide and still
   finish its fade inside its own box, so its corners either go weak or its edges show.

   SCOPE: this line only. Not the hero, not the headline, not the CTA row — those are filled
   pills whose contrast never depends on the photograph. Insets are in em, so the scrim rides
   the same frame-width scale as the type and tracks the FR and EN strings, which differ in
   length, without a second set of numbers.

   @supports guard: if masking is unavailable the rule drops entirely and the line renders
   exactly as it does today, rather than falling back to the hard-edged rectangle. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .hero-overlay .hero-subtitle::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    left:-4em;right:-4em;top:-1.15em;bottom:-1.15em;
    /* PEAK ALPHA, STEPPED UP BY MEASUREMENT, NOT CHOSEN. Worst-case contrast on the FR line,
       which is the binding case (EN is shorter and sits over lighter water):
           .45  3.27:1     .50  3.57:1     .55  3.85:1     .60  4.24:1
           .65  4.55:1  <- first step that clears AA at every width tested
           .70  4.93:1  <- shipped, one step of headroom
       Widths measured: 1025 / 1440 / 1600 / 1920 / 3440, both languages. At .70 the worst
       pixel under the line runs 4.93:1 (FR, 1025) to 6.81:1 (EN, 3440) and the mean sits
       around 7.6:1. Re-measure with sweep-hero.js if the banner artwork is ever replaced —
       these numbers belong to THIS photograph. */
    --hero-scrim-a:.70;
    background:linear-gradient(180deg,
      rgba(245,236,228,0) 0%,
      rgba(245,236,228,var(--hero-scrim-a)) 26%,
      rgba(245,236,228,var(--hero-scrim-a)) 74%,
      rgba(245,236,228,0) 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);}
}

/* --- CTAs: pills with an icon and a two-line label (v1.9.2) -------------- */
/* SCOPED TO .hero-overlay ON PURPOSE. The global .btn / .btn-primary /
   .btn-secondary rules near the top of this file dress the buttons on all eight
   pages and are deliberately untouched; everything below only reaches the two
   buttons inside the home hero. */
/* v1.9.5 — margin-top .45em -> .15em, which halves the role-line-to-CTA distance without
   touching the spacing between the other overlay children. That distance is the overlay's
   own `gap` PLUS this margin, so only this margin moves: at 1440 it was 12.96 + 39.18 =
   52.2px and is now 12.96 + 13.07 = 26.0px. The headline/flourish/signature/role gaps are
   still the overlay gap alone and are unchanged at 11.5 / 13 / 14 / 14px.
   The <768px block restores .45em — mobile spacing is handled separately. */
.hero-overlay .hero-cta-group{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:center;
  margin-top:.15em;gap:clamp(10px,1.2vw,20px);}
.hero-overlay .btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--hero-ov-font-body);
  /* v2.4.0 push 9 — floor 11px -> 13px, same audit finding: 11.0px on a 810px iPad.
     The .0092 ratio and the 14px ceiling are UNTOUCHED, so the desktop size Mat signed off
     (13.2px at 1440) is exactly as it was. This only lifts the tablet band off the floor. */
  font-size:clamp(13px,calc(var(--hero-frame-w,100vw) * .0092),14px);
  font-weight:700;letter-spacing:.09em;line-height:1.3;
  border:none;border-radius:999px;color:#fff;
  /* the global .btn sets text-wrap:nowrap; the label has to be free to break */
  text-wrap:wrap;white-space:normal;
  padding:clamp(10px,.95vw,14px) clamp(18px,1.9vw,30px);}
.hero-overlay .btn-primary{background:var(--btn-green);box-shadow:0 8px 24px rgba(51,68,54,.28);}
.hero-overlay .btn-secondary{background:var(--btn-purple);box-shadow:0 8px 24px rgba(76,64,104,.28);}
.hero-overlay .btn-primary:hover,.hero-overlay .btn-primary:focus-visible{
  background:#5E6857;color:#fff;transform:translateY(-2px);}
.hero-overlay .btn-secondary:hover,.hero-overlay .btn-secondary:focus-visible{
  background:#6B6086;color:#fff;transform:translateY(-2px);}
.hero-overlay .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* icon: the primary carries the bare lotus, unringed, exactly as her mockup shows; only
   the secondary's person glyph has a circle.
   v1.9.4 — the ring used to be a CSS border on this box with the glyph scaled to 70%
   inside it. It is now drawn INSIDE the SVG instead, so the ring, head and shoulders
   share one stroke weight and the shoulder arc can terminate on the ring. The border
   and the 70% inset are gone; do not reinstate them or the weights split again. */
.hero-btn-icon{flex:0 0 auto;display:grid;place-items:center;color:#fff;}
.hero-btn-icon svg{display:block;width:100%;height:100%;}
.hero-overlay .btn-primary .hero-btn-icon{width:2.7em;height:2.07em;}  /* 128x98 lotus */
.hero-btn-icon--ringed{width:2.5em;height:2.5em;}                      /* 100x100 person */

/* two-line label. The break is NOT hard-coded: each button gets a max-width wide
   enough for its own longest line and narrow enough that the next word cannot join
   it, so FR and EN each wrap at their own natural point.
     primary   8.2em  fits "MES SERVICES" / "DISCOVER MY", not the whole string
     secondary 6.4em  fits "PRENDRE" / "GET IN", not the whole string
   If the CTA copy ever changes, re-check both languages at 1440px. */
.hero-btn-label{display:block;text-align:left;text-transform:uppercase;}
.hero-overlay .btn-primary .hero-btn-label{max-width:8.2em;}
.hero-overlay .btn-secondary .hero-btn-label{max-width:6.4em;}

/* --- small screens ------------------------------------------------------- */
/* The mobile banner is ~244px tall at 390px wide: a headline, a signature and two
   buttons cannot sit legibly on top of that. Same HTML, same i18n, same CTAs;
   it just drops into normal flow directly beneath the banner instead. */
@media (max-width:600px){
  .hero-overlay{
    position:static;transform:none;
    width:auto;max-width:640px;margin:0 auto;
    /* v1.9.5 — bottom padding 2px -> 26px. At 2px the CTA buttons sat 1px off the wave
       divider below them, visibly glued to it. 26px puts the clearance at ~25px, in
       proportion to this block's own rhythm (22px top padding, 12px between children).
       Measured at 320 / 360 / 375 / 390 / 414 / 768. */
    padding:22px 20px 26px;gap:12px;
    font-size:16px;pointer-events:auto;}
  /* v1.9.5 — the .hero-overlay::before display:none override is gone with the rule itself. */
  /* v1.9.5 — item 1 halves this on desktop only; mobile keeps its own spacing. */
  .hero-overlay .hero-cta-group{margin-top:.45em;}
  .hero-overlay .hero-headline{font-size:clamp(1.5rem,6.2vw,2.05rem);}
  .hero-flourish{font-size:.85rem;}
  /* v1.9.4 — 2.6rem -> 1.82rem for the same reason as the desktop 1.55em -> 1.24em: the
     new script face has a much larger cap-height-to-em ratio, so the old value rendered
     the signature oversized against the mobile headline. 1.82rem restores her 1.446x
     signature-cap-to-headline-cap relationship here too. The rest of the mobile block is
     deliberately NOT re-proportioned to the mockup: at 390 the overlay is a different
     layout (normal flow under the banner) and its role line and flourish are tuned for
     legibility at that size, not for the desktop ratios. */
  /* v2.1.0 — mobile gets its own signature width. The overlay font-size is pinned at this
     breakpoint rather than scaling, so an em value here would not track the frame. */
  .hero-signature img{width:var(--hero-sig-w-sm,7.6rem);}
  .hero-overlay .hero-subtitle{font-size:.8125rem;} /* v2.2.0 — .72rem (11.5px) -> .8125rem (13px). This is her PROFESSIONAL TITLE on the hero and it was the second-smallest text on the site. */
  /* v2.3.0 — NO SCRIM ON MOBILE. Below 768px the overlay leaves the photograph entirely and
     drops into normal flow underneath it, so the role line is already dark green on cream and
     measures 8.91:1 with nothing behind it. Céline said so herself: "on mobile it's ok because
     it's under the picture." Painting a cream scrim on a cream page would be invisible at best
     and a faint band at worst, and this is the one view she is happy with. */
  .hero-overlay .hero-subtitle::before{display:none;}
  /* The two CTAs side by side measure ~392px, which does not fit a 390px phone once
     the overlay's own padding is taken off. width:100% is the load-bearing half of
     this rule: the overlay is a centred column, so without it the CTA row sizes to
     max-content, silently overflows its parent, and flex-wrap never fires because
     the row's own line box is wide enough. Pinning it to the container width makes
     the buttons stack instead of running off the screen — which also keeps the hero
     safe if the button copy gets any longer. body{overflow-x:hidden} was hiding the
     damage from scrollWidth checks, so this only showed up in a real screenshot. */
  .hero-overlay .hero-cta-group{flex-wrap:wrap;width:100%;}
  .hero-overlay .btn{font-size:13px;padding:11px 20px;} /* v2.2.0 — 12px -> 13px, the two hero CTAs on mobile */
}


/* =====================================================================
   v2.4.0 PUSH 2 — the 2026-09-03 meeting with Céline.
   Timestamps refer to https://fathom.video/calls/808423425
   ===================================================================== */

/* ---- A. GHOST BUTTONS ------------------------------------------------
   She showed Mat an example site using them and named them herself: "they call
   those ghost boxes, I think" [1:13:02]. Two variants, and the colour carries
   meaning site-wide, locked at [1:22:25]: GREEN means services, PURPLE means
   contact. Anything referring to a service is green from here on.

   ⚠ THE RESTING COLOUR IS NOT --btn-green / --btn-purple, ON PURPOSE.
   Those two tokens are FILLS, measured against a WHITE label (4.64:1 / 4.60:1).
   Used as text on the card they invert to 4.28:1 and 4.09:1, and a 14px bold
   uppercase label is not WCAG "large text" — so both would fail AA. The resting
   border and label therefore use the text-safe pair, --vert-foret (8.9:1) and
   --purple-deep (~7:1), and the hover state fills with her actual button colours
   and flips the label white, which is the pairing those tokens were measured for.
   She asked for "the same green as the other buttons" [1:10:29]; this is that
   green on hover, and a passing shade of it at rest. */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:transparent;border:1.2px solid currentColor;border-radius:999px;
  font-family:var(--font-body);font-size:14px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.3;
  /* v2.4.0 push 3 — 11px 22px -> 9px 18px and the border 1.5px -> 1.2px, on her
     note "smaller, la proportion entre la grosseur des mots et les boutons est off!"
     (deck slide 4, 2026-09-06, written after seeing push 2 live).
     The LABEL stays at 14px: that is the button floor in CLAUDE.md, and she is
     describing proportion rather than legibility. Shrinking the box closes the gap
     she is pointing at; shrinking the words would break a rule she did not ask us
     to break. Same call she and Mat made for the hero buttons — "the padding, not
     the words" [57:12]. */
  padding:9px 18px;text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .25s ease;}
.btn-ghost--contact{color:var(--purple-deep);}
.btn-ghost--more{color:var(--vert-foret);}
.btn-ghost--contact:hover,.btn-ghost--contact:focus-visible{
  background:var(--btn-purple);border-color:var(--btn-purple);color:#fff;transform:translateY(-2px);}
.btn-ghost--more:hover,.btn-ghost--more:focus-visible{
  background:var(--btn-green);border-color:var(--btn-green);color:#fff;transform:translateY(-2px);}
.btn-ghost:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}

/* the buttons are centred in the card, the value paragraph sits between them */
.portal-cta{display:flex;justify-content:center;margin:0;}
.portal-lead{
  color:var(--ink-soft);font-size:.94rem;line-height:1.65;
  /* v2.4.0 push 3 — top margin 16px -> 26px. Her words: "more space between button
     and Découvrez…". The gap she is looking at is this margin plus nothing else;
     the button sits in a flex row with no margin of its own. */
  margin:26px 0 14px;text-align:center;}
/* .portal-panel p carries margin-bottom 12px; the format line needs a little more
   air above the first button than it had above the old text link */
.portal-panel .service-meta{margin-bottom:16px;}

/* ---- B. iPAD: THREE BOXES SIDE BY SIDE ------------------------------
   Hers is an iPad 9th gen, 810px wide in portrait (she put the model in the deck
   at Mat's request [51:50]). The grid was auto-fit/minmax(280px), which yields two
   columns and a stranded third at that width. She asked for three across in BOTH
   orientations and accepted that they get smaller: "But they will be smaller, I
   guess" [1:07:46]. Below 768 they stack, which is what she wants on the phone. */
@media (min-width:768px) and (orientation:landscape){
  .portal-cards{grid-template-columns:repeat(3,1fr);}
}

/* ---- C. MOBILE HEADER ------------------------------------------------
   Three separate complaints in one breath [42:26]-[43:00]: "your name is still too
   close to the button. The language buttons are still too big. Your hamburger icon
   is ... right up against the edge. There should be padding just like your crystal
   on the left. It should be spaced about the same."

   The root cause of the crowding is that .header-inner sat on 16px while every
   other section sits on --container-pad (20px), so the header alone ran wider than
   the page. Aligning it fixes the hero-width item as a side effect: the hero
   overlay already uses 20px, so the two now share one margin. */
.header-inner{
  padding-left:var(--container-pad)!important;
  padding-right:var(--container-pad)!important;}
/* the hamburger keeps its 8px padding for the tap target, but is pulled right by
   that same 8px so the BARS land on 20px — the crystal's exact left margin */
@media (max-width:1024px){
  .hamburger{margin-right:-8px;}
  .brand-name{font-size:25px;}          /* was 22px — "way too small compared to the title" */
  .lang-toggle{padding:2px!important;}
  .lang-toggle a{padding:3px 7px!important;}  /* smaller BOX only; 12px type is the
                                                one documented sub-13px exception and
                                                is deliberately left alone */
}

/* ---- D. HERO ON MOBILE ----------------------------------------------
   "it's almost like it wants to be a certain width here. All the elements, your
   signature, the line, the buttons, it's almost like it wants to be all one width"
   [53:03]. The ruler she and Mat agreed on is the nav row: the C of Céline on the
   left, the edge of the language button on the right [55:08]. */
@media (max-width:600px){
  /* the signature was 7.6rem (~122px) inside a ~350px column — the element that
     made the block look narrow. Widened to reach the same gutter as everything
     else, capped so it can never outrun its own artwork. */
  /* NOT a percentage: .hero-overlay is a centred flex column, so the <h1> wrapper is
     shrink-to-fit and a % here resolves against the image's own intrinsic width - the
     rule silently collapsed to 130px. An explicit length breaks the circularity.
     17rem = 272px of the 350px column at 390px wide. */
  .hero-signature img{width:17rem;max-width:100%;}
  /* "cultivez votre énergie, transformez votre vie, it could be a bit bigger"
     [54:45] — and "just a little bit, not too much" [55:33]. */
  .hero-overlay .hero-headline{font-size:clamp(1.65rem,7vw,2.35rem);}

  /* THE TWO CTAs GO SIDE BY SIDE. They stacked because the pair measured ~392px
     against a 390px iPhone 13 and flex-wrap fired.
     The obvious fix is a smaller label, and it is not available: 13px is the floor
     in CLAUDE.md and this text is already sitting on it. So the LOTUS AND PERSON
     ICONS COME OFF below 768px instead, which frees ~42px a button — enough for the
     pair to sit side by side at 390px with the label untouched.
     ⚠ Flag the missing icons to Céline. She asked for side-by-side buttons and
     accepted smaller text to get it; she did not ask to lose the icons, and this is
     the trade that keeps the type legible. Easy to reverse if she prefers. */
  .hero-overlay .hero-cta-group{flex-wrap:nowrap;width:100%;gap:10px;}
  .hero-overlay .btn{
    padding:11px 14px;flex:1 1 0;min-width:0;justify-content:center;gap:0;}
  .hero-overlay .hero-btn-icon{display:none;}
  .hero-btn-label{text-align:center;}
  .hero-overlay .btn-primary .hero-btn-label,
  .hero-overlay .btn-secondary .hero-btn-label{max-width:none;}
}

/* ---- F. THE NESTED "AUTRES SERVICES" SUBMENU ------------------------
   New level under Services, agreed at [1:02:12] on the understanding that they
   would look at it and judge: "Let's try it. If it's too long, we change it later"
   [1:04:32].

   DESKTOP: the parent dropdown is an absolutely positioned panel, and a flyout off
   the side of it is fragile on hover and worse on a trackpad. The two children are
   simply shown indented inside the panel instead, always open, chevron hidden.
   MOBILE: the drawer already expands in place, so the chevron stays and the child
   list expands like any other — one more tap, no new interaction to learn. */
.nav-sub--deep{list-style:none;margin:0;padding:0;}
@media (min-width:1025px){
  .nav-sub .nav-has-sub--deep{display:block;position:static;}
  .nav-sub .nav-sub-toggle{display:none;}
  .nav-sub--deep{max-height:none;opacity:1;visibility:visible;overflow:visible;
    transform:none;margin:2px 0 4px;}
  .nav-sub--deep a{padding-left:30px!important;font-size:13.5px;opacity:.9;}
}
@media (max-width:1024px){
  /* the parent panel has to be tall enough to hold an opened child list */
  .nav-has-sub.open > .nav-sub{max-height:520px;}
  .nav-sub .nav-has-sub--deep{
    display:grid;grid-template-columns:auto auto;justify-content:center;
    align-items:center;gap:0 10px;}
  .nav-sub .nav-sub-toggle{width:34px;height:34px;}
  .nav-sub .nav-sub-toggle svg{width:15px;height:15px;}
  .nav-sub--deep{grid-column:1 / -1;max-height:0;opacity:0;overflow:hidden;
    transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease;}
  .nav-has-sub--deep.open > .nav-sub--deep{max-height:200px;opacity:1;margin-top:8px;}
  .nav-sub--deep a{font-size:13.5px!important;opacity:.9;padding:9px 0!important;}
}


/* ---- v2.4.0 PUSH 3 — HER SLIDE 5: the two practice explainers -------------
   Two columns on desktop, stacked on mobile, matching how her slide is laid out.
   Plain prose deliberately — see the markup comment for why these are not cards. */
.practices{background:var(--cream);}
.practice-grid{display:grid;grid-template-columns:1fr;gap:44px;max-width:1080px;margin:0 auto;}
@media (min-width:900px){ .practice-grid{grid-template-columns:1fr 1fr;gap:56px;} }
.practice h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(24px,2.6vw,32px);line-height:1.25;
  color:var(--purple-deep);margin:0 0 18px;}
.practice p{color:var(--ink-soft);font-size:1rem;line-height:1.75;margin:0 0 16px;}
.practice-lt{color:var(--ink);font-weight:700;margin-bottom:10px !important;}
.practice-list{list-style:none;margin:0 0 20px;padding:0;}
.practice-list li{
  position:relative;padding-left:22px;margin:9px 0;
  color:var(--ink);line-height:1.6;font-size:.98rem;}
.practice-list li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--blue-electric));}
.practice .btn-ghost{margin-top:6px;}

/* the new anchors need the same header offset every other anchor on the site has */
#yoga-prive,#meditation,#pratiques{scroll-margin-top:calc(var(--header-real, var(--header-h)) + 16px);}


/* ---- v2.4.0 PUSH 3 — THE THREE BOXES LINE UP ROW BY ROW ------------------
   ⚠ WHY THIS EXISTS, because a measurement said it was already fine and it was not.
   Push 2 verified "card height spread 0px" and called the boxes level. That measured
   the CARDS, which stretch to match, and said nothing about their CONTENTS. On screen
   at 1440 the three CONTACTEZ-MOI buttons sat on three different lines, and so did the
   three EN SAVOIR PLUS buttons — because each card's paragraph wraps to a different
   number of lines and everything below it shifts.

   That is the single thing Céline keeps returning to. [1:10:29]: "So the three of them
   will have Contactez-moi on the same line." [1:08:17]: "each of the paragraphs are
   equals". She has been trying to solve it by hand-counting words in her deck — she
   told Mat she was matching them to 32 words each [1:43:10] — and Mat told her not to
   bother because font rendering makes that unreliable across devices [1:23:41]. He was
   right, and this is the actual fix: let the grid align the rows instead.

   Subgrid makes every card share ONE set of row tracks, so image, title, body, format
   line, contact button, value paragraph and learn-more button each get a row whose
   height is the tallest of the three. The buttons then land on the same line no matter
   how her copy wraps — and she can rewrite her paragraphs freely without breaking it.

   Seven rows: preview-img, h3, then the panel's five.
   Row gap goes to 0 because these tracks are INSIDE the cards; the 26px is column-only.
   Scoped to >=768px, which is exactly where the cards sit side by side. Below that they
   stack and there is nothing to align. */
@supports (grid-template-rows: subgrid) {
  @media (min-width:768px) and (orientation:landscape){
    .portal-cards{
      grid-template-rows:repeat(7,auto);
      column-gap:26px;row-gap:0;}
    .portal-card{
      display:grid;grid-template-rows:subgrid;grid-row:span 7;}
    .portal-panel{
      display:grid;grid-template-rows:subgrid;grid-row:span 5;}
    /* the panel's children carry their own vertical rhythm as margins; with the rows
       now shared, a margin that only exists on one card would desync the next row, so
       the spacing is stated once here for all three. */
    .portal-panel > p:first-child{margin-bottom:0;align-self:start;}
    .portal-panel .service-meta{margin:14px 0 0;align-self:start;}
    .portal-panel .portal-cta{align-self:center;padding:16px 0 0;}
    .portal-lead{margin:26px 0 0 !important;align-self:start;}
  }
}

/* Fallback for a browser without subgrid: at least push the two buttons to a common
   bottom edge rather than letting them float mid-card. Not as good — the middle rows
   still drift — but it never looks broken. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width:768px) and (orientation:landscape){
    .portal-panel{display:flex;flex-direction:column;height:100%;}
    .portal-panel > p:first-child{flex:1 1 auto;}
  }
}


/* ---- v2.4.0 PUSH 4 — THE TWO FORFAITS, RESTYLED --------------------------
   Brief and quotes are in the markup comment on /services/. Three moves:

   1. SIDE BY SIDE from 900px. Her explicit ask, twice [1:53:41] [1:57:30]. The container
      was capped at 820px for a single column; it opens to 1080 so two fit.
   2. A TINTED HEAD carrying her lotus. This is the "life" she said was missing. The drawing
      is the SAME path data as the hero flourish, not a new ornament — the point is that the
      card looks like it belongs to her site rather than to a template, which is what "very
      clearly AI" was describing.
   3. THE PRICES GET THEIR OWN PANEL. They were two ordinary lines inside a wall of body copy;
      for a page whose job is to sell two things, the numbers should be findable. Her words are
      unchanged, only their frame.

   The cards stretch to equal height and the button is pinned to the bottom of each, so the
   two CTAs land on one line the way the homepage boxes now do. The middle is deliberately NOT
   forced into alignment: forfait 2 legitimately carries three extra steps and a sixth bullet,
   and squeezing that into forfait 1's shape would either pad one or crush the other. */
.services .offerings{
  max-width:1080px;display:grid;grid-template-columns:1fr;gap:30px;
  margin:0 auto;padding:10px 0 0;}
/* 768, not 900: her iPad is 810px in portrait and she asked for these side by side "when I
   look at my iPad or my computer" [1:57:30]. Same breakpoint the homepage boxes use, for the
   same reason — 900 would have left her main review device stacked. */
@media (min-width:768px) and (orientation:landscape){ .services .offerings{grid-template-columns:1fr 1fr;gap:30px;} }

.services .offering{
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:0;margin-bottom:0;overflow:hidden;text-align:left;}

.offering-head{
  padding:30px 34px 26px;text-align:center;
  border-bottom:1px solid rgba(92,74,134,.10);}
/* the two are tinted differently so they read as two offerings rather than one repeated
   card. Both stay in the amethyst family on purpose: green/purple carries a fixed meaning
   on this site now (services / contact, locked [1:22:25]) and must not be spent on decoration. */
.offering--single .offering-head{
  background:linear-gradient(180deg,var(--starlight) 0%,var(--white) 100%);}
.offering--journey .offering-head{
  background:linear-gradient(180deg,var(--lavender-mist) 0%,var(--white) 100%);}

.off-lotus{
  display:block;width:46px;height:35.2px;margin:0 auto 12px;
  color:var(--purple);opacity:.85;}
.offering-head .o-sub{margin-bottom:8px;}
.offering-head h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(23px,2.3vw,30px);line-height:1.25;
  color:var(--purple-deep);margin:0;}

.offering-body{padding:26px 34px 8px;flex:1 1 auto;}
.offering-body > p:first-child{margin-top:0;}

/* prices lifted out of the body copy */
.o-pricebox{
  margin:22px 0 4px;padding:16px 18px;
  background:var(--cream);border-radius:var(--radius-md);
  border:1px solid rgba(92,74,134,.10);}
.o-pricebox .o-price{margin:4px 0;}
.o-pricebox .o-priceintro{
  margin:0 0 8px;font-size:.95rem;color:var(--ink-soft);}

.offering-foot{padding:18px 34px 30px;margin-top:auto;}
.offering-foot .btn-ghost{width:100%;}

/* the old single-column rules are superseded above; the underlined text link is replaced by
   a ghost button, so .offer-link is now unused on this page. Left in base.css rather than
   deleted in case she wants the quieter treatment back after seeing this. */


/* ---- PUSH 4, second pass — fixing what the first pass produced ------------
   Screenshot at 1280 showed two faults the markup could not predict:

   1. ~700px OF DEAD WHITE in forfait 1. Stretching both cards to equal height only works when
      the two carry comparable content, and they do not: forfait 2 has a three-session
      breakdown and a sixth bullet that forfait 1 has no equivalent for. Equal height turned
      that difference into a void with a button stranded at the bottom.
      So these cards do NOT stretch. Each sizes to its own content. The homepage boxes get the
      opposite treatment on purpose — there the three ARE parallel, and she asked for those to
      line up. Here they are two different-sized offerings and pretending otherwise looks worse
      than admitting it.

   2. PRICES IN OLD-STYLE FIGURES. .o-price inherited the display serif, whose numerals are
      text figures - '80 $ / 1 h' rendered with descending 8s and 3s and read as decoration
      rather than as a number. Prices are the one thing on this page a visitor scans for.
      Moved to the body face at 700, lining figures, one step up in size. */

@media (min-width:768px) and (orientation:landscape){ .services .offerings{align-items:start;} }
.services .offering{height:auto;}
.offering-foot{padding:18px 34px 30px;margin-top:0;}
.offering-foot .btn-ghost{width:auto;min-width:min(100%,260px);}
.o-pricebox .o-price{
  font-family:var(--font-body);font-weight:700;
  font-size:1.05rem;letter-spacing:.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--purple-deep);margin:6px 0;}
.o-pricebox .o-priceintro{font-family:var(--font-body);font-weight:400;}


/* ---- v2.4.0 PUSH 5 — THE BLOG MOSAIC ------------------------------------
   /blog/ renders her Blogger posts as cards in her own type and colour instead of framing
   Blogger. See the markup comment on that page for why the iframe went, and shared/blog.js
   for the JSONP trade-off.

   Mosaic rather than a plain row: one column on a phone, two from 700, three from 1080, with
   the cards sized by content. She has two posts today and will have more; the grid reads
   correctly at 1, 2, 3 or 12 without a special case. */
.blog-grid{
  display:grid;grid-template-columns:1fr;gap:26px;
  max-width:1100px;margin:0 auto;}
/* auto-fit with a CAPPED column width and a centred track, not repeat(3,1fr). She has two
   posts today, and a fixed three-column grid left a dead third column that read as broken
   layout rather than as a short blog. This fits as many 280-360px cards as the width allows
   and centres whatever is left over, so 1, 2, 3 or 12 posts all look deliberate. */
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(auto-fit,minmax(280px,360px));justify-content:center;gap:28px;}
}

.blog-card{
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

.blog-card__media{display:block;line-height:0;background:var(--lavender-mist);}
.blog-card__media img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}

.blog-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto;}

.blog-card__date{
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rose-ink);margin-bottom:10px;}

.blog-card__title{
  font-family:var(--font-display);font-weight:500;
  font-size:1.4rem;line-height:1.3;margin:0 0 12px;}
.blog-card__title a{
  color:var(--purple-deep);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .28s ease;}
.blog-card__title a:hover,.blog-card__title a:focus-visible{background-size:100% 1px;}

.blog-card__excerpt{
  color:var(--ink-soft);font-size:.97rem;line-height:1.7;margin:0 0 18px;flex:1 1 auto;}

/* not a <button> and not a link: the whole title is the link, and a second focusable
   control pointing at the same URL is noise for a keyboard or screen-reader user. This is
   the visual affordance only. */
.blog-card__cta{
  align-self:flex-start;font-size:14px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vert-foret);}
.blog-card__cta::after{content:" \2192";}

.blog-empty{
  grid-column:1 / -1;text-align:center;color:var(--ink-soft);
  font-size:1.02rem;padding:30px 0;}





/* ---- v2.4.0 PUSH 9 — HERO PHOTO GETS A WAVE ON PHONES --------------------
   Why it exists is in the markup comment on index.html. Two details that matter here:

   1. IT IS HIDDEN AT 769px AND UP. Above that breakpoint the overlay is absolutely positioned
      over the photograph, so the ORIGINAL divider after the hero section already sits flush
      against the image — measured at -1px on both 1440 and 810. A second one there would be
      a duplicate.

   2. ITS CAP FILLS CREAM, NOT WHITE. .wave-divider--cap fills the cap with var(--white),
      because dividers 1-4 all abut a white section. This one does not: on a phone it abuts the
      hero text block, which has no background of its own and shows the BODY gradient
      (linear-gradient #F5ECE4 -> #E9ECE6 down the whole page). Near the top of the page that
      reads as --cream. Filling white here would have painted a white band across the top of a
      cream area — the exact seam the .wave-cap path was invented to prevent. */
.hero-wave-inline{display:none;}
@media (max-width:600px){
  .hero-wave-inline{display:block;}
  .hero-wave-inline .wave-cap{fill:var(--cream);}
}


/* ---- v2.4.0 PUSH 10 — WAVE AT THE TOP OF THE BANNER ----------------------
   Reasoning is in the markup comment on index.html. Three mechanics:

   1. ABSOLUTE, not in flow. In flow it would push the banner down and change every measured
      position in the hero overlay. Overlaid, the banner is untouched and the wave simply sits
      on the first ~40px of the photograph.
   2. margin-top is reset. .wave-divider carries margin-top:-1px to close the hairline seam
      against the section above it, which is meaningless — and harmful — on an absolute box.
   3. THINNER THAN THE ONE BELOW, as asked. The others run clamp(38px,6vw,70px); this runs
      clamp(24px,3.8vw,44px), about 63% of the height at every width, so the two read as the
      same wave at two weights rather than as two different waves. */
.hero-wave-top{
  position:absolute;top:0;left:0;right:0;
  z-index:2;margin-top:0;pointer-events:none;}
.hero-wave-top svg{height:clamp(24px,3.8vw,44px);}
.hero-wave-top .wave-cap{fill:var(--cream);}


/* ---- v2.4.0 PUSH 11 — THE PHONE HERO AND NAV, AT 320px -------------------
   ⚠ THE FINDING THAT EXPLAINS EVERY EARLIER MISS: Céline's phone renders at 320 CSS px, not
   390. Her deck says "iPhone 13 mini", which is 375 normally and 320 with Display Zoom turned
   on. Measured at five widths, every fault Mat reported appears at 320 and at no width above it:

     width   brand-to-lang gap   hamburger bars   role line   signature
     430     82px                20px inside      1 line      272 of 390
     390     42px                20px inside      1 line      272 of 350
     375     27px                20px inside      1 line      272 of 335
     360     12px                20px inside      1 line      272 of 320
     320     0px  (touching)     8px OFF SCREEN   2 lines     272 of 280

   Every previous check on this hero was run at 390, so all of it passed while her actual screen
   was broken. 320 is now part of the standing check set.

   ---- 1. THE NAV ROW DOES NOT FIT AT 320 ----
   Cause is arithmetic, not styling: brand lockup 195 + language toggle 67 + hamburger 40 = 302px
   of content in 280px of usable width. Something had to give, and what gave was the hamburger,
   which overflowed to the right because it is last in the row.
   The brand name is the only elastic part, so it shrinks below 400px. */
@media (max-width:400px){
  .brand-name{font-size:21px;}
  .brand-lockup{gap:8px;}
  .header-inner > nav{gap:10px;}
  .lang-toggle a{padding:3px 6px!important;}
  /* the -8px pull from push 2 lands the bars on the crystal's margin when the row FITS. At 320
     the row does not fit, so the pull was dragging them off the screen instead. Neutralised
     here; the shrunken brand name above is what actually creates the room. */
  .hamburger{margin-right:0;padding:8px 4px;}
}

/* a second, tighter tier below 345px. At 320 the 21px name still left only 5px between
   the wordmark and the language pill — better than touching, but still cramped. 19px opens it
   to a real gap without dropping the name below the 13px floor (it is nowhere near it). */
@media (max-width:345px){
  .brand-name{font-size:19px;}
  .brand-lockup{gap:6px;}
  .brand-logo svg,.brand-logo img{width:22px;height:22px;}
}


/* ---- 2. THE HERO ELEMENTS NOW SHARE ONE WIDTH ----
   This is the thing Céline asked for on the call [53:03]: "it's almost like it wants to be all
   one width ... your signature, the line, the buttons". It was never actually delivered. The
   measurements above show why: headline 74/74, flourish 101/101, signature 59/59, role 36/36,
   buttons 20/20 — five different widths, all centred, none aligned.

   Cause: .hero-overlay is a centred flex column, so every child is shrink-to-fit and sizes to
   its own content. Stretching the children makes each box span the column; the text inside
   stays centred, so nothing looks different except that the edges finally line up. */
@media (max-width:600px){
  .hero-overlay > *{align-self:stretch;}
  .hero-overlay .hero-headline,
  .hero-overlay .hero-subtitle{text-align:center;}
  .hero-flourish{margin-left:auto;margin-right:auto;}

  /* ---- 3. SIGNATURE ---- Mat: "the signature is also too big." It was a flat 17rem (272px),
     which is 78% of the column at 390 and 97% at 320 — it stopped being a signature and became
     a banner. Now 13rem with a 100% ceiling, so it scales down instead of crowding the edges.
     NOTE this partly walks back the "extend the signature to the nav margins" change from
     push 2, which came from Céline on the call. Flagging rather than burying it: if she wants
     it wider again, this is the one value to change. */
  .hero-signature img{width:min(100%,13rem);}

  /* ---- 4. THE BUTTON ICONS COME BACK ---- Push 2 hid the lotus and the person glyph below
     768px to make room for the two CTAs side by side. Mat flagged it, correctly — it was a
     trade nobody asked for. They are restored, and the room is found by trimming the box
     instead of removing content: padding 11/14 -> 10/11, icon 2.5em -> 2em, gap .7em -> .45em.
     That is also Mat's "too much space around the letters".
     The 13px label is untouched; it is already on the floor. */
  .hero-overlay .hero-btn-icon{display:grid;}
  .hero-overlay .btn{padding:10px 11px;gap:.45em;}
  .hero-overlay .btn-primary .hero-btn-icon{width:2em;height:1.53em;}
  .hero-btn-icon--ringed{width:1.9em;height:1.9em;}

  /* Below 340px the two buttons genuinely cannot hold an icon AND a label side by side without
     dropping the label under the 13px floor. They stack instead. Stacking is the honest failure
     here — Céline asked for side-by-side and accepted smaller text to get it, but she did not
     accept text below the floor, and at 320 that is the actual choice. */
  @media (max-width:339px){
    .hero-overlay .hero-cta-group{flex-wrap:wrap;}
    .hero-overlay .btn{flex:1 1 100%;}
  }
}


/* ---- v2.4.0 PUSH 12 — SERVICES MENU, AND THE MOBILE CENTRING BUG ---------
   THE CENTRING BUG. Mat: "on mobile the nav menu is not centered because of the arrow on the
   services dropdown." Exactly right, and the cause is the grid set up in v2.2.0:

       .nav-has-sub { grid-template-columns: auto auto; justify-content: center; }

   That centres the PAIR — link plus chevron — inside the drawer. So the link itself sits left
   of centre by half the chevron's width, while every other item in the menu is centred on its
   own text. Services was the only row that looked off, which is why it read as a bug rather
   than as a layout choice.

   Fixed with a three-track grid: the link takes the middle track and is centred on the drawer's
   true centre, the chevron sits in the right-hand track and no longer pulls it. The left track
   is an empty counterweight. */
@media (max-width:1024px){
  .nav-has-sub{
    grid-template-columns:1fr auto 1fr;
    justify-content:stretch;gap:0;}
  .nav-has-sub > a{grid-column:2;justify-self:center;}
  .nav-sub-toggle{grid-column:3;justify-self:start;margin-left:8px;}
  .nav-sub{grid-column:1 / -1;}

  /* seven children instead of four, so the panel needs room to open. Measured at 320px:
     seven rows at ~41px plus margin is ~300px. */
  .nav-has-sub.open > .nav-sub{max-height:360px;}

  /* the drawer is a centred 100dvh column; with six top-level items and a seven-item submenu
     open, that can exceed a short phone. Scroll rather than clip. */
  .nav-menu{overflow-y:auto;overscroll-behavior:contain;}
}

/* the nested-submenu rules from push 2 are now dead — there is no second level any more.
   Left in place rather than deleted: they cost nothing, they are correct, and the nesting was
   reversed by instruction rather than because it did not work. If Autres services ever regains
   children, restoring them is a build-nav.js edit alone. */


/* ---- v2.4.0 PUSH 14 — FROM THE 2026-09-10 CALL -----------------------------

   FORMAT LINES CENTRED. [45:15] "I want the three of them be about the same." The uppercase
   line under each card body ran left-aligned while everything around it is centred. */
.portal-panel .service-meta{text-align:center;justify-self:stretch;}

/* HERO BUTTONS: SIDE BY SIDE ON HER PHONE, WITH ICONS, SMALLER.
   Push 11 stacked them below 340px, on the grounds that icon + label + side-by-side could not
   all fit at 320 without the label going under the 13px floor. She ruled on that trade on the
   call [23:44]: "put the icon back, but, two buttons side-by-side", and [24:07] "small
   buttons." So the stack is cancelled, and the room comes out of everything EXCEPT the label
   size: tighter tracking, smaller icons, less padding, shorter line height. The 13px label
   is untouched. */
@media (max-width:400px){
  .hero-overlay .hero-cta-group{flex-wrap:nowrap;gap:8px;}
  .hero-overlay .btn{
    flex:1 1 0;min-width:0;
    padding:8px 8px;gap:.35em;
    letter-spacing:.04em;line-height:1.2;}
  .hero-overlay .btn-primary .hero-btn-icon{width:1.7em;height:1.3em;}
  .hero-btn-icon--ringed{width:1.6em;height:1.6em;}
}
/* cancels push 11's stacking rule, which sits earlier in this file */
@media (max-width:339px){
  .hero-overlay .hero-cta-group{flex-wrap:nowrap;}
  .hero-overlay .btn{flex:1 1 0;}
}


/* ---- v2.4.0 PUSH 15 — REIKI SECTION OF /services/ -------------------------
   Everything here is from the 2026-09-10 call; the timestamps are in the markup comments.

   Keys now unused and deliberately LEFT in the dictionary, both languages, so parity holds and
   any of these can come back with a one-line markup change: appr.sub2, pos4, off1.ideal,
   off2.ideal. The .approach-signature rule above is also unused now. */

/* Rei / Ki on the dark approach panel. A light dot until the leaf bullets land site-wide. */
.approach-bullets{list-style:none;margin:0 0 18px;padding:0 0 0 22px;}
.approach-bullets li{
  position:relative;color:rgba(255,255,255,.90);
  font-size:1.0625rem;line-height:1.75;margin:0 0 10px;}
.approach-bullets li::before{
  content:"";position:absolute;left:-18px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--starlight);opacity:.85;}
.approach-bullets strong{font-weight:700;color:var(--starlight);}

/* her signature, centred. Sized to carry roughly the presence the 38px typeset word had. */
.approach-signature-img{
  display:block;width:clamp(150px,17vw,200px);height:auto;margin:28px auto 0;}

/* three pills on ONE line where the width allows [1:44:14]. On a phone the longest pill alone
   is most of the column, so they wrap there — that is geometry, not a choice. */
/* Seen on screen: nowrap on the ROW alone squeezed each pill until its LABEL wrapped to two
   lines — one row, but six lines of text. The text column here is only ~600px, and three
   single-line pills need ~840px. So each label is held to one line, and from 960px up the row
   is allowed to be wider than the text column, centred under it. Below 960 the pills wrap to
   more rows, each still reading as one clean line. */
.positioning-tag{white-space:nowrap;}
@media (min-width:960px){
  .positioning-tags{flex-wrap:nowrap;width:max-content;margin-left:50%;transform:translateX(-50%);}
}

/* the forfaits heading: unmistakably Reiki, her dark purple, bigger and bold [1:51:57] */
.off-heading{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,3.4vw,42px);line-height:1.2;
  color:var(--purple-deep);margin:0 0 8px;}
/* "Deux accompagnements personnalisés" bigger and spanning both boxes [1:47:35] */
.off-intro{font-size:clamp(21px,2.5vw,29px);max-width:none;}

/* the prices box now holds the Éveil note and the Parcours spacing line */
.o-pricebox .o-note{margin:10px 0 0;font-size:.95rem;color:var(--ink-soft);}
.o-pricebox .o-priceintro{margin:10px 0 0;}

/* Séance 1 / 2 / 3: paragraphs, no bullets, the label carries the colour */
.o-steps{margin:18px 0 6px;}
.o-steps p{margin:0 0 14px;line-height:1.7;}
.o-steps strong{color:var(--purple-deep);font-weight:700;}

/* "Chaque rencontre inclut": pushed toward the centre, a little [1:38:27] */
.offering-body > ul{padding-left:18px;}

/* the two buttons centred [1:30:59] */
.offering-foot{display:flex;justify-content:center;}


/* ---- v2.4.0 PUSH 16 — /services/ STRUCTURE -------------------------------
   Before this, Yoga/Méditation and Autres services were BOTH #F5ECE4 with nothing between them —
   measured — which is exactly the "no separation" she flagged. Now three sections, three
   colours, a wave between each, following the homepage's own pattern:
     Reiki (forfaits)  cream gradient    ->  wave A (unflipped, cap white)
     Yoga / Méditation white             ->  wave B (flipped,   cap white)
     Autres services   lavender-mist
   Each divider also takes the colour of the section ABOVE it as its background, so no strip of
   body gradient can show through between a section and its wave. */
.wave-divider--svc-a{background:var(--cream);}
.wave-divider--svc-a .wave-cap{fill:var(--white);}
.wave-divider--svc-b{background:var(--lavender-mist);}
.wave-divider--svc-b .wave-cap{fill:var(--white);}

/* Yoga / Méditation: white, stacked rows, photo alternating sides from 860px */
.practices{background:var(--white);}
.practices .practice--row{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  max-width:1080px;margin:0 auto;}
.practices .practice--row + .practice--row{margin-top:clamp(52px,6vw,80px);}
@media (min-width:860px){
  .practices .practice--row{grid-template-columns:5fr 6fr;gap:clamp(36px,4.5vw,60px);}
  .practices .practice--flip{grid-template-columns:6fr 5fr;}
  .practices .practice--flip .practice-media{order:2;}
}
.practice-media img{
  display:block;width:100%;height:auto;aspect-ratio:1000/563;object-fit:cover;
  border-radius:var(--radius-md);box-shadow:var(--shadow-soft);}
/* the menu label, sitting where the anchor lands */
.practice-eyebrow{
  font-size:.875rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--rose-ink);margin:0 0 8px;}

/* Autres services: its own colour, no white box, two columns */
.other-services{background:var(--lavender-mist);padding:clamp(52px,7vw,88px) 0;}
.other-grid{
  display:grid;grid-template-columns:1fr;gap:40px;
  max-width:1080px;margin:8px auto 0;}
@media (min-width:768px){ .other-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);} }
.other-services .other-offering{background:transparent;box-shadow:none;border:0;padding:0;margin:0;}
.other-media img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius-md);margin:0 0 18px;box-shadow:var(--shadow-soft);}
.other-services .other-offering p{color:var(--ink);font-size:1rem;line-height:1.75;}

/* the "Pour plus d'information" rectangle: a soft purple wash, not a white box */
.centre-info{
  max-width:1080px;margin:clamp(36px,5vw,52px) auto 0;
  padding:clamp(20px,3vw,28px) clamp(20px,3.5vw,36px);
  background:rgba(123,111,151,.13);border:1px solid rgba(92,74,134,.20);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;gap:24px;text-align:center;}
.centre-info__logo img{display:block;max-height:64px;width:auto;}
.centre-info__lead{margin:0 0 6px;color:var(--purple-deep);font-weight:700;line-height:1.6;}
.centre-info__contact{margin:0;color:var(--purple-deep);}
.centre-info__contact a{color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px;}
.centre-info__contact a:hover,.centre-info__contact a:focus-visible{color:var(--rose-ink);}

/* ---- LEAF BULLETS, SITE-WIDE ----------------------------------------------
   Chosen on the call after a long search [1:23:04]-[1:30:36]. "Boring is just a dot... too
   standard, too conventional." Lotus (already used), star, arrow, checks and a daisy ("too
   feminine") were all rejected. Her answer: the eucalyptus leaf from her own logo — "that's
   part of my logo" — and Mat: "I love it."
   Drawn as a slender pointed oval like the leaves flanking the crystal in her logo, and applied
   as a MASK rather than an image, so the colour comes from background-color:
     burgundy (--rose-ink) on light sections, as she asked [1:27:15];
     --starlight on the dark Reiki panel, where burgundy would vanish.
   Every content list takes it: the forfait lists, the practice lists, Rei/Ki, and the
   credentials on Mon parcours. Séance 1/2/3 deliberately have none. */
:root{--leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 17.5C2.6 10.4 7.8 3.6 17.5 2.5c-.4 8.3-6.6 14.4-15 15z'/%3E%3C/svg%3E");}
.offering li::before,
.practice-list li::before,
.cred-group li::before,
.approach-bullets li::before{
  width:12px;height:12px;border-radius:0;top:.45em;
  background:var(--rose-ink);
  -webkit-mask:var(--leaf) center/contain no-repeat;
          mask:var(--leaf) center/contain no-repeat;
  opacity:1;}
.approach-bullets li::before{background:var(--starlight);}
/* a little more room than a dot needs, and pushed toward the centre [1:38:27] */
.offering li,.practice-list li{padding-left:24px;}
.practice-list{padding-left:10px;}


/* ---- v2.4.0 PUSH 17 — THE HERO'S BOTTOM WAVE, MADE TO MATCH THE OTHERS ---------------
   Céline, 2026-09-10 call [32:30]: "This border, this wave divider is thick, but look at the
   one bottom. It's thinner... we can have a smaller divider here."

   MEASURED FIRST: every section divider on the homepage renders at exactly the same height
   at 1440, 1024, 390 and 320 (70 / 60.5 / 38 / 38px). So nothing is sized differently. The
   difference is what shows through the top of the SVG. Above the curve the divider is
   transparent. Everywhere else that area shows the section above, which is the same colour,
   so only the thin sage line reads. Under the hero the section above is a PHOTOGRAPH, but the
   divider sat below it in flow, so that area showed plain cream instead: photo, then a cream
   band, then the sage line. That band is the "thick" border.

   The fix pulls the divider up by its own height so it overlays the bottom of the photo, the
   same way the top wave (push 10) overlays the top. The photo now shows through above the
   curve and the wave cuts straight into the image.

   Safe for the buttons: measured room between the hero buttons and the photo's bottom edge is
   252px at 1920, 194 at 1440, 130 at 1024, 85 at 769, against a divider of 70 / 70 / 61 / 45.
   On phones the buttons are below the photo altogether. */
@media (min-width:601px){
  #home + .wave-divider{margin-top:calc(-1 * clamp(38px,6vw,70px));z-index:2;}
}
/* phones: the same fix on the wave directly under the photo (push 9) */
@media (max-width:600px){
  .hero-wave-inline{margin-top:calc(-1 * clamp(38px,6vw,70px));z-index:2;}
}


/* ---- v2.4.0 PUSH 18 — HER PHOTOGRAPHS, AND THE REIKI PANEL ON DESKTOP -------------
   Photos from her 2026-09-11 Drive upload, placed where her deck puts them. Reasons are in the
   markup comments. None needed upscaling: every source is at least as wide as its largest
   rendered slot at 2x, so each was cropped to its slot's shape and scaled DOWN.

   THE REIKI PANEL. Mat on the call [1:17:17]: "because we developed mobile first, it's applying
   a mobile style to the desktop ... at the very least, the text should be bigger." Below 960px
   nothing changes except that photos appear. From 960px the panel widens from 620px to 1080px
   and each block becomes a photo-and-words row, alternating sides, with the body text up from
   17px to 19px. The text column stays around 70-75 characters a line, so the bigger size does
   not cost readability. */
.approach-media{margin:0;}
.approach-media img{
  display:block;width:100%;height:auto;border-radius:var(--radius-md);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.55);}
.approach-row + .approach-row{margin-top:58px;}
/* phones: the crystal as a wide band on top, the lotus and candle as a pair between Reiki and
   Mon approche. "You can even crop it" [1:17:46]. */
.approach-media--reiki{margin-bottom:28px;}
.approach-media--reiki img{aspect-ratio:3/2;object-fit:cover;object-position:50% 55%;}
.approach-media--pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}
.approach-copy--reiki{margin-bottom:24px;}

@media (min-width:960px){
  .approach-body{max-width:1080px;}
  .approach-row{display:grid;align-items:start;gap:clamp(44px,5vw,72px);}
  .approach-row + .approach-row{margin-top:80px;}
  .approach-row--reiki{grid-template-columns:minmax(0,1fr) minmax(300px,380px);}
  .approach-row--reiki .approach-media{order:2;margin:6px 0 0;}
  .approach-media--reiki img{aspect-ratio:1/1;}
  .approach-row--mine{grid-template-columns:minmax(220px,300px) minmax(0,1fr);}
  /* the lotus at the top of the column, the candle at the bottom, beside her closing line */
  .approach-media--pair{
    display:flex;flex-direction:column;justify-content:space-between;
    align-self:stretch;gap:32px;margin:6px 0 0;}
  .approach-copy p,.approach-bullets li{font-size:1.1875rem;}
  .approach-quote{font-size:clamp(22px,1.9vw,26px);}
  .approach-copy .approach-emphasis{font-size:clamp(20px,1.65vw,23px);}
}

/* her blog pointer, as a pill (deck slide 7). Sentence case rather than the tracked uppercase
   of the three pills below it: it is a full sentence, and a sentence in capitals is slow to read. */
.reiki-blog-pill{
  display:inline-block;padding:10px 20px;border-radius:26px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
  color:var(--starlight);font-size:1rem;line-height:1.5;text-decoration:none;
  transition:background .2s ease;}
.reiki-blog-pill:hover,.reiki-blog-pill:focus-visible{
  background:rgba(255,255,255,.22);text-decoration:underline;text-underline-offset:3px;}

/* her real Reiki photograph under the Éveil box (deck slide 9) */
.offering-stack{display:flex;flex-direction:column;gap:30px;}
.offering-photo{margin:0;}
.offering-photo img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);}

/* the CCEC logo, right of the text as on her slide 6; below it on a narrow phone */
.centre-info__logo img{height:64px;width:auto;max-height:none;}
@media (max-width:560px){ .centre-info{flex-direction:column;gap:16px;} }

/* push 18 — side by side, the photo is cropped to 4:3 so the Éveil column ends level with the
   Parcours box beside it (measured: 1494 vs 1485px at 1440) instead of running past it.
   Her face sits in the upper third, so the crop keeps the top. */
@media (min-width:768px) and (orientation:landscape){
  .offering-photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;}
}

/* ---- v2.4.0 PUSH 19 — BUTTON TEXT NEVER WRAPS. HERO CTAs RE-SIZED. -------------------------
   Mat, 2026-09-11: "Make sure none of the text on the buttons on the entire site wrap. We want
   all on one line, even in French. If the screen gets too small, we resize the buttons and text
   accordingly, we don't let the text wrap."

   WHY THE HERO BUTTONS LOOKED WRONG, measured at 15 widths before changing anything. Four
   generations of rules were stacked on them and pulled in different directions:
     - v1.9.2 gave each label a max-width (8.2em / 6.4em) that FORCED a two-line break, and sized
       padding (up to 30px a side) and icons (2.7em) for that two-line box. At 1440 the pair was
       206x61 and 180x61 with 27px of side padding.
     - push 2 / 11 / 14, written for Céline's small phone, set the pair to flex:1 1 0 and the row
       to width:100% below 768px. On anything wider than a phone that stretched each button to
       half the row whatever its label needed: 295px wide at 700px.
   So the desktop boxes were tall and padded for a break nobody wanted, and the tablet boxes were
   as wide as the screen allowed. Neither was sized FROM the label.

   THE NEW APPROACH, one rule set from 481px up, superseding all of the above there:
     1. The label is one line. white-space:nowrap, no max-width.
     2. Each button is as wide as its own label plus even padding (flex:0 0 auto). Nothing
        stretches. The row is centred and as wide as the two buttons.
     3. Padding, gap and icon are ALL in em, so they are fixed proportions of the label size.
        Change the font-size and the whole button scales with it; nothing drifts.
     4. Only the font-size responds to the screen, and only when it has to.
   Room it needs, measured: the FR pair (the longer language) is 34.5em wide. Desktop and
   tablet keep the label at 13-14px, the button sizes in CLAUDE.md, at every width from 481px up.

   The row may be wider than the headline column above it on desktop (56% of the photo). That is
   deliberate: the column is an arbitrary box, the photo is the real edge, and the row is centred
   on the same axis. At 769px the FR row is 60% of the photo's width.

   PHONES (under 481px) ARE NOT TOUCHED HERE. There the pair cannot hold FR on one line side by
   side at 13px (it would need about 10px text at 390px). That is the mobile discussion Mat
   deferred; the push 11 / 14 rules still apply there. */

/* 1. every button on the site: one line, and never wider than the space it sits in */
.btn,.btn-ghost{white-space:nowrap;text-wrap:nowrap;max-width:100%;}

/* 2. hero CTAs, tablet and desktop */
@media (min-width:481px){
  .hero-overlay .hero-cta-group{
    display:flex;flex-wrap:nowrap;justify-content:center;
    width:max-content;max-width:none;align-self:center;
    margin-left:auto;margin-right:auto;gap:1em;}
  .hero-overlay .btn{
    flex:0 0 auto;min-width:0;justify-content:center;
    white-space:nowrap;text-wrap:nowrap;
    padding:.8em 1.35em;gap:.55em;line-height:1.3;
    letter-spacing:.09em;}
  .hero-overlay .btn-primary .hero-btn-label,
  .hero-overlay .btn-secondary .hero-btn-label{max-width:none;white-space:nowrap;text-align:left;}
  .hero-overlay .hero-btn-icon{display:grid;}
  .hero-overlay .btn-primary .hero-btn-icon{width:2.03em;height:1.55em;}  /* lotus, 128:98 */
  .hero-overlay .hero-btn-icon--ringed{width:1.6em;height:1.6em;}        /* person, 1:1 */
}
/* tablet band, overlay below the photo with 20px each side: 13px until the row stops fitting */
@media (min-width:481px) and (max-width:600px){
  .hero-overlay .btn{font-size:clamp(12.5px,calc((100vw - 40px) / 34.5),14px);}
}
/* desktop band, overlay on the photo: 14px from ~800px up, 13.5px at 769px */
@media (min-width:601px){
  .hero-overlay .btn{font-size:clamp(13px,calc(var(--hero-frame-w,100vw) * .0176),14px);}
}

/* 3. outline buttons in narrow cards: "Commencer mon parcours" wrapped at 810px and on phones,
   "Réserver une séance" at 320px. The card footer's 34px side padding was the squeeze. */
.offering-foot .btn-ghost{min-width:0;}
@media (max-width:900px){ .offering-foot{padding-left:22px;padding-right:22px;} }
@media (max-width:400px){
  .btn-ghost{letter-spacing:.06em;padding-left:14px;padding-right:14px;}
}
/* push 19 — at 320px "Commencer mon parcours" still needed 254px in a 220px card footer. The
   footer padding drops to 14px and the outline-button label scales with the screen below 400px:
   14px at 350px and up, 12.8px at 320px. Scaling, not wrapping, per Mat. */
@media (max-width:400px){
  .offering-foot{padding-left:14px;padding-right:14px;}
  .btn-ghost{font-size:clamp(12px,4vw,14px);}
}/* push 19, correction found on screen — the gap between the two buttons rendered at 73px at 1440
   instead of 14px. Its 1em resolved against the ROW, which inherits the overlay's large headline
   scale, not the buttons' 14px. Fix: the responsive size now lives on the row and the buttons
   inherit it, so padding, icon AND gap all measure from the same 13-14px. */
@media (min-width:481px) and (max-width:600px){
  .hero-overlay .hero-cta-group{font-size:clamp(12.5px,calc((100vw - 40px) / 35.4),14px);} /* 35.4em = the FR pair as rendered */
}
@media (min-width:601px){
  .hero-overlay .hero-cta-group{font-size:clamp(13px,calc(var(--hero-frame-w,100vw) * .0176),14px);}
}
@media (min-width:481px){
  .hero-overlay .hero-cta-group .btn{font-size:1em;}
}

/* ---- v2.4.0 PUSH 20 — ONE HERO AT EVERY SIZE ABOVE A PHONE ----------------------------------
   Mat, 2026-09-11, reviewing 1920 / 1440 / 1025 / 768 side by side: the buttons were small on a
   large desktop, right at 1440, and far too big on a laptop, and the 768 tablet had dropped into
   the phone layout. "We want consistency here. The only time the look of the hero should really
   change is when we get to mobile size and we start stacking the hero image and words."

   1. THE STACK POINT MOVES 768 -> 600. Every hero rule keyed to 768/769 was hero-only (checked
      selector by selector) and now keys to 600/601, so tablets keep the desktop composition: the
      words on the photo. Below 601px the photo and words stack as before.

   2. THE BUTTONS SCALE WITH THE PHOTO, like the headline, signature and role line already do.
      Push 19 capped the label at 14px, which is why the pair looked small at 1920 (14px on a
      1905px photo) and big at 1025 (14px on a 1010px photo whose headline had shrunk by 30%).
      The size is now a fixed fraction of the photo width: 14px on the 1425px photo of a 1440
      screen, 18.7px at 1920, and so on. Because padding, gap and icon are all em of this value
      (push 19), the whole button scales as one piece.
      --hero-btn-min is the one floor. Below it the label stops shrinking. Set to 13px, the site
      minimum in CLAUDE.md, pending Mat's call on laptop/tablet (see the push 20 changelog note).

   3. THE BUTTONS SIT LOWER. Her role line is pinned 5px above the waterline (site.js), and the
      button row hangs below it, so space added ABOVE the row moves only the buttons. Mat: "lower
      the buttons by like 5-10 pixels". 10px at 1440, proportional to the photo everywhere. */
/* Mat, 2026-09-11: 11px. A deliberate, recorded exception to the 13px site minimum, for the hero
   buttons only, so the hero keeps one look from laptop to large desktop. Only the hero CTA row reads it. */
:root{--hero-btn-min:11px;}
@media (min-width:601px){
  .hero-overlay .hero-cta-group{
    font-size:clamp(var(--hero-btn-min),calc(var(--hero-frame-w,100vw) * .0098),25px);
    margin-top:calc(var(--hero-frame-w,100vw) * .0071);}
}


/* ---- v2.4.0 PUSH 21 — PHONE HERO BUTTONS, SAME MODEL AS DESKTOP ---------------------------
   Mat, 2026-09-11, on 412 / 390 / 360: "same approach ... no-wrap, sizing rules, padding
   adjustments, text size, icon alignment, the whole bit. Make sure they fit in both languages."

   Below 601px the photo and words stack (push 20), and the pair still sits SIDE BY SIDE with
   icons: Céline's ruling on the 2026-09-10 call [23:44], "put the icon back, but two buttons
   side-by-side". Push 11 / 14 did that by stretching each button to half the row and letting
   "DÉCOUVRIR MES SERVICES" break to two lines. That is what is replaced here.

   THE MODEL, identical to push 19/20:
     - one-line labels, each button as wide as its own label, the pair centred
     - padding, gap and icons in em of the button text, so they scale as one piece
     - the text size is the only thing that responds, and it is SOLVED FROM THE ROOM: the pair's
       width in em (measured) divided into the column width. The row therefore always fills the
       column exactly in the longer language and never overflows it.
   Phone proportions are a little tighter than desktop so the text can stay as large as possible:
   letter-spacing .03em (desktop .09em), side padding .85em (1.35em), icons ~10% smaller.
   Measured pair width: FR 29.96em, EN 26.26em. The 40px is the column's 20px gutters, kept so
   the buttons stay on the same margins as the nav and the words above them.

   RESULTING TEXT SIZE — FR: 12.8px at 412, 11.7 at 390, 10.7 at 360, 9.3 at 320.
                         EN: 14px at 412, 13.3 at 390, 12.2 at 360, 10.7 at 320.
   Vertical padding is .9em so the buttons keep a comfortable tap height even when the text is
   small. */
@media (max-width:600px){
  .hero-overlay .hero-cta-group{
    --pair-em:29.96;
    display:flex;flex-wrap:nowrap;justify-content:center;
    width:max-content;max-width:100%;align-self:center;
    margin-left:auto;margin-right:auto;gap:.5em;
    font-size:min(14px,calc((100vw - 40px) / var(--pair-em)));}
  html[lang="en"] .hero-overlay .hero-cta-group{--pair-em:26.26;}
  .hero-overlay .hero-cta-group .btn{
    font-size:1em;flex:0 0 auto;min-width:0;max-width:none;justify-content:center;
    white-space:nowrap;text-wrap:nowrap;
    padding:.9em .85em;gap:.4em;line-height:1.3;letter-spacing:.03em;}
  .hero-overlay .btn-primary .hero-btn-label,
  .hero-overlay .btn-secondary .hero-btn-label{max-width:none;white-space:nowrap;text-align:left;}
  .hero-overlay .hero-btn-icon{display:grid;}
  .hero-overlay .btn-primary .hero-btn-icon{width:1.8em;height:1.38em;}  /* lotus, 128:98 */
  .hero-overlay .hero-btn-icon--ringed{width:1.45em;height:1.45em;}      /* person, 1:1 */
}
/* cancels push 11's below-340px stacking for good; the pair never stacks now */
@media (max-width:339px){
  .hero-overlay .hero-cta-group{flex-wrap:nowrap;}
  .hero-overlay .hero-cta-group .btn{flex:0 0 auto;}
}

/* OUTLINE BUTTONS, SAME MODEL. Their padding was fixed px (9px 18px), so when push 19 let the
   label scale down on small phones the box did not follow. Now in em of the label: exactly the
   same 9px / 18px at 14px, and proportionally less as the text scales. */
.btn-ghost{padding:.643em 1.286em;}
@media (max-width:400px){ .btn-ghost{padding:.643em 1em;} }


/* ---- v2.4.0 PUSH 22 — /services/ DESKTOP: WAVES AT THE TOP, HALF-SCREEN PHOTOS -------------
   Mat, 2026-09-12. Desktop only in this push; tablet and phone keep the push 16/18 layout until
   we go through them.

   1. THE TWO WAVES ON THE PURPLE PANEL. Overlaid, not in flow — the panel's background is a
      three-layer gradient and a divider in flow would cut it. The top one hangs off the header's
      real height because the section starts behind the fixed header. */
.approach-wave-top,.approach-wave-bottom{
  position:absolute;left:0;right:0;z-index:1;margin-top:0;pointer-events:none;}
.approach-wave-top{top:var(--header-real,76px);}
.approach-wave-top svg{height:clamp(24px,3.8vw,44px);}
.approach-wave-top .wave-cap{fill:var(--cream);}
.approach-wave-bottom{bottom:0;}
.approach-wave-bottom svg{height:clamp(38px,6vw,70px);}
.approach-wave-bottom .wave-cap{fill:var(--lavender-mist);}
/* the panel's own top padding has to clear the top wave, and its bottom padding the bottom one */
@media (min-width:601px){
  .approach.section-pad{padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(28px,3vw,48px));}
  .approach.section-pad{padding-bottom:calc(clamp(38px,6vw,70px) + clamp(28px,3vw,48px));}
}

/* 2. HALF THE SCREEN TEXT, HALF THE SCREEN PICTURE. Céline has asked for this repeatedly, from
   the sites she shared: "half the screen is text and half is the picture" (Mat, 2026-09-12).
   Push 18 put the pictures in a 380px column inside a 1080px container, which used a third of the
   width. Each row now breaks out of the container to the full viewport and splits it in two.

   HOW THE BREAKOUT WORKS: the row is 100vw wide and pulled left by (50% - 50vw), which lands its
   left edge on the viewport's left edge whatever the container's width. The text half keeps the
   old measure by padding: its OUTER padding is calc(50vw - 540px), i.e. the container's own left
   edge, so the words still line up with the signature and pills below them. Nothing about the
   type scale changes.
   Images cover their half and lose their rounded corners and shadow — a full-bleed band should
   meet the edge of the screen cleanly. */
@media (min-width:960px){
  .approach-row{
    width:100vw;margin-left:calc(50% - 50vw);
    grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
  .approach-row + .approach-row{margin-top:clamp(56px,6vw,88px);}
  .approach-text{
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(24px,3vw,44px);}
  /* rows with the picture on the right: words start at the container's left edge */
  .approach-row--reiki .approach-text,
  .approach-row--close .approach-text{
    padding-left:max(24px,calc(50vw - 540px));padding-right:clamp(32px,4vw,64px);}
  .approach-row--reiki .approach-media,
  .approach-row--close .approach-media{order:2;}
  /* row with the picture on the left: words end at the container's right edge */
  .approach-row--mine .approach-text{
    padding-right:max(24px,calc(50vw - 540px));padding-left:clamp(32px,4vw,64px);}
  .approach-media{height:100%;margin:0;}
  .approach-media img{
    width:100%;height:100%;object-fit:cover;
    border-radius:0;box-shadow:none;aspect-ratio:auto;
    min-height:clamp(320px,30vw,460px);}
  /* the crystal's own rule from push 18 forced a square; the half-band sets the shape now */
  .approach-media--reiki img{aspect-ratio:auto;}
  /* the words keep their reading measure inside the half */
  .approach-text > *{max-width:620px;}
}

/* 3. THE PRACTICE ROWS GET THE SAME TREATMENT (yoga, méditation). */
@media (min-width:960px){
  .practices .practice--row,
  .practices .practice--row.practice--flip{
    width:100vw;margin-left:calc(50% - 50vw);
    grid-template-columns:1fr 1fr;gap:0;align-items:stretch;max-width:none;}
  .practices .practice-text{
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(24px,3vw,44px);}
  .practices .practice--row:not(.practice--flip) .practice-text{
    padding-right:max(24px,calc(50vw - 540px));padding-left:clamp(32px,4vw,64px);}
  .practices .practice--flip .practice-text{
    padding-left:max(24px,calc(50vw - 540px));padding-right:clamp(32px,4vw,64px);}
  .practices .practice-media{height:100%;}
  .practices .practice-media img{
    width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
    border-radius:0;box-shadow:none;min-height:clamp(320px,28vw,440px);}
  .practices .practice-text > *{max-width:620px;}
}

/* 4. THE CONTACT RECTANGLE, two lines. Mat: wrap after "communiquez avec :", put the Centre, the
   number and the email on the second line, and give the Centre the same leaf bullet the lists
   carry. The bullet is inline, not absolute, so it centres with the line. */
.centre-info__contact{display:block;}
.centre-info__contact::before{
  content:"";display:inline-block;width:12px;height:12px;margin-right:8px;
  vertical-align:-1px;background:var(--purple-deep);
  -webkit-mask:var(--leaf) center/contain no-repeat;
          mask:var(--leaf) center/contain no-repeat;}

/* push 22, caught on screen — the half-screen text columns are flex columns, which blockifies and
   stretches their children, so "Contactez-moi" and the blog pill ran the full width of the column.
   Both are controls, not paragraphs: they size to their own content and sit at the text's left
   edge (right edge in the mirrored rows). */
@media (min-width:960px){
  .approach-text .reiki-blog-pill,
  .practices .practice-text .btn-ghost{align-self:flex-start;}
  .approach-row--mine .approach-text .reiki-blog-pill{align-self:flex-end;}
}
/* ---- v2.4.0 PUSH 23 — THE FAINT STRAIGHT LINE ACROSS SOME WAVE DIVIDERS --------------------
   Mat, 2026-09-12: "some of the wave dividers have weird lines on them ... the faint straight
   line that runs horizontally."

   WHAT IT IS. Since v1.9 every divider carries margin-top:-1px, which laps it 1px INTO the
   section above so no sliver can show at that joint. Nothing did the same at the joint BELOW it.
   At a fractional device pixel ratio or browser zoom (his DevTools runs 1.75 DPR at 60-89%), the
   divider box and the next section round to different device pixels and a sub-pixel line of
   whatever sits behind them — the body gradient — shows through the gap, straight across the
   full width. It does not appear in a 1x screenshot, which is why the earlier capture looked
   clean: it is a rounding artefact of the live renderer, not a painted border.

   THE FIX, applied to every divider on the site: lap the bottom edge too, and let the SVG paint
   1px past its own box so the cap always reaches the section below. The flipped dividers get the
   same treatment; being transformed layers, they are the ones most likely to show it. */
.wave-divider{margin-bottom:-1px;}
.wave-divider svg{margin-bottom:-1px;}
/* the overlaid waves (hero top and bottom, the /services/ panel) are positioned, not in flow,
   so they get the same 1px of overlap at whichever edge they meet a section on */
.hero-wave-top,.approach-wave-top{margin-top:-1px;}
.hero-wave-inline,.approach-wave-bottom{margin-bottom:-1px;}
#home + .wave-divider{margin-bottom:-1px;}
/* push 23, part 2 — THE LINE UNDER THE NAV. Mat, 2026-09-12: "the most prominent example is the
   one below the nav bar ... it's showing through on the wave which kind of breaks the feel of the
   wave divider."
   It was not the divider at all: the fixed header painted a hard 1px rule across the full width
   (box-shadow:0 1px 0 rgba(92,74,134,.08)), and that straight rule cuts across the wave that now
   sits directly beneath it on the homepage and on /services/.
   Replaced with a soft, edgeless shadow: it still lifts the header off the page it scrolls over,
   at the same weight, but it has no hard edge to draw a line across a curve. */
.header,.header.scrolled{box-shadow:0 10px 22px -16px rgba(92,74,134,.22)!important;}

/* ---- v2.4.0 PUSH 24 — 2026-09-12 REVIEW ----------------------------------------------------

   1. THE HERO BUTTONS SIT LOWER STILL. Mat: "the CTA buttons still need to be lowered a bit more,
      at least on large desktop sizes." The lowering is a fraction of the photo width, so raising
      the fraction moves them further at every size and most at the widest: 10px -> 16px at 1440,
      13 -> 22 at 1920, 18 -> 29 at 2560. The role line above them does not move; it stays pinned
      5px above the waterline. */
@media (min-width:601px){
  .hero-overlay .hero-cta-group{margin-top:calc(var(--hero-frame-w,100vw) * .0115);}
}

/* 2. THE HERO'S BOTTOM WAVE GETS ITS SHADED UNDERSIDE BACK. Mat: "the first wave divider under
   the hero section is missing its shaded underside."
   Every other divider on the site draws its sage band over a FLAT section colour, which is what
   makes the band read. Push 17 moved this one onto the PHOTOGRAPH, and sage at 28% over a bright
   photo disappears. So on this divider — and on the phone's inline one, same situation — the band
   is painted as the solid colour it resolves to everywhere else: --vert-sauge at 28% over white,
   i.e. rgb(229,232,230). Same band, same weight, now independent of what is behind it. */
#home + .wave-divider .wave-a,
.hero-wave-inline .wave-a{fill:rgb(229,232,230);fill-opacity:1;}
#home + .wave-divider .wave-b,
.hero-wave-inline .wave-b{fill:rgb(238,240,238);fill-opacity:1;}

/* 3. /my-journey/ DIVIDERS. The page had none: white story section, then the credentials panel,
   with a hard edge between them and nothing under the nav. Reasoning as on /services/. */
.about{position:relative;}
.page-wave-top{
  position:absolute;left:0;right:0;top:var(--header-real,76px);
  z-index:1;margin-top:-1px;pointer-events:none;}
.page-wave-top svg{height:clamp(24px,3.8vw,44px);}
.page-wave-top .wave-cap{fill:var(--cream);}
@media (min-width:601px){
  .about.section-pad{padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(24px,2.6vw,44px));}
}
/* white above, the credentials panel's own opening colour below */
.wave-divider--mj{background:var(--white);}
.wave-divider--mj .wave-cap{fill:var(--lavender-mist);}

/* 4. /services/ — THE WORDS USE THEIR COLUMN, AND THE PICTURES RUN EDGE TO EDGE.
   Mat: "the words in What is Reiki? and the others are only occupying a small fraction of the
   space. If the space is there, let's use it!"
   The outer padding was calc(50vw - 540px), which pinned the text to the old 1080px container and
   therefore GREW with the screen: at 1920 it was 420px of empty margin against 540px of words.
   It is now a bounded clamp, so the text block widens with the column instead of the margin
   doing it. Measured result at 1440: 605px of words in a 720px half (was 483). At 1920: 760px.
   The type steps up with it so the line count stays sane. */
@media (min-width:960px){
  .approach-row--reiki .approach-text,
  .approach-row--close .approach-text{
    padding-left:clamp(24px,4.5vw,110px);padding-right:clamp(28px,3.5vw,64px);}
  .approach-row--mine .approach-text{
    padding-right:clamp(24px,4.5vw,110px);padding-left:clamp(28px,3.5vw,64px);}
  .approach-text > *{max-width:760px;}
  .practices .practice--row:not(.practice--flip) .practice-text{
    padding-right:clamp(24px,4.5vw,110px);padding-left:clamp(28px,3.5vw,64px);}
  .practices .practice--flip .practice-text{
    padding-left:clamp(24px,4.5vw,110px);padding-right:clamp(28px,3.5vw,64px);}
  .practices .practice-text > *{max-width:760px;}
}
@media (min-width:1280px){
  .approach-copy p,.approach-bullets li{font-size:1.25rem;}
  .approach-quote{font-size:clamp(24px,2vw,28px);}
  .practices .practice-text p,.practices .practice-list li{font-size:1.1875rem;}
}

/* 5. THE PICTURES FORM ONE STAIRCASE. Mat: "the first one fill all the way to the top of the page
   under the nav, then the next ones should line up where the bottom left of the first pic touches
   the top right of the next one and so on."
   So the rows lose the gap between them: each picture's half runs straight into the next one's,
   and because the sides alternate, the corners meet. The first row's picture starts at the very
   top of the panel, behind the header and the top wave, exactly as the homepage banner does. */
@media (min-width:960px){
  .approach.section-pad{padding-top:0;}
  .approach-row + .approach-row{margin-top:0;}
  .approach-row--reiki .approach-text{
    padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(24px,3vw,48px));}
  .approach-text{padding-block:clamp(40px,5vw,72px);}
  .approach-media img{min-height:clamp(380px,34vw,560px);}
  /* her signature needs air after the last picture */
  .approach-signature-img{margin-top:clamp(48px,6vw,96px);}

  .practices .practice--row + .practice--row{margin-top:0;}
  .practices .practice-text{padding-block:clamp(40px,5vw,72px);}
  .practices .practice-media img{min-height:clamp(380px,32vw,540px);}
}

/* ---- v2.4.0 PUSH 25 — why push 22/24's section padding never applied -----------------------
   `main > section:first-child:not(.hero-banner){padding-top:calc(var(--header-h) + 72px)
   !important}` (v1.9, line ~1782) was winning on both first sections: 142px, regardless of what
   push 22 and 24 set. Checked with the browser's own matched-rule list rather than by reading the
   file, which is how it was found.
   These overrides carry the same weight and more specificity, so the intent finally lands:
     /services/  ≥960px: no top padding at all — the first picture runs to the top of the panel,
                 behind the header and the top wave, the way the homepage banner does.
                 601-959px: room for the header and the wave, as push 22 intended.
     /my-journey/ ≥601px: room for the header and its new wave. */
@media (min-width:960px){
  main > section:first-child.approach{padding-top:0 !important;}
  .approach-row--reiki .approach-media{margin-top:0 !important;}
}
@media (min-width:601px) and (max-width:959px){
  main > section:first-child.approach{
    padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(28px,3vw,48px)) !important;}
}
@media (min-width:601px){
  main > section:first-child.about{
    padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(24px,2.6vw,44px)) !important;}
}

/* ---- v2.4.0 PUSH 26 — RESOLUTION FOR THE HALF-SCREEN PICTURES -------------------------------
   Mat asked whether the /services/ pictures need upscaling; they looked fuzzy. Measured against
   the slots the push 22/24 layout created, they were being stretched by the browser:
     lotus 2.52x, candle 1.78x, crystal 1.07x, yoga 1.48x, méditation 1.61x (at 1440)
   That is a layout mistake of mine, not a limit of her files: push 18 exported them for a 380px
   column, and the column is now half the screen. Re-exported from her originals at native size
   (1254x1254 and 1536x1024), with a smaller file beside each for phones, chosen by srcset.
   The practice photos also stop being pre-cropped to 16:9 — the full frame ships and object-fit
   does the cropping, so nothing is thrown away before the browser chooses.
   Phones still fetch ~35-45KB; desktop 70-112KB.

   WHAT IS STILL SHORT, and it is only this: a 2x screen at 1440 wants ~1426px and at 1920
   ~1906px. Her squares are 1254 and the practice frames 1536. So on a Retina-class display the
   squares run about 0.66-0.88 of ideal. That is the only place real upscaling would earn its
   keep — see the note in NOW.md. */
.practice-media img,.approach-media img{background:var(--lavender-mist);}


/* ---- v2.4.0 PUSH 27 — ROUND 2 OF THE UPSCALES ------------------------------------------------
   Mat ran his upscaler at 2x on the four files that were short for a 2x screen; each one was
   checked before use, the same way as the first batch: matched to its original by content,
   framing identical, colour drift within 2.5 levels per channel, and the lettering on the
   holistic graphic read at full zoom (accents intact, edges cleaner).
     scenic-lake-bench   1920 -> 3840 master, ships 900 / 1920 / 2880
     holistic-approach   840  -> 1680 master, ships 840 / 1254, FR and EN
     blog-placeholder    560  -> 2240 master, ships 560 / 1120
   HER PORTRAIT WAS NOT UPSCALED, and should not be. Mat tried it: the model smooths her skin and
   removes the lines she deliberately wants kept. It did not need it either — the composited
   original sits at 1254x1254 in _archive/brand/images/profile/celine.png and the site had been
   serving an 840 crop of it. Re-exported from that instead. Same for Mon parcours, from her own
   2179x2512 Original.jpeg. */


/* ---- v2.4.0 PUSH 28 — THE POLISH BATCH, 2026-09-12 -----------------------------------------

   2. THE THREE PILLARS ON ONE LINE. "Transformation personnelle / Connexion spirituelle /
      Guérison naturelle" wrapped mid-phrase. Each is now unbreakable and the row only wraps
      between phrases, never inside one. */
.portal-pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em 1.4em;}
.portal-pillars > span{white-space:nowrap;}

/* 3. NO SCRIM ON HER CLOSING LINE. Push 28 added one, at Mat's request, built like the hero's
   role-line scrim but dark. On screen it did not earn its place, and he called it off
   (2026-09-12): "might as well just remove it and put it back to the way it was. She was fine
   with it anyway."
   This returns the line to its v2.3.0 state — white type with the layered text-shadow and no
   scrim — which is the arrangement already recorded as a deliberate, eyes-open exception in
   CLAUDE.md's verification list. Do not re-add a scrim here without re-reading that note. */

/* 4. THE FOOTER WAVE. Absolute, lifted by its own height so it sits over the end of the page. */
.footer{position:relative;}
.footer-wave{
  position:absolute;left:0;right:0;top:calc(-1 * clamp(38px,6vw,70px) + 1px);
  z-index:2;margin:0;pointer-events:none;}
.footer-wave svg{height:clamp(38px,6vw,70px);margin:0;}
.footer-wave .wave-cap{fill:var(--purple-deep);}
/* the homepage's closing photo: the page colour dips into the top of it, the footer rises into
   the bottom — the same pair the hero carries */
.closing-wave-top{margin-bottom:calc(-1 * clamp(38px,6vw,70px));position:relative;z-index:2;}
.closing-wave-top .wave-cap{fill:var(--cream);}

/* 6. THE LEAF BULLETS, ONE COLOUR. Sage from the palette on light backgrounds, starlight where
   they sit on the dark purple panel. They were burgundy.
   7a. AND THEY SIT ON THE MIDDLE OF THE FIRST LINE. They were pinned at .45em from the top of the
   line box, which reads high on every list whose line-height is over 1.4. Half a line is .85em
   for the line-heights in use here (1.6-1.75), so the bullet's centre lands on the text's centre:
   .85em minus half the bullet's 12px. Within a pixel across every list on the site. */
.offering li::before,
.practice-list li::before,
.cred-group li::before,
.approach-bullets li::before{
  background:var(--vert-sauge);
  top:calc(.86em - 6px);}
.approach-bullets li::before{background:var(--starlight);}

/* 7e. NO LEAF ON THE CENTRE'S CONTACT LINE. Mat: it reads as a list item when it is a sentence. */
.centre-info__contact::before{content:none;}

/* 7b/c/d. A LIGHT GROUND BEHIND THE WORDS IN THE PHOTO ROWS. Without it the last text half has no
   floor: the picture ends, the words end, and the section colour runs straight on. A barely-there
   wash gives each text half an edge that agrees with its picture.
   On the purple panel it is white at 6%; on the white practices section it is the site's own
   off-white, which reads as paper beside the photograph. */
@media (min-width:960px){
  .approach-text{background:rgba(255,255,255,.06);}
  .practices .practice-text{background:var(--starlight);}
}
/* push 28 — the footer clipped its own wave: .footer has carried overflow:hidden since v1.x, and
   the wave sits above the footer's top edge by design. Nothing in the footer overflows any more
   (the decorative crystals it was written for are long gone), so the clip is lifted. */
.footer{overflow:visible;}

/* ---- v2.4.0 PUSH 29 — the last two pages ---------------------------------------------------
   /testimonials/ and /contact/ now carry the same wave under the nav as /my-journey/ and
   /services/. Every page opens on a wave and closes on one into the footer.
   It also settles the last place the header's shadow still read as a line: the scan measured a
   9-level step under the nav on those two pages, where nothing sat beneath it. The wave covers
   that band, the same way it does on the pages that already had one. */
.testimonials,.contact{position:relative;}
@media (min-width:601px){
  main > section:first-child.testimonials,
  main > section:first-child.contact{
    padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(24px,2.6vw,44px)) !important;}
}


/* ---- v2.4.0 PUSH 31 — ANCHOR LANDINGS ------------------------------------------------------
   Mat: "My approach is coming in too high and Energy healing section is coming in too low."
   Both were on the same 16px offset, which is too tight under a 76px header once the heading has
   no section padding of its own to sit in: the words ended up against the nav. 44px gives the
   heading air without looking like a gap, and it is now the one number every anchor on the page
   uses — #offerings lands the same way because the id moved onto the heading block (see markup).
   The other anchors (#yoga-prive, #meditation, #pratiques, #yoga, #ateliers, #reiki) already sit
   at the top of their own section and keep their existing treatment; they are re-stated here so
   the whole set is one rule and cannot drift apart again. */
#approach,#offerings,#forfait1,#forfait2,
#yoga-prive,#meditation,#pratiques,#autres-services,#yoga,#ateliers{
  scroll-margin-top:calc(var(--header-real, var(--header-h)) + 44px);}


/* ---- v2.4.0 PUSH 32 — THE PHONE CTAs STACK ------------------------------------------------
   Mat's call, 2026-09-12: "I want them to stack ... Discover on top and get in touch on bottom.
   This width of them side by side is not appealing on mobile." Phones only; every other width
   keeps the pair exactly as it is.

   ⚠ THIS REVERSES CÉLINE'S 2026-09-10 INSTRUCTION [23:44], "put the icon back, but two buttons
   side-by-side". The icons stay; the side-by-side does not. Mat overrode it on 2026-09-12 after
   seeing it on his phone. Worth a word to her, since she asked for it directly.

   ONE CONSEQUENCE, FLAGGED RATHER THAN BURIED: push 21 shrank the label to fit the PAIR across
   the column — 9.3px in French at 320px. Stacked, each button has the whole column, so that
   reason is gone and the label returns to 14px, the site's button size. If the smaller text is
   wanted instead, the fix is this one declaration. */
@media (max-width:600px){
  .hero-overlay .hero-cta-group{
    flex-direction:column;align-items:center;
    width:100%;max-width:100%;gap:10px;
    font-size:14px;}
  .hero-overlay .hero-cta-group .btn{
    width:max-content;max-width:100%;
    padding:.8em 1.5em;letter-spacing:.05em;}
}

/* ---- v2.4.0 PUSH 33 — SPACE UNDER THE CARD'S CONTACT BUTTON ON PHONES ----------------------
   Mat, on his phone: "the get in touch buttons need more space below them."
   Measured: 26px on desktop, 0px on phones. The 26px came from the subgrid block, which is
   inside @media (min-width:768px), so below that the paragraph sat flush against the button.
   Same 24px on every phone width now, which matches the rhythm the rest of the card uses. */
@media (max-width:767px), (orientation:portrait){
  .portal-panel .portal-lead{margin-top:24px !important;}
  .portal-panel .portal-cta{padding-bottom:2px;}
}

/* ---- v2.4.0 PUSH 34 — PHONE SPACING ON /services/, AND THE CENTRE'S LINES ------------------
   All from Mat's phone pass, 2026-09-12.

   1. AIR ABOVE EACH HEADING, AND UNDER EACH PICTURE. Below 960px the rows stack, and the text
      half had no padding of its own: "My approach" sat against the bottom of the lotus, and the
      paragraph under the candle did the same. The desktop rows have had padding since push 22;
      the phone had none.
   2. LESS AIR BETWEEN THE ROWS. 58px between rows, on top of the emphasis line's own 30px
      bottom margin, left a hole above the candle. 34px reads as one panel again. */
@media (max-width:959px){
  .approach-text{padding-top:26px;}
  .approach-row + .approach-row{margin-top:34px;}
  .approach-media{margin-bottom:0;}
  .approach-media--pair{margin-bottom:0;}
}

/* 3. THE CENTRE'S CONTACT LINES. One line on desktop, three on a phone: the Centre and its town,
   then the number, then the email. The separator dot only exists on the desktop line. */
@media (max-width:600px){
  .centre-info__contact .ci-name,
  .centre-info__contact .ci-tel,
  .centre-info__contact .ci-mail{display:block;}
  .centre-info__contact .ci-dot,
  .centre-info__contact .ci-sep{display:none;}
  .centre-info__contact .ci-tel{margin-top:6px;}
  .centre-info__contact .ci-mail{margin-top:2px;}
}


/* ---- v2.4.0 PUSH 36 — THE CENTRE'S CONTACT LINE, FINAL SHAPE --------------------------------
   Mat, 2026-09-12. No colon after "ON", in either language.
     Desktop:  Centre Charles-Émile Claude · Cornwall, ON · 613-932-1035 · info@cceccornwall.com
     Phones:   Centre Charles-Émile Claude, Cornwall, ON
               613-932-1035
               info@cceccornwall.com
   Supersedes push 34's rules for this block. */
.centre-info__contact .ci-comma{display:none;}
.centre-info__contact .ci-name{display:inline;}
@media (max-width:600px){
  .centre-info__contact .ci-place,
  .centre-info__contact .ci-tel,
  .centre-info__contact .ci-mail{display:block;}
  .centre-info__contact .ci-name{display:inline;}
  .centre-info__contact .ci-comma{display:inline;}
  .centre-info__contact .ci-bullet,
  .centre-info__contact .ci-dot{display:none;}
}


/* ---- v2.4.0 PUSH 37 — CÉLINE'S SLIDES 7 AND 8 (email 2026-09-13) ---------------------------

   1. TITLES BIGGER AND "MORE FLASHY". Slide 7: "bigger title". Slide 8: "I want the titles to be
      more flashy!", illustrated with "Équilibre quotidien" set in a bold italic serif. That is her
      own display face at its heaviest shipped weight, with the real italic (Cormorant Garamond
      ships both; nothing is synthesised). All three purple-panel headings share it. */
.approach .approach-heading{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(34px,4.2vw,54px);line-height:1.12;letter-spacing:-.3px;
  margin-bottom:22px;}

/* 2. PHOTOS INSIDE THE PURPLE, WITH ROUND CORNERS. Slide 7: "photo with round corners, inside the
   purple rectangle, which is a theme throughout my website." This supersedes push 22/24's
   full-bleed staircase on desktop: each picture now sits in its half with the same outer margin
   the words have on the other side, so the two halves are symmetrical, and it takes the site's
   rounded corners and soft shadow back. The half-and-half split itself stays. */
@media (min-width:960px){
  /* the panel clears the header and the top wave again, since the first picture no longer runs
     behind them */
  main > section:first-child.approach{
    padding-top:calc(var(--header-real,76px) + clamp(24px,3.8vw,44px) + clamp(20px,2.4vw,36px)) !important;}
  .approach-row--reiki .approach-text{padding-top:clamp(40px,5vw,72px);}
  .approach-media{
    padding:clamp(24px,3vw,44px) clamp(24px,4.5vw,110px);
    box-sizing:border-box;}
  .approach-row--reiki .approach-media,
  .approach-row--close .approach-media{padding-left:clamp(20px,2.5vw,40px);}
  .approach-row--mine .approach-media{padding-right:clamp(20px,2.5vw,40px);}
  .approach-media img{
    border-radius:var(--radius-lg);
    box-shadow:0 18px 44px -20px rgba(0,0,0,.55);
    min-height:clamp(340px,30vw,500px);}
}
/* the text halves lose the 6% wash from push 28: it existed to give a floor beside an edge-to-edge
   photograph, and with the photos inset it would draw a second, mismatched box */
@media (min-width:960px){ .approach-text{background:none;} }

/* push 37 — "au-delà" was breaking at its hyphen ("au-" / "delà"). The phrase stays whole; the line breaks after the colon instead. */
.nobr{white-space:nowrap;}


/* ---- v2.4.0 PUSH 38 — CÉLINE'S DECK, 2026-09-14 (email "Re: Website Preview") ---------------------
   Slides 1-4 WAVES, slide 5 MENU, slide 7 YOGA / MÉDITATION PICTURES. Slide 9 is screenshots only;
   she wrote that she has not worked on it yet.

   1. NO WAVE ON THE TWO BIG PICTURES. Her words: "back to this, no wave for picture but don't lose
      the wave on top of picture ... wave does not cut the picture", and on the phone "no wave at all
      for picture ... After I see the picture, I want the eyes to be drawn to my sentences, not the
      wave." Her "old" screenshots are the 2026-09-09 production site, so that is the target:
      the photograph is a clean rectangle, and the waves live in the sections beside it.
      This deliberately reverses push 10 (top wave over the hero), push 17 (hero divider pulled up
      over the photo), push 24 #2 (its solid fills, which only existed because it sat on the photo)
      and push 28-31's closing-band pair. The markup stays; only the overlap goes. */
.hero-wave-top{display:none;}
@media (min-width:601px){
  /* in flow again, below the photo, flush as it was on 2026-09-09 */
  #home + .wave-divider{margin-top:-1px;}
}
#home + .wave-divider .wave-a{fill:var(--vert-sauge);fill-opacity:.28;}
#home + .wave-divider .wave-b{fill:var(--vert-sauge);fill-opacity:.16;}
/* the phone's wave directly under the photo goes entirely: slide 1 rejects it both overlapping and
   detached ("no, takes away my attention to my sentences"). This also gives back the blanket under
   the crystals, which the overlapping wave was covering ("lost my favorite detail"). */
@media (max-width:600px){ .hero-wave-inline{display:none;} }
/* the closing photograph: its top wave sits above it in flow again, and the footer's wave does not
   rise into it. Other pages keep their footer wave; none of them ends on a photograph. */
.closing-wave-top{margin-bottom:-1px;}
main:has(> .closing-cta:last-child) + .footer .footer-wave{display:none;}

/* 2. HER NAME BACK TO ITS SIZE ON PHONES. Slide 1: "bring back the size of my name to what it was,
   now it's too small." Push 11 cut it from 17rem to 13rem; this restores 17rem with the 100%
   ceiling, which still fits her 320px screen (272px of a 280px column). */
@media (max-width:600px){
  .hero-signature img{width:17rem;max-width:100%;}
}

/* 3. THE HAMBURGER MENU READS FROM THE LEFT. Slide 5: "for iPhone and iPad (vertical only), with
   the 3 bars menu, it is still centered, I would prefer on the left if possible." The drawer only
   exists at 1024px and under, which is exactly her phone and her iPad held upright.
   Push 12's three-track grid centred Services on the drawer's true centre; with everything left-
   aligned the chevron simply follows the word. The submenu is indented one step under its parent. */
@media (max-width:1024px){
  .nav-menu{align-items:flex-start;padding-left:clamp(32px,9vw,48px);padding-right:24px;box-sizing:border-box;}
  .nav-menu > li{width:100%;text-align:left;}
  .nav-has-sub{grid-template-columns:auto auto 1fr;justify-content:start;}
  .nav-has-sub > a{grid-column:1;justify-self:start;}
  .nav-sub-toggle{grid-column:2;justify-self:start;margin-left:8px;}
  .nav-sub{text-align:left;padding-left:16px;}
}

/* 4. YOGA AND MÉDITATION: THE WHOLE PICTURE, ROUND CORNERS EVERYWHERE. Slide 7: "pictures only,
   lost some details iPad and iPhone", shown beside her originals, and "could we do the round
   corners for these pictures also, would be the same everywhere."
   The files were never cropped (1536x1024, 3:2). The page was: 16:9 on phones and upright iPads,
   and a full-height half-screen cover crop from 960px. Now every size shows the file's own 3:2, so
   nothing is cut, and from 960px each picture sits inset in its half exactly like the Reiki panel
   pictures (push 37): same outer margin as the words, round corners, soft shadow. The paper wash
   behind the text halves goes with the full-bleed layout it was drawn for (same call as push 37). */
.practice-media img{aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);}
@media (min-width:960px){
  .practices .practice-media{
    height:auto;display:flex;align-items:center;box-sizing:border-box;
    padding:clamp(24px,3vw,44px) clamp(24px,4.5vw,110px);}
  /* the inner side, toward the words, takes the smaller gap: picture left in plain rows, right in flipped */
  .practices .practice--row:not(.practice--flip) .practice-media{padding-right:clamp(20px,2.5vw,40px);}
  .practices .practice--flip .practice-media{padding-left:clamp(20px,2.5vw,40px);}
  .practices .practice-media img{
    height:auto;min-height:0;aspect-ratio:3/2;
    border-radius:var(--radius-lg);box-shadow:0 18px 44px -20px rgba(0,0,0,.35);}
  .practices .practice-text{background:none;}
}


/* ---- v2.4.0 PUSH 43 — CÉLINE'S DECK NOTES, 2026-09-17 ----------------------------------------
   Her test pass on computer, tablet and phone, both orientations. Slide images are backed up in
   _build/intake/2026-09-17_deck-notes/.

   0. (above, in place) THE BOXES STACK ON AN iPAD HELD UPRIGHT. "3 boxes side by side is great on
      iPad horizontal but not nice on vertical", and the same for the two forfaits on /services/.
      Every side-by-side query for those two grids now reads (min-width:768px) and
      (orientation:landscape), and push 33's phone spacing also applies in portrait. This reverses
      her 2026-09-03 ask for three across in both orientations. */
@media (min-width:768px) and (orientation:portrait){
  .portal-cards{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto;}
  .services .offerings{max-width:680px;}
}

/* 1. HOME: TEXT ON THE LEFT WHEREVER THE PHOTO STACKS ABOVE IT. "iphone - horizontal and vertical,
      text is centered, I want it on the left", for Mon parcours, Témoignages and Blog. Below 820px
      those rows are one column; from 820 they were already left (or right, mirrored). */
@media (max-width:819px){
  .home-about-inner,.home-split,
  .home-teaser .home-split{text-align:left;}
  .home-about-text p,.home-split-text p{margin-left:0;margin-right:0;}
}

/* 2. /my-journey/: SAME, iPhone and iPad upright. Reverses v1.7.5 J1, which centred this intro at
      1024px and under "for a calmer read". */
@media (max-width:1024px){
  #about .about-body,
  #about .about-body p,
  #about .about-body .section-title{text-align:left;}
}

/* 3. THE BLOG PILL: CENTRED, TWO LINES. The line break after "Reiki," is in the string itself. */
.reiki-blog-pill{display:block;width:fit-content;margin-left:auto;margin-right:auto;text-align:center;}
@media (min-width:960px){ .approach-text .reiki-blog-pill{align-self:center;} }

/* 4. MON APPROCHE: A SQUARE PICTURE, AND THE WORDS RUN UNDERNEATH IT. "picture more square like the
      others and the text will fill under the picture, as you did for Mon parcours long version".
      Laptop and iPad sideways (960px and up); on an upright iPad and on phones it was already square.
      The row stops being a two-column grid: the picture floats in the left half, keeping push 37's
      inset, and the text wraps beside it and then uses the full width below. The pull quote is its
      own block formatting context so its left rule never runs behind the picture. */
@media (min-width:960px){
  .approach-row--mine{display:block;}
  .approach-row--mine::after{content:"";display:block;clear:both;}
  .approach-row--mine .approach-media{float:left;width:46%;height:auto;}
  .approach-row--mine .approach-media img{aspect-ratio:1/1;height:auto;min-height:0;}
  .approach-row--mine .approach-text{
    display:block;padding-left:clamp(24px,4.5vw,110px);padding-right:clamp(24px,4.5vw,110px);}
  .approach-row--mine .approach-text > *{max-width:none;}
  .approach-row--mine .approach-quote{display:flow-root;}
}

/* 5. HER TWO ONE-LINE STATEMENTS: CENTRED, BIGGER, WARM YELLOW. "two phrases centered, bigger and
      more difference in the color… warm yellow, like the flame in the picture?", all devices.
      The yellow is the candle's glow in approach-candle.webp. Measured on the panel behind these
      lines: 3.2:1 at the lightest point (the lower, bluer end of the gradient), 3.7:1 higher up.
      That clears WCAG only as LARGE text, so the 24px floor is load-bearing, same as the closing band. */
.approach-copy .approach-emphasis{
  text-align:center;color:#F6D58E;
  font-size:clamp(24px,2.3vw,28px);line-height:1.45;
  margin-left:auto;margin-right:auto;max-width:36ch;}

/* 6. YOGA AND MÉDITATION, LAPTOP AND iPAD: LESS WHITE, BIGGER PICTURES AND TITLES. "too much white
      space, pictures a bit bigger and also titles?? Or titles take all the space on top?"
      Mat chose the second: from 960px the label and title run across the full width, and the
      picture and the words start side by side underneath, top-aligned, so the picture no longer
      floats in the middle of a tall column. No markup change: .practice-text becomes
      display:contents, so its children are placed on the article's own grid. Below 960px nothing
      moves (picture, then label, title, words). */
.practice h2{font-size:clamp(28px,3.4vw,44px);line-height:1.18;}
@media (min-width:960px){
  .practices .practice--row,
  .practices .practice--row.practice--flip{
    grid-template-columns:1.1fr 1fr;column-gap:clamp(28px,3.5vw,64px);row-gap:0;
    align-items:start;box-sizing:border-box;
    padding:clamp(40px,5vw,72px) clamp(24px,4.5vw,110px);}
  .practices .practice--row.practice--flip{grid-template-columns:1fr 1.1fr;}
  .practices .practice-text{display:contents;}
  .practices .practice-text > *{max-width:none;grid-column:2;}
  .practices .practice--flip .practice-text > *{grid-column:1;}
  /* .practice--row is here for weight: the flipped row's column rule above must not win */
  .practices .practice--row .practice-text > .practice-eyebrow,
  .practices .practice--row .practice-text > h2{grid-column:1 / -1;}
  .practices .practice-text > .practice-eyebrow{grid-row:1;}
  .practices .practice-text > h2{grid-row:2;margin-bottom:clamp(24px,2.6vw,36px);}
  .practices .practice-media{
    grid-column:1;grid-row:3 / span 5;height:auto;padding:4px 0 0;display:block;}
  .practices .practice--flip .practice-media{grid-column:2;order:0;padding:4px 0 0;}
  .practices .practice-media img{min-height:0;height:auto;aspect-ratio:3/2;}
  .practices .practice-text .btn-ghost{justify-self:start;align-self:start;}
}

/* 7. AUTRES SERVICES: "3 titles a bit bigger" (the section heading and both offerings). */
.other-services h2{font-size:clamp(30px,3.2vw,40px);}
.other-offering h3{font-size:clamp(22px,2vw,26px);}

/* 8. THE HERO WORDS FIT A SHORT WINDOW. Mat, 2026-09-17, on a wide laptop window at 150% Windows
      scaling (about 1220x585 of page): "Cultivate your energy." ran up under the menu bar. Not new:
      the 2026-09-09 live site does the same. The words scale with the photo's WIDTH, but from 1025px
      the photo's HEIGHT is capped by the window, and the block is anchored at the waterline, so it
      can only grow upward. Measured headline top inside the photo: -18px at 1221x585, -28 at
      1100x520, 20 at 1832x877.
      Now the size is also held to 10.5% of the photo's height (site.js publishes --hero-frame-h).
      Ordinary screens sit at or just under that ratio, so they barely move: 1280x720 -1.5%, 1366x768
      -0.6%, 1536x864, 1440x900, 1920x1080 and 2560x1440 unchanged. After: headline top 33px at
      1221x585, 25 at 1100x520, 75 at 1832x877. */
@media (min-width:1025px){
  .hero-overlay{
    font-size:clamp(12px,min(calc(var(--hero-frame-w,100vw) * var(--hero-ov-scale)),calc(var(--hero-frame-h,9999px) * .105)),var(--hero-ov-max));}
}

/* ---- v2.4.0 PUSH 44 — FROM THE 2026-09-17 CALL (after her deck notes) ------------------------
   Transcript backed up in _build/intake/2026-09-17_meeting/.

   1. "MON PARCOURS", THE SMALL LABEL UNDER HER PHOTO, CENTRED. [1:23:22] "my tablet, and probably
      my mobile also, Mon Parcours, both, the little title, Mon Parcours, I want them to be centered
      ... I don't mind about the title, but I want to have Mon Parcours under the picture." Only
      where the photo stacks above the words: /my-journey/ at 900px and under, home under 820px.
      The heading and the paragraphs stay left (push 43). */
@media (max-width:900px){
  #about .about-body .section-eyebrow{display:block;text-align:center;}
}
@media (max-width:819px){
  #home-about .home-about-text .section-eyebrow{display:block;text-align:center;}
}

/* 2. THE CLOSING PHOTOGRAPH: NO WAVE ABOVE IT, AND MORE OF THE PICTURE ON DESKTOP. [1:19:09] Mat:
      "I'm not super keen on the wave divider above the picture" / Céline: "Can we take it off?";
      [1:20:21] "on the desktop version, we need a better cropping", [1:20:36] "we lost too much
      [of the bench] on the desktop". The 460px ceiling cut 28% of the photo's height at 1440 and
      46% at 1920. At 720px the whole picture shows up to about 1625px wide (1440: all of it), and
      1920 loses 15%. Phones keep their own 4:5 rule. */
.closing-wave-top{display:none;}
@media (min-width:601px){
  .closing-cta-photo{max-height:720px;object-position:50% 60%;}
}

/* 3. DESKTOP HERO FILLS THE FIRST SCREEN EXACTLY. Mat, 2026-09-17, with Chrome's device bar at
      1920x1080, 1440x900 and 1025x768: "I would much prefer if the hero section would fit in the
      viewport here perfectly so that it lands flush at the bottom."
      WHY IT KEPT COMING BACK: the v1.9.1 height was min(56.29vw, 100svh - header - 28px). Two things
      in that formula stop it landing flush, and they fail in opposite directions:
        - the 28px --hero-reserve deliberately left a strip of the next section showing: the "white
          strip" on 16:9 screens (1920x1080: photo 976px, window 1004px below the header);
        - the 56.29vw cap sizes the photo from the WINDOW WIDTH, so any window taller than 16:9 gets a
          photo shorter than the screen and a gap under it (1025x768: photo 577px, space 692px).
      A height taken from the width can only match the height of one screen shape. The fix is to size
      from the height the visitor actually has and let the photo crop: height = 100svh minus the
      measured header, object-fit:cover. svh (small viewport height) is the stable unit for a first
      screen, it never promises more room than a browser with its toolbars showing really has.
      The crop: on a wider-than-photo window the top and bottom go (the waterline anchor in site.js
      already follows it); on a taller window the sides go, and 45% horizontal keeps the crystal
      cluster (left) in frame. The 380px floor and push 43's short-window text cap stay.
      Tablets and phones (1024px and under) are untouched: next pass, one device at a time. */
@media (min-width:1025px){
  .hero-banner-img{
    height:max(380px, calc(100svh - var(--header-real,76px))) !important;
    object-position:45% 70%;}
}