/* Tropic Spa — feuille de style unique du site public.
   Charte reprise de tropicspa.fr : rose Tropic Spa (#ff3ea4, celui du logo), gris, blanc, police Montserrat.
   Esprit haut de gamme et épuré : grands blancs, fonds gris très clairs pour présenter les spas, sections sombres.
   Contrastes (WCAG AA) : blanc sur rose foncé #d81b84 = 4,8:1 ; texte #1d1d1f sur blanc = 16,8:1 ; gris #6e6e73 = 5:1.
   Les photos des spas, détourées sur fond blanc, sont présentées sur blanc ; l'image d'accueil se fond dans la scène grise.
   Mobile d'abord : la majorité des visites payantes arrive sur téléphone. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.e7198b2dcb57.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin-ext-400-normal.17898728c63b.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin-400-italic.fd7db0d8b1bb.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.f96e8aab37e8.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.9e606da1cbeb.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.1c0792ac34ef.woff2") format("woff2"); }

:root {
  --brand: #ff3ea4;
  --brand-strong: #d81b84;
  --brand-hover: #c4106f;
  --brand-soft: #fff0f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --stage: #f5f5f7;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --night: #0b0b0c;
  --night-2: #1d1d1f;
  --night-muted: #a1a1a6;
  --white: #fff;
  --ok: #1f7a3a;
  --error: #b42318;
  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .08);
  --wrap: 1200px;
  --gutter: 24px;  /* marge latérale du texte sur mobile */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 70px;
  /* Verre liquide : fond translucide, flou, reflets sur les bords */
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-blur: blur(22px) saturate(1.8);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 255, 255, .45) inset, 0 12px 32px rgba(29, 29, 31, .08), 0 2px 6px rgba(29, 29, 31, .04);
  --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .2) 45%, rgba(29, 29, 31, .06) 75%,
    rgba(255, 255, 255, .85) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: 96px; }
@media (min-width: 900px) { html { scroll-padding-bottom: 24px; } }
body { margin: 0; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px;
  line-height: 1.6; color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (min-width: 900px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-strong); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.1; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
button { font: inherit; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: .6em 1em; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 32px; } }
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 112px 0; } }
.section-stage, .section-sand { background: var(--stage); }
.section-night { background: var(--night); color: var(--night-muted); }
.section-night h2, .section-night h3 { color: #fff; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (min-width: 900px) { .section-head { margin-bottom: 56px; } }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.section-night .section-head p { color: var(--night-muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 600; color: var(--brand-strong); margin-bottom: 1em; }
.section-night .eyebrow { color: var(--brand); }
.lead { font-size: 1.15rem; color: var(--muted); }

/* Boutons et liens d'action */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.6em;
  border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; letter-spacing: .01em;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); text-align: center; line-height: 1.2; }
.btn-cta { background: var(--brand-strong); color: #fff; }
.btn-cta:hover { background: var(--brand-hover); color: #fff; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-light { background: var(--stage); color: var(--ink); }
.btn-light:hover { background: var(--line-soft); color: var(--ink); }
.btn-sm { min-height: 36px; padding: .45em 1.15em; font-size: .85rem; }
.btn-block { width: 100%; }
.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.link-arrow { color: var(--brand-strong); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: "\00a0›"; transition: margin .2s var(--ease); }
.link-arrow:hover { text-decoration: underline; }

/* Bandeau d'offre */
.promo-bar { background: var(--night); color: #fff; text-align: center; font-size: .85rem; }
.promo-bar a { display: block; color: #fff; text-decoration: none; padding: .6em var(--gutter); }
.promo-bar strong { color: var(--brand); font-weight: 600; }
.promo-bar a:hover { text-decoration: underline; }

/* En-tête : capsule de verre flottante */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px 0 0; height: var(--header-h); pointer-events: none; }
.header-row { position: relative; display: flex; align-items: center; gap: 16px; min-height: 60px; pointer-events: auto;
  max-width: calc(var(--wrap) + 8px); margin: 0 10px; padding: 0 8px 0 20px; border-radius: 999px; }
@media (min-width: 1240px) { .header-row { margin: 0 auto; } }
.logo { flex: 0 0 auto; }
.logo img { width: 150px; height: auto; }
@media (min-width: 700px) { .logo img { width: 190px; } }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .85rem; letter-spacing: .01em; opacity: .85; white-space: nowrap;
  transition: opacity .2s, color .2s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brand-strong); opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-phone { display: none; align-items: center; gap: .4em; font-weight: 600; font-size: .85rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-phone svg { fill: var(--brand-strong); }
.menu-toggle { display: inline-flex; background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; }
.menu-toggle svg { fill: currentColor; }
.nav-mobile-only { display: block; }
@media (max-width: 1099px) {
  .main-nav { position: fixed; top: calc(var(--header-h) + 8px); left: 10px; right: 10px; display: none; border-radius: 28px; padding: 8px 0;
    max-height: calc(100vh - var(--header-h) - 24px); max-height: calc(100dvh - var(--header-h) - 24px); overflow: auto; }
  .main-nav.open { display: block; }
  .main-nav li a { display: block; padding: 14px 24px; font-size: 1.05rem; opacity: 1; }
  .main-nav li + li a { border-top: 1px solid rgba(0, 0, 0, .06); }
  .header-actions .btn { display: none; }
}
@media (min-width: 560px) { .header-actions .btn { display: inline-flex; white-space: nowrap; } }
@media (min-width: 1100px) {
  .main-nav { margin-left: 20px; }
  .main-nav ul { display: flex; gap: 12px; }
  .menu-toggle, .nav-mobile-only { display: none; }
  .header-phone { display: inline-flex; }
}
/* Entre 1100 et 1320 px, le numéro se réduit à son icône pour laisser la place au menu */
@media (min-width: 1100px) and (max-width: 1319px) {
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Fil d'Ariane */
.crumbs { font-size: .8rem; color: var(--muted); padding-top: 18px; padding-bottom: 4px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.crumbs li + li::before { content: "›"; margin-right: .4em; color: #aeaeb2; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* Accueil : scène claire, titre centré, spa présenté comme un objet */
.hero { background: var(--stage); overflow: hidden; }
.hero-inner { text-align: center; padding-block: 56px 40px; }
@media (min-width: 900px) { .hero-inner { padding: 96px 32px 56px; } }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.75rem); letter-spacing: -.035em; margin-bottom: .35em; }
.hero .lead { max-width: 36em; margin: 0 auto; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; margin: 32px 0 8px; }
.hero-media { margin: 24px auto 0; max-width: 640px; }
.hero-media img { width: 100%; mix-blend-mode: multiply; }
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; list-style: none; padding: 0; margin: 24px 0 0;
  font-size: .85rem; color: var(--muted); }
.hero-proof li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  margin-right: .6em; vertical-align: middle; }

.sizes { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.size { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 32px 16px 28px; border-radius: var(--radius);
  background: var(--stage); text-decoration: none; color: var(--ink); transition: background .25s var(--ease), transform .25s var(--ease); }
.size:hover { color: var(--ink); transform: translateY(-3px); }
.size-number { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.size-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.size-link { margin-top: 14px; font-size: .9rem; font-weight: 600; color: var(--brand-strong); }
.size-link::after { content: "\00a0›"; }

.collections { display: grid; gap: 16px; }
@media (min-width: 800px) { .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.collection { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 380px; padding: 36px 28px 0;
  border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink); overflow: hidden; text-align: center;
  transition: box-shadow .3s var(--ease); }
.collection:hover { box-shadow: var(--shadow); color: var(--ink); }
.collection h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .3em; }
.collection p { color: var(--muted); font-size: .95rem; max-width: 30em; margin: 0 auto .8em; }
.collection-media { display: flex; align-items: flex-end; justify-content: center; }
.collection-media img { width: 100%; max-width: 440px; max-height: 300px; object-fit: contain; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: transform .5s var(--ease); }
.collection:hover .collection-media img { transform: scale(1.03); }
@media (min-width: 800px) {
  .collection-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; padding: 48px 56px; min-height: 420px; }
  .collection-wide .collection-text { flex: 1 1 40%; }
  .collection-wide p { margin-left: 0; }
  .collection-wide .collection-media { flex: 1 1 60%; align-items: center; }
  .collection-wide .collection-media img { max-height: 360px; max-width: 520px; border-radius: var(--radius-sm); }
}

.steps { display: grid; gap: 32px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 20px; }
.steps li::before { content: "0" counter(step); display: block; font-size: 2.4rem; font-weight: 600; letter-spacing: -.04em;
  color: var(--brand); line-height: 1; margin-bottom: 18px; }
.steps h3 { margin-bottom: .4em; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }

.reasons { display: grid; gap: 0; }
@media (min-width: 700px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1000px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; } }
.reason { padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.reason h3 { margin-bottom: .45em; }
.reason p { margin: 0; color: var(--night-muted); }

/* Preuves de confiance (accueil) : SAV européen, communauté Facebook, cryptomonnaies, médias et partenaires */
.proofs { display: grid; gap: 16px; }
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.proof { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px 32px; background: #fff;
  border-radius: var(--radius); }
.proof h3 { margin-bottom: .4em; }
.proof p { margin: 0 0 .8em; color: var(--muted); }
.proof-map { width: 100%; max-width: 230px; height: auto; margin-bottom: 20px; border-radius: var(--radius-sm); }
.proof-figure { margin: 0 0 .1em !important; font-size: clamp(3rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05;
  color: var(--brand-strong) !important; }
.coins { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  width: 100%; max-width: 320px; }
.coins li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); line-height: 1.2; }
.coins img { width: 44px; height: 44px; border-radius: 50%; }
.press { margin-top: 56px; text-align: center; }
.press-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 28px; }
.press-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px;
  align-items: center; justify-items: center; }
@media (min-width: 700px) { .press-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.press-logos img { width: auto; max-width: 100%; height: 44px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .7;
  transition: filter .3s var(--ease), opacity .3s var(--ease); }
.press-logos li:first-child img { height: 64px; }
.press-logos img:hover { filter: none; opacity: 1; }

/* Grille de produits */
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.section-stage .card, .section-sand .card { border-color: transparent; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.card-media { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; }
.card-media img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; flex: 1; }
.card h3 { margin: 0; font-size: 1.2rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card-sub { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.45; }
.card-price { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.card-more { color: var(--brand-strong); font-weight: 600; font-size: .9rem; margin-top: 6px; }
.card-more::after { content: "\00a0›"; }
.price { font-weight: 600; font-size: 1.25rem; color: var(--ink); letter-spacing: -.01em; }
.price small { font-weight: 500; font-size: .75em; color: var(--muted); }
.price-request { font-weight: 600; color: var(--ink); }
.monthly { color: var(--brand-strong); font-weight: 600; font-size: .9rem; }
.tags { list-style: none; padding: 0; margin: 2px 0 0; color: var(--muted); font-size: .8rem; font-weight: 500; }
.tags li { display: inline; }
.tags li + li::before { content: " · "; color: #aeaeb2; }

/* Filtres de gamme */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 36px; }
.chips a { display: inline-block; padding: .55em 1.2em; border-radius: 999px; color: var(--ink); background: var(--stage);
  text-decoration: none; font-weight: 500; font-size: .88rem; transition: background .2s; }
.chips a:hover { color: var(--ink); --glass-bg: rgba(255, 255, 255, .85); }
.chips a[aria-current="page"] { background: var(--ink); color: #fff; }
.category-head { padding: 32px 0 36px; max-width: 820px; }
@media (min-width: 900px) { .category-head { padding: 56px 0 44px; } }
.category-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); letter-spacing: -.035em; }

/* ===== Audit 2 · pages-gammes ===== */
/* Cartes : cadre 4:3 tenu (titres alignés d'une carte à l'autre, règle .card-media ci-dessus), photo d'ambiance au
   survol (ordinateur avec souris), petites photos montrées à leur taille au lieu d'être agrandies et floues */
.card-media { position: relative; }
.card-alt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.card-media .card-alt img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.card:hover .card-media .card-alt img { transform: none; }
@media (hover: hover) and (min-width: 1000px) { .card:hover .card-alt { opacity: 1; } }
.card-lowres .card-media { padding: 24px 40px; }
/* Page « Spas petits prix » : les modèles à quatre versions y figurent pour leur version Plug & Play (Jeremy, 01/11/2026) */
.card-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--brand-strong); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card-version { display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-strong); }
.card-lowres .card-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* Téléphone : carte compacte, photo à gauche, nom et prix à droite (quatre modèles par écran) */
@media (max-width: 599px) {
  .grid { gap: 12px; }
  .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .card-media, .card-lowres .card-media { aspect-ratio: auto; padding: 10px; }
  .card-body { padding: 14px 14px 14px 6px; gap: 3px; }
  .card h3 { font-size: 1.05rem; }
  .card-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .8rem; }
  /* étiquettes masquées, sauf celle de la garantie (li.tag-warranty), seule et sans séparateur */
  .card .tags li:not(.tag-warranty), .card-more { display: none; }
  .card .tags .tag-warranty::before { content: none; }
  .card-price { padding-top: 6px; gap: 0 8px; }
  .card .price { font-size: 1.1rem; }
  .card .monthly { font-size: .8rem; }
}

/* En-tête de gamme : titre, prix d'entrée, introduction ; photo d'ambiance à droite à partir de 960 px */
.category-head .price-line { color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.category-head .price-line a { font-weight: 500; text-decoration: none; white-space: nowrap; }
.category-head .price-line a::after { content: "\00a0›"; }
.category-head .price-line a:hover { text-decoration: underline; }
.category-banner { display: none; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--stage); }
.category-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  /* colonne de texte plus large que la photo et marges réduites : les modèles commencent aussi haut que sans photo */
  .category-head.has-banner { max-width: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px;
    align-items: center; padding: 40px 0 32px; }
  .category-head.has-banner h1 { font-size: clamp(2.2rem, 3.2vw, 3rem); }
  .category-banner { display: block; }
}
.intro-more { display: block; min-height: 44px; padding: 10px 0; border: 0; background: none; color: var(--brand-strong); font: inherit;
  font-weight: 600; font-size: .9rem; cursor: pointer; }
.intro-more:hover { color: var(--brand-hover); }
/* Filtres : le tri par prix se range à droite, à part des tailles, quand la rangée tient sur une ligne (sinon il suit
   les autres) */
@media (min-width: 1000px) { .chips .chip-sort { margin-left: auto; } }
.chips a[aria-current="true"] { background: var(--ink); color: #fff; }
/* Téléphone : premier modèle visible dès l'arrivée (titre plus court, introduction repliée sur deux lignes, filtres
   sur une seule ligne qui défile du doigt) */
@media (max-width: 699px) {
  .category-head { padding: 20px 0 16px; }
  .category-head h1, .category-head.has-banner h1 { font-size: 1.85rem; }
  .category-head .price-line { font-size: 1rem; margin-bottom: 8px; }
  .category-head .intro { font-size: 1rem; }
  .category-head .intro p:last-child { margin-bottom: 0; }
  .category-head .intro.js-clamp:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .category-head .intro.js-clamp:not(.is-open) p { margin: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips li { flex: none; }
  .chips a { white-space: nowrap; }
  /* ombre plus courte que celle du verre, que la rangée défilante couperait net */
  .chips li a { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(255, 255, 255, .45) inset, 0 2px 8px rgba(29, 29, 31, .07); }
}
/* Introduction repliée dès le premier affichage quand le navigateur exécute les scripts : la page ne saute plus quand
   site.js arrive. La classe js-clamp ne sert qu'aux navigateurs qui ne connaissent pas « scripting » ; sans script,
   rien ne s'applique et le texte reste entier. Le dernier paragraphe garde sa marge : une introduction assez courte pour
   tenir en entier garde sa place habituelle */
@media (max-width: 699px) and (scripting: enabled) {
  .category-head .intro[data-clamp]:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .category-head .intro[data-clamp]:not(.is-open) p:not(:last-child) { margin: 0; }
}
/* Tablette et ordinateur : quatre lignes, avec le même bouton « Lire la suite » (les modèles restent au premier écran) */
@media (min-width: 700px) {
  .category-head .intro.js-clamp:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .category-head .intro.js-clamp:not(.is-open) p:not(:last-child) { margin: 0; }
}
@media (min-width: 700px) and (scripting: enabled) {
  .category-head .intro[data-clamp]:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .category-head .intro[data-clamp]:not(.is-open) p:not(:last-child) { margin: 0; }
}

/* Gamme d'un seul modèle (spas de nage) : le modèle en grand, ses chiffres clés et ses demandes, puis d'autres pistes */
.feature { display: grid; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.feature-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; min-height: 0; padding: 20px; }
.feature-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.feature.is-photo .feature-media { padding: 0; }
.feature.is-photo .feature-media img { object-fit: cover; mix-blend-mode: normal; }
.feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px 28px; }
.feature h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.feature h2 a { color: var(--ink); text-decoration: none; }
.feature-sub { margin: 0; color: var(--muted); }
.feature-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; width: 100%; margin: 10px 0 0; }
.feature-facts div:first-child { grid-column: 1 / -1; }
.feature-facts dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.feature-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.feature-facts dd small { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); }
.feature-warranty { margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: var(--brand-strong); }
.feature .card-price { margin-top: 6px; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.feature-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; }
.feature-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.feature-phone svg { color: var(--brand-strong); }
.feature-phone:hover { color: var(--brand-strong); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .feature-media { aspect-ratio: auto; min-height: 440px; }
  .feature-body { justify-content: center; padding: 40px; }
  .feature-actions { gap: 10px; }
  /* photo d'ambiance en bandeau sur toute la largeur, pour garder le spa entier ; dessous, le nom, le prix et les
     demandes à gauche, les chiffres clés à droite */
  .feature.is-photo { grid-template-columns: minmax(0, 1fr); }
  .feature.is-photo .feature-media { aspect-ratio: 21 / 9; min-height: 0; }
  .feature.is-photo .feature-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 10px;
    align-content: start; justify-items: start; }
  .feature.is-photo .feature-body > * { grid-column: 1; }
  .feature.is-photo .feature-body > .feature-facts { grid-column: 2; grid-row: 1 / span 6; margin: 0; align-self: center; }
}
.alternatives { margin-top: 56px; }
.alternatives h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 24px; }

/* « Vous hésitez encore ? » : le devis, puis trois issues plus douces (catalogue, visite en visio, rappel) */
.choice-help { margin-top: 56px; }
.choice-help + .section { padding-top: 64px; }
.choice-help-inner { display: grid; gap: 28px; padding: 32px 22px; border-radius: var(--radius); background: var(--stage); }
.choice-help h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .4em; }
.choice-help p { color: var(--muted); max-width: 32em; margin-bottom: 22px; }
.help-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.help-links a { display: block; padding: 16px 20px; border-radius: var(--radius-sm); background: #fff; color: var(--ink); text-decoration: none;
  transition: box-shadow .3s var(--ease); }
.help-links a:hover { color: var(--ink); box-shadow: var(--shadow); }
.help-links strong { display: block; color: var(--brand-strong); font-weight: 600; }
.help-links strong::after { content: "\00a0›"; }
.help-links span { font-size: .9rem; color: var(--muted); }
@media (min-width: 900px) {
  .choice-help { margin-top: 80px; }
  .choice-help + .section { padding-top: 88px; }
  .choice-help-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; }
}
.empty { padding: 40px; border-radius: var(--radius); background: var(--stage); }

/* Texte éditorial */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.prose h3 { margin-top: 1.3em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line-soft); padding: .7em .5em; text-align: left; }
@media (max-width: 599px) {
  /* Tableau plus large que l'écran : il défile de côté, une ombre au bord tant qu'il reste des colonnes à voir, au lieu
     de couper les mots lettre par lettre. Les mots restent entiers et chaque colonne garde une largeur lisible : trois
     colonnes tiennent sur un téléphone courant (dès 360 px), un tableau plus large défile. */
  .prose table { display: block; overflow-x: auto; font-size: .84rem;
    background: linear-gradient(90deg, var(--white) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
      linear-gradient(270deg, var(--white) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(29, 29, 31, .16), rgba(29, 29, 31, 0)) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(29, 29, 31, .16), rgba(29, 29, 31, 0)) right / 14px 100% no-repeat scroll; }
  .prose th, .prose td { min-width: min(8em, 26vw); padding: .6em .5em; }
  .prose th:first-child, .prose td:first-child { padding-left: 0; }
  .prose th:last-child, .prose td:last-child { padding-right: 0; }
}
.prose blockquote { margin: 1.4em 0; padding: 1em 1.4em; border-left: 3px solid var(--brand); background: var(--stage); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Informations légales : confirmation de l'opposition à la mesure d'audience (audience.js), conditions des ventes
   aux professionnels sous le prix, note des avis en étoiles (filtre « stars ») avec lien vers la plateforme */
.audience-status { margin: 0 0 1.6em; padding: .9em 1.2em; border-left: 3px solid var(--ok); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--stage); color: var(--ink); font-weight: 600; }
.price-pro { margin: -8px 0 20px; font-size: .8rem; color: var(--muted); }
.price-pro a { color: inherit; }
.stars { display: inline-flex; letter-spacing: 1px; color: #f5a623; }
.stars .star-off { color: var(--line); }
.stars .star-half { color: transparent; background: linear-gradient(90deg, #f5a623 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; }
.trust-stars a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.trust-stars a:hover { color: var(--ink); text-decoration: underline; }

/* Fiche produit */
.product-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 16px 0 56px; }
@media (min-width: 960px) { .product-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; padding-bottom: 88px; } }
.gallery-main { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line-soft); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 12px 0 4px; list-style: none; margin: 0; scroll-snap-type: x mandatory; }
.gallery-thumbs button { flex: 0 0 auto; width: 84px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent;
  padding: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; scroll-snap-align: start; transition: border-color .2s; }
.gallery-thumbs button:hover { border-color: var(--line); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.buy-box { padding: 4px 0; }
.buy-box h1 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.035em; margin-bottom: .2em; }
.buy-box .subtitle { color: var(--muted); margin-bottom: 1.2em; }
/* Accroche sur plusieurs lignes : la première est le slogan, les suivantes une courte présentation */
.buy-box .subtitle:has(+ .subtitle-more) { color: var(--ink); font-weight: 500; font-size: 1.08rem; }
.buy-box .subtitle-more { color: var(--muted); margin: -.6em 0 1.2em; }
.buy-price { display: flex; flex-direction: column; gap: 2px; padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 20px; }
.buy-price .price { font-size: 2rem; letter-spacing: -.02em; }
.buy-price small { color: var(--muted); font-size: .8rem; }
.buy-actions { display: grid; gap: 10px; }
.buy-reassure { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: .88rem; color: var(--muted); }
.buy-reassure li { display: flex; gap: .7em; align-items: flex-start; }
.buy-reassure svg { flex: 0 0 auto; fill: var(--brand-strong); margin-top: 3px; }
.financing-note { font-size: .75rem; color: var(--muted); margin: 10px 0 0; }
.key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; background: var(--line-soft);
  border-radius: var(--radius-sm); overflow: hidden; }
.key-facts div { background: #fff; padding: 12px 14px; }
.key-facts dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.key-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.key-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.key-facts dd a { color: inherit; text-decoration: none; }

/* Indice Tropic Spa Énergie : échelle de A (vert) à G (rouge), la classe du produit pointée par une flèche noire */
.energy { margin-bottom: 40px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.energy h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; font-size: 1.25rem !important; margin-bottom: 18px; }
.energy-brand { color: var(--brand); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.energy-tag { padding: .1em .55em; background: var(--brand); color: #fff; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 4px; }
.energy-scale { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 5px; }
.energy-scale li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.energy-bar { --w: 30%; position: relative; width: var(--w); height: 26px; padding-left: 10px; display: flex; align-items: center;
  color: #fff; font-weight: 700; font-size: .85rem; background: var(--c); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.energy-a .energy-bar { --c: #1a9a4b; --w: 30%; }
.energy-b .energy-bar { --c: #4cb748; --w: 38%; }
.energy-c .energy-bar { --c: #a4c93a; --w: 46%; }
.energy-d .energy-bar { --c: #f2d81c; --w: 54%; color: var(--ink); }
.energy-e .energy-bar { --c: #f2a531; --w: 62%; }
.energy-f .energy-bar { --c: #e8692b; --w: 70%; }
.energy-g .energy-bar { --c: #d9282f; --w: 78%; }
.energy-mark { flex: 0 0 auto; min-width: 56px; height: 34px; padding: 0 12px 0 22px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.2rem; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.energy-note { margin: 0; font-size: .85rem; color: var(--muted); }
.highlights { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 12px; }
.highlights li { position: relative; padding-left: 32px; }
.highlights li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-soft) url("../img/check.bc7193519d69.svg") center / 12px no-repeat; }
.product-sections { display: grid; gap: 48px; padding-bottom: 32px; }
.product-sections h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.product-sections section + section { margin-top: 40px; }
@media (min-width: 960px) { .product-sections { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; } }
.specs { width: 100%; border-collapse: collapse; margin-bottom: 2em; font-size: .92rem; }
.specs caption { text-align: left; font-weight: 600; color: var(--ink); padding: .4em 0 .6em; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }
.specs th, .specs td { text-align: left; padding: .7em .4em .7em 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.specs th { color: var(--muted); font-weight: 500; width: 45%; }

/* ===== Audit 2 · fiche-produit ===== */
/* Galerie : la photo d'ambiance remplit le cadre ; la grande photo s'agrandit en plein écran (site.js, initLightbox) */
.gallery-main.is-photo { padding: 0; }
.gallery-main.is-photo img { object-fit: cover; }
.gallery-main .is-zoomable { cursor: zoom-in; }
.gallery-zoom { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink); cursor: pointer; }
.gallery-zoom:hover { background: #fff; }
.gallery-zoom::before { content: ""; width: 13px; height: 13px; margin: -4px 0 0 -4px; border: 2px solid currentColor; border-radius: 50%; }
.gallery-zoom::after { content: ""; position: absolute; width: 7px; height: 2px; background: currentColor; transform: translate(6px, 6px) rotate(45deg); }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; }
.lightbox::backdrop { background: #000; }
/* La photo n'est jamais agrandie au-delà de sa taille réelle : centrée sur le fond noir, sinon elle serait floue */
.lightbox img { position: absolute; inset: 0; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto;
  touch-action: pinch-zoom; }
.lightbox-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; place-items: center; width: 44px;
  height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; }
.lightbox-close::before, .lightbox-close::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor;
  transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }
/* Colonne d'achat : prix, boutons et horaires d'abord, puis les caractéristiques clés en 2 × 2 */
.buy-price small a { color: inherit; }
.buy-price .price-alt { margin-top: 6px; color: var(--ink); font-weight: 600; }
.call-hours { margin: 8px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
.key-facts { margin: 20px 0 0; }
.key-facts div { padding: 10px 14px; }
.key-facts dd { font-size: .95rem; }
.key-facts dd small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); }
/* Au-dessus de 1200 px, une dimension tient sur une ligne, même la plus longue (390 × 225 × 139 cm). Les autres cases
   (« 3 places dont 1 allongée ») gardent le retour à la ligne. */
@media (min-width: 1200px) { .key-facts .kf-nowrap { white-space: nowrap; } .key-facts div { padding-inline: 12px; } }
.buy-promo strong { color: var(--ink); }
.tags .tag-warranty { color: var(--brand-strong); font-weight: 600; }
/* Cartes : la garantie toujours sur sa propre ligne, sans séparateur, comme sur téléphone (sinon le « · » reste seul
   en fin de ligne) */
.card .tags .tag-warranty { display: block; }
.card .tags .tag-warranty::before { content: none; }
/* Téléphone : prix et bouton de devis dans le premier écran (fil d'Ariane au lieu du sur-titre, galerie sans
   vignettes : flèches, balayage et compteur suffisent) */
@media (max-width: 959px) {
  .product-top { gap: 16px; padding-top: 4px; }
  .gallery-main { padding: 8px; }
  .gallery-thumbs { padding-top: 8px; }
  .product-top .buy-box { padding: 18px 20px 22px; }
  .buy-box .eyebrow { display: none; }
  .buy-box .subtitle { margin-bottom: .6em; }
  .buy-box .subtitle-more { margin: -.2em 0 .6em; }
  .buy-price { padding: 12px 0; margin-bottom: 14px; }
}
@media (max-width: 599px) { .gallery-thumbs { display: none; } }
/* Petit ordinateur : colonne d'achat un peu plus large et boutons moins rembourrés, pour que « Recevoir mon devis
   gratuit » et « Demander une étude de projet » tiennent sur une ligne, à la hauteur des autres boutons. Dès 1200 px,
   le conteneur (--wrap) ne s'élargit plus et la grille de base suffit : la galerie y garde toute sa largeur. */
@media (min-width: 960px) and (max-width: 1199px) {
  .product-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .product-top .buy-box { padding: 24px; }
  .buy-actions .btn { padding-inline: 20px; }
}
/* Téléphone : boutons de la colonne d'achat moins rembourrés, pour que « Recevoir mon devis gratuit » et « Demander une
   étude de projet » tiennent sur une ligne dès 360 px, à la hauteur des autres boutons */
@media (max-width: 429px) { .buy-actions .btn { padding-inline: 12px; letter-spacing: 0; } }
@media (max-width: 374px) { .buy-actions .btn { font-size: .9375rem; } }
/* Tableau des versions : le prix en première ligne, un bouton de devis par version */
.ranges-table .range-price th, .ranges-table .range-price td { border-bottom: 2px solid var(--line); }
.ranges-table .range-devis td { padding: 12px 6px; }
.range-devis .btn { width: 100%; padding-inline: .5em; white-space: normal; }
/* Options de la fiche (lampe UV, pilotage Wi-Fi) : même cadre que « Avant de commander » */
.options { padding: 8px 0 48px; }
.options .section-head { margin-bottom: 20px; }
.options .section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.options-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .options-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.options-list li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: #fff; }
.option-name { font-size: .95rem; color: var(--ink); }
.option-price { font-weight: 600; color: var(--brand-strong); }
.options-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
/* Avant de commander : poids, accès, électricité, mise en chauffe, entretien */
.prepare { padding: 8px 0 56px; }
.prepare .section-head { margin-bottom: 20px; }
.prepare .section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
/* Cartes indépendantes en deux colonnes équilibrées (Jeremy, 01/11/2026 : pas de grands blancs à côté d'un texte
   court) ; l'emprise au sol est regroupée avec le poids en eau. */
.prepare-list { margin: 0; }
.prepare-list > div { padding: 20px 22px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  break-inside: avoid; margin: 0 0 16px; }
@media (min-width: 900px) {
  .prepare-list { columns: 2; column-gap: 16px; }
}
.prepare-list dt { margin-bottom: 6px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-strong); }
.prepare-list dd { margin: 0; font-size: .95rem; color: var(--ink); }
.prepare-list dd p { margin: 0; }
.prepare-list dd p + p { margin-top: .55em; }
.prepare-list dd ul { margin: .4em 0 .55em; padding-left: 1.2em; }
.prepare-list dd li + li { margin-top: .25em; }
.prepare-list dd ul + p { margin-top: 0; }
.prepare-list .prepare-note { color: var(--muted); font-size: .85rem; }
.prepare-more { margin: 16px 0 0; }
/* Texte et indice énergie côte à côte (l'encart suit la lecture), caractéristiques en pleine largeur */
.product-sections.is-single { grid-template-columns: minmax(0, 760px); }
@media (min-width: 960px) { .product-sections .energy { position: sticky; top: calc(var(--header-h) + 24px); } }
.specs-full { padding: 40px 0 64px; border-top: 1px solid var(--line-soft); }
.specs-full h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 16px; }
@media (min-width: 960px) { .specs-columns { columns: 2; column-gap: 64px; } }
.specs-group { break-inside: avoid; border-bottom: 1px solid var(--line-soft); }
.specs-group summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; cursor: pointer;
  list-style: none; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.specs-group summary::-webkit-details-marker { display: none; }
.specs-group summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; color: var(--brand-strong); }
.specs-group[open] summary::after { content: "–"; }
.specs-group .specs { margin-bottom: 12px; }
.specs-group .specs tr:last-child th, .specs-group .specs tr:last-child td { border-bottom: 0; }
.specs-full .specs-single { max-width: 760px; }
/* Modèles voisins : petit tableau comparatif, la colonne de la fiche en rose pâle */
.compare-table .compare-head { vertical-align: bottom; background: #fff; color: var(--ink); font-weight: 600; line-height: 1.25; }
.compare-head a { display: block; color: inherit; text-decoration: none; }
.compare-head a:hover span { color: var(--brand-strong); text-decoration: underline; }
.compare-head img { display: block; width: 100%; max-width: 110px; height: 80px; margin: 0 auto 8px; object-fit: contain; }
.compare-head span, .compare-head small { display: block; }
.compare-head small { margin-top: 2px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-strong); }
.compare-table .is-current, .compare-table tbody td:nth-child(2) { background: var(--brand-soft); }
.compare-links .btn { white-space: nowrap; }
/* Vidéos d'avis : bande qui défile de côté sur téléphone */
@media (max-width: 599px) {
  .reviews-video .videos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .reviews-video .video { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Gammes d'un modèle : couleurs des gammes de tropicspa.fr (Plug & Play rose, Relaxation bleu clair, Intense bleu,
   Alu-Turbo bleu nuit et or). Tableau défilant horizontalement sur mobile, première colonne fixe. */
.ranges { padding: 8px 0 48px; }
.ranges .section-head { margin-bottom: 24px; }
.versions-list { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: .55em; color: var(--muted); font-size: 1.05rem; }
.versions-list strong { color: var(--ink); font-weight: 600; }
.ranges .section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.ranges-scroll { position: relative; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); background: #fff;
  -webkit-overflow-scrolling: touch; }
.ranges-scroll:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.ranges-table { width: 100%; min-width: 580px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.ranges-table colgroup col:first-child { width: 120px; }
@media (min-width: 700px) { .ranges-table colgroup col:first-child { width: 26%; } }
.ranges-swipe { margin: 0 0 8px; font-size: .78rem; color: var(--muted); }
@media (min-width: 700px) { .ranges-swipe { display: none; } }
.ranges-table th, .ranges-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.ranges-table tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 500; color: var(--muted);
  font-size: .85rem; }
.ranges-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; }
.ranges-table td { color: var(--ink); font-weight: 600; }
.ranges-table tbody tr:last-child th, .ranges-table tbody tr:last-child td { border-bottom: 0; }
.range-head { padding: 14px 8px !important; color: #fff; font-weight: 600; line-height: 1.15; border-bottom: 0 !important; }
.range-head + .range-head { border-left: 4px solid #fff; }
.range-kicker { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.range-name { display: block; font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; }
.range-plug { background: #c2337f; }
.range-relaxation { background: #6fa9ee; color: var(--ink); }
.range-intense { background: #2f6fd0; }
.range-alu { background: #1f2d3a; box-shadow: inset 0 0 0 2px #e6b556; }
.range-alu .range-name { color: #ffc661; }
.range-plain { background: var(--night-2); }
.range-check { fill: var(--brand-strong); vertical-align: middle; }
.range-price td { font-size: 1rem; color: var(--brand-strong); }
.ranges-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.ranges-cta { margin: 20px 0 0; }
.range-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .range-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.range-card { padding: 22px; border-radius: var(--radius); color: #fff; }
.range-card p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .9rem; }
.range-card .range-card-name { color: #fff; font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.range-alu .range-card-name { color: #ffc661; }
.range-card .range-card-price { margin: 4px 0 10px; color: #fff; font-weight: 700; font-size: 1.3rem; }

/* Garanties (à côté du prix) : trois écussons roses */
.warranty-box { margin-top: 22px; padding: 20px 16px 18px; border: 2px solid var(--brand); border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--stage)); text-align: center; }
.warranty-title { margin: 0 0 14px; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-strong); }
.shields { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shields li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0; line-height: 1.25; color: var(--ink); }
.shield { position: relative; width: 58px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 6px; font-size: .7rem; font-weight: 600; line-height: 1; color: var(--ink); text-transform: uppercase; }
.shield::before, .shield::after { content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50% 0, 100% 14%, 100% 52%, 50% 100%, 0 52%, 0 14%); }
.shield::before { background: linear-gradient(135deg, #f37cc0, var(--brand-strong)); }
.shield::after { inset: 7px; background: #fff; }
.shield { isolation: isolate; }
.shield b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.warranty-link { display: inline-block; margin-top: 14px; font-size: .8rem; color: var(--brand-hover); }

/* Vidéos d'avis clients */
.reviews-video { background: var(--stage); }
.videos { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 600px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.video-play, .video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--night); }
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.video-play:hover img { transform: scale(1.03); }
.video-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(216, 27, 132, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.video-icon::after { content: ""; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff; }
.video-title { margin: 12px 4px 0; font-weight: 600; color: var(--ink); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--brand-strong); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-top: 10px; color: var(--muted); }

/* ===== Audit 2 · conseils-pages-info ===== */
/* Conseils et pages d'information : photo de couverture, colonne « Votre projet » (téléphone, devis, gammes) à droite
   de l'article sur grand écran, sous l'article ailleurs ; encadré des garanties ; rubriques de /conseils/ avec
   vignettes ; showrooms (visite en visio, magasins américains repliés). */
.page-main { min-width: 0; }
.page-cover { margin: 8px 0 32px; max-width: 760px; }
.page-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius);
  background: var(--stage); }
.page-main > .warranty-box { max-width: 760px; margin: 8px 0 8px; padding: 24px 20px 22px; }
.page-main > .warranty-box + .prose td:last-child { white-space: nowrap; } /* garanties : « 20 ans » sur une ligne */
.page-aside { display: grid; gap: 14px; align-content: start; margin: 48px 0 8px; }
.page-aside .aside-phone { padding: 24px; }
.page-aside .aside-phone a { font-size: 1.45rem; }
.page-aside .aside-phone p:last-child { margin: .5em 0 0; font-size: .85rem; }
.page-aside .guide-ranges { margin-top: 18px; }
.page-aside .guide-ranges h2 { font-size: 1.15rem; margin-bottom: .8em; }
/* gammes de la colonne : toutes visibles, sur plusieurs lignes, même sur téléphone (la rangée qui défile est celle
   des filtres des pages de gamme ; ici, elle élargirait la colonne au-delà de l'écran) */
.page-aside .guide-ranges .chips { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
@media (min-width: 1100px) {
  .page-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 340px); gap: 64px; justify-content: space-between;
    align-items: start; }
  .page-aside { position: sticky; top: calc(var(--header-h) + 24px); margin-top: 56px; }
}
.guide-section { padding: 8px 0 40px; }
.guide-section h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .8em; }
.choice.has-cover { padding-top: 0; overflow: hidden; }
.choice-cover { display: block; width: calc(100% + 56px); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin: 0 -28px 12px; background: var(--line-soft); }
.showroom-visio { margin-top: 24px; padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.showroom-visio p { margin: 0 0 16px; color: var(--ink); }
details.stores { margin-top: 32px; padding: 0; border-top: 1px solid var(--line); }
details.stores summary { display: flex; align-items: center; gap: 12px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--ink); }
details.stores summary::-webkit-details-marker { display: none; }
details.stores summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--brand-strong); transition: transform .2s; }
details.stores[open] summary::after { transform: rotate(45deg); }
.stores-title { font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
.stores-count { margin-left: auto; color: var(--muted); font-size: .9rem; white-space: nowrap; }
details.stores > p { margin: 0 0 16px; color: var(--muted); }

/* Formulaires */
.form-layout { display: grid; gap: 32px; padding-block: 24px 72px; }
@media (min-width: 960px) { .form-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
.form-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
@media (min-width: 700px) { .form-card { padding: 40px; } }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--ink); font-size: .9rem; }
.field .req { color: var(--brand-strong); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75em 1em; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit;
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-strong); outline: none; box-shadow: 0 0 0 3px rgba(216, 27, 132, .35); }
.field-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.field-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand-strong); }
.field-check label { font-weight: 400; color: var(--ink); margin: 0; }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: var(--error); font-size: .85rem; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--error); }
.form-alert { background: #fdecea; color: var(--error); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.form-legal { font-size: .78rem; color: var(--muted); margin-top: 14px; }
.form-section { margin: 8px 0 -6px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-strong); }
.form-section ~ .form-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.product-pill { display: flex; gap: 14px; align-items: center; background: var(--stage); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 18px; }
.product-pill img { width: 88px; height: 66px; object-fit: contain; background: #fff; border-radius: 8px; }
.aside-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.aside-list li { display: flex; gap: 12px; }
.aside-list svg { flex: 0 0 auto; fill: var(--brand-strong); margin-top: 4px; }
/* Formulaires de demande : choix à toucher, deux étapes, réassurance, aperçu du catalogue */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { font-size: 16px; } /* pas de zoom iOS */
.field-help { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.field-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-chips legend { font-weight: 500; margin-bottom: 8px; color: var(--ink); font-size: .9rem; padding: 0; }
.chips-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .chips-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip-choice { position: relative; display: block; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-choice span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: .5em .8em; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: .9rem; font-weight: 500; line-height: 1.2;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.chip-choice:hover span { border-color: var(--ink); }
.chip-choice input:checked + span { border-color: var(--brand-strong); background: var(--brand-soft); color: var(--brand-hover);
  box-shadow: 0 0 0 1px var(--brand-strong) inset; }
.chip-choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 62, 164, .25); }
.form-progress { list-style: none; padding: 0; margin: 0 0 22px; display: none; gap: 8px; counter-reset: step; }
.form-progress li { flex: 1; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding-top: 10px; border-top: 3px solid var(--line-soft); counter-increment: step; }
.form-progress li::before { content: counter(step) ". "; }
.form-progress li.is-current, .form-progress li.is-done { color: var(--brand-strong); border-color: var(--brand-strong); }
[data-steps].is-stepped .form-progress { display: flex; }
.step-next, .step-back { display: none; }
[data-steps].is-stepped .step-next, [data-steps].is-stepped .step-back { display: block; }
[data-steps].is-stepped [data-step="2"] { display: none; }
[data-steps].is-stepped.on-step-2 [data-step="1"] { display: none; }
[data-steps].is-stepped.on-step-2 [data-step="2"] { display: block; animation: step-in .35s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { [data-steps].is-stepped.on-step-2 [data-step="2"] { animation: none; } }
.form-step + .form-step { margin-top: 18px; }
.form-step > .form-section { margin: 0 0 16px; }
.chips-timeframe { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
[data-steps].is-stepped .form-step + .form-step { margin-top: 0; }
.link-button { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; }
.link-button:hover { color: var(--ink); }
.trust-row { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); }
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { fill: var(--ok); flex: 0 0 auto; }
.trust-stars span { color: #f5a623; }
.form-quick-call { margin: 0 0 14px; font-size: .95rem; color: var(--muted); }
.form-quick-call a { color: var(--brand-strong); font-weight: 600; white-space: nowrap; }
@media (min-width: 960px) { .form-quick-call { display: none; } }
.catalogue-preview { display: flex; gap: 18px; align-items: center; margin: 0 0 22px; }
.catalogue-preview img { width: 112px; height: auto; border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); transform: rotate(-3deg); flex: 0 0 auto; }
.catalogue-preview ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.catalogue-preview li::before { content: "✓"; color: var(--brand-strong); font-weight: 700; margin-right: 8px; }
@media (min-width: 700px) { .catalogue-preview { gap: 28px; } .catalogue-preview img { width: 150px; } }
.reviews-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--stage); color: var(--ink); text-decoration: none; }
.reviews-stars { color: #f5a623; letter-spacing: 2px; font-size: 1.1rem; }
.aside-press { margin: 0 0 28px; }
.aside-press p { margin: 0 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.aside-press ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 24px; }
.aside-press img { height: 34px; width: auto; filter: grayscale(1); opacity: .7; }
.catalogue-download { display: flex; gap: 22px; align-items: center; margin: 8px 0 32px; }
.catalogue-download img { width: 110px; height: auto; border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); flex: 0 0 auto; }
.catalogue-download p { margin: 0; }
.catalogue-note { margin-top: 10px !important; font-size: .85rem; color: var(--muted); }
.next-steps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; }
.next-steps a { display: block; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--ink);
  text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.next-steps a:hover { border-color: var(--brand-strong); box-shadow: var(--shadow); }
.next-steps strong { display: block; color: var(--brand-strong); }
.next-steps span { font-size: .9rem; color: var(--muted); }
.aside-phone { background: var(--night); color: #fff; border-radius: var(--radius); padding: 28px; }
.aside-phone a { color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.aside-phone p { margin: 0 0 .3em; color: var(--night-muted); }
/* Formulaires de demande : récapitulatif des erreurs, mentions, e-mail de la page Contact */
.form-alert:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.form-summary p { margin: 0 0 6px; }
.form-summary ul { margin: 0; padding-left: 1.2em; }
.form-summary a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-legal-links { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; }
.field-check { flex-wrap: wrap; } /* erreur d'une case à cocher sous son libellé, pas dans une colonne à côté */
.field-check label { flex: 1 1 0; min-width: 0; }
.field-check .errorlist { flex: 0 0 100%; margin: 0 0 0 30px; }
.aside-phone .aside-mail { margin-top: 12px; }
.aside-phone .aside-mail a { font-size: 1rem; font-weight: 500; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Parrainage : les deux récompenses, les trois étapes, les conditions */
.referral { margin: 8px 0 36px; }
.referral-rewards { display: grid; gap: 14px; margin-bottom: 36px; }
@media (min-width: 600px) { .referral-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.referral-reward { background: var(--night); color: #fff; border-radius: var(--radius); padding: 26px 24px; }
.referral-reward .eyebrow { color: var(--brand); margin-bottom: .6em; }
.referral-reward p { margin: 0; color: var(--night-muted); }
.referral-reward small { display: block; margin-top: .6em; font-size: .8rem; }
.referral-amount { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: #fff !important;
  margin-bottom: .25em !important; }
@media (min-width: 900px) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps-3 { grid-template-columns: minmax(0, 1fr); } } /* colonne à côté du formulaire : étapes empilées */
.referral-reward .referral-amount { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.referral-title { margin: 36px 0 18px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.referral > p { color: var(--muted); }
.referral-cta { margin: 22px 0 0; }
.referral-terms { margin-top: 28px; font-size: .9rem; color: var(--muted); }
.referral-terms summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.referral-terms ul { margin: 12px 0 0; padding-left: 1.2em; }
.referral-cta .btn { margin: 0 8px 10px 0; }
.referral-reward a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Programme ambassadeur : avantages et engagements en liste dans les cartes sombres */
.ambassador-list { margin: .4em 0 0; padding: 0; list-style: none; color: var(--night-muted); }
.ambassador-list li { position: relative; padding-left: 1.3em; margin-top: .55em; }
.ambassador-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5em; height: .5em;
  border-radius: 50%; background: var(--brand); }
.ambassador-list strong { color: #fff; }
.share-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* Remerciement */
.thanks { max-width: 720px; padding-block: 56px 80px; }
.thanks-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; margin-bottom: 20px; }
.thanks-icon svg { fill: var(--brand-strong); }
.reference { display: inline-block; font-family: ui-monospace, Menlo, monospace; background: var(--stage); padding: .2em .6em; border-radius: 6px; }

/* Bandeau d'appel et pied de page */
.cta-band { background: var(--stage); padding: 72px 0; text-align: center; }
@media (min-width: 900px) { .cta-band { padding: 104px 0; } }
.cta-band-inner { max-width: 760px; }
.cta-band h2 { margin-bottom: .35em; }
.cta-band p { margin: 0 auto; color: var(--muted); font-size: 1.1rem; max-width: 34em; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.site-footer { background: var(--night); color: var(--night-muted); padding: 64px 0 28px; font-size: .85rem; }
.site-footer a, .site-footer .link-button { color: #e8e8ed; text-decoration: none; }
.site-footer a:hover, .site-footer .link-button:hover { color: var(--brand); text-decoration: none; }
.site-footer h2 { color: #fff; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1.2em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-grid img { width: 210px; height: auto; margin-bottom: 18px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 48px; padding-top: 20px; font-size: .78rem; }
.footer-bottom p { margin: 0; }

/* Barre d'actions mobile : capsule de verre flottante */
.sticky-actions { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; padding: 6px; border-radius: 999px; }
.sticky-actions a { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; font-weight: 600;
  text-decoration: none; color: var(--ink); border-radius: 999px; background: rgba(255, 255, 255, .55); }
.sticky-actions svg { fill: currentColor; }
.sticky-actions .sticky-cta { color: #fff; }
@media (min-width: 900px) { .sticky-actions { display: none; } }
.no-sticky .sticky-actions { display: none; }

/* ===== Audit 2 · parcours-contact ===== */
/* En-tête : le numéro reste à portée quand le menu est replié (900 à 1099 px : icône seule, horaires au survol) et
   s'écrit en entier dès 1200 px (icône seule de 1100 à 1199 px, où le menu complet prend la place). */
@media (min-width: 900px) and (max-width: 1099px) {
  .header-phone { display: inline-flex; justify-content: center; min-width: 44px; min-height: 44px; }
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1319px) {
  .header-phone span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* Menu mobile ouvert : devis et appel en fin de liste (la barre d'actions est masquée tant que le menu est ouvert) */
@media (max-width: 1099px) {
  .main-nav { overscroll-behavior: contain; }
  .main-nav li.nav-actions { display: grid; gap: 8px; padding: 14px 16px 10px; }
  .main-nav li.nav-actions a { display: flex; justify-content: center; padding: .75em 1em; font-size: 1rem; border-top: 0; white-space: normal; }
  .main-nav li.nav-actions a.btn-cta, .main-nav li.nav-actions a.btn-cta:hover { color: #fff; }
  .main-nav li.nav-actions small { text-align: center; color: var(--muted); font-size: .78rem; line-height: 1.4; }
}
/* De 700 à 1099 px (tablette, petit ordinateur), devis et appel côte à côte, horaires dessous : le menu ouvert tient
   dans l'écran au lieu de couper le bouton d'appel */
@media (min-width: 700px) and (max-width: 1099px) {
  .main-nav li.nav-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .main-nav li.nav-actions small { grid-column: 1 / -1; }
}
/* Barre d'actions sur une fiche : l'appel se réduit à son icône pour laisser la place au prix du modèle */
.sticky-actions.has-product { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
.sticky-actions.has-product .sticky-call { width: 48px; padding: 0; }
.sticky-actions.has-product .sticky-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sticky-actions.has-product .sticky-call svg { fill: var(--brand-strong); }
.sticky-price { display: flex; flex-direction: column; margin: 0; padding-left: 4px; line-height: 1.15; min-width: 0; }
.sticky-price small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-price b { font-size: 1.02rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sticky-actions.has-product .sticky-cta { padding: 0 20px; }
/* Bandeau d'appel : rappel au moment choisi et horaires des conseillers sous les deux boutons */
.cta-band .cta-band-more { margin-top: 18px; font-size: 1rem; text-wrap: balance; }
.cta-band .cta-band-more .link-arrow { white-space: normal; }
.cta-band .cta-band-hours { margin-top: 10px; font-size: .85rem; max-width: none; text-wrap: balance; }
/* Formulaires : message facultatif replié, horaires sous « Pressé ? », mensualités modèle par modèle, déroulé de la
   visite en visio, offre du moment à côté du devis */
.field-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--brand-strong); font-weight: 600;
  font-size: .9rem; list-style: none; }
.field-more summary::-webkit-details-marker { display: none; }
.field-more summary::before { content: "+"; width: 1.2em; font-size: 1.1rem; }
.field-more[open] summary { margin-bottom: 8px; }
.field-more[open] summary::before { content: "−"; }
.form-quick-call small { font-size: .8rem; }
.monthly-pick { margin: 0 0 28px; }
.monthly-pick h2 { font-size: 1.2rem; margin-bottom: .6em; }
.monthly-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
@media (min-width: 700px) { .monthly-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.monthly-more { margin-top: 6px; }
.monthly-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.monthly-list a:hover { border-color: var(--brand-strong); color: var(--ink); }
.monthly-list span { min-width: 0; font-size: .92rem; line-height: 1.3; }
.monthly-list strong { flex: 0 0 auto; color: var(--brand-strong); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.visio-steps { margin: 8px 0 28px; }
.aside-promo { margin: 0 0 24px; padding: .6em .9em; border-left: 3px solid var(--brand-strong); background: var(--stage); font-size: .9rem; }
/* Remerciement : référence dans la police du site, intertitres espacés, rappel du numéro et des horaires */
.reference { font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; padding: .2em .7em; border-radius: 8px; }
.thanks h2 { margin-top: 1.8em; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.thanks-call { color: var(--muted); }
.thanks-call a { font-weight: 600; white-space: nowrap; }
/* Pages d'erreur : les gammes, à un geste, toutes visibles sur téléphone (pas la rangée défilante des filtres de gamme) */
.error-ranges { margin: 28px 0 20px; flex-wrap: wrap; overflow-x: visible; padding: 0; }
/* Pied de page : pages par nombre de places et places allongées, en retrait sous « Spas » */
.site-footer .footer-sub { padding-left: 12px; }
.site-footer .footer-sub a { color: var(--night-muted); }
.site-footer .footer-sub a:hover { color: var(--brand); }

/* Bandeau cookies */
.consent { position: fixed; inset: auto 0 0 0; z-index: 90; padding: 12px; }
.consent-box { max-width: 720px; margin: 0 auto; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); padding: 24px; border: 1px solid var(--line-soft); }
.consent-box h2 { font-size: 1.1rem; }
.consent-box p { font-size: .88rem; color: var(--muted); }
.consent-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.consent-actions .btn { min-width: 140px; }
/* Bandeau en tête de page (atteint au clavier juste après « Aller au contenu ») ; compact sur mobile, où il ne
   masque plus la moitié de l'écran. Refuser et Accepter gardent la même taille. */
.consent:focus { outline: none; }
@media (max-width: 599px) {
  .consent { padding: 8px; }
  .consent-box { padding: 16px 18px; }
  .consent-box h2 { font-size: 1rem; margin-bottom: .3em; }
  .consent-box p { font-size: .8rem; line-height: 1.45; margin-bottom: .8em; }
  .consent-actions { flex-wrap: nowrap; }
  .consent-actions .btn { min-width: 0; flex: 1; }
}

/* Showrooms, conseils */
.choice { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--radius); background: var(--stage);
  text-decoration: none; color: var(--ink); transition: background .25s var(--ease), transform .25s var(--ease); }
.choice:hover { background: var(--line-soft); color: var(--ink); transform: translateY(-3px); }
.choice strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.choice span { color: var(--muted); font-size: .9rem; }
.choice::after { content: "Lire ›"; margin-top: auto; padding-top: 6px; color: var(--brand-strong); font-weight: 600; font-size: .9rem; }
.help { color: var(--muted); font-size: .85rem; }
.cards-text { display: grid; gap: 20px; }
@media (min-width: 700px) { .cards-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards-text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.text-card { border-radius: var(--radius); padding: 28px; background: var(--stage); }
.text-card h2, .text-card h3 { font-size: 1.2rem; }
.text-card p { color: var(--muted); }
.page-head { padding: 32px 0 12px; max-width: 820px; }
@media (min-width: 900px) { .page-head { padding: 56px 0 20px; } }
.legal-notice { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--stage); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; color: var(--muted); }
.legal-notice a { font-weight: 600; color: var(--brand-strong); }

/* Maillage interne : gammes en fin de conseil (titre à l'échelle des intertitres de l'article) ; nombre de places
   dans le titre des fiches, plus discret que le nom pour que celui-ci reste la première lecture. */
.guide-ranges { max-width: 760px; margin-top: 2.6em; }
.guide-ranges h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.guide-ranges .chips { margin-bottom: 0; }
.buy-box h1 .h1-seats { font-size: .55em; font-weight: 500; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; }

/* Showrooms */
.halls { display: grid; gap: 24px; padding: 8px 0 24px; }
.hall { position: relative; display: grid; gap: 28px; padding: 28px; border-radius: var(--radius); background: var(--stage); }
@media (min-width: 900px) { .hall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px 56px; align-items: center; } }
.hall h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.03em; }
.hall-intro { color: var(--muted); font-size: 1.05rem; max-width: 34em; }
.hall-facts { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 600px) { .hall-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hall-facts dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px; }
.hall-facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.hall-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hall-wide { grid-template-columns: minmax(0, 1fr); }
  .hall-wide .hall-intro { max-width: 46em; }
  .hall-wide .hall-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}
.hall-media img { width: 100%; border-radius: var(--radius-sm); object-fit: cover; aspect-ratio: 4 / 3; }
.stores { padding: 56px 0 0; }
.store-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .store-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .store-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.store-list li { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; background: #fff; }
.store-list strong { font-weight: 600; color: var(--ink); font-size: .95rem; }
.store-list span { color: var(--muted); font-size: .85rem; }
.showroom-band { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .showroom-band { grid-template-columns: minmax(0, 1.4fr) auto; gap: 48px; } }
.showroom-band h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); letter-spacing: -.03em; }
.showroom-band .lead { margin: 0; }
.showroom-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------------------------------------------------------
   Verre liquide (inspiré du « Liquid Glass » d'Apple) : surfaces translucides et floues, bord lumineux,
   reflet qui suit le pointeur (variables --mx / --my posées par site.js). Sans flou disponible, fond plus opaque.
   --------------------------------------------------------------------------------------------------------------- */
.header-row, .sticky-actions, .btn-glass, .size, .collection, .chips a, .buy-box, .form-card, .consent-box, .hall,
.hero-proof li, .card, .reason, .aside-phone {
  --mx: 50%; --my: -30%;
  position: relative;
  background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%),
    linear-gradient(var(--glass-bg), var(--glass-bg));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Bord lumineux (dégradé blanc et gris neutre sur 1 px) */
.header-row::after, .sticky-actions::before, .btn-glass::before, .size::before, .collection::before, .chips a::before, .hall::before,
.buy-box::before, .form-card::before, .consent-box::before, .card::before, .reason::before, .aside-phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* L'en-tête contient le menu mobile en position fixe : le flou passe sur une couche dédiée pour ne pas le capturer. */
.header-row { isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; box-shadow: none; }
.header-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%),
    linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong));
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (max-width: 1099px) {
  .main-nav { background: linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)); box-shadow: var(--glass-shadow), 0 30px 60px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.sticky-actions { position: fixed; background: linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)); }
.card { -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(120% 90% at var(--mx) var(--my),
  rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #fff, #fbfbfd); border-color: transparent; }
.card-media, .gallery-main { background: transparent; }
.card-media img, .collection-media img { mix-blend-mode: multiply; }

/* Fonds « aurore » rose très léger et fixe, pour que le verre ait quelque chose à réfracter */
.hero, .section-stage, .cta-band { position: relative; isolation: isolate; overflow: hidden; background-color: var(--stage); }
.hero::before, .section-stage::before, .cta-band::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(255, 62, 164, .16), transparent 70%),
    radial-gradient(34% 38% at 86% 14%, rgba(255, 170, 214, .30), transparent 70%),
    radial-gradient(40% 44% at 72% 88%, rgba(255, 214, 236, .55), transparent 70%),
    radial-gradient(30% 34% at 8% 92%, rgba(255, 255, 255, .9), transparent 70%); }
.section-stage::before, .cta-band::before { opacity: .4; }
/* L'accueil remonte sous la capsule d'en-tête pour qu'elle flotte sur l'aurore */
.page-home .cine { margin-top: calc(-1 * var(--header-h)); }
.section-night { position: relative; isolation: isolate; overflow: hidden; }
.section-night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 85% 0%, rgba(255, 62, 164, .22), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(255, 62, 164, .12), transparent 70%); }

/* Boutons : rose « liquide » (dégradé, reflet haut, ombre portée teintée) et bouton de verre */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-cta, .sticky-actions .sticky-cta { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 42%),
  linear-gradient(180deg, var(--brand-strong), #bf0f6c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 -2px 6px rgba(110, 0, 55, .25) inset, 0 8px 22px rgba(216, 27, 132, .32); }
.btn-cta:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 42%),
  linear-gradient(180deg, var(--brand-hover), #a80a5d); }
.btn-glass::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-glass:hover::after { transform: translateX(120%); }
.btn-glass { color: var(--ink); }
.btn-glass:hover { color: var(--ink); --glass-bg: rgba(255, 255, 255, .78); }
.btn-outline, .btn-light { background: rgba(255, 255, 255, .55); color: var(--ink); border-color: rgba(255, 255, 255, .8);
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn-outline:hover, .btn-light:hover { background: rgba(255, 255, 255, .85); color: var(--ink); }

/* Composants en verre */
.size:hover { --glass-bg: rgba(255, 255, 255, .8); }
.size-number { background: linear-gradient(180deg, var(--ink) 30%, #5a5a60); -webkit-background-clip: text; background-clip: text; color: transparent; }
.collection { --glass-bg: #fff; } /* opaque : le fondu « multiply » des photos détourées ne laisse aucun rectangle */
.collection:hover { box-shadow: var(--glass-shadow), var(--shadow); }
.chips a { --glass-bg: rgba(255, 255, 255, .6); }
.chips a[aria-current="page"] { background: linear-gradient(180deg, #3a3a3e, var(--ink)); color: #fff; }
.hero-proof { gap: 10px; }
.hero-proof li { --glass-bg: rgba(255, 255, 255, .5); padding: .45em 1em; border-radius: 999px; color: var(--ink); font-weight: 500; }
.buy-box { --glass-bg: rgba(255, 255, 255, .7); padding: 24px; border-radius: var(--radius); }
@media (min-width: 960px) { .buy-box { padding: 32px; } }
.form-card { --glass-bg: rgba(255, 255, 255, .82); border-color: transparent; }
.consent-box { --glass-bg: rgba(255, 255, 255, .8); border-color: transparent; }
/* Verre sombre sur fond noir */
.reason, .aside-phone { --glass-bg: rgba(255, 255, 255, .05); --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, .35),
  rgba(255, 255, 255, .04) 40%, rgba(255, 62, 164, .35) 75%, rgba(255, 255, 255, .2));
  background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(var(--glass-bg), var(--glass-bg));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 20px 40px rgba(0, 0, 0, .35); }
.aside-phone { background-color: var(--night); } /* posé sur fond blanc : le verre sombre a besoin de son fond noir */
.reasons { gap: 16px; }
@media (min-width: 700px) { .reasons { column-gap: 16px; } }
.reason { padding: 28px; border-top: 0; border-radius: var(--radius); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, .92); --glass-bg-strong: rgba(255, 255, 255, .96); }
}

/* ---------------------------------------------------------------------------------------------------------------
   Mouvement de l'accueil (style « vitrine Apple ») : entrée du titre, spa qui se redresse et grandit au défilement
   (--hero-p, de 0 à 1, posé par site.js), bandeau qui défile, apparition des sections, cartes qui se soulèvent.
   Tout est désactivé si le visiteur demande moins d'animations ; sans JavaScript, le contenu reste visible.
   --------------------------------------------------------------------------------------------------------------- */
.hero h1 .line { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.hero h1 .line > span { display: inline-block; }
@media (min-width: 560px) { .hero h1 .line { display: block; } }
/* Pas de perspective ni d'animation sur le cadre : cela isolerait l'image et ferait réapparaître son fond blanc
   (fondu « multiply »). La perspective est portée par la transformation de l'image elle-même. */
.hero-media img { transform-origin: 50% 70%; }

/* Ouverture cinéma (haut de l'accueil). État par défaut, sans animation : la vidéo en plein écran, titre visible.
   Avec le mouvement, --cine-p (0 → 1, posé par site.js) fait passer d'une petite fenêtre au plein écran. */
/* Sans mouvement : vidéo en plein écran (image fixe), titre visible */
.cine { --cine-p: 1; --cine-w0: 210px; --cine-h0: 130px; position: relative; overflow-x: clip; background: var(--night); color: #fff; }
@media (max-width: 699px) { .cine { --cine-w0: 140px; --cine-h0: 105px; } }
.cine-stage { height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.cine-backdrop { position: absolute; inset: -40px; z-index: -2; background: url("../img/spa-soir-affiche.fafa70778277.webp") center / cover;
  filter: blur(28px) brightness(.38) saturate(1.3); }
.cine-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 62, 164, .18), transparent 70%); }
.cine-frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cine-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 65%, rgba(0, 0, 0, .45)); }
.cine-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cine-title { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; margin: 0; padding: 0 var(--gutter); text-align: center;
  font-size: clamp(2.6rem, 8vw, 6.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
  pointer-events: none; }
.cine-word { display: inline-block; white-space: nowrap; }
@media (max-width: 699px) { .cine-title { flex-direction: column; } }
.cine-hint { display: none; position: absolute; bottom: 104px; left: 0; right: 0; margin: 0; text-align: center; font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) { .cine-hint { bottom: 40px; } }
.cine-hint::after { content: ""; display: block; width: 1px; height: 36px; margin: 12px auto 0; background: linear-gradient(#fff, transparent); }
.cine-end { position: absolute; bottom: 120px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (min-width: 900px) { .cine-end { bottom: 72px; } }
.cine-end .eyebrow { margin: 0; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }

/* Bandeau d'engagements qui défile en continu */
.marquee { display: flex; overflow: hidden; gap: 0; padding: 18px 0; background: var(--night); color: #f5f5f7; }
.marquee-track { display: flex; flex: 0 0 auto; gap: 0; list-style: none; margin: 0; padding: 0; min-width: 100%; justify-content: space-around; }
.marquee-track li { white-space: nowrap; padding: 0 28px; font-size: .9rem; font-weight: 500; letter-spacing: .02em; }
.marquee-track li::before { content: "✦"; color: var(--brand); margin-right: 28px; font-size: .75em; vertical-align: .1em; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrée de la présentation : jouée quand elle arrive à l'écran (classes posées par site.js ; sans script, rien n'est masqué) */
  .hero.hero-wait .eyebrow, .hero.hero-wait .lead, .hero.hero-wait .hero-actions, .hero.hero-wait .hero-media img,
  .hero.hero-wait .hero-proof li { opacity: 0; }
  .hero.hero-wait h1 .line > span { transform: translate3d(0, 105%, 0); }
  .hero.is-in .eyebrow { animation: rise .9s var(--ease-out) .05s both; }
  .hero.is-in h1 .line > span { animation: line-up 1.1s var(--ease-out) both; }
  .hero.is-in h1 .line + .line > span { animation-delay: .12s; }
  .hero.is-in .lead { animation: rise 1s var(--ease-out) .3s both; }
  .hero.is-in .hero-actions { animation: rise 1s var(--ease-out) .42s both; }
  .hero.is-in .hero-media img { animation: spa-in 1.6s var(--ease-out) .2s both; }
  .hero.is-in .hero-proof li { animation: rise .9s var(--ease-out) both; }
  .hero.is-in .hero-proof li:nth-child(1) { animation-delay: .7s; }
  .hero.is-in .hero-proof li:nth-child(2) { animation-delay: .8s; }
  .hero.is-in .hero-proof li:nth-child(3) { animation-delay: .9s; }

  /* Défilement : le spa se redresse et grandit à mesure que la présentation monte dans l'écran */
  .hero-media img { transform: perspective(1400px) rotateX(calc((1 - var(--hero-p, 1)) * 16deg)) scale(calc(.94 + var(--hero-p, 1) * .1)); }

  /* Ouverture cinéma : le titre s'écarte, la vidéo s'agrandit jusqu'au plein écran (seulement si le script peut tourner,
     et à partir de 700 × 600 px : sur téléphone, même tenu à l'horizontale, l'ouverture s'affiche directement) */
  @media (scripting: enabled) and (min-width: 700px) and (min-height: 600px) {
    .cine { --cine-p: 0; height: 200vh; }
    .cine-stage { position: sticky; top: 0; }
    .cine-frame { clip-path: inset(calc((50% - var(--cine-h0)) * (1 - var(--cine-p))) calc((50% - var(--cine-w0)) * (1 - var(--cine-p)))
      round calc(28px * (1 - var(--cine-p)))); }
    .cine-video { transform: scale(calc(1.18 - var(--cine-p) * .18)); }
    .cine-backdrop { opacity: calc(1 - var(--cine-p)); }
    .cine-left { translate: calc(var(--cine-p) * -70vw) 0; }
    .cine-right { translate: calc(var(--cine-p) * 70vw) 0; }
    .cine-title { opacity: calc(1 - var(--cine-p) * 1.1); }
    .cine-hint { display: block; opacity: calc(1 - var(--cine-p) * 4); }
    .cine-end { opacity: calc((var(--cine-p) - .82) * 5.5); }
    .cine:not(.is-open) .cine-end { visibility: hidden; }
    .cine-word { animation: rise 1.2s var(--ease-out) .15s both; }
    .cine-right { animation-delay: .3s; }
    .cine-hint::after { animation: hint 2s var(--ease) infinite; }
  }

  .marquee-track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }

  /* Apparition au défilement (classes posées par site.js sur les blocs encore hors écran) */
  .reveal { opacity: 0; transform: translate3d(0, 36px, 0) scale(.98); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Cartes qui se soulèvent au survol, sans inclinaison */
  @media (hover: hover) {
    .card:hover, .collection:hover, .size:hover {
      transform: translate3d(0, -4px, 0);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
/* « translate » et « scale » s'ajoutent à la transformation du défilement au lieu de la remplacer */
@keyframes spa-in { from { opacity: 0; translate: 0 80px; scale: .9; filter: blur(8px); } to { opacity: 1; translate: none; scale: none; filter: none; } }
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ===== Audit 2 · accueil ===== */
/* Ouverture : un seul titre (H1) qui dit ce que vend Tropic Spa, et des boutons dès l'arrivée. Sans animation
   (mouvement réduit, sans script, téléphone ou écran de moins de 600 px de haut) : titre, présentation et boutons se
   suivent au centre de la vidéo. Avec l'animation (à partir de 700 × 600 px) : boutons juste sous le titre à
   l'arrivée, présentation à la fin de l'ouverture. */
.cine-stage { height: auto; min-height: 100vh; min-height: 100svh; align-content: center; gap: 32px;
  padding-block: calc(var(--header-h) + 32px) 56px; }
.cine-kicker { flex-basis: 100%; margin-bottom: 1.1rem; font-size: clamp(.75rem, 1.1vw, .9rem); font-weight: 600; letter-spacing: .2em;
  line-height: 1.4; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.cine-start { display: none; }
.cine-end { position: static; }
/* texte posé sur toute la hauteur de la vidéo : voile plus sombre pour qu'il reste lisible sur l'eau claire */
.cine-frame::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .3) 35%, rgba(0, 0, 0, .3) 65%, rgba(0, 0, 0, .55)); }
.cine-lead { max-width: 34em; margin: 0 var(--gutter); text-align: center; color: rgba(255, 255, 255, .9);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.cine-actions, .cine-start { flex-wrap: wrap; justify-content: center; gap: 12px 16px; padding-inline: var(--gutter); }
.cine-actions { display: flex; }
.cine .btn-glass, .cine .btn-glass:hover { --glass-bg: rgba(255, 255, 255, .92); } /* bouton blanc, lisible sur la vidéo sombre */
@media (max-height: 760px) { .cine-lead { display: none; } }
@media (max-width: 699px) {
  /* le titre commence sous le bouton pause de la vidéo (en haut à droite) */
  .cine-stage { min-height: 72vh; min-height: 72svh; gap: 24px; padding-block: calc(var(--header-h) + 64px) 32px; }
  .cine-word { white-space: normal; }
}
/* Téléphone tenu à l'horizontale (moins de 500 px de haut) : titre plus petit et boutons remontés, au-dessus de la
   barre d'actions collante */
@media (max-width: 899px) and (max-height: 500px) {
  .cine-stage { gap: 14px; padding-block: calc(var(--header-h) + 8px) 84px; }
  .cine-title { font-size: clamp(2rem, 11vh, 2.75rem); }
  .cine-kicker { margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 700px) and (min-height: 600px) {
  .cine-stage { height: 100vh; height: 100svh; min-height: 0; padding-block: 0; }
  .cine-end { position: absolute; }
  .cine-frame::after { background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 65%, rgba(0, 0, 0, .45)); }
  /* dans le flux, juste sous le titre : ne le recouvre jamais, et reste au-dessus du bandeau cookies sur ordinateur */
  .cine-start { display: flex; opacity: calc(1 - var(--cine-p) * 4); }
  .cine.is-scrolled .cine-start, .cine.is-open .cine-start { visibility: hidden; }
  .cine-kicker { animation: rise 1s var(--ease-out) both; }
}

/* Gammes illustrées par une photo d'ambiance (spa en situation) : photo entière, coins arrondis, sans fondu */
.collection.has-photo { padding-bottom: 28px; }
.collection.has-photo .collection-media img { width: 100%; max-width: none; max-height: none; aspect-ratio: 3 / 2; object-fit: cover;
  mix-blend-mode: normal; border-radius: var(--radius-sm); }
@media (min-width: 800px) { .collection-wide.has-photo { padding-bottom: 48px; } }
/* Gamme encore sans photo d'ambiance (les Saunas) : photo détourée à sa taille d'origine, jamais agrandie, centrée
   dans un cadre gris clair aux proportions des photos d'ambiance, pour rester alignée sur la carte voisine */
.collection:not(.has-photo) { padding-bottom: 28px; }
.collection:not(.has-photo) .collection-media { aspect-ratio: 3 / 2; min-height: 0; align-items: center; background: var(--stage);
  border-radius: var(--radius-sm); } /* min-height : le cadre garde ses proportions même si la photo est plus haute */
.collection:not(.has-photo) .collection-media img { width: auto; max-width: 100%; max-height: 100%; border-radius: 0; }
@media (min-width: 800px) { .collection-wide:not(.has-photo) { padding-bottom: 48px; } }

/* Section confiance : quatre cartes (SAV, communauté, cryptomonnaies, garantie), deux par rangée sur ordinateur */
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof-figure span { display: block; font-size: .3em; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; }
.proof .shields { width: 100%; max-width: 300px; margin-bottom: 20px; }
.press-more { margin: 32px 0 0; text-align: center; }

/* Bandeau catalogue, avant les étapes : pour le visiteur qui n'est pas encore prêt à demander un devis */
.catalogue-band-section { padding-bottom: 0; }
.catalogue-band { display: grid; justify-items: center; gap: 28px; padding: 36px 24px; border-radius: var(--radius); background: var(--stage);
  text-align: center; }
.catalogue-band-cover { width: 140px; border-radius: 6px; box-shadow: 0 18px 40px rgba(29, 29, 31, .18); }
.catalogue-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; }
.catalogue-band .lead { margin: 0 auto 24px; max-width: 30em; }
@media (min-width: 700px) {
  .catalogue-band { grid-template-columns: 180px minmax(0, 1fr); justify-items: start; align-items: center; gap: 48px; padding: 48px;
    text-align: left; }
  .catalogue-band-cover { width: 100%; }
  .catalogue-band .lead { margin-left: 0; }
}
@media (min-width: 900px) {
  .catalogue-band { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; max-width: 980px; margin-inline: auto; padding: 56px 72px; }
}

/* Offre du moment, sous le bandeau défilant : seulement pendant une offre active, avec sa vraie date de fin */
.promo-band { padding-bottom: 0; }
.promo-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 20px 24px; border-left: 3px solid var(--brand-strong); background: var(--stage); }
.promo-band-inner h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.promo-band-inner p { margin: 0; }
.promo-band-inner .eyebrow { margin-bottom: .5em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Corrections audit mise en page (2026-10) : typographie, contrastes (WCAG 2.2 AA), clavier, équilibre des grilles.
   --------------------------------------------------------------------------------------------------------------- */
/* Titres équilibrés sur leurs lignes, pas de mot seul en fin de paragraphe (« Parlons- / en. »). Les petits titres
   (h3) restent en coupe normale, qui ne sépare pas « après- / vente » ; seuls ceux des étapes sont équilibrés. */
h1, h2, .steps h3, .size-link, .warranty-link { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Sur-titres : roses et petits partout (la règle grise des chapeaux de section l'emportait) ; un ton plus soutenu sur
   les fonds gris pour garder un contraste de 4,5:1 */
.section-head .eyebrow { color: var(--brand-strong); font-size: .75rem; }
.section-night .section-head .eyebrow { color: var(--brand); }
.hero .eyebrow, .section-stage .eyebrow, .section-stage .section-head .eyebrow, .reviews-video .section-head .eyebrow { color: var(--brand-hover); }
/* Liens dans les sections sombres : rose clair (6:1 sur le noir) */
.section-night a:not(.btn) { color: var(--brand); }
.section-night a:not(.btn):hover { color: #fff; }
/* Gamme Relaxation (bleu clair de tropicspa.fr) : texte foncé, lisible */
.range-card.range-relaxation, .range-card.range-relaxation p, .range-card.range-relaxation .range-card-name,
.range-card.range-relaxation .range-card-price { color: var(--ink); }

/* Fiche produit : écussons de garantie, caractéristiques clés et tableau des gammes sur petit écran */
@media (max-width: 379px) {
  .warranty-box { padding-inline: 10px; }
  .shields { gap: 4px; }
  .shields li { font-size: .66rem; }
  .key-facts div { padding-inline: 10px; }
}
@media (max-width: 899px) { .range-name { letter-spacing: 0; } }
@media (max-width: 699px) { .range-name { font-size: .85rem; } }
/* Photos de faible définition (certains saunas) : moins agrandies, donc moins floues */
.gallery.is-lowres .gallery-main img { max-width: 420px; max-height: 340px; }
/* Sur ordinateur, la galerie reste à l'écran pendant la lecture de la colonne d'achat */
@media (min-width: 960px) and (min-height: 720px) { .gallery { position: sticky; top: 88px; } }

/* Galerie : flèches, compteur et balayage (ajoutés par site.js quand il y a plusieurs photos) */
.gallery-main { position: relative; touch-action: pan-y pinch-zoom; }
.gallery-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: var(--glass-shadow); color: var(--ink);
  cursor: pointer; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: background .2s var(--ease); }
.gallery-nav:hover { background: #fff; }
.gallery-nav::before { content: ""; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.gallery-prev { left: 10px; }
.gallery-prev::before { transform: translateX(2px) rotate(-135deg); }
.gallery-next { right: 10px; }
.gallery-next::before { transform: translateX(-2px) rotate(45deg); }
.gallery-count { position: absolute; right: 12px; bottom: 10px; margin: 0; padding: .1em .7em; border-radius: 999px; background: rgba(255, 255, 255, .85);
  font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }

/* Pied de page : il descend sous la barre d'actions mobile (plus de bande blanche en bas de page) */
@media (max-width: 899px) { body:not(.no-sticky) .site-footer { padding-bottom: calc(28px + 84px); } }
/* Menu mobile ouvert : la barre d'actions et le bandeau cookies s'effacent pour ne pas couvrir les derniers liens ; le
   bandeau revient à la fermeture du menu tant qu'aucun choix n'est fait */
.menu-open .sticky-actions, .menu-open .consent { display: none; }
/* Menu mobile presque opaque : le flou d'arrière-plan ne s'applique pas sous l'en-tête, le texte de la page se lisait
   entre les liens. */
@media (max-width: 1099px) { .main-nav { --glass-bg-strong: rgba(255, 255, 255, .96); } }

/* Boutons pause de la vidéo d'ouverture et du bandeau défilant (ajoutés par site.js quand le mouvement est actif) */
.motion-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(11, 11, 12, .55); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s var(--ease); }
.motion-toggle:hover { background: rgba(11, 11, 12, .8); }
.motion-toggle::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; } /* pause : deux barres */
.motion-toggle.is-paused::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor; } /* lecture : triangle */
/* En haut à droite, sous l'en-tête : le bandeau cookies, affiché en bas de l'écran à la première visite, ne le couvre pas */
.cine-pause { position: absolute; top: calc(var(--header-h) + 12px); right: 16px; z-index: 2; }
@media (min-width: 900px) { .cine-pause { top: calc(var(--header-h) + 16px); right: 32px; } }
.marquee { position: relative; }
.marquee.has-pause::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0), var(--night) 60%); }
.marquee-pause { position: absolute; top: 50%; right: 12px; translate: 0 -50%; z-index: 1; width: 32px; height: 32px; }
.marquee-pause::before { width: 10px; height: 12px; border-inline-width: 3px; }
.marquee-pause.is-paused::before { border-width: 6px 0 6px 10px; margin-left: 2px; }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle, .marquee.has-pause::after { display: none; }
  /* Bandeau immobile : tous les engagements visibles, sur plusieurs lignes */
  .marquee-track[aria-hidden="true"] { display: none; }
  .marquee-track { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 8px; min-width: 0; }
  .marquee-track li { padding: 0 14px; }
  .marquee-track li::before { margin-right: 10px; }
}

/* Cryptomonnaies : quand la carte est étroite, 3 + 2 logos (noms en 12 px, sans chevauchement) */
@media (max-width: 439px), (min-width: 900px) and (max-width: 1199px) {
  .coins { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .coins li { flex: 0 0 calc((100% - 8px) / 3); }
}

/* Accueil, cartes « preuves » : titres alignés d'une carte à l'autre (rangées partagées), chiffre et logos posés juste
   au-dessus de leur titre */
@media (min-width: 900px) {
  .proofs { grid-template-rows: auto auto 1fr auto; }
  .proof { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
  .proof > :first-child { align-self: end; }
  .proof .link-arrow { align-self: end; }
}

/* Accueil : le bandeau showroom (fond blanc, après la section grise) s'enchaîne avec les étapes, blanches aussi */
.section-showroom { padding-bottom: 0; }

/* Parrainage : les deux montants alignés, même quand un sur-titre passe sur deux lignes ; à côté du formulaire, les
   trois étapes s'empilent (numéro à gauche, texte à droite) au lieu de trois colonnes trop étroites */
@media (min-width: 600px) { .referral-reward .eyebrow { min-height: 3.2em; } }
@media (min-width: 960px) {
  .steps-3 { gap: 0; }
  .steps-3 li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: baseline; padding-block: 18px; }
  .steps-3 li::before { grid-row: span 2; margin: 0; font-size: 1.8rem; }
  .steps-3 li > * { grid-column: 2; }
}

/* Focus clavier : toute la carte produit est entourée (elle est entièrement cliquable) */
@supports selector(:has(*)) {
  .card:has(h3 a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
  .card h3 a:focus-visible { outline: none; }
}

/* Gamme d'un seul modèle (spas de nage) : une carte large, photo à gauche et texte à droite */
@media (min-width: 800px) {
  .grid > .card:only-child { grid-column: 1 / -1; flex-direction: row; }
  .grid > .card:only-child .card-media { flex: 1 1 55%; aspect-ratio: auto; min-height: 340px; }
  .grid > .card:only-child .card-body { flex: 1 1 45%; justify-content: center; padding: 40px; }
  .grid > .card:only-child h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .grid > .card:only-child .card-price { margin-top: 18px; }
}

/* Page introuvable : boutons espacés */
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ===== Audit 2 · finitions-typographie ===== */
/* Libellés de formulaire en graisse 500 (plus large) : un libellé sur deux lignes se coupe en deux moitiés égales,
   l'astérisque des champs obligatoires ne reste jamais seul sur sa ligne */
.field label, .field-chips legend { text-wrap: balance; }

/* Zones tactiles d'au moins 44 × 44 px (recommandations Apple et Google). Là où la mise en page ne doit pas bouger,
   une marge intérieure compensée par une marge négative agrandit la zone de toucher sans déplacer le texte. */
.menu-toggle { padding: 10px; }
.logo { display: inline-block; padding: 10px 0; margin: -10px 0; }
.crumbs a { display: inline-block; padding: 12px 7px; margin: -12px -7px; }
.form-quick-call a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.link-arrow { display: inline-block; padding: 10px 0; margin: -10px 0; }
.key-facts dd a, .hall-facts dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.buy-reassure a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.warranty-link { padding: 12px 0; margin: 2px 0 -12px; }
.aside-phone > a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.aside-phone .aside-mail a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.site-footer p a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.referral-terms summary { padding: 11px 0; margin: -11px 0; }
/* Zone agrandie passée au-dessus de ce qui suit, qui la coupait sinon : horaires sous le numéro de téléphone, galerie
   de la fiche ou titre long du conseil (seconde ligne) sous le fil d'Ariane */
.site-footer p a, .form-quick-call a, .crumbs a { position: relative; z-index: 1; }
/* Boutons pause ronds (40 et 32 px) : zone de toucher agrandie autour du cercle, sans changer son dessin (le retrait se
   compte depuis l'intérieur de la bordure de 1 px) */
.motion-toggle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.marquee-pause::after { inset: -7px; }
/* Questions fréquentes : la marge intérieure passe de <details> à <summary>, toute la ligne de la question se touche
   (26 → 62 px) ; espacements inchangés */
.faq details { padding: 0; }
.faq summary { padding: 18px 0; }
.faq details[open] summary { padding-bottom: 10px; }
.faq .answer { padding: 0 0 18px; }
@media (max-width: 899px) {
  .chips a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Liens légaux des formulaires sur leur propre ligne : leur zone agrandie (12 px au-dessus et au-dessous) ne recouvre
     plus l'adresse e-mail de la phrase précédente ; même écart de 24 px avant la première ligne et entre les lignes */
  .form-legal-links { display: flex; margin-top: 24px; row-gap: 24px; }
  .form-legal-links a { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; }
  /* Pied de page : une ligne de 44 px par lien */
  .site-footer ul { gap: 0; }
  .site-footer li a { display: flex; align-items: center; min-height: 44px; }
  .site-footer li .link-button { min-height: 44px; }
  /* Fiche : liens de la colonne d'achat (livraison, showroom, visio, rappel) les uns sous les autres, 44 px chacun sans
     que leurs zones se recouvrent ; lien « Prix d'un spa » à 6 px de la ligne au-dessus, comme la version Intense, pour
     que sa zone ne recouvre jamais le lien « livraison » */
  .buy-reassure { gap: 22px; }
  .buy-price .price-guide { margin-top: 6px; }
  .buy-price .price-guide a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* Petits boutons (devis par version, voisins comparés, partage du parrainage) */
  .btn-sm { min-height: 44px; }
}

/* ===== Langues (français, espagnol, anglais) ===== */
/* Sélecteur : menu déroulant dans l'en-tête (code de la langue en cours), noms complets dans le menu mobile et le pied
   de page. La langue en cours est marquée ; une page non traduite mène à l'accueil de l'autre langue (infobulle). */
.languages { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.languages li + li::before { content: "|"; margin: 0 .55em; opacity: .35; }
.languages a { text-decoration: none; color: inherit; opacity: .75; transition: opacity .2s, color .2s; }
.languages a:hover { opacity: 1; color: var(--brand-strong); }
.languages a[aria-current="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-underline-offset: .3em;
  text-decoration-thickness: 1px; }
.header-languages { display: flex; flex: none; color: var(--ink); }
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: .35em; min-width: 44px; min-height: 44px; padding: 0 4px;
  list-style: none; cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .06em; opacity: .8; transition: opacity .2s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { opacity: 1; }
.lang-menu summary svg { fill: currentColor; }
.languages-menu { position: absolute; top: calc(100% + 6px); right: -8px; z-index: 60; display: grid; min-width: 168px; padding: 6px;
  border-radius: 18px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05); }
.lang-menu:not([open]) .languages-menu { display: none; }
.languages-menu li + li::before { content: none; }
.languages-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: .9rem;
  opacity: 1; }
.languages-menu a:hover { background: var(--stage); }
.languages-menu a[aria-current="true"] { text-decoration: none; color: var(--brand-strong); }
.languages-menu a[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: 12px; }
@media (max-width: 359px) { .header-languages { display: none; } }
.main-nav li.nav-languages { padding: 14px 24px; border-top: 1px solid rgba(0, 0, 0, .06); font-size: 1rem; }
.main-nav li.nav-languages a { display: inline-flex; padding: 6px 0; border-top: 0; font-size: 1rem; }
.footer-languages { margin-top: 40px; font-size: .85rem; }
.footer-languages .languages a { color: #e8e8ed; }
.footer-languages .languages a:hover { color: var(--brand); }
/* En anglais et en espagnol, les libellés du menu sont plus longs et le numéro s'écrit avec l'indicatif (+33) : sur
   ordinateur, le numéro se réduit à son icône (numéro et horaires au survol, lien d'appel inchangé). */
@media (min-width: 1100px) {
  html:not([lang="fr"]) .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; }
  html:not([lang="fr"]) .header-phone { justify-content: center; min-width: 44px; min-height: 44px; }
}
/* Petits ordinateurs (1100 à 1279 px, souvent un écran de 1280 px affiché à 125 %) : logo et menu un peu plus serrés
   pour garder sur une ligne le menu, le sélecteur de langue et le bouton de devis ; hors français, l'icône du
   téléphone laisse sa place (numéro dans le pied de page et la page de contact). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .logo img { width: 160px; }
  .main-nav { margin-left: 12px; }
  .main-nav a { font-size: .8rem; }
  .header-actions { gap: 8px; }
  html:not([lang="fr"]) .header-phone { display: none; }
}