/* ============================================================
   TABLE DES MATIÈRES
    1. Variables & Reset
    2. Utilitaires
    3. Boutons
    4. Header / Navigation
    5. Breadcrumb
    6. Hero (accueil)
    7. Sections communes
    8. Grille spas & carte spa
    9. Page hero (catalogue, panier…)
   10. Page détail produit
   11. Spas similaires
   12. Barre sticky configuration
   13. Options de configuration
   14. Gammes
   15. Filtres (catalogue)
   16. Steps
   17. Why section
   18. À propos
   19. CTA section
   20. Panier & checkout
   21. Page confirmation
   22. Comparateur
   23. Animations au scroll
   24. Footer
   25. Pages légales
   26. Quiz
   27. Interactions & micro-animations
   28. Media queries
   ============================================================ */

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
  /* Couleurs de base */
  --white:      #FFFFFF;
  --black:      #0D0D0D;

  /* Bleu marine — couleur primaire */
  --navy:       #1A254D;
  --navy-mid:   #2D3E72;
  --navy-light: #ECEEF6;

  /* Acier bleuté — couleur accent */
  --gold:       #647585;
  --gold-dark:  #4E5D6B;
  --gold-light: #EEF1F3;

  /* Texte */
  --text:       #111111;
  --text-muted: #5A5A6E;
  --text-light: #9A9AAA;

  /* Interface */
  --border:     #DDE0EC;
  --bg:         #F8F9FC;
  --bg-card:    #FFFFFF;

  /* États */
  --danger:     #C0392B;
  --success:    #1A5C3A;
  --success-bg: #EAF4EE;

  /* Rayons & ombres */
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  16px;
  --shadow:     0 2px 16px rgba(26,37,77,.08);
  --shadow-lg:  0 8px 32px rgba(26,37,77,.14);

  /* Typographie */
  --font-title: 'Montserrat', sans-serif;
  --font-text:  'Lato', system-ui, sans-serif;

  --weight-title:      300;
  --weight-bold-title: 600;
  --weight-text:       300;
  --weight-light-text: 200;
  --weight-bold-text:  600;

  --size-h1:        clamp(2rem, 5vw, 3.3rem);
  --size-h2:        clamp(1rem, 2vw, 1.4rem);
  --size-h3:        clamp(1.3rem, 3vw, 2.4rem);
  --size-paragraph: clamp(.8rem, 1.5vw, 1rem);
  --size-p2:        clamp(.7rem, 1.5vw, .9rem);
  --size-menu:    clamp(.7rem, 1vw, .8rem);
  --size-caract:    clamp(.6rem, 1vw, .8rem);
  --size-eyebrow:   clamp(.5rem, 1vw, .7rem);

  --max-w:        1100px;
  --max-w-narrow: 800px;
}

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

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  background: #F8F9FC; /* évite le flash blanc avant que body soit peint */
  font-family: var(--font-text);
}

body {
  background: var(--bg);
  line-height: 1.7;
  overscroll-behavior-y: none;
  overflow-x: clip; /* bloque le scroll horizontal sur toutes les pages sans casser position:sticky */
  -webkit-font-smoothing: antialiased;
}
section{min-height: 26dvh;}

img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

[hidden] { display: none !important; }

/* ============================================================
   2. UTILITAIRES
   ============================================================ */
.section-inner         { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.section-inner--narrow { max-width: var(--max-w-narrow); }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  white-space: nowrap; cursor: pointer;
  transform-origin: center;
}

.btn-primary          { background: var(--navy); color: var(--white); }
.btn-primary:hover    { background: var(--navy-mid); }

.btn-outline          { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover    { background: var(--navy); color: var(--white); }

.btn-ghost            { background: transparent; color: var(--navy); }
.btn-ghost:hover      { background: var(--navy-light); }

.btn-white            { background: var(--gold-bg); color: var(--navy); }
.btn-white:hover      { background: var(--bg); color: var(--navy); }

.btn-sm   { padding: .4rem .9rem; font-size: .78rem; }
.btn-full { width: 100%; }

.btn-link {
  background: none; border: none; cursor: pointer;
  font-size: .78rem; color: var(--text-muted); text-decoration: underline; font-family: inherit;
}
.btn-link:hover { color: var(--navy); }

/* ============================================================
   4. HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #000;
  border-top: 2px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 24px rgba(0,0,0,.15);
  transition: background .3s, border-color .3s, box-shadow .3s;
}

/* Header transparent sur la page d'accueil avant scroll */
body:has(.hero) .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}

.header-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 2rem; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: height .3s;
}

/* Compense le header fixe sur les pages sans hero */
#main-content                             { padding-top: 78px; }
#main-content.main--hero                  { padding-top: 0; }
#main-content:has(> .hero:first-child)    { padding-top: 0; }

/* Logo */
.logo         { display: flex; flex-direction: column; align-items: center; line-height: 1.2; flex-shrink: 0; }
.logo-name    { font-family: var(--font-title); font-size: 1.55rem; font-weight: 600; letter-spacing: .12em; color: var(--navy); transition: font-size .3s; }
.logo-tagline { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); opacity: .9; transition: opacity .2s, max-height .3s; overflow: hidden; max-height: 2em; }
.logo-img     { height: 80px; width: auto; display: block; transition: height .3s; }

/* Séparateur vertical */
.header-divider { width: 2px; height: 36px; background: var(--gold); opacity: .55; border-radius: var(--radius); flex-shrink: 0; }

/* Nav principale */
.main-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }

.nav-link {
  font-size: var(--size-menu); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  padding: .4rem .9rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color .2s, background .2s;
}
.nav-link--wide  { padding-left: 1.4rem; padding-right: 1.4rem; white-space: nowrap; }
.nav-link--flash { color: var(--gold) !important; font-weight: 700; }
.nav-link--flash:hover { color: var(--gold) !important; background: rgba(201,168,76,.1) !important; }
.nav-link:hover  { color: var(--navy); background: var(--navy-light); }
.nav-link.active { color: var(--navy); border-bottom-color: var(--gold); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: transparent; }

/* Dropdown */
.nav-dropdown        { position: relative; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.nav-dropdown-arrow  { font-size: .6rem; transition: transform .2s; }
.nav-dropdown:hover .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white); border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 180px; padding: .5rem 0; margin-top: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }

.nav-dropdown-item {
  display: block; padding: .55rem 1.2rem;
  font-size: var(--size-menu); font-weight: 600; color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s; white-space: nowrap;
}
.nav-dropdown-item:hover   { background: var(--navy-light); color: var(--navy); }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: .35rem 0; }

/* Sub-dropdown (flyout gammes) */
.nav-sub-dropdown { position: relative; }
.nav-sub-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
.nav-sub-arrow { font-size: .85rem; margin-left: .6rem; transition: transform .2s; opacity: .5; }
.nav-sub-dropdown-menu {
  position: absolute; top: -.5rem; left: 100%;
  background: var(--white); border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 160px; padding: .5rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s;
  transform: translateX(-6px);
  z-index: 201;
}
.nav-sub-dropdown:hover .nav-sub-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(0);
}
.nav-sub-dropdown:hover .nav-sub-arrow { transform: rotate(90deg); opacity: 1; }

/* Téléphone */
.nav-phone {
  font-size: .82rem; color: var(--navy); font-weight: 700;
  letter-spacing: .04em; padding: .4rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  white-space: nowrap; flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.nav-phone:hover { background: var(--gold-light); border-color: var(--gold); }

/* Panier */
.cart-btn {
  position: relative;
  display: flex; align-items: center; gap: .4rem;
  background: var(--navy); color: var(--white);
  border: none; border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 700; font-size: var(--size-menu);
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s, transform .15s; flex-shrink: 0;
}
.cart-btn:hover  { background: var(--navy-mid); transform: translateY(-1px); }
.cart-btn:active { transform: translateY(0); }

.cart-badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--gold); color: var(--navy);
  font-size: .6rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Sélecteur de langue */
.lang-switcher { display: flex; align-items: center; gap: .3rem; margin-left: .25rem; }
.lang-btn      { font-size: var(--size-menu); font-weight: 700; letter-spacing: .08em; color: var(--bg); text-decoration: none; padding: .2rem .35rem; border-radius: 4px; transition: color .2s, background .2s; }
.lang-btn:hover    { color: var(--navy); background: var(--navy-light); }
.lang-btn.is-active { color: var(--navy); background: var(--navy-light); }
.lang-sep      { font-size: .65rem; color: var(--border); }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--bg); border-radius: 2px; transition: transform .25s, opacity .25s; }

/* Menu mobile */
.mobile-nav {
  display: flex; flex-direction: column;
  background: #000;
  border-top: 2px solid var(--gold);
  padding: .5rem 2rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  max-height: 0; overflow: hidden;
  padding-top: 0; padding-bottom: 0; border-top-width: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .3s ease, border-top-width .3s ease;
}
.mobile-nav.is-open { max-height: 85vh; overflow-y: auto; padding-top: .5rem; padding-bottom: 1rem; border-top-width: 2px; }

.mobile-nav-link {
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: var(--size-menu); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); transition: color .2s;
}
.mobile-nav-link:hover      { color: #fff; }
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link--sub       { padding-left: 1.25rem; font-size: var(--size-menu); color: rgba(255,255,255,.45); border-bottom-style: dashed; }
.mobile-nav-link--sub2      { padding-left: 2.25rem; font-size: var(--size-menu); color: rgba(255,255,255,.3); border-bottom-style: dashed; font-weight: 400; }
.mobile-nav-link--sep       { border-bottom: 1px solid rgba(255,255,255,.4) !important; border-bottom-style: solid !important; }

.mobile-nav-gammes-toggle {
  width: 100%; text-align: left; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-gammes-arrow { font-size: .7rem; transition: transform .25s; }
.mobile-nav-gammes-toggle[aria-expanded="true"] .mobile-gammes-arrow { transform: rotate(180deg); }
.mobile-nav-gammes {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.mobile-nav-gammes.is-open { grid-template-rows: 1fr; }
.mobile-nav-gammes > div { overflow: hidden; display: flex; flex-direction: column; }


/* Textes header — toujours blancs (fond sombre) */
.site-header .nav-link        { color: rgba(255,255,255,.85); }
.site-header .nav-link:hover  { color: #fff; background: rgba(255,255,255,.1); }
.site-header.is-scrolled .nav-link:hover {
  color: #fff;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 65%, transparent 100%);
  text-shadow: 0 0 18px rgba(255,255,255,.7), 0 0 40px rgba(255,255,255,.3);
  box-shadow: inset 0 0 14px rgba(255,255,255,.07);
}
.site-header .nav-link.active { color: var(--bg); border-bottom-color: var(--bg); }
.site-header .nav-phone       { color: #fff; border-color: transparent; }
.site-header .nav-phone:hover { background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
.site-header .logo-tagline    { color: var(--bg); }

/* Header compact au scroll */
.site-header.is-scrolled                  { background: rgba(1,1,1,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top-color: var(--gold); box-shadow: 0 2px 24px rgba(0,0,0,.15); }
.site-header.is-scrolled .header-inner    { height: 54px; }
.site-header.is-scrolled .logo-name       { font-size: 1.25rem; }
.site-header.is-scrolled .logo-img        { height: 70px; }
.site-header.is-scrolled .logo-tagline    { opacity: 0; max-height: 0; }

/* Burger → croix */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   5. BREADCRUMB
   ============================================================ */
.breadcrumb      { padding: .85rem 0; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.breadcrumb-list {
  display: flex; align-items: center; gap: .5rem;
  max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
  font-size: .8rem; color: var(--text-muted);
}
.breadcrumb-list li + li::before  { content: '›'; margin-right: .5rem; }
.breadcrumb-list a                { color: var(--navy-mid); }
.breadcrumb-list a:hover          { color: var(--gold-dark); text-decoration: underline; }
.breadcrumb-list [aria-current]   { color: var(--text-muted); }

/* ============================================================
   6. HERO (accueil)
   ============================================================ */
.hero {
  position: relative;
  height: calc(100lvh + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
}
.hero-bg {
  position: fixed; inset: 0;
  background-size: cover; background-position: 70% center; background-repeat: no-repeat;
  background-color: var(--navy);
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 28%),
    linear-gradient(to top,    rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.05) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; padding: 0 5vw calc(7rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.hero-card  { max-width: 620px; width: 100%; animation: heroCardIn .9s cubic-bezier(.25,.46,.45,.94) .15s both; }
.hero-divider { width: 40px; height: 1px; background: var(--gold); margin: 1rem 0; }

.hero-eyebrow { font-size: var(--size-eyebrow); letter-spacing: .35em; text-transform: uppercase; color: var(--bg); font-weight: var(--weight-bold-text); margin-bottom: 1rem; }
.hero-title   { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); line-height: 1.05; color: var(--white); margin-bottom: 1.5rem; letter-spacing: .04em; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.hero-desc    { font-size: var(--size-paragraph); font-weight: var(--weight-text); color: rgba(255,255,255,.9); margin: 0 0 3.5rem; line-height: 2; max-width: 500px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }

.hero-cta-group    { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.hero-actions      { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start; }
.btn-hero-primary  { background: transparent; color: var(--bg); border: 1px solid var(--gold); font-weight: 600; padding: .9rem 1.2rem; border-radius: var(--radius-sm); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; transition: background .35s, color .3s, transform .15s; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.btn-hero-primary:hover { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 20%, transparent) 0%, color-mix(in srgb, var(--gold) 50%, transparent) 100%); color: var(--bg); }
.btn-hero-ghost   { background: transparent; color: var(--bg); border: 1px solid var(--bg); font-weight: 600; padding: .9rem 2.1rem; border-radius: var(--radius-sm); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; transition: background .25s, border-color .25s, color .25s; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.btn-hero-ghost:hover   { background: color-mix(in srgb, var(--bg) 30%, transparent); border-color: var(--bg); color: #fff; }

/* Indicateur scroll */
.hero-scroll      { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hero-scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; display: block; }
@keyframes scrollPulse { 0% { opacity: 1; transform: scaleY(1) translateY(0); } 100% { opacity: 0; transform: scaleY(.5) translateY(20px); } }

/* Quiz link dans le hero */
.hero-quiz-link {
  display: flex; width: fit-content; align-items: center; gap: .5rem;
  margin-top: 1.25rem; padding: .55rem 1.1rem;
  border: 1px solid var(--bg); border-radius: 99px;
  font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.85);
  letter-spacing: .04em; background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s, background .2s;
}
.hero-quiz-link:hover { border-color: var(--bg); color: #fff; background: color-mix(in srgb, var(--bg) 30%, transparent); }
.hero-quiz-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: dotPulse 2.5s ease-in-out infinite; }

/* ============================================================
   6b. SECTION VIDÉO
   ============================================================ */
.video-section { padding: 2rem 0; position: relative; z-index: 1; }
/* Couche couleur — opacité constante pour matcher le bas du hero */
.video-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Couche blur — s'active progressivement du haut vers le bas */
.video-section::after {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to bottom, transparent 0%, black 60%);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, black 60%);
  pointer-events: none;
  z-index: 0;
}
.video-section-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }
.video-section .section-header { margin-bottom: 2rem; }
.video-section .section-title  { color: #fff; }
.video-section .section-desc   { color: rgba(255,255,255,.7); }
.video-wrapper      { position: relative; width: 100%; max-width: 960px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.video-player       { width: 100%; height: auto; display: block; background: #000; }
.video-placeholder  { aspect-ratio: 16/9; background: rgba(255,255,255,.05); border: 2px dashed rgba(255,255,255,.2); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgba(255,255,255,.5); text-align: center; padding: 2rem; }
.video-placeholder p { font-size: .9rem; line-height: 1.6; }

/* ============================================================
   7. SECTIONS COMMUNES
   ============================================================ */
.section-header  { text-align: center; margin-bottom: 2.5rem; }
.section-eyebrow { font-size: var(--size-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); font-weight: var(--weight-bold-text); margin-bottom: .6rem; }
.section-title   { font-family: var(--font-title); font-size: var(--size-h3); font-weight: var(--weight-title); color: var(--navy); margin-bottom: .75rem; }
.section-desc    { font-weight: var(--weight-text); font-size: var(--size-paragraph); max-width: 520px; margin: 0 auto; color: var(--text-muted); }
.section-cta     { text-align: center; margin-top: 3rem; }

/* Sections avec espacement standard */
.featured-section, .catalogue-section { padding: 4rem 0; position: relative; z-index: 1; background: var(--bg); }
.featured-section .spas-grid .spa-card:nth-child(4) { display: none; }

/* Stats */
.stats       { background: #fff; padding: 4rem 0; }
.stats-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat-item   { padding: 2rem 1rem; border-right: 1px solid var(--border); }
.stat-item:last-child { border-right: none; }
.stat-number { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); color: var(--gold); display: block; letter-spacing: .04em; }
.stat-label  { font-size: var(--size-caract); color: var(--text-muted); text-transform: uppercase; letter-spacing: .15em; margin-top: .4rem; display: block; }

/* Manifeste */
.manifeste-section  { background: #fff; padding: 7rem 2rem; text-align: center; }
.manifeste-inner    { max-width: 680px; margin: 0 auto; }
.manifeste-eyebrow  { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 2rem; }
.manifeste-quote    { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); color: var(--navy); line-height: 1.2; letter-spacing: .03em; margin-bottom: 2.5rem; }
.manifeste-line     { width: 40px; height: 1px; background: var(--gold); margin: 0 auto; }

/* Signature marque */
.signature-section  { background: var(--navy); padding: 7rem 0; color: #fff; }
.signature-inner    { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.signature-title    { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); line-height: 1.4; color: #fff; margin: 1.25rem 0 1.5rem; letter-spacing: .02em; }
.signature-desc     { color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.9; margin-bottom: 2rem; }
.signature-link     { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; transition: opacity .2s; }
.signature-link:hover { opacity: .7; }
.signature-visual   { display: flex; flex-direction: column; gap: 2.5rem; border-left: 1px solid rgba(255,255,255,.1); padding-left: 4rem; }
.signature-stat-number { display: block; font-family: var(--font-title); font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; color: var(--gold); letter-spacing: .04em; }
.signature-stat-label  { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: .25rem; display: block; }

/* Brand avec image */
.brand-section   { background: #fff; padding: 8rem 0; overflow: hidden; }
.brand-inner     { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.brand-title     { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); color: var(--navy); line-height: 1.35; margin: 1.25rem 0 1.5rem; letter-spacing: .02em; }
.brand-desc      { color: var(--text-muted); font-size: .95rem; line-height: 1.9; margin-bottom: 2rem; }
.brand-cta       { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.brand-cta:hover { color: var(--gold); }
.brand-img       { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; box-shadow: 0 24px 64px rgba(0,0,0,.12); display: block; }
.brand-img-wrap  { position: relative; }
.brand-img-accent { position: absolute; bottom: -1.5rem; right: -1.5rem; width: 60%; height: 60%; border: 1px solid var(--gold); border-radius: 2px; z-index: -1; pointer-events: none; }

/* ============================================================
   8. GRILLE SPAS & CARTE SPA
   ============================================================ */
.spas-grid,
.spas-grid--large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.spa-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.spa-card:hover         { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.spa-card-link          { display: block; }

.spa-card-img {
  height: 260px; overflow: hidden; position: relative;
  background-color: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.spa-name {
  font-family: var(--font-title); font-size: 1.6rem; font-weight: 500; color: var(--navy); margin-bottom: .4rem;
}
.spa-mic-logo {
  display: block;
  width: 65px; height: auto;
  object-fit: contain;
  align-self: flex-start;
  margin: .1rem 0;
  flex-shrink: 0;
}
.spa-card-img img             { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; opacity: 0; }
.spa-card-img img.is-loaded   { opacity: 1; }
.spa-card:hover .spa-card-img img { transform: scale(1.06); }
.spa-promo-badge {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  background: #e63946; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  border-radius: 5px; padding: .25rem .6rem;
  pointer-events: none;
}

.spa-img-placeholder      { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy-light) 0%, var(--gold-light) 100%); }
.spa-img-placeholder span { font-family: var(--font-title); font-size: 3.5rem; font-weight: 300; color: var(--navy); opacity: .25; }

.spa-card-body  {
  padding: .5rem; flex: 1;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: .5rem;
  align-items: start;
  text-align: left;
}
.spa-mic-logo   { grid-column: 1; grid-row: 1 / 3; align-self: center; margin-left: 1rem;}
.spa-gamme-tag  { grid-column: 2; grid-row: 1; }
.spa-name       { grid-column: 2; grid-row: 2; font-family: var(--font-title); font-size: 1.6rem; font-weight: 500; color: var(--navy); margin-bottom: .4rem; }
.spa-badge      { grid-column: 1 / -1; display: block; width: fit-content; margin: 0 0 .7rem; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; background: var(--gold-light); color: var(--gold-dark); padding: .22rem .8rem; border-radius: 999px; font-weight: 700; border: 1px solid var(--gold); }
.spa-name a:hover { color: var(--navy-mid); }
.spa-desc       { grid-column: 1 / -1; font-size: var(--size-p2); font-weight: var(--weight-text); color: var(--text-muted); line-height: 1.65; margin-bottom: .5rem; text-align: justify; }
.spa-specs      { grid-column: 1 / -1; display: flex; gap: 1rem; margin-bottom: 1.25rem; font-size: .78rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.spa-specs span::before { content: '● '; color: var(--gold); font-size: .5rem; vertical-align: middle; }

.spa-card-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.spa-price        { font-family: var(--font-title); margin-left: 1rem;}
.spa-price span   { font-size: .8rem; color: var(--text-muted); display: block; }
.spa-price strong { font-size: var(--size-h2); color: var(--black); font-weight: 500; }
.prix-barre       { font-size: .82rem; color: var(--text-muted); text-decoration: line-through; display: block; line-height: 1.2; }
.badge-promo      { display: inline-block; background: #e63946; color: #fff; font-size: .72rem; font-weight: 700; border-radius: 4px; padding: .1rem .45rem; margin-left: .35rem; vertical-align: middle; letter-spacing: .03em; }
.prix-barre + strong { color: #e63946; }

.spa-gamme-tag { display: inline-block; margin-bottom: .4rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; background: var(--navy-light); color: var(--navy); padding: .2rem .7rem; border-radius: 999px; font-weight: 700; }

/* Bouton favori */
.btn-favori {
  position: absolute; top: .6rem; right: .6rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  transition: color .2s, transform .15s;
}
.btn-favori:hover    { color: #e5534b; transform: scale(1.15); }
.btn-favori.is-active { color: #e5534b; }
.btn-favori.is-active svg { fill: currentColor; }
.btn-favori svg       { width: 1rem; height: 1rem; pointer-events: none; }

.spa-card-actions { display: flex; align-items: center; gap: .5rem; }
.spa-card-topline { display: contents; }

/* ============================================================
   9. PAGE HERO (catalogue, panier…)
   ============================================================ */
.page-hero       { padding: 3rem 0 3rem; background: linear-gradient(135deg, var(--navy) 0%, #111C3E 100%); color: var(--white); display:flex; align-items:center; }
.page-hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; width:100%; }
.page-title      { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); color: var(--white); margin-bottom: .5rem; }
.page-desc       { color: rgba(255,255,255,.7); font-size: 1rem; }
.empty-state     { text-align: center; padding: 4rem; color: var(--text-muted); font-size: 1.1rem; }

/* ============================================================
   10. PAGE DÉTAIL PRODUIT
   ============================================================ */
.product-page   { padding: 3rem 0 6rem; }

.product-layout {
  max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem;
}

/* Sur desktop, le wrapper est transparent — ses enfants participent directement à la grille */
.product-specs-pair { display: contents; }

.product-img-main { background: var(--bg); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; width: 100%; max-width: 500px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.product-img-main img { width: 100%; height: 100%; object-fit: cover; }
.product-carac    { margin: 0 auto; width: 85%; max-width: 500px; position: relative; z-index: 1; }

/* Sous-grille viewer + options : le sticky du viewer est borné à la hauteur des options */
.product-viewer-options {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem;
}

.product-price-section { grid-column: 2; }

.product-viewer-wrap {
  position: sticky; top: 6rem; align-self: start;
  background: var(--bg);
  transition: background .3s ease, box-shadow .3s ease;
}
/* Prolonge le fond jusqu'à la navbar — masque le contenu qui défile derrière (desktop), uniquement quand le viewer est en mode compact/sticky */
.product-viewer-wrap::before {
  content: ''; position: absolute;
  top: -6rem; left: 0; right: 0; height: 6rem;
  pointer-events: none; z-index: -1;
}
.product-viewer-wrap.viewer-compact::before { background: var(--bg); }

.product-viewer-3d {
  border-radius: var(--radius); overflow: hidden; position: relative;
  aspect-ratio: 1/1; width: 100%; max-width: 600px; margin: 0 auto;
}
.product-viewer-3d iframe { width: 100%; height: 100%; border: 0; display: block; }

.product-thumbnails { display: flex; gap: .6rem; flex-wrap: wrap; }
.thumb-btn { width: 80px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: none; padding: 0; transition: border-color .2s; }
.thumb-btn.active, .thumb-btn:hover { border-color: var(--gold); }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }

.product-title     { font-family: var(--font-title); font-size: var(--size-h3); font-weight: var(--weight-title); color: var(--navy); margin: .5rem 0 .75rem; }
.product-specs-row { display: flex; gap: .6rem; margin-bottom: 1.25rem; }
.spec-pill         { background: var(--navy-light); color: var(--navy); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px; }
.product-desc      { color: var(--text-muted); line-height: 1.75; margin-bottom: 1.5rem; }

.product-features    { list-style: none; margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: .4rem; }
.product-features li { font-size: .88rem; padding-left: 1.3rem; position: relative; color: var(--text); }
.product-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-dark); font-weight: 700; }

/* Fiche technique */
.tech-specs-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; font-family: var(--font-title); }
.cs-inline        { display: flex; flex-direction: column; min-width: 300px; max-width: 500px; }
.cs-inline-row    { display: flex; align-items: baseline; gap: .4rem; padding: .45rem 0; border-bottom: 1px dashed var(--border); }
.cs-inline-row:last-child { border-bottom: none; }
.cs-dot       { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; align-self: center; }
.cs-inline-key  { font-size: .8rem; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.cs-inline-dots { flex: 1; border-bottom: 1px dotted #ccc; margin: 0 .4rem .2rem; }
.cs-inline-val  { font-size: .85rem; color: var(--text); font-weight: 700; }

/* Viewer 3D — loader */
.p3d-loader { position: absolute; inset: 0; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--navy-light); transition: opacity .5s, visibility .5s; z-index: 2; }
.p3d-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.p3d-loader-spinner   { width: 40px; height: 40px; border: 3px solid rgba(26,37,77,.15); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }

/* Lightbox */
.lightbox-trigger     { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; position: relative; }
.lightbox-zoom-icon   { position: absolute; top: .6rem; right: .6rem; background: rgba(26,37,77,.65); color: #fff; font-size: 1.1rem; line-height: 1; padding: .35rem .45rem; border-radius: var(--radius-sm); opacity: 0; transition: opacity .2s; pointer-events: none; }
.lightbox-trigger:hover .lightbox-zoom-icon { opacity: 1; }

.lightbox           { position: fixed; inset: 0; z-index: 1000; background: rgba(10,13,28,.94); display: flex; align-items: center; justify-content: center; animation: lbFadeIn .2s ease; }
.lightbox[hidden]   { display: none; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox-img-wrap     { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.lightbox-img-wrap img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,.6); transition: opacity .2s; }

.lightbox-close,
.lightbox-prev,
.lightbox-next { position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover  { background: rgba(255,255,255,.25); transform: scale(1.1); }
.lightbox-close       { top: 1.25rem; right: 1.25rem; width: 42px; height: 42px; font-size: 1.1rem; }
.lightbox-prev        { left: 1.25rem;  top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.8rem; }
.lightbox-next        { right: 1.25rem; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.8rem; }
.lightbox-prev:hover  { transform: translateY(-50%) scale(1.1); }
.lightbox-next:hover  { transform: translateY(-50%) scale(1.1); }
.lightbox-counter     { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .8rem; letter-spacing: .08em; }

/* Toast panier */
.cart-toast {
  position: fixed; top: 90px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 500; width: min(420px, calc(100vw - 2rem));
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(26,37,77,.18), 0 0 0 1px var(--border);
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.cart-toast.is-visible   { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cart-toast-top          { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.1rem .75rem; }
.cart-toast-check        { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 700; }
.cart-toast-info         { flex: 1; }
.cart-toast-info strong  { display: block; font-size: .95rem; color: var(--navy); margin-bottom: .2rem; }
.cart-toast-info p       { font-size: .82rem; color: var(--text-muted); line-height: 1.4; margin: 0; }
.cart-toast-close        { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: .1rem .2rem; line-height: 1; flex-shrink: 0; }
.cart-toast-close:hover  { color: var(--navy); }
.cart-toast-bar-wrap     { height: 3px; background: var(--border); margin: 0 1.1rem; }
.cart-toast-bar          { height: 100%; background: var(--gold); width: 100%; transform-origin: left; transition: width linear; }
.cart-toast-actions      { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.1rem; gap: .75rem; }

/* Scroll-to-top */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  border: none; font-size: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s, transform .3s; pointer-events: none;
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover      { background: var(--navy-mid); }

/* Sections specs structurées */
.product-specs-sections {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: .25rem;
}
.product-specs-block {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.product-specs-block-title {
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--navy-light);
}
.product-specs-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.product-specs-block-list li {
  font-size: .875rem;
  color: var(--text);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.product-specs-block-list li::before {
  content: '▪';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: .65rem;
  top: .35rem;
}

/* ============================================================
   11. SPAS SIMILAIRES
   ============================================================ */
.similaires-section { padding: 4rem 0; border-top: 1px solid var(--border); background: var(--bg); }
.similaires-title   { font-family: var(--font-title); font-size: var(--size-h3); font-weight: var(--weight-title); color: var(--navy); margin-bottom: 2rem; }

/* ============================================================
   12. BARRE STICKY CONFIGURATION
   ============================================================ */
.sticky-config-bar {
  position: fixed; bottom: 0; z-index: 300;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(26,37,77,.13);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: .5rem 1rem;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sticky-config-bar.is-visible { transform: translateY(0); }

.sticky-config-slots { display: flex; flex-wrap: nowrap; overflow: hidden; gap: .25rem; padding: .3rem 0 .25rem; border-bottom: 1px solid var(--border); }

.sticky-slot {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: .12rem .5rem;
  font-size: .7rem; font-weight: 500; color: var(--navy);
  white-space: nowrap; line-height: 1.4;
}
.sticky-slot-cat  { color: var(--text-muted); font-weight: 400; }
.sticky-slot-dot  { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.sticky-slot-more { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; letter-spacing: .02em; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.sticky-slot-more:hover { opacity: .82; }

.sticky-config-inner { display: flex; align-items: center; gap: .75rem; padding: .3rem 0 0; }
.sticky-config-name  { flex: 1; font-size: .8rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-config-prix  { font-size: .95rem; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* ============================================================
   13. OPTIONS DE CONFIGURATION
   ============================================================ */
.config-form   { border-top: 1px solid var(--border); padding-top: 1.75rem; }
.config-group  { margin-bottom: 1.5rem; }
.config-label  { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-title); color: var(--text-muted); margin-bottom: .65rem; }

/* Pills */
.option-pills  { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-label    { cursor: pointer; }
.pill-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pill          { display: block; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--border); font-size: .85rem; transition: all .15s; color: var(--text); }
.pill-label input:checked + .pill { border-color: var(--navy); background: var(--navy); color: var(--white); }
.pill:hover    { border-color: var(--gold); color: var(--navy); }

/* Swatches couleur */
.option-swatches { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .25rem; }
.swatch-label {
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  position: relative;
}
.swatch-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch {
  width: 48px; height: 48px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2.5px solid var(--border); position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.swatch::after {
  content: '✓'; position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .15s;
  background: rgba(26,37,77,.25);
}
.swatch-label input:checked + .swatch        { border-color: var(--navy); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--navy); }
.swatch-label input:checked + .swatch::after { opacity: 1; }
.swatch-label:hover .swatch                  { border-color: var(--gold); transform: scale(1.1); }
.swatch-name { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); text-align: center; }

/* Tooltip swatch */
.swatch-label::before {
  content: attr(title);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(.9);
  background: var(--navy); color: var(--white);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s, transform .15s; z-index: 10;
}
.swatch-label::after {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) scale(.9);
  border: 5px solid transparent; border-top-color: var(--navy);
  pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 10;
}
.swatch-label:hover::before,
.swatch-label:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* Liste d'options (packs) */
.option-list  { display: flex; flex-direction: column; gap: .6rem; }
.option-label {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s;
}
.option-label:hover               { border-color: var(--gold); }
.option-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.option-label.selected,
.option-label:has(input:checked)  { border-color: var(--navy); background: var(--navy-light); }

.option-radio-custom { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; border: 2px solid var(--border); transition: all .15s; display: flex; align-items: center; justify-content: center; }
.option-label:has(input:checked) .option-radio-custom        { border-color: var(--navy); background: var(--navy); }
.option-label:has(input:checked) .option-radio-custom::after { content: '✓'; color: var(--white); font-size: .7rem; font-weight: 700; line-height: 1; }

.option-info   { flex: 1; }
.option-nom    { font-size: .9rem; font-weight: 700; display: block; margin-bottom: .2rem; color: var(--black); font-family: var(--font-title); }
.option-desc   { font-size: .82rem; color: var(--text-muted); margin-bottom: .4rem; }
.option-inclus { font-size: .8rem; color: var(--text-muted); padding-left: .9rem; list-style: disc; }
.option-inclus li { margin-bottom: .15rem; }
.option-prix   { font-size: .88rem; color: var(--navy); white-space: nowrap; font-weight: 600; }

.promo-cond-badge { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--text-muted); background: #f4f5f9; border: 1px solid #e0e4ef; border-radius: 4px; padding: .1rem .4rem; margin-top: .25rem; }
.promo-cond-badge.promo-cond-active { color: #2e7d32; background: #e8f5e9; border-color: #c8e6c9; }

.config-total          { display: flex; align-items: baseline; gap: .75rem; justify-content: flex-end; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 1.5rem 0 1.25rem; font-size: .85rem; color: var(--text-muted); }
.config-total strong   { font-family: var(--font-title); font-size: var(--size-h3); color: var(--navy); font-weight: 500; }
.config-total small    { font-size: .75rem; }
.config-notice         { text-align: center; font-size: .78rem; color: var(--text-muted); margin-top: .75rem; }

/* ============================================================
   14. GAMMES
   ============================================================ */
.gammes-section { padding: 3rem 0; background: var(--bg); position: relative; z-index: 1; }
.gammes-grid    { display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; width: 100%; }

.gamme-item {
  display: grid; grid-template-columns: 1fr 460px; align-items: center; gap: 0;
  padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.07);
  text-decoration: none; position: relative; transition: background .3s;
}
.gamme-item:first-child { border-top: 1px solid rgba(0,0,0,.07); }
.gamme-item:hover       { background: #fafafa; }
.gamme-item::before     { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: center; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.gamme-item:hover::before { transform: scaleY(1); }

.gamme-item-body    { padding-left: 2.5rem; padding-right: 1rem; }
.gamme-nb           { font-size: var(--size-caract); letter-spacing: .25em; text-transform: uppercase; font-weight: var(--weight-text); color: var(--gold); display: block; margin-bottom: .6rem; }
.gamme-nom          { font-family: var(--font-title); font-size: var(--size-h3); font-weight: var(--weight-title); color: var(--navy); line-height: 1.1; margin-bottom: .8rem; transition: color .25s; }
.gamme-item:hover .gamme-nom { color: var(--gold); }
.gamme-item-divider { width: 0; height: 1px; background: var(--gold); margin-bottom: .9rem; transition: width .45s cubic-bezier(.4,0,.2,1); }
.gamme-item:hover .gamme-item-divider { width: 40px; }
.gamme-desc         { font-size: var(--size-paragraph); font-weight: var(--weight-text); color: #777; line-height: 1.8; max-width: 460px; }
.gamme-cta          { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 2rem; display: inline-flex; align-items: center; gap: .4rem; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s, gap .2s; }
.gamme-item:hover .gamme-cta { opacity: 1; transform: translateY(0); gap: .7rem; }

.gamme-item-img          { height: 350px; width: 100%; overflow: hidden; margin-right: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.1); transition: box-shadow .35s, transform .35s; border-radius: var(--radius); }
.gamme-item:hover .gamme-item-img { box-shadow: 0 12px 36px rgba(0,0,0,.18); transform: translateY(-4px); }
.gamme-item-img img      { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; display: block; }
.gamme-item:hover .gamme-item-img img { transform: scale(1.07); }
.gamme-item-img img.is-loaded { opacity: 1; }
.gamme-item-img img       { opacity: 0; transition: opacity .4s ease, transform .35s; }
.gamme-img-placeholder   { width: 100%; height: 100%; background: var(--gamme-color, var(--navy-mid)); }

/* ============================================================
   15. FILTRES (catalogue)
   ============================================================ */
.filters-bar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.filters-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.filter-group { display: flex; flex-direction: column; gap: .35rem; }
.filter-label { font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); }
.filter-select { padding: .45rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .87rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; min-width: 160px; }
.filter-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,37,77,.1); }
.filter-reset  { font-size: .78rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; align-self: flex-end; padding-bottom: .45rem; white-space: nowrap; transition: color .2s; }
.filter-reset:hover { color: var(--danger); }
.filter-result-count { text-align: center; font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }

/* Barre gamme — compteur + bouton favoris */
.gamme-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem;
}
.gamme-toolbar-count { font-size: .82rem; color: var(--text-muted); }

/* Éléments visibles uniquement sur mobile */
.filter-mobile-bar   { display: none; }
.filter-mobile-favoris { display: none; }
.filter-panel-header { display: none; }
.filter-panel-footer { display: none; }
.filter-groups-wrap  { display: contents; }
.filter-panel-inner  { display: contents; }

/* Range slider budget */
.filter-group--range  { min-width: 240px; }
.price-range-values   { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 700; color: var(--navy); margin-bottom: .9rem; }
.price-range-slider   { position: relative; height: 4px; margin: 10px 9px; }
.range-track          { position: absolute; inset: 0; background: var(--border); border-radius: 2px; }
.range-fill           { position: absolute; inset: 0; background: var(--navy); border-radius: 2px; }
.range-thumb          { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--navy); border: 2px solid var(--white); box-shadow: 0 1px 6px rgba(26,37,77,.3); cursor: grab; z-index: 2; touch-action: none; transition: transform .15s; }
.range-thumb:active   { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); }
.range-input          { display: none; }

/* Catalogue — ordre des éléments dans la carte (display:contents sur .spa-card-topline) */
.spas-grid--large .spa-gamme-tag  { order: 1; }
.spas-grid--large .spa-badge      { order: 2; }
.spas-grid--large .spa-name       { order: 3; }
.spas-grid--large .spa-desc       { order: 4; }
.spas-grid--large .spa-specs      { order: 5; }
.spas-grid--large .spa-card-footer{ order: 6; }

/* Bouton favoris (catalogue) */
.btn-favoris-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s; white-space: nowrap;
}
.btn-favoris-toggle:hover    { border-color: #e5534b; color: #e5534b; }
.btn-favoris-toggle.is-active { border-color: #e5534b; color: #e5534b; background: rgba(229,83,75,.06); }
.btn-favoris-toggle.is-active svg { fill: #e5534b; stroke: #e5534b; }
.favoris-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; border-radius: 99px; background: #e5534b; color: #fff; font-size: .7rem; font-weight: 700; padding: 0 .3rem; }
.favoris-count:empty { display: none; }

/* ============================================================
   16. STEPS
   ============================================================ */
.steps-section { background: #fff; padding: 4rem 0; position: relative; z-index: 2; }
.steps-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  justify-content: center; justify-items: center;
  gap: 0 1.5rem; margin: 4rem auto 0; position: relative;
}
.steps-grid::before { content: ''; position: absolute; top: 1.6rem; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), var(--gold), var(--gold), transparent); opacity: .35; }

.step-item   { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .5rem; position: relative; width: 100%; min-width: 0; max-width: 300px; margin: 0 auto; }
.step-number { font-size: 1rem; font-weight: 600; color: var(--white); background: var(--navy); width: 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; letter-spacing: .08em; margin-bottom: 1.75rem; border: 1px solid var(--gold); flex-shrink: 0; position: relative; z-index: 1; }
.step-body  { flex: 1; }
.step-title { font-family: var(--font-title); font-size: var(--size-h2); font-weight: var(--weight-title); color: var(--navy); margin-bottom: .6rem; line-height: 1.3; }
.step-desc  { font-size: var(--size-paragraph); font-weight: var(--weight-text); color: var(--text-muted); line-height: 1.75; }

/* ============================================================
   17. WHY SECTION
   ============================================================ */
.why-section { background: #fff; padding: 2rem 0; color: var(--text); position: relative; z-index: 1; }
.why-section .section-title { color: var(--navy); }
.why-section .section-desc  { color: var(--text-muted); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.why-item { border-top: 1px solid rgba(205,191,133,.3); padding-top: 2rem;}
.why-item:hover { border-top-color: var(--gold); }
.why-icon { width: 28px; height: 1px; background: var(--gold); margin-bottom: 1.75rem; display: block; font-size: 0; }
.why-item h3 { font-family: var(--font-title); font-size: var(--size-h2); font-weight: var(--weight-title); color: var(--navy); margin-bottom: .75rem; letter-spacing: .02em; }
.why-item p  { font-size: var(--size-p2); font-weight: var(--weight-text); color: var(--text-muted); line-height: 1.85; text-align: justify;}

/* ============================================================
   18. À PROPOS
   ============================================================ */
.apropos-section          { padding: 5rem 0; background: #fff; }

/* ============================================================
   19. PAGE USINE / FABRICATION
   ============================================================ */

/* ── Hero ── */
.usine-hero {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.usine-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 60vh;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.usine-hero-right {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.usine-hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0) 0%, transparent 200%);
  pointer-events: none;
  z-index: 1;
}

.usine-hero-left {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  padding: 4rem 3rem;
  width: 35rem;
  background: transparent;
}
.usine-hero-title {
  font-family: var(--font-title);
  font-size: var(--size-h1);
  font-weight: 800;
  color: var(--bg);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.usine-hero-subtitle {
  font-size: var(--size-paragraph);
  font-weight: 700;
  color: var(--bg);
  line-height: 1.4;
  margin-bottom: 1rem;
}
.usine-hero-divider {
  width: 40px; height: 3px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}
.usine-hero-desc {
  font-size: var(--size-p2);
  color: var(--bg);
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 3rem;
}
.usine-hero-features {
  display: flex; gap: 2rem;
}
.usine-hero-feature {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}
.usine-hero-feature-icon {
  color: var(--bg);
}
.usine-hero-feature span {
  font-size: var(--size-eyebrow); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bg); line-height: 1.3;
}

.usine-hero-right {
  overflow: hidden;
}
.usine-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 70%;
  display: block;
}
.usine-badge {
  position: absolute; bottom: 2rem; right: 2rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}

/* ── Intro ── */
.usine-intro { background: #fff; padding: 5rem 2rem; text-align: center; }
.usine-intro-inner { max-width: 680px; margin: 0 auto; }
.usine-intro-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600; color: var(--navy);
  margin-bottom: 1rem;
}
.usine-intro-divider {
  width: 50px; height: 3px; background: var(--gold);
  margin: 1rem auto 1.5rem;
}
.usine-intro-desc {
  font-size: .95rem; color: var(--text-muted); line-height: 1.75;
}

/* ── Steps ── */
.usine-steps { background: #fff; }
.usine-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 0;
  min-height: 380px;
  border-top: 1px solid var(--border);
}
.usine-step--reverse { direction: rtl; }
.usine-step--reverse > * { direction: ltr; }

.usine-step-img-wrap {
  overflow: hidden;
  border-radius: var(--radius);
}
.usine-step-img-wrap img {
  width: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.usine-step:hover .usine-step-img-wrap img { transform: scale(1.015); }
.usine-step-content {
  padding: 3.5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff;
}
.usine-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--navy); color: #fff;
  font-size: .85rem; font-weight: 800; letter-spacing: .05em;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
}
.usine-step-titre {
  font-family: var(--font-title);
  font-size: 1.2rem; font-weight: 700;
  color: var(--navy); text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.25;
  margin-bottom: 1rem;
}
.usine-step-desc {
  font-size: .88rem; color: var(--text-muted);
  line-height: 1.75; max-width: 480px;
}

/* ── Valeurs ── */
.usine-valeurs {
  background: var(--navy);
  padding: 5rem 2rem;
  position: relative; z-index: 1;
}
.usine-valeurs-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.usine-valeurs-title {
  font-family: var(--font-title);
  font-size: clamp(.95rem, 2vw, 1.3rem);
  font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .12em;
  line-height: 1.4; margin-bottom: .75rem;
}
.usine-valeurs-divider {
  width: 50px; height: 3px; background: var(--gold);
  margin: .75rem auto 3rem;
}
.usine-valeurs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.usine-valeur {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center;
}
.usine-valeur-icon { color: rgba(255,255,255,.7); }
.usine-valeur h4 {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  line-height: 1.3;
}
.usine-valeur p {
  font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .usine-step { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 900px) {
  .usine-hero { grid-template-columns: 1fr; min-height: auto; }
  .usine-hero-right { height: 55vw; }
  .usine-hero-left { padding: 2.5rem 1.5rem; }
  .usine-hero-features { gap: 1.5rem; }
  .usine-step { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; gap: 1.5rem; }
  .usine-step--reverse { direction: ltr; }
  .usine-step-img-wrap { height: 55vw; border-radius: var(--radius); }
  .usine-step-content { padding: 0; }
  .usine-valeurs-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
}
@media (max-width: 480px) {
  .usine-hero-features { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .usine-valeurs-grid { grid-template-columns: 1fr 1fr; }
  .usine-breadcrumb { padding: 1rem 1.5rem; }
}
/* ── À propos — nouveau design ── */


.ap-vision { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--navy); }
.ap-vision-overlay { position: absolute; inset: 0; background: url('../img/usine/step-5.webp') center/cover no-repeat; opacity: .2; }
.ap-vision-inner { position: relative; z-index: 1; text-align: center; max-width: 700px; padding: 4rem 2rem; }
.ap-vision-num { font-family: var(--font-title); font-size: .72rem; font-weight: 800; letter-spacing: .2em; color: var(--gold); margin-bottom: .75rem; }
.ap-vision-titre { font-family: var(--font-title); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 700; color: #fff; margin-bottom: 1.25rem; }
.ap-vision-desc { font-size: .95rem; color: rgba(255,255,255,.7); line-height: 1.8; margin-bottom: 2rem; }
.ap-vision-quote { font-family: var(--font-title); font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 300; font-style: italic; color: #fff; line-height: 1.6; border-left: none; padding: 0; position: relative; }
.ap-vision-quote::before { content: '\201C'; font-size: 3rem; color: var(--gold); line-height: 0; vertical-align: -.5em; margin-right: .25rem; }
.ap-vision-quote::after  { content: '\201D'; font-size: 3rem; color: var(--gold); line-height: 0; vertical-align: -.5em; margin-left: .25rem; }

.ap-stats { background: var(--navy); padding: 3.5rem 2rem; }
.ap-stats-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 2rem; text-align: center; }
.ap-stat-icon { color: var(--gold); display: flex; justify-content: center; margin-bottom: .75rem; }
.ap-stat-num { font-family: var(--font-title); font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: .25rem; }
.ap-stat-label { font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.ap-stat-desc { font-size: .72rem; color: rgba(255,255,255,.5); line-height: 1.5; }

@media (max-width: 900px) {
  .ap-stats-inner { grid-template-columns: repeat(2,1fr); gap: 2rem 1rem; }
  .ap-stats-inner .ap-stat:last-child { grid-column: 1/-1; }
}

/* ============================================================
   19. CTA SECTION
   ============================================================ */
.cta-section   { background: #000; color: var(--white); padding: 4rem 0; text-align: center; position: relative; z-index: 1; }
.cta-inner     { max-width: 650px; margin: 0 auto; padding: 0 2rem; }
.cta-inner h2  { font-family: var(--font-title); font-size: var(--size-h1); font-weight: var(--weight-title); color: var(--white); margin-bottom: 1rem;}
.cta-inner p   { font-size: var(--size-paragraph); font-weight: var(--weight-light-text); color: rgba(255,255,255,.5); margin-bottom: 2.5rem; line-height: 1.8; }
.cta-section .btn-white       { background: transparent; color: var(--bg); border: 1px solid var(--gold); border-radius: 0; padding: 1rem 3rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; transition: background .35s, color .3s; }
.cta-section .btn-white:hover { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 20%, transparent) 0%, color-mix(in srgb, var(--gold) 50%, transparent) 100%); color: #fff; }

/* ============================================================
   20. PANIER & CHECKOUT
   ============================================================ */
.panier-section { padding: 3rem 0 6rem; }
.panier-section .page-title { color: var(--navy); }

/* Stepper */
.checkout-stepper    { display: flex; align-items: center; margin-bottom: 2.5rem; max-width: 380px; }
.checkout-step       { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 0 0 auto; }
.step-num            { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; background: var(--border); color: var(--text-muted); transition: background .3s, color .3s; }
.checkout-step.is-active .step-num,
.checkout-step.is-done .step-num   { background: var(--navy); color: var(--white); }
.step-label                        { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color .3s; }
.checkout-step.is-active .step-label { color: var(--navy); }
.checkout-step-line                { flex: 1; height: 2px; background: var(--border); margin: 0 .6rem; margin-bottom: 1.3rem; transition: background .3s; }
.checkout-step-line.is-done        { background: var(--navy); }

.step1-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }

.step2-recap        { display: flex; align-items: center; gap: .85rem; background: var(--gold-light); border: 1px solid var(--gold); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: .88rem; }
.step2-recap span   { flex: 1; color: var(--text-muted); }
.step2-recap strong { color: var(--navy); font-family: var(--font-title); font-size: 1.1rem; }

#checkoutStep1, #checkoutStep2 { animation: stepFade .25s ease; }
@keyframes stepFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panier-layout     { display: grid; grid-template-columns: 1fr 420px; gap: 3rem; align-items: start; }
.panier-titre      { font-family: var(--font-title); font-size: 1.4rem; color: var(--navy); font-weight: var(--weight-title); margin-bottom: 1.25rem; }
.panier-subtitle   { font-family: var(--font-title); font-size: var(--size-h3); color: var(--text-muted); margin-bottom: 1.5rem; font-weight: var(--weight-title); }
.panier-item       { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.panier-item-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.panier-item-name  { font-family: var(--font-title); font-size: 1.1rem; color: var(--navy); font-weight: 500; }
.panier-item-opts  { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; font-size: .83rem; margin-bottom: .75rem; }
.panier-item-opts dt { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.panier-item-opts dd { color: var(--text); }
.panier-item-prix  { font-family: var(--font-title); font-size: 1.1rem; color: var(--navy); text-align: right; font-weight: 500; }
.panier-total      { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; background: var(--gold-light); border: 1px solid var(--gold); border-radius: var(--radius); margin-top: 1.5rem; }
.panier-total strong { font-family: var(--font-title); font-size: 1.1rem; color: var(--navy); }
.panier-notice     { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; }
.empty-cart        { text-align: center; padding: 4rem 1rem; color: var(--text-muted); }
.empty-cart p      { font-size: 1.1rem; margin-bottom: 1.5rem; }

.btn-remove        { background: none; border: none; font-size: .78rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.btn-remove:hover  { color: var(--danger); }

/* Checkout card */
.checkout-col    { position: sticky; top: 90px; }
.checkout-card   { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.checkout-title  { font-family: var(--font-title); font-size: var(--size-h3); color: var(--navy); font-weight: 500; margin-bottom: .35rem; }
.checkout-desc   { font-size: .88rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; }

/* Formulaire */
.form-group { margin-bottom: 1.1rem; position: relative; }
.form-group label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.form-group label span { color: var(--danger); }
.form-group input,
.form-group textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .92rem; color: var(--text); background: var(--bg); transition: border-color .2s, box-shadow .2s; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,37,77,.1); }
.form-group input.invalid  { border-color: var(--danger); }

.form-group input.is-valid,
.form-group textarea.is-valid   { border-color: var(--success); box-shadow: 0 0 0 3px rgba(26,92,58,.08); padding-right: 2.4rem; }
.form-group input.is-invalid,
.form-group textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.08); padding-right: 2.4rem; }

.form-field-icon         { position: absolute; right: .75rem; bottom: .72rem; pointer-events: none; font-size: .85rem; line-height: 1; }
.form-field-icon.icon-valid   { color: var(--success); }
.form-field-icon.icon-invalid { color: var(--danger); }

.field-error-msg          { font-size: .71rem; color: var(--danger); margin-top: .22rem; padding-left: .15rem; display: none; }
.field-error-msg.is-visible { display: block; }

/* Autocomplete adresse */
.adresse-dropdown  { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--bg); border: 1.5px solid var(--navy); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: 0 8px 24px rgba(26,37,77,.12); list-style: none; margin: 0; padding: .25rem 0; max-height: 220px; overflow-y: auto; }
.adresse-option    { padding: .6rem .9rem; font-size: .88rem; color: var(--text); cursor: pointer; line-height: 1.4; transition: background .12s; }
.adresse-option:hover,
.adresse-option.is-active { background: var(--navy-light); color: var(--navy); }

.alert         { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .87rem; margin-bottom: 1.25rem; }
.alert-error   { background: #FDF0EF; color: var(--danger); }
.alert-success { background: #EFF8F2; color: var(--success, #1A6B3A); border: 1px solid #B6DEC4; }
.form-legal    { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: .75rem; line-height: 1.5; }
.form-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.form-group select { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .92rem; color: var(--text); background: var(--bg); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5A6E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.form-group select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,37,77,.1); }

/* ── Page SAV ── */
.sav-cards-section { display: flex; flex-direction: column; justify-content: center; }
.sav-contact-section { margin-bottom: 3rem; }
.sav-cards    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .sav-cards { grid-template-columns: 1fr; } .sav-cards-section { padding-top: 1rem; } }
.sav-card     { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; }
.sav-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-light, #ECEEF6); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; }
.sav-card-titre { font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.sav-card-desc  { font-size: .87rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ============================================================
   21. PAGE CONFIRMATION
   ============================================================ */
.confirmation-section    { padding: 5rem 0 7rem; }
.confirmation-inner      { max-width: 640px; margin: 0 auto; padding: 0 2rem; text-align: center; }
.confirmation-icon       { width: 80px; height: 80px; border-radius: 50%; background: var(--gold-light); color: var(--gold-dark); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.75rem; }
.confirmation-title      { font-family: var(--font-title); font-size: var(--size-h3); color: var(--navy); font-weight: var(--weight-title); margin-bottom: .75rem; }
.confirmation-desc       { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2.5rem; }
.confirmation-steps      { text-align: left; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
.conf-step               { display: flex; gap: 1rem; align-items: flex-start; }
.conf-step-num           { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.conf-step strong        { display: block; font-weight: 700; margin-bottom: .2rem; color: var(--text); }
.conf-step p             { font-size: .87rem; color: var(--text-muted); }
.confirmation-actions    { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ============================================================
   22. COMPARATEUR
   ============================================================ */
.btn-compare { width: 100%; margin-top: .6rem; padding: .45rem 1rem; background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-family: inherit; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.spa-card-actions .btn-compare { width: auto; margin-top: 0; flex-shrink: 0; }
.btn-compare:hover         { border-color: var(--navy); color: var(--navy); background: var(--navy-light); }
.btn-compare.active        { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-light); }
.btn-compare-icon          { font-size: 1rem; line-height: 1; }

/* Barre flottante comparateur */
.compare-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--navy); border-top: 2px solid var(--gold); box-shadow: 0 -4px 24px rgba(0,0,0,.25); transform: translateY(100%); transition: transform .35s cubic-bezier(.25,.46,.45,.94); }
.compare-bar:not([hidden]) { transform: translateY(0); display: block; }
.compare-bar-inner   { max-width: var(--max-w); margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.compare-bar-slots   { display: flex; gap: .75rem; flex: 1; flex-wrap: wrap; }
.compare-slot        { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(205,191,133,.3); border-radius: var(--radius-sm); padding: .4rem .75rem; font-size: .8rem; color: var(--white); }
.compare-slot-remove { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; margin-left: .25rem; }
.compare-bar-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.compare-bar-count   { font-size: .78rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.compare-bar .btn-outline       { border-color: rgba(255,255,255,.3); color: var(--white); }
.compare-bar .btn-outline:hover { background: rgba(255,255,255,.1); }
.compare-bar-toggle  { display: none; }

/* Page comparaison */
.compare-section     { padding: 3rem 0 6rem; }
.compare-table-wrap  { width: 100%; overflow-x: auto; }
.compare-table       { display: grid; gap: 0; min-width: 620px; }
.compare-header-row,
.compare-row         { display: grid; grid-template-columns: 180px repeat(var(--cols, 2), 1fr); border-bottom: 1px solid var(--border); }
.compare-header-row  { background: var(--bg-card); }
.compare-row:nth-child(even)  { background: var(--bg); }
.compare-row:nth-child(odd)   { background: var(--bg-card); }
.compare-row--section         { background: var(--navy-light) !important; }
.compare-label-col   { padding: 1rem 1.25rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; border-right: 1px solid var(--border); }
.compare-spa-col     { padding: 1.25rem 1.5rem; text-align: center; border-right: 1px solid var(--border); font-size: .92rem; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.compare-spa-col:last-child { border-right: none; }

.compare-spa-img  { width: 100%; height: 200px; overflow: hidden; border-radius: var(--radius); margin: 0 auto 1rem; background: var(--navy-light); }
.compare-spa-img img { width: 100%; height: 100%; object-fit: cover; }
.compare-spa-name { font-family: var(--font-title); font-size: 1.05rem; color: var(--navy); font-weight: 500; margin-bottom: .35rem; }
.compare-spa-prix { font-family: var(--font-title); font-size: 1.05rem; color: var(--black); font-weight: 500; margin-top: .25rem; }

.compare-carac       { font-size: .8rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--border); }
.compare-carac:last-child { border-bottom: none; }
.compare-carac-label { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.compare-carac-val   { font-weight: 700; text-align: right; }
.compare-carac.missing .compare-carac-val { color: var(--text-light); opacity: .6; }

.compare-features-list  { width: 100%; align-self: stretch; text-align: left; }
.compare-feature        { font-size: .82rem; display: flex; align-items: baseline; gap: 3rem; padding: .3rem 0; border-bottom: 1px dashed var(--border); width: 100%; justify-content: flex-start; }
.compare-feature:last-child { border-bottom: none; }
.compare-feature-icon   { font-weight: 700; flex-shrink: 0; }
.compare-feature-label  { text-align: left; flex: 1; }
.compare-feature.has .compare-feature-icon       { color: var(--gold-dark); }
.compare-feature.missing .compare-feature-icon   { color: var(--text-light); opacity: .5; }
.compare-feature.missing .compare-feature-label  { color: var(--text-light); opacity: .6; }

/* ============================================================
   23. ANIMATIONS AU SCROLL
   ============================================================ */
@keyframes heroCardIn { from { opacity: 0; transform: translateY(-20px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes dotPulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }
@keyframes lbFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes stepFade   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes btnSpin    { to { transform: rotate(360deg); } }

[data-animate]         { opacity: 0; transform: translateY(16px); transition: opacity .1s ease, transform .1s ease; }
[data-animate].in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-card   { animation: none; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   24. FOOTER
   ============================================================ */
.site-footer { background: var(--black); color: rgba(255,255,255,.65); border-top: 3px solid var(--gold); }
.page-home .site-footer { position: relative; z-index: 1; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 3rem; align-items: start; }
.footer-logo    { font-family: var(--font-title); font-size: 1.5rem; color: var(--white); letter-spacing: .1em; font-weight: 600; }
.footer-logo-img { height: 48px; width: auto; display: block; }
.footer-tagline { font-size: .8rem; opacity: .5; line-height: 1.6; }
.footer-brand   { display: flex; flex-direction: column; align-items: center; width: max-content; }
.footer-col-title { font-size: var(--size-caract); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.footer-nav     { display: flex; flex-direction: column; gap: .55rem; }
.footer-nav a   { font-size: .83rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer-nav a:hover { color: var(--white); }
.footer-contact { display: flex; flex-direction: column; gap: .65rem; }
.footer-contact-item { display: flex; align-items: center; gap: .6rem; }
.footer-contact-icon { font-size: .9rem; flex-shrink: 0; margin-top: .1rem; }
.footer-phone   { font-size: .88rem; color: var(--gold); font-weight: 700; }
.footer-phone:hover { color: var(--white); }
.footer-address { font-size: .82rem; opacity: .5; line-height: 1.5; }
.footer-bottom  { border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding: 1.25rem 2rem; font-size: .75rem; opacity: .35; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.footer-legal-links   { display: flex; gap: 1.5rem; }
.footer-legal-links a { color: inherit; opacity: .7; }
.footer-legal-links a:hover { opacity: 1; text-decoration: underline; }

/* ============================================================
   25. GALERIE — CAROUSELS
   ============================================================ */

/* Section carousel */
.gc-section { padding: 3.5rem 0; border-bottom: 1px solid var(--border); }
.gc-section--dark { background: var(--navy); border-bottom: none; padding: 4rem 0; }

.gc-header {
  margin-bottom: 1.75rem;
}
.gc-titre {
  font-family: var(--font-title); font-size: var(--size-h3);
  font-weight: var(--weight-title); color: var(--navy);
  margin-top: .25rem;
}

/* Track scrollable */
.gc-track-wrap {
  position: relative;
  display: flex; align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.gc-track {
  flex: 1; display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: .5rem 0;
}
.gc-track::-webkit-scrollbar { display: none; }

/* Flèches latérales */
.gc-arrow {
  flex-shrink: 0;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--white); color: var(--navy);
  font-size: 1.5rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; z-index: 2;
  margin: 0 .75rem;
}
.gc-arrow:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.gc-arrow--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.gc-arrow--light:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }

/* Slides image */
.gc-slide {
  flex: 0 0 calc((100% - 2 * 1rem) / 3);
  height: 300px;
  border-radius: var(--radius); overflow: hidden;
  position: relative; cursor: pointer;
  border: none; padding: 0; background: var(--navy-light);
  scroll-snap-align: start;
  transition: transform .3s;
}
.gc-slide:hover { transform: translateY(-3px); }
.gc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gc-slide:hover img { transform: scale(1.05); }
.gc-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%);
  display: flex; align-items: flex-end; justify-content: space-between; padding: 1rem 1.1rem;
  opacity: 0; transition: opacity .25s;
}
.gc-slide:hover .gc-slide-overlay { opacity: 1; }
.gc-slide-overlay span {
  font-size: .65rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}
.gc-slide-arrow { font-size: 1.1rem; color: #fff; }

/* Cartes avis */
.gc-avis-card {
  flex: 0 0 calc(40% - .4rem); scroll-snap-align: start;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 2.25rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  align-items: center; text-align: center;
}
.gc-avis-stars { color: var(--gold); font-size: 1rem; letter-spacing: .1em; }
.gc-avis-texte {
  font-size: .9rem; color: rgba(255,255,255,.8);
  line-height: 1.75; font-style: italic; flex: 1;
}
.gc-avis-footer { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); width: 100%; align-items: center; }
.gc-avis-nom  { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: #fff; text-transform: uppercase; }
.gc-avis-lieu { font-size: .72rem; color: rgba(255,255,255,.45); }

.galerie-section { padding: 3rem 0 5rem; }

/* Toggle layouts */
.galerie-layouts {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.galerie-layouts-label { font-size: var(--size-caract); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; }
.galerie-layout-btn {
  padding: .35rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--size-caract); font-weight: 700; letter-spacing: .06em;
  background: var(--white); color: var(--text-muted); cursor: pointer; transition: all .2s;
}
.galerie-layout-btn:hover  { border-color: var(--navy); color: var(--navy); }
.galerie-layout-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.galerie-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2.5rem;
}
.galerie-filter-btn {
  padding: .4rem 1.1rem;
  border: 1.5px solid var(--border); border-radius: 999px;
  font-size: var(--size-caract); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--white); color: var(--text-muted);
  cursor: pointer; transition: all .2s;
}
.galerie-filter-btn:hover  { border-color: var(--navy); color: var(--navy); }
.galerie-filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ── Layout 1 : Grille uniforme ── */
.galerie-grid--grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.galerie-grid--grille .galerie-item { aspect-ratio: 1 / 1; }

/* ── Layout 2 : Masonry (colonnes CSS) ── */
.galerie-grid--masonry {
  columns: 4; column-gap: .75rem;
}
.galerie-grid--masonry .galerie-item {
  display: inline-block; width: 100%; margin-bottom: .75rem;
  aspect-ratio: unset; break-inside: avoid;
}
.galerie-grid--masonry .galerie-item img { height: auto; }
.galerie-grid--masonry .galerie-item:nth-child(3n+1) { aspect-ratio: 3/4; }
.galerie-grid--masonry .galerie-item:nth-child(3n+2) { aspect-ratio: 4/3; }
.galerie-grid--masonry .galerie-item:nth-child(3n)   { aspect-ratio: 1/1; }

/* ── Layout 3 : Magazine (grandes + petites) ── */
.galerie-grid--magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: .75rem;
}
.galerie-grid--magazine .galerie-item { aspect-ratio: unset; }
.galerie-grid--magazine .galerie-item:nth-child(7n+1) { grid-column: span 3; grid-row: span 2; }
.galerie-grid--magazine .galerie-item:nth-child(7n+2) { grid-column: span 2; grid-row: span 1; }
.galerie-grid--magazine .galerie-item:nth-child(7n+3) { grid-column: span 1; grid-row: span 1; }
.galerie-grid--magazine .galerie-item:nth-child(7n+4) { grid-column: span 1; grid-row: span 1; }
.galerie-grid--magazine .galerie-item:nth-child(7n+5) { grid-column: span 2; grid-row: span 1; }
.galerie-grid--magazine .galerie-item:nth-child(7n+6) { grid-column: span 3; grid-row: span 2; }
.galerie-grid--magazine .galerie-item:nth-child(7n)   { grid-column: span 3; grid-row: span 1; }

/* ── Layout 4 : Grand format (3 col, grandes hauteurs) ── */
.galerie-grid--large {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.galerie-grid--large .galerie-item { aspect-ratio: 3/4; }
.galerie-grid--large .galerie-item:nth-child(4n+1) { aspect-ratio: 16/9; grid-column: span 2; }

.galerie-grid { transition: opacity .2s; }

.galerie-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--navy-light);
  cursor: pointer; border: none; padding: 0;
  transition: transform .3s ease, opacity .25s;
}
.galerie-item--hidden { display: none; }
.galerie-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.galerie-item:hover img { transform: scale(1.06); }
.galerie-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 50%);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: .75rem 1rem;
  opacity: 0; transition: opacity .25s;
}
.galerie-item:hover .galerie-item-overlay { opacity: 1; }
.galerie-item-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
}
.galerie-item-zoom { color: rgba(255,255,255,.8); font-size: 1.1rem; }

/* Lightbox */
.galerie-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.galerie-lightbox[hidden] { display: none; }
.galerie-lb-img-wrap {
  max-width: 90vw; max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
}
.galerie-lb-img-wrap img {
  max-width: 100%; max-height: 85vh;
  object-fit: contain; border-radius: var(--radius-sm);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.galerie-lb-close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none; color: #fff;
  font-size: 1.5rem; cursor: pointer; opacity: .7; transition: opacity .2s;
}
.galerie-lb-close:hover { opacity: 1; }
.galerie-lb-prev, .galerie-lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: none; color: #fff;
  font-size: 2.5rem; width: 3rem; height: 5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background .2s; backdrop-filter: blur(4px);
}
.galerie-lb-prev { left: 1rem; }
.galerie-lb-next { right: 1rem; }
.galerie-lb-prev:hover, .galerie-lb-next:hover { background: rgba(255,255,255,.2); }
.galerie-lb-label {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .galerie-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .galerie-grid { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
}

/* ============================================================
   25. PAGES LÉGALES
   ============================================================ */
.legal-section   { padding: 3rem 0 5rem; }
.legal-content h2[id] { scroll-margin-top: 10rem; }
.legal-block     { margin-bottom: 2.5rem; }
.legal-block h2  { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.legal-block p   { font-size: .95rem; color: var(--text-muted); line-height: 1.7; margin-bottom: .6rem; }
.legal-block ul  { padding-left: 1.4rem; color: var(--text-muted); font-size: .95rem; line-height: 1.8; }
.legal-block a   { color: var(--navy); }
.legal-update    { font-size: .8rem; color: var(--text-muted); opacity: .6; margin-top: 3rem; }

/* ============================================================
   26. QUIZ
   ============================================================ */
.page-hero--quiz            { min-height: 36vh; display: flex; align-items: flex-end; }
.page-hero--quiz .page-hero-inner    { padding-bottom: 3rem; }
.page-hero--quiz .page-hero-subtitle { color: rgba(255,255,255,.65); font-size: 1.05rem; font-weight: 300; margin-top: .75rem; max-width: 480px; }

/* Bannière quiz (accueil) */
.quiz-banner       { background: var(--navy); padding: .9rem 1.5rem; position: relative; z-index: 1; }
.quiz-banner-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.quiz-banner-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: dotPulse 2.5s ease-in-out infinite; }
.quiz-banner-text  { font-size: var(--size-caract); color: rgba(255,255,255,.75); margin: 0; }
.quiz-banner-btn   { font-size: var(--size-paragraph); font-weight: var(--weight-bold-text); color: var(--bg); letter-spacing: .03em; transition: color .2s; white-space: nowrap; }
.quiz-banner-btn:hover { color: var(--text-light); }

/* Lien quiz dans la nav */
.nav-link--quiz { display: inline-flex; align-items: center; gap: .4rem; }
.nav-quiz-dot   { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: dotPulse 2.5s ease-in-out infinite; }

.quiz-section   { background: #f8f7f4; padding: 4rem 0 6rem; }
.quiz-wrap      { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }

/* Progression */
.quiz-progress       { margin-bottom: 3.5rem; }
.quiz-progress-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: .75rem; }
.quiz-progress-step  { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-size: .8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s; flex-shrink: 0; position: relative; z-index: 1; }
.quiz-progress-step.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.quiz-progress-step.done   { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.quiz-progress-line  { flex: 1; height: 1px; background: var(--gold); opacity: .3; max-width: 60px; }
.quiz-progress-bar   { height: 2px; background: rgba(0,0,0,.08); border-radius: 99px; margin: 0 auto; max-width: 400px; overflow: hidden; }
.quiz-progress-fill  { height: 100%; background: var(--gold); border-radius: 99px; transition: width .4s ease; }

/* Étape quiz */
.quiz-step         { opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; }
.quiz-step.active  { opacity: 1; transform: translateY(0); }
.quiz-step-label   { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; }
.quiz-question     { font-family: var(--font-title); font-size: var(--size-h2); font-weight: var(--weight-bold-title); color: var(--navy); margin-bottom: 2rem; }

/* Options quiz */
.quiz-options       { display: grid; gap: 1rem; }
.quiz-options--2col { grid-template-columns: repeat(2, 1fr); }
.quiz-option {
  background: #fff; border: 1.5px solid rgba(0,0,0,.1); border-radius: 6px;
  padding: 1.5rem 1.25rem; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative; overflow: hidden;
}
.quiz-option::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(193,154,107,.06) 0%, transparent 60%); opacity: 0; transition: opacity .2s; }
.quiz-option:hover   { border-color: var(--gold); box-shadow: 0 4px 20px rgba(0,0,0,.07); transform: translateY(-2px); }
.quiz-option:hover::before  { opacity: 1; }
.quiz-option.selected       { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,154,107,.25), 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.quiz-option.selected::before { opacity: 1; }
.quiz-option.selected::after  { content: '✓'; position: absolute; top: .75rem; right: .9rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--gold); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1.4rem; }

.quiz-option-icon  { width: 2.4rem; height: 2.4rem; color: var(--gold); display: block; margin-bottom: .2rem; }
.quiz-option-icon svg { width: 100%; height: 100%; }
.quiz-option-price { font-family: var(--font-title); font-size: 1.25rem; font-weight: 400; color: var(--gold); letter-spacing: .01em; }
.quiz-option-label { font-size: 1rem; font-weight: 600; color: var(--navy); }
.quiz-option-sub   { font-size: .83rem; color: var(--text-muted); font-weight: 400; }

/* Loader quiz */
.quiz-loader       { min-height: 280px; display: flex; align-items: center; justify-content: center; }
.quiz-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; color: var(--navy); font-size: .95rem; }
.quiz-spinner      { width: 2.5rem; height: 2.5rem; border: 2px solid rgba(193,154,107,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }

/* Résultats quiz */
.quiz-results-header { text-align: center; margin-bottom: 2.5rem; }
.quiz-results-title  { font-family: var(--font-title); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 300; color: var(--navy); margin-bottom: .5rem; }
.quiz-results-sub    { color: var(--text-muted); font-size: .93rem; margin-top: .5rem; }
.quiz-spas-grid      { margin-bottom: 2.5rem; grid-template-columns: repeat(2, 1fr); }
.quiz-results-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.quiz-spas-grid .spa-specs         { justify-content: center; }
.quiz-spas-grid .spa-card-footer   { grid-column: 1 / -1; justify-content: space-between; }
.quiz-spas-grid .spa-card-footer .btn { margin-left: auto; }
.quiz-name-line                    { grid-column: 1 / -1; position: relative; display: flex; align-items: center; min-height: 2rem; }
.quiz-name-line .spa-mic-logo      { position: relative; z-index: 1; flex-shrink: 0; margin: 0; }
.quiz-name-line .spa-name          { position: absolute; left: 0; right: 0; text-align: center; margin: 0; pointer-events: none; }
.quiz-name-line .spa-name a        { pointer-events: auto; }

/* ============================================================
   27b. FAQ
   ============================================================ */

.faq-section { padding: 4rem 0 5rem; }

.faq-category { margin-bottom: 3rem; }
.faq-category:last-child { margin-bottom: 0; }

.faq-category-titre {
  font-family: var(--font-title);
  font-size: clamp(.8rem, 1.5vw, .95rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  font-weight: 500;
  color: var(--navy);
  user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold-dark);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.faq-item[open] > .faq-question::after {
  transform: rotate(45deg);
}

.faq-reponse {
  padding: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: var(--size-paragraph);
  line-height: 1.7;
  max-width: 720px;
}

.faq-cta {
  margin-top: 4rem;
  padding: 2.5rem;
  background: var(--navy-light);
  border-radius: var(--radius-lg);
  text-align: center;
}
.faq-cta-titre {
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

/* ============================================================
   27. INTERACTIONS & MICRO-ANIMATIONS
   ============================================================ */

/* Submit — état chargement */
.btn-loading { opacity: .75; pointer-events: none; }
.btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: btnSpin .7s linear infinite; vertical-align: middle; margin-left: .5rem; }

/* Focus visible — accessibilité */
:focus-visible { outline: 2px solid var(--gold-dark) !important; outline-offset: 3px !important; border-radius: 3px; }

/* Feedback tactile boutons */
.btn:active:not(:disabled):not(.btn-loading) { transform: scale(.96); }

/* Lazy-load image fade-in */
.spa-card-img img { opacity: 0; transition: opacity .4s ease, transform .35s; }
.spa-card-img img.is-loaded { opacity: 1; }

/* ============================================================
   28. MEDIA QUERIES
   ============================================================ */

/* ── Desktop : tailles de la barre sticky (> 900px) ─────────── */
@media (min-width: 901px) {
  .sticky-slot        { font-size: .82rem; padding: .18rem .7rem; }
  .sticky-config-name { font-size: .95rem; }
  .sticky-config-prix { font-size: 1.15rem; }
  .btn-sm             { padding: .5rem 1.2rem; font-size: .88rem; }
}

/* ── Desktop catalogue : grille carte 1 col centrée (> 600px) ── */
@media (min-width: 601px) {
  .spas-grid--large .spa-card-body { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto auto; align-items: center; }
  .spas-grid--large .spa-gamme-tag { grid-column: 1; grid-row: 1; margin: 0; justify-self: center; }
  .spas-grid--large .spa-name      { grid-column: 1; grid-row: 2; font-size: 1.25rem; margin: 0; justify-self: center; }
  .spas-grid--large .spa-badge     { grid-column: 1; grid-row: 3; width: auto; margin: .4rem 0 0; }
  .spas-grid--large .spa-desc      { grid-column: 1; grid-row: 4; margin-top: .5rem; }
  .spas-grid--large .spa-specs     { grid-column: 1; grid-row: 5; justify-content: center; margin-bottom: .75rem; }
  .spas-grid--large .spa-card-footer { grid-column: 1; grid-row: 6; align-items: center; gap: 1rem; }
  .spas-grid--large .spa-price     { margin-left: 1rem; }
  .spas-grid--large .spa-card-actions { flex-direction: column; align-items: stretch; gap: .4rem; }
}

/* ── Tablette / petit desktop (≤ 1024px) ───────────────────── */
@media (max-width: 1024px) {
  .header-inner { padding: 0 1rem; gap: .5rem;}
  .logo-img     { height: 38px; }
  .logo-tagline { font-size: .44rem; }
  .gamme-item    { grid-template-columns: 1fr 320px; }
  .gamme-item-img { height: 270px; }
  .panier-layout { grid-template-columns: 1fr 340px; gap: 2rem; }
  .compare-spa-img { height: 200px; }
  .steps-grid    { gap: 0 1rem; }
  .step-item     { min-width: 0; padding: 0 .25rem; }
  .nav-phone     { display: none; }
  .why-grid      { grid-template-columns: repeat(2, 1fr); gap: 3rem; }

  /* Carousel horizontal — vedettes + similaires */
  .featured-section .spas-grid,
  .similaires-section .spas-grid {
    display: flex; flex-direction: row;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; gap: 1rem;
    margin: 0 -2rem; padding: 0 2rem 1rem;
    scroll-padding-left: 1rem;
  }
  .featured-section .spas-grid::-webkit-scrollbar,
  .similaires-section .spas-grid::-webkit-scrollbar { display: none; }
  .featured-section .spas-grid .spa-card,
  .similaires-section .spas-grid .spa-card { flex: 0 0 44%; scroll-snap-align: start; min-width: 240px; max-width: 320px; }
  .featured-section .spas-grid .spa-card:nth-child(4) { display: flex; }
}

/* ── Tablette (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Navigation */
  .main-nav, .header-divider, .nav-phone { display: none; }
  .lang-switcher { order: 1; margin-left: auto; }
  .nav-toggle    { display: flex; order: 1; margin-left: 1rem; }
  .cart-btn      { order: 2; padding: 8px 10px; }
  .cart-btn span:not(.cart-badge) { display: none; }

  /* Hero */
  .hero-card  { max-width: 100%; }
  .hero-inner { padding: 0 2rem 5rem; }

  /* Steps */
  .steps-grid         { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
  .steps-grid::before { left: 15%; right: 15%; }

  /* Grilles */
  .spas-grid,
  .spas-grid--large   { grid-template-columns: repeat(2, 1fr); }

  /* Gammes */
  .gamme-item     { grid-template-columns: 1fr 240px; }
  .gamme-item-img { height: 230px; margin-right: 1rem; }

  /* Page produit */
  .product-layout         { grid-template-columns: 1fr; gap: 2rem; }
  .product-specs-pair     { display: block; }
  .product-carac          { width: 100%; max-width: 100%; }
  .product-viewer-options { grid-column: 1; grid-template-columns: 1fr; }
  .product-price-section  { grid-column: 1; }
  .product-viewer-wrap::before { display: none; } /* nav-mask inutile sur mobile */

  /* Viewer compact (plein-largeur en sticky) */
  .product-viewer-wrap.viewer-compact {
    margin-left: -2rem; width: calc(100% + 4.5rem);
    top: 3.5rem; background: var(--bg);
    padding: .3rem .5rem .5rem;
    border-radius: 0 0 var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius));
     z-index: 50;
  }
  .product-viewer-wrap.viewer-compact .product-viewer-3d { aspect-ratio: 4/3; max-width: 96%; margin: 0 auto; }
  .product-viewer-wrap.viewer-compact .product-thumbnails { justify-content: center; margin-top: .5rem; }

  /* Panier */
  .panier-layout { grid-template-columns: 1fr; gap: 2rem; }
  .checkout-col  { position: static; }

  /* Footer */
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* À propos */
  .apropos-histoire    { grid-template-columns: 1fr; gap: 2.5rem; }
  .apropos-header      { position: static; }
  .apropos-valeurs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sections brand / signature */
  .signature-inner { grid-template-columns: 1fr; gap: 3rem; }
  .signature-visual { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 2.5rem; flex-direction: row; flex-wrap: wrap; }
  .brand-inner     { grid-template-columns: 1fr; gap: 3rem; }

  /* Stats */
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item   { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(2n)        { border-right: none; }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── Mobile (≤ 600px) ───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Variables typo */
  :root {
    --size-h1:        clamp(1.6rem, 7vw, 2.2rem);
    --size-h2:        clamp(.9rem, 3.5vw, 1.1rem);
    --size-h3:        clamp(1.1rem, 4.5vw, 1.5rem);
    --size-paragraph: clamp(.85rem, 3.5vw, 1rem);
  }

  /* Header */
  .header-inner                          { padding: 0 1rem; gap: .5rem; }
  .nav-toggle                            { margin-left: .5rem; }
  .logo-img                              { height: 52px; }
  .logo-tagline                          { font-size: .38rem; }
  .site-header.is-scrolled .logo-img     { height: 44px; }

  /* Sections */
  .section-inner          { padding: 0 .9rem; }
  .featured-section,
  .catalogue-section      { padding: 3.5rem 0; }

  /* ── Filtres catalogue : barre + panneau drawer ─────────── */

  /* La barre filtre sur desktop → padding 0 sur mobile (le filter-mobile-bar gère l'espace) */
  .filters-bar { padding: 0; }

  /* Barre mobile : toggle + favoris + compteur */
  .filter-mobile-bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .9rem;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
  }
  .filter-mobile-favoris { display: inline-flex; }
  .filter-mobile-count   { margin-left: auto; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

  /* Bouton "Filtres" */
  .filter-toggle-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg);
    font-size: .82rem; font-weight: 600; color: var(--navy);
    cursor: pointer; transition: border-color .2s;
  }
  .filter-active-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem; border-radius: 99px;
    background: var(--navy); color: #fff; font-size: .62rem; font-weight: 700;
  }

  /* Panneau overlay fixe */
  .filters-form {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end;
    visibility: hidden; opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  .filters-form.is-open { visibility: visible; opacity: 1; }

  /* Carte panneau (slide up) */
  .filter-panel-inner {
    display: flex; flex-direction: column;
    width: 100%; max-height: 85vh;
    background: var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .filters-form.is-open .filter-panel-inner { transform: translateY(0); }

  /* En-tête du panneau */
  .filter-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .filter-panel-title { font-size: .95rem; font-weight: 700; color: var(--navy); }
  .filter-panel-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem; }

  /* Groupes de filtres — colonne scrollable */
  .filter-groups-wrap {
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.25rem; overflow-y: auto; flex: 1;
  }

  /* Pied du panneau */
  .filter-panel-footer { display: block; padding: 1rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; }
  .filter-panel-apply  { width: 100%; }

  /* Cacher le bouton favoris dans le dropdown (il est déjà dans filter-mobile-bar) */
  .filters-form .filter-group--favoris { display: none; }

  /* Catalogue : 1 carte par ligne sur mobile */
  .spas-grid--large { grid-template-columns: 1fr; gap: .75rem; }

  /* Catalogue mobile : flex colonne centré (remplace le grid 780px) */
  .spas-grid--large .spa-card-body    { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .75rem; gap: .3rem; }
  .spas-grid--large .spa-card-topline { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%; margin-bottom: .25rem; }
  .spas-grid--large .spa-mic-logo     { display: none; }
  .spas-grid--large .spa-gamme-tag    { margin: 0; font-size: .58rem; width: fit-content; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spas-grid--large .spa-name         { font-size: .95rem; margin: 0; width: fit-content; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spas-grid--large .spa-specs        { justify-content: center; margin: .15rem 0 .4rem; font-size: .7rem; width: 100%; }
  .spas-grid--large .spa-badge        { align-self: center; }
  .spas-grid--large .spa-desc         { font-size: .78rem; text-align: justify; align-self: stretch; }
  .spas-grid--large .spa-card-footer  { justify-content: center; gap: .75rem; align-self: stretch; margin-top: auto; }
  .spas-grid--large .spa-price        { margin-left: 0; text-align: center; flex-shrink: 0; }
  .spas-grid--large .spa-card-actions { justify-content: center; flex-direction: row; }
  .steps-section          { padding: 3rem 0; }
  .why-section            { padding: 4rem 0; }
  .cta-section            { padding: 5rem 0; }
  .gammes-section         { padding: 2rem 0; }
  .apropos-section        { padding: 3.5rem 0; }
  .apropos-valeurs-section { padding: 3.5rem 0; }

  /* Hero */
  .hero        { height: 100lvh; min-height: 100lvh; }
  .hero-inner  { padding: 0 1.25rem calc(3rem + env(safe-area-inset-bottom, 0px)); }
  .hero-bg     { inset: -15% 0; background-position: 60% center; }
  .hero-eyebrow { margin-bottom: .75rem; }
  .hero-divider { margin: .75rem 0; }
  .hero-title  { margin-bottom: .75rem; }
  .hero-card h3 { font-size: .78rem; margin-bottom: .75rem; }
  .hero-desc   { font-size: .78rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 100%; }
  .hero-cta-group { width: 100%; align-items: flex-start; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; width: auto; gap: .5rem; }
  .btn-hero-primary,
  .btn-hero-ghost { flex: 1; justify-content: center; text-align: center; padding: .5rem .85rem; font-size: .62rem; }
  .hero-scroll    { display: none; }
  .hero-quiz-link { font-size: .65rem; padding: .45rem .85rem; align-self: center; }
  .quiz-banner-btn  { font-size: .7rem; }
  .quiz-banner-text { font-size: .72rem; }

  /* Steps */
  .steps-grid         { grid-template-columns: 1fr; gap: 2rem 0; margin-top: 2rem; }
  .steps-grid::before { display: none; }
  .step-item          { flex-direction: row; text-align: left; align-items: flex-start; gap: 1.25rem; max-width: 100%; min-width: 0; padding: 0; }
  .step-number        { margin-bottom: 0; flex-shrink: 0; }

  /* Carousel vedettes + similaires (1 carte centrée) */
  .featured-section .spas-grid,
  .similaires-section .spas-grid { display: flex; margin: 0 -1.25rem; padding: 0 9vw 1rem; }
  .featured-section .spas-grid .spa-card,
  .similaires-section .spas-grid .spa-card { flex: 0 0 min(82vw, 300px); max-width: 300px; min-width: 0; scroll-snap-align: center; }

  /* Gammes : carousel mobile */
  .gammes-section .gammes-grid { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 1rem; margin: 0 -1.25rem; padding: 0 9vw 1rem; width: auto; }
  .gammes-section .gammes-grid::-webkit-scrollbar { display: none; }
  .gammes-section .gammes-grid .gamme-item { flex: 0 0 82vw; max-width: 340px; min-width: 0; scroll-snap-align: center; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 0; grid-template-columns: unset; transition: transform .25s, box-shadow .25s; }
  .gammes-section .gammes-grid .gamme-item::before { display: none; }
  .gammes-section .gammes-grid .gamme-item-img  { height: 260px; margin: 0; box-shadow: none; border-radius: 0; overflow: hidden; flex-shrink: 0; }
  .gammes-section .gammes-grid .gamme-item-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .gammes-section .gammes-grid .gamme-item-divider { width: 24px; }
  .gammes-section .gammes-grid .gamme-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .gammes-section .gammes-grid .gamme-cta  { opacity: 1; transform: none; margin-top: auto; padding-top: .75rem; }

  /* Why */
  .why-grid { gap: 2.5rem 1.5rem; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; padding: 2.5rem 1.25rem; }
  .footer-brand,
  .footer-contact { grid-column: 1 / -1; }

  /* Quiz résultats : 1 carte par ligne */
  .quiz-spas-grid { grid-template-columns: 1fr; gap: .75rem; }

  /* À propos */
  .apropos-valeurs-grid { grid-template-columns: 1fr; gap: 2rem; }
  .apropos-histoire     { gap: 2rem; }

  /* CTA */
  .cta-inner { padding: 0 1.25rem; }

  /* Page hero */
  .page-hero { padding: 2.5rem 0 1.5rem; }

  /* Panier */
  .panier-item-opts { grid-template-columns: 1fr 1fr; }

  /* Toast (bas d'écran) */
  .cart-toast { top: auto; bottom: 1rem; transform: translateX(-50%) translateY(20px); }
  .cart-toast.is-visible { transform: translateX(-50%) translateY(0); }

  /* ── Barre comparateur mobile ────────────────────────────── */
  /* Bouton toggle : visible uniquement sur mobile */
  .compare-bar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 100%; background: none; border: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.65); padding: .4rem 0;
    cursor: pointer; transition: color .2s;
  }
  .compare-bar-toggle:hover { color: #fff; }
  .compare-bar-toggle svg   { transition: transform .25s; transform: rotate(180deg); }
  .compare-bar.is-expanded .compare-bar-toggle svg { transform: rotate(0deg); }

  /* Slots cachés par défaut, visibles quand expanded */
  .compare-bar-slots { display: none; }
  .compare-bar.is-expanded .compare-bar-slots { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; }

  /* Layout colonne sur mobile */
  .compare-bar-inner   { flex-direction: column; padding: 0 1rem .65rem; gap: 0; }
  .compare-bar-actions { padding-top: .5rem; justify-content: space-between; width: 100%; }

  /* ── Page comparaison mobile ────────────────────────────── */
  .compare-section { padding: 1.25rem 0 4rem; }

  /* Retire le min-width, laisse le contenu définir la largeur */
  .compare-table { min-width: unset; }

  /* Colonnes : label assez large pour "Caractéristiques", spas avec min fixe */
  .compare-header-row,
  .compare-row {
    grid-template-columns: 125px repeat(var(--cols, 2), minmax(165px, 1fr));
  }

  /* Colonne labels : suit le scroll horizontal */
  .compare-label-col {
    padding: .55rem .6rem;
    font-size: .6rem;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  /* En-tête des spas : sticky en haut pendant le scroll vertical */
  .compare-header-row {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
  }

  /* Images et textes compacts */
  .compare-spa-img  { height: 110px; width: 85%; }
  .compare-spa-col  { padding: .6rem .6rem; font-size: .8rem; }
  .compare-spa-name { font-size: .85rem; }
  .compare-spa-prix { font-size: .85rem; margin-top: .15rem; }

  /* Caractéristiques : label au-dessus, valeur en dessous */
  .compare-carac           { font-size: .7rem; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem 0; }
  .compare-carac-val       { text-align: left; }
  .compare-features-list   { width: 100%; align-self: stretch; text-align: left; align-items: flex-start; }
  .compare-feature         { font-size: .7rem; gap: 1rem; justify-content: flex-start; width: 100%; }
  .compare-feature-icon    { flex-shrink: 0; }
  .compare-feature-label   { text-align: left; flex: 1; }

  /* Indicateur "glisser" sous le tableau */
  .compare-table-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .compare-table-wrap::after {
    content: 'Glisser pour comparer →';
    display: block;
    text-align: center;
    font-size: .68rem;
    color: var(--text-light);
    padding: .45rem .75rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* ── ≤ 768px : carousel galerie — 2 par vue, swipe touch, sans flèches ─── */
@media (max-width: 768px) {
  .gc-arrow { display: none; }
  .gc-track { padding: .5rem 1rem; scroll-padding-left: 1rem; }
  .gc-slide { flex: 0 0 calc(50% - 0.5rem); height: 180px; }
}

/* ── ≤ 420px : prix + bouton côte à côte, centrés ──────────── */
@media (max-width: 420px) {
  .spa-price { text-align: center; }
  .spa-card-footer { justify-content: center; gap: .6rem; }
  .spa-card-actions { justify-content: center; }

  .gc-slide { height: 160px; }
}

/* ── VENTE FLASH — accueil ──────────────────────────────────── */
.vf-home-section{background:linear-gradient(160deg,var(--navy) 0%,#1e2d5a 50%,#0e1228 100%);padding:4.5rem 0;overflow:hidden;position:relative}
.vf-home-section::before{content:'';position:absolute;top:-120px;right:-120px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(100,117,133,.12) 0%,transparent 65%);pointer-events:none}
.vf-home-inner{max-width:var(--max-w);margin:0 auto;padding:0 2rem;}
.vf-home-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}
.vf-home-header-left{flex:1;min-width:220px}
.vf-home-eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.vf-home-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--gold);color:#fff;font-family:var(--font-title);font-size:.6rem;font-weight:700;padding:.25rem .8rem;border-radius:20px;text-transform:uppercase;letter-spacing:.1em}
.vf-home-line{height:1px;flex:1;max-width:60px;background:rgba(255,255,255,.15)}
.vf-home-title{font-family:var(--font-title);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;color:#fff;margin-bottom:.5rem;line-height:1.1;letter-spacing:-.02em}
.vf-home-desc{color:rgba(255,255,255,.5);font-size:.9rem;line-height:1.7;max-width:460px}
.vf-home-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.2rem;flex-shrink:0}
.vf-home-countdown{display:flex;align-items:center;gap:.5rem}
.vf-home-cu{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.6rem .85rem;text-align:center;min-width:54px;backdrop-filter:blur(4px)}
.vf-home-cu strong{display:block;font-family:var(--font-title);font-size:1.5rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.vf-home-cu span{font-size:.52rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem;display:block}
.vf-home-sep{color:rgba(255,255,255,.25);font-weight:700;font-size:1.4rem;padding-bottom:.4rem}
/* Desktop : grille 3 cartes statique */
.vf-home-btn{display:none}
.vf-home-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.vf-home-slide{display:flex}
.vf-home-slide:nth-child(n+4){display:none}
.vf-home-slide .spa-card{width:100%;flex:1}

/* Tablette + téléphone : carousel 6 cartes */
@media(max-width:1024px){
  .vf-home-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
  .vf-home-btn:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}
  .vf-home-btn--prev{left:.5rem}
  .vf-home-btn--next{right:.5rem}
  .vf-home-track{display:flex;flex-direction: row;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;gap: 1rem;margin: 0 -2rem;padding: 0 2rem 1rem;scroll-padding-left: 1rem;}
  .vf-home-track *{touch-action:none}
  .vf-home-track::-webkit-scrollbar{display:none}
  .vf-home-slide{flex:0 0 320px;display:flex}
  .vf-home-slide:nth-child(n+4){display:flex}
  .vf-home-slide .spa-card{box-shadow:0 8px 32px rgba(0,0,0,.22)}
}
.vf-home-track .spa-gamme-tag  {order:1}
.vf-home-track .spa-badge      {order:2}
.vf-home-track .spa-name       {order:3}
.vf-home-track .spa-desc       {order:4}
.vf-home-track .spa-specs      {order:5}
.vf-home-track .spa-card-footer{order:6}
.vf-home-track .spa-card-body  {display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto auto;align-items:center}
.vf-home-track .spa-gamme-tag  {grid-column:1;grid-row:1;justify-self:center;margin:0}
.vf-home-track .spa-name       {grid-column:1;grid-row:2;font-size:1.25rem;margin:0;justify-self:center}
.vf-home-track .spa-specs      {justify-self:center;text-align:center}
.vf-home-footer{display:flex;align-items:center;justify-content:center;margin-top:2.5rem}
.vf-home-cta{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);font-family:var(--font-title);font-size:.78rem;font-weight:600;padding:.65rem 1.6rem;border-radius:50px;text-decoration:none;letter-spacing:.04em;transition:border-color .2s,color .2s,background .2s}
.vf-home-cta:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:768px){
  .vf-home-header{flex-direction:column;align-items:flex-start}
  .vf-home-header-right{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:480px){
  .section-cta .btn,.cta-section .btn-white{padding:.55rem 1.1rem;font-size:.72rem}
  .vf-home-btn{display:none}
  .vf-home-inner{padding:0 .75rem}
  .vf-home-track{display:flex;margin:0 -1.25rem;padding:0 calc(50% - 160px) 1rem;touch-action:pan-x pan-y;scroll-snap-type:x mandatory}
  .vf-home-track *{touch-action:pan-x pan-y}
  .vf-home-slide{scroll-snap-align:center}
  .vf-home-cu{padding:.55rem .7rem;min-width:52px;border-radius:8px}
  .vf-home-cu strong{font-size:1.4rem}
  .vf-home-cu span{font-size:.52rem;margin-top:.2rem}
  .vf-home-sep{font-size:1.2rem;padding-bottom:.3rem}
  .vf-home-countdown{gap:.3rem}
}