/* ============================================================
 * Sammā — site.css
 * ------------------------------------------------------------
 * UNIQUE consolidated stylesheet (garde-fou #1: pas de duplication CSS
 * entre fichiers — V13 en avait 3 + ~800 lignes inline par page).
 *
 * Initial seed: V14 main.397aa88f.css + style inline de index.html.
 * Déduplication et nettoyage des : itératif au fil du
 * chantier (cf. task #6 + CHANGELOG).
 * ============================================================ */

/* === Seed: V14 main.css (shared rules) === */
/* =============================================================================
   Samma — shared stylesheet
   Extracted Phase 4: rules present on ≥ 8 of the 11 main pages.
   Page-specific CSS remains inline in each .html file.
   ============================================================================= */

/* -- Keyframes shared across pages --------------------------------------- */
@keyframes fadeIn     { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1;    transform: translateY(0); } }

@media (max-width: 720px) {
      .menu-panel { width: 100vw; padding-left: 8vw; padding-right: 8vw; }
      /* Keep CTA on the right when sidebar opens on mobile */
      body.menu-open .topbar-right {
        left: auto;
        right: 4vw;
        justify-content: flex-end;
      }
      body.menu-open .topbar-right .lang-switcher { display: none; }
      body.menu-open .brand-mark { opacity: 0; pointer-events: none; }
    }


/* -- Common selectors ---------------------------------------------------- */
/* Grain layer — canvas « analogique » régénéré à 10 fps par canvas-bg.html
   (retour V14 demandé par Lucas 09/07/2026 : le grain vivant fait partie de
   l'animation du fond, avec la dérive lente des blobs). La tuile SVG statique
   introduite le 2026-06-23 est retirée ; opacity 0.40 = valeur V14 (le canvas
   couvre en pixels opaques, là où la tuile SVG jouait à opacity 1). */
#c-grain  { position: fixed; inset: 0; display: block; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.40; z-index: 1; }

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

.bar {
      position: absolute;
      left: 0;
      height: 1px;
      background: rgba(255,255,255,0.9);
      transform-origin: 50% 50%;
      transition: width 0.45s cubic-bezier(0.22,1,0.36,1),
                  transform 0.45s cubic-bezier(0.22,1,0.36,1),
                  top 0.45s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.3s ease,
                  background-color 0.3s ease;
    }

.bar-1 { top: 0;    width: 75%; }

.bar-2 { top: 50%;  width: 92%; transform: translateY(-50%); }

.bar-3 { top: 100%; width: 58%; transform: translateY(-100%); }

.brand-mark:hover { opacity: 0.82; }

.lang-switcher .lang-sep {
      color: rgba(255,255,255,0.25); user-select: none;
    }

.lang-switcher button {
      background: transparent; border: 0; padding: 0.2em 0.15em;
      color: rgba(255,255,255,0.55); cursor: pointer;
      font: inherit; letter-spacing: inherit; text-transform: inherit;
      transition: color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

.lang-switcher button.is-current {
      color: #fff;
      font-weight: 700;
      text-shadow: 0 0 0.75px rgba(255,230,195,0.9), 0 0 2px rgba(255,215,170,0.6), 0 0 4px rgba(255,200,150,0.3);
    }

.lang-switcher button:hover { color: rgba(255,255,255,0.95); }

.menu-bars {
      position: relative;
      /* +10% header (demande Lucas 05/07/2026) */
      width: clamp(22px, 1.71vw, 28.6px);
      height: clamp(17.6px, 1.38vw, 24.2px);
      display: block;
      filter: drop-shadow(0 0 2px rgba(255,225,195,0.25));
      transition: filter 0.4s ease;
    }

.menu-foot { font-style: normal; }
.menu-foot .lang-switcher button { color: rgba(255,255,255,0.6); }

.menu-foot .lang-switcher button.is-current {
      color: #fff;
      font-weight: 700;
      text-shadow: 0 0 0.75px rgba(255,230,195,0.9), 0 0 2px rgba(255,215,170,0.6), 0 0 4px rgba(255,200,150,0.3);
    }

.menu-foot a { color: inherit; text-decoration: none; transition: color 0.3s ease; }

.menu-foot a:hover { color: rgba(255,235,210,1); }

.menu-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.6vh;
    }

.menu-nav { display: flex; width: 100%; }

.menu-toggle:hover .bar { background: rgba(255,245,225,1); }

.menu-toggle:hover .bar-1,
    .menu-toggle:hover .bar-3 { width: 92%; }

.menu-toggle:hover .menu-bars { filter: drop-shadow(0 0 3px rgba(255,225,195,0.45)); }

.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2;
                background: radial-gradient(ellipse 140% 140% at 22% 22%, transparent 35%, rgba(35,14,6,0.32) 100%); }

/* Background layers
 * 2026-06-23 : filter: blur(75px) → blur(20px). Le blur GPU a un coût O(r²) ;
 * passer de 75 à 20 = ~14× moins cher par frame. Les blobs du gradient sont
 * déjà des dégradés radiaux doux, donc visuellement la différence est subtile. */
    #c-grad   { position: fixed; inset: 0; display: block; filter: blur(20px); transform: scale(1.18); transform-origin: center; z-index: 0; }

/* Sidebar variant — appears at the bottom of the slide-in menu */
    .menu-foot .lang-switcher {
      margin-top: 0.6vh;
      font-size: clamp(10.5px, 0.73vw, 13px);
      letter-spacing: 0.28em;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease 0.45s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s;
    }

/* Topbar variant — hides when menu opens (like .topnav-social) */
    body.menu-open .topbar-right .lang-switcher,
    body.menu-open .topbar .lang-switcher {
      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    }

/* ── Language switcher (EN | FR | DE) ─────────────────────────── */
    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 0.45em;
      font-family: 'Outfit', sans-serif;
      /* +10% header (demande Lucas 05/07/2026) : clamp(9.5px, 0.7vw, 12px) × 1.1
         (la variante sidebar .menu-foot .lang-switcher garde sa propre taille) */
      font-size: clamp(10.45px, 0.77vw, 13.2px);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

body.menu-open .menu-foot .lang-switcher { opacity: 1; transform: translateY(0); }

body.menu-open .menu-foot { opacity: 1; transform: translateY(0); }

body.menu-open .menu-list a { opacity: 1; transform: translateY(0); }

body.menu-open .menu-list a:hover::after { width: 1.3em; }

body.menu-open .menu-list li:nth-child(1) a { transition-delay: 0.18s; }

body.menu-open .menu-list li:nth-child(2) a { transition-delay: 0.24s; }

body.menu-open .menu-list li:nth-child(3) a { transition-delay: 0.30s; }

body.menu-open .menu-list li:nth-child(4) a { transition-delay: 0.36s; }

body.menu-open .menu-list li:nth-child(5) a { transition-delay: 0.42s; }

body.menu-open .menu-panel { transform: translateX(0); pointer-events: auto; }

body.menu-open .menu-toggle .bar-1 {
      top: 50%; width: 92%;
      transform: translateY(-50%) rotate(-45deg);
    }

body.menu-open .menu-toggle .bar-2 {
      width: 0; opacity: 0;
      transform: translateY(-50%) scaleX(0);
    }

body.menu-open .menu-toggle .bar-3 {
      top: 50%; width: 92%;
      transform: translateY(-50%) rotate(45deg);
    }

/* Single declaration for html/body — uses brand variables.
   Note: declared once here (not duplicated in any 10-page-*.css). */
html, body {
  width: 100%; height: 100%;
  background: var(--samma-bg);
  color: var(--samma-fg);
  overflow: hidden;
}

/**
 * Respect user's reduced-motion preference.
 *
 * Note on !important — 4 occurrences ici + 1 sur `[hidden]` plus bas =
 * 5 au total dans le projet (cible CLAUDE.md "≤ 5"). They are required:
 * the universal `*` selector needs to override any animation/transition
 * that an element inherits, including very specific ones inline or in
 * component CSS. This is the W3C-documented pattern for prefers-reduced-
 * motion. Removing the !important would let high-specificity per-element
 * animations leak through, defeating the accessibility intent.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * Force HTML `hidden` attribute over component CSS.
 *
 * L'attribut HTML `hidden` équivaut à `display: none` mais provient du
 * user-agent stylesheet (spécificité 0). Les règles CSS qui posent
 * `display: flex / inline-flex / block` sur des classes overrident le
 * `hidden` natif. Cette règle force le masquage avec spécificité
 * supérieure, ce qui est l'usage standard (Bootstrap, Tailwind,
 * normalize.css l'appliquent à l'identique). 5e `!important` du projet :
 * justifié car c'est l'intention sémantique de l'attribut HTML lui-même,
 * et requis pour que la déclinaison lite (qui marque les éléments à
 * masquer via cet attribut) fonctionne sans CSS supplémentaire.
 */
[hidden] { display: none !important; }

/* === Seed: V14 index.html inline <style> (homepage rules) === */


    /* Layers : #c-grad défini plus haut (chrome partagé). Doublon retiré 2026-06-23. */

/* Glow breath — typography */
    /* ──────────────────────────────────────────────────────────────
       Glow breath — V10 GPU-composited version.
       Animates opacity (composited on GPU) instead of text-shadow / filter
       (CPU-bound, repainted per frame). The glow itself is now a STATIC
       text-shadow on the selector (.hero-title, .brand-location, etc.),
       set at the peak intensity from the old 50% keyframe. The element
       "breathes" by fading slightly — perceptually similar to the V09
       intensity-pulse glow, but ~80% lighter on TBT.
       Variables used by selectors:
         --neonGlow      — strong glow (h1, brand, manifesto triggers)
         --neonGlowSoft  — softer glow (subtitles, footer labels)
         --logoGlow      — drop-shadow stack for the logo image
       ────────────────────────────────────────────────────────────── */
    :root {
      /* Brand palette — single source of truth for signature colours.
         Change one value here, the whole site shifts. */
      --samma-bg: #723D2E;       /* Sea of Sand queen — main background */
      --samma-fg: #fff;          /* Foreground / body text on dark bg */

      --neonGlow: 0 0 1px rgba(255,230,200,0.88), 0 0 2.5px rgba(255,220,185,0.63), 0 0 5px rgba(245,198,158,0.35), 0 0 12px rgba(245,198,158,0.10);
      --neonGlowSoft: 0 0 0.75px rgba(255,230,200,0.75), 0 0 2px rgba(255,220,185,0.52), 0 0 4px rgba(245,198,158,0.30), 0 0 10px rgba(245,198,158,0.08);
      /* Aligné sur .close-logo (fin de purpose) — glow plus sharp, détoure
         précisément les lettres (demande Lucas 05/07/2026). Ancien stack :
         1px/.95 · 2.5px/.70 · 5px/.40 */
      --logoGlow: drop-shadow(0 0 0.75px rgba(255,233,205,0.88)) drop-shadow(0 0 2px rgba(255,223,193,0.63)) drop-shadow(0 0 4px rgba(247,205,170,0.35));
    }
    /* Creux relevés (retour Lucas 13/07) : à 0.78 le creux du cycle
       éteignait visiblement le TITRE entier (texte compris) — en
       arrivant sur un chapitre on tombait souvent dans le creux
       (« baisse d'opacité » perçue), puis le cycle remontait. Le
       texte reste désormais en plein glow, la respiration devient
       subliminale. */
    @keyframes neonBreath {
      0%, 100% { opacity: 0.94; }
      50%      { opacity: 1; }
    }
    @keyframes neonBreathSoft {
      0%, 100% { opacity: 0.94; }
      50%      { opacity: 1; }
    }
    @keyframes logoBreath {
      0%, 100% { opacity: 0.92; }
      50%      { opacity: 1; }
    }
    
    @keyframes fadeInSoft { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0.88; transform: translateY(0); } }
    @keyframes arrowBob   { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 0.85; } }
    /* Red variant — used on formulas and practices for accent elements.
       Kept as animated text-shadow because it's an accent (not on every page),
       performance impact is contained. */
    @keyframes neonBreathRed {
      0%, 100% { text-shadow: 0 0 0.75px rgba(255,200,175,0.62), 0 0 2px rgba(250,160,130,0.46), 0 0 4px rgba(220,105,85,0.28), 0 0 10px rgba(185,75,55,0.08); }
      50%      { text-shadow: 0 0 1px rgba(255,205,180,0.84), 0 0 2.5px rgba(252,170,140,0.62), 0 0 5px rgba(230,115,90,0.40), 0 0 12px rgba(195,85,65,0.12); }
    }

    /* Logo top-left — 50% smaller than previous, clickable back to home */
    .brand-mark {
      position: fixed;
      top: 3.2vh;
      left: 3.2vw;
      z-index: 70;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45em;
      text-decoration: none;
      cursor: pointer;
      transition: opacity 0.35s ease;
    }

/* ── Top header (socials + Book CTA + menu toggle, fixed top-right) ── */
    .topbar-right {
      position: fixed;
      top: 3.2vh;
      /* 3.2vw → 2vw (retour Lucas 17/07 : header + CTA décalés à droite ;
         « Home » ne doit pas chevaucher la ligne médiane des écrans scindés) */
      right: 2vw;
      z-index: 70;
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.05vw, 17px);
    }

    /* ── Horizontal header nav (feedback client 30/06/2026 : menu header
       classique sur toutes les pages, sidebar supprimée en desktop).
       Typographie alignée sur .menu-list a ; le burger + .menu-panel
       restent le menu tablette/mobile (≤ 1024px). ── */
    .topbar-nav {
      display: flex;
      align-items: center;
      /* resserré (retour Lucas 10/07, re-serré 17/07 : « Home » chevauchait
         encore la ligne médiane) — gaps réduits, le bloc respire à droite */
      gap: clamp(10px, 1.05vw, 18px);
      margin-right: clamp(3px, 0.45vw, 8px);
    }
    .topbar-nav a {
      font-family: 'Outfit', sans-serif;
      /* +10% header (05/07) puis −5 % (10/07, header trop long) :
         clamp(10.45px, 0.77vw, 13.2px) × 0.95 */
      font-size: clamp(9.93px, 0.73vw, 12.54px);
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      text-decoration: none;
      position: relative;
      padding: 0.35em 0;
      white-space: nowrap;
      transition: color 0.3s ease;
    }
    .topbar-nav a::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 0; height: 1px;
      background: rgba(255,235,210,0.85);
      transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
    }
    /* glow au survol (retour Lucas 13/07) — text-shadow statique, seule
       l'opacité respire ailleurs : conforme garde-fou animations */
    .topbar-nav a:hover { color: #fff; text-shadow: var(--neonGlowSoft); }
    .topbar-nav a:hover::after { width: 100%; }
    /* ── Sous-menu About (hover / focus) : accès direct aux 3 sous-pages ── */
    .topbar-nav .nav-has-sub { position: relative; display: flex; align-items: center; }
    .nav-sub {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      /* pont de survol haut + halo latéral/bas : un léger dépassement de
         trajectoire en visant un lien ne fait plus sortir du sous-menu */
      padding: 10px 16px 16px;
      opacity: 0;
      visibility: hidden;
      /* Fermeture avec DÉLAI DE GRÂCE (retour Lucas 13/07 : le sous-menu
         disparaissait pendant la descente de la souris, impossible de
         cliquer). Le panneau reste visible — et donc survolable, ce qui
         ré-ouvre le menu — 0.35s après la sortie du hover ; visibility
         n'est retirée qu'en toute fin (0.6s). Ouverture : immédiate
         (transitions sans délai redéclarées dans la règle :hover). */
      transition: opacity 0.25s ease 0.35s,
                  transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                  visibility 0s linear 0.6s;
    }
    .nav-sub-panel {
      display: flex;
      flex-direction: column;
      min-width: 11em;
      padding: 0.6em 0;
      background: rgba(30, 12, 6, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 240, 220, 0.14);
      border-radius: 6px;
      box-shadow: 0 14px 40px rgba(10, 4, 2, 0.45);
    }
    .nav-has-sub:hover .nav-sub,
    .nav-has-sub:focus-within .nav-sub {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(2px);
      transition: opacity 0.25s ease,
                  transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                  visibility 0s;
    }
    .nav-sub-panel a {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(9.4px, 0.69vw, 11.9px);
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
      text-decoration: none;
      padding: 0.7em 1.4em;
      white-space: nowrap;
      transition: color 0.25s ease, background 0.25s ease;
    }
    .nav-sub-panel a:hover {
      color: #fff;
      text-shadow: var(--neonGlowSoft);
      background: rgba(255, 240, 220, 0.06);
    }

    /* Tablette & mobile : burger + panel conservés, nav horizontale masquée */
    @media (max-width: 1024px) {
      .topbar-nav { display: none; }
    }

    /* Social icons */
    .topnav-social {
      display: flex;
      align-items: center;
      gap: clamp(8px, 0.7vw, 12px);
    }
    .topnav-social a {
      color: rgba(255,255,255,0.75);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(26px, 2vw, 32px);
      height: clamp(26px, 2vw, 32px);
      border-radius: 50%;
      transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .topnav-social a:hover { color: #fff; transform: translateY(-1px); }
    .topnav-social svg { display: block; width: 60%; height: 60%; }

    /* Book CTA — header variant of .cta, compact.
       Higher specificity (.cta.cta-book) so it beats the .cta fade-in
       that's defined later in the stylesheet. Must appear immediately
       on page load, like the social icons beside it. No transitions on
       hover \u2014 colour/border snap instantly, no sharpness shift. */
    .cta.cta-book {
      padding: 0.8em 1.65em;
      /* +12.5 % (retour Lucas 17/07 : « entre les deux ») :
         clamp(8.58px, 0.68vw, 11.2px) × 1.125 */
      font-size: clamp(9.65px, 0.77vw, 12.6px);
      letter-spacing: 0.22em;
      opacity: 1;
      animation: none;
      transition: none;
    }
    .cta-book .arrow { font-size: 0.95em; }
    /* Book CTA stays exactly in place when the sidebar opens \u2014 no shift */
    body.menu-open .topnav-social { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
    body.menu-open .cta-book { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }

    /* ── Menu button (3 asymmetric bars → ×) ─────────────────────────────── */
    .menu-toggle {
      position: relative;
      z-index: 1;
      /* +10% header (demande Lucas 05/07/2026) */
      width: clamp(35.2px, 2.86vw, 46.2px);
      height: clamp(35.2px, 2.86vw, 46.2px);
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      -webkit-tap-highlight-color: transparent;
    }
    /* Desktop : la nav horizontale .topbar-nav remplace la sidebar — burger
       masqué (feedback client 30/06/2026). Déclaré après le display:grid
       ci-dessus pour gagner la cascade à spécificité égale. */
    @media (min-width: 1025px) {
      .menu-toggle { display: none; }
    }

/* ── Sidebar menu (slides in from the right) ────────────────────────── */
    .menu-panel {
      position: fixed;
      top: 0; right: 0;
      width: min(22vw, 320px);
      height: 100vh;
      z-index: 65;
      /* 2026-06-23 : backdrop-filter blur 18px → 8px (~5× moins cher),
         opacité de fond compensée 0.94 → 0.96 pour préserver l'effet glassmorphism. */
      background: rgba(48,20,12,0.96);
      backdrop-filter: blur(8px) saturate(1.05);
      -webkit-backdrop-filter: blur(8px) saturate(1.05);
      border-left: 1px solid rgba(255,255,255,0.06);
      padding: 14vh 2.2vw 6vh;
      padding-left: 3.2vw;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 3.2vh;
      transform: translateX(100%);
      transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
      pointer-events: none;
    }

/* Much smaller menu text */
    .menu-list a {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(13px, 0.96vw, 16.5px);
      font-weight: 350;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      text-decoration: none;
      display: inline-block;
      position: relative;
      padding: 0.35em 0;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }
    .menu-list a::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 0; height: 1px;
      background: rgba(255,235,210,0.85);
      transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
    }
    /* Hover \u2014 just the underline + a gentle opacity dim. No size change. */
    .menu-list a::after { width: 0; }
    body.menu-open .menu-list a:hover { opacity: 0.6; }

.menu-foot {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 0.25em;
      margin-top: auto;
      font-style: normal;
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(9.5px, 0.69vw, 11.7px);
      font-weight: 300;
      letter-spacing: 0.1em;
      text-transform: none;
      color: rgba(255,255,255,0.55);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.5s ease 0.55s, transform 0.5s ease 0.55s;
    }

/* Social icons inside the sidebar footer */
    .menu-foot-social {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 1.6em;
      padding-top: 1.4em;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .menu-foot-social a {
      width: 26px; height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: rgba(255,255,255,0.62);
      transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .menu-foot-social a:hover { color: rgba(255,235,210,1); transform: translateY(-1px); }
    .menu-foot-social svg { display: block; }

    /* Scrim behind the panel */
    .menu-scrim {
      position: fixed;
      inset: 0;
      z-index: 62;
      background: rgba(20,8,4,0);
      pointer-events: none;
      transition: background-color 0.55s ease;
    }
    body.menu-open .menu-scrim {
      background: rgba(20,8,4,0.42);
      pointer-events: auto;
    }
    .brand-logo {
      /* +25% (feedback client 30/06/2026) : clamp(72px, 6.6vw, 108px) × 1.25 */
      width: clamp(90px, 8.25vw, 135px);
      height: auto;
      display: block;
      filter: var(--logoGlow);
      will-change: opacity;
      animation: logoBreath 6s ease-in-out infinite;
    }
    .brand-location {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(7.68px, 0.576vw, 9.6px);
      font-weight: 300;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      padding-left: 0.42em;
      text-shadow: var(--neonGlowSoft);
      will-change: opacity;
      animation: neonBreathSoft 6s ease-in-out infinite;
    }

    /* ── Page-by-page snap scroll ── */
    .snap {
      position: fixed;
      inset: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      z-index: 10;
      scrollbar-width: none;
    }
    .snap::-webkit-scrollbar { display: none; }
    .panel {
      position: relative;
      min-height: 100vh;
      height: 100vh;
      width: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: flex;
      flex-direction: column;
    }

    /* Hero panel — image right half, text centered vertically on the left.
       Specificity bump (.panel.panel-hero) intentional: other pages
       (formulas, practices, practices-detail) redefine .panel with
       align-items/padding overrides that, due to concat order, would
       otherwise win on equal specificity. The .panel.panel-hero
       compound bumps us to (0,2,0). Same trick on .panel-manifesto
       and .panel-footer below. */
    .panel.panel-hero {
      padding: 0 0 0 5vw;
      justify-content: center;
      align-items: flex-start;
    }
    .hero-image {
      position: absolute;
      top: 0;
      right: 0;
      width: 50vw;
      height: 100vh;
      z-index: 3;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      animation: fadeInSoft 2.4s cubic-bezier(0.25,0.1,0.25,1) 0.2s forwards;
    }
    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: saturate(1.02) contrast(1.02);
    }
    /* Subtle film grain over the image only (very soft) */
    .hero-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,235,210,0.04) 1px, transparent 1px);
      background-size: 3px 3px;
      mix-blend-mode: overlay;
      opacity: 0.5;
      pointer-events: none;
      z-index: 3;
    }

    /* Manifesto panel — image LEFT, text RIGHT (inverse of hero) */
    .panel.panel-manifesto {
      padding: 0 6vw 0 56vw;   /* more breathing room left & right */
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }
    /* Content wrapper — anchor so the reveal-stage can be absolute
       below without shifting the paragraph. */
    .manifesto-content {
      position: relative;
      width: 100%;
      max-width: 38vw;
    }
    .manifesto-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 50vw;
      height: 100vh;
      z-index: 3;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.4s cubic-bezier(0.25,0.1,0.25,1);
    }
    .panel-manifesto.is-active .manifesto-image { opacity: 1; }
    .manifesto-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: saturate(1.02) contrast(1.02);
    }
    .manifesto-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,235,210,0.04) 1px, transparent 1px);
      background-size: 3px 3px;
      mix-blend-mode: overlay;
      opacity: 0.5;
      pointer-events: none;
      z-index: 3;
    }
    /* Manifesto prose — 3 stacked lines, plain, no glow (buttons glow) */
    .manifesto-mechanism {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: clamp(14.5px, 1.52vw, 22px);
      letter-spacing: 0.005em;
      line-height: 1.55;
      color: #fff;
    }
    .manifesto-mechanism p {
      margin: 0 0 1.1em 0;
    }
    .manifesto-mechanism p:last-child { margin-bottom: 0; }
    .manifesto-content > .cta { margin-top: clamp(15px, 1.27vw, 23px); }

    /* Hero CTAs — stacked vertically, gentle spacing */
    .hero-ctas {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(10px, 1vw, 16px);
    }
    @media (min-width: 780px) {
      .hero-ctas { flex-direction: row; gap: clamp(10px, 1.2vw, 18px); }
    }

    /* Horizontal CTA group — Practices / Narrative / Book on sub-page 2 */
    .cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(8px, 0.85vw, 14px);
      margin-top: clamp(22.5px, 1.9vw, 34.5px);
    }
    @media (max-width: 640px) {
      .cta-group { gap: 8px; }
    }

    /* ── Interactive reveal — inline triggers inside prose ── */
    .reveal-trigger {
      font-family: inherit;
      font-weight: 500;
      font-size: inherit;
      letter-spacing: inherit;
      color: #fff;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      position: relative;
      display: inline;
      white-space: nowrap;
      text-decoration: none;
      transition: color 0.08s ease;
      /* Glow only on the two interactive terms */
      text-shadow: var(--neonGlow);
      will-change: opacity;
      animation: neonBreath 6s ease-in-out infinite;
    }
    .reveal-trigger::after {
      content: ' +';
      font-weight: 400;
      color: inherit;
      display: inline-block;
      transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
      transform-origin: 55% 55%;
    }
    .reveal-trigger:hover { color: rgba(255,235,210,1); }
    .reveal-trigger[aria-expanded="true"]::after {
      transform: rotate(45deg);
    }

    /* Reveal panel — absolutely anchored below paragraph so main text stays put */
    .reveal-stage {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s cubic-bezier(0.22,1,0.36,1);
      pointer-events: none;
    }
    .reveal-stage.open { grid-template-rows: 1fr; pointer-events: auto; }
    .reveal-inner { overflow: hidden; min-height: 0; }

    .reveal-panel {
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
      padding: 3.5vh 0 1vh;
      display: none;
    }
    .reveal-panel.visible {
      display: block;
    }
    .reveal-stage.open .reveal-panel.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-label {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(10.5px, 0.84vw, 13px);
      font-weight: 500;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: rgba(255,235,210,0.95);
      margin-bottom: 2.5vh;
      text-shadow: var(--neonGlowSoft);
      will-change: opacity;
      animation: neonBreathSoft 6s ease-in-out infinite;
    }
    .reveal-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.1em 2em;
      text-align: left;
    }
    .reveal-list-method {
      grid-template-columns: 1fr;
      gap: 1.2em;
    }
    .reveal-list-method li {
      padding-left: 0;
      display: flex;
      align-items: flex-start;
      gap: 0.85em;
    }
    .reveal-list.reveal-list-method li::before { content: none; }
    .method-text { display: block; }
    .reveal-list-method .subch-keyword,
    .method-name {
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      text-shadow: var(--neonGlowSoft);
      will-change: opacity;
      animation: neonBreathSoft 6s ease-in-out infinite;
    }
    .reveal-list li {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(13px, 1.03vw, 16.5px);
      font-weight: 300;
      letter-spacing: 0.02em;
      color: rgba(255,255,255,0.82);
      position: relative;
      padding-left: 1.1em;
      line-height: 1.5;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal-list li::before {
      content: '—';
      position: absolute;
      left: 0;
      top: 0;
      color: rgba(255,235,210,0.55);
    }
    .reveal-stage.open .reveal-list li {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stagger — very subtle, almost simultaneous */
    .reveal-stage.open .reveal-list li:nth-child(1) { transition-delay: 0.02s; }
    .reveal-stage.open .reveal-list li:nth-child(2) { transition-delay: 0.04s; }
    .reveal-stage.open .reveal-list li:nth-child(3) { transition-delay: 0.06s; }
    .reveal-stage.open .reveal-list li:nth-child(4) { transition-delay: 0.08s; }
    .reveal-stage.open .reveal-list li:nth-child(5) { transition-delay: 0.10s; }
    .reveal-stage.open .reveal-list li:nth-child(6) { transition-delay: 0.12s; }
    .reveal-stage.open .reveal-list li:nth-child(7) { transition-delay: 0.14s; }
    .reveal-stage.open .reveal-list li:nth-child(8) { transition-delay: 0.16s; }
    .reveal-stage.open .reveal-list li:nth-child(9) { transition-delay: 0.18s; }

    @media (max-width: 720px) {
      .reveal-list { grid-template-columns: repeat(2, 1fr); }
    }

    /* Footer panel (1.3) — specificity bumped to compete with foreign .panel overrides */
    .panel.panel-footer {
      padding: 0;
      justify-content: flex-start;
      align-items: stretch;
      gap: 0;
    }
    /* Page 3 — image fills the top half, footer content the bottom half */
    .footer-hero-image {
      position: relative;
      width: 100%;
      height: 50vh;
      flex: 0 0 50vh;
      overflow: hidden;
    }
    .footer-hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: saturate(1.02) contrast(1.02);
    }
    .footer-hero-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,235,210,0.04) 1px, transparent 1px);
      background-size: 3px 3px;
      mix-blend-mode: overlay;
      opacity: 0.5;
      pointer-events: none;
    }
    .footer-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3.5vh;
      padding: 4.5vh 6vw 4vh;
    }
    .footer-body .footer-cols { margin-top: 0; }
    .footer-body .footer-bottom { margin-top: 0; padding-top: 3vh; }
    .footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .footer-book {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(28px, 4.2vw, 78px);
      font-weight: 300;
      letter-spacing: 0.04em;
      line-height: 1;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.35em;
      transition: letter-spacing 0.35s cubic-bezier(0.22,1,0.36,1),
                  color 0.22s ease-out;
      text-shadow: var(--neonGlow);
      will-change: opacity;
      animation: neonBreath 6s ease-in-out infinite;
    }
    .footer-book .arrow {
      font-size: 0.55em;
      line-height: 1;
      position: relative;
      top: 0.02em;
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .footer-book:hover {
      letter-spacing: 0.08em;
      color: rgba(255,235,210,1);
    }
    .footer-book:hover .arrow { transform: translateX(8px); }

    .footer-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3vw;
      margin-top: 8vh;
    }
    .footer-col { display: flex; flex-direction: column; gap: 0.9em; font-style: normal; }
    .footer-label {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(9.5px, 0.76vw, 12.6px);
      font-weight: 500;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(255,235,210,0.85);
      margin-bottom: 0.6em;
      text-shadow: var(--neonGlowSoft);
      will-change: opacity;
      animation: neonBreathSoft 6s ease-in-out infinite;
    }
    .footer-col a,
    .footer-col p {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(11.7px, 0.9vw, 14.8px);
      font-weight: 300;
      line-height: 1.7;
      letter-spacing: 0.015em;
      color: rgba(255,255,255,0.80);
      text-decoration: none;
      transition: color 0.3s ease, opacity 0.3s ease;
    }
    .footer-col a:hover { color: rgba(255,235,210,1); }

/* Socials inside the site footer */
    .footer-social {
      display: flex; align-items: center; gap: 0.9em;
      color: rgba(255,255,255,0.55);
    }
    .footer-social a {
      color: inherit;
      display: inline-flex; align-items: center; justify-content: center;
      width: clamp(21px, 1.7vw, 27px); height: clamp(21px, 1.7vw, 27px);
      border-radius: 50%;
      transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .footer-social a:hover { color: #fff; transform: translateY(-1px); }
    .footer-social svg { display: block; width: 60%; height: 60%; }

    .footer-bottom {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: flex-end;
      gap: 2vw;
      padding-top: 6vh;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 6vh;
    }
    .footer-bottom .footer-desktop-only.footer-branding { justify-self: start; }
    .footer-bottom .footer-desktop-only.footer-social   { justify-self: center; }
    .footer-bottom .footer-desktop-only.footer-legal    { justify-self: end; }
    .footer-mobile-line1, .footer-mobile-line2 { display: none; }
    .footer-legal {
      display: flex;
      gap: 2.2em;
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(9.5px, 0.74vw, 11.7px);
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    .footer-legal a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
    .footer-legal a:hover { color: rgba(255,235,210,0.9); }
    .footer-branding {
      display: flex; align-items: center; gap: 0.6em;
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(9.5px, 0.74vw, 11.7px);
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    .footer-branding a {
      display: inline-flex; align-items: center;
      color: inherit; text-decoration: none;
      transition: color 0.3s ease;
    }
    .footer-branding a:hover { color: rgba(255,235,210,0.9); }
    .footer-branding img {
      height: 0.82em;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.75;
      transition: opacity 0.3s ease;
    }
    .footer-branding a:hover img { opacity: 0.9; }
    .footer-mark img {
      width: clamp(36px, 3vw, 52px);
      height: auto;
      display: block;
      filter: drop-shadow(0 0 2.5px rgba(255,225,195,0.25));
    }

    /* Breadcrumb dots — right middle */
    .snap-dots {
      position: fixed;
      right: 2.5vw;
      top: 50%;
      transform: translateY(-50%);
      z-index: 60;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .snap-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      border: none; padding: 0;
      transition: all 0.3s;
      cursor: pointer;
      position: relative;
    }
    .snap-dot.active {
      background: rgba(210,168,135,0.7);
      transform: scale(1.4);
    }
    .hero-title {
      font-family: 'Outfit', sans-serif;
      /* Nouveau titre plus long (feedback client 30/06/2026 : « A Destination
         for Health and Inner Balance ») : 2.76vw/40px + 20ch → wrap en 3
         lignes. Taille réduite et gabarit élargi pour un rendu 2 lignes. */
      font-size: clamp(16px, 2.5vw, 36px);
      font-weight: 500;
      letter-spacing: 0.055em;
      line-height: 1.08;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 4.5vh;
      max-width: 30ch;
      opacity: 0;
      text-shadow: var(--neonGlow);
      animation: fadeIn 1.8s cubic-bezier(0.25,0.1,0.25,1) 0.4s forwards,
                 neonBreath 6s ease-in-out 0.4s infinite;
    }
    /* FR : « Une Destination pour la Santé » (29ch) — taille légèrement
       réduite pour que la ligne 1 tienne dans la colonne gauche. */
    html[lang="fr"] .hero-title { font-size: clamp(15px, 2.3vw, 33px); }
.hero-sub {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(14.5px, 1.52vw, 22px);
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.7;
      color: #fff;
      /* glow (retour Lucas 13/07) — text-shadow statique, neonBreathSoft
         fait déjà respirer l'opacité */
      text-shadow: var(--neonGlowSoft);
      margin-bottom: 4.5vh;
      opacity: 0;
      animation: fadeIn 1.8s cubic-bezier(0.25,0.1,0.25,1) 1.0s forwards,
                 neonBreathSoft 6s ease-in-out 1.0s infinite;
    }
    /* Hiérarchie typographique du hero (feedback client 16/07/2026 :
       « tout est au même niveau de lecture ») — la ligne opening passe
       en ITALIQUE (accent éditorial, même langage que « with Elena »
       sur Events) ; l'adresse descend au niveau méta : petites
       capitales Outfit espacées, plus discrètes. */
    .hero-detail {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(14.5px, 1.52vw, 22px);
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0.02em;
      line-height: 1.7;
      color: #fff;
      margin-bottom: 0.3vh;
      opacity: 0;
      text-shadow: none;
      animation: fadeInSoft 1.8s cubic-bezier(0.25,0.1,0.25,1) 1.3s forwards;
    }
    .hero-detail.hero-detail-address {
      font-family: 'Outfit', sans-serif;
      font-style: normal;
      font-size: clamp(9.5px, 0.85vw, 12.5px);
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255, 244, 228, 0.62);
      margin-top: 0.8vh;
    }
    .hero-detail + .hero-ctas {
      margin-top: 4vh;
    }

    /* CTA — solid white on hover (brand terracotta text), no glow */
    /* CTA en BOUTON PLEIN (feedback client 16/07/2026 : « trop petits,
       leur donner un fond pour les mettre en avant ») — fond blanc chaud,
       texte sombre, taille +25 %. Le hover inverse : contour sur fond
       transparent (l'ancien état par défaut), texte blanc. */
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 0.9em;
      padding: 0.85em 1.7em;
      font-family: 'Outfit', sans-serif;
      /* +12.5 % (retour Lucas 17/07 : « entre les deux ») —
         V15 clamp(7.8px, 0.62vw, 10.2px) × 1.125 (le ×1.25 du 16/07 était trop) */
      font-size: clamp(8.8px, 0.70vw, 11.5px);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--samma-bg);           /* Sea of Sand queen */
      /* fond blanc chaud avec léger gradient + grain (retour Lucas 17/07 :
         rappeler l'identité Sammā) — grain SVG turbulence en soft-light,
         gradient diagonal beige très doux. Le hover (background: transparent,
         shorthand) efface gradient et grain d'un coup. */
      background-color: #FFF6EA;
      background-image:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIj48ZmlsdGVyIGlkPSJnIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiBmaWx0ZXI9InVybCgjZykiIG9wYWNpdHk9IjAuMjIiLz48L3N2Zz4="),
        linear-gradient(135deg, #FFFAF1 0%, #FBF0DF 55%, #F4E4CC 100%);
      background-size: 120px 120px, cover;
      background-blend-mode: soft-light, normal;
      border: 1px solid #FFF6EA;
      border-radius: 999px;
      text-decoration: none;
      cursor: pointer;
      opacity: 0;
      transition: none;
      animation: fadeIn 1.6s cubic-bezier(0.25,0.1,0.25,1) 1.4s forwards;
    }
    .cta:hover {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.85);
      transition: none;
    }
    .cta .arrow { display: inline-block; transition: none; }
    .cta:hover .arrow { transform: translateX(3px); }
  
    /* ── Language switcher (EN | FR | DE) ─────────────────────────── */
    /* NB : bloc dupliqué (déclaration antérieure ~l.159) — celui-ci gagne la
       cascade. +25 % (feedback client 16/07/2026 : EN|FR trop petit) :
       clamp(8.36px, 0.62vw, 10.56px) × 1.25 */
    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 0.45em;
      font-family: 'Outfit', sans-serif;
      font-size: clamp(10.45px, 0.78vw, 13.2px);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }
    .lang-switcher button {
      background: transparent; border: 0; padding: 0.2em 0.15em;
      color: rgba(255,255,255,0.55); cursor: pointer;
      font: inherit; letter-spacing: inherit; text-transform: inherit;
      transition: color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .lang-switcher button:hover { color: rgba(255,255,255,0.95); }
    .lang-switcher button.is-current { color: #fff; }
    .lang-switcher .lang-sep {
      color: rgba(255,255,255,0.25); user-select: none;
    }
    /* Topbar variant — hides when menu opens (like .topnav-social) */
    body.menu-open .topbar-right .lang-switcher,
    body.menu-open .topbar .lang-switcher {
      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    }
    /* Sidebar variant — appears at the bottom of the slide-in menu */
    .menu-foot .lang-switcher {
      margin-top: 1.8vh;
      padding-top: 1.4vh;
      border-top: 1px solid rgba(255,255,255,0.08);
      width: 100%;
      font-size: clamp(9.5px, 0.66vw, 11.7px);
      letter-spacing: 0.28em;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease 0.45s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s;
    }
    body.menu-open .menu-foot .lang-switcher { opacity: 1; transform: translateY(0); }
    .menu-foot .lang-switcher button { color: rgba(255,255,255,0.6); }
    .menu-foot .lang-switcher button.is-current { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
       RESPONSIVE — Tablet (≤1024px)
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .panel-hero {
        padding: 0 6vw 50vh;
        justify-content: center;
        align-items: flex-start;
      }
      .hero-image {
        width: 100vw;
        height: 50vh;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
      }
      .hero-title { font-size: clamp(18px, 3.2vw, 32px); margin-bottom: 2.5vh; }
      .hero-sub { font-size: clamp(13px, 2vw, 22px); margin-bottom: 2.5vh; }
      .hero-detail { font-size: clamp(12px, 1.8vw, 22px); }
      .hero-detail + .hero-ctas { margin-top: 2.5vh; }

      .panel-manifesto {
        padding: 0 6vw 50vh;
        justify-content: center;
        align-items: flex-start;
      }
      .manifesto-content { max-width: 100%; width: 100%; }
      .manifesto-image {
        width: 100vw;
        height: 50vh;
        top: auto;
        bottom: 0;
        left: 0;
      }
      .manifesto-mechanism { font-size: clamp(14px, 2.2vw, 22px); }

      .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2.5vw 5vw; margin-top: 4vh; }
      .panel-footer { padding: 6vh 6vw 4vh; }
      .footer-book { font-size: clamp(24px, 4vw, 48px); }
      .footer-label { font-size: clamp(8px, 1.2vw, 11px); }
      .footer-col a, .footer-col p { font-size: clamp(10px, 1.5vw, 14px); }
      .footer-bottom { padding-top: 3vh; margin-top: 3vh; }
      .footer-legal { font-size: clamp(8px, 1.1vw, 11px); }
      .footer-mark img { width: clamp(28px, 3vw, 40px); }

      /* +25% (feedback client 30/06/2026) : clamp(52.8px, 6vw, 81.6px) × 1.25 */
      .brand-logo { width: clamp(66px, 7.5vw, 102px); }
      .brand-location { font-size: clamp(6px, 0.6vw, 8.4px); }
      /* +10% header (demande Lucas 05/07/2026) : clamp(6px, 0.7vw, 8px) × 1.1 */
      .cta.cta-book { padding: 0.6em 1.2em; font-size: clamp(6.6px, 0.77vw, 8.8px); }
    }

    /* ══════════════��════════════════════════════════════════════════
       RESPONSIVE — Mobile (≤720px)
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 720px) {
      html, body { height: 100dvh; }

      /* ── Header ── */
      /* +25% (feedback client 30/06/2026) : clamp(60.48px, 17.28vw, 77.76px) × 1.25
         Drop-shadows alignés sur .close-logo comme --logoGlow (05/07/2026) */
      .brand-logo { width: clamp(75.6px, 21.6vw, 97.2px); animation: none; filter: drop-shadow(0 0 0.75px rgba(255,233,205,0.88)) drop-shadow(0 0 2px rgba(255,223,193,0.63)) drop-shadow(0 0 4px rgba(247,205,170,0.35)); }
      .brand-location { font-size: clamp(6px, 1.68vw, 8.4px); letter-spacing: 0.3em; }
      .brand-mark { top: 4vh; left: 4vw; gap: 0.3em; }
      .topbar-right { top: 4vh; right: 4vw; gap: clamp(8px, 2.5vw, 14px); }
      /* +10% header (demande Lucas 05/07/2026) sur les overrides mobile */
      .cta.cta-book {
        padding: 0.35em 0.9em;
        font-size: clamp(7.7px, 2.2vw, 9.5px);
        min-height: 29px;
        border-width: 0.5px;
      }
      .cta-book .arrow { font-size: 0.8em; }
      .menu-toggle { width: clamp(28.6px, 7.15vw, 35.2px); height: clamp(28.6px, 7.15vw, 35.2px); }

      /* ── Sidebar menu — reproduce laptop layout ── */
      .menu-panel {
        width: 100vw;
        padding: 12vh 8vw 6vh;
      }
      .menu-list a {
        font-size: clamp(13px, 4vw, 16px);
        letter-spacing: 0.2em;
        padding: 0.5em 0;
      }
      .menu-foot {
        font-size: clamp(10.4px, 2.9vw, 12.7px);
      }
      .menu-foot-social a { width: 22px; height: 22px; }
      body.menu-open .topbar-right {
        right: 8vw;
        left: auto;
        justify-content: flex-end;
      }
      body.menu-open .topbar-right .lang-switcher { display: none; }
      body.menu-open .brand-mark { opacity: 0; pointer-events: none; }

      /* ── Standardized CTA for mobile ── */
      /* +25 % mobile (feedback client 16/07/2026 : CTA trop petits) */
      .cta {
        /* +12.5 % mobile (retour Lucas 17/07 : « entre les deux ») :
           clamp(6.48px, 1.8vw, 8px) × 1.125 */
        font-size: clamp(7.3px, 2.03vw, 9px);
        padding: 0.55em 1.25em;
        min-height: 32px;
        letter-spacing: 0.18em;
      }

      .lang-switcher {
        font-size: clamp(10px, 2.75vw, 13px);
      }

      /* ── Hero: text centered in the TOP HALF only, image = bottom 50% ── */
      .panel-hero {
        padding: 5vh 6vw 50vh;
        justify-content: center;
        align-items: flex-start;
      }
      .hero-image {
        width: 100vw;
        height: 50vh;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 1;
      }
      .hero-title {
        /* 2 lignes exactement (retour Lucas 24/07) : les <span> passent en
           nowrap et la taille est calée sur la ligne 1 (« A Destination for
           Health », 24ch) pour tenir dans les 88vw utiles. */
        font-size: clamp(20px, 5.75vw, 36px);
        max-width: 100%;
        margin-bottom: 1.5vh;
        line-height: 1.1;
      }
      .hero-title span { white-space: nowrap; }
      /* FR : ligne 1 « Une Destination pour la Santé » (29ch) — ratio 24/29 */
      html[lang="fr"] .hero-title { font-size: clamp(17px, 4.75vw, 30px); }
      .hero-sub {
        /* légèrement agrandi (retour Lucas 24/07) */
        font-size: clamp(13px, 3.1vw, 16.5px);
        margin-bottom: 1.5vh;
      }
      .hero-detail {
        font-size: clamp(11px, 2.4vw, 14px);
      }
      .hero-detail + .hero-ctas { margin-top: 1.5vh; }
      .hero-ctas { align-items: flex-start; }

      /* ── Manifesto: text centered in TOP HALF, image = bottom 50% ── */
      .panel-manifesto {
        padding: 0 6vw 50vh;
        justify-content: center;
        align-items: flex-start;
      }
      .manifesto-content {
        max-width: 100%;
        width: 100%;
      }
      .manifesto-image {
        width: 100vw;
        height: 50vh;
        top: auto;
        bottom: 0;
        left: 0;
        opacity: 1;
      }
      .manifesto-mechanism {
        font-size: clamp(12px, 3.36vw, 15.6px);
        line-height: 1.5;
      }
      .manifesto-mechanism p { margin: 0 0 0.6em 0; }
      .manifesto-content > .cta { margin-top: clamp(8px, 1.5vh, 14px); }

      /* ── Reveal panels — discreet, 2 columns on mobile ── */
      .reveal-panel { padding: 0.8vh 0 0.2vh; }
      .reveal-label {
        font-size: clamp(7.8px, 2.16vw, 9.6px);
        margin-bottom: 0.6vh;
        letter-spacing: 0.2em;
      }
      .reveal-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3em 1.2em;
      }
      .reveal-list li {
        font-size: clamp(9.6px, 2.64vw, 12px);
        line-height: 1.3;
        padding-left: 0.7em;
      }
      .reveal-list li::before { font-size: 0.8em; }
      .reveal-list-method {
        grid-template-columns: 1fr;
        gap: 0.4em;
      }
      .reveal-list-method li {
        font-size: clamp(9px, 2.4vw, 10.8px);
        line-height: 1.3;
      }
      .cta-group { margin-top: clamp(4px, 0.8vh, 10px); gap: 4px; }

      /* ── Footer — content vertically centered in the viewport ── */
      .panel-footer {
        padding: 4vh 6vw 1.5vh;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
      }
      .footer-top {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-shrink: 0;
        margin-top: 220px;
      }
      .footer-book { font-size: clamp(19.2px, 6vw, 28.8px); }
      .footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2vh 4vw;
        margin: auto 0;
      }
      .footer-label {
        font-size: clamp(10.8px, 3vw, 14.4px);
        margin-bottom: 0.2em;
      }
      .footer-col { gap: 0.2em; }
      .footer-col a, .footer-col p {
        font-size: clamp(12px, 3.36vw, 15.6px);
        line-height: 1.3;
      }
      .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5vh;
        padding-top: 1.5vh;
        margin-top: auto;
        flex-shrink: 0;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      /* Scopé à .footer-bottom (spécificité 0,2,0) : sinon le second
         `.footer-social { display:flex }` standalone (plus bas dans la
         feuille, même spécificité 0,1,0) ré-affichait l'icône sociale
         desktop en mobile → doublon avec celle de footer-mobile-line1
         (retour Lucas 14/07). */
      .footer-bottom .footer-desktop-only { display: none; }
      .footer-mobile-line1,
      .footer-mobile-line2 {
        display: flex;
        /* pleine largeur (retour Lucas 13/07 : la barre du bas du footer
           home était resserrée au centre) — répartition bord à bord */
        justify-content: space-between;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.2em 0.5em;
        font-family: 'DM Sans', sans-serif;
        font-size: clamp(5.5px, 1.65vw, 7px);
        font-weight: 300;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.4);
      }
      .footer-mobile-line1 a,
      .footer-mobile-line2 a {
        color: inherit;
        text-decoration: none;
      }
      .footer-mobile-line1 .footer-branding {
        font-size: inherit;
        font-weight: 300;
        letter-spacing: 0.04em;
        color: inherit;
        gap: 0.4em;
      }
      .footer-mobile-line1 .footer-branding span {
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
      }
      .footer-mobile-line1 .footer-branding img {
        height: 0.82em;
        opacity: 0.75;
      }
      .footer-mobile-line1 .footer-social {
        gap: 0.4em;
      }
      .footer-mobile-line1 .footer-social a {
        width: 12px; height: 12px;
      }
      .footer-mobile-line1 .footer-social svg {
        width: 8px; height: 8px;
      }
      .fm-sep {
        color: rgba(255,255,255,0.2);
        user-select: none;
      }
      .footer-mobile-line2 {
        text-transform: none;
        letter-spacing: 0.03em;
        color: rgba(255,255,255,0.3);
      }
      .footer-social a { width: 14px; height: 14px; }
      .footer-social svg { width: 9px; height: 9px; }
      .footer-legal {
        font-size: clamp(6px, 1.8vw, 7.7px);
        gap: 0.6em;
      }

      /* Breadcrumb dots — keep visible on mobile */
      .snap-dots {
        display: flex;
        right: 3vw;
        gap: 8px;
      }
      .snap-dot { width: 5px; height: 5px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE — Small phones (≤480px)
       ��══════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .hero-title {
        /* 2 lignes (retour Lucas 24/07) — calé sur la ligne 1 en nowrap */
        font-size: clamp(17px, 5.7vw, 24px);
        margin-bottom: 1.2vh;
      }
      html[lang="fr"] .hero-title { font-size: clamp(14px, 4.72vw, 20px); }
      .hero-sub {
        /* légèrement agrandi (retour Lucas 24/07) */
        font-size: clamp(13.5px, 4.1vw, 16px);
        margin-bottom: 0.8vh;
        line-height: 1.35;
      }
      .hero-detail {
        font-size: clamp(12px, 3.59vw, 14px);
        line-height: 1.2;
        margin-bottom: 0.15vh;
      }
      .manifesto-mechanism { font-size: clamp(12px, 3.59vw, 14px); line-height: 1.2; }
      .manifesto-mechanism p { margin: 0 0 0.6em 0; }

      .panel-footer { padding: 3.5vh 5vw 2.5vh; }
      .footer-book { font-size: clamp(19.2px, 6.6vw, 28.8px); }
      .footer-cols { gap: 1.2vh 3vw; }
      .footer-label { font-size: clamp(7.2px, 2.16vw, 9px); }
      .footer-col a, .footer-col p { font-size: clamp(9px, 2.76vw, 12px); }
      .footer-bottom { padding-top: 1.2vh; margin-top: 1.5vh; }
      .footer-legal { font-size: clamp(5px, 1.5vw, 6.5px); }
    }

    /* ── Mobile landscape (812×375) — restore desktop-like split layout ── */
    @media (max-height: 500px) and (orientation: landscape) {
      .panel { height: 100vh; min-height: 100vh; }

      /* Hero — image RIGHT half, text LEFT (like desktop) */
      .panel-hero { padding: 0 0 0 5vw; justify-content: center; align-items: flex-start; }
      .hero-image {
        width: 50vw; height: 100vh;
        top: 0; right: 0; bottom: auto; left: auto;
      }
      .hero-title { font-size: clamp(16px, 2.8vw, 26px); margin-bottom: 1.5vh; max-width: 45vw; }
      .hero-sub { font-size: clamp(11px, 1.5vw, 15px); margin-bottom: 1vh; }
      .hero-detail { font-size: clamp(11px, 1.5vw, 15px); margin-bottom: 0.2vh; }
      .hero-detail + .hero-ctas { margin-top: 1.5vh; }

      /* Manifesto — image LEFT, text RIGHT (like desktop) */
      .panel-manifesto { padding: 0 6vw 0 54vw; justify-content: center; align-items: flex-start; }
      .manifesto-content { max-width: 40vw; }
      .manifesto-image {
        width: 50vw; height: 100vh;
        top: 0; left: 0; bottom: auto; right: auto;
      }
      .manifesto-mechanism { font-size: clamp(11px, 1.5vw, 15px); line-height: 1.5; margin-bottom: 1vh; }

      /* Reveal panels — compact for landscape */
      .reveal-panel { padding: 1.5vh 0 0.5vh; }
      .reveal-label { font-size: clamp(7px, 0.9vw, 10px); margin-bottom: 1vh; }
      .reveal-list { gap: 0.5em 1.5em; }
      .reveal-list li { font-size: clamp(8px, 1vw, 11px); line-height: 1.35; padding-left: 0.9em; }
      .reveal-list-method li { font-size: clamp(8px, 1vw, 11px); }
      .method-step, .method-name { font-size: clamp(8px, 1vw, 11px); }

      /* Footer — push content below header zone */
      .panel-footer { padding: 14vh 6vw 2vh; }
      .footer-book { font-size: clamp(12px, 1.8vw, 20px); }
      .footer-cols { grid-template-columns: repeat(4, 1fr); margin-top: 1.5vh; gap: 0.8vh 2vw; }
      .footer-label { font-size: clamp(5.5px, 0.75vw, 8px); margin-bottom: 0.2em; }
      .footer-col a, .footer-col p { font-size: clamp(6.5px, 0.9vw, 10px); line-height: 1.4; }
      .footer-col { gap: 0.5em; }
      .footer-bottom { padding-top: 0.8vh; margin-top: 0.8vh; }
      .footer-mark img { width: clamp(18px, 2.2vw, 28px); }
      .footer-legal { font-size: clamp(5.5px, 0.75vw, 8px); }
      .footer-social a { width: 16px; height: 16px; }

      .brand-mark { top: 2.5vh; left: 4vw; }
      .topbar-right { top: 2.5vh; }
      .snap-dots { gap: 6px; }
      .snap-dot { width: 5px; height: 5px; }
    }

/* ============================================================
 * site-footer — discreet footer below snap container, used on
 * all pages that include partials/site-footer.{en,fr}.html
 * Extracted from V14 purpose.html inline <style> as the canonical source.
 * Avoid redefining in 10-page-*.css.
 * ============================================================ */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 55;
  padding: 1.8vh 3.2vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
  font-family: 'DM Sans', sans-serif;
  /* +30% (feedback client 30/06/2026) : clamp(9.5px, 0.69vw, 11.7px) × 1.3 */
  font-size: clamp(12.35px, 0.9vw, 15.2px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: rgba(255,255,255,0.48);
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.site-footer a, .site-footer > * { pointer-events: auto; }
.site-footer a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.site-footer a:hover { color: rgba(255,235,210,0.95); }
.site-footer .sf-info {
  justify-self: start;
  display: flex; flex-wrap: wrap;
  gap: 0.4em 1.4em;
  align-items: center;
}
.site-footer .sf-info .sep { color: rgba(255,255,255,0.22); user-select: none; }
.site-footer .sf-contact { display: flex; flex-direction: column; gap: 0.15em; }
.site-footer .sf-social { justify-self: center; }
.site-footer .sf-legal { justify-self: end; display: flex; gap: 1.4em; }
.site-footer .footer-social {
  display: flex; align-items: center; gap: 0.7em;
  color: rgba(255,255,255,0.55);
}
.site-footer .footer-social a {
  color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  /* +30% (feedback client 30/06/2026) : clamp(20px, 1.5vw, 26px) × 1.3 */
  width: clamp(26px, 1.95vw, 33.8px); height: clamp(26px, 1.95vw, 33.8px);
  border-radius: 50%;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.site-footer .footer-social a:hover { color: #fff; transform: translateY(-1px); }
.site-footer .footer-social svg { display: block; width: 62%; height: 62%; }

/* Footer visible only when on last panel (snap-scroll pages) */
body.last-panel .site-footer { opacity: 1; pointer-events: auto; }
body.menu-open .site-footer { opacity: 0; pointer-events: none; }

/* Pages en flux (feedback client 30/06/2026 : le footer de bas de purpose
   apparaît en bas de toutes les pages). Les pages pilotées par un conteneur
   snap (purpose #snapContainer, iconography #snap) gardent l'overlay fixe
   révélé par body.last-panel ; toutes les autres reçoivent le footer dans
   le flux, en bas du document. :has() est supporté par tous les évergreens. */
body:not(:has(#snapContainer)):not(:has(#snap)) .site-footer {
  /* relative (pas static) : le z-index 55 du footer doit s'appliquer pour
     passer au-dessus des éléments positionnés des pages type formulas */
  position: relative;
  opacity: 1;
  pointer-events: auto;
  margin-top: 6vh;
}
/* Pages écran-verrouillé : practices (split liste/preview 100vh) et formulas
   (contenu < 100vh, footer en flux flottait trop haut) — le footer reprend
   l'overlay fixe permanent ancré en bas, identique au rendu du dernier
   panneau de purpose. Le préfixe :not(...) répète la règle de flux ci-dessus
   pour la battre en spécificité. */
body:not(:has(#snapContainer)):not(:has(#snap)):has(main.practices-page) .site-footer,
body:not(:has(#snapContainer)):not(:has(#snap)):has(main.formulas-page) .site-footer {
  position: fixed;
  margin-top: 0;
}

/* Standalone .footer-social (used in topbar / index footer-bottom) */
.footer-social {
  display: flex; align-items: center; gap: 0.9em;
  color: rgba(255,255,255,0.55);
}
.footer-social a {
  color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(22px, 1.7vw, 28px); height: clamp(22px, 1.7vw, 28px);
  border-radius: 50%;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.footer-social a:hover { color: #fff; transform: translateY(-1px); }
.footer-social svg { display: block; width: 62%; height: 62%; }

/* Mobile footer alternative — toggled by media query in pages */
.sf-mobile-line1, .sf-mobile-line2 { display: none; }
.fm-sep { color: rgba(255,255,255,0.2); user-select: none; }

@media (max-width: 720px) {
  .site-footer { bottom: 10px; }
  .site-footer .sf-info,
  .site-footer .sf-social,
  .site-footer .sf-legal { display: none; }
  .sf-mobile-line1, .sf-mobile-line2 {
    display: flex;
    /* pleine largeur (retour Lucas 13/07 : les lignes étaient resserrées
       au centre) : les éléments se répartissent d'un bord à l'autre */
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2em 0.5em;
    font-family: 'DM Sans', sans-serif;
    /* +30% (feedback client 30/06/2026) : clamp(6px, 1.8vw, 7.5px) × 1.3 */
    font-size: clamp(7.8px, 2.34vw, 9.75px);
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .sf-mobile-line1 a, .sf-mobile-line2 a { color: inherit; text-decoration: none; }
  .sf-mobile-line1 .footer-social { display: flex; align-items: center; gap: 0.4em; }
  /* +30% : 12px → 15.6px, icônes 8px → 10.4px */
  .sf-mobile-line1 .footer-social a { width: 15.6px; height: 15.6px; }
  .sf-mobile-line1 .footer-social svg { width: 10.4px; height: 10.4px; }
  .sf-mobile-line2 { text-transform: none; color: rgba(255,255,255,0.3); }
}
@media (max-width: 780px) {
  .site-footer {
    grid-template-columns: 1fr; gap: 0.4vh; text-align: center; padding: 1.2vh 4vw;
  }
  .site-footer .sf-info,
  .site-footer .sf-social,
  .site-footer .sf-legal { justify-self: center; }
}

/* ============================================================
 * Transitions entre pages (feedback client 30/06/2026 — « rendre plus
 * smooth les transitions entre pages », mobile en tête).
 * View Transitions API : cross-fade natif entre pages same-origin,
 * CSS pur, zéro JS (garde-fou #10). Navigateurs sans support : le
 * fondu d'entrée ci-dessous sert de repli. Respecte reduced-motion.
 * ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-reduced-motion: no-preference) {
  body { animation: pageFadeIn 0.5s ease-out; }
}
/* Mobile : entrée plus perceptible — fondu un peu plus long + le contenu
   « se pose » en douceur (translateY sur main, PAS sur body : un transform
   sur body ferait bouger les éléments fixed — topbar, footer, menu).
   Sert aussi de repli visible là où les cross-document view transitions
   ne sont pas supportées (iOS < 18.2). */
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  body { animation-duration: 0.65s; }
  main { animation: pageRise 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
}
/* flèche de l'indicateur de scroll (page Events) */
@keyframes evHintBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pageRise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   FOND BEIGE — composant partagé (design lab « contraste &
   identité » validé — feedback client 30/06/2026, volet 02)
   ══════════════════════════════════════════════════════════════
   Usage, en premier enfant d'une section en position:relative :
     <div class="beige-bg" aria-hidden="true">
       <canvas class="beige-grad"></canvas>
       [<img class="topo-img" src="/assets/images/topo-field.svg" alt="">]
     </div>
   Le contenu de la section doit porter position:relative + z-index ≥ 1.
   Le canvas est peint par assets/js/beige-bg.js (palette calibrée
   boîte de thé) ; grain identique au #c-grain du site, doublé d'une
   couche multiply (piqué perceptible sur fond clair). Les bords haut
   et bas fondent vers le fond sombre (masque alpha court).
   Vit dans 00-base.css car utilisé sur home + practices-detail.     */
.beige-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #AB8B71;               /* fallback avant premier paint */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
}
.beige-bg .beige-grad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(20px);                /* même traitement optique que #c-grad */
  transform: scale(1.18);
  transform-origin: center;
  z-index: 0;
}
/* Grain ×2 : soft-light (identique #c-grain) + multiply léger */
.beige-bg::before,
.beige-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
}
.beige-bg::before { mix-blend-mode: multiply; opacity: 0.16; }
.beige-bg::after  { mix-blend-mode: soft-light; opacity: 1; }
/* Gravure topographique (SVG autonome, couleur ton-sur-ton intégrée) —
   position/masque de dissolution réglés par la slice de chaque page */
.beige-bg .topo-img { position: absolute; z-index: 2; }
/* Gravure topo posée directement sur un fond ROUGE (variantes -warm de
   gen-topo.js) — hors composant beige-bg. Position/taille/masque réglés
   par la slice de chaque page ; sous le contenu (z-index 1, les blocs
   texte des sections sont en z-index ≥ 2). Retour Lucas 17/07. */
img.topo-accent {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}