/* =====================================================================
   system.css — KIT VIVANT (montée en gamme générale du site)
   Chargé APRÈS index.css. Composants partagés repris du langage de
   /reservation : révélation au scroll en cascade, feuilles d'ambiance,
   tilt 3D + halo, soulignés animés, profondeur, barre de progression.
   Tokens dans le :root de index.css. Piloté par js/ambiance.js.
   On anime `translate`/`scale` (propriétés individuelles) — JAMAIS
   `transform` — pour ne pas écraser le lift/tilt des cartes au survol.
   Tout mouvement est coupé proprement en fin de fichier (reduced-motion).
   ===================================================================== */

/* ============ RÉVÉLATION AU SCROLL (additive : visible sans JS) ============ */
.reveal-armed { opacity: 0; translate: 0 22px; will-change: opacity, translate; }
.reveal-armed[data-reveal="left"]  { translate: -28px 0; }
.reveal-armed[data-reveal="right"] { translate: 28px 0; }
.reveal-armed[data-reveal="scale"] { translate: 0 0; scale: 0.96; }
.reveal-armed.is-in {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity var(--t-enter) var(--e-expo),
              translate var(--t-enter) var(--e-expo),
              scale var(--t-enter) var(--e-expo);
}

/* Cascade : les enfants sont masqués dès l'armement JS, révélés en chaîne */
.reveal-stagger > * { opacity: 0; }
.reveal-stagger.is-in > * {
  animation: sys-rise var(--t-enter) var(--e-expo) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes sys-rise {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ============ FEUILLES D'AMBIANCE (botanique, très discret) ============ */
.has-ambiance { position: relative; }
.has-ambiance > :not(.amb-leaves) { position: relative; z-index: 1; }
.amb-leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb-leaf {
  position: absolute;
  width: var(--s, 120px);
  height: auto;
  opacity: var(--leaf-opacity);
  will-change: transform;
  animation: amb-drift var(--d, 24s) var(--e-quart) var(--delay, 0s) infinite alternate;
}
@keyframes amb-drift {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-22px) rotate(8deg); }
}

/* ============ TILT 3D + halo de curseur (desktop fin ; piloté JS) ============
   La carte cible doit être position:relative ; ses enfants directs passent
   au-dessus du halo via .tilt-deep > * (posé section par section). */
.tilt {
  will-change: transform;
  transition: transform 0.2s var(--e-quart), box-shadow var(--t-state) var(--e-quart);
}
.tilt::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--orange-1-rgb), 0.13), transparent 62%);
  opacity: 0; transition: opacity 0.3s var(--e-quart); pointer-events: none;
}
.tilt:hover::after { opacity: 1; }
.tilt-deep > *:not(.amb-leaves) { position: relative; z-index: 1; }

/* ============ SOULIGNÉ ANIMÉ (titres de cartes, liens) ============ */
.u-line { position: relative; display: inline-block; }
.u-line::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 3px; width: 0;
  border-radius: 2px; background: var(--teal-1);
  transition: width var(--t-state) var(--e-quart), background var(--t-state) var(--e-quart);
}
.u-line:hover::after, .u-line:focus-visible::after, .is-active > .u-line::after { width: 42px; background: var(--orange-1); }

/* ============ NAVBAR : barre de progression de lecture ============ */
.nav-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--orange-1); z-index: 6; pointer-events: none;
  will-change: transform;
  transition: transform 0.12s linear;            /* suit le scroll en continu, lissé */
}
/* Menu burger ouvert : la barre de progression RESTE affichée mais passe DERRIÈRE le fond
   du menu (cf. z-index de .nav-links.mobile-menu), au lieu de disparaître d'un coup. */

/* ============ NAVBAR ÉLEVÉE (profondeur au scroll + verre + soulignés + CTA) ============ */
.navbar {
  transition: box-shadow var(--t-state) var(--e-quart), background var(--t-state) var(--e-quart);
}
.navbar.is-scrolled { box-shadow: var(--nav-shadow); }
/* MOBILE/TABLETTE : barre transparente sur le hero (burger blanc), puis VERRE
   DÉPOLI dès qu'on défile — sinon le contenu passait à travers la navbar. */
@media (max-width: 1530px) {
  .navbar.is-scrolled {
    background-color: rgba(var(--cream-3-rgb), 0.85) !important;   /* littéral (bat le `transparent !important` mobile) */
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--hair-soft);
    box-shadow: var(--nav-shadow) !important;
  }
}
/* TABLETTE (601-1530px) : barre translucide EN PERMANENCE (comme le desktop), pas
   seulement au défilement. Le mobile (≤600px) reste transparent (burger flottant). */
@media (min-width: 601px) and (max-width: 1530px) {
  .navbar {
    background: var(--nav-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    border-bottom: 1px solid var(--hair-soft);
  }
}
/* Verre dépoli sur DESKTOP uniquement (≥1531px : menu en ligne, pas de burger
   blanc sur le hero — on ne touche pas au fond de la barre mobile). */
@media (min-width: 1531px) {
  .navbar {
    background: var(--nav-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    border-bottom: 1px solid var(--hair-soft);
  }
  /* Liens : police signature Vensfolk (même police que le menu burger), encre douce,
     avec un souligné raffiné qui se déploie sous la section active et au survol.
     Espacement responsive borné. La barre de progression lit la position réelle des liens. */
  .navbar .nav-links ul li { margin: 0 clamp(8px, 0.95vw, 22px); }
  .navbar .nav-links ul li a:not(.button-img) {
    position: relative;
    font-family: var(--font-brand);   /* Vensfolk */
    font-size: 18px; font-weight: 400; letter-spacing: 0.3px;
    color: var(--ink-2);
    padding: 6px 3px 9px;
    transition: color var(--t-state) var(--e-quart);
  }
  .navbar .nav-links ul li.active a:not(.button-img) { color: var(--orange-1); }
}

/* ===== Souligné « EAU » (TOUTES TAILLES : desktop, tablette, mobile/burger) =====
   ::after  = onde ORANGE (tuile SVG 28px, courant ← 3.4s) + respiration ↕ 4.3s.
   ::before = reflet TEAL (tuile SVG 40px, courant → 5.6s, sens opposé).
   3 durées NON harmoniques → battement organique. UNE seule onde par pseudo
   (background-position-x) → aucun conflit. Entrée « depuis le centre » (clip-path),
   fondu aux extrémités (mask). Réglage via --water-* sur le lien ; --water-bottom
   décale le trait selon le contexte (3px sous les liens de la barre, ~0 sous les
   grands liens du menu burger). */
.navbar .nav-links ul li a:not(.button-img) {
  position: relative;        /* containing block du souligné, à toutes les tailles */
  --water-h: 3px;
  --water-bottom: 3px;
  --water-amp: 0.5px;
  --water-len-front: 28px;
  --water-len-back: 40px;
  /* Entrée « vague qui accoste » (déferlement gauche→droite + retrait/ressac au bord droit).
     Durées et easing centralisés ici pour rester maîtrisés et cohérents. */
  --surf-dur: 0.72s;                      /* lame ORANGE : déferle puis se pose sur la rive */
  --surf-dur-back: 0.86s;                 /* reflet TEAL : un cheveu en retard → profondeur */
  --foam-dur: 0.6s;                       /* voile d'écume crème qui flashe au bord droit puis s'efface */
  --e-surf: cubic-bezier(.16,.84,.28,1);  /* accélère vers la rive puis se pose, sans rebond élastique */
}
.navbar .nav-links ul li a:not(.button-img)::after,
.navbar .nav-links ul li a:not(.button-img)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--water-bottom);
  height: var(--water-h); margin: 0 auto;
  background-repeat: repeat-x; background-position: 0 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  clip-path: inset(0 100% 0 0);      /* fermé à GAUCHE = caché ; la lame entre PAR LA GAUCHE */
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-state) var(--e-quart), clip-path var(--t-state) var(--e-quart);
}
/* onde principale ORANGE (au-dessus) */
.navbar .nav-links ul li a:not(.button-img)::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'3'%20viewBox%3D'0%200%2028%203'%3E%3Cpath%20d%3D'M0%201.5%20C%203.5%200.25%2C%2010.5%200.25%2C%2014%201.5%20S%2024.5%202.75%2C%2028%201.5'%20fill%3D'none'%20stroke%3D'%23f4a378'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");
  background-size: var(--water-len-front) var(--water-h);
}
/* reflet TEAL (en dessous, plus pâle/lent) */
.navbar .nav-links ul li a:not(.button-img)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'3'%20viewBox%3D'0%200%2040%203'%3E%3Cpath%20d%3D'M0%201.5%20C%205%200.6%2C%2015%200.6%2C%2020%201.5%20S%2035%202.4%2C%2040%201.5'%20fill%3D'none'%20stroke%3D'%23387580'%20stroke-opacity%3D'0.45'%20stroke-width%3D'0.9'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");
  background-size: var(--water-len-back) var(--water-h);
}
/* État VISIBLE (actif / survol / focus clavier) : la VAGUE ARRIVE DE LA GAUCHE, déferle vers la
   droite, S'ÉCRASE SUR LA RIVE (bord droit) avec un léger ressac, puis s'écoule en boucle.
   2 temps : (1) une @keyframes one-shot « surf » (clip-path gauche→droite + micro-retrait du bord
   droit = ressac) jouée 1 fois `both`, EN PLUS des boucles continues ; (2) un voile d'écume crème
   discret (box-shadow one-shot, sans transform → aucun conflit avec nav-wave-breathe).
   État final figé par les keyframes = clip-path:inset(0 0 0 0), identique à la règle ci-dessous,
   donc aucun saut quand l'animation se termine. will-change UNIQUEMENT ici (jamais au repos). */
.navbar .nav-links ul li a:not(.button-img):hover::after,
.navbar .nav-links ul li a:not(.button-img):focus-visible::after,
.navbar .nav-links ul li.active a:not(.button-img)::after {
  opacity: 1; clip-path: inset(0 0 0 0);
  will-change: background-position, transform, clip-path;
  animation:
    nav-surf-front var(--surf-dur) var(--e-surf) both,                /* (1) déferlement + ressac, 1 fois */
    nav-surf-foam var(--foam-dur) ease-out both,                      /* (2) écume crème au bord droit, 1 fois */
    nav-wave-front 3.4s linear infinite,                             /* flux continu (inchangé) */
    nav-wave-breathe 4.3s ease-in-out infinite;                      /* respiration ↕ (inchangé) */
}
.navbar .nav-links ul li a:not(.button-img):hover::before,
.navbar .nav-links ul li a:not(.button-img):focus-visible::before,
.navbar .nav-links ul li.active a:not(.button-img)::before {
  opacity: 1; clip-path: inset(0 0 0 0);
  will-change: background-position, clip-path;
  animation:
    nav-surf-back var(--surf-dur-back) var(--e-surf) both,           /* déferlement (reflet, légèrement en retard) */
    nav-wave-back 5.6s linear infinite;                              /* flux continu (inchangé) */
}
/* Canvas « eau » actif (js/water-underline.js pose .nav-water-on sur <html>) → on MASQUE le
   souligné CSS (::after orange + ::before teal) pour ne garder qu'UNE seule vague : celle du
   canvas. Sans JS (ou si le canvas n'est pas posé), ce souligné CSS reste le repli. */
html.nav-water-on .navbar .nav-links ul li a:not(.button-img)::after,
html.nav-water-on .navbar .nav-links ul li a:not(.button-img)::before { display: none !important; }
/* Menu plein écran mobile : verre chaud + entrée des liens en cascade. */
@media (max-width: 1530px) {
  .nav-links {
    background: rgba(var(--cream-3-rgb), 0.92) !important;   /* fond plus opaque : les sections ressortent + masque la barre de progression dessous */
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }
  /* Cascade d'entrée : l'emblème puis les 8 liens (groupe gauche 1→4, groupe droit 5→8), de haut en bas. */
  .nav-links.mobile-menu .nav-emblem { animation: nav-emblem-in 0.9s var(--e-expo) both; animation-delay: 0.05s; }
  .nav-links.mobile-menu .nav-group li { animation: nav-link-in 1s var(--e-expo) both; }
  .nav-links.mobile-menu .nav-group--left  li:nth-child(1) { animation-delay: 0.18s; }
  .nav-links.mobile-menu .nav-group--left  li:nth-child(2) { animation-delay: 0.28s; }
  .nav-links.mobile-menu .nav-group--left  li:nth-child(3) { animation-delay: 0.38s; }
  .nav-links.mobile-menu .nav-group--left  li:nth-child(4) { animation-delay: 0.48s; }
  .nav-links.mobile-menu .nav-group--right li:nth-child(1) { animation-delay: 0.58s; }
  .nav-links.mobile-menu .nav-group--right li:nth-child(2) { animation-delay: 0.68s; }
  .nav-links.mobile-menu .nav-group--right li:nth-child(3) { animation-delay: 0.78s; }
  .nav-links.mobile-menu .nav-group--right li:nth-child(4) { animation-delay: 0.88s; }
  .nav-links.mobile-menu .nav-group--right li:nth-child(5) { animation-delay: 0.98s; }
}
@keyframes nav-link-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes nav-emblem-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ===== Courants d'eau du souligné de navbar (cf. bloc ≥1531px) — on ne déplace QUE
   background-position-x, d'EXACTEMENT une tuile, pour une boucle sans couture (repeat-x).
   linear = vitesse constante d'un vrai courant. NB : les distances (-28/40px) doivent
   rester égales à --water-len-front / --water-len-back si on retouche les longueurs d'onde. */
@keyframes nav-wave-front { from { background-position-x: 0; } to { background-position-x: -28px; } }
@keyframes nav-wave-back  { from { background-position-x: 0; } to { background-position-x: 40px; } }
/* Respiration verticale (3e canal, ::after) : ±--water-amp, période non harmonique → la
   surface « respire ». transform:translateY = composite, ne touche pas background-position. */
@keyframes nav-wave-breathe {
  0%   { transform: translateY(calc(var(--water-amp) * -1)); }
  50%  { transform: translateY(var(--water-amp)); }
  100% { transform: translateY(calc(var(--water-amp) * -1)); }
}

/* ===== ENTRÉE « VAGUE QUI ACCOSTE » (one-shot, déferlement + ressac) ====================
   Mime vague → rive → ressac, en clip-path uniquement (composable, pas de reflow, et
   surtout SANS transform : aucun conflit avec nav-wave-breathe sur ::after).
   inset(top right bottom left) : on pilote le bord DROIT (right) pour faire avancer le
   front d'eau de la gauche vers la droite, puis un MICRO-RETRAIT du bord droit (le ressac
   qui se retire de la rive) avant de se poser. Le bord gauche reste à 0 (la masse d'eau
   reste « accrochée » au rivage gauche). État final = inset(0 0 0 0) = trait plein. */
/* Lame ORANGE (front) — déferle vite, ressac net mais discret (~1.5px ramené en %). */
@keyframes nav-surf-front {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }   /* caché à gauche */
  18%  { opacity: 1; }                                  /* le front prend corps tôt */
  68%  { clip-path: inset(0 0 0 0); }                   /* le front atteint la rive (bord droit) */
  82%  { clip-path: inset(0 6% 0 0); }                  /* RESSAC : l'eau se retire un peu du bord droit */
  100% { opacity: 1; clip-path: inset(0 0 0 0); }       /* se repose, trait plein (= état stable) */
}
/* Reflet TEAL (back) — même geste, un cheveu plus lent, ressac plus doux (profondeur). */
@keyframes nav-surf-back {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  22%  { opacity: 1; }
  72%  { clip-path: inset(0 0 0 0); }
  86%  { clip-path: inset(0 4% 0 0); }                  /* ressac plus léger que le front */
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* ÉCUME — voile crème/pêche translucide qui flashe au moment où le front touche la rive
   (bord droit), puis s'efface. box-shadow INSET (pas de transform) → composable, transform-free,
   donc compatible avec la respiration de ::after. INSET impératif : un box-shadow EXTERNE serait
   ROGNÉ par le clip-path du déferlement (clip-path rogne aussi l'ombre portée) → écume invisible.
   En inset, le halo crème reste DANS la padding-box (toujours peint tant que le trait est révélé à
   cet x) et se loge contre le bord droit (offset-x NÉGATIF = la lumière monte depuis la rive).
   Couleurs en dur (in-palette : crème + soupçon de pêche) car via box-shadow, pas en SVG.
   Peak calé à ~62% de --foam-dur (≈0.37s) = juste après que le front ORANGE atteigne la rive
   (68% de --surf-dur ≈ 0.49s) → l'écume « éclabousse » au contact, puis se retire. */
@keyframes nav-surf-foam {
  0%, 48% { box-shadow: inset 0 0 0 0 rgba(255, 250, 242, 0); }
  62%     { box-shadow: inset -3px 0 3px -1px rgba(255, 250, 242, 0.70),   /* crête crème serrée, plaquée au bord droit */
                        inset -6px 0 5px -2px rgba(244, 163, 120, 0.26); } /* soupçon de pêche, plus diffus = embrun */
  100%    { box-shadow: inset -8px 0 6px -2px rgba(255, 250, 242, 0); }    /* l'écume se dissipe, le trait redevient net */
}

/* ============================================================
   MENU PLEIN ÉCRAN (≤1530px) : verre dépoli (transparent + flou,
   comme la version en ligne) + liens raffinés.
   ============================================================ */
@media (max-width: 1530px) {
  .nav-links {
    background: rgba(var(--cream-3-rgb), 0.92) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    /* Le bloc (liens + CTA + réseaux) est CENTRÉ verticalement comme un tout cohérent,
       les 3 zones nettement séparées. `safe center` = centré quand ça tient, replié en
       haut (scroll de secours) si l'écran est vraiment trop court. dvh = sans la barre nav. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    gap: 4px;                  /* liste continue : les 2 groupes se lisent comme une seule colonne */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 40px 18px 54px;   /* bas > haut : le bloc centré est posé un cran plus haut */
    box-sizing: border-box;
  }
  /* La liste garde sa hauteur naturelle (pas d'étirement) : le bloc reste groupé et centré. */
  .nav-links ul {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;                  /* espacement intermédiaire (entre l'ancien 6 et le récent 2) */
    margin: 0;
  }
  .navbar .nav-links ul li { margin: 0; }
  /* liens : plus fins, encre douce, actif orange. Souligné « eau » conservé (sous le lien
     actif / au survol), repositionné pour les grands liens. La taille se cale sur l'écran. */
  .navbar .nav-links ul li a:not(.button-img) {
    font-size: clamp(24px, 7vw, 32px); font-weight: 400; color: var(--ink-1);
    font-family: var(--font-brand); letter-spacing: 0.5px;
    padding: 4px 18px 2px; min-height: 0;    /* souligné d'eau juste sous le texte */
    --water-bottom: 1px;                      /* souligné « eau » TRÈS proche du texte du lien */
  }
  .navbar .nav-links ul li.active a:not(.button-img) { color: var(--orange-1); }
  /* Emblème épinglé tout en haut du menu (cf. .nav-emblem position:absolute dans index.css).
     Sa taille s'adapte à la hauteur d'écran plus bas. Plus de CTA ni d'ornement dans le menu. */
  .navbar .nav-emblem img { height: 86px; }
  .nav-links .social_media { margin-top: 0; gap: 26px; flex: 0 0 auto; }
  .nav-links .social_media div img { width: 50px; height: 50px; }
}
/* Écrans courts (≤720px de haut : iPhone SE, petits Android, paysage) : on resserre
   le châssis pour que le bloc centré tienne SANS scroll, tout en restant centré. */
@media (max-width: 1530px) and (max-height: 720px) {
  .nav-links { padding-top: 34px; padding-bottom: 44px; gap: 6px; }
  .nav-links ul { gap: 6px; }
  .navbar .nav-links ul li a:not(.button-img) { padding: 3px 18px 2px; }
  .nav-emblem { margin-bottom: 16px; }
  .navbar .nav-emblem img { height: 60px; }
  .nav-links .social_media { gap: 22px; }
  .nav-links .social_media div img { width: 44px; height: 44px; }
}
/* Très courts (≤580px : iPhone SE 320×568, paysages) : on rabote encore le châssis
   pour que tout tienne SANS scroll, en restant centré. */
@media (max-width: 1530px) and (max-height: 580px) {
  .nav-links { padding-top: 22px; padding-bottom: 26px; gap: 4px; }
  .nav-links ul { gap: 4px; }
  .navbar .nav-links ul li a:not(.button-img) { padding: 2px 18px 2px; }
  .nav-emblem { margin-bottom: 10px; }
  .navbar .nav-emblem img { height: 48px; }
  .nav-links .social_media { gap: 20px; }
  .nav-links .social_media div img { width: 42px; height: 42px; }
}

/* ============================================================
   MOBILE (≤600px) : header ÉPURÉ — pas de barre, burger flottant
   en pastille de verre, barre de progression tout en haut.
   ============================================================ */
@media (max-width: 600px) {
  /* Plus aucune barre : navbar transparente même au scroll */
  .navbar.is-scrolled {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  /* Barre de progression : tout en haut du site */
  .nav-progress { top: 0; bottom: auto; height: 3px; }
  /* Burger : bouton flottant haut-droite, pastille de verre, lignes sombres */
  .burger-menu {
    position: fixed; top: 12px; right: 12px; margin: 0 !important;
    width: 50px; height: 50px; max-height: 50px;
    background: rgba(var(--cream-3-rgb), 0.72);
    -webkit-backdrop-filter: blur(9px) saturate(1.3);
    backdrop-filter: blur(9px) saturate(1.3);
    border-radius: 50%;
    box-shadow: 0 7px 22px -8px rgba(var(--ink-1-rgb), 0.55);
    display: grid; place-items: center; overflow: hidden;
    z-index: 60;
  }
  .burger-menu .plate, .burger-menu .plate8 { width: 50px; height: 50px; position: relative; }
  .burger-menu svg { width: 50px; height: 50px; }
  .burger-menu .line { stroke: var(--ink-1) !important; filter: none !important; }
}
/* Liens de nav : couleur encre douce → orange sur l'actif et au survol (le souligné
   animé du desktop est défini dans le bloc ≥1531px). */
.navbar .nav-links ul li a:not(.button-img) { transition: color var(--t-state) var(--e-quart); }
.navbar .nav-links ul li.active a:not(.button-img),
.navbar .nav-links ul li a:not(.button-img):hover,
.navbar .nav-links ul li a:not(.button-img):focus-visible {
  color: var(--orange-1);
}
/* Focus clavier visible : liens de nav + emblème (toutes tailles d'écran). */
.navbar .nav-links a:focus-visible {
  outline: 2px solid var(--teal-1);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ #hypnose-pnl — diptyque vivant ============ */
/* Profondeur encre + transitions CIBLÉES (fini le `transition: all 1s`). */
.hypnose-pnl .boxes .box {
  /* Containing block du chevron `.circle` (position:absolute, right:35px).
     Sans ça, le seul ancêtre positionné est `.presentation` (rendue relative par
     `.has-ambiance > :not(.amb-leaves)`), bien plus large que les cartes → les 2
     chevrons se calaient empilés sur le bord droit de `.presentation` (mesuré
     x≈1230 à 1280px, soit ~617px à droite de la carte Hypnose). `position:relative`
     ici (0,3,0, après index.css) rend chaque carte containing block → chevron à 35px
     du bord droit de SA carte. Ne matche PAS `.boxes2` (hors `.boxes`). */
  position: relative;
  /* `display:block` (≠ le flex hérité de `.box`) tue la « téléportation » du texte en
     fin de dépliement. Cause : en flex-column, tant que le contenu déborde de la boîte
     clippée (overflow:hidden), le débordement est réparti aux deux bouts → le contenu
     est ancré ~6px trop haut ; dès qu'il « rentre » (dernières frames, ou au passage
     max-height:Npx→none), il se replace d'un coup. En block, le contenu est ancré en
     haut quel que soit le clipping → il ne bouge JAMAIS pendant l'anim. Bonus : en block
     `scrollHeight` (cible du JS) == hauteur naturelle → le swap final en `none` est un
     no-op (en flex il valait ~12px de moins → pop). `padding-top:24px` (au lieu de 30)
     recentre l'en-tête replié : titre h2=52px dans une boîte de 100px → (100−52)/2=24,
     ce qui rend AUSSI titre-replié == titre-ouvert (zéro décalage). Vérifié desktop &
     mobile, ladder d'anim à titleTop constant. Voir [[refonte-roxanne-handoff]] §6. */
  display: block;
  /* Centrage en-tête replié : boîte 92px, titre Vensfolk ≈46px → (92−46)/2 = 23px. */
  padding-top: 23px;
  box-shadow: var(--elev-2);
  transition: max-height var(--t-layout) var(--e-quart),
              box-shadow var(--t-state) var(--e-quart),
              transform var(--t-state) var(--e-quart),
              background var(--t-state) var(--e-quart);
}
/* Au survol/ouvert : l'ombre s'APPROFONDIT (au lieu de rétrécir) + teinte de marque. */
.hypnose-pnl .boxes .box:first-child:hover,
.hypnose-pnl .boxes .box:first-child.active {
  box-shadow: var(--elev-3), 0 16px 34px -18px rgba(var(--teal-1-rgb), 0.42);
}
.hypnose-pnl .boxes .box:last-child:hover,
.hypnose-pnl .boxes .box:last-child.active {
  box-shadow: var(--elev-3), 0 16px 34px -18px rgba(var(--orange-1-rgb), 0.42);
}
/* Pas de `scale` au survol sur les cartes DÉPLIANTES (≠ la carte .boxes2 qui, elle,
   garde son lift). Pourquoi : `index.css` met `transform:scale(1.02)` au :hover ;
   sur une carte OUVERTE (haute ~635px) le retrait du survol fait 1.02→1.0 = ~13px de
   contraction d'un coup → le « rollback » visible en fin d'ouverture/fermeture. Le
   feedback de survol reste assuré par l'ombre encre qui s'approfondit + la teinte. */
.hypnose-pnl .boxes .box:hover { transform: none; }
/* Desktop : les deux cartes Hypnose/PNL prennent la MÊME hauteur une fois dépliées.
   stretch (égalise les hauteurs) + sync JS des max-height (data-sync-heights) : les cartes
   ouvertes s'animent ENSEMBLE vers la plus haute → hauteurs égales, sans saut en fin d'anim. */
@media (min-width: 1151px) {
  .hypnose-pnl .boxes { align-items: stretch; }
  /* Bord externe des 2 cartes aligné sur « La complémentarité » (.boxes2) : on retire les
     marges EXTERNES (l'écart interne de 40px entre Hypnose et PNL est conservé). */
  .hypnose-pnl .boxes .box:first-child { margin-left: 0; }
  .hypnose-pnl .boxes .box:last-child  { margin-right: 0; }
}
/* En-tête de carte (replié) : titre + chevron PARFAITEMENT centrés verticalement.
   1) on neutralise le `margin-top:40px` hérité de `.presentation h2:first-child`
      (il poussait le h2 vers le bas → titre coupé sous la boîte repliée) ;
   2) la pastille `.title` remplit la hauteur repliée (= max-height − 2·padding) et
      `align-items:center` recentre h2 (et le chevron, en absolu, suit sa position
      statique) → tout est centré pile au milieu. 40px en desktop (100−2·30),
      45px dès ≤1150px (75−2·15). */
/* Desktop : boîte repliée 100px, padding 30 → le contenu (h3) démarrait à 90px et
   dépassait de 10px sous le titre. margin-bottom 32px (> padding 30) le repousse à
   102px, hors de la zone repliée, tout en gardant le titre centré (50 = centre). */
/* `width:100%` : l'en-tête occupe TOUTE la largeur de la carte (comme le
   `.title-section` pleine largeur de #session) → cliquer une zone vide du header
   referme le dépliant. Le h2 reste centré (justify-content:center du .title) et le
   chevron, en absolu (containing block = .presentation), ne bouge pas. */
.hypnose-pnl .boxes .box .title { width: 100%; min-height: 40px; margin-bottom: 32px; }
/* sélecteur volontairement (0,6,1) pour battre `.container:first-child .presentation
   h2:first-child` (0,5,1) qui imposait le margin-top:40px */
.hypnose-pnl .container:first-child .boxes .box .title h2 { margin: 0; }
@media (max-width: 1150px) {
  /* repliée 75px, padding 15 : le contenu démarre déjà à 80px (caché) → marge 20 plus serrée */
  .hypnose-pnl .boxes .box .title { min-height: 45px; margin-bottom: 20px; }
  /* boîte 75px, titre 45px → padding-top centré = (75−45)/2 = 15 (= padding mobile actuel) :
     on annule le 24px desktop pour garder l'en-tête centré ET titre-replié == titre-ouvert. */
  .hypnose-pnl .boxes .box { padding-top: 15px; }
}
/* ============ REDUCED-MOTION : couper le mouvement, garder l'information ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal-armed, .reveal-armed.is-in,
  .reveal-stagger > *, .reveal-stagger.is-in > * {
    opacity: 1 !important; translate: none !important; scale: none !important;
    transform: none !important; animation: none !important; transition: none !important;
  }
  .amb-leaf { animation: none !important; }
  .tilt { transition: none !important; }
  .nav-progress { transition: none !important; }
  .navbar, .navbar .nav-links ul li a:not(.button-img) { transition: none !important; }
  /* Souligné « eau » : on fige les DEUX ondes (::after orange + ::before teal) — plus de
     transition, plus d'animation (courant + respiration + entrée « vague qui accoste »),
     motif d'onde statique, AUCUNE écume (box-shadow neutralisé). Le trait reste « ouvert »
     (clip-path neutre, pas de balayage gauche→droite) pour rester visible sur la section active. */
  .navbar .nav-links ul li a:not(.button-img)::after,
  .navbar .nav-links ul li a:not(.button-img)::before {
    transition: none !important; animation: none !important; transform: none !important;
    box-shadow: none !important;
  }
  .navbar .nav-links ul li a:not(.button-img):hover::after,
  .navbar .nav-links ul li a:not(.button-img):focus-visible::after,
  .navbar .nav-links ul li.active a:not(.button-img)::after,
  .navbar .nav-links ul li a:not(.button-img):hover::before,
  .navbar .nav-links ul li a:not(.button-img):focus-visible::before,
  .navbar .nav-links ul li.active a:not(.button-img)::before { clip-path: inset(0 0 0 0) !important; }
  .nav-links.mobile-menu .nav-group li { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* l'emblème garde son centrage (translateX) : on coupe l'anim sans réinitialiser le transform */
  .nav-links.mobile-menu .nav-emblem { animation: none !important; opacity: 1 !important; }
}

/* ============ #session — REFONTE « SÉANCE » : langage /reservation, ton bleu ============ */
/* Même finition que la page réservation (cartes blanches nettes, ombre -26y, blobs d'angle qui
   gonflent, soulignement de titre qui se trace, badge icône flottant qui se remplit, chevron
   qui se remplit) transposée à l'accordéon, en PALETTE TEAL pour trancher avec l'orange du bloc
   au-dessus (#reserver). Textes 100 % identiques.
   Fix téléportation conservé (display:block + max-height repli mesurée). */

/* — Surface : TEAL CLAIR de marque, dégradé vertical simple. Fond clair → texte de
   section en foncé (lisible) ; les cartes blanches restent détachées par l'ombre. — */
.session .container {
  position: relative;
  isolation: isolate;
  /* Fond neutre crème : le diptyque diagonal (.split-band) porte la couleur (bleu/orange).
     Plus de voile bleu en bas (la bande bleue sous l'orange est supprimée — réf. photo cliente). */
  background: var(--cream-3);
}
.session .container > .title,
.session .container > .session-steps,
.session .container > .texte { position: relative; z-index: 1; }

/* — Titre de section : serif Bellefair, encre profonde, filet teal qui se trace — */
.session .container .title { position: relative; text-align: center; }
.session .container .title h2 {
  color: var(--ink-1); text-shadow: none;
  font-family: var(--font-section, 'Lora', serif); font-weight: 600;
  letter-spacing: .3px; text-wrap: balance;
}
.session .container .title h2::after {
  content: ""; display: block; height: 3px; width: clamp(54px, 8vw, 78px);
  margin: 18px auto 0; border-radius: 999px; background: var(--teal-1);
}
.session .container .title.reveal-armed h2::after { width: 0; transition: width var(--t-enter) var(--e-quint); }
.session .container .title.reveal-armed.is-in h2::after { width: clamp(54px, 8vw, 78px); }

/* — Zone des volets — */
.session-steps { position: relative; width: 100%; max-width: 1120px; margin-inline: auto; }

/* — CARTES : blanc net, hairline, ombre signature /reservation, blobs d'angle, fix téléportation — */
.session .container .box {
  display: block; position: relative; overflow: hidden;
  background: var(--cream-3);
  border: 1px solid rgba(var(--ink-1-rgb), .06);
  border-radius: 24px;
  padding: 26px clamp(22px, 3vw, 38px);
  margin-top: 20px;
  max-height: 104px;                       /* replié — 2·26 + en-tête (recalé par mesure DOM) */
  box-shadow: 0 16px 38px -26px rgba(var(--ink-1-rgb), .42);
  transition: max-height .6s var(--e-quint, cubic-bezier(.22, 1, .36, 1)),
              transform .35s var(--e-quart, ease),
              box-shadow .4s var(--e-quart, ease),
              border-color .35s var(--e-quart, ease);
}
/* blob d'angle (un seul, teal) qui gonfle au survol — l'orange pâle en bas-gauche est retiré */
.session .container .box::before {
  content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
  transition: transform .6s var(--e-quint, cubic-bezier(.22, 1, .36, 1)), opacity .35s ease, background .35s ease;
}
.session .container .box::before { top: -42px; right: -42px; width: 120px; height: 120px; background: var(--blue-1); opacity: .5; }
.session .container .box .title-section,
.session .container .box .disclosure-content { position: relative; z-index: 1; }

.session .container .box:hover {
  box-shadow: 0 34px 60px -30px rgba(var(--ink-1-rgb), .5);
  border-color: rgba(var(--ink-1-rgb), .12);
}
@media (hover: hover) and (pointer: fine) {
  .session .container .box:hover { transform: translateY(-5px); }
  .session .container .box:hover::before { transform: scale(1.28); opacity: .68; }
}
.session .container .box.active {
  box-shadow: 0 30px 60px -32px rgba(var(--teal-1-rgb), .4);
  border-color: rgba(var(--teal-1-rgb), .45);
}
.session .container .box.active::before { background: var(--blue-1); opacity: .72; transform: scale(1.18); }

/* — En-tête : [badge icône teal] · [titre serif] · [chevron rond] — */
.session .container .box .title-section {
  display: flex; grid-template-columns: none; align-items: center; gap: 18px; margin-bottom: 22px;
}
.session-icon {
  flex: 0 0 auto; justify-self: auto;
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--blue-1); color: var(--teal-1);
  transition: background .35s var(--e-quart, ease), color .35s var(--e-quart, ease);
}
.session-icon svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .session .container .box .session-icon { animation: session-ico-float 6s ease-in-out infinite; }
}
@keyframes session-ico-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.session .container .box:hover .session-icon,
.session .container .box.active .session-icon { background: var(--teal-1); color: var(--cream-3); }

.session .container .box h2 {
  /* flex:0 1 auto + margin-right:auto → le titre prend la largeur de SON texte (le filet
     pourra le souligner exactement) et le chevron reste poussé à droite. */
  flex: 0 1 auto; margin: 0 auto 0 0; text-align: left; position: relative;
  font-family: var(--font-display, 'Bellefair', serif); font-weight: 400;
  color: var(--ink-1); letter-spacing: .3px;
  font-size: clamp(1.3rem, 1.04rem + 1vw, 1.7rem);
}
.session .container .box h2::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  border-radius: 2px; background: var(--teal-1); transition: width .45s var(--e-quart, ease);
}
.session .container .box:hover h2::after { width: 46px; }
.session .container .box.active h2::after { width: 100%; }   /* volet ouvert : le filet souligne tout le titre */

.session-chevron {
  flex: 0 0 auto; justify-self: auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--teal-1); border: 1.5px solid rgba(var(--teal-1-rgb), .35);
  transition: transform .5s var(--e-quint, cubic-bezier(.22, 1, .36, 1)), background-color .3s, color .3s, border-color .3s;
}
.session-chevron svg { width: 20px; height: 20px; }
.session .container .box:hover .session-chevron { border-color: rgba(var(--teal-1-rgb), .55); }
.session .container .box.active .session-chevron { transform: rotate(180deg); background: var(--teal-1); border-color: var(--teal-1); color: var(--cream-3); }

/* — Texte ouvert : encre douce, mesure de lecture confortable — */
.session .container .box p, .session .container .box li { color: var(--ink-1); line-height: 1.75; max-width: 72ch; text-wrap: pretty; }
.session .container .box b { font-weight: 600; color: var(--ink-2); }
.session .container .box p:has(> b:only-child) { margin-top: 22px; margin-bottom: 0; }
.session .container .box p:has(> b:only-child) b { color: var(--teal-1); }
.session .container .box ul { list-style: none; padding: 0; margin: 6px 0 0; }
.session .container .box ul li { padding: 4px 0; }
.session .container .box ul li b:first-of-type { color: var(--teal-1); }

/* — Clôture : manifeste centré + filet teal — */
.session .container .texte { max-width: var(--max-content); margin: var(--space-block) auto 0; text-align: center; position: relative; }
.session .container .texte::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin: 0 auto 24px; background: var(--teal-1);
}
.session .container .texte p {
  color: var(--ink-1); line-height: 1.8; text-align: center !important;
  font-size: clamp(1rem, .96rem + .3vw, 1.1rem); text-wrap: pretty;
}

/* — Responsive — */
@media (max-width: 768px) {
  .session .container .box { border-radius: 20px; padding: 22px 18px; max-height: 92px; }
  .session .container .box .title-section { gap: 14px; margin-bottom: 18px; }
  .session-icon { width: 46px; height: 46px; border-radius: 13px; }
  .session-icon svg { width: 22px; height: 22px; }
  .session-chevron { width: 36px; height: 36px; }
  .session-chevron svg { width: 18px; height: 18px; }
  .session .container .box::before { width: 92px; height: 92px; top: -34px; right: -34px; }
}
@media (max-width: 500px) {
  .session .container .box h2 { font-size: 1.2rem; }
}

/* — Reduced-motion : couper tout mouvement — */
@media (prefers-reduced-motion: reduce) {
  .session .container .box, .session-chevron, .session-icon,
  .session .container .box::before,
  .session .container .box h2::after { transition: none; }
  .session .container .box .session-icon { animation: none; }
  .session .container .box:hover { transform: none; }
  .session .container .title.reveal-armed h2::after,
  .session .container .title.reveal-armed.is-in h2::after { transition: none !important; width: clamp(54px, 8vw, 78px) !important; }
}

/* ============ MENU BURGER : liens parfaitement centrés (rail « métro » retiré) ============ */
@media (max-width: 1530px) {
  .navbar .nav-links ul {
    width: auto;
    align-items: center;     /* sections centrées (plus de rail à gauche) */
    padding-left: 0;
    position: relative;
  }
}

/* ============ « Ajouter à mon agenda » — feuille de choix multi-services (addcal.js) ============ */
.rzc-sheet { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rzc-scrim { position: absolute; inset: 0; background: rgba(var(--ink-1-rgb), 0.5); opacity: 0; transition: opacity 0.28s var(--e-quart); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rzc-panel { position: relative; width: min(400px, 100%); background: var(--cream-3); border-radius: 22px; padding: 26px 22px 22px; box-shadow: var(--elev-float); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.32s var(--e-quart), transform 0.42s var(--e-quint); max-height: 90vh; overflow-y: auto; }
.rzc-sheet.in .rzc-scrim, .rzc-sheet.in-now .rzc-scrim { opacity: 1; }
.rzc-sheet.in .rzc-panel, .rzc-sheet.in-now .rzc-panel { opacity: 1; transform: none; }
.rzc-sheet.out .rzc-scrim { opacity: 0; }
.rzc-sheet.out .rzc-panel { opacity: 0; transform: translateY(10px) scale(0.98); }
.rzc-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: none; background: none; color: var(--ink-4); cursor: pointer; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.rzc-x:hover { background: rgba(var(--ink-1-rgb), 0.06); color: var(--ink-1); }
.rzc-h { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ink-1); text-align: center; margin: 2px 0 4px; }
.rzc-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-4); text-align: center; margin: 0 0 18px; line-height: 1.5; }
.rzc-opts { display: flex; flex-direction: column; gap: 10px; }
.rzc-opt { display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--hair); background: var(--cream-3); color: var(--ink-1); text-decoration: none; font-family: var(--font-body); font-size: 15px; font-weight: 500; transition: border-color 0.22s, background 0.22s, transform 0.22s var(--e-quart); }
.rzc-opt:hover, .rzc-opt:focus-visible { border-color: var(--teal-2); background: var(--blue-3); outline: none; transform: translateX(2px); }
.rzc-opt.is-reco { border-color: rgba(var(--orange-1-rgb), 0.55); background: rgba(var(--orange-1-rgb), 0.06); }
.rzc-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--cream-2); border: 1px solid var(--hair-soft); }
.rzc-ic svg { width: 24px; height: 24px; display: block; }   /* borne la taille (sinon une règle svg globale les gonfle) */
.rzc-opt.is-reco .rzc-ic { background: var(--peach-3); border-color: var(--orange-3); }
.rzc-l { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rzc-name { font-weight: 600; color: var(--ink-1); }
.rzc-reco { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--orange-1); background: rgba(var(--orange-1-rgb), 0.14); padding: 2px 8px; border-radius: 999px; }
.rzc-sheet.in .rzc-opt { opacity: 0; transform: translateY(10px); animation: rzc-pop 0.5s var(--e-quint) forwards; animation-delay: calc(0.06s * var(--i) + 0.12s); }
@keyframes rzc-pop { to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .rzc-sheet { align-items: flex-end; padding: 0; }
  .rzc-panel { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); transform: translateY(100%); }
  .rzc-sheet.in .rzc-panel, .rzc-sheet.in-now .rzc-panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rzc-scrim, .rzc-panel { transition: opacity 0.001s; }
  .rzc-sheet.in .rzc-panel, .rzc-sheet.in-now .rzc-panel { transform: none; }
  .rzc-sheet.in .rzc-opt { opacity: 1; transform: none; animation: none; }
}