:root{
  /* Palette marque */
  --bleu:#1a1aae;
  --bleu-deep:#0d0d5e;
  --creme:#faf6ec;
  --beige:#fbf3df;
  --lavande:#e6dcfa;
  --ink:#15151f;

  /* Thèmes background (synchronisés avec les couleurs du logo) */
  --t-jour-bg:#ffe66d;
  --t-jour-fg:#2a1c00;

  --t-nuit-bg:#0a0a4a;
  --t-nuit-fg:#f3eede;

  --t-lavandes-bg:#c9a5ff;
  --t-lavandes-fg:#1d0036;

  --t-pierres-bg:#e9d6ad;
  --t-pierres-fg:#2a1a0a;

  --t-vert-bg:#7ec97e;
  --t-vert-fg:#0c2510;

  --t-ciel-bg:#a9d6ea;
  --t-ciel-fg:#0e2f44;

  /* État courant — modifié par JS */
  --bg: var(--creme);
  --fg: var(--ink);
  --accent: var(--bleu-deep);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:'Parkinsans',system-ui,sans-serif;font-weight:400;
  font-size:clamp(16px,1vw + .55rem,18px);line-height:1.65;
  color:var(--fg);background:var(--bg);
  transition:background-color .8s cubic-bezier(.4,0,.2,1), color .8s cubic-bezier(.4,0,.2,1);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{max-width:1380px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ===== Anti-FOUC ===== */
body.anti-fouc .anti-fouc{visibility:hidden}
body.js-ready .anti-fouc{visibility:visible}

/* ===== LOADER (repris de la création 1) ===== */
body.loading{overflow:hidden}
#loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bleu-deep);
  display:grid;place-items:center;
  transition:opacity .9s ease,visibility .9s;
}
#loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__seal{
  width:clamp(120px,15vw,220px);height:auto;display:block;
  filter:brightness(0) invert(1);
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  opacity:0;
  animation:
    sealReveal 1.9s cubic-bezier(.22,.61,.36,1) .15s forwards,
    sealPulse 2.6s ease-in-out 2.2s infinite;
}
@keyframes sealReveal{
  0%  {-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);opacity:0}
  14% {opacity:1}
  100%{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes sealPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== TOPBAR (header repris de la création 1 — fond qui SUIT la couleur du thème) ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;
  z-index:80;pointer-events:none;
}
/* Fond du header : opacity pilotée par JS (0 pendant la vidéo -> 1 dans le contenu),
   couleur = var(--bg) qui bascule jour/nuit/vert/lavande au scroll. */
.topbar__bg{
  position:absolute;inset:0;
  background:var(--bg);
  opacity:0; /* piloté par JS */
  border-bottom:1px solid rgba(0,0,0,.06);
  pointer-events:none;
  transition:background-color .8s cubic-bezier(.4,0,.2,1);
}
.topbar__inner{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:28px clamp(20px,5vw,64px);
  mix-blend-mode:difference;color:#fff;
}
.topbar__inner > .topbar__nav--left{justify-self:start}
.topbar__inner > .topbar__center{justify-self:center}
.topbar__inner > .topbar__right{justify-self:end}
.topbar__center{width:50px;height:50px}
.topbar__nav--left{display:flex;align-items:center;gap:28px;pointer-events:auto}
.topbar__right{display:flex;align-items:center;gap:30px;pointer-events:auto}
.topbar__nav{display:flex;align-items:center;gap:28px}
.topbar__nav a,
.topbar__cta{
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  position:relative;color:#fff;
  padding:6px 0;
  background:none;border:0;border-radius:0;
}
.topbar__nav a::after,
.topbar__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.topbar__nav a:hover::after,
.topbar__cta:hover::after{transform:scaleX(1)}
/* Burger Mistral (repris de la création 2) : 3 traits ondulés, souffle au survol, envol au clic */
.burger{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;margin:0;color:inherit;
}
.burger svg{width:30px;height:30px;overflow:visible}
.burger path{
  fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;
  transform-origin:center;transform-box:fill-box;
}
/* Au clic, le souffle du mistral s'apaise : plus de rotation. Les traits du haut et du bas
   s'écartent doucement et le trait du milieu se détache (glisse de côté) puis se colorise
   à l'accent du thème — le vent se calme. */
.burger .bg-cross{display:none}            /* croix abandonnée */
.burger .bg-waves,.burger .bg-waves path{
  transition:transform .7s cubic-bezier(.34,.02,.2,1), stroke .6s ease, opacity .6s ease;
  transform-origin:50% 50%;transform-box:fill-box;
}
.burger[aria-expanded="true"] .bg-waves{transform:none}
.burger[aria-expanded="true"] .bg-waves path:nth-child(1){transform:translateY(-4px);transition-delay:.05s}
.burger[aria-expanded="true"] .bg-waves path:nth-child(2){transform:translateX(15px) scaleX(.86);stroke:var(--accent);opacity:.32;transition-delay:.12s}
.burger[aria-expanded="true"] .bg-waves path:nth-child(3){transform:translateY(4px);transition-delay:.08s}
/* Home : le burger est blanc sur le média sombre du hero ; l'accent foncé du thème par défaut
   y serait peu lisible. Le trait du milieu s'apaise alors dans une teinte claire, qui reste visible. */
.topbar .burger[aria-expanded="true"] .bg-waves path:nth-child(2){stroke:#bcd9f0}
@keyframes mistral-wind{
  0%   { transform:translateX(0)   skewX(0) }
  40%  { transform:translateX(4px) skewX(-3deg) }
  70%  { transform:translateX(-2px) skewX(2deg) }
  100% { transform:translateX(0)   skewX(0) }
}
/* Effet vague au survol (état fermé) : le faisceau ondule EN BLOC via une animation sur le
   GROUPE `.bg-waves`. Surtout PAS d'animation sur les <path> individuels : elle piloterait leur
   `transform` et empêcherait la transition d'OUVERTURE de s'interpoler (au clic, le morph sauterait
   directement à l'état final au lieu de glisser). Le groupe et les paths portent des transforms
   distincts qui se composent → l'ondulation au survol et le morph au clic coexistent sans conflit. */
.burger:not([aria-expanded="true"]):hover .bg-waves{ animation:mistral-wind 1.6s ease-in-out infinite }
/* Mobile: nav links hidden. Force grid columns so the burger stays at the right edge
   (otherwise the hidden left nav collapses placement and the burger jumps to the center). */
@media(max-width:900px){
  .topbar__nav,.topbar__cta{display:none}
  .topbar__inner > .topbar__center{grid-column:2}
  .topbar__inner > .topbar__right{grid-column:3}
}

/* Hero séquencé : les éléments du hero (marqués [data-hero] [data-reveal]) sont masqués
   avant leur entrée en cascade au chargement, jouée par site.js. La translation est posée
   en JS (gsap.set) pour que les fallbacks (reduce-motion / sans GSAP) n'aient qu'à remettre
   l'opacité à 1. Seule l'opacité est pré-masquée ici. */
[data-hero] [data-reveal]{opacity:0}

/* ===== VIDEO HERO — séquence en phases reprise de la création 1 ===== */
.vhero{
  min-height:240svh;
  position:relative;overflow:hidden;
  padding:0;
}
.vhero-video{
  position:fixed;top:0;left:0;width:100vw;
  height:100vh;          /* fallback navigateurs sans unités viewport dynamiques */
  height:100lvh;         /* mobile : couvre TOUJOURS la plus grande hauteur (barres du navigateur rétractées)
                            -> plus de bande crème du body sous la vidéo quand on scrolle */
  z-index:-1;overflow:hidden;will-change:opacity;
  background:#000;
}
.vhero-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.vhero-video::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,94,.55),rgba(0,0,0,.32) 45%,rgba(0,0,0,.62));
}
.hero-mark{
  position:fixed;top:50%;left:50%;
  width:clamp(120px,15vw,220px);height:auto;
  transform:translate(-50%,-50%);
  z-index:90;pointer-events:none;
  mix-blend-mode:difference;
  will-change:top,left,width;
}
.hero-mark img{
  display:block;width:100%;height:auto;
  filter:brightness(0) invert(1);
}
.vhero-h1-wrap{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%, calc(-50% + 140px));
  width:100%;max-width:920px;
  padding:0 clamp(20px,5vw,40px);
  text-align:center;
  z-index:5;pointer-events:none;
  will-change:transform,opacity;
  color:#fff;
  mix-blend-mode:difference;
}
.vhero-h1-wrap h1{margin:0}
.vhero-cta-wrap{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%, calc(-50% + 290px));
  width:100%;
  display:flex;justify-content:center;
  padding:0 clamp(20px,5vw,40px);
  z-index:5;pointer-events:none;
  will-change:transform,opacity;
  visibility:hidden;
}
.vhero-cta-wrap > *{pointer-events:auto}
.vh1{margin:0;font-weight:400}
.vh1-part{display:block;opacity:0;will-change:opacity,transform}
.vh1-part[data-part="1"]{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(48px,7vw,98px);line-height:.88;letter-spacing:.005em;
  margin:0 0 28px;
}
.vh1-small{
  display:block;
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:.38em;
  line-height:1;
  margin-bottom:.18em;
  text-align:center;
}
.vh1-stretch{
  display:inline-block;
  letter-spacing:0;
  white-space:nowrap;
}
.vh1-big{
  display:inline-block;
  font-size:1em;
  line-height:.88;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.vh1-part[data-part="2"]{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:clamp(14px,1.3vw,18px);line-height:1.45;letter-spacing:.18em;
  text-transform:uppercase;
}
.vh1-part[data-part="2"] em{font-style:normal;font-weight:400}
.vhero-cta{
  display:inline-flex;align-items:center;gap:14px;
  color:#fff;background:none;
  padding:0 0 8px;
  border-bottom:1px solid rgba(255,255,255,.85);
  font-family:'Parkinsans',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  transition:gap .35s ease,border-color .35s ease;
  opacity:0;
  will-change:opacity,transform;
}
.vhero-cta:hover{gap:24px}
.vhero-cta .arr{
  display:inline-block;font-size:14px;line-height:1;
  transition:transform .3s ease;
  background:none;color:#fff;width:auto;height:auto;border-radius:0;
}
.vhero-cta:hover .arr{transform:translateX(4px)}
.hero__foot{
  position:fixed;left:0;right:0;bottom:0;
  padding:0 clamp(20px,5vw,64px) calc(22px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:end;gap:24px;
  font-family:'Londrina Solid',serif;font-weight:400;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.85;
  z-index:60;pointer-events:none;
  will-change:opacity,transform;
  mix-blend-mode:difference;
}
/* Wordmark du bas du hero : plus gros (retour client) ; « SCROLL » partage la même typo Londrina. */
.hero__foot .brand{font-size:19px}
.hero__cue{display:inline-flex;align-items:center;gap:14px}
.hero__cue::after{
  content:"";display:block;width:1px;height:42px;background:currentColor;opacity:.7;
  animation:cuepulse 2.6s ease-in-out infinite;
}
@keyframes cuepulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:.85}}
@media(max-width:760px){
  .vhero{min-height:260svh}
  .vhero-h1-wrap{transform:translate(-50%, calc(-50% + 120px))}
  .vhero-cta-wrap{transform:translate(-50%, calc(-50% + 250px))}
  .vh1-part[data-part="1"]{font-size:clamp(40px,11vw,68px);margin-bottom:20px}
  .vh1-small{font-size:.36em}
  .vh1-part[data-part="2"]{font-size:clamp(12px,3.2vw,15px);letter-spacing:.14em}
}

/* ===== .below — conteneur du contenu création 2, opaque pour masquer la vidéo fixed,
   fond qui suit la couleur du thème ===== */
.below{position:relative;z-index:2;background:var(--bg);transition:background-color .8s cubic-bezier(.4,0,.2,1);overflow-x:clip}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:100vh;
  padding:120px 0 80px;overflow:hidden;
  display:flex;align-items:center;
}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);align-items:center;
  width:100%;
}
.hero-copy{padding:0 8px;position:relative;z-index:3}

/* Lead du hero (création 2) — le texte d'intro remplace le H1 (déjà joué dans la séquence vidéo) */
.hero-lead{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:clamp(19px,1.7vw,26px);line-height:1.55;letter-spacing:.002em;
  color:var(--fg);
  margin:0 0 38px;max-width:540px;
  transition:color .8s cubic-bezier(.4,0,.2,1);
}
.hero-lead strong{font-weight:500}


/* CTA minimaliste */
.hero-cta{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:500;font-size:15px;
  padding:6px 0 4px;
  position:relative;
  transition:transform .3s ease, gap .3s ease;
}
.hero-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hero-cta:hover::after{transform-origin:right;transform:scaleX(0)}

/* === ICÔNE INTERACTIVE === */
.iconwrap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  align-self:center;
  padding-bottom:60px; /* réserve la place du message en bas */
}
.iconstage{
  position:relative;
  width:min(63%,340px);
  aspect-ratio:.855;
  cursor:default;
}
.icon-svg{
  position:absolute;inset:0;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1), filter .6s ease;
  pointer-events:none;
}
.iconstage.is-active .icon-svg{
  transform:scale(1.04);
}

/* Zones interactives — 4 quadrants + centre */
.zone{
  position:absolute;
  background:transparent;
  cursor:default;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
}
/* Sur mobile (pas de hover), le tap est l'unique interaction */
@media(hover:none){
  .zone{cursor:pointer}
}
.zone.q-jour     {top:0;   left:0;   width:50%; height:45%}
.zone.q-nuit     {top:0;   right:0;  width:50%; height:45%}
.zone.q-vert     {bottom:0;left:0;   width:50%; height:45%}   /* BG : herbe / nature */
.zone.q-lavandes {bottom:0;right:0;  width:50%; height:45%}
.zone.q-pierres{                                                /* CENTRE : pierres du prieuré */
  top:50%;left:50%;
  width:34%;aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:6;
}

/* Glow doux derrière l'icône au hover, prend la couleur du thème */
.icon-glow{
  position:absolute;
  width:78%;aspect-ratio:1;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, currentColor 0%, transparent 65%);
  filter:blur(40px);
  opacity:0;
  transition:opacity .6s ease, color .8s ease;
  pointer-events:none;
  z-index:0;
  color:var(--accent);
  mix-blend-mode:multiply;
}
.iconstage.is-active .icon-glow{opacity:.35}

/* Message dynamique sous l'icône */
.icon-msg{
  position:absolute;
  left:0;right:0;
  bottom:18px;
  text-align:center;
  font-size:13px;
  letter-spacing:.16em;
  font-weight:500;
  text-transform:uppercase;
  opacity:.55;
  transition:opacity .5s ease;
  pointer-events:none;
  min-height:18px;
}
.icon-msg .msg-default,
.icon-msg .msg-theme{
  display:block;
  transition:opacity .35s ease, transform .35s ease;
}
/* Surbrillance qui balaie le texte d'invitation de gauche à droite, en boucle (retour client V4) */
.icon-msg .msg-default{
  /* Reflet qui balaie le texte SANS jamais le faire disparaître : la couleur de base (var(--fg))
     couvre tout le texte en permanence (background-size 300% + position bornée 100%→0%, le
     dégradé est en var(--fg) à ses deux extrémités donc l'image couvre toujours toute la phrase),
     seul un reflet clair traverse au milieu du cycle puis sort de l'écran (boucle sans saut). */
  background-image:linear-gradient(110deg,
    var(--fg) 0 45%,
    color-mix(in srgb, var(--fg) 22%, transparent) 50%,
    var(--fg) 55% 100%);
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:msgShimmer 2s ease-in-out infinite;
}
@keyframes msgShimmer{
  0%  {background-position:100% 0}
  100%{background-position:0% 0}
}
/* Au survol d'une couleur de l'icône, l'invite (avec son shimmer) s'efface et laisse
   place au mot du thème correspondant — restauré façon création 3 (demande Mathieu). */
.icon-msg .msg-theme{
  position:absolute;left:0;right:0;top:0;
  opacity:0;transform:translateY(4px);
}
.iconstage.is-active + .icon-msg{opacity:.85}
.iconstage.is-active + .icon-msg .msg-default{opacity:0;transform:translateY(-4px)}
.iconstage.is-active + .icon-msg .msg-theme{opacity:1;transform:translateY(0)}

@media(max-width:1024px){
  .hero{padding:96px 0 80px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .hero-copy{padding:0 24px;text-align:left}
  .h1-sub{max-width:none}
  .iconstage{width:min(66%,306px)}
  .icon-msg{bottom:-44px;font-size:11px}
}

/* ===== THEMES — appliqués sur le body via data-theme ===== */
body[data-theme="jour"]    {--bg:var(--t-jour-bg);    --fg:var(--t-jour-fg);    --accent:#b88800}
body[data-theme="nuit"]    {--bg:var(--t-nuit-bg);    --fg:var(--t-nuit-fg);    --accent:#9aa0ff}
body[data-theme="lavandes"]{--bg:var(--t-lavandes-bg);--fg:var(--t-lavandes-fg);--accent:#5a1fbf}
body[data-theme="pierres"] {--bg:var(--t-pierres-bg); --fg:var(--t-pierres-fg); --accent:#7a4a1a}
body[data-theme="vert"]    {--bg:var(--t-vert-bg);    --fg:var(--t-vert-fg);    --accent:#1f5a23}
body[data-theme="ciel"]    {--bg:var(--t-ciel-bg);    --fg:var(--t-ciel-fg);    --accent:#1f6f9c}

/* Plus de filter:invert nécessaire — logo et burger utilisent currentColor (var(--fg)) */

/* ===== SECTIONS BELOW (stats, split) — intro autonome supprimée (texte remonté dans le hero) ===== */

/* ===== CHIFFRES CLÉS — grille uniforme 3 colonnes, contenu aligné en bas ===== */
.stats{padding:60px 0 120px;position:relative}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.stat{
  position:relative;
  min-height:236px;
  padding:32px 34px;
  border-radius:20px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(0,0,0,.06);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
  overflow:hidden;
}
.stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.92)}
.stat-pre{
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin:0 0 10px;display:block;
}
.stat-num{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(50px,5vw,76px);line-height:.86;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap;
  margin:0 0 14px;
}
.stat-num .unit{
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:.2em;letter-spacing:.04em;text-transform:uppercase;opacity:.78;
  white-space:nowrap;
}
/* Variante "mot" (cartes sans chiffre) — taille mesurée pour respirer */
.stat-num.is-word{
  display:block;
  font-weight:400;font-size:clamp(26px,2.5vw,38px);line-height:1.08;letter-spacing:-.005em;
}
.stat-sub{
  font-size:13px;line-height:1.45;opacity:.7;margin:0;max-width:36ch;
}
/* Carte accent (fond marque, texte clair) */
.stat.is-accent{
  background:var(--ink);color:var(--creme);
  border-color:transparent;
}
.stat.is-accent .stat-pre{opacity:.65}
.stat.is-accent .stat-sub{opacity:.78}
.stat.is-accent:hover{background:#000;transform:translateY(-3px)}
@media(max-width:880px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .stats-grid{grid-template-columns:1fr}
  .stat{min-height:0;padding:28px 28px}
}

/* ===================================================================== */
/* ============== SECTIONS DE CONTENU (wireframe complet) ================ */
/* ===================================================================== */

/* Conteneur générique pour les nouvelles sections */
.s{
  position:relative;
  padding:clamp(80px,11vh,140px) 0;
}
.s-num{
  position:absolute;top:30px;right:clamp(20px,5vw,64px);
  z-index:3; /* toujours au-dessus des illustrations décoratives (retour client V4) */
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:14px;letter-spacing:.32em;
  opacity:.4;
}
.s-title{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(34px,4.6vw,72px);line-height:1.04;letter-spacing:-.005em;
  margin:0 0 36px;max-width:18ch;
}
/* Titre principal + sous-titre dans le même H2 (sous-titre = Parkinsans gras, plus petit) */
.s-title-main{display:block}
.s-title-sub{
  display:block;
  font-family:'Parkinsans',sans-serif;font-weight:700;
  font-size:.34em;
  line-height:1.25;letter-spacing:.005em;
  opacity:.82;
  margin-top:.32em;
}
/* Variante « lead » : sous-titre placé AVANT le titre principal (au-dessus) */
.s-title-sub--lead{margin-top:0;margin-bottom:.34em}
.s-body{
  font-size:clamp(15px,1.1vw,17px);line-height:1.7;
  max-width:54ch;
}
.s-body p + p{margin-top:14px}
.s-body strong{font-weight:600}

/* CTA raffiné — lien souligné + flèche, en currentColor (s'adapte à tous les thèmes) */
.btn-line{
  display:inline-flex;align-items:center;gap:12px;
  color:inherit;
  font-weight:500;font-size:14px;letter-spacing:.02em;
  padding:8px 0 6px;
  position:relative;
  margin-top:32px;
  transition:gap .3s cubic-bezier(.4,0,.2,1);
}
.btn-line::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.btn-line:hover::after{transform-origin:right;transform:scaleX(0)}

/* Bouton « Laisser un avis » — CTA vers la fiche Google (pill inversée, lisible sur tous les thèmes) */
.btn-review{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:32px;
  padding:11px 22px 11px 18px;border-radius:999px;
  background:var(--fg);color:var(--bg);
  font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1;
  border:1px solid var(--fg);
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.btn-review:hover{transform:translateY(-2px);opacity:.92}
.btn-review svg{width:15px;height:15px;flex-shrink:0}

/* ===== SECTION 1 — Mariage en Provence (jour) ===== */
/* ===== SECTION — Un domaine provençal (intro éditoriale, fond crème) ===== */
.s-provencal .s-grid{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(40px,6vw,100px);align-items:center;
}
.s-provencal .s-media{
  position:relative;aspect-ratio:4/5;
  border-radius:24px;overflow:hidden;
}
.s-provencal .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.s-provencal:hover .s-media img{transform:scale(1.03)}
@media(max-width:880px){.s-provencal .s-grid{grid-template-columns:1fr}}

.s-mariage .s-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(40px,5vw,80px);align-items:center;
}
.s-mariage .s-media{
  position:relative;aspect-ratio:4/5;
  border-radius:200px 200px 24px 24px;
  overflow:hidden;
}
.s-mariage .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.s-mariage:hover .s-media img{transform:scale(1.04)}
@media(max-width:880px){.s-mariage .s-grid{grid-template-columns:1fr}}

/* ===== SECTION — Hébergements (split éditorial : texte sur la couleur + image arrondie, comme provençal/mariage — plus de bloc blanc) ===== */
.s-hebergements .s-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(40px,5vw,80px);align-items:center;
}
.s-hebergements .s-media{
  position:relative;aspect-ratio:4/5;
  border-radius:24px;overflow:hidden;
}
.s-hebergements .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.s-hebergements:hover .s-media img{transform:scale(1.04)}
@media(max-width:880px){.s-hebergements .s-grid{grid-template-columns:1fr}}

/* ===== SECTION 3 — Météo (vert) ===== */
.s-meteo{padding:clamp(100px,14vh,160px) 0}
.s-meteo .s-title{
  text-align:center;margin:0 auto 50px;max-width:22ch;
  font-size:clamp(36px,5vw,76px);
}
.s-meteo .s-content{
  position:relative;
  display:grid;grid-template-columns:0.5fr 2.4fr 0.5fr;
  gap:clamp(30px,4vw,60px);align-items:center;
}
.s-meteo .s-media{
  grid-column:2;
  position:relative;aspect-ratio:4/3;
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.4);
}
.s-meteo .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.s-meteo .s-body{
  grid-column:1 / -1;margin:50px auto 0;text-align:center;max-width:62ch;
}
/* (Petites illus flottantes soleil/nuage/pluie retirées — retour client V4) */
@media(max-width:880px){
  .s-meteo .s-content{grid-template-columns:1fr}
  .s-meteo .s-media{grid-column:1}
}

/* ===== SECTION 4 — Prieuré (lavande) ===== */
.s-prieure .s-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,100px);align-items:center;
}
.s-prieure .s-media{
  position:relative;aspect-ratio:1;
  border-radius:24px;overflow:hidden;
}
.s-prieure .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.s-prieure .s-title{font-size:clamp(32px,4.2vw,60px);max-width:14ch}
@media(max-width:880px){.s-prieure .s-grid{grid-template-columns:1fr}}

/* ===== SECTION 5 — Galerie marquee (défilement continu infini) ===== */
.s-galerie{padding:clamp(80px,11vh,140px) 0 clamp(60px,8vh,100px)}
.s-galerie .s-head{max-width:none;margin-bottom:50px}
.s-galerie .s-head .s-title{max-width:none}        /* « Se projeter dans votre mariage » sur une seule ligne (desktop) */
.s-galerie .s-head .s-body{margin-top:18px;max-width:62ch}

.gal-marquee{
  position:relative;overflow:hidden;
  width:100%;
  /* Fondu en gradient sur les bords */
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.gal-track{
  display:flex;gap:18px;
  width:max-content;
  animation:marquee 50s linear infinite;
  will-change:transform;
}
/* Pause au survol */
.gal-marquee:hover .gal-track{animation-play-state:paused}

@keyframes marquee{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-50% - 9px))} /* -50% car les items sont dupliqués pour boucle invisible */
}
.gal-item{
  flex:0 0 clamp(240px,28vw,360px);
  aspect-ratio:4/5;
  border-radius:16px;overflow:hidden;
  position:relative;
}
.gal-item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.gal-item:hover img{transform:scale(1.04)}

.s-galerie .gal-ctas{
  display:flex;gap:30px;justify-content:center;
  margin-top:48px;flex-wrap:wrap;
}
.s-galerie .gal-ctas .btn-line{margin-top:0}

/* ===== SECTION 6 — Témoignages (nuit) ===== */
.s-temoignages{padding:clamp(100px,14vh,160px) 0}
.s-temoignages .s-head{max-width:62ch;margin-bottom:50px}
.s-temoignages .s-head .s-body{margin-top:18px}
.s-temoignages .quotes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.s-temoignages .q{
  margin:0; /* reset du margin par défaut du <blockquote> (40px) — sinon décalage + faux gap */
  position:relative;
  padding:34px 30px 26px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px);
  font-size:14.5px;line-height:1.6;
  transition:transform .35s ease, background .35s ease;
}
.s-temoignages .q:hover{transform:translateY(-4px);background:rgba(255,255,255,.10)}
/* Icône illustrée en haut, différente par card — couleur paramétrée via --ico-color */
.s-temoignages .q-ico{
  display:block;width:54px;height:54px;
  margin-bottom:18px;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
  background:var(--ico-color, var(--fg));
  opacity:.92;
}
/* Variante inline (SVG enfant gardé tel quel, ex. anneaux bicolores) */
.s-temoignages .q-ico--inline{
  background:transparent;
  -webkit-mask:none;mask:none;
}
.s-temoignages .q-ico--inline svg{width:100%;height:100%}
.s-temoignages .q p{margin:0;white-space:pre-line}
.s-temoignages .q cite{
  display:block;margin-top:22px;
  font-style:normal;font-weight:600;
  font-size:13px;letter-spacing:.04em;
  opacity:.8;
}
.s-temoignages .q-cta{
  display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-top:42px;
}
.s-temoignages .q-cta .btn-line,
.s-temoignages .q-cta .btn-review{margin-top:0}
@media(max-width:980px){
  .s-temoignages .quotes{grid-template-columns:1fr;gap:14px}
  /* .q est un <blockquote> : on neutralise la marge user-agent (40px g/d) qui
     rétrécit la carte de 80px — discret en grille 3 colonnes, flagrant en 1 colonne */
  .s-temoignages .q{margin:0}
}

/* ===== OUTRO — section contact + footer partagent une image de fond en parallaxe ===== */
.outro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.outro-bg{
  position:absolute;left:0;right:0;
  top:-16%;height:132%;          /* déborde haut/bas pour le parallaxe */
  background:url('../assets/images/couple3.webp') center 30%/cover no-repeat;
  z-index:-2;
  will-change:transform;
}
.outro::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,74,.58) 0%,
    rgba(10,10,74,.74) 42%,
    rgba(10,10,74,.93) 100%);
  z-index:-1;
}

/* ===== SECTION 7 — Contact / préparation ===== */
.s-contact{
  position:relative;
  padding:clamp(170px,22vh,260px) 0 clamp(40px,5vh,64px);
}
.s-contact .s-grid{
  display:grid;grid-template-columns:1.4fr auto;
  gap:clamp(30px,4vw,60px);align-items:center;
}
.s-contact .s-title{font-size:clamp(32px,4.4vw,62px);max-width:18ch;margin-bottom:20px}
.s-contact .s-body{margin-bottom:0;text-shadow:0 1px 16px rgba(0,0,0,.25)}
.s-contact .btn-line{margin-top:0;flex-shrink:0}
@media(max-width:880px){.s-contact .s-grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.s-footer{
  position:relative;
  padding:20px 0 28px;
  font-size:13.5px;line-height:1.6;
}

/* ===== Footer bento — 3 blocs arrondis sur une rangée ===== */
.ft-bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  margin-bottom:20px;
}
.ft-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  padding:36px 34px;
  transition:background .35s ease, border-color .35s ease;
}
.ft-card:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.22)}

.ft-identity{grid-column:span 5;display:flex;flex-direction:column}
.ft-contacts{grid-column:span 4}
.ft-links{grid-column:span 3}

.s-footer h3{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:20px;margin:0 0 18px;letter-spacing:.005em;
}

/* Logo footer : structure brandboard (Les terres de + SARSON) */
.s-footer .ft-logo{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  font-family:'Londrina Solid',serif;font-weight:400;
  line-height:.88;
  font-size:40px;
  margin-bottom:22px;
}
.s-footer .ft-small{
  display:block;font-weight:400;font-size:.30em;line-height:1;
  margin-bottom:.10em;letter-spacing:0;white-space:nowrap;
}
.s-footer .ft-big{
  display:block;font-weight:900;font-size:1em;line-height:.88;
  letter-spacing:-.005em;white-space:nowrap;
}
.s-footer .ft-desc{opacity:.8;font-size:13.5px;line-height:1.66}
.s-footer .ft-desc p + p{margin-top:12px}

/* Réseaux sociaux — juste sous la description, sans vide */
.s-footer .ft-socials{
  margin-top:26px;
  display:flex;gap:12px;
}
.s-footer .ft-socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:9px;
  opacity:.92;transition:opacity .25s, transform .3s cubic-bezier(.4,0,.2,1), background .25s;
}
.s-footer .ft-socials a:hover{opacity:1;transform:translateY(-3px) rotate(-6deg);background:rgba(255,255,255,.07)}
.s-footer .ft-socials img,
.s-footer .ft-socials svg{width:100%;height:100%;overflow:visible}

.s-footer .ft-contact{list-style:none;margin:0;padding:0}
.s-footer .ft-contact li{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:14px;opacity:.92;
}
.s-footer .ft-contact li:last-child{margin-bottom:0}
.s-footer .ft-contact .ico{
  flex:0 0 22px;width:22px;height:22px;display:block;margin-top:1px;
}

/* Bloc liens : deux groupes de nav empilés */
.ft-navgroup + .ft-navgroup{margin-top:28px}
.s-footer .ft-nav{list-style:none;margin:0;padding:0}
.s-footer .ft-nav li{margin-bottom:11px}
.s-footer .ft-nav li:last-child{margin-bottom:0}
.s-footer .ft-nav a{
  position:relative;opacity:.85;font-weight:500;
  transition:opacity .2s, padding-left .25s;
}
.s-footer .ft-nav a:hover{opacity:1;padding-left:6px}

/* Ligne du bas — légal regroupé à gauche, signature Bolectif à l'opposé */
.s-footer .ft-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px 26px;
  padding:16px 4px 0;
  font-size:12px;letter-spacing:.04em;
}
.s-footer .ft-legal{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:6px 12px;
  opacity:.62;
}
.s-footer .ft-legal .sep{opacity:.45}
.s-footer .ft-bottom a{transition:opacity .2s}
.s-footer .ft-bottom a:hover{opacity:1;text-decoration:underline}
/* Crédit Bolectif — ancré en position absolue tout en bas du footer (collé au bord) */
.ft-credit{
  position:absolute;
  bottom:0;
  right:max(clamp(20px,5vw,64px), calc((100% - 1380px) / 2 + clamp(20px,5vw,64px)));
  display:block;font-size:0;
  opacity:.72;transition:opacity .25s ease;
}
.ft-credit:hover{opacity:1}
.ft-credit .ft-bolectif{
  display:block;width:104px;height:auto;
}
@media(max-width:680px){
  /* sur mobile, le crédit repasse dans le flux sous le légal */
  .ft-credit{position:static;margin-top:6px}
}

@media(max-width:980px){
  .ft-bento{grid-template-columns:repeat(6,1fr)}
  .ft-identity{grid-column:span 6}
  .ft-contacts{grid-column:span 3}
  .ft-links{grid-column:span 3}
}
@media(max-width:680px){
  .s-footer .ft-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:560px){
  .ft-bento{grid-template-columns:1fr;gap:12px}
  .ft-identity,.ft-contacts,.ft-links{grid-column:span 1}
}

/* ===== RAIL — fil conducteur fixé à droite ===== */
.rail{
  position:fixed;right:clamp(14px,2vw,28px);
  top:50%;transform:translateY(-50%);
  height:min(74vh,640px);width:28px;
  z-index:45;color:var(--fg);
  transition:color .8s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  pointer-events:none;
  opacity:0; /* caché tant que JS pas prêt */
}
.rail.is-ready{opacity:1}
.rail-line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:currentColor;opacity:.25;
  transform:translateX(-50%);
}
.rail-dot{
  position:absolute;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:.45;
  transform:translate(-50%,-50%);
  cursor:pointer;pointer-events:auto;
  transition:opacity .25s, transform .25s;
}
.rail-dot::after{
  content:attr(data-label);
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;opacity:0;
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.rail-dot:hover{opacity:1;transform:translate(-50%,-50%) scale(1.6)}
.rail-dot:hover::after{opacity:.85}
.rail-dot.is-active{opacity:1}
.rail-cursor{
  position:absolute;left:50%;
  width:14px;height:14px;
  border:1.5px solid currentColor;
  background:var(--bg);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:top .3s cubic-bezier(.2,.6,.2,1), background-color .8s, color .8s;
  pointer-events:none;
}
/* Caché sur tablette et mobile (cohérent avec la nav qui disparaît à 1024px) */
@media(max-width:1024px){.rail{display:none}}

/* ===== Old .foot fallback (utile pour creation-1 si shared) ===== */
.foot{padding:30px 0;text-align:center;font-size:12px;opacity:.6;letter-spacing:.1em}
.back{
  position:fixed;left:24px;bottom:24px;
  background:rgba(21,21,31,.92);color:#fff;
  padding:12px 18px;border-radius:999px;
  font-size:12px;letter-spacing:.08em;z-index:60;
  backdrop-filter:blur(8px);
}

/* ===================================================================== */
/* ===== Illustrations animées par section (retour client V4) ========== */
/* Écho du contour de l'icône : trait épais, aplats de couleur de la palette,
   animation « se dessine » (draw-in) ou mouvement doux (eau, oliviers, étoiles). */
.s{z-index:0}                          /* contexte d'empilement par section */
.s > .wrap{position:relative;z-index:2} /* contenu toujours au-dessus de la déco */
.s-illu{
  position:absolute;z-index:1;
  pointer-events:none;color:var(--fg);
}
.s-illu svg{width:100%;height:100%;display:block;overflow:visible}
.s-illu [data-draw]{
  fill:none;stroke:currentColor;
  stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
}
.s-illu [data-pop]{transform-box:fill-box;transform-origin:center}

/* Positions par section (réglées pour ne pas gêner le contenu) */
.illu-provencal   {left:0;bottom:1%;width:clamp(205px,23vw,300px);opacity:.55}  /* piscine plan : valeur d'origine (Home, section provençale) — à gauche, en bas */
/* Override UNIQUEMENT pour la page Mariage (section moments) : agrandie + en haut à droite, derrière les cartes */
.s-moments .illu-provencal{right:-2%;top:clamp(120px,15vw,250px);left:auto;bottom:auto;width:clamp(240px,26vw,365px);opacity:.6;z-index:0}
.illu-mariage     {left:2%;bottom:5%;width:clamp(180px,21vw,275px);opacity:.9}  /* rangée de lavande (SVG client) */
.illu-mariage .lavfield{width:100%;height:auto;display:block;transform-box:fill-box;transform-origin:50% 100%;animation:illuWind 4.8s ease-in-out infinite}
.illu-hebergements{left:2%;bottom:4%;width:clamp(170px,18vw,240px);opacity:.6}
.illu-meteo       {left:2%;bottom:6%;width:clamp(180px,19vw,260px);opacity:.5}
.illu-prieure     {right:6%;top:4%;width:clamp(93px,11.6vw,138px);opacity:.6}  /* écartée du bord, réduite de 20%, opacité 60% */
.illu-galerie     {right:2%;top:18px;width:clamp(115px,12vw,170px);opacity:.55}
.illu-temoignages {inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
/* Les étoiles n'apparaissent QUE dans le bleu (thème nuit) — retour client : pas d'étoiles visibles en amont sur le violet */
body[data-theme="nuit"] .illu-temoignages{opacity:.8}

/* Aplats de couleur de la palette (cohérence avec l'icône) */
.illu-mariage .bud  {fill:#5a1fbf;stroke:currentColor;stroke-width:1.3}
.s-illu .illu-water [data-draw]{stroke:#2a6f97}
.s-illu .olive      {fill:#1f5a23;stroke:currentColor;stroke-width:1.4}
.s-illu .brick{fill:rgba(255,255,255,.5);stroke:currentColor;stroke-width:2}
.s-illu .stone{fill:rgba(255,255,255,.42);stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.illu-galerie .grape{fill:#6a3fb5;stroke:currentColor;stroke-width:1.6}
.illu-temoignages .star{fill:currentColor;transform-box:fill-box;transform-origin:center;animation:illuTwinkle 3s ease-in-out infinite}

/* Mouvements continus (le client veut de la vie : balancement des végétaux, dérive eau/nuage, scintillement) */
.s-illu .illu-water{animation:illuWaterDrift 6s ease-in-out infinite}
.s-illu .illu-sway{transform-box:fill-box;animation:illuSway 5.5s ease-in-out infinite}
.illu-provencal .illu-sway{transform-origin:50% 95%}
.illu-mariage   .illu-sway{transform-origin:50% 100%}
.illu-galerie   .illu-sway{transform-origin:50% 5%;animation-duration:6.5s}
.illu-meteo .illu-sun  {transform-box:fill-box;transform-origin:center;animation:illuPulse 5s ease-in-out infinite}
.illu-meteo .illu-drift{transform-box:fill-box;animation:illuCloud 9s ease-in-out infinite}
@keyframes illuWaterDrift{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes illuSway {0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes illuCloud{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes illuPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes illuTwinkle{0%,100%{opacity:.2}50%{opacity:1}}

/* Piscine vue de dessus (provençal) — reprend les lignes de la piscine du domaine : margelle
   en pierre + eau vert-d'eau, reflets qui ondulent (groupe .illu-water → illuWaterDrift). */
.illu-provencal .pool-garden{opacity:.2}      /* jardin fortement estompé (retour client) */
.illu-provencal .pool-loungers{opacity:.65}

/* Champ de lavande (mariage) — rangs qui filent vers l'horizon, animés façon vent (skew). */
.illu-mariage .lav-row{fill:none;stroke:#5a1fbf;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.illu-mariage .lav-row--far{stroke-width:2.4;opacity:.7}
.illu-mariage .illu-lavfield{transform-box:fill-box;transform-origin:50% 100%;animation:illuWind 4.6s ease-in-out infinite}
@keyframes illuWind{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}

/* Bâtisse en pierre (prieuré) — SVG client recoloré sombre pour ressortir sur le beige. */
.illu-prieure .batisse{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}

@media(max-width:880px){
  /* Illustrations de section : DANS LE FLUX, au-dessus du titre (retour client), alignées à
     gauche sur le texte, taille réduite — plus de positionnement absolu sur mobile. */
  .s-illu:not(.illu-temoignages){
    position:static;inset:auto;
    width:clamp(100px,24vw,138px);height:auto;
    margin:0 0 16px clamp(20px,5vw,64px);
    opacity:.6;transform:none;
  }
  .s-illu:not(.illu-temoignages) svg{height:auto}
  .s-illu.illu-prieure{width:clamp(78px,18.4vw,104px)}  /* bâtisse en portrait, réduite de 20% */
  .s-illu.illu-provencal{width:clamp(120px,30vw,170px)}  /* piscine plan agrandie aussi sur mobile (estompée via opacité .6) */
  .illu-temoignages{transform:none;opacity:0}   /* starfield plein cadre : pas de mise à l'échelle ; visible seulement en nuit */
  body[data-theme="nuit"] .illu-temoignages{opacity:.7}
  /* Prieuré : titre/contenu AVANT l'image en mobile (sinon l'image se retrouve au-dessus du titre) */
  .s-prieure .s-media{order:1}
  /* Espacement vertical réduit sur mobile (retour client : trop d'espace en haut des sections/illustrations) */
  .s{padding-top:clamp(38px,6vh,56px);padding-bottom:clamp(38px,6vh,56px)}
  .s-meteo,.s-temoignages{padding-top:clamp(44px,7vh,62px);padding-bottom:clamp(44px,7vh,62px)}
  .s-contact{padding-top:clamp(80px,13vh,120px)}
  .stats{padding-bottom:clamp(44px,7vh,72px)}
}
/* En très petit écran, seul le champ d'étoiles plein cadre est retiré ; les illus de section restent près du titre. */
@media(max-width:560px){.illu-temoignages{display:none}}

/* ===== Ciel étoilé FIXE plein écran (pages nuit : Avis, Contact) =====
   Conteneur fixe derrière tout le contenu (au-dessus du fond navy du body, reste fixe au scroll).
   À combiner avec la classe .illu-temoignages (couleur/opacité/twinkle des .star). #starfield rempli par site.js. */
.page-stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.page-stars svg{width:100%;height:100%;display:block;overflow:visible}
@media(max-width:560px){.page-stars{display:block}}  /* on garde les étoiles sur mobile (≠ illus de section) */

/* ===== Effet « nom de marque » — « Les Terres de Sarson » en police du logo (retour client V4) ===== */
/* Le wordmark garde TOUJOURS sa casse exacte « Les terres de SARSON » — text-transform:none
   le protège des contextes en majuscules (ex. .hero__foot{text-transform:uppercase}). */
.brand{font-family:'Londrina Solid',serif;font-weight:400;letter-spacing:.012em;text-transform:none}

@media(prefers-reduced-motion: reduce){
  body{transition:none}
  .icon-svg{transition:none}
  .icon-msg .msg-default{animation:none}
  .illu-hebergements .illu-water,
  .s-illu .illu-sway,
  .illu-meteo .illu-sun,
  .illu-meteo .illu-drift,
  .illu-temoignages .star{animation:none}
}
/* ============================================================ */
/* ===== PAGES INTERNES — en-tête / popup burger / pied partagés ===== */
/* (distinct du hero spécial de l'accueil) */
/* Header : toujours de la couleur de la page (var(--bg)), texte en var(--fg) → adaptatif à chaque thème */
.site-header{position:sticky;top:0;z-index:96;background:var(--bg);border-bottom:1px solid color-mix(in srgb, var(--fg) 12%, transparent);transition:background-color .8s cubic-bezier(.4,0,.2,1),color .8s cubic-bezier(.4,0,.2,1)}
/* padding-block seulement (et NON le shorthand `padding:16px 0`) : le padding horizontal vient
   ainsi du `.wrap` → le header (logo + nav + burger) s'aligne sur le contenu à TOUTES les largeurs
   (sinon, sous la max-width du wrap, le header était collé aux bords faute de margin auto). */
.site-header__inner{display:flex;align-items:center;gap:clamp(14px,2.2vw,38px);padding-block:16px}
.site-logo{flex:0 0 auto;display:inline-flex;align-items:center;gap:clamp(8px,1vw,13px)}
/* Logo header = icône + wordmark SÉPARÉS (sans baseline) → permet l'animation au survol.
   Le wordmark est identique en clair/nuit (foncé) ; seule l'icône a 2 variantes (couleur / line-art). */
.site-logo__icon{display:inline-flex;flex:0 0 auto;transform-origin:center;transition:transform .55s cubic-bezier(.34,1.45,.4,1)}
.site-logo__icon img{height:clamp(40px,3.4vw,46px);width:auto;display:block}
.site-logo__word{height:clamp(29px,2.7vw,33px);width:auto;display:block;transition:opacity .4s ease}
.site-logo .ic-white{display:none}
/* Pages nuit : icône en détouré blanc (line-art passé en blanc, JAMAIS l'aplat plein) + wordmark blanc */
body[data-theme="nuit"] .site-logo .ic-color{display:none}
body[data-theme="nuit"] .site-logo .ic-white{display:block;filter:brightness(0) invert(1)}
body[data-theme="nuit"] .site-logo__word{filter:brightness(0) invert(1)}
/* Survol : l'icône se détache du texte (légère rotation + décalage + échelle), le texte s'opacifie */
.site-logo:hover .site-logo__icon{transform:rotate(-7deg) translate(-3px,-1px) scale(1.06)}
.site-logo:hover .site-logo__word{opacity:.5}
@media(prefers-reduced-motion:reduce){
  .site-logo__icon{transition:none}
  .site-logo:hover .site-logo__icon{transform:none}
}
.site-nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);margin-left:auto}
.site-nav a{font-family:'Parkinsans',sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);position:relative;padding:6px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-cta{font-family:'Parkinsans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--fg);color:var(--bg);border-radius:999px;padding:11px 22px;transition:opacity .25s}
.site-cta:hover{opacity:.82}
.site-header .burger{color:var(--fg)}
@media(max-width:900px){
  .site-nav{display:none}
  .site-header__inner{gap:14px}
  .site-cta{margin-left:auto}
}

/* Popup burger = bloc FLOTTANT sous le header (et non collé au bord droit/bas) */
.nav-popup{position:fixed;top:86px;right:clamp(14px,3vw,34px);z-index:95;
  width:min(340px,90vw);background:var(--creme);
  border:1px solid rgba(0,0,0,.06);border-radius:22px;
  box-shadow:0 32px 70px -28px rgba(13,13,94,.42);
  display:flex;flex-direction:column;gap:4px;padding:16px;
  transform:translateX(38px);transform-origin:top right;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, transform .46s cubic-bezier(.22,1,.36,1), visibility .46s;}
.nav-popup.is-open{opacity:1;visibility:visible;transform:translateX(0)}
.nav-popup a{font-family:'Parkinsans',sans-serif;font-weight:500;font-size:15px;letter-spacing:.01em;color:var(--ink);
  padding:11px 14px;border-radius:13px;transition:background .2s ease,color .2s ease}
.nav-popup a:not(.nav-popup__cta):hover{background:rgba(13,13,94,.07)}
.nav-popup .np-main{display:none;flex-direction:column;gap:4px}     /* liens principaux : seulement en mobile */
.nav-popup .np-sep{border:0;border-top:1px solid rgba(0,0,0,.10);width:auto;margin:6px 10px}
.nav-popup__cta{margin-top:6px;text-align:center;background:var(--ink);color:var(--creme)!important;border-radius:999px;padding:12px 24px!important;font-size:12px!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nav-popup__cta:hover{opacity:1;background:#000}
/* Coordonnées (wireframe mobile) : réutilise les icônes de marque, teintées var(--ink) via mask */
.nav-popup .np-coords{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav-popup .np-coord{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.4}
.nav-popup .np-coord > span:last-child{min-width:0;overflow-wrap:anywhere}
.nav-popup .np-ico{flex:0 0 19px;width:19px;height:19px;margin-top:2px;background:var(--ink);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.nav-popup .np-ico--tel{-webkit-mask-image:url(../assets/illustrations/icon-tel.svg);mask-image:url(../assets/illustrations/icon-tel.svg)}
.nav-popup .np-ico--mail{-webkit-mask-image:url(../assets/illustrations/icon-mail.svg);mask-image:url(../assets/illustrations/icon-mail.svg)}
.nav-popup .np-ico--gps{-webkit-mask-image:url(../assets/illustrations/icon-gps.svg);mask-image:url(../assets/illustrations/icon-gps.svg)}
/* Mobile : le popup devient un PANNEAU PLEIN ÉCRAN calé pile SOUS le header.
   --header-h est mesuré en JS (main.js / site.js) -> le panneau ne déborde plus sur le header,
   quelle que soit sa hauteur (home ~106px vs pages internes ~73px). Glisse depuis la droite. */
@media(max-width:900px){
  .nav-popup{
    top:var(--header-h, 78px); left:0; right:0; bottom:0;
    width:auto; max-width:none;
    border:0; border-radius:0; box-shadow:none;
    padding:clamp(20px,5vw,34px) clamp(22px,7vw,40px) calc(26px + env(safe-area-inset-bottom));
    gap:2px;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:translateX(100%); transform-origin:center right;
    transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility .5s;
  }
  .nav-popup .np-main{display:flex}
  .nav-popup a{font-size:17px;padding:14px 12px}
  .nav-popup .np-coord{font-size:15px}
}
/* Backdrop transparent : sert juste à fermer au clic extérieur (le popup flotte, pas d'overlay sombre) */
.nav-popup-backdrop{position:fixed;inset:0;z-index:94;background:transparent;visibility:hidden;transition:visibility .3s}
.nav-popup-backdrop.is-open{visibility:visible}
/* Mobile : le backdrop démarre SOUS le header (placé après la règle de base pour la surcharger)
   -> il ne recouvre plus le burger, qui reste le point de fermeture du menu (home : header z<backdrop). */
@media(max-width:900px){ .nav-popup-backdrop{top:var(--header-h, 78px)} }

/* Pied partagé : on réutilise le bento .s-footer / .ft-* sur fond nuit */
.site-footer{background:var(--bleu-deep);color:var(--creme);position:relative}
.site-footer .wrap{padding-top:8px}

/* Hero générique de page interne (placeholder de scaffold ; le design final vient des wireframes) */
.page-hero{padding:clamp(70px,12vh,150px) 0 clamp(40px,7vh,80px)}
.page-hero .eyebrow{font-family:'Parkinsans',sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.55;margin:0 0 14px}
.page-hero h1{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(40px,6vw,86px);line-height:1.02;margin:0 0 24px;max-width:18ch}
.page-hero p{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(17px,1.5vw,22px);line-height:1.55;max-width:60ch;margin:0}
.page-scaffold-note{margin:36px 0 0;font-size:13px;opacity:.5;font-style:italic}

/* ============================================================ */
/* ===== PAGE MARIAGE — base ciel/bleu, design dans la continuité de la home ===== */
/* (couleur de fond pilotée par body[data-theme="ciel"]) */
.m-hero{position:relative;padding:clamp(40px,7vh,84px) 0 clamp(48px,7vh,86px)}  /* pas d'overflow:hidden → l'ombre de l'image n'est plus coupée par la section suivante */
.m-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,78px);align-items:center}
.m-hero h1{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.005em;margin:0 0 24px;max-width:15ch}
/* Sous-titre intégré au H1 (même logique que .s-title-sub mais à l'échelle du h1) */
.m-hero h1 .h1-main{display:block}
.m-hero h1 .h1-sub{display:block;font-family:'Parkinsans',sans-serif;font-weight:700;font-size:.32em;line-height:1.22;letter-spacing:.004em;opacity:.8;margin-top:.36em}
.m-hero .m-lead{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:56ch;margin:0 0 16px}
.m-hero .m-lead.is-small{font-size:clamp(15px,1.05vw,17px);opacity:.92}
.m-hero-ctas{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px;align-items:center}
.m-hero .m-media{position:relative;aspect-ratio:4/5;border-radius:220px 220px 24px 24px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(10,20,50,.5)}
.m-hero .m-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:880px){.m-hero-grid{grid-template-columns:1fr;gap:32px}}

/* Bandeau intro de section (titre + paragraphe centrés) */
.m-head{max-width:64ch;margin:0 auto 48px;text-align:center}
.m-head .s-title{max-width:none}
.m-head .s-body{margin:18px auto 0}

/* Les 6 moments / décors */
.m-moments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m-moment{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:28px 26px;transition:transform .35s ease,box-shadow .35s ease}
.m-moment:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(10,20,50,.5)}
.m-moment h3{font-family:'Londrina Solid',serif;font-weight:400;font-size:23px;margin:0 0 10px}
.m-moment p{font-size:14px;line-height:1.6;opacity:.82;margin:0}
@media(max-width:880px){.m-moments-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.m-moments-grid{grid-template-columns:1fr}}

/* Nos espaces (4 lieux en images) */
.m-spaces-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.m-space{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;margin:0}
.m-space img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.6,.2,1)}
.m-space:hover img{transform:scale(1.05)}
.m-space figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px;color:#fff;font-family:'Londrina Solid',serif;font-size:19px;line-height:1.05;background:linear-gradient(transparent,rgba(10,10,40,.72))}
@media(max-width:880px){.m-spaces-grid{grid-template-columns:1fr 1fr}}

/* Checklist "organisation libre" */
/* Checklist = petits blocs transparents, bordure fine couleur du texte, hauteur uniforme (2 lignes),
   icône check de la même couleur que la bordure (cercle non rempli). */
.m-features{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.m-features li{display:flex;align-items:center;gap:13px;margin:0;padding:14px 20px;min-height:74px;background:transparent;border:1px solid var(--fg);border-radius:15px;font-size:14.5px;line-height:1.3;transition:background .3s ease}
.m-features li:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.m-features li::before{content:"";flex:0 0 22px;width:22px;height:22px;background-color:var(--fg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.4l2.7 2.7L16.4 9.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.4l2.7 2.7L16.4 9.4'/%3E%3C/svg%3E") center/contain no-repeat}
.m-features li:last-child:nth-child(odd){grid-column:1 / -1}   /* dernière ligne seule → pleine largeur (bloc global) */
@media(max-width:600px){.m-features{grid-template-columns:1fr}.m-features li:last-child:nth-child(odd){grid-column:auto}}

/* Témoignages sur fond clair (variante de .quotes/.q) */
.m-temoignages .q{background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.06);backdrop-filter:none}
.m-temoignages .q:hover{background:rgba(255,255,255,.9)}

/* Image éditoriale simple (sections "Le domaine en photo", etc.) */
.m-figure{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px -45px rgba(10,20,50,.45)}
.m-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* CTA du hero : on annule la marge par défaut des .btn-line (déjà espacés par .m-hero-ctas) */
.m-hero-ctas .btn-line{margin-top:0}

/* Stats sur 4 colonnes (page Mariage) */
.m-stats .stats-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.m-stats .stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.m-stats .stats-grid{grid-template-columns:1fr}}

/* Sections "split" génériques (image + texte alternés) propres à la page Mariage */
.s-salles .s-grid,
.s-couchages .s-grid,
.s-organisation .s-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px);align-items:center;
}
.s-salles .s-media,
.s-couchages .s-media,
.s-organisation .s-media{
  position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px -45px rgba(10,20,50,.45);
}
.s-salles .s-media img,
.s-couchages .s-media img,
.s-organisation .s-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.s-salles:hover .s-media img,
.s-couchages:hover .s-media img,
.s-organisation:hover .s-media img{transform:scale(1.03)}
@media(max-width:880px){
  .s-salles .s-grid,
  .s-couchages .s-grid,
  .s-organisation .s-grid{grid-template-columns:1fr;gap:32px}
}

/* CTA final sur l'outro sombre : texte clair lisible (le body reste en thème ciel) */
.m-final{color:var(--creme)}
.m-final .s-title,
.m-final .s-body{color:var(--creme)}

/* Section « organisation libre » : colonne centrée (titre 1 ligne / image / texte / checklist) */
.s-organisation .org-stack{max-width:1080px;margin:0 auto;text-align:center}
.s-organisation .org-stack .m-head{max-width:none;margin:0 auto clamp(30px,4vh,46px)}
.s-organisation .org-stack .m-head .s-title{max-width:none}            /* titre sur une seule ligne */
.s-organisation .org-media{margin:0 auto clamp(30px,4vh,48px);max-width:720px;border-radius:24px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 80px -45px rgba(10,20,50,.45)}
.s-organisation .org-media img{width:100%;height:100%;object-fit:cover}
.s-organisation .org-body{max-width:62ch;margin:0 auto;text-align:center}
.s-organisation .m-features{max-width:720px;margin:clamp(30px,4vh,44px) auto 0;text-align:left}  /* aligné sur la largeur de l'image (720px) */

/* Section « décor naturel » : mise en page éditoriale (image mise en avant + texte) */
.s-decor .decor-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5vw,84px);align-items:center;margin-top:clamp(16px,2.5vh,34px)}
.s-decor .decor-media{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 36px 90px -48px rgba(10,20,50,.5)}
.s-decor .decor-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.6,.2,1)}
.s-decor .decor-media:hover img{transform:scale(1.04)}
.s-decor .decor-text .decor-lead{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(20px,1.7vw,27px);line-height:1.45;margin:0 0 22px}
.s-decor .decor-text p{font-size:clamp(15px,1.1vw,17px);line-height:1.72;margin:0 0 16px}
.s-decor .decor-text p:last-child{margin:0}
@media(max-width:880px){.s-decor .decor-grid{grid-template-columns:1fr;gap:30px}.s-decor .decor-media{aspect-ratio:16/10;max-width:560px;margin:0 auto}}

/* Outro Mariage = identique à la home : photo de fond (couple3) + overlay bleu nuit + parallaxe.
   Le footer est DANS .outro (transparent, cartes translucides), texte en crème via .m-final. */

/* Icônes des 6 moments = illustrations de marque (aplats colorés + contour, style maison) */
.m-moment .m-ico{display:block;width:56px;height:56px;margin:0 0 18px}

/* Piscine en fond de la section moments : derrière les cartes, sans débordement */
.s-moments{overflow:hidden}
.s-moments .wrap{position:relative;z-index:1}      /* contenu au-dessus de la piscine */
.s-moments .m-moments-grid{position:relative;z-index:1}
.s-moments .m-head{position:relative;z-index:1}

/* ===== Carrousel « Nos espaces » — défilement auto + contrôle manuel ===== */
.espaces-carousel{position:relative;margin-top:8px}
.ec-viewport{overflow:hidden;cursor:grab}
.ec-viewport:active{cursor:grabbing}
.ec-track{display:flex;gap:16px;will-change:transform;touch-action:pan-y}
.ec-card{position:relative;flex:0 0 auto;width:clamp(220px,25vw,300px);aspect-ratio:3/4;border-radius:16px;overflow:hidden;margin:0;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.ec-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.6,.2,1);pointer-events:none;-webkit-user-drag:none}
.ec-card:hover img{transform:scale(1.05)}
.ec-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px;color:#fff;font-family:'Londrina Solid',serif;font-size:20px;line-height:1.05;background:linear-gradient(transparent,rgba(10,10,40,.74))}
.ec-controls{display:flex;align-items:center;gap:14px;margin-top:26px}
.ec-btn{width:50px;height:50px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--fg) 32%,transparent);display:grid;place-items:center;color:var(--fg);transition:background .25s,color .25s,border-color .25s}
.ec-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ec-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ec-dots{display:flex;align-items:center;gap:8px;margin-left:auto}
.ec-dot{width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--fg) 26%,transparent);transition:width .3s ease,background .3s ease;padding:0}
.ec-dot.is-active{width:28px;background:var(--fg)}
@media(max-width:880px){.ec-card{width:74vw}}
@media(max-width:560px){.ec-dots{display:none}}