/* ============================================
   LUXEO — Douche italienne clé en main
   Design system : turquoise + or, spa premium
   ============================================ */

:root {
  --turquoise: #0e7c7b;
  --turquoise-deep: #095958;
  --turquoise-glow: rgba(14, 124, 123, 0.35);
  --or: #c9a84c;
  --or-deep: #a78a35;
  --fond-clair: #f0fafa;
  --fond-sombre: #0a2a2a;
  --fond-sombre-2: #0f3938;
  --texte: #1a1a2e;
  --texte-mute: #5a6470;
  --blanc: #ffffff;
  --ligne: rgba(14, 124, 123, 0.14);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 160px);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--blanc);
  color: var(--texte);
  font-weight: 300;
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------- TYPO ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--turquoise);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--turquoise);
}

h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6.5vw, 92px); }
h2 { font-size: clamp(32px, 4.6vw, 64px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); }
h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; }

.italic { font-style: italic; font-weight: 200; }
.heavy { font-weight: 600; }
.gold { color: var(--or); }
.turq { color: var(--turquoise); }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--texte-mute);
  max-width: 56ch;
  font-weight: 300;
  line-height: 1.65;
}

/* ---------- CONTAINER ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: var(--section-y);
  position: relative;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.4s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(5px); }

.btn-primary {
  background: var(--turquoise);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(14, 124, 123, 0.5);
}
.btn-primary:hover {
  background: var(--turquoise-deep);
  box-shadow: 0 14px 40px -10px var(--turquoise-glow), 0 0 0 4px rgba(14, 124, 123, 0.12);
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--or);
  color: var(--fond-sombre);
}
.btn-gold:hover {
  background: var(--or-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(201, 168, 76, 0.6);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-outline {
  background: transparent;
  color: var(--turquoise);
  border: 1px solid var(--turquoise);
}
.btn-outline:hover {
  background: var(--turquoise);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(14, 124, 123, 0.14);
}

/* ---------- BADGES ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge-or {
  background: linear-gradient(135deg, #d6b65a, #c9a84c 50%, #a78a35);
  color: #1a1a1a;
  box-shadow: 0 6px 16px -6px rgba(201, 168, 76, 0.5);
}
.badge-turq {
  background: rgba(14, 124, 123, 0.1);
  color: var(--turquoise);
  border: 1px solid rgba(14, 124, 123, 0.25);
}
.badge-dark {
  background: var(--fond-sombre);
  color: #fff;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  padding-top: calc(22px + env(safe-area-inset-top));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s var(--ease-out);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--ligne);
  padding: 16px var(--gutter);
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 200;
  font-size: 26px;
  letter-spacing: 0.32em;
  color: #fff;
  transition: color 0.4s;
}
.nav.scrolled .logo { color: var(--texte); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  position: relative;
  padding: 6px 0;
}
.nav.scrolled .nav-links a { color: var(--texte); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--turquoise);
  transition: all 0.3s var(--ease-out);
  transform: translateX(-50%);
}
.nav-links a:hover { color: var(--turquoise); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}
.nav.scrolled .nav-phone { color: var(--texte); }
.nav-phone:hover { color: var(--turquoise); }
.nav-phone .ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.nav.scrolled .nav-phone .ico {
  border-color: var(--ligne);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  background: #fff;
  transition: all 0.3s;
}
.nav.scrolled .burger span { background: var(--texte); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  color: #fff;
}

/* Light shimmer over hero gradient */
.hero-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-shimmer::before,
.hero-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(201, 168, 76, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 70%
  );
  transform: rotate(12deg);
  animation: shimmer 9s ease-in-out infinite;
}
.hero-shimmer::after {
  animation-delay: 4.5s;
  opacity: 0.6;
  width: 40%;
}
@keyframes shimmer {
  0% { left: -80%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

/* Subtle water-drop ambience */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-orbs span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(201,168,76,0.5), rgba(201,168,76,0) 70%);
  filter: blur(20px);
  animation: float 14s ease-in-out infinite;
}
.hero-orbs span:nth-child(1) { width: 200px; height: 200px; top: 20%; right: 18%; animation-delay: 0s; }
.hero-orbs span:nth-child(2) { width: 280px; height: 280px; bottom: 25%; right: 8%; animation-delay: 3s; background: radial-gradient(circle at 30% 30%, rgba(14,124,123,0.55), transparent 70%); }
.hero-orbs span:nth-child(3) { width: 140px; height: 140px; top: 50%; right: 38%; animation-delay: 7s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50% { transform: translate(20px, -30px) scale(1.1); opacity: 0.85; }
}
.hero-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  will-change: transform;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 42, 42, 0.45) 0%,
    rgba(10, 42, 42, 0.2) 35%,
    rgba(10, 42, 42, 0.55) 75%,
    rgba(10, 42, 42, 0.85) 100%
  );
}
.hero-bg img,
.hero-bg image-slot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg {
  /* Premium fallback when no photo is dropped — deep turquoise spa gradient with tile-like texture */
  background:
    radial-gradient(ellipse at 70% 20%, rgba(201, 168, 76, 0.18), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(14, 124, 123, 0.4), transparent 55%),
    linear-gradient(135deg, #0a2a2a 0%, #143f3e 45%, #0f3938 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 1;
}

/* image-slot styling — match the design language */
image-slot {
  --slot-color: var(--turquoise);
  display: block;
}
image-slot::part(frame) {
  background: rgba(14, 124, 123, 0.06);
  border: 1px dashed rgba(14, 124, 123, 0.3);
}
.hero-bg image-slot::part(frame) {
  background: transparent;
  border: none;
}
.gal-slider image-slot {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 130px var(--gutter) 100px;
  padding-top: calc(130px + env(safe-area-inset-top));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.hero-eyebrow {
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--or);
}

.hero h1 {
  color: #fff;
  font-weight: 200;
  max-width: 16ch;
  margin-bottom: 32px;
  line-height: 1.0;
}
.hero h1 .accent {
  font-style: italic;
  font-weight: 200;
  color: var(--or);
}

.hero-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 44px;
  font-weight: 300;
}
.hero-sub .sep { color: var(--or); margin-inline: 12px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201, 168, 76, 0.16);
  border: 1px solid rgba(201, 168, 76, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: #f6e4a8;
  font-weight: 400;
  margin-bottom: 40px;
}
.hero-badge .pill {
  background: var(--or);
  color: var(--fond-sombre);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@keyframes scrollLine {
  to { top: 100%; }
}

/* ---------- BANDEAU URGENCE ---------- */
.urgence-band {
  background: var(--fond-sombre);
  color: #fff;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 14px;
  position: relative;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}
.urgence-band .pulse-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}
.urgence-band .pulse-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(201, 168, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}
.urgence-band strong { font-weight: 600; color: var(--or); }
.urgence-band .btn { padding: 11px 22px; font-size: 13px; }

/* ============================================
   INTRO SECTION
   ============================================ */
.intro {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(14, 124, 123, 0.05), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(201, 168, 76, 0.06), transparent 50%),
    var(--fond-clair);
  position: relative;
  overflow: hidden;
}
.intro::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 123, 0.08), transparent 70%);
  pointer-events: none;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.intro-text h2 { margin: 18px 0 22px; }
.intro-text h2 .italic { color: var(--turquoise); }
.intro-text .lead { margin-bottom: 32px; }

/* Mini features list — what makes Luxeo different */
.intro-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.intro-features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--turquoise);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte);
  transition: all 0.3s var(--ease-out);
}
.intro-features li:nth-child(2) { border-left-color: var(--or); }
.intro-features li:nth-child(3) { border-left-color: var(--turquoise-deep); }
.intro-features li:nth-child(4) { border-left-color: var(--or); }
.intro-features li:hover {
  transform: translateX(4px);
  box-shadow: 0 14px 28px -18px rgba(14, 124, 123, 0.3);
}
.intro-features b { font-weight: 600; color: var(--texte); }
.if-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(14, 124, 123, 0.1);
  color: var(--turquoise);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.if-ico svg { width: 14px; height: 14px; }
.intro-features li:nth-child(2) .if-ico { background: rgba(201, 168, 76, 0.12); color: var(--or); }
.intro-features li:nth-child(3) .if-ico { background: rgba(9, 89, 88, 0.12); color: var(--turquoise-deep); }
.intro-features li:nth-child(4) .if-ico { background: rgba(201, 168, 76, 0.12); color: var(--or); }

/* Stats as elevated cards */
.intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 32px;
  border-top: 1px solid var(--ligne);
}
.stat {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 20px 22px;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--turquoise), var(--or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--turquoise);
  box-shadow: 0 16px 36px -18px rgba(14, 124, 123, 0.3);
}
.stat:hover::after { transform: scaleX(1); }
.stat .n {
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 200;
  color: var(--turquoise);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: "tnum";
}
.stat .n .u { font-size: 18px; color: var(--or); font-weight: 400; }
.stat .lbl {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-mute);
  font-weight: 500;
}

/* Image with gold corner accents + richer quote */
.intro-img {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(10, 42, 42, 0.4);
  isolation: isolate;
}
.intro-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  position: relative;
  z-index: 1;
}
.intro-img:hover img { transform: scale(1.04); }

.intro-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid var(--or);
  z-index: 4;
  pointer-events: none;
  transition: all 0.5s var(--ease-out);
}
.intro-corner-tl {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
}
.intro-corner-br {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
}
.intro-img:hover .intro-corner-tl { top: 10px; left: 10px; }
.intro-img:hover .intro-corner-br { bottom: 10px; right: 10px; }

.intro-img .quote {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  padding: 22px 24px 20px;
  border-radius: 6px;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.35);
  z-index: 3;
}
.intro-img .quote-mark {
  position: absolute;
  top: -22px;
  left: 18px;
  width: 44px;
  height: 44px;
  background: var(--or);
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 38px;
  line-height: 0.6;
  padding-top: 14px;
  box-shadow: 0 8px 20px -6px rgba(201, 168, 76, 0.5);
}
.intro-img .quote p {
  font-size: 14px;
  font-style: italic;
  color: var(--texte);
  line-height: 1.55;
  margin: 0;
}
.intro-img .quote .who {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ligne);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-style: normal;
}
.intro-img .quote .who-stars {
  color: var(--or);
  font-size: 13px;
  letter-spacing: 2px;
}
.intro-img .quote .who-name {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turquoise);
  font-weight: 500;
  text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-stats { gap: 10px; }
  .stat { padding: 16px 18px; }
  .stat .n { font-size: 32px; }
  .stat .lbl { font-size: 10px; }
  .intro-features li { padding: 12px 14px; gap: 12px; font-size: 13px; }
  .if-ico { width: 24px; height: 24px; }
  .if-ico svg { width: 12px; height: 12px; }
  .intro-corner { width: 38px; height: 38px; }
  .intro-corner-tl { top: 10px; left: 10px; }
  .intro-corner-br { bottom: 10px; right: 10px; }
  .intro-img .quote { left: 14px; right: 14px; bottom: 14px; padding: 18px 18px 16px; }
  .intro-img .quote-mark { width: 36px; height: 36px; font-size: 30px; top: -18px; }
  .intro-img .quote .who { flex-direction: column; align-items: flex-start; gap: 6px; }
  .intro-img .quote .who-name { text-align: left; }
}

/* ============================================
   PACKS SECTION — Dark dramatic w/ image banners
   ============================================ */
.packs {
  background: var(--fond-sombre);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.packs::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(14, 124, 123, 0.25), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(201, 168, 76, 0.18), transparent 50%);
  pointer-events: none;
}
.packs > .wrap { position: relative; z-index: 1; }

.packs .section-head h2 { color: #fff; }
.packs .section-head h2 .italic, .packs .section-head h2 em { color: var(--or); }
.packs .section-head .lead { color: rgba(255, 255, 255, 0.7); }
.packs .section-head .eyebrow { color: var(--or); }
.packs .section-head .eyebrow::before,
.packs .section-head .eyebrow::after { background: var(--or); }

.section-head {
  text-align: center;
  margin-bottom: clamp(50px, 6vw, 80px);
}
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
}
.section-head h2 {
  margin: 22px auto 18px;
  max-width: 18ch;
}
.section-head .lead { margin: 0 auto; text-align: center; }

.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
}

/* --- Base card --- */
.pack {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}
.pack:hover {
  transform: translateY(-8px);
  border-color: rgba(14, 124, 123, 0.5);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(14, 124, 123, 0.3);
}

/* --- Image banner --- */
.pack-banner {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1a1a1a;
}
.pack-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.pack:hover .pack-banner img {
  transform: scale(1.06);
}
.pack-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 24, 24, 0.2) 0%,
    rgba(10, 24, 24, 0.4) 60%,
    rgba(10, 24, 24, 0.95) 100%);
}

/* tier label overlaid on banner */
.banner-tier {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
}
.banner-tier .bars { display: inline-flex; gap: 3px; }
.banner-tier .bars span {
  width: 12px;
  height: 2px;
  background: rgba(255,255,255,0.25);
}
.banner-tier .bars span.on { background: var(--turquoise); }

.banner-ribbon {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fond-sombre);
  background: var(--or);
  font-weight: 600;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.banner-ribbon::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fond-sombre);
}

/* Pack name overlaid on bottom of banner */
.banner-title {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.banner-title .pack-name {
  font-size: 32px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.banner-title .pack-name em {
  font-style: italic;
  color: var(--or);
  font-weight: 200;
}

/* --- Body --- */
.pack-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pack-cible {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
  font-style: italic;
  min-height: 1.4em;
}

/* --- Price block --- */
.pack-price {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pack-price .real {
  font-size: 48px;
  font-weight: 200;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  font-feature-settings: "tnum";
}
.pack-price .real .e {
  font-size: 26px;
  margin-left: 2px;
  color: rgba(255,255,255,0.5);
}
.price-note {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 6px;
}

/* --- Finance --- */
.pack-finance {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pack-finance .install b {
  font-weight: 500;
  color: var(--turquoise);
}
.pack-finance .install .nofee {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}
.pack-finance .aid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.pack-finance .aid .check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(14, 124, 123, 0.12);
  border: 1px solid rgba(14, 124, 123, 0.5);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.pack-finance .aid .check::after {
  content: '';
  width: 4px;
  height: 7px;
  border: solid var(--turquoise);
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pack-finance .aid b { color: var(--turquoise); font-weight: 500; }

/* --- Features --- */
.feat-head {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.feat-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.pack-feat {
  list-style: none;
  margin: 0 0 24px;
  flex: 1;
  padding: 0;
}
.pack-feat li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  padding: 7px 0 7px 26px;
  position: relative;
  line-height: 1.45;
}
.pack-feat li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 14px;
  height: 1px;
  background: var(--turquoise);
}
.pack-feat li.signature {
  font-weight: 500;
  color: #fff;
}
.pack-feat li.signature::before { display: none; }
.pack-feat li.signature::after {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
}

/* --- Meta --- */
.pack-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}
.pack-meta b {
  color: #fff;
  font-weight: 500;
}

/* --- CTA --- */
.pack .btn {
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.pack .btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.pack .btn-outline:hover {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: #fff;
  box-shadow: 0 12px 30px -10px var(--turquoise-glow);
}

/* ============= CONFORT (featured) ============= */
.pack-featured {
  border: 1px solid rgba(14, 124, 123, 0.5);
  background: linear-gradient(180deg, rgba(14, 124, 123, 0.08) 0%, rgba(255, 255, 255, 0.03) 60%);
  transform: translateY(-12px);
  z-index: 2;
}
.pack-featured:hover {
  transform: translateY(-20px);
  border-color: var(--turquoise);
}
.pack-featured .banner-ribbon {
  background: var(--turquoise);
  color: #fff;
}
.pack-featured .banner-ribbon::before {
  background: #fff;
}
.pack-featured .pack-price .real { color: #fff; }

/* ============= LUXE (premium) ============= */
.pack-luxe {
  border: 1px solid rgba(201, 168, 76, 0.4);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(201, 168, 76, 0.04) 0%, rgba(255, 255, 255, 0.02) 60%);
  z-index: 1;
}
.pack-luxe:hover {
  border-color: var(--or);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.5),
              0 0 0 1px var(--or),
              0 0 60px -10px rgba(201, 168, 76, 0.3);
}
.pack-luxe .banner-tier .bars span.on { background: var(--or); box-shadow: 0 0 6px rgba(201, 168, 76, 0.5); }
.pack-luxe .banner-ribbon {
  background: var(--or);
  color: var(--fond-sombre);
}
.pack-luxe .banner-title .pack-name em { color: var(--or); }
.pack-luxe .pack-price .real { color: var(--or); }
.pack-luxe .pack-feat li::before { background: var(--or); }
.pack-luxe .pack-finance .install b { color: var(--or); }
.pack-luxe .pack-finance .aid b { color: var(--or); }
.pack-luxe .pack-finance .aid .check {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.6);
}
.pack-luxe .pack-finance .aid .check::after { border-color: var(--or); }
.pack-luxe .pack-meta b { color: var(--or); }
.pack-luxe .feat-head { color: rgba(201, 168, 76, 0.7); }

/* Luxe gold button */
.btn-luxe {
  background: var(--or);
  color: var(--fond-sombre);
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(201, 168, 76, 0.45);
}
.btn-luxe:hover {
  background: linear-gradient(135deg, #e8c66a, #c9a84c 50%, #a78a35);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(201, 168, 76, 0.7);
  color: var(--fond-sombre);
}

/* ============================================
   PARTENAIRE -50% SECTION
   ============================================ */
.partenaire {
  background: var(--fond-clair);
  position: relative;
  overflow: hidden;
}
.partenaire::before {
  content: '';
  position: absolute;
  bottom: -300px;
  left: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 70%);
  pointer-events: none;
}
.partenaire-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.partenaire-text .eyebrow { color: var(--or); }
.partenaire-text .eyebrow::before { background: var(--or); }
.partenaire-text h2 { margin: 22px 0 22px; }
.partenaire-text h2 em { font-style: italic; color: var(--or); font-weight: 200; }
.partenaire-text .lead { margin-bottom: 36px; }

.partenaire-seal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 12px 30px -14px rgba(201, 168, 76, 0.3);
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
}
.partenaire-seal .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or), var(--or-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
}
.partenaire-seal b { font-weight: 600; color: var(--or-deep); }

/* Simulator card */
.simulator {
  background: #fff;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 6px;
  box-shadow: 0 30px 90px -30px rgba(14, 124, 123, 0.25),
              0 0 0 1px var(--ligne);
}
.simulator h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.simulator h3 .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--or);
}
.simulator-display {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 36px;
  padding-block: 24px;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.sim-col .lbl {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-mute);
  margin-bottom: 8px;
}
.sim-col .val {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 200;
  color: var(--texte);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sim-col.real .val { color: var(--turquoise); }
.sim-col.before .val { color: var(--texte-mute); text-decoration: line-through; font-size: clamp(22px, 2.6vw, 32px); }
.sim-arrow {
  color: var(--or);
  font-size: 24px;
}
.simulator-savings {
  text-align: center;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--texte-mute);
}
.simulator-savings b { color: var(--or); font-size: 22px; font-weight: 500; }

.simulator-slider {
  margin-bottom: 28px;
}
.simulator-slider .marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--texte-mute);
  margin-top: 14px;
  letter-spacing: 0.08em;
}
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--turquoise) var(--p, 50%), rgba(14,124,123,0.15) var(--p, 50%));
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--or);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 14px -2px rgba(201, 168, 76, 0.6), 0 0 0 4px #fff;
  transition: transform 0.2s;
}
.range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--or);
  border-radius: 50%;
  cursor: grab;
  border: 4px solid #fff;
  box-shadow: 0 4px 14px -2px rgba(201, 168, 76, 0.6);
}

/* ============================================
   GALERIE AVANT/APRÈS
   ============================================ */
.galerie {
  background: #fff;
  position: relative;
}
.gal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
/* Home galerie: 3 cards in a row from tablet up (tighter editorial feel) */
@media (min-width: 900px) {
  .galerie:not(.galerie-page) .gal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .galerie:not(.galerie-page) .gal-slider {
    aspect-ratio: 4/3;
  }
}
.gal-card {
  position: relative;
}
.gal-slider {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  cursor: ew-resize;
  background: var(--fond-clair);
  --clip: 50%;
}
.gal-slider .slot-layer {
  position: absolute;
  inset: 0;
}
.gal-slider .slot-layer image-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.gal-slider .slot-after {
  clip-path: inset(0 var(--clip) 0 0);
  transition: none;
}
.gal-slider .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - var(--clip));
  width: 2px;
  background: var(--or);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.gal-slider .handle .grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--or);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #1a1a1a;
  font-size: 18px;
  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.4), 0 0 0 6px rgba(201,168,76,0.18);
}
.gal-slider .label-tag {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 6;
  pointer-events: none;
}
.gal-slider .lt-before { left: 16px; }
.gal-slider .lt-after { right: 16px; background: var(--or); color: var(--fond-sombre); }

.gal-meta {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.gal-meta .place {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--texte);
}
.gal-meta .info {
  color: var(--texte-mute);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.gal-meta .info b { color: var(--turquoise); font-weight: 500; }

.gallery-cta {
  margin-top: 56px;
  text-align: center;
}

/* ============================================
   SECTION URGENCE (large)
   ============================================ */
.urgence-large {
  background: linear-gradient(135deg, #0a2a2a 0%, #0f3938 50%, #143f3e 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.urgence-large::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(201,168,76,0.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14,124,123,0.25), transparent 50%);
  pointer-events: none;
}
.urgence-large .wrap { position: relative; z-index: 1; }
.urgence-large .eyebrow { color: var(--or); justify-content: center; }
.urgence-large .eyebrow::before, .urgence-large .eyebrow::after { background: var(--or); content: ''; width: 36px; height: 1px; }
.urgence-large h2 {
  color: #fff;
  margin: 24px auto 22px;
  max-width: 20ch;
}
.urgence-large h2 em { font-style: italic; color: var(--or); font-weight: 200; }
.urgence-large p {
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0 auto 36px;
  font-size: 17px;
}

.creneaux-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 50px auto;
}
.creneau {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,76,0.18);
  padding: 18px 12px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.creneau.taken {
  opacity: 0.35;
  text-decoration: line-through;
}
.creneau .month {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 6px;
}
.creneau .day {
  font-size: 28px;
  font-weight: 200;
  color: #fff;
}
.creneau .zone {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* ============================================
   AVIS CLIENTS
   ============================================ */
.avis {
  background: var(--fond-clair);
  position: relative;
}
.avis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.avis-card {
  background: #fff;
  padding: 36px;
  border: 1px solid var(--ligne);
  transition: all 0.4s var(--ease-out);
  position: relative;
}
.avis-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px var(--turquoise-glow);
  border-color: var(--turquoise);
}
.avis-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 32px;
  font-size: 80px;
  color: rgba(14, 124, 123, 0.1);
  font-family: Georgia, serif;
  line-height: 1;
}
.avis-stars {
  color: var(--or);
  letter-spacing: 4px;
  margin-bottom: 18px;
  font-size: 14px;
}
.avis-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--texte);
  margin-bottom: 28px;
  font-weight: 300;
}
.avis-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--ligne);
}
.avis-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--turquoise), var(--turquoise-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(14, 124, 123, 0.4),
              0 0 0 2px #fff,
              0 0 0 3px rgba(201, 168, 76, 0.2);
}
/* Initials shown as fallback via data-init */
.avis-avatar::before {
  content: attr(data-init);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}
/* Photo (if uploaded) covers the initials */
.avis-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}
.avis-meta .name {
  font-weight: 500;
  font-size: 14px;
}
.avis-meta .sub {
  font-size: 12px;
  color: var(--texte-mute);
  letter-spacing: 0.05em;
}

.avis-counter {
  margin-top: 60px;
  text-align: center;
  padding: 36px;
  background: #fff;
  border: 1px dashed var(--turquoise);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 36px;
  align-items: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.avis-counter .big {
  font-size: 64px;
  font-weight: 200;
  color: var(--turquoise);
  letter-spacing: -0.02em;
  text-align: right;
}
.avis-counter .label {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--texte);
  text-align: left;
}
.avis-counter .divider {
  width: 1px;
  height: 50px;
  background: var(--ligne);
}

/* ============================================
   PARRAINAGE
   ============================================ */
.parrainage {
  background: #fff;
  position: relative;
}
.parr-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.parr-text .eyebrow { color: var(--or); }
.parr-text .eyebrow::before { background: var(--or); }
.parr-text h2 { margin: 22px 0 24px; }
.parr-text h2 em { font-style: italic; color: var(--or); font-weight: 200; }

.parr-steps {
  margin: 40px 0;
}
.parr-step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ligne);
}
.parr-step:last-child { border-bottom: none; }
.parr-step .n {
  font-size: 32px;
  font-weight: 200;
  color: var(--or);
  line-height: 1;
}
.parr-step h4 { margin-bottom: 4px; }
.parr-step p { color: var(--texte-mute); font-size: 14px; }

.parr-visual {
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--or) 0%, var(--or-deep) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.parr-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.2) 100%);
}
.parr-visual .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}
.parr-visual .ring.r1 { width: 60%; height: 60%; }
.parr-visual .ring.r2 { width: 80%; height: 80%; }
.parr-visual .ring.r3 { width: 100%; height: 100%; }
.parr-visual .amount {
  position: relative;
  text-align: center;
  color: #fff;
}
.parr-visual .amount .big {
  font-size: clamp(80px, 11vw, 160px);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.parr-visual .amount .big .e { font-size: 60%; }
.parr-visual .amount .lbl {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(255,255,255,0.9);
}
.parr-visual .amount .sub {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-style: italic;
}

/* ============================================
   ZONES D'INTERVENTION — editorial service-area card
   (replaces the 4 weather-like dept cards)
   ============================================ */
.zones {
  background: linear-gradient(180deg, var(--fond-sombre) 0%, var(--fond-sombre-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.zones-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(201, 168, 76, 0.16), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(14, 124, 123, 0.28), transparent 50%);
}
.zones > .wrap { position: relative; z-index: 1; }

/* Single big card with 2 columns */
.zones-card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* LEFT — Lead pitch */
.zones-lead .eyebrow {
  color: var(--or);
  margin-bottom: 18px;
}
.zones-lead .eyebrow::before { background: var(--or); }
.zones-lead h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.zones-lead h2 .italic.gold {
  font-style: italic;
  color: var(--or);
  font-weight: 200;
}
.zones-lead p {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 42ch;
}

/* Stats inline */
.zones-stats {
  display: flex;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.zs-block { display: flex; flex-direction: column; }
.zs-n {
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 200;
  color: var(--or);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum";
}
.zs-l {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
  line-height: 1.4;
}

/* RIGHT — 4 row list (no weather-card feel) */
.zones-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.zrow {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: padding 0.3s var(--ease-out);
}
.zrow:first-child { padding-top: 0; }
.zrow:hover {
  padding-left: 8px;
}
.zr-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.zr-code {
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--or);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.zr-name {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.zr-cities {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Soft note at bottom of list */
.zones-note {
  margin-top: 28px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(201,168,76,0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.zones-note svg { color: var(--or); flex-shrink: 0; }
.zones-note a {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}
.zones-note a:hover { opacity: 0.75; }

/* Responsive */
@media (max-width: 900px) {
  .zones-card { grid-template-columns: 1fr; gap: 40px; }
  .zones-stats { gap: 24px; }
}
@media (max-width: 600px) {
  .zones-lead h2 { font-size: 26px; }
  .zones-lead p { font-size: 14px; }
  .zones-stats { gap: 18px; flex-wrap: wrap; }
  .zs-n { font-size: 28px; }
  .zs-l { font-size: 10px; }
  .zrow { padding: 16px 0; }
  .zr-name { font-size: 17px; }
  .zr-cities { font-size: 12.5px; }
  .zones-note { font-size: 12px; }
}
.zones-note svg { color: var(--or); flex-shrink: 0; }

/* ============================================
   FAQ — Two-column elegant accordion
   ============================================ */
.faq {
  background: var(--fond-clair);
  position: relative;
}
.faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

/* Left aside */
.faq-aside {
  position: sticky;
  top: 110px;
}
.faq-aside h2 { margin: 18px 0 22px; }
.faq-aside h2 .italic { color: var(--or); font-style: italic; font-weight: 200; }
.faq-aside .lead { margin-bottom: 36px; }

.faq-help {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--or);
  border-radius: 4px;
  box-shadow: 0 18px 40px -22px rgba(14,124,123,0.2);
}
.faq-help-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.1);
  color: var(--or);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.faq-help-ico svg { width: 22px; height: 22px; }
.faq-help-t {
  font-size: 15px;
  font-weight: 500;
  color: var(--texte);
  margin-bottom: 2px;
}
.faq-help-s {
  font-size: 12px;
  color: var(--texte-mute);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.faq-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  transition: color 0.2s;
}
.faq-help-link:hover { color: var(--or); }
.faq-help-link .arrow { transition: transform 0.3s; }
.faq-help-link:hover .arrow { transform: translateX(4px); }

/* Right column: accordion items as cards */
.faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.35s var(--ease-out);
}
.faq-item:hover {
  border-color: rgba(14, 124, 123, 0.3);
  box-shadow: 0 14px 32px -18px rgba(14, 124, 123, 0.22);
}
.faq-item.open {
  border-color: var(--turquoise);
  box-shadow: 0 22px 50px -22px rgba(14, 124, 123, 0.35),
              0 0 0 1px var(--turquoise);
}

.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 60px 22px 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--texte);
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: none;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.faq-q:hover { color: var(--turquoise); background: rgba(14, 124, 123, 0.02); }

.faq-n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--or);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 5px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.3s;
  font-feature-settings: "tnum";
}
.faq-item.open .faq-n {
  background: var(--or);
  color: var(--fond-sombre);
  border-color: var(--or);
}
.faq-text { flex: 1; line-height: 1.4; }

.faq-q::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--turquoise);
  transition: all 0.3s;
  border-radius: 2px;
}
.faq-q::before {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--turquoise);
  transform: rotate(90deg);
  transition: all 0.3s;
  border-radius: 2px;
}
.faq-item.open .faq-q::before { transform: rotate(0deg); opacity: 0; }
.faq-item.open .faq-q::after { background: var(--or); }
.faq-item.open .faq-q {
  color: var(--turquoise);
  background: linear-gradient(180deg, rgba(14, 124, 123, 0.04), transparent);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-in-out);
}
.faq-a-inner {
  padding: 4px 60px 26px 70px;
  color: var(--texte-mute);
  line-height: 1.75;
  font-size: 14.5px;
  border-top: 1px dashed rgba(14, 124, 123, 0.15);
  margin-top: 4px;
  padding-top: 18px;
}
.faq-a-inner b { color: var(--texte); font-weight: 600; }
.faq-item.open .faq-a { max-height: 420px; }

/* ============================================
   Responsive — Zones & FAQ
   ============================================ */
@media (max-width: 1024px) {
  .zones-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-aside { position: relative; top: 0; }
}
@media (max-width: 600px) {
  .zones-grid { grid-template-columns: 1fr; gap: 14px; }
  .zone-card { padding: 26px 22px 20px; }
  .zone-num .num { font-size: 44px; }
  .zone-pin { width: 32px; height: 32px; top: 22px; right: 20px; }
  .zone-pin svg { width: 15px; height: 15px; }
  .zones-note {
    flex-direction: column;
    text-align: center;
    border-radius: 14px;
    font-size: 12px;
    padding: 14px 18px;
  }
  .faq-q { padding: 18px 50px 18px 18px; font-size: 14.5px; gap: 12px; }
  .faq-q::after, .faq-q::before { right: 18px; }
  .faq-n { font-size: 10px; padding: 4px 7px; }
  .faq-a-inner { padding: 14px 50px 22px 18px; font-size: 13.5px; }
  .faq-help { padding: 18px 20px; gap: 14px; }
}

/* ============================================
   FORMULAIRE CONTACT
   ============================================ */
.contact {
  background: var(--fond-sombre);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(14, 124, 123, 0.3), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(201, 168, 76, 0.15), transparent 50%);
  pointer-events: none;
}
.contact .wrap { position: relative; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 90px);
}
.contact-info .eyebrow { color: var(--or); }
.contact-info .eyebrow::before { background: var(--or); }
.contact-info h2 {
  color: #fff;
  margin: 22px 0 22px;
}
.contact-info h2 em { font-style: italic; color: var(--or); font-weight: 200; }
.contact-info p {
  color: rgba(255,255,255,0.72);
  margin-bottom: 40px;
  max-width: 38ch;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.contact-row .ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.15);
  color: var(--or);
  display: grid;
  place-items: center;
}
.contact-row .lbl { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.2em; text-transform: uppercase; }
.contact-row .val { color: #fff; font-size: 15px; }

.contact-form {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: clamp(28px, 3.5vw, 48px);
}
.contact-form h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.field { position: relative; }
.field-full { grid-column: 1 / -1; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 18px 0 12px;
  color: #fff;
  outline: none;
  transition: all 0.3s;
  font-weight: 300;
}
.field textarea { resize: vertical; min-height: 80px; }
.field label {
  position: absolute;
  top: 22px;
  left: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  transition: all 0.3s;
}
.field input:focus,
.field input:not(:placeholder-shown),
.field select:focus,
.field select:valid,
.field textarea:focus,
.field textarea:not(:placeholder-shown) {
  border-color: var(--turquoise);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--turquoise);
}
.field select {
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.field select option { background: var(--fond-sombre); color: #fff; }
.field-select::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 20px;
  color: var(--turquoise);
  pointer-events: none;
}

.contact-form button {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

.consent {
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Rapid form (3-field) */
.rapid-form {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 10px;
  border-radius: 999px;
  max-width: 720px;
}
.rapid-form input {
  background: transparent;
  border: none;
  padding: 14px 20px;
  color: #fff;
  font-size: 14px;
  outline: none;
  border-radius: 999px;
}
.rapid-form input::placeholder { color: rgba(255,255,255,0.6); }
.rapid-form input:focus { background: rgba(255,255,255,0.08); }
.rapid-form button {
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--or);
  color: var(--fond-sombre);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: all 0.3s;
}
.rapid-form button:hover { background: #d9b85f; transform: scale(1.02); }

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: #050f0f;
  color: rgba(255,255,255,0.6);
  padding: 80px var(--gutter) 30px;
  font-size: 13px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  max-width: var(--max);
  margin: 0 auto 60px;
}
.foot-col h5 {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.foot-col ul { list-style: none; }
.foot-col li { padding: 6px 0; }
.foot-col a:hover { color: var(--or); }
.foot-brand .logo {
  color: #fff;
  margin-bottom: 18px;
}
.foot-brand p { line-height: 1.7; margin-bottom: 22px; max-width: 36ch; }
.foot-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ============================================
   WHATSAPP BUTTON
   ============================================ */
.wa-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 200;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.55);
  transition: transform 0.3s;
}
.wa-btn:hover { transform: scale(1.08); color: #fff; }
.wa-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.5;
  animation: waPulse 2s infinite;
  z-index: -1;
}
@keyframes waPulse {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ============================================
   SECTION 3 JOURS / TIMELINE
   ============================================ */
.timeline {
  background: linear-gradient(180deg, #fff 0%, var(--fond-clair) 100%);
  position: relative;
  overflow: hidden;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

/* Horizontal connecting rail between the 3 numbered circles */
.timeline-rail {
  position: relative;
  max-width: 1240px;
  margin: 60px auto 0;
  height: 0;
  z-index: 0;
}
.timeline-rail-line {
  position: absolute;
  top: 30px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  background:
    linear-gradient(90deg, var(--turquoise) 0%, var(--or) 50%, var(--turquoise) 100%);
  opacity: 0.18;
  border-radius: 2px;
}
.timeline-rail-line::after {
  content: '';
  position: absolute;
  inset: -1px 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.5) 6px 10px);
  border-radius: 2px;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: -18px;
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s var(--ease-out);
}
.timeline-day:hover { transform: translateY(-6px); }

/* Big numbered circle on top of card */
.day-marker {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--turquoise);
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: 0 0 0 6px #fff, 0 12px 30px -10px rgba(14,124,123,0.35);
  transition: all 0.4s var(--ease-out);
}
.timeline-day:nth-child(2) .day-marker { border-color: var(--or); box-shadow: 0 0 0 6px #fff, 0 12px 30px -10px rgba(201,168,76,0.35); }
.timeline-day:nth-child(3) .day-marker { border-color: var(--turquoise-deep); box-shadow: 0 0 0 6px #fff, 0 12px 30px -10px rgba(9,89,88,0.35); }

.day-marker-n {
  font-size: 22px;
  font-weight: 200;
  color: var(--turquoise);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.timeline-day:nth-child(2) .day-marker-n { color: var(--or); }
.timeline-day:nth-child(3) .day-marker-n { color: var(--turquoise-deep); }

.day-marker-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--turquoise);
  opacity: 0;
  animation: markerPulse 2.6s ease-out infinite;
}
.timeline-day:nth-child(2) .day-marker-pulse { border-color: var(--or); animation-delay: 0.8s; }
.timeline-day:nth-child(3) .day-marker-pulse { border-color: var(--turquoise-deep); animation-delay: 1.6s; }
@keyframes markerPulse {
  0%   { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.4); }
}

.timeline-day:hover .day-marker {
  transform: scale(1.08);
}

/* Card */
.day-card {
  margin-top: 22px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 32px 28px 26px;
  width: 100%;
  position: relative;
  transition: all 0.4s var(--ease-out);
  box-shadow: 0 6px 20px -12px rgba(14, 124, 123, 0.18);
}
.timeline-day:hover .day-card {
  border-color: var(--turquoise);
  box-shadow: 0 30px 60px -22px rgba(14, 124, 123, 0.35);
}
.timeline-day:nth-child(2):hover .day-card { border-color: var(--or); box-shadow: 0 30px 60px -22px rgba(201, 168, 76, 0.35); }

/* Icon at top of card */
.day-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14,124,123,0.1), rgba(14,124,123,0.04));
  color: var(--turquoise);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  transition: all 0.4s var(--ease-out);
}
.day-ico svg { width: 24px; height: 24px; }
.timeline-day:nth-child(2) .day-ico { background: linear-gradient(135deg, rgba(201,168,76,0.14), rgba(201,168,76,0.04)); color: var(--or); }
.timeline-day:nth-child(3) .day-ico { background: linear-gradient(135deg, rgba(9,89,88,0.12), rgba(9,89,88,0.04)); color: var(--turquoise-deep); }
.timeline-day:hover .day-ico { transform: rotate(-6deg) scale(1.05); }

.day-num {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texte-mute);
  font-weight: 600;
  margin-bottom: 10px;
}

.day-title {
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--texte);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.day-title em {
  font-style: italic;
  color: var(--or);
  font-weight: 300;
}

.day-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--texte-mute);
  margin-bottom: 22px;
}

.day-points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.day-points li {
  font-size: 13.5px;
  color: var(--texte);
  padding: 9px 0 9px 26px;
  position: relative;
  border-top: 1px dashed rgba(14, 124, 123, 0.12);
}
.day-points li:first-child { border-top: none; padding-top: 4px; }
.day-points li:first-child::before { top: 9px; }
.day-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(14,124,123,0.1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%230e7c7b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.timeline-day:nth-child(2) .day-points li::before { background-color: rgba(201,168,76,0.12); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%23c9a84c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.timeline-day:nth-child(3) .day-points li::before { background-color: rgba(9,89,88,0.12); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%23095958' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.day-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
  font-size: 11.5px;
  color: var(--texte-mute);
  letter-spacing: 0.02em;
}
.day-dur {
  font-weight: 600;
  color: var(--turquoise);
}
.timeline-day:nth-child(2) .day-dur { color: var(--or); }
.timeline-day:nth-child(3) .day-dur { color: var(--turquoise-deep); }
.day-sep { color: var(--ligne); }
.day-status { flex: 1; line-height: 1.3; }

/* Responsive */
@media (max-width: 1024px) {
  .timeline-rail { display: none; }
  .timeline-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 16px; }
  .timeline-day { align-items: flex-start; }
  .day-marker { width: 56px; height: 56px; box-shadow: 0 8px 24px -8px rgba(14,124,123,0.35); }
  .day-marker-n { font-size: 20px; }
  .day-card { margin-top: 18px; }
}
@media (max-width: 600px) {
  .day-card { padding: 24px 22px 22px; }
  .day-title { font-size: 19px; }
  .day-text { font-size: 13.5px; }
}

/* ============================================
   FINITIONS / MATIÈRES
   ============================================ */
.finitions {
  background: var(--fond-sombre);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.finitions::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(201,168,76,0.15), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(14,124,123,0.25), transparent 50%);
  pointer-events: none;
}
.finitions .wrap { position: relative; z-index: 1; }
.finitions .section-head h2 { color: #fff; }
.finitions .section-head h2 em { color: var(--or); font-style: italic; font-weight: 200; }
.finitions .section-head .lead { color: rgba(255,255,255,0.65); }
.finitions .eyebrow { color: var(--or); }
.finitions .eyebrow::before, .finitions .eyebrow::after { background: var(--or); }

.materiaux {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.mat {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.5s var(--ease-out);
  background: #0a1f1f;
}
.mat img.mat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  z-index: 0;
}
/* PNG transparent — the card gradient shows through */
.mat img.mat-bg[src$=".png"] {
  object-fit: contain;
  padding: 10% 12% 22% 12%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)) drop-shadow(0 6px 14px rgba(0,0,0,0.3));
}
.mat:hover img.mat-bg {
  transform: scale(1.06);
}
.mat:hover img.mat-bg[src$=".png"] {
  transform: scale(1.03);
}
.mat::before {
  display: none;
}
.mat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.mat-1 { --mat-tint: rgba(201,168,76,0.15); background: linear-gradient(135deg, #2a2419, #1a1612); }
.mat-2 { --mat-tint: rgba(14,124,123,0.18); background: linear-gradient(135deg, #1a2e2e, #0a1f1f); }
.mat-3 { --mat-tint: rgba(255,255,255,0.06); background: linear-gradient(135deg, #1f2628, #14191b); }
.mat-4 { --mat-tint: rgba(201,168,76,0.12); background: linear-gradient(135deg, #1a2424, #0f1817); }

.mat:hover {
  transform: translateY(-6px);
  border-color: var(--or);
  box-shadow: 0 20px 50px -20px rgba(201,168,76,0.3);
}
.mat-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
}
.mat-info .label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
  font-weight: 500;
}
.mat-info .name {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  letter-spacing: -0.01em;
}
.mat-info .grade {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
  font-style: italic;
}

/* ============================================
   CHAPTER NUMBERS
   ============================================ */
.chapter {
  position: absolute;
  top: clamp(60px, 7vw, 100px);
  right: var(--gutter);
  font-size: clamp(80px, 11vw, 180px);
  font-weight: 100;
  color: var(--turquoise);
  opacity: 0.05;
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  font-feature-settings: "tnum";
}
.intro .chapter, .partenaire .chapter, .zones .chapter, .avis .chapter {
  color: var(--turquoise);
}
.packs .chapter, .galerie .chapter, .parrainage .chapter, .faq .chapter {
  color: var(--turquoise);
}
.timeline .chapter, .finitions .chapter { color: var(--or); opacity: 0.06; }

/* ============================================
   PACK 3D TILT
   ============================================ */
.pack {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
.pack > * {
  transform-style: preserve-3d;
}
.pack-name, .pack h3, .pack-price, .badge {
  transform: translateZ(20px);
}

/* ============================================
   STICKY BOTTOM CTA
   ============================================ */
.sticky-cta {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 90;
  background: rgba(10, 42, 42, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #fff;
  border-radius: 999px;
  padding: 10px 10px 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.25);
  transition: transform 0.6s var(--ease-out);
  font-size: 14px;
  max-width: calc(100vw - 100px);
}
.sticky-cta.show {
  transform: translateX(-50%) translateY(0);
}
.sticky-cta .scta-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--or);
  position: relative;
}
.sticky-cta .scta-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--or);
  opacity: 0.5;
  animation: waPulse 2s infinite;
}
.sticky-cta .scta-text { font-weight: 300; }
.sticky-cta .scta-text strong { font-weight: 500; color: var(--or); }
.sticky-cta .btn {
  padding: 11px 22px;
  font-size: 13px;
}
.sticky-cta .close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
  cursor: pointer;
}
.sticky-cta .close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ============================================
   CUSTOM CURSOR
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  .cur-dot, .cur-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }
  .cur-dot {
    width: 6px;
    height: 6px;
    background: var(--or);
    transition: width 0.2s, height 0.2s, background 0.2s;
  }
  .cur-ring {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    transition: width 0.3s var(--ease-out),
                height 0.3s var(--ease-out),
                border-color 0.3s,
                background 0.3s,
                transform 0.18s var(--ease-out);
  }
  .cur-ring.hover {
    width: 56px;
    height: 56px;
    border-color: var(--or);
    background: rgba(201,168,76,0.08);
  }
  .cur-dot.hover {
    width: 4px;
    height: 4px;
  }
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select,
  body.has-custom-cursor [data-slider] { cursor: none; }
}

/* ============================================
   ANIMATED COUNTERS
   ============================================ */
.counter[data-target] {
  display: inline-block;
}

/* ============================================
   CONFIGURATEUR — Composez votre douche
   ============================================ */
.configurator {
  background: var(--fond-clair);
  position: relative;
  overflow: hidden;
}
.configurator::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 123, 0.08), transparent 70%);
  pointer-events: none;
}

.config-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  margin-top: 60px;
}

/* ---------- Preview panel ---------- */
.config-preview {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shower-stage {
  position: relative;
  aspect-ratio: 3/4;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(10, 42, 42, 0.4),
              0 0 0 1px var(--ligne);
}

/* Tile patterns - dynamic backgrounds */
.shower-stage[data-tile="marbre-clair"] {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(220,210,200,0.3), transparent 60%),
    linear-gradient(180deg, #f0ece4 0%, #d9d2c6 100%);
}
.shower-stage[data-tile="marbre-clair"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(180,170,155,0.25) 49%, rgba(180,170,155,0.25) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 47%, rgba(150,140,125,0.18) 48%, rgba(150,140,125,0.18) 52%, transparent 53%);
  background-size: 220px 320px, 180px 280px;
}

.shower-stage[data-tile="beton-cire"] {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(240,235,225,0.15), transparent 50%),
    linear-gradient(160deg, #d6d2cb 0%, #a8a39a 60%, #888376 100%);
}
.shower-stage[data-tile="beton-cire"]::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,0.15) 1px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(0,0,0,0.1) 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 1px, transparent 2px);
  background-size: 80px 80px, 60px 60px, 100px 100px;
}

.shower-stage[data-tile="ardoise-noire"] {
  background:
    radial-gradient(ellipse at 40% 20%, rgba(80,90,95,0.4), transparent 50%),
    linear-gradient(170deg, #2a2e30 0%, #1a1d1f 50%, #0e1112 100%);
}
.shower-stage[data-tile="ardoise-noire"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 49%, rgba(255,255,255,0.04) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.04) 50%, transparent 51%);
  background-size: 60px 60px;
}

.shower-stage[data-tile="terracotta"] {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,220,180,0.25), transparent 50%),
    linear-gradient(170deg, #c4715a 0%, #a85a44 50%, #834536 100%);
}
.shower-stage[data-tile="terracotta"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 49.5%, rgba(0,0,0,0.15) 50%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.15) 50%, transparent 50.5%);
  background-size: 120px 60px;
  opacity: 0.6;
}

/* Light overlay (top-down) */
.shower-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,235,180,0.18) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Showerhead overlay */
.shower-fixture {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: filter 0.5s var(--ease-out);
}
.shower-arm {
  width: 4px;
  height: 70px;
  background: var(--fixture-color, #c8c8cc);
  box-shadow: -1px 0 0 rgba(0,0,0,0.2);
  border-radius: 2px 2px 0 0;
}
.shower-head {
  width: 110px;
  height: 12px;
  background: var(--fixture-color, #c8c8cc);
  border-radius: 100px 100px 50% 50% / 50% 50% 100% 100%;
  position: relative;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.25),
    inset 0 2px 2px rgba(255,255,255,0.4),
    0 4px 8px rgba(0,0,0,0.3);
}
.shower-head::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 6px;
  background: radial-gradient(circle, var(--fixture-color, #c8c8cc) 30%, transparent 70%);
  border-radius: 50%;
  opacity: 0.6;
}

/* Water streams */
.shower-water {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 65%;
  z-index: 2;
  pointer-events: none;
}
.shower-water span {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(220,235,235,0.4) 50%, transparent 100%);
  animation: water-fall 1.6s linear infinite;
}
.shower-water span:nth-child(1) { left: 5%; animation-delay: 0s; height: 90%; }
.shower-water span:nth-child(2) { left: 18%; animation-delay: 0.3s; height: 85%; }
.shower-water span:nth-child(3) { left: 32%; animation-delay: 0.7s; height: 95%; }
.shower-water span:nth-child(4) { left: 48%; animation-delay: 0.1s; height: 88%; }
.shower-water span:nth-child(5) { left: 62%; animation-delay: 0.5s; height: 92%; }
.shower-water span:nth-child(6) { left: 78%; animation-delay: 0.9s; height: 87%; }
.shower-water span:nth-child(7) { left: 92%; animation-delay: 0.2s; height: 90%; }
@keyframes water-fall {
  0% { transform: translateY(-20%) scaleY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(100%) scaleY(1); opacity: 0; }
}

/* Glass partition silhouette */
.shower-partition {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  height: 85%;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.06) 50%,
      rgba(255,255,255,0.02) 100%);
  transition: all 0.5s var(--ease-out);
}

/* Niche light (when activated) */
.shower-niche {
  position: absolute;
  right: 8%;
  top: 45%;
  width: 16%;
  height: 12%;
  background:
    linear-gradient(180deg, rgba(255,230,170,0.5), rgba(255,200,120,0.2));
  border: 1px solid rgba(255,230,170,0.3);
  box-shadow:
    0 0 30px rgba(255,220,140,0.5),
    inset 0 0 12px rgba(255,230,180,0.3);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.shower-stage[data-niche="oui"] .shower-niche {
  opacity: 1;
}

/* Stage caption */
.shower-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 4px;
  font-size: 12px;
  color: var(--texte-mute);
  letter-spacing: 0.06em;
}
.shower-caption .live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--turquoise);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.shower-caption .live-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise);
  animation: pulse 1.8s infinite;
}

/* ---------- Options panel ---------- */
.config-options {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.opt-group {
  background: #fff;
  border: 1px solid var(--ligne);
  padding: 24px 26px;
  transition: border-color 0.3s;
}
.opt-group:hover {
  border-color: rgba(14, 124, 123, 0.3);
}
.opt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ligne);
}
.opt-title {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--turquoise);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}
.opt-title .step-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--turquoise);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: 0;
}
.opt-current {
  font-size: 13px;
  color: var(--texte);
  font-weight: 500;
  font-style: italic;
}

.opt-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.opt-swatches.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.opt-swatches.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.swatch {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--ligne);
}
.swatch:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(14, 124, 123, 0.3);
}
.swatch.is-active {
  border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or), 0 12px 30px -10px rgba(201, 168, 76, 0.4);
}
.swatch.is-active::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--or);
  color: var(--fond-sombre);
  font-size: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.swatch .lbl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}

/* Tile swatches */
.sw-marbre-clair { background: linear-gradient(135deg, #f0ece4, #d9d2c6); }
.sw-beton-cire { background: linear-gradient(135deg, #d6d2cb, #a8a39a); }
.sw-ardoise-noire { background: linear-gradient(135deg, #2a2e30, #0e1112); }
.sw-terracotta { background: linear-gradient(135deg, #c4715a, #834536); }

/* Faucet swatches */
.sw-fixture { display: grid; place-items: center; }
.sw-chrome { background: linear-gradient(135deg, #f0f0f3, #b8babd 50%, #8a8c90); }
.sw-noir-mat { background: linear-gradient(135deg, #2a2a2c, #161618); }
.sw-or-brosse { background: linear-gradient(135deg, #d6b65a, #a78a35); }

/* Paroi swatches */
.sw-paroi-fixe { background: linear-gradient(90deg, rgba(220,230,230,0.2) 0%, rgba(220,230,230,0.7) 50%, rgba(220,230,230,0.2) 100%), #1a2a2a; }
.sw-paroi-pivot { background: linear-gradient(90deg, rgba(220,230,230,0.2) 0%, rgba(220,230,230,0.7) 60%, rgba(220,230,230,0.2) 100%), #1a2a2a; }
.sw-paroi-walk { background: rgba(220,230,230,0.4); border-left: 4px solid rgba(220,230,230,0.7); border-right: 4px solid rgba(220,230,230,0.7); }

/* Niche toggle swatches */
.sw-niche-no { background: #1a2424; position: relative; }
.sw-niche-no::before { content: '✗'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.4); font-size: 24px; }
.sw-niche-yes { background: linear-gradient(180deg, #1a2424 0%, #1a2424 40%, rgba(255,220,140,0.5) 50%, #1a2424 60%, #1a2424 100%); position: relative; }
.sw-niche-yes::before { content: ''; position: absolute; top: 45%; left: 30%; width: 40%; height: 10%; background: rgba(255,220,140,0.7); box-shadow: 0 0 16px rgba(255,220,140,0.7); }

/* ---------- Summary card ---------- */
.config-summary {
  margin-top: 56px;
  background: var(--fond-sombre);
  color: #fff;
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.config-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(201,168,76,0.15), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(14,124,123,0.25), transparent 50%);
  pointer-events: none;
}
.summary-text {
  position: relative;
  z-index: 1;
}
.summary-text .eyebrow {
  color: var(--or);
  margin-bottom: 16px;
}
.summary-text .eyebrow::before { background: var(--or); }
.summary-text h3 {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.summary-text h3 em {
  font-style: italic;
  color: var(--or);
  font-weight: 200;
}
.summary-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.summary-list li {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
}
.summary-list li b {
  color: var(--or);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
}
.summary-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 220px;
}
.summary-cta .btn {
  width: 100%;
  justify-content: center;
}
.summary-cta .small {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* ============================================
   AMBIANCE — Simulateur visuel
   ============================================ */
.ambiance {
  background: var(--fond-clair);
  position: relative;
  overflow: hidden;
}
.ambiance::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 123, 0.08), transparent 70%);
  pointer-events: none;
}

.ambiance-stage {
  max-width: 1180px;
  margin: 0 auto;
}

.amb-frame {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  background: #0a1212;
  box-shadow:
    0 50px 110px -30px rgba(10, 24, 24, 0.55),
    0 18px 40px -16px rgba(10, 24, 24, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  isolation: isolate;
}

/* ===== Realistic photo treatment: warm window light from top-right ===== */
.amb-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Warm natural light from top-right (like sunlit window) */
    radial-gradient(ellipse 80% 60% at 75% 0%, rgba(255, 220, 165, 0.22), transparent 60%),
    /* Cool ambient bounce from bottom-left */
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(180, 220, 230, 0.08), transparent 65%);
  mix-blend-mode: soft-light;
}

/* ===== Vignette + soft steam veil for depth & atmosphere ===== */
.amb-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Faint steam wisp at top */
    radial-gradient(ellipse 50% 22% at 30% 8%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 40% 18% at 70% 14%, rgba(255, 255, 255, 0.05), transparent 70%),
    /* Soft outer vignette so the eye is drawn to the center */
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.amb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s var(--ease-out),
              transform 10s var(--ease-out),
              filter 0.9s var(--ease-out);
  pointer-events: none;
  /* Subtle photo grading: warmer skin tones, slightly punchier */
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
  z-index: 1;
}
.amb-img.is-active {
  opacity: 1;
  transform: scale(1);
}
.amb-img.is-entering {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  animation: ambKenBurns 10s var(--ease-out) forwards;
}
@keyframes ambKenBurns {
  0%   { transform: scale(1.06) translate(0, 0); }
  50%  { transform: scale(1.03) translate(-0.4%, -0.3%); }
  100% { transform: scale(1) translate(0, 0); }
}

.amb-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 28px 32px 24px;
  background: linear-gradient(0deg, rgba(10, 24, 24, 0.85) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.amb-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: opacity 0.4s;
}
.amb-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 8px var(--or);
}

.amb-counter {
  z-index: 3;
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
}
.amb-counter .sep { color: rgba(255, 255, 255, 0.4); }
.amb-counter span:first-child { color: var(--or); font-weight: 500; }

.amb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s var(--ease-out);
  opacity: 0.85;
}
.amb-arrow:hover {
  background: var(--or);
  color: var(--fond-sombre);
  border-color: var(--or);
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.amb-prev { left: 18px; }
.amb-next { right: 18px; }

/* ===== OPTIONS row ===== */
.amb-options {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.amb-opt {
  background: #fff;
  border: 1px solid var(--ligne);
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.4s var(--ease-out);
  border-radius: 3px;
}
.amb-opt:hover {
  transform: translateY(-3px);
  border-color: var(--turquoise);
  box-shadow: 0 14px 28px -12px rgba(14, 124, 123, 0.2);
}
.amb-opt.is-active {
  border-color: var(--or);
  background: linear-gradient(180deg, #fff 0%, rgba(201, 168, 76, 0.05) 100%);
  box-shadow: 0 0 0 1px var(--or), 0 14px 28px -10px rgba(201, 168, 76, 0.35);
}
.amb-opt.is-active::after {
  content: '✓';
  position: absolute;
}

.amb-swatch {
  width: 100%;
  aspect-ratio: 2/1;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.amb-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--texte);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.amb-opt.is-active .amb-name { color: var(--or-deep); }

/* Swatch colors */
.sw-blanc { background: linear-gradient(135deg, #f5f3ee 0%, #d6cdb8 100%); }
.sw-gris { background: linear-gradient(135deg, #4a4d4e 0%, #161819 100%); }
.sw-marbre { background: linear-gradient(135deg, #f0e6d2 0%, #b69e7c 100%); }
.sw-noir { background: linear-gradient(135deg, #1c1e1f 0%, #040506 100%); }
.sw-travertin { background: linear-gradient(135deg, #e8d4a8 0%, #9a7a4a 100%); }
.sw-bleu { background: linear-gradient(135deg, #3a4856 0%, #0a141e 100%); }

/* ===== CTA ===== */
.amb-cta-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.amb-cta {
  padding: 17px 32px;
  font-size: 14px;
}
.amb-link {
  font-size: 13px;
  color: var(--texte-mute);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}
.amb-link:hover {
  color: var(--turquoise);
}
.amb-link .arrow {
  transition: transform 0.3s;
}
.amb-link:hover .arrow {
  transform: translateX(3px);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .amb-options { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .amb-frame { aspect-ratio: 4/3; border-radius: 12px; }
  .amb-arrow { width: 40px; height: 40px; }
  .amb-prev { left: 10px; }
  .amb-next { right: 10px; }
  .amb-counter { top: 16px; left: 16px; font-size: 11px; padding: 6px 12px; }
  .amb-overlay { padding: 18px 18px 16px; }
  .amb-tag { font-size: 12px; padding: 8px 14px; }
  .amb-options { grid-template-columns: repeat(2, 1fr); }
  .amb-opt { padding: 12px 10px; }
  .amb-name { font-size: 11px; }
  .amb-cta-wrap { flex-direction: column; gap: 14px; }
  .amb-cta { width: 100%; justify-content: center; }
}

/* ============================================
   RÉSERVATION EXPRESS — 3 champs flow
   ============================================ */
.reservation {
  background: var(--fond-clair);
  position: relative;
  overflow: hidden;
}
.reservation::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.1), transparent 70%);
  pointer-events: none;
}
.reservation::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 123, 0.08), transparent 70%);
  pointer-events: none;
}

.reservation-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(14, 124, 123, 0.2);
  max-width: 1100px;
  margin: 0 auto;
}

/* LEFT — Text side */
.reservation-text {
  padding: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--ligne);
  background: linear-gradient(135deg, #fff 0%, var(--fond-clair) 100%);
}
.reservation-text .eyebrow { margin-bottom: 22px; }
.reservation-text h2 {
  font-size: clamp(34px, 4vw, 48px);
  margin-bottom: 22px;
}
.reservation-text h2 em {
  font-style: italic;
  color: var(--or);
  font-weight: 200;
}
.reservation-text p {
  color: var(--texte-mute);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 42ch;
}

.reservation-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reservation-steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--texte);
  letter-spacing: 0.01em;
}
.reservation-steps li .n {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(14, 124, 123, 0.1);
  color: var(--turquoise);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* RIGHT — Form side */
.reservation-form {
  position: relative;
  padding: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fond-sombre);
  color: #fff;
  min-height: 460px;
}
.reservation-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(14, 124, 123, 0.3), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(201, 168, 76, 0.18), transparent 50%);
  pointer-events: none;
}
.reservation-form-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.4s, transform 0.4s;
}
.reservation-form.success .reservation-form-inner {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  position: absolute;
  inset: 0;
  padding: clamp(40px, 5vw, 60px);
}

.rf-field {
  position: relative;
}
.rf-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 22px 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
  letter-spacing: 0.01em;
}
.rf-field input:focus,
.rf-field input:not(:placeholder-shown) {
  border-color: var(--or);
}
.rf-field label {
  position: absolute;
  top: 26px;
  left: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: all 0.3s var(--ease-out);
  letter-spacing: 0.01em;
}
.rf-field input:focus + label,
.rf-field input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
}

.reservation-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  padding: 18px 28px;
  font-size: 14px;
}

.rf-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.rf-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 8px var(--turquoise);
  animation: pulse 1.8s infinite;
}

/* SUCCESS STATE */
.reservation-success {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.5s 0.2s var(--ease-out), transform 0.5s 0.2s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.reservation-form.success .reservation-success {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.success-icon {
  color: var(--or);
  margin-bottom: 8px;
  animation: successPop 0.6s 0.3s var(--ease-out) backwards;
}
.success-icon svg {
  filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.6));
}
@keyframes successPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.reservation-success h3 {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
}
.reservation-success p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  margin: 0;
  max-width: 32ch;
  line-height: 1.6;
}
.reservation-success p strong {
  color: var(--or);
  font-weight: 600;
}
.success-meta {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
#successPhone {
  color: var(--or);
}

@media (max-width: 800px) {
  .reservation-card {
    grid-template-columns: 1fr;
  }
  .reservation-text {
    border-right: none;
    border-bottom: 1px solid var(--ligne);
  }
  .reservation-form { min-height: auto; }
  .reservation-text h2 { font-size: 30px; }
}

/* ============================================
   RESPONSIVE — Mobile-first pass
   ============================================ */

/* Tablette landscape & smaller */
@media (max-width: 1180px) {
  .nav-phone span:last-child { display: none; }
  .nav-cta { gap: 14px; }
  .nav-links { gap: 28px; }
}

/* Tablette portrait — < 1024px */
@media (max-width: 1024px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: flex; }
  .pack-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pack-featured { grid-column: 1/-1; transform: none; }
  .pack-featured:hover { transform: translateY(-8px); }
  .zones-grid { grid-template-columns: 1fr 1fr; }
  .creneaux-grid { grid-template-columns: 1fr 1fr; }
  .intro-grid, .partenaire-grid, .parr-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  /* Hero ★ badge — hidden on tablet + mobile (overlaps the h1 when
     hero stacks vertically; only safe to show on real desktop) */
  .hero-meta { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .materiaux { grid-template-columns: 1fr 1fr; }
  .timeline-grid { grid-template-columns: 1fr; }
  .timeline-day { border-right: 1px solid var(--ligne); }
  .timeline-day:not(:last-child) { border-bottom: none; }
  .config-grid { grid-template-columns: 1fr; }
  .config-preview { position: static; max-width: 480px; margin: 0 auto; }
  .config-summary { grid-template-columns: 1fr; text-align: left; }
  .avis-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile large — < 768px */
@media (max-width: 768px) {
  :root {
    --section-y: 70px;
    --gutter: 20px;
  }
  body { font-size: 15px; }

  /* Section heads */
  .section-head { margin-bottom: 40px; }
  h1 { font-size: clamp(38px, 9vw, 56px); }
  h2 { font-size: clamp(28px, 7vw, 40px); }
  h3 { font-size: clamp(20px, 5vw, 26px); }

  /* Nav */
  .nav { padding: 14px var(--gutter); }
  .nav.scrolled { padding: 12px var(--gutter); }
  .logo { font-size: 20px; letter-spacing: 0.24em; }
  .nav-cta .btn-gold { padding: 11px 16px; font-size: 12px; }
  .nav-mobile-open .nav-links {
    display: flex;
    position: fixed;
    inset: 60px 0 0;
    background: #fff;
    flex-direction: column;
    padding: 40px var(--gutter);
    gap: 28px;
    align-items: flex-start;
    z-index: 99;
  }
  .nav-mobile-open .nav-links a {
    color: var(--texte);
    font-size: 22px;
    font-weight: 300;
  }

  /* HERO */
  .hero { min-height: auto; }
  .hero-content { padding: 110px var(--gutter) 60px; }
  .hero h1 { font-size: clamp(34px, 9vw, 50px); line-height: 1.05; margin-bottom: 24px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.24em; margin-bottom: 22px; }
  .hero-sub { font-size: 13px; letter-spacing: 0.14em; margin-bottom: 32px; }
  .hero-sub .sep { margin-inline: 6px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 16px 22px; }
  .urgence-band {
    padding: 16px var(--gutter);
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    text-align: center;
  }
  .urgence-band .btn { width: auto; padding: 10px 18px; font-size: 12px; }

  /* INTRO */
  .intro-grid { gap: 36px; }
  .intro-img { aspect-ratio: 4/3; }
  .intro-stats { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; padding-top: 28px; }
  .stat .n { font-size: 40px; }

  /* TIMELINE */
  .timeline-day { padding: 36px 24px; }
  .day-big { font-size: 54px; }
  .day-title { font-size: 18px; }

  /* PACKS */
  .pack-grid { grid-template-columns: 1fr; gap: 18px; }
  .pack-featured { transform: none; }
  .pack-featured:hover { transform: translateY(-6px); }
  .pack-body { padding: 24px 22px 28px; }
  .pack-price .real { font-size: 42px; }
  .pack-name { font-size: 26px; }
  .banner-title { left: 18px; right: 18px; bottom: 16px; }
  .banner-tier { top: 14px; left: 16px; font-size: 9px; letter-spacing: 0.2em; }
  .banner-ribbon { top: 14px; right: 16px; font-size: 9px; padding: 4px 10px; }

  /* FINITIONS */
  .materiaux { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
  .mat-info { padding: 18px 14px; }
  .mat-info .name { font-size: 17px; }

  /* CONFIGURATEUR */
  .opt-group { padding: 18px 18px; }
  .opt-swatches, .opt-swatches.col-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .opt-swatches.col-2 { grid-template-columns: repeat(2, 1fr); }
  .config-summary { padding: 28px 22px; }
  .summary-text h3 { font-size: 22px; }
  .summary-list li { font-size: 12px; padding: 5px 11px; }

  /* GALERIE */
  .gal-grid { grid-template-columns: 1fr; gap: 24px; }
  .gal-slider .grip { width: 40px; height: 40px; font-size: 14px; }
  .gal-meta { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* URGENCE LARGE */
  .creneaux-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 36px auto; }
  .creneau { padding: 14px 8px; }
  .creneau .day { font-size: 22px; }

  /* AVIS */
  .avis-grid { grid-template-columns: 1fr; gap: 18px; }
  .avis-card { padding: 26px 22px; }
  .avis-text { font-size: 14px; }
  .avis-counter {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: 40px;
    padding: 28px 22px;
    gap: 18px;
  }
  .avis-counter .big { font-size: 48px; text-align: center; }
  .avis-counter .label { text-align: center; }
  .avis-counter .divider { width: 50px; height: 1px; margin: 0 auto; }

  /* PARRAINAGE */
  .parr-grid { gap: 36px; }
  .parr-visual { aspect-ratio: 1/1; }
  .parr-visual .amount .big { font-size: clamp(72px, 18vw, 110px); }
  .parr-step { grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; }

  /* ZONES */
  .zones-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .zone-card { padding: 22px 18px; }
  .zone-card h3 { font-size: 20px; }

  /* FAQ */
  .faq-q { padding: 22px 50px 22px 0; font-size: 15px; }
  .faq-a-inner { padding: 0 50px 22px 0; font-size: 14px; }

  /* CONTACT */
  .contact-form { padding: 26px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 14px; }
  .contact-row { padding: 14px 0; }

  /* FOOTER */
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; gap: 10px; text-align: center; align-items: center; }

  /* Floating elements */
  .wa-btn { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .sticky-cta {
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 14px;
    max-width: calc(100vw - 20px);
    bottom: 14px;
    gap: 10px;
  }
  .sticky-cta .scta-text { font-size: 12px; flex: 1; min-width: 0; }
  .sticky-cta .btn { padding: 10px 16px; font-size: 12px; }
  .sticky-cta .close { width: 24px; height: 24px; font-size: 14px; }

  /* Chapter decorative numbers — smaller on mobile */
  .chapter { font-size: 80px; top: 30px; right: 12px; }

  /* Rapid form (if present) */
  .rapid-form {
    grid-template-columns: 1fr;
    border-radius: 16px;
    padding: 8px;
    gap: 6px;
  }
  .rapid-form input, .rapid-form button {
    border-radius: 12px;
    padding: 12px 16px;
  }

  /* General button width fix only inside content blocks */
  .pack .btn, .summary-cta .btn, .contact-form .btn { width: 100%; }
}

/* Mobile small — < 480px */
@media (max-width: 480px) {
  :root {
    --section-y: 60px;
    --gutter: 16px;
  }
  body { font-size: 14.5px; }

  /* Hero */
  .hero-content { padding: 100px var(--gutter) 48px; }
  .hero h1 { font-size: clamp(30px, 9vw, 42px); }

  /* Section heads */
  .section-head { margin-bottom: 32px; }
  .section-head h2 { max-width: 16ch; }

  /* Packs */
  .pack-body { padding: 22px 18px 24px; }
  .pack-price .real { font-size: 38px; }
  .pack-feat li { font-size: 13px; padding: 6px 0 6px 22px; }

  /* Configurateur */
  .shower-stage { aspect-ratio: 4/5; }
  .config-options { gap: 22px; }
  .opt-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .opt-current { font-size: 12px; }

  /* Galerie */
  .gal-slider .grip { width: 36px; height: 36px; }
  .gal-slider .label-tag { font-size: 9px; padding: 4px 8px; }

  /* Avis */
  .avis-card { padding: 22px 18px; }
  .avis-card::before { font-size: 60px; top: 14px; right: 18px; }

  /* Creneaux: 2 columns stays good */
  .creneau .day { font-size: 20px; }
  .creneau .month, .creneau .zone { font-size: 10px; }

  /* Zones cards: stack */
  .zones-grid { grid-template-columns: 1fr; }
  .zone-card { padding: 24px 22px; }

  /* Materials: stack */
  .materiaux { grid-template-columns: 1fr; gap: 14px; }
  .mat { aspect-ratio: 5/3; }

  /* Timeline */
  .timeline-day { padding: 30px 20px; }
  .day-big { font-size: 44px; }
  .day-title { font-size: 17px; }

  /* Parrainage rings */
  .parr-visual .amount .big { font-size: 78px; }

  /* Floating */
  .sticky-cta {
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
    padding: 12px;
  }
  .sticky-cta .scta-text { text-align: center; padding: 4px 0; }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  .sticky-cta .close { position: absolute; top: 8px; right: 8px; }
  .wa-btn { width: 48px; height: 48px; bottom: 16px; right: 16px; }

  /* Chapter — even smaller / hide */
  .chapter { font-size: 60px; top: 24px; }

  /* Logo / nav */
  .nav .btn-gold { padding: 10px 14px; font-size: 11px; }
  .nav-cta .btn-gold span:not(.arrow) { display: inline; }
}

/* Extra-small — < 360px (compact androids) */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .hero h1 { font-size: 28px; }
  .pack-price .real { font-size: 34px; }
  .nav-cta .btn-gold { font-size: 11px; padding: 9px 12px; }
}

/* Hide chapter decorations when they'd overflow */
@media (max-width: 600px) {
  .chapter { display: none; }
}

/* Touch-only — disable custom cursor entirely */
@media (hover: none), (pointer: coarse) {
  .cur-dot, .cur-ring { display: none !important; }
  body, body a, body button, body input { cursor: auto !important; }
}

/* ============================================
   HERO META — Floating trust badge (bottom-right)
   ============================================ */
.hero-meta {
  position: absolute;
  right: var(--gutter);
  bottom: 110px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  background: rgba(10, 24, 24, 0.5);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 18px 22px;
  border-radius: 16px;
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
  animation: heroMetaIn 0.9s 0.4s var(--ease-out) backwards;
}
@keyframes heroMetaIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-meta-stars {
  font-size: 13px;
  color: var(--or);
  letter-spacing: 3px;
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.5));
}
.hero-meta .num {
  font-size: 38px;
  font-weight: 200;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.hero-meta .num .small {
  font-size: 18px;
  color: var(--or);
}
.hero-meta .lbl {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* Hero ★ badge — hidden on tablet + mobile so it never overlaps
   the h1. This must come AFTER the .hero-meta definition above to
   win the cascade (same specificity, last one wins). */
@media (max-width: 1024px) {
  .hero-meta { display: none !important; }
}


/* ============================================
   PACK FEATURED — animated gold ring "Best seller"
   ============================================ */
.pack-featured {
  position: relative;
}
.pack-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(14, 124, 123, 0.5) 0%,
    rgba(201, 168, 76, 0.7) 50%,
    rgba(14, 124, 123, 0.5) 100%);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  animation: packGoldShift 8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.pack-featured:hover::before { opacity: 1; }
@keyframes packGoldShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle ribbon pulse on the "Le plus choisi" */
.pack-featured .banner-ribbon {
  animation: ribbonPulse 3.5s ease-in-out infinite;
}
@keyframes ribbonPulse {
  0%, 100% { box-shadow: 0 4px 12px -2px rgba(14, 124, 123, 0.4); }
  50%      { box-shadow: 0 6px 22px -2px rgba(14, 124, 123, 0.7); }
}

/* ============================================
   PAGE HERO (réutilisable pour pages dédiées)
   ============================================ */
.page-hero {
  padding: 140px var(--gutter) 60px;
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  background: linear-gradient(135deg, var(--fond-sombre) 0%, var(--fond-sombre-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.15), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(14, 124, 123, 0.25), transparent 60%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--or); }
.page-hero .eyebrow::before { background: var(--or); }
.page-hero h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  margin: 20px 0 22px;
  max-width: 20ch;
}
.page-hero h1 .italic { font-style: italic; font-weight: 200; }
.page-hero h1 .italic.gold { color: var(--or); }
.page-hero p {
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.7;
}
.page-hero p b { color: var(--or); font-weight: 600; }

.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.page-breadcrumb a { color: var(--or); transition: opacity .2s; }
.page-breadcrumb a:hover { opacity: 0.7; }
.page-breadcrumb .sep { opacity: 0.4; }

/* Galerie page dédiée — plus aérée */
.galerie-page {
  background: var(--fond-clair);
}
.galerie-page .gal-grid {
  gap: 44px;
}
.galerie-page .gal-card {
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 14px 36px -18px rgba(14, 124, 123, 0.18);
  transition: all .4s var(--ease-out);
}
.galerie-page .gal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -22px rgba(14, 124, 123, 0.3);
}
.galerie-page .gal-meta {
  padding: 14px 6px 4px;
}
.galerie-page .gallery-cta {
  margin-top: 64px;
  text-align: center;
}
.galerie-page .gallery-cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--texte-mute);
  font-style: italic;
}

@media (max-width: 768px) {
  .page-hero { padding-top: 100px; padding-bottom: 40px; }
  .page-hero h1 { font-size: 36px; }
  .galerie-page .gal-grid { gap: 28px; }
  .galerie-page .gal-card { padding: 12px; }
}

/* ============================================
   QUOTE STRIP — preuve sociale entre urgence et intro
   ============================================ */
.quote-strip {
  background: linear-gradient(180deg, #fff 0%, var(--fond-clair) 100%);
  padding: 30px var(--gutter);
  border-bottom: 1px solid var(--ligne);
  position: relative;
}
.quote-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.quote-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  text-align: center;
}
.quote-strip .qs-stars {
  color: var(--or);
  font-size: 14px;
  letter-spacing: 3px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.3));
}
.quote-strip .qs-text {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--texte);
  font-style: italic;
  font-weight: 300;
  max-width: 64ch;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
}
.quote-strip .qs-em {
  font-weight: 500;
  color: var(--turquoise);
  font-style: normal;
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.005em;
}
.quote-strip .qs-author {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-mute);
  font-weight: 500;
  flex-shrink: 0;
}
.quote-strip .qs-sep { color: var(--or); margin: 0 4px; }

@media (max-width: 768px) {
  .quote-strip { padding: 24px var(--gutter); }
  .quote-strip .wrap { gap: 14px; }
  .quote-strip .qs-stars { font-size: 13px; letter-spacing: 2px; }
  .quote-strip .qs-text { font-size: 14px; }
  .quote-strip .qs-author { font-size: 10px; }
}

/* ============================================
   FINITIONS CTA — relie au Pack Luxe
   ============================================ */
.finitions-cta {
  margin: 60px auto 0;
  max-width: 720px;
  text-align: center;
  padding: 28px;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 6px;
  position: relative;
  z-index: 1;
}
.finitions-cta p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.finitions-cta p b {
  color: var(--or);
  font-weight: 600;
}

/* ============================================
   COMPOSER PROMO BANNER (replaces ambiance simulator)
   ============================================ */
.composer-promo {
  background: linear-gradient(135deg, var(--fond-sombre) 0%, var(--fond-sombre-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.composer-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(201, 168, 76, 0.18), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(14, 124, 123, 0.28), transparent 55%);
  pointer-events: none;
}
.composer-promo > .wrap { position: relative; z-index: 1; }

.cp-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: clamp(36px, 5vw, 64px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.cp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201,168,76,0.4), rgba(14,124,123,0.3) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cp-text .eyebrow {
  color: var(--or);
  margin-bottom: 18px;
}
.cp-text .eyebrow::before { background: var(--or); }
.cp-text h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.cp-text h2 .italic.gold { font-style: italic; color: var(--or); font-weight: 200; }
.cp-text p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 52ch;
}

.cp-features {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.cp-features .cp-f b {
  color: var(--or);
  font-weight: 600;
  margin-right: 4px;
}
.cp-features .cp-sep { color: rgba(255,255,255,0.25); }

/* Preview tile mosaic */
.cp-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  aspect-ratio: 3/2;
  position: relative;
}
.cp-tile {
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5);
  transition: all 0.4s var(--ease-out);
}
.cp-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 50%);
}
.cp-card:hover .cp-tile { transform: translateY(-2px); }
.cp-card:hover .cp-tile:nth-child(1) { transition-delay: 0s; }
.cp-card:hover .cp-tile:nth-child(2) { transition-delay: 0.05s; }
.cp-card:hover .cp-tile:nth-child(3) { transition-delay: 0.1s; }
.cp-card:hover .cp-tile:nth-child(4) { transition-delay: 0.15s; }
.cp-card:hover .cp-tile:nth-child(5) { transition-delay: 0.2s; }
.cp-card:hover .cp-tile:nth-child(6) { transition-delay: 0.25s; }

/* Mobile */
@media (max-width: 900px) {
  .cp-card { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .cp-preview { aspect-ratio: 3/2; max-width: 380px; }
}
@media (max-width: 600px) {
  .cp-text h2 { font-size: 26px; }
  .cp-text p { font-size: 14px; }
  .cp-features { font-size: 12px; gap: 6px; }
  .cp-preview { gap: 6px; }
}

/* ============================================
   CRÉNEAUX LIMITÉS — compact urgence card
   (replaces the old big .urgence-large block)
   ============================================ */
.creneaux {
  background: linear-gradient(180deg, var(--fond-clair) 0%, #fff 100%);
  padding-block: clamp(60px, 8vw, 100px);
  position: relative;
}
.cren-card {
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--fond-sombre) 0%, var(--fond-sombre-2) 100%);
  border-radius: 8px;
  padding: clamp(32px, 4vw, 50px);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.4);
}
.cren-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(201,168,76,0.16), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(14,124,123,0.22), transparent 55%);
  pointer-events: none;
}
.cren-card > * { position: relative; z-index: 1; }

/* LEFT — pitch */
.cren-head { color: #fff; }
.cren-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 18px;
}
.cren-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.7);
  animation: pulse 1.8s infinite;
}
.cren-head h2 {
  color: #fff;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.cren-head h2 em {
  font-style: italic;
  color: var(--or);
  font-weight: 200;
}
.cren-head p {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* RIGHT — 3 slots stacked */
.cren-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cren-slot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--or);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s var(--ease-out);
  color: #fff;
}
.cren-slot:hover {
  background: rgba(201,168,76,0.12);
  border-color: var(--or);
  border-left-color: var(--or);
  transform: translateX(4px);
}
.slot-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.slot-day {
  font-size: 28px;
  font-weight: 200;
  color: var(--or);
  line-height: 1;
  letter-spacing: -0.02em;
}
.slot-mo {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.slot-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.slot-zone {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.slot-dept {
  font-size: 11px;
  color: var(--or);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: 4px;
}
.slot-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--or);
  text-transform: uppercase;
  transition: transform 0.3s;
}
.cren-slot:hover .slot-cta { transform: translateX(3px); }

/* FOOT — taken slots discreet */
.cren-foot {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.cren-taken {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

/* Mobile */
@media (max-width: 900px) {
  .cren-card { grid-template-columns: 1fr; padding: 32px 24px; }
}
@media (max-width: 600px) {
  .cren-head h2 { font-size: 22px; }
  .cren-head p { font-size: 13px; }
  .cren-slot { padding: 12px 14px; gap: 12px; }
  .slot-day { font-size: 24px; }
  .slot-zone { font-size: 14px; }
  .slot-cta { font-size: 11px; }
  .cren-taken { font-size: 10px; line-height: 1.6; }
}