/* ==================================================================
   SPAPOURSOULIERS (spashoes) — Feuille de style
   Palette « Bleu nuit éclairci & Or » (A2).
   Dégradés mesh, motif de vagues (esprit spa/eau), verre dépoli, lueurs.
   Mobile-first. Animations : progressive enhancement (voir app.js).
   ================================================================== */

:root {
  --bg:        #1b4f7a;   /* bleu nuit éclairci (choisi) */
  --bg-2:      #174268;   /* sections alternées (un peu plus profond) */
  --surface:   rgba(244, 249, 252, 0.07);  /* verre */
  --surface-s: #235f8e;   /* surface solide (formulaire) */
  --line:      rgba(244, 249, 252, 0.14);
  --line-2:    rgba(244, 249, 252, 0.24);

  --text:      #f1f7fc;
  --muted:     #bcd2e4;
  --muted-2:   #d6e6f2;

  --gold:      #ecd199;
  --gold-br:   #f5e3b6;
  --sky:       #bfe2f5;
  --sky-2:     #8fc8ea;
  --ink:       #0c2740;   /* encre navy sur surfaces dorées */

  --grad:      linear-gradient(115deg, #f7e8c2 0%, var(--gold) 28%, #ddba7e 52%, var(--sky-2) 80%, var(--sky) 100%);
  --grad-2:    linear-gradient(135deg, var(--sky-2) 0%, var(--gold) 100%);
  --grad-soft: linear-gradient(135deg, rgba(143,200,234,.20), rgba(236,209,153,.20));

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1200px;
  --r-sm: 12px; --r: 16px; --r-lg: 30px; --hdr: 158px;
  --flow-md: clamp(40px, 4.5vw, 56px);
  --flow-lg: clamp(56px, 6.5vw, 80px);
  --gutter: clamp(18px, 2.4vw, 30px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
  /* ombres diffuses multi-couches — 4 plans (contact + clé + ambiante + portée) */
  --sh-sm: 0 1px 1px rgba(6,22,38,.22), 0 3px 7px rgba(6,22,38,.16), 0 10px 24px rgba(6,22,38,.20);
  --sh-md: 0 1px 2px rgba(6,22,38,.24), 0 6px 14px rgba(6,22,38,.20), 0 18px 42px rgba(6,22,38,.28), 0 40px 84px rgba(5,18,32,.30);
  --sh-lg: 0 2px 4px rgba(6,22,38,.26), 0 10px 22px rgba(6,22,38,.24), 0 32px 70px rgba(5,18,32,.40), 0 70px 150px rgba(4,14,26,.48);
  --glow-gold: 0 0 0 1px rgba(236,209,153,.10), 0 0 28px rgba(236,209,153,.14);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #0a2338; overflow-x: clip; }
body {
  font-family: var(--sans); color: var(--text); line-height: 1.65; font-size: 16px;
  letter-spacing: 0.01em; overflow-x: hidden; position: relative;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-optical-sizing: auto;
  font-synthesis-weight: none; font-synthesis-style: none; font-kerning: normal;
  /* Fond : dégradé mesh riche (jamais plat) */
  background:
    radial-gradient(60% 50% at 12% 8%,  rgba(143,200,234,.20), transparent 60%),
    radial-gradient(50% 42% at 88% 2%,  rgba(236,209,153,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 108%, rgba(13,38,62,.65),    transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: rgba(236,209,153,.85); color: var(--ink); }
section[id], header[id] { scroll-margin-top: calc(var(--hdr) + 14px); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(22px, 4vw, 40px); }
.section { position: relative; padding: clamp(64px, 8vw + 34px, 148px) 0; z-index: 2; }
.section--alt {
  background: linear-gradient(180deg, rgba(10,30,50,.34) 0%, rgba(8,26,44,.26) 18%, rgba(8,26,44,.26) 82%, rgba(6,20,36,.38) 100%);
  border-top: 1px solid rgba(191,226,245,.12); border-bottom: 1px solid rgba(4,14,26,.45);
  box-shadow: inset 0 1px 0 rgba(191,226,245,.06), inset 0 -1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}
.center { text-align: center; margin-top: clamp(40px, 5vw, 60px); }

.section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); line-height: 1.12; letter-spacing: -0.02em; }
.block-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.8rem); line-height: 1.25; letter-spacing: -0.01em; text-align: center; margin-bottom: 26px; }
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; padding-left: 0.3em; line-height: 1.4; text-transform: uppercase;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; margin-bottom: 16px;
}
.section-head { max-width: 720px; margin-bottom: var(--flow-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-intro { margin-top: 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 58ch; }
.section-head--center .section-intro { margin-inline: auto; }
/* Composition éditoriale : équilibre des titres, veuves maîtrisées */
.hero-title, .section-title, .block-title, .service-body h3, .spa-card h3, .spa-bubble h3, .blog-body h3, .step h3, .feature h3, .about-mission h3, .footer-col h4, .svc-quote p, .about-lede { text-wrap: balance; }
.section-intro, .hero-sub, .service-body li, .spa-feats li, .step p, .blog-body p, .about-text > p, .contact-copy > p, .review-card blockquote, .works-cap, .price-note, .svc-quote-brand { text-wrap: pretty; }
.about-text > p { max-width: 60ch; }
.works-cap { max-width: 58ch; margin-inline: auto; }

/* ---------- Décor : vraie mer photoréaliste, dynamique, continue au scroll ---------- */
.world-sea { position: fixed; inset: -8% 0 -8% 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform;
  background: url("https://d8j0ntlcm91z4.cloudfront.net/user_3FZRPw3o8jUiBnk6Q8WThDdlXSm/hf_20260624_175315_d38111a8-edb8-47fc-9892-1acd8201e83b.png") center 40% / cover no-repeat;
  filter: brightness(.66) saturate(.98) contrast(1.04); }
/* miroitement doré dynamique sur l'eau (mer vivante, discret) */
.world-sea::before { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(54% 26% at 50% 46%, rgba(245,227,182,.24), transparent 70%);
  animation: seaShine 9s ease-in-out infinite alternate; }
@keyframes seaShine { 0% { opacity: .32; transform: translateX(-2%) scale(1); } 100% { opacity: .6; transform: translateX(2%) scale(1.03); } }
/* vignette cinématographique (bords sombres → hero « spectaculaire ») */
.world-sea::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(122% 86% at 50% 42%, transparent 30%, rgba(4,11,22,.64) 100%),
              linear-gradient(180deg, rgba(6,16,28,.22) 0%, rgba(5,14,26,.42) 60%, rgba(3,9,18,.7) 100%); }

/* ---------- Plongée sous la surface : eau profonde qui monte au défilement ---------- */
.sea-deep { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: linear-gradient(180deg, rgba(8,46,74,.42) 0%, rgba(4,28,52,.66) 50%, rgba(2,14,28,.9) 100%); }
/* l'image d'eau profonde n'est téléchargée qu'une fois la page chargée (classe posée par app.js) */
.sea-deep.is-ready {
  background:
    linear-gradient(180deg, rgba(8,46,74,.42) 0%, rgba(4,28,52,.66) 50%, rgba(2,14,28,.9) 100%),
    url("https://d8j0ntlcm91z4.cloudfront.net/user_3FZRPw3o8jUiBnk6Q8WThDdlXSm/hf_20260624_191706_67923f7b-994a-44f2-ba37-66e575683191.jpeg") center 45% / cover no-repeat; }
/* caustiques : reflets de lumière ondulants sous l'eau */
.sea-deep::before { content: ""; position: absolute; inset: -10%; mix-blend-mode: screen; opacity: .5;
  background:
    repeating-linear-gradient(108deg, transparent 0 26px, rgba(150,212,236,.05) 34px, transparent 48px),
    repeating-linear-gradient(72deg, transparent 0 30px, rgba(120,190,224,.04) 40px, transparent 56px);
  animation: causticDrift 18s linear infinite; }
@keyframes causticDrift { to { transform: translate(56px, 26px); } }

/* ---------- Décor : aurora + vagues ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aurora .a1 { width: 560px; height: 560px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(236,209,153,.40), transparent 65%); }
.aurora .a2 { width: 640px; height: 640px; top: 32%; right: -200px; background: radial-gradient(circle, rgba(143,200,234,.34), transparent 65%); }
.aurora .a3 { width: 520px; height: 520px; bottom: -180px; left: 24%; background: radial-gradient(circle, rgba(236,209,153,.20), transparent 65%); }
/* Profondeur « NexusCore » : grille technique fine + halo, fixe, secondaire au contenu */
.depth { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(85% 60% at 50% 0%, rgba(143,200,234,.12), transparent 62%),
    linear-gradient(rgba(191,226,245,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,226,245,.02) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% -8%, #000 6%, transparent 60%);
          mask-image: radial-gradient(120% 80% at 50% -8%, #000 6%, transparent 60%); }

/* Motif de vagues fluides (esprit spa / eau) — dérive lente continue */
.waves {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 24 C 30 6 60 42 90 24 S 150 6 180 24 210 42 240 24' fill='none' stroke='%23ecd199' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 240px 64px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 100%);
  animation: wavePan 48s linear infinite;
}
@keyframes wavePan { to { background-position: 240px 0; } }

/* Océan vivant : bandes de vagues remplies, fixes en bas de l'écran, qui coulent
   en continu (présentes sur toute la page) — design « océan persistant » */
.ocean {
  position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-position: 0 100%, 0 90%, 0 82%;
  background-size: 300px 70px, 460px 100px, 680px 140px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22 Q30 8 60 22 T120 22 V40 H0 Z' fill='%23bfe2f5' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 24 Q30 10 60 24 T120 24 V40 H0 Z' fill='%238fc8ea' fill-opacity='0.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 26 Q30 14 60 26 T120 26 V40 H0 Z' fill='%23ecd199' fill-opacity='0.3'/%3E%3C/svg%3E");
  animation: oceanFlow 26s linear infinite, oceanTide 11s ease-in-out infinite;
}
@keyframes oceanFlow { to { background-position: -300px 100%, 460px 90%, -680px 82%; } }
@keyframes oceanTide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8%); } }

/* Voile « crépuscule → nuit » : s'assombrit au fil du défilement (piloté en JS) */
.sea-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 50% 120%, rgba(4,14,26,.9), transparent 70%),
              linear-gradient(180deg, rgba(5,16,30,.5), rgba(4,12,24,.85)); }

/* Grain filmique (texture physique, fixe, non-interactif) */
.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  color: var(--ink); background: var(--grad);
  transition: transform 200ms var(--ease-lux), box-shadow 240ms ease, filter 240ms ease, border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}
.btn-sm { padding: 11px 20px; font-size: 0.84rem; }
.btn-block { width: 100%; }
.btn-primary { box-shadow: 0 1px 2px rgba(6,22,38,.35), 0 6px 14px rgba(6,22,38,.22), 0 14px 34px rgba(143,200,234,.22), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(146,98,36,.24); }
.btn-primary:hover { box-shadow: 0 2px 3px rgba(6,22,38,.30), 0 10px 22px rgba(6,22,38,.24), 0 22px 50px rgba(143,200,234,.34), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -2px 5px rgba(146,98,36,.24); filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
@media (hover: hover) { .btn-ghost:hover { border-color: rgba(236,209,153,.65); color: var(--gold-br); background-color: rgba(236,209,153,.08); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(5,18,32,.35); } }
.btn-ghost:active { transform: translateY(0) scale(.97); }
.btn:active { transform: scale(0.97); }

/* ---- CTA « Passer la commande » de l'en-tête : plus grand, encadré, or qui attire ---- */
.header-actions .btn-sm {
  padding: 14px 28px 14px 26px; font-size: 0.92rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap;
  color: var(--ink);
  background: linear-gradient(118deg, #fbeecb 0%, #f3dca6 46%, #e7c179 100%);
  border: 1.5px solid rgba(255, 248, 228, 0.78);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(236,209,153,.42), 0 0 0 4px rgba(236,209,153,.16),
              inset 0 1px 0 rgba(255,255,255,.6);
  animation: orderPulse 3.4s ease-in-out infinite;
}
.header-actions .btn-sm::after {
  content: "→"; margin-left: 4px; font-weight: 700; font-size: 1.02em;
  transition: transform .3s var(--ease-lux);
}
.header-actions .btn-sm:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.04);
  box-shadow: 0 18px 40px rgba(236,209,153,.58), 0 0 0 5px rgba(236,209,153,.26),
              inset 0 1px 0 rgba(255,255,255,.7);
}
.header-actions .btn-sm:hover::after { transform: translateX(4px); }
@keyframes orderPulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(236,209,153,.40), 0 0 0 4px rgba(236,209,153,.14), inset 0 1px 0 rgba(255,255,255,.6); }
  50%      { box-shadow: 0 14px 34px rgba(236,209,153,.52), 0 0 0 7px rgba(236,209,153,.22), inset 0 1px 0 rgba(255,255,255,.66); }
}

/* ---------- Barre de progression ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 120; background: var(--grad); border-radius: 0 999px 999px 0; box-shadow: 0 0 10px rgba(236,209,153,.4); opacity: 0; transition: opacity .35s ease; }
.scroll-progress::after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; transform: translate(50%,-50%); border-radius: 50%; background: var(--gold-br); box-shadow: 0 0 12px 3px rgba(245,227,182,.55); }

/* ---------- En-tête : barre de verre flottante (genre « resort ») ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 48px 0 0;
  background: none; border: 0; transition: padding 300ms var(--ease);
}
.header-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px 0 22px; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(16,46,73,.46), rgba(12,38,62,.42)) padding-box,
              linear-gradient(120deg, rgba(255,255,255,.30) 0%, rgba(236,209,153,.26) 28%, rgba(244,249,252,.10) 55%, rgba(143,200,234,.24) 100%) border-box;
  backdrop-filter: saturate(165%) blur(18px); -webkit-backdrop-filter: saturate(165%) blur(18px);
  box-shadow: 0 1px 2px rgba(5,18,32,.28), 0 14px 40px rgba(5,18,32,.36), inset 0 1px 0 rgba(255,255,255,.10);
  transition: background 300ms ease, box-shadow 300ms ease, height 300ms var(--ease); }
.site-header.is-scrolled { padding-top: 38px; }
.site-header.is-scrolled .header-inner { height: 58px;
  background: linear-gradient(rgba(10,32,54,.70), rgba(8,26,46,.66)) padding-box,
              linear-gradient(120deg, rgba(255,255,255,.26) 0%, rgba(236,209,153,.22) 28%, rgba(244,249,252,.08) 55%, rgba(143,200,234,.20) 100%) border-box;
  box-shadow: 0 16px 44px rgba(5, 18, 32, .52), inset 0 1px 0 rgba(255, 255, 255, .10); }
.brand { display: inline-flex; align-items: center; gap: 13px; position: relative; z-index: 3; flex: none; }
/* Logo officiel « spa POUR SOULIERS » — cadre premium qui s'accorde au décor navy/or */
.brand-logo { display: block; height: 52px; width: auto; border-radius: 11px; flex: none;
  border: 1px solid rgba(236,209,153,.5);
  box-shadow: 0 6px 16px rgba(5,18,32,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .45s var(--ease-lux), box-shadow .4s ease, height .3s ease; }
.brand:hover .brand-logo { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(5,18,32,.5), 0 0 18px rgba(236,209,153,.26), inset 0 1px 0 rgba(255,255,255,.6); }
.site-header.is-scrolled .brand-logo { height: 44px; }
@media (max-width: 600px) { .brand-logo { height: 42px; } .site-header.is-scrolled .brand-logo { height: 37px; } .brand { gap: 9px; } }
.brand-mark { display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.bm-shoe { fill: var(--text); } .bm-sole { fill: var(--gold); } .bm-spark { fill: var(--sky); }
.brand-text { font-family: var(--serif); font-size: 1.34rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; margin-right: 10px; }
.brand-accent { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }

.main-nav { display: none; gap: 17px; }
.main-nav a { position: relative; font-size: 0.84rem; font-weight: 500; color: var(--muted-2); padding: 6px 0; white-space: nowrap; transition: color 200ms ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform 320ms var(--ease-lux); }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; gap: 1px; }
.lang-btn { appearance: none; border: 0; background: transparent; font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); padding: 8px 8px; min-height: 40px; border-radius: 8px; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, transform 160ms var(--ease); }
.lang-btn:active { transform: scale(0.94); }
.lang-btn.is-active { color: var(--ink); background: var(--grad); }
.lang-btn:hover:not(.is-active) { color: var(--text); }
.btn-order, .header-actions .btn-sm { display: none; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 11px; background: transparent; cursor: pointer; }
.nav-toggle span { height: 1.6px; width: 100%; background: var(--text); transition: transform 240ms var(--ease), opacity 200ms ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 1239px) {
  .main-nav { position: fixed; top: var(--hdr); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 22px 18px;
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path 320ms var(--ease-io), opacity 220ms ease; box-shadow: var(--sh-md); }
  .main-nav.is-open { display: flex; clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .main-nav a::after { display: none; }
}

/* ---------- Hero cinématique : mer plein écran + chaussures ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; z-index: 2; padding: calc(var(--hdr) + 40px) 0 72px; }
/* soleil chaud qui s'approche des souliers (côté droit) puis se couche (piloté JS) */
.hero-sun { position: absolute; left: 67%; top: 50%; width: 62%; height: 62%; transform: translate(-50%,-50%) scale(.6); z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; border-radius: 50%; filter: blur(8px);
  background: radial-gradient(circle, rgba(255,245,218,.92), rgba(246,206,142,.5) 26%, rgba(236,172,92,.18) 50%, transparent 70%); }

/* décor du hero — la même mer continue (world-sea) transparaît, + lueur d'intro lumineuse */
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg { position: absolute; left: -6%; top: -9%; width: 112%; height: 122%; will-change: transform; transform-origin: 50% 44%;
  background:
    radial-gradient(44% 40% at 67% 54%, rgba(245,227,182,.26), transparent 62%),   /* spot de lumière sur les souliers */
    radial-gradient(90% 50% at 50% -2%, rgba(143,200,234,.16), transparent 55%),    /* lueur d'horizon */
    radial-gradient(120% 96% at 50% 50%, transparent 44%, rgba(4,11,22,.46) 100%);  /* vignette */ }
/* anciennes couches procédurales (remplacées par hero-waves / hero-mist) */
.hero-foam, .hero-caustics { display: none; }
.hero-caustics { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(40% 30% at 60% 44%, rgba(245,227,182,.30), transparent 70%),
              radial-gradient(64% 42% at 48% 102%, rgba(143,200,234,.20), transparent 72%);
  animation: caustics 9s ease-in-out infinite alternate; }
@keyframes caustics { 0% { opacity: .4; transform: translateX(-1.4%); } 100% { opacity: .62; transform: translateX(1.4%); } }

/* écume animée (donne le côté « vidéo ») */
.hero-foam { position: absolute; left: 0; right: 0; top: 50%; height: 34%; z-index: 1; opacity: .55; pointer-events: none; }
.hero-foam .foam { position: absolute; left: -12%; width: 134%; height: 100%; }
.hero-foam .f1 { fill: rgba(191,226,245,.30); animation: foamDrift 14s linear infinite; }
.hero-foam .f2 { fill: rgba(245,227,182,.16); opacity: .7; animation: foamDrift 21s linear infinite reverse; }
@keyframes foamDrift { to { transform: translateX(-17%); } }

/* ---- Mer vivante : miroitement doré à l'horizon ---- */
.hero-sea-shimmer { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(58% 24% at 50% 39%, rgba(245,227,182,.34), transparent 70%),
              radial-gradient(120% 50% at 50% 40%, rgba(143,200,234,.10), transparent 72%);
  animation: seaShimmer 7.5s ease-in-out infinite alternate; }
@keyframes seaShimmer { 0% { opacity: .45; transform: translateX(-2%) scale(1); } 100% { opacity: .82; transform: translateX(2%) scale(1.05); } }

/* ---- Rayons de lumière volumétriques (god rays) depuis l'horizon ---- */
.hero-rays { position: absolute; left: 0; right: 0; top: 0; height: 80%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .3;
  background: repeating-linear-gradient(99deg, rgba(245,227,182,0) 0 30px, rgba(245,227,182,.085) 38px, rgba(245,227,182,0) 66px);
  -webkit-mask: radial-gradient(72% 96% at 52% -4%, #000 8%, transparent 72%);
          mask: radial-gradient(72% 96% at 52% -4%, #000 8%, transparent 72%);
  transform-origin: 50% 0; animation: heroRays 15s ease-in-out infinite alternate; }
@keyframes heroRays { 0% { opacity: .3; transform: translateX(-3%) skewX(-2.4deg); } 100% { opacity: .58; transform: translateX(3%) skewX(2.4deg); } }

/* ---- Étincelles marines / poussière d'or (canvas) ---- */
.hero-spark { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

/* ---- Bandes de vagues qui dérivent en continu (ligne d'eau) ---- */
.hero-waves { position: absolute; left: 0; right: 0; top: 43%; bottom: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: .24;
  -webkit-mask: linear-gradient(180deg, transparent, #000 20%, #000 86%, transparent);
          mask: linear-gradient(180deg, transparent, #000 20%, #000 86%, transparent); }
.hero-waves .hw { position: absolute; left: -22%; width: 144%; background-repeat: repeat-x; will-change: background-position; }
.hero-waves .hw1 { top: 4%;  height: 70px;  opacity: .5;  background-size: 360px 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22 Q30 8 60 22 T120 22 V40 H0 Z' fill='%23bfe2f5' fill-opacity='0.55'/%3E%3C/svg%3E");
  animation: waveDrift 19s linear infinite; }
.hero-waves .hw2 { top: 22%; height: 96px;  opacity: .42; background-size: 520px 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 24 Q30 10 60 24 T120 24 V40 H0 Z' fill='%238fc8ea' fill-opacity='0.5'/%3E%3C/svg%3E");
  animation: waveDrift 28s linear infinite reverse; }
.hero-waves .hw3 { top: 46%; height: 140px; opacity: .3;  background-size: 720px 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 26 Q30 14 60 26 T120 26 V40 H0 Z' fill='%23ecd199' fill-opacity='0.4'/%3E%3C/svg%3E");
  animation: waveDrift 39s linear infinite; }
@keyframes waveDrift { to { background-position: -720px 0; } }

/* ---- Évaporation / fumée marine : nappes floues qui s'élèvent et dérivent ---- */
.hero-mist { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; will-change: transform; }
.hero-mist .mist { position: absolute; border-radius: 50%; filter: blur(36px); opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(214,230,242,.55), rgba(245,227,182,.16) 50%, transparent 72%); }
.hero-mist .m1 { width: 48%; height: 30%; left: 5%;  top: 47%; animation: mistDrift 18s ease-in-out infinite; }
.hero-mist .m2 { width: 40%; height: 26%; right: 7%; top: 53%; animation: mistDrift 24s ease-in-out infinite 5s; }
.hero-mist .m3 { width: 32%; height: 22%; left: 38%; top: 60%; animation: mistDrift 21s ease-in-out infinite 10s; }
@keyframes mistDrift {
  0%   { opacity: 0;   transform: translate(0, 24px) scale(.85); }
  28%  { opacity: .5;  }
  62%  { opacity: .34; }
  100% { opacity: 0;   transform: translate(34px, -46px) scale(1.3); }
}

/* ---- Souliers : paire unique, rayonnante & brillante (légère rotation 3D au scroll) ---- */
.hero-shoes { position: absolute; left: 50%; top: 56%; width: min(320px, 58vw); transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  perspective: 1500px; }
.hero-shoes-bob { position: relative; width: 100%; animation: shoeFloat 6.8s ease-in-out infinite; transform-style: preserve-3d; }
.hero-shoes .shoe { width: 100%; will-change: transform; transform-origin: 50% 58%; }
.hero-shoes .shoe-main { position: relative; z-index: 1; }
/* seconde vue (autre côté brillant) — apparaît en fondu pendant la rotation */
.hero-shoes .shoe-alt { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.hero-shoes .shoe img { display: block; width: 100%;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.6)) brightness(1.07) contrast(1.08) saturate(1.05); }
/* rayonnement doré (soleil) derrière les souliers — s'efface quand on plonge (piloté JS) */
.hero-shoes-radiance { position: absolute; left: 50%; top: 48%; width: 124%; height: 98%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(26px); opacity: .72;
  background: radial-gradient(ellipse at center, rgba(245,227,182,.52), rgba(191,226,245,.26) 45%, transparent 72%);
  animation: shoeRadiance 5.6s ease-in-out infinite; }
@keyframes shoeRadiance { 0%,100% { transform: translate(-50%,-50%) scale(.95); } 50% { transform: translate(-50%,-50%) scale(1.07); } }
/* lumière de l'eau (caustiques) qui baigne les souliers en profondeur — montée pilotée JS */
.hero-shoes-caustic { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  -webkit-mask: url("assets/img/hero-product.png?v=54") center top / 100% auto no-repeat;
          mask: url("assets/img/hero-product.png?v=54") center top / 100% auto no-repeat;
  background:
    radial-gradient(42% 32% at 32% 38%, rgba(150,212,236,.55), transparent 60%),
    radial-gradient(36% 26% at 72% 60%, rgba(120,190,224,.5), transparent 62%),
    radial-gradient(30% 22% at 52% 80%, rgba(180,224,244,.4), transparent 64%);
  background-size: 180% 180%, 200% 200%, 160% 160%;
  animation: causticShoe 9s ease-in-out infinite alternate; }
@keyframes causticShoe { 0% { background-position: 20% 30%, 70% 60%, 50% 80%; } 100% { background-position: 34% 44%, 56% 48%, 60% 66%; } }
.hero-shoes-glow { position: absolute; left: 50%; top: 62%; width: 78%; height: 28%; transform: translateX(-50%); border-radius: 50%; filter: blur(28px); z-index: 0;
  background: radial-gradient(ellipse, rgba(245,227,182,.48), rgba(143,200,234,.24) 46%, transparent 72%); }
/* éclat de sublimation : les souliers se subliment en lumière (piloté JS) */
.hero-shoes-bloom { position: absolute; left: 50%; top: 50%; width: 130%; height: 130%; transform: translate(-50%,-50%) scale(.5); z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen; border-radius: 50%; filter: blur(16px);
  background: radial-gradient(circle, rgba(255,250,236,.96), rgba(245,221,170,.55) 30%, rgba(236,198,140,.2) 52%, transparent 72%); }
/* reflet doux de la paire sur l'eau */
.hero-shoes-refl { position: absolute; left: 0; top: 90%; width: 100%; transform: scaleY(-1); opacity: .18; filter: blur(2px); z-index: 0;
  -webkit-mask: linear-gradient(#000, transparent 60%); mask: linear-gradient(#000, transparent 60%); }
/* balancement 3D au repos (vivant, type « hero spectaculaire ») + flottement */
@keyframes shoeFloat {
  0%, 100% { transform: translateY(0) rotateY(-3.5deg) rotateX(1deg); }
  50%      { transform: translateY(-12px) rotateY(3.5deg) rotateX(-1deg); }
}

/* voile de lisibilité */
.hero-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,24,40,.28) 0%, transparent 26%, transparent 54%, rgba(6,18,32,.60) 100%),
              linear-gradient(82deg, rgba(6,18,32,.60) 0%, rgba(6,18,32,.16) 42%, transparent 60%); }

/* texte superposé */
.hero-overlay { position: relative; z-index: 4; width: 100%; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(143,200,234,.2); }
.hero-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 0.9rem + 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.022em; text-shadow: 0 2px 30px rgba(5,18,32,.5); }
.hero-title .line { display: block; }
.hero-title em { font-style: italic; font-weight: 400; letter-spacing: -0.012em; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.hero-sub { margin: 18px 0 28px; font-size: clamp(0.92rem, 1.5vw, 1.04rem); font-weight: 300; line-height: 1.6; color: var(--muted-2); max-width: 46ch; text-shadow: 0 1px 16px rgba(5,18,32,.5); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 22px 34px; }
.hero-stats strong { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1; color: var(--text); }
.hero-stats span { font-size: 0.82rem; color: var(--muted-2); }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid var(--line-2); border-radius: 999px; display: grid; justify-items: center; padding-top: 8px; }
.scroll-cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--sky); animation: cue 1.5s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(8,26,44,.30);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-group { display: flex; flex: 0 0 auto; }
.marquee-item { font-family: var(--serif); font-style: italic; font-size: 1.1rem; padding: 15px 0; white-space: nowrap; color: var(--muted-2); }
.marquee-item::after { content: "✦"; color: var(--gold); margin: 0 1.4rem; font-size: .78rem; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }

/* ---------- Cartes génériques : verre dépoli premium (cohérent au-dessus de la mer) ---------- */
.service-card, .spa-card, .work-tile, .step, .contact-form, .price-panel, .about-mission {
  background: linear-gradient(165deg, rgba(26,62,94,.42) 0%, rgba(14,40,66,.30) 46%, rgba(10,30,52,.40) 100%);
  border: 1px solid rgba(244,249,252,.15);
  backdrop-filter: blur(15px) saturate(145%); -webkit-backdrop-filter: blur(15px) saturate(145%);
  box-shadow:
    0 1px 1px rgba(6,22,38,.20), 0 10px 26px rgba(5,18,32,.26), 0 28px 60px rgba(5,18,32,.30),
    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(4,14,26,.38),
    inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(255,255,255,.04);
}

/* ---------- Finitions de design (cohérence, profondeur, survols premium) ---------- */
/* apparitions en cascade cohérentes (forfaits Spa, comme les services) */
.spa-grid .reveal-card.is-in:nth-child(2) { transition-delay: .08s; }
.spa-grid .reveal-card.is-in:nth-child(3) { transition-delay: .16s; }
.blog-grid .reveal-card.is-in:nth-child(2) { transition-delay: .10s; }
.blog-grid .reveal-card.is-in:nth-child(3) { transition-delay: .20s; }
.reviews-grid .reveal-card.is-in:nth-child(2) { transition-delay: .08s; }
.reviews-grid .reveal-card.is-in:nth-child(3) { transition-delay: .16s; }
.reviews-grid .reveal-card.is-in:nth-child(4) { transition-delay: .24s; }
.corp-gallery .reveal-card.is-in:nth-child(2) { transition-delay: .12s; }
/* cascade eyebrow → titre → intro dans les têtes de section + steps */
.section-head .section-title[data-anim] { transition-delay: .10s; }
.section-head .section-intro[data-anim] { transition-delay: .22s; }
.about-copy .section-title[data-anim] { transition-delay: .10s; }
.about-copy .about-lede[data-anim] { transition-delay: .22s; }
.steps .step:nth-child(2)[data-anim] { transition-delay: .14s; }
.steps .step:nth-child(3)[data-anim] { transition-delay: .28s; }
/* survols premium : léger soulèvement + halo doré/bleu discret */
.spa-card:hover, .step:hover { border-color: var(--line-2); box-shadow: 0 24px 56px rgba(5,18,32,.5), 0 0 34px rgba(143,200,234,.12); }
.about-mission { transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; }
.about-mission:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 22px 50px rgba(5,18,32,.46); }
/* profondeur en haut des sections alternées (lueur douce, esprit « hero ») */
.section--alt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; z-index: 0;
  background: radial-gradient(72% 100% at 50% 0%, rgba(143,200,234,.09), transparent 72%); }
/* vague dorée de raccord au sommet des sections alternées */
.section--alt::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 28px; pointer-events: none; z-index: 1; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 24 C 30 6 60 42 90 24 S 150 6 180 24 210 42 240 24' fill='none' stroke='%23ecd199' stroke-width='1.4'/%3E%3C/svg%3E") center / 240px 48px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: wavePan 48s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .section--alt::after { animation: none; } }
.section--alt .container { position: relative; z-index: 1; }

/* ---------- Réalisations : galerie avant|après ---------- */
/* Bannière vedette « Avant | Après » */
.real-feature { position: relative; max-width: 940px; margin: 0 auto var(--flow-md); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-lg); aspect-ratio: 3 / 2; isolation: isolate; background: radial-gradient(130% 130% at 50% 20%, #143550, #0a2036 70%); }
.real-feature img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .9s var(--ease-lux); }
.real-feature:hover img { transform: scale(1.045); }
.real-feature::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,18,32,.18) 0%, transparent 28%, transparent 62%, rgba(6,18,32,.55)); }
.rf-divider { position: absolute; top: 9%; bottom: 9%; left: 50%; width: 1px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(244,249,252,0), rgba(245,227,182,.65), rgba(244,249,252,0)); }
.rf-tag { position: absolute; bottom: 16px; z-index: 2; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: rgba(7,21,37,.6); border: 1px solid var(--line-2); backdrop-filter: blur(5px); }
.rf-before { left: 16px; color: var(--muted-2); }
.rf-after { right: 16px; color: var(--sky); }

.real-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin-top: var(--flow-md); }
.real-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 2 / 1; box-shadow: var(--sh-sm); isolation: isolate; background: radial-gradient(130% 130% at 50% 20%, #143550, #0a2036 70%); }
.real-tile img { width: 100%; height: 100%; object-fit: contain; padding: 4px; transition: transform .8s var(--ease-lux); }
.real-tile:hover img { transform: scale(1.06); }
.real-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(7,21,37,.5)); }
.real-tile figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: rgba(7,21,37,.55); border: 1px solid var(--line-2); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
/* Réalisations : révélation tuile par tuile (le parent .real-grid porte .is-in) */
html.js .real-grid[data-anim] { opacity: 1; transform: none; filter: none; }
html.js .real-grid .real-tile { opacity: 0; transform: translateY(32px) scale(.965); transition: opacity .7s var(--ease-lux), transform .7s var(--ease-lux); }
html.js .real-grid.is-in .real-tile { opacity: 1; transform: none; }
.real-grid.is-in .real-tile:nth-child(2) { transition-delay: .08s; }
.real-grid.is-in .real-tile:nth-child(3) { transition-delay: .16s; }
.real-grid.is-in .real-tile:nth-child(4) { transition-delay: .24s; }
.real-grid.is-in .real-tile:nth-child(5) { transition-delay: .32s; }
.real-grid.is-in .real-tile:nth-child(6) { transition-delay: .40s; }

/* ---------- Bulles de prix : les deux forfaits Spa en tête des services ---------- */
/* Haut des Services : bulles compactes à gauche, texte de section à droite */
.services-top { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; margin-bottom: var(--flow-lg); }
.services-top .section-head { margin-bottom: 0; text-align: center; margin-inline: auto; }
@media (min-width: 1040px) {
  .services-top { grid-template-columns: 1.18fr 1fr; }
  .services-top .spa-bubbles { order: 1; }
  .services-top .services-head { order: 2; text-align: left; margin-inline: 0; }
  .services-top .services-head .section-emblem { margin: 0 0 14px; }
}

/* Bulles de dialogue fidèles au visuel fourni (version compacte) : dalle
   d'ombre navy décalée, queue pointue, surface ivoire, palette du site */
.spa-bubbles { display: grid; grid-template-columns: 1fr; gap: 26px; max-width: 720px; margin: 0 auto; }
.spa-bubble { position: relative; padding: 22px 22px 19px; border-radius: 24px;
  background: linear-gradient(168deg, #fdf8ec 0%, #f7ecd2 58%, #f1e2bd 100%);
  border: 2px solid #17395e;
  filter: drop-shadow(8px 9px 0 rgba(13, 38, 62, .94));
  transition: transform .5s var(--ease-lux), filter .5s var(--ease-lux); }
/* queue pointue de bulle (incluse dans la silhouette de l'ombre) */
.spa-bubble::after { content: ""; position: absolute; bottom: -21px; width: 38px; height: 23px;
  background: #f2e3c0; clip-path: polygon(12% 0, 88% 0, 42% 100%); }
.spa-bubble--left::after { left: 42px; transform: skewX(-12deg); }
.spa-bubble--right::after { right: 52px; transform: skewX(12deg); }
.spa-bubble:hover { transform: translateY(-5px) rotate(0); filter: drop-shadow(11px 13px 0 rgba(13, 38, 62, .94)); }
.spa-bubble h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.16rem; text-align: center; margin-bottom: 13px; color: #14375c; }
.spa-bubble h3::after { content: ""; display: block; width: 46px; height: 2px; margin: 8px auto 0; background: linear-gradient(90deg, #c99b3f, #e6c887); border-radius: 2px; }
.sb-badge { position: absolute; top: -12px; right: 20px; font-size: .54rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #f5e8c8; background: #14375c; padding: 5px 10px; border-radius: 999px; border: 1px solid #c99b3f; }
.spa-bubble ul { display: grid; gap: 4px; margin-bottom: 13px; }
.spa-bubble li { position: relative; padding-left: 18px; font-size: .77rem; line-height: 1.38; color: #33475c; }
.spa-bubble li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: #b8892d; font-weight: 700; font-size: .8em; }
.sb-prices { border-top: 1.5px dashed rgba(20, 55, 92, .4); padding-top: 10px; display: grid; gap: 4px; }
.sb-price-label { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b8892d; margin-bottom: 2px; }
.sb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .79rem; font-weight: 500; color: #2c3f55; }
.sb-row b { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: #14375c; white-space: nowrap; }
@media (min-width: 720px) {
  .spa-bubbles { grid-template-columns: 1fr 1fr; align-items: start; }
  .spa-bubble--left { transform: rotate(-1deg); }
  .spa-bubble--right { transform: rotate(1deg); margin-top: 18px; }
}

/* ---------- Charité : illustration don + engagements empilés ---------- */
.charity-inner { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; max-width: 1040px; margin: 10px auto 0; }
.charity-art { position: relative; margin: 0; display: grid; place-items: center; }
/* halo doré doux derrière l'illustration */
.charity-art::before { content: ""; position: absolute; width: 84%; height: 84%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(236,209,153,.24), rgba(143,200,234,.10) 55%, transparent 72%); filter: blur(18px);
  animation: charityGlow 5.4s ease-in-out infinite; }
@keyframes charityGlow { 0%,100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
.charity-art img { position: relative; z-index: 1; width: min(460px, 100%);
  filter: drop-shadow(0 26px 44px rgba(5,18,32,.5));
  animation: charityFloat 7s ease-in-out infinite; }
@keyframes charityFloat { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-12px) rotate(.6deg); } }
/* engagements empilés en rangées (icône à gauche) */
.charity-inner .feature { display: flex; align-items: center; gap: 16px; text-align: left; }
.charity-cta { margin-top: 30px; }
@media (min-width: 900px) {
  .charity-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .charity-inner .feature-row { grid-template-columns: 1fr; gap: 16px; }
  .charity-cta { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .charity-art img, .charity-art::before { animation: none !important; } }

/* ---------- Corporate : duo de photos (dames / messieurs) ---------- */
.corp-gallery { display: grid; grid-template-columns: 1fr; gap: var(--gutter); max-width: 900px; margin: var(--flow-md) auto; }
.corp-shot { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2);
  aspect-ratio: 1 / 1; box-shadow: var(--sh-md); transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .5s ease; }
.corp-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-lux); }
.corp-shot:hover { transform: translateY(-6px); border-color: rgba(236,209,153,.5); box-shadow: 0 26px 56px rgba(5,18,32,.5); }
.corp-shot:hover img { transform: scale(1.05); }
@media (min-width: 640px) { .corp-gallery { grid-template-columns: 1fr 1fr; } }

/* ---------- Services (grille 2×2 compacte, encadrés rayonnants) ---------- */
.service-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); max-width: 1180px; margin-inline: auto; align-items: start; }
/* cellule + halo rayonnant animé autour de chaque encadré */
.service-cell { position: relative; display: flex; }
.service-aura { position: absolute; inset: -9px; z-index: 0; pointer-events: none; border-radius: calc(var(--r-lg) + 9px);
  background: conic-gradient(from 0deg, rgba(236,209,153,.55), rgba(143,200,234,.50), rgba(245,227,182,.55), rgba(143,200,234,.50), rgba(236,209,153,.55));
  filter: blur(15px); opacity: .4; animation: auraSpin 17s linear infinite, auraBreath 5.5s ease-in-out infinite; }
@keyframes auraSpin { to { transform: rotate(360deg); } }
@keyframes auraBreath { 0%, 100% { opacity: .32; } 50% { opacity: .6; } }
.service-card { position: relative; z-index: 1; flex: 1 1 auto; border-radius: var(--r-lg); overflow: hidden; transition: transform 360ms var(--ease), border-color 360ms ease, box-shadow 360ms ease; }
.service-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--sh-md); }
.service-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.service-card:hover .service-media img { transform: scale(1.05); }
/* galerie avant/après dans la carte service */
/* Galerie « passe-partout » : photos ENTIÈRES (aucun recadrage), chaque
   cliché dans un cadre arrondi liseré d'or sur fond profond */
.service-media.is-gallery { aspect-ratio: auto; padding: 10px;
  background: linear-gradient(180deg, rgba(12,32,54,.85), rgba(7,20,36,.92)); }
.service-shots { display: grid; gap: 9px; width: 100%; }
.service-shots.n1 { grid-template-columns: 1fr; height: 100%; }
.service-shots.n2, .service-shots.n3, .service-shots.n4 { grid-template-columns: 1fr 1fr; }
/* 3 photos : deux en haut, la troisième en bas centrée entre les deux */
.service-shots.n3 { grid-template-columns: repeat(4, 1fr); }
.service-shots.n3 .shot:nth-child(1) { grid-column: 1 / 3; }
.service-shots.n3 .shot:nth-child(2) { grid-column: 3 / 5; }
.service-shots.n3 .shot:nth-child(3) { grid-column: 2 / 4; }
.service-shots .shot { position: relative; margin: 0; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(236,209,153,.2);
  background: radial-gradient(130% 130% at 50% 20%, #143550 0%, #0a2036 68%, #071528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(4,14,26,.45);
  transition: border-color .35s ease, box-shadow .35s ease; }
.service-card:hover .service-shots .shot { border-color: rgba(236,209,153,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px rgba(4,14,26,.55); }
.service-shots.n1 .shot { height: 100%; }
.service-media.is-gallery .shot { aspect-ratio: 16 / 10; }
.service-shots .shot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; transition: transform .7s var(--ease); }
.service-card:hover .service-shots .shot img { transform: scale(1.04); }
.service-shots.empty { aspect-ratio: 16 / 11; display: grid; place-items: center; background: rgba(8,22,38,.5); }
.service-shots.empty span { font-size: .82rem; color: var(--muted); text-align: center; padding: 0 16px; letter-spacing: .02em; }
.media-tag { position: absolute; top: 13px; left: 13px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); background: var(--grad); padding: 6px 12px; border-radius: 999px; }
.service-num { position: absolute; right: 16px; bottom: 12px; font-family: var(--serif); font-size: 2.2rem; color: rgba(244,249,252,.9); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.service-body { padding: 24px 26px 28px; }
.service-body h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: 14px; }
.service-body ul { display: flex; flex-direction: column; gap: 9px; }
.service-body li { position: relative; padding-left: 22px; color: var(--muted); font-size: 0.96rem; }
.service-body li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
/* Encadrés Services : verre dépoli premium flottant au-dessus de la mer continue */
.service-card { background: rgba(15, 44, 70, .36); border: 1px solid rgba(244, 249, 252, .17);
  backdrop-filter: blur(17px) saturate(150%); -webkit-backdrop-filter: blur(17px) saturate(150%);
  box-shadow: 0 20px 54px rgba(5, 18, 32, .42), inset 0 1px 0 rgba(255, 255, 255, .09); }
/* apparition cinématographique des encadrés (montée + léger zoom, en cascade) */
html.js .service-grid .reveal-card { transform: translateY(46px) scale(.945); filter: blur(9px); transition-duration: .85s; }
html.js .service-grid .reveal-card.is-in { transform: none; filter: none; }
.service-grid .reveal-card.is-in:nth-child(1) { transition-delay: 0s; }
.service-grid .reveal-card.is-in:nth-child(2) { transition-delay: .09s; }
.service-grid .reveal-card.is-in:nth-child(3) { transition-delay: .18s; }
.service-grid .reveal-card.is-in:nth-child(4) { transition-delay: .27s; }
/* balayage de lumière sur le verre à l'apparition de l'encadré */
.service-card::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.16) 48%, rgba(245,227,182,.10) 53%, transparent 62%);
  transform: translateX(-130%); }
.reveal-card.is-in .service-card::after { animation: glassSheen 1.15s var(--ease-lux) .22s 1; }
@keyframes glassSheen { to { transform: translateX(130%); } }

/* ---------- Réalisations / Avant-Après ---------- */
.ba { position: relative; max-width: 440px; margin: 0 auto 44px; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-md); user-select: none; touch-action: pan-y; }
.ba-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba-before { clip-path: inset(0 50% 0 0); }
.ba-tag { position: absolute; top: 14px; font-size: 0.64rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(13,38,62,.6); backdrop-filter: blur(4px); }
.ba-tag--before { left: 14px; color: var(--muted-2); }
.ba-tag--after { right: 14px; color: var(--sky); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--text); cursor: ew-resize; }
.ba-line { position: absolute; inset: 0; background: var(--text); box-shadow: 0 0 12px rgba(0,0,0,.5); }
.ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--text); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-sm); transition: transform .3s var(--ease-lux), box-shadow .3s ease; }
@media (hover: hover) { .ba:hover .ba-knob { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 0 0 6px rgba(236,209,153,.18), var(--sh-sm); } }
.ba:active .ba-knob { transform: translate(-50%,-50%) scale(1.16); box-shadow: 0 0 0 9px rgba(236,209,153,.26), var(--sh-sm); transition-duration: .15s; }
.ba-knob svg { width: 22px; height: 22px; }
.works-cap { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
.works-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.work-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.work-tile:hover img { transform: scale(1.06); }
.work-tile figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); background: rgba(13,38,62,.5); padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(4px); }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
.step { position: relative; padding: 32px 28px; border-radius: var(--r-lg); }
.step-n { font-family: var(--serif); font-size: 1rem; letter-spacing: .2em; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; display: block; margin-bottom: 16px; }
.step h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.96rem; }

/* ---------- Forfaits Spa ---------- */
.spa-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin-bottom: var(--flow-lg); }
.spa-card { position: relative; border-radius: var(--r-lg); padding: 34px 30px; transition: transform 360ms var(--ease), box-shadow 360ms ease; }
.spa-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.spa-card--feat { background: linear-gradient(160deg, rgba(236,209,153,.16), rgba(143,200,234,.10)), var(--surface); border-color: var(--line-2); }
.spa-badge { position: absolute; top: 24px; right: 26px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--grad); padding: 6px 12px; border-radius: 999px; }
.spa-card h3 { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; margin-bottom: 20px; }
.spa-feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.spa-feats li { position: relative; padding-left: 26px; color: var(--muted); font-size: 0.95rem; }
.spa-feats li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-weight: 700; }
.spa-prices { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.spa-prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 0.95rem; }
.spa-prices span { color: var(--muted-2); }
.spa-prices strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--gold-br); }

/* ---------- Prix (onglets) ---------- */
/* contrôle segmenté en verre (navigation catégories) */
.price-tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 30px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: var(--sh-sm); }
.price-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 0; background: transparent; color: var(--muted-2); font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: color .3s var(--ease-lux), background .3s var(--ease-lux), box-shadow .3s ease, transform .22s var(--ease-lux); }
.price-tab .pt-ico { display: inline-grid; place-items: center; }
.price-tab .pt-ico svg { width: 18px; height: 18px; transition: transform .35s var(--ease-lux); }
@media (hover: hover) { .price-tab:hover:not(.is-active) { color: var(--text); background: rgba(244,249,252,.07); } }
.price-tab:active { transform: scale(.95); }
.price-tab:hover .pt-ico svg, .price-tab.is-active .pt-ico svg { transform: translateY(-1px) scale(1.1); }
.price-tab.is-active { color: var(--ink); background: var(--grad); box-shadow: 0 8px 22px rgba(236,209,153,.28); }

.price-panel { max-width: 940px; margin: 0 auto; border-radius: var(--r-lg); padding: 10px 26px; display: grid; grid-template-columns: 1fr; gap: 0 46px; }
.price-row { display: flex; align-items: baseline; gap: 10px; padding: 13px 12px; margin-inline: -12px; border-radius: 12px; border-bottom: 1px solid var(--line); }
.price-row:hover { background: rgba(244,249,252,.05); }
.pr-name { color: var(--text); font-size: .96rem; }
.pr-lead { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); min-width: 14px; }
.pr-val { font-weight: 700; color: var(--gold-br); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Prix : or gravé + chiffres alignés */
.pr-val, .spa-prices strong { color: transparent; background: linear-gradient(180deg, #faf0d2 0%, var(--gold-br) 38%, var(--gold) 62%, #d3ac66 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 8px rgba(236,209,153,.20)); font-variant-numeric: lining-nums tabular-nums; }
.sb-row b, .hero-stats strong, .hero-phone, .footer-bottom { font-variant-numeric: lining-nums tabular-nums; }
.sb-row b { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em; }
/* panneau dense sur 2 colonnes (plus court, plus clair) */
@media (min-width: 768px) { .price-panel { grid-template-columns: 1fr 1fr; } }
.price-note { text-align: center; margin-top: 28px; font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ---------- À propos ---------- */
/* ---- À propos : mise en page éditoriale alternée (texte + document de chaque côté) ---- */
.about-head { margin-bottom: var(--flow-lg); }
.about-lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--sky); margin-top: 6px; }
.about-row { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.about-row + .about-row { margin-top: var(--flow-lg); }
.about-text > p { color: var(--muted); margin-bottom: 18px; }
.about-sign { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--text) !important; }
.about-mission { padding: 28px 30px; border-radius: var(--r); }
.about-mission h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 12px; }
.about-mission p { margin: 0; color: var(--muted); font-size: 1rem; }
/* Le document authentique (presse / attestation) — cadre premium, entièrement visible */
.about-doc { margin: 0; position: relative; }
.about-doc img { display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid rgba(236,209,153,.5); box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.4);
  background: #f4f1ea; transition: transform .5s var(--ease-lux), box-shadow .4s ease; }
.about-doc:hover img { transform: translateY(-4px) scale(1.01); box-shadow: var(--sh-lg), 0 0 26px rgba(236,209,153,.22); }
.about-doc figcaption { margin-top: 11px; text-align: center; font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted-2); }
@media (min-width: 860px) {
  .about-row { grid-template-columns: 1.02fr .98fr; gap: 56px; }
  .about-row--imgleft .about-doc { order: -1; }
}

/* ---------- Contact ---------- */
.contact-inner { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
.contact-copy > p { color: var(--muted); margin: 14px 0 24px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.contact-list span { font-size: 0.74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-list a { font-size: 1.08rem; color: var(--text); }
.contact-form { border-radius: var(--r-lg); padding: clamp(28px, 3.2vw, 42px) clamp(24px, 3vw, 40px); }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .3s ease; }
.field:focus-within label { color: var(--gold-br); }
.field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text); background: rgba(8,26,44,.4); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 13px 15px; resize: vertical; caret-color: var(--gold); transition: border-color 200ms ease, box-shadow 200ms ease; }
@media (hover: hover) { .field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: rgba(244,249,252,.34); } }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(236,209,153,.35), 0 0 18px rgba(236,209,153,.18); }
.field option { color: var(--ink); }
.form-hint { margin-top: 12px; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ---- Champ photos : bouton doré en pointillés + miniatures ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.photo-drop { display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; padding: 14px 18px; cursor: pointer;
  border: 1.5px dashed rgba(236,209,153,.5); border-radius: 12px; color: var(--gold-br); font-size: .92rem; font-weight: 600;
  background: rgba(236,209,153,.06); transition: border-color .25s ease, background .25s ease, transform .2s var(--ease); }
.photo-drop svg { width: 20px; height: 20px; }
.photo-drop:hover { border-color: var(--gold); background: rgba(236,209,153,.12); transform: translateY(-1px); }
.visually-hidden:focus-visible + .photo-drop { outline: 2px solid var(--gold); outline-offset: 3px; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-preview:empty { display: none; }
.photo-preview img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(236,209,153,.45); box-shadow: 0 6px 14px rgba(5,18,32,.4); }
.field-hint { margin-top: 8px; font-size: .78rem; color: var(--muted); }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; z-index: 2; background: rgba(8,26,44,.42); border-top: 1px solid var(--line); padding-top: 60px; backdrop-filter: blur(4px); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
.footer-brand .brand-text { font-size: 1.5rem; }
.footer-brand p { margin-top: 12px; color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer-col h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-bottom: 14px; }
.footer-col h4.mt { margin-top: 24px; }
.footer-col > a { display: block; color: var(--muted); font-size: 0.94rem; padding: 5px 0; transition: color 180ms ease; }
.footer-col > a:hover { color: var(--text); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text); transition: transform 200ms var(--ease), background 200ms ease, color 200ms ease; }
.footer-social a:hover { background: var(--grad); color: var(--ink); }
.footer-social svg { width: 19px; height: 19px; }
.lang-switch--footer .lang-btn { color: var(--muted); }
.footer-bottom { padding: 22px; border-top: 1px solid var(--line); text-align: center; font-size: 0.82rem; color: var(--muted); }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
/* focus signature or sur les contrôles de marque */
.btn:focus-visible, .price-tab:focus-visible, .lang-btn:focus-visible,
.hero-wa:focus-visible, .social-toggle:focus-visible, .social-action:focus-visible,
.nav-toggle:focus-visible { outline: 2px solid var(--gold-br); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(236,209,153,.16); }
.main-nav a:focus-visible { outline: none; color: var(--text); }
.main-nav a:focus-visible::after { transform: scaleX(1); }
.ba-handle:focus-visible { outline: none; }
.ba-handle:focus-visible .ba-knob { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5.5px var(--gold-br); }
:focus:not(:focus-visible) { outline: none; }
.skip-link { position: fixed; left: 14px; top: -64px; z-index: 200; background: var(--text); color: var(--ink); padding: 11px 18px; border-radius: var(--r-sm); font-weight: 600; transition: top 220ms var(--ease); }
.skip-link:focus { top: 14px; }

/* ---------- Apparitions (progressive enhancement) ---------- */
html.js [data-anim] { opacity: 0; transform: translateY(26px); filter: blur(7px); }
html.js [data-anim="left"]  { transform: translateX(-34px); }
html.js [data-anim="right"] { transform: translateX(34px); }
html.js [data-anim="hero-visual"] { transform: translateY(30px) scale(.96); }
[data-anim] { transition: opacity .8s var(--ease-lux), transform .8s var(--ease-lux), filter .8s var(--ease-lux); }
[data-anim].is-in { opacity: 1 !important; transform: none !important; filter: none !important; }
/* Cartes générées : révélées par lot (app.js) */
html.js .reveal-card { opacity: 0; transform: translateY(28px); filter: blur(7px); transition: opacity .75s var(--ease-lux), transform .75s var(--ease-lux), filter .75s var(--ease-lux); }
html.js .reveal-card.is-in { opacity: 1; transform: none; filter: none; }
/* Images : entrée « settle » — l'image se pose (dé-zoom) quand son cadre se révèle */
html.js .real-feature:not(.is-in) img { transform: scale(1.12); }
html.js .blog-card:not(.is-in) .blog-media img { transform: scale(1.12); }
html.js .corp-shot:not(.is-in) img { transform: scale(1.12); }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .works-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .spa-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .header-actions .btn-sm { display: inline-flex; }
  .hero-shoes { width: min(430px, 32vw); left: 67%; top: 58%; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
  .contact-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
}
/* la nav complète n'apparaît que lorsqu'il y a vraiment la place (logo + nom + 8 liens + langues + CTA) */
@media (min-width: 1240px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* ---------- Mobile / tablette : header compact + souliers au-dessus du texte ---------- */
@media (max-width: 899px) {
  /* souliers remontés dans l'espace vide en haut du hero, plus au-dessus du titre */
  .hero-shoes { top: 34%; width: min(300px, 54vw); }
  /* le flou de fond coûte cher au défilement sur mobile — le voile teinté suffit */
  .section--alt { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 600px) {
  /* logo + nom restent visibles, tout compacté pour tenir avec les 4 langues + burger */
  .brand-text { font-size: 1.0rem; margin-right: 0; }
  .header-actions { gap: 6px; }
  .lang-btn { padding: 7px 5px; min-height: 34px; font-size: 0.68rem; }
  .lang-switch { gap: 2px; }
  .nav-toggle { width: 38px; height: 38px; padding: 0 8px; }
  .hero-shoes { top: 28%; width: min(250px, 60vw); }
}
@media (max-width: 420px) {
  .brand-logo { height: 36px; }
  .brand { gap: 7px; }
  .brand-text { font-size: 0.92rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-anim], html.js .reveal-card, html.js .real-grid .real-tile { opacity: 1; transform: none; filter: none; }
  html.js .real-feature img, html.js .blog-card .blog-media img, html.js .corp-shot img { transform: none; }
  .sea-veil { opacity: 0 !important; }
  .marquee-track, .aurora-blob, .scroll-cue span { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .16s !important; }
}

/* ==================================================================
   ACCUEIL — emblème cordonnier, hero cinématographique, CTA, social
   ================================================================== */

/* ---- Emblème cordonnier (logo B) — agrandi + animation d'entrée ---- */
.brand-mark { position: relative; width: 150px; height: 150px; background: none; border: 0; padding: 0; filter: drop-shadow(0 8px 20px rgba(8,28,46,.55)); transition: transform .45s var(--ease-lux); }
.brand-mark--lg { width: 164px; height: 164px; }
@media (max-width: 640px) { .brand-mark { width: 108px; height: 108px; } .header-inner { height: 58px; } .site-header.is-scrolled .header-inner { height: 50px; } }
/* halo doré qui respire derrière l'emblème */
.brand-mark::after { content: ""; position: absolute; left: 50%; top: 54%; width: 126%; height: 126%; transform: translate(-50%,-50%); z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(236,209,153,.38), rgba(143,200,234,.18) 46%, transparent 70%); filter: blur(9px); animation: logoGlow 4.6s ease-in-out infinite; }
@keyframes logoGlow { 0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(.9); } 50% { opacity: .9; transform: translate(-50%,-50%) scale(1.1); } }
.brand:hover .brand-mark { transform: translateY(-2px) scale(1.05); }
.logo-emblem { width: 100%; height: 100%; display: block; transform-origin: 50% 60%; animation: logoIn 1s var(--ease) both, logoBreath 6.5s ease-in-out 1.3s infinite; }
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(.55) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes logoBreath { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.04) rotate(.7deg); } }
/* étincelle qui scintille en boucle */
.lg-spark { transform-box: fill-box; transform-origin: center; animation: lgSpark 3.4s ease-in-out 1.1s infinite; }
@keyframes lgSpark { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.lg-badge { fill: #14304b; }
.lg-ring  { fill: none; stroke: var(--gold); stroke-width: 0.9; opacity: 0.95; }
.lg-shoe  { fill: var(--text); }
.lg-spark { fill: var(--gold-br); }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand .brand-mark { margin-bottom: 10px; }

/* ---- CTA principal (scintillant, flèche, lueur pulsée) ---- */
.btn-cta { position: relative; padding-right: 60px; padding-left: 28px; overflow: hidden; transition: transform .28s var(--ease-lux), box-shadow .28s var(--ease-lux); animation: ctaGlow 3s ease-in-out infinite; }
/* flèche logée dans son propre disque (button-in-button) */
.btn-cta::after { content: "→"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,21,37,.16); color: var(--ink); font-weight: 600; font-size: .98rem; transition: transform .3s var(--ease-lux), background .3s ease; }
.btn-cta:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 22px 50px rgba(236,209,153,.5), 0 0 0 5px rgba(236,209,153,.14); }
.btn-cta:hover::after { transform: translateY(-50%) translate(2px,-1px) scale(1.08); background: rgba(7,21,37,.26); }
.btn-cta:active { transform: translateY(-1px) scale(.99); }
.btn-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.55) 46%, transparent 60%); transform: translateX(-130%); pointer-events: none; animation: ctashine 4s ease-in-out infinite; }
@keyframes ctashine { 0%, 58% { transform: translateX(-130%); } 78% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 14px 36px rgba(236,209,153,.26), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(146,98,36,.24); }
  50%      { box-shadow: 0 16px 44px rgba(236,209,153,.5), 0 0 0 4px rgba(236,209,153,.13), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(146,98,36,.24); }
}

/* ---- Lien discret du hero ---- */
.hero-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--muted-2); letter-spacing: .02em; transition: color .2s ease, gap .25s var(--ease); }
.hero-link::after { content: "→"; transition: transform .25s var(--ease); }
.hero-link:hover { color: var(--text); }
.hero-link:hover::after { transform: translateX(4px); }
.hero-cta { align-items: center; }

/* ---- Hero cinématographique : scène ---- */
.stage { position: relative; display: grid; place-items: center; }
.stage-halo { position: absolute; left: 50%; top: 46%; width: 122%; aspect-ratio: 1; transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(236,209,153,.34) 0%, rgba(143,200,234,.14) 42%, transparent 68%); filter: blur(18px); }
.stage-ring { position: absolute; left: 50%; top: 46%; width: 112%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; z-index: 0; pointer-events: none; opacity: .55;
  background: conic-gradient(from 0deg, transparent 0%, rgba(236,209,153,.7) 12%, transparent 30%, transparent 58%, rgba(143,200,234,.6) 72%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
          mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
  animation: spin 22s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.orb { position: absolute; border-radius: 50%; z-index: 3; pointer-events: none; background: var(--grad-soft); border: 1px solid var(--line-2); backdrop-filter: blur(7px); box-shadow: var(--sh-sm); }
.orb-1 { width: 66px; height: 66px; top: -10px; right: 18px; animation: float 6s var(--ease) infinite; }
.orb-2 { width: 44px; height: 44px; bottom: 30px; left: -16px; animation: float 7.5s var(--ease) infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-visual .tilt { position: relative; z-index: 2; }
.hero-card-glow { mix-blend-mode: screen; }
/* Balayage de brillance (élément signature) */
.shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 45%, rgba(191,226,245,.22) 50%, transparent 62%);
  transform: translateX(-120%); animation: shine 5.5s var(--ease) infinite; }
@keyframes shine { 0%, 68% { transform: translateX(-120%); } 86% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

/* ---- Bouton social flottant ---- */
.social-fab { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.social-actions { display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.social-actions li { opacity: 0; transform: translateY(12px) scale(.85); transition: transform .3s var(--ease), opacity .22s ease; }
.social-fab.is-open .social-actions { pointer-events: auto; }
.social-fab.is-open .social-actions li { opacity: 1; transform: none; }
.social-fab.is-open .social-actions li:nth-child(3) { transition-delay: 0ms; }
.social-fab.is-open .social-actions li:nth-child(2) { transition-delay: 55ms; }
.social-fab.is-open .social-actions li:nth-child(1) { transition-delay: 110ms; }
.social-action { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(244,249,252,.12); border: 1px solid var(--line-2); color: var(--text); backdrop-filter: blur(8px); box-shadow: var(--sh-md); transition: transform .18s var(--ease), background .2s ease, color .2s ease; }
.social-action svg { width: 23px; height: 23px; }
.social-action:hover { transform: scale(1.07); }
.sa-wa:hover { background: #25d366; color: #06231a; }
.sa-ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
.sa-fb:hover { background: #1877f2; color: #fff; }
.social-action::after { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--bg-2); color: var(--text); font-size: .78rem; white-space: nowrap; padding: 6px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s var(--ease); border: 1px solid var(--line); }
.social-action:hover::after { opacity: 1; transform: translateY(-50%); }
.social-toggle { position: relative; width: 74px; height: 74px; border: 0; border-radius: 50%; background: var(--grad); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 18px 46px rgba(143,200,234,.45), 0 4px 14px rgba(8,28,46,.4); transition: transform .22s var(--ease), box-shadow .22s ease; }
.social-fab:not(.is-open) .social-toggle { animation: fabBounce 4.6s ease-in-out 2s infinite; }
.social-toggle:hover { box-shadow: 0 22px 56px rgba(236,209,153,.55), 0 4px 14px rgba(8,28,46,.4); }
.social-toggle:active { transform: scale(.94); }
/* anneau dégradé rotatif (attire l'œil) */
.social-toggle::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: .92;
  background: conic-gradient(from 0deg, var(--gold), var(--sky), var(--gold-br), var(--sky-2), var(--gold));
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 62%);
          mask: radial-gradient(circle, transparent 0 60%, #000 62%);
  animation: fabSpin 5s linear infinite;
}
/* onde de pulsation */
.social-toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(143,200,234,.5); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143,200,234,.5); } 70% { box-shadow: 0 0 0 18px rgba(143,200,234,0); } 100% { box-shadow: 0 0 0 0 rgba(143,200,234,0); } }
@keyframes fabSpin { to { transform: rotate(360deg); } }
@keyframes fabBounce { 0%,80%,100% { transform: none; } 86% { transform: translateY(-7px); } 91% { transform: translateY(-1px); } 96% { transform: translateY(-4px); } }
.si-open, .si-close { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; z-index: 1; transition: transform .26s var(--ease), opacity .2s ease; }
.si-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.social-fab.is-open .si-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.social-fab.is-open .si-close { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stage-ring, .orb, .shine, .btn-cta, .btn-cta::before, .social-toggle, .social-toggle::before, .social-toggle::after,
  .logo-emblem, .lg-spark, .brand-mark::after { animation: none !important; }
}

/* ==================================================================
   SERVICES — interface premium + RÉALISATION nette
   ================================================================== */
.services { position: relative; }
.services::before { content: ""; position: absolute; left: 50%; top: 5%; width: 78%; height: 55%; transform: translateX(-50%); background: radial-gradient(circle, rgba(236,209,153,.12), transparent 70%); pointer-events: none; z-index: 0; }
/* fondu « sortie de plongée » : prolonge l'obscurité de la mer dans le haut des Services */
.services::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(3,12,24,.55) 0%, rgba(4,16,30,.26) 55%, transparent 100%); }
.services .container { position: relative; z-index: 1; }

.service-card { isolation: isolate; }
/* bordure dégradée révélée au survol */
.service-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 4; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .38; transition: opacity .4s ease;
}
.service-card:hover::before { opacity: .95; }
.service-card:hover { box-shadow: 0 26px 60px rgba(8,28,46,.5), 0 0 42px rgba(143,200,234,.14); }
.service-media .media-tag { left: auto; right: 13px; }
.service-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 36%, rgba(8,22,38,.58)); pointer-events: none; z-index: 1; }
.service-ico { position: absolute; top: 13px; left: 13px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: rgba(8,22,38,.5); border: 1px solid var(--line-2); backdrop-filter: blur(6px); z-index: 2; transition: transform .4s var(--ease); }
.service-ico svg { width: 22px; height: 22px; }
.service-card:hover .service-ico { transform: translateY(-3px) scale(1.06); }
.service-num { color: var(--gold-br); z-index: 2; }
.service-body h3 { transition: color .3s ease; }
.service-card:hover .service-body h3 { color: var(--gold-br); }

/* Comparateur avant/après — photo nette */
.ba { aspect-ratio: 4 / 5; }
.ba-img { background-position: center 50%; }

/* ---- Hero : produit détouré « spotlight » ---- */
.hero-visual .tilt { position: relative; }
.product { position: relative; z-index: 2; display: grid; place-items: center; padding: 8% 2% 12%; }
.product-img { width: 100%; max-width: 580px; position: relative; z-index: 2; filter: drop-shadow(0 28px 36px rgba(0,0,0,.6)); }
.product-glow { position: absolute; left: 50%; bottom: 2%; width: 82%; height: 26%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(143,200,234,.55), rgba(236,209,153,.28) 38%, transparent 72%); filter: blur(22px); }
.hero-visual .hero-card-badge { left: 4%; bottom: 0; }
.stage-ring { opacity: .42; }

/* ==================================================================
   BANDE « SIGNATURE » — sous le comparateur avant/après
   (remplace la galerie ; texte minimal, croquis tracé au scroll)
   ================================================================== */
.ba-signature { display: flex; align-items: center; gap: clamp(16px, 4vw, 42px); max-width: 920px; margin: 6px auto 0; }
.sig-rule { flex: 1 1 0; height: 1px; transform-origin: center; background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent); }
.sig-text { display: inline-flex; align-items: center; gap: 15px; flex: 0 0 auto; font-family: var(--serif); font-style: italic; font-size: clamp(1.08rem, 2.4vw, 1.55rem); color: var(--muted-2); }
.sig-shoe { display: inline-grid; place-items: center; color: var(--gold); }
.sig-shoe svg { width: clamp(42px, 7vw, 60px); height: auto; overflow: visible; }
@media (max-width: 640px) {
  .ba-signature { flex-direction: column; gap: 18px; }
  .sig-rule { width: 64%; flex: 0 0 auto; }
  .sig-text { white-space: normal; text-align: center; }
}

/* ==================================================================
   MICRO-ANIMATIONS — légères, sur tout le site
   ================================================================== */
/* miroitement continu des sur-titres (chaque section) */
.eyebrow { background-size: 220% auto; animation: eyebrowShimmer 7s linear infinite; }
@keyframes eyebrowShimmer { to { background-position: 220% center; } }

/* relances au survol */
.step { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease; }
.step:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.price-row { transition: background .25s ease, transform .28s var(--ease); }
.price-row:hover { transform: translateX(5px); }
.contact-list a, .footer-col a, .footer-brand a { transition: color .2s ease; }
.contact-list a:hover, .footer-col a:hover { color: var(--gold-br); }
.footer-social a { transition: color .2s ease, transform .25s var(--ease), border-color .2s ease; }
.footer-social a:hover { color: var(--ink); transform: translateY(-3px); }

/* apparition douce des sur-titres/titres au scroll (déjà gérée par [data-anim]) :
   on ajoute un léger flottement aux pastilles décoratives */
.kicker-dot { animation: dotPulse 2.6s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(143,200,234,.20); } 50% { box-shadow: 0 0 0 7px rgba(143,200,234,.05); } }

@media (prefers-reduced-motion: reduce) {
  .eyebrow, .kicker-dot { animation: none !important; }
}

/* ==================================================================
   Réalisations responsive + Services compacts
   ================================================================== */
@media (min-width: 640px) { .real-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .real-grid { grid-template-columns: repeat(3, 1fr); } }

/* cases services plus petites */
.service-media { aspect-ratio: 4 / 3; }
.service-body { padding: 18px 20px 22px; }
.service-body h3 { font-size: 1.28rem; margin-bottom: 11px; }
.service-body ul { gap: 7px; }
.service-body li { font-size: 0.9rem; padding-left: 19px; }
.service-num { font-size: 1.8rem; }
.service-ico { width: 38px; height: 38px; }
.service-ico svg { width: 19px; height: 19px; }

/* ==================================================================
   NOUVEAUX COMPOSANTS — tél hero, emblème services, citation,
   adresse, Blog, Corporate, Charité, Avis, footer-nav
   ================================================================== */
/* Hero : téléphone + WhatsApp en or */
.hero-call { display: flex; flex-direction: column; gap: 7px; }
.hero-call-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.hero-call-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-phone { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1; letter-spacing: .01em;
  color: transparent; background: linear-gradient(100deg, var(--gold-br), var(--gold) 58%, #d8b06a); -webkit-background-clip: text; background-clip: text;
  animation: heroPhonePulse 2.8s ease-in-out infinite; }
.hero-phone:hover { filter: brightness(1.12); }
@keyframes heroPhonePulse { 0%,100% { filter: drop-shadow(0 2px 14px rgba(236,209,153,.25)); } 50% { filter: drop-shadow(0 2px 24px rgba(236,209,153,.6)); } }
.hero-wa { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink);
  background: var(--grad); box-shadow: 0 8px 22px rgba(236,209,153,.3); transition: transform .2s var(--ease), box-shadow .25s ease; }
.hero-wa svg { width: 16px; height: 16px; }
.hero-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(236,209,153,.45); }

/* Emblème dans le titre de section (Services) */
.section-emblem { display: block; width: 80px; height: 80px; margin: 0 auto 16px; }

/* Citation Services */
.svc-quote { position: relative; max-width: 820px; margin: var(--flow-lg) auto 0; text-align: center; padding: 44px 36px 36px;
  border-radius: var(--r-lg); border: 1px solid rgba(236,209,153,.5);
  background: linear-gradient(160deg, rgba(28,72,110,.62), rgba(9,28,48,.74));
  box-shadow: 0 24px 60px rgba(5,18,32,.5), 0 0 0 5px rgba(236,209,153,.07), inset 0 1px 0 rgba(255,255,255,.09); }
/* coins ornés d'or */
.svc-quote::before, .svc-quote::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
  border-color: rgba(236,209,153,.65); border-style: solid; }
.svc-quote::before { top: 12px; left: 12px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 12px; }
.svc-quote::after { bottom: 12px; right: 12px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 12px; }
.svc-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.42; color: #f7f1e2; text-shadow: 0 1px 18px rgba(5,18,32,.55); }
.svc-quote cite { display: inline-block; margin-top: 18px; font-style: normal; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-br); padding: 8px 18px; border: 1px solid rgba(236,209,153,.5); border-radius: 999px; background: rgba(236,209,153,.1); }
.svc-quote-mark { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 4.6rem; line-height: 1; color: var(--gold); opacity: .75; text-shadow: 0 0 30px rgba(236,209,153,.55); }
/* filet or + phrase signature de la maison sous la citation */
.svc-quote-brand { margin-top: 24px; padding-top: 22px; font-size: 1.02rem; line-height: 1.65; color: #cfe0ee; position: relative; }
.svc-quote-brand::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 84px; height: 1.5px; background: var(--grad); box-shadow: 0 0 12px rgba(236,209,153,.5); }

/* Formulaire : groupe adresse */
.field-group { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 2px; margin-bottom: 16px; }
.field-group legend { padding: 0 8px; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1.3fr 1fr 1fr; } }

/* Blog */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: rgba(15,44,70,.34); backdrop-filter: blur(14px); box-shadow: var(--sh-md); transition: transform .4s var(--ease), box-shadow .4s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.blog-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.blog-card:hover .blog-media img { transform: scale(1.06); }
.blog-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--grad); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.blog-play svg { width: 26px; height: 26px; margin-left: 3px; }
.blog-soon { position: absolute; top: 12px; left: 12px; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: rgba(7,21,37,.6); border: 1px solid var(--line-2); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.blog-body { padding: 20px 22px 24px; }
.blog-body h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin-bottom: 7px; }
.blog-body p { color: var(--muted); font-size: .94rem; margin-bottom: 12px; }
.blog-link { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); cursor: default; transition: color .3s ease; }
.blog-card:hover .blog-link { color: var(--gold); }
.blog-link::after { content: " \2192"; }

/* Corporate / Charité : rangée de features */
.feature-row { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
@media (min-width: 700px) { .feature-row { grid-template-columns: repeat(3, 1fr); } }
.feature { text-align: center; padding: 30px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(15,44,70,.3); backdrop-filter: blur(12px); box-shadow: var(--sh-sm); transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease; }
.feature:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--sh-md); }
.feature-ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; margin-bottom: 16px; color: var(--gold); background: rgba(8,22,38,.5); border: 1px solid var(--line-2); }
.feature-ico svg { width: 28px; height: 28px; }
.feature h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }

/* Avis / témoignages */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .reviews-grid { grid-template-columns: repeat(4, 1fr); } }
.review-card { position: relative; margin: 0; padding: 32px 26px 26px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(165deg, rgba(22,58,90,.52), rgba(13,38,62,.40)); backdrop-filter: blur(15px); box-shadow: var(--sh-md); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .42s var(--ease-lux), box-shadow .42s var(--ease-lux), border-color .42s ease; }
/* filet or lumineux en haut de chaque carte */
.review-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: .8; }
/* halo doux qui s'allume au survol */
.review-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(236,209,153,.12), transparent 60%); transition: opacity .42s ease; }
.review-card:hover { transform: translateY(-7px); border-color: rgba(236,209,153,.42);
  box-shadow: 0 26px 56px rgba(5,18,32,.5), 0 0 0 1px rgba(236,209,153,.18); }
.review-card:hover::after { opacity: 1; }
.rv-quote { position: absolute; top: 6px; right: 18px; font-family: var(--serif); font-size: 4.6rem; line-height: 1; color: var(--gold); opacity: .18; }
.stars { color: var(--gold); letter-spacing: 3px; font-size: 1.02rem; margin-bottom: 14px; text-shadow: 0 0 14px rgba(236,209,153,.45); }
.review-card blockquote { color: var(--muted); font-size: .99rem; line-height: 1.62; flex: 1 1 auto; }
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(244,249,252,.08); }
.rv-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); background: var(--grad); box-shadow: 0 6px 16px rgba(236,209,153,.34); }
.rv-name { font-weight: 600; font-size: .94rem; color: var(--text); }

/* Footer : nav secondaire */
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.footer-nav a { color: var(--muted); font-size: .9rem; transition: color .2s ease; }
.footer-nav a:hover { color: var(--gold-br); }

/* ==================================================================
   PREMIUM UPLIFT — pastilles unifiées, densité mobile, tactile, focus
   ================================================================== */

/* Pastilles sur photo : système visuel unifié (couleurs/positions conservées ailleurs) */
.rf-tag, .ba-tag, .real-tile figcaption, .work-tile figcaption, .blog-soon {
  font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: rgba(7,21,37,.6); border: 1px solid var(--line-2);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.contact-list .contact-val { font-size: 1.08rem; color: var(--text); }

/* Cibles tactiles ≥ 44px (desktop/tablette ; compactées sur petit écran pour éviter tout débordement) */
@media (min-width: 601px) { .lang-btn { min-width: 42px; } }
.footer-social a { width: 46px; height: 46px; }

/* En-tête / ancres : --hdr aligné sur la hauteur réelle par breakpoint */
@media (max-width: 899px) { :root { --hdr: 118px; } }
@media (max-width: 640px) {
  :root { --hdr: 86px; }
  .site-header { padding-top: 24px; }
  .site-header.is-scrolled { padding-top: 16px; }
  .brand-mark { width: 88px; height: 88px; }
}

/* Densité mobile : respiration resserrée et éléments proportionnés */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 38px; }
  .services-top { gap: 34px; margin-bottom: 40px; }
  .section-emblem { width: 62px; height: 62px; margin-bottom: 12px; }
  .svc-quote { padding: 34px 20px 28px; margin-top: 44px; }
  .svc-quote-mark { font-size: 3.4rem; top: -17px; }
  .svc-quote::before, .svc-quote::after { width: 24px; height: 24px; }
  .svc-quote cite { margin-top: 14px; }
  .lang-btn { min-height: 38px; min-width: 32px; }
  .hero-wa { padding: 10px 16px; font-size: .82rem; }
  .hero-wa svg { width: 18px; height: 18px; }
  .ba-knob { width: 52px; height: 52px; }
  .social-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 11px; }
  .social-toggle { width: 60px; height: 60px; }
  .si-open, .si-close { width: 24px; height: 24px; }
  .social-action { width: 46px; height: 46px; }
  .social-action::after { display: none; }
}

/* Contact : padding fluide sans zoom iOS */
@media (max-width: 479px) {
  .contact-form { padding: 24px 18px; }
  .field-group { padding: 12px 12px 2px; }
  .heritage { grid-template-columns: 1fr; }
  .spa-bubble { padding: 20px 16px 18px; }
}
@media (max-width: 419px) {
  .spa-bubble { padding: 20px 16px 18px; filter: drop-shadow(6px 7px 0 rgba(13,38,62,.94)); }
  .spa-bubble:hover { filter: drop-shadow(8px 10px 0 rgba(13,38,62,.94)); }
  .spa-bubble li { font-size: .8rem; line-height: 1.45; }
  .sb-row { font-size: .84rem; }
}
@media (max-width: 390px) {
  .container { padding-inline: 16px; }
  .header-inner { padding: 0 12px 0 16px; }
  .price-panel { padding: 10px 16px; }
  .real-grid, .blog-grid, .reviews-grid { gap: 14px; }
}

/* Tactile : plus de sticky-hover, feedback de pression courte */
@media (hover: none) {
  .service-card:hover, .blog-card:hover, .review-card:hover, .spa-card:hover,
  .step:hover, .feature:hover, .corp-shot:hover, .about-mission:hover,
  .spa-bubble:hover { transform: none; }
  .service-card:active, .blog-card:active, .review-card:active, .spa-card:active,
  .step:active, .feature:active, .corp-shot:active, .about-mission:active { transform: scale(.985); transition-duration: .12s; }
  .price-row:hover { transform: none; background: transparent; }
}

/* ==================================================================
   SERVICES v2 — carte à cover unique cliquable + modale « déploiement »
   ================================================================== */
.service-card { cursor: pointer; transform-style: preserve-3d; will-change: transform;
  transition: transform .5s var(--ease-lux), box-shadow .45s ease, border-color .45s ease; }
.sc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; transition: transform .5s var(--ease-lux); }
.sc-cover { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-lux), filter .6s ease; }
.service-card:hover .sc-cover { transform: scale(1.06); filter: saturate(1.06) brightness(1.03); }
.sc-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,32,.28) 0%, transparent 26%, transparent 52%, rgba(5,16,30,.72) 100%); }
.sc-ico { position: absolute; top: 14px; left: 14px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--gold-br); background: rgba(7,21,37,.5); border: 1px solid rgba(236,209,153,.4); backdrop-filter: blur(6px); }
.sc-ico svg { width: 20px; height: 20px; }
.sc-num { position: absolute; top: 16px; right: 18px; z-index: 2; font-family: var(--serif); font-size: 1.5rem; color: rgba(245,227,182,.7); text-shadow: 0 2px 12px rgba(5,18,32,.6); }
.sc-badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: var(--grad); padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(236,209,153,.34); }
.sc-badge span { font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sc-reveal { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink); background: rgba(245,227,182,.92); border: 1px solid #fff; box-shadow: 0 8px 20px rgba(5,18,32,.4);
  transition: transform .4s var(--ease-lux), background .3s ease; animation: scReveal 3s ease-in-out infinite; }
.sc-reveal svg { width: 18px; height: 18px; }
.service-card:hover .sc-reveal { transform: scale(1.14) rotate(0); background: var(--gold-br); }
@keyframes scReveal { 0%,100% { box-shadow: 0 8px 20px rgba(5,18,32,.4), 0 0 0 0 rgba(236,209,153,.5); } 50% { box-shadow: 0 8px 20px rgba(5,18,32,.4), 0 0 0 8px rgba(236,209,153,0); } }
.sc-body { position: relative; padding: 20px 22px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sc-body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.32rem; letter-spacing: -0.01em; }
.sc-cta { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--gold-br); white-space: nowrap; }
.sc-arrow { transition: transform .35s var(--ease-lux); }
.service-card:hover .sc-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .sc-reveal { animation: none; } }

/* ---- Modale ---- */
.svc-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(14px, 4vw, 40px);
  opacity: 0; transition: opacity .3s ease; }
.svc-modal.is-open { opacity: 1; }
.svc-modal[hidden] { display: none; }
.svc-modal-backdrop { position: absolute; inset: 0; background: rgba(4,14,26,.66); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); }
.svc-modal-panel { position: relative; z-index: 1; width: min(880px, 100%); max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(165deg, rgba(24,60,92,.94) 0%, rgba(12,34,58,.96) 100%);
  border: 1px solid rgba(236,209,153,.28); box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.08); }
.svc-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(7,21,37,.5); color: var(--text); cursor: pointer; transition: background .25s ease, transform .25s var(--ease-lux), border-color .25s ease; }
.svc-modal-close svg { width: 18px; height: 18px; }
@media (hover: hover) { .svc-modal-close:hover { background: var(--grad); color: var(--ink); border-color: transparent; transform: rotate(90deg); } }
.svm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; padding-right: 44px; }
.svm-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--gold-br); background: rgba(7,21,37,.5); border: 1px solid rgba(236,209,153,.4); }
.svm-ico svg { width: 22px; height: 22px; }
.svm-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -0.02em; }
.svm-chips { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; margin-top: 2px; }
.svm-chips li { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--muted-2); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(236,209,153,.3); background: rgba(236,209,153,.06); }
.svm-ba { position: relative; margin: 0 0 var(--gutter); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-md); aspect-ratio: 16 / 10; background: #0a2036; }
.svm-ba-img { width: 100%; height: 100%; object-fit: cover; }
.svm-ba-line { position: absolute; top: 6%; bottom: 6%; left: 50%; width: 2px; transform: translateX(-50%); transform-origin: center; z-index: 2;
  background: linear-gradient(rgba(245,227,182,0), rgba(245,227,182,.85), rgba(245,227,182,0)); box-shadow: 0 0 12px rgba(236,209,153,.6); }
.svm-ba-label { position: absolute; bottom: 14px; z-index: 2; font-size: .64rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text); background: rgba(7,21,37,.62); border: 1px solid var(--line-2); padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(5px); }
.svm-before { left: 14px; color: var(--muted-2); }
.svm-after { right: 14px; color: var(--sky); }
.svm-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); perspective: 1100px; }
@media (min-width: 640px) { .svm-gallery { grid-template-columns: repeat(3, 1fr); } }
.svm-tile { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(236,209,153,.24);
  aspect-ratio: 4 / 3; background: radial-gradient(130% 130% at 50% 20%, #143550, #0a2036 70%); box-shadow: 0 6px 18px rgba(4,14,26,.5);
  transition: transform .4s var(--ease-lux), border-color .4s ease, box-shadow .4s ease; transform-style: preserve-3d; }
.svm-tile img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
@media (hover: hover) { .svm-tile:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(236,209,153,.55); box-shadow: 0 14px 30px rgba(4,14,26,.6); } }

/* ==================================================================
   SERVICES v3 — avant/après HD directement dans chaque carte
   ================================================================== */
.service-card { cursor: default; }
.sc-ba { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sc-ba-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-lux); }
.service-card:hover .sc-ba-img { transform: scale(1.045); }
.sc-scrim2 { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,32,.22) 0%, transparent 22%, transparent 66%, rgba(5,16,30,.62) 100%); }
.sc-ba-line { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 2px; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(rgba(245,227,182,0), rgba(245,227,182,.8), rgba(245,227,182,0)); box-shadow: 0 0 12px rgba(236,209,153,.55); }
.sc-ba-tag { position: absolute; bottom: 12px; z-index: 3; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: rgba(7,21,37,.6); border: 1px solid var(--line-2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.sc-ba-before { left: 12px; color: var(--muted-2); }
.sc-ba-after { right: 12px; color: var(--sky); }
.sc-body2 { padding: 20px 24px 22px; }
.sc-body2 h3 { font-family: var(--serif); font-weight: 500; font-size: 1.34rem; letter-spacing: -0.01em; margin-bottom: 13px; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tags li { font-size: .74rem; font-weight: 600; color: var(--muted-2); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(236,209,153,.26); background: rgba(236,209,153,.06); }

/* ==================================================================
   BANDEAU INTRO — bulle signature « Make shoes great again »
   ================================================================== */
.intro-band { position: relative; z-index: 2; padding: clamp(44px, 6vw, 86px) 0 clamp(38px, 5vw, 66px); text-align: center; }
.intro-inner { display: grid; place-items: center; gap: clamp(16px, 3vw, 28px); }
/* 2ᵉ slide : logo au centre, une photo + une moitié de texte de chaque côté */
.intro-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 46px); align-items: center; }
@media (min-width: 980px) {
  .intro-grid { grid-template-columns: 1fr minmax(220px, 300px) 1fr; gap: clamp(26px, 3vw, 54px); }
}
.intro-side { display: flex; flex-direction: column; gap: 18px; text-align: left; max-width: 560px; margin: 0 auto; width: 100%; }
.intro-center { display: grid; place-items: center; gap: clamp(14px, 2vw, 24px); }
.intro-text .eyebrow { margin-bottom: 12px; }
.intro-text > p { color: var(--muted); margin: 0 0 14px; }
.intro-text > p:last-child { margin-bottom: 0; }
.intro-text .about-sign { color: var(--text) !important; }
.intro-emblem { position: relative; margin: 0; width: min(300px, 82%); }
.intro-emblem::before { content: ""; position: absolute; inset: -10% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,209,153,.24), rgba(143,200,234,.10) 55%, transparent 72%); filter: blur(22px);
  animation: charityGlow 5.6s ease-in-out infinite; }
.intro-emblem img { width: 100%; height: auto; filter: drop-shadow(0 16px 34px rgba(5,18,32,.5)); animation: charityFloat 7.5s ease-in-out infinite; }
.intro-tagline { display: grid; gap: 5px; }
.intro-l1 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); letter-spacing: .005em;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.intro-l2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, .9rem + .9vw, 1.45rem); color: var(--gold-br); opacity: .92; }
@media (prefers-reduced-motion: reduce) { .intro-emblem img, .intro-emblem::before { animation: none; } }

/* ==================================================================
   SERVICES v4 — grille uniforme de photos curées par service
   ================================================================== */
.sc-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, rgba(10,30,52,.5), rgba(7,20,36,.6)); }
.sc-grid.n1 { grid-template-columns: 1fr; }
.sc-grid.n3 .sc-shot:first-of-type { grid-column: 1 / 3; }
.sc-shot { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(236,209,153,.24); background: radial-gradient(130% 130% at 50% 20%, #143550, #0a2036 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(4,14,26,.4); transition: border-color .35s ease, transform .4s var(--ease-lux); }
.sc-grid.n3 .sc-shot:first-of-type { aspect-ratio: 16 / 8; }
.sc-shot img { width: 100%; height: 100%; object-fit: contain; padding: 4px; transition: transform .7s var(--ease-lux); }
/* Peinture / teinture : avant-après empilés, chaque photo remplit exactement son cadre (aucune bande vide) */
.sc-grid.stack { grid-template-columns: 1fr; }
.sc-shot--fill img { object-fit: cover; padding: 0; }
/* Compositions accordées aux ratios réels des photos (cadres pleins, sans bandes) */
.sc-grid.wide3 .sc-shot { aspect-ratio: 21 / 10; }
.sc-grid.wide3 .sc-shot:first-of-type { grid-column: 1 / 3; aspect-ratio: 21 / 10; }
.sc-grid.hero4 { grid-template-columns: repeat(3, 1fr); }
.sc-grid.hero4 .sc-shot { aspect-ratio: 1 / 1; }
.sc-grid.hero4 .sc-shot:first-of-type { grid-column: 1 / 4; aspect-ratio: 19 / 10; }
.sc-grid.craft3 .sc-shot { aspect-ratio: 4 / 3; }
.sc-grid.craft3 .sc-shot:first-of-type { grid-column: 1 / 3; aspect-ratio: 3 / 2; }
.service-card:hover .sc-shot { border-color: rgba(236,209,153,.45); }
.service-card:hover .sc-shot img { transform: scale(1.04); }
.sc-mini-tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; font-size: .54rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: rgba(7,21,37,.62); border: 1px solid var(--line-2); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.sc-grid .sc-ico { position: absolute; top: 16px; left: 16px; z-index: 4; }
.sc-grid .sc-num { position: absolute; top: 16px; right: 20px; z-index: 4; }

@media (hover: none), (pointer: coarse) {
  .reveal, .reveal-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}


/* Stabilizare afisare pe telefoane Samsung */
@media (max-width: 768px) {
  .reveal, .reveal-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
/* Test Samsung - dezactivare efecte prima pagina */
@media (max-width: 768px) {
  .hero, .hero * {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* Test Samsung - fundal static */
@media (max-width: 768px) {
  .world-sea::before,
  .sea-deep::before,
  .aurora,
  .waves,
  .ocean,
  .depth {
    display: none !important;
  }

  .world-sea {
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  body {
    background-attachment: scroll !important;
  }
}

/* Chenar elegant pentru explicatiile comenzii */
.hero-how-it-works {
  background: rgba(8, 22, 38, 0.78);
  border: 1px solid rgba(218, 185, 119, 0.75);
  border-radius: 18px;
  padding: 18px 22px;
  margin-top: 20px;
  max-width: 580px;
  color: #f5f0e6;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.hero-how-it-works h2 {
  color: #e6c98e;
  margin-bottom: 12px;
}

.hero-how-it-works p {
  margin: 6px 0;
  line-height: 1.5;
}