/*
Theme Name: Zovalux
Description: Thème sur-mesure pour Zovalux — nettoyage automobile premium à domicile (Bordeaux).
Author: UIPACT
Version: 1.1
Text Domain: zovalux
*/

:root{
  --ink:#141414;
  --pine:#262626;
  --mist:#F9F8F6;
  --mist-2:#EFEFEA;
  --metal:#7A7571;
  --citrus:#D4AF37;
  --citrus-dark:#B5952F;
  --card:#FFFFFF;
  --line: rgba(20,20,20,0.12);
  --shadow: 0 20px 50px -25px rgba(20,20,20,0.35);
  --radius: 22px;
  --serif: "Fraunces", serif;
  --sans: "Inter", sans-serif;
  --mono: "Space Grotesk", sans-serif;
}

/* ---------- MODE SOMBRE ---------- */
html.dark{
  --ink:#F9F8F6;
  --pine:#EFEFEA;
  --mist:#121212;
  --mist-2:#1B1B1B;
  --metal:#A8A29B;
  --citrus:#D4AF37;
  --citrus-dark:#E8C766;
  --card:#1B1B1B;
  --line: rgba(249,248,246,0.12);
  --shadow: 0 20px 50px -25px rgba(0,0,0,0.7);
}
html.dark body{ background: var(--mist); }
html.dark header{ background: rgba(18,18,18,0.78); }
html.dark .mobile-menu{ background: var(--mist); }
html.dark .btn-primary{ background:#2A2A2A; color:#F9F8F6; }
html.dark .btn-primary:hover{ background:#3A3A3A; }
html.dark .pillar{ background: var(--card); }
html.dark .service-card{ background:#1F1F1F; color:#F5F3EE; }
html.dark .service-card:nth-child(2){ background:#181818; }
html.dark .service-card:nth-child(3){ background:#0E0E0E; }
html.dark .zones-wrap{ background:#1B1B1B; }
html.dark .contact{ background:#0E0E0E; }
html.dark .counter-card{ background: var(--card); }
html.dark .testi{ background: var(--card); }
html.dark .team-card{ background: var(--card); }
html.dark .form-row input, html.dark .form-row select, html.dark .form-row textarea{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sans);
  background: var(--mist);
  color: var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: background .35s ease, color .35s ease;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-family: var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:600;
  color: var(--pine);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background: var(--citrus-dark);
  display:inline-block;
}
h1,h2,h3{
  font-family: var(--serif);
  font-weight:500;
  line-height:1.05;
  color: var(--ink);
}
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none; }
.text-reveal{
  opacity:0;
  filter: blur(14px);
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), filter 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.text-reveal.in{ opacity:1; filter:blur(0); transform:none; }
@media (prefers-reduced-motion: reduce){
  .text-reveal{ opacity:1; filter:none; transform:none; transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background: rgba(249,248,246,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition: background .35s ease;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1180px; margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight:600;
  color: var(--ink);
}
.logo .mark{
  width:90px; height:90px;
  flex-shrink:0;
  object-fit: contain;
  display:block;
}
.nav-links{
  display:flex; gap:34px;
  font-size:14.5px; font-weight:500;
}
.nav-links a{
  position:relative;
  padding:4px 0;
  color: var(--pine);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:2px;
  background: var(--citrus-dark);
  transition: width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  display:flex; align-items:center; gap:14px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  border-radius:100px;
  font-size:14px; font-weight:600;
  border:1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background: var(--ink);
  color: var(--mist);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(20,20,20,.55);
  background: var(--pine);
}
.btn-ghost{
  border:1px solid var(--line);
  color: var(--ink);
  background: transparent;
  display:none;
}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background: var(--card);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
  transition: background .3s ease, transform .25s ease, border-color .3s ease;
}
.theme-toggle:hover{ transform: translateY(-2px) rotate(10deg); border-color: var(--citrus-dark); }
.theme-toggle svg{ width:20px; height:20px; color: var(--ink); transition: opacity .25s ease, transform .4s ease; }
.theme-toggle .icon-sun{ position:absolute; opacity:0; transform: scale(.4) rotate(-90deg); }
.theme-toggle .icon-moon{ position:absolute; opacity:1; transform: scale(1) rotate(0deg); }
html.dark .theme-toggle .icon-sun{ opacity:1; transform: scale(1) rotate(0deg); color: var(--citrus); }
html.dark .theme-toggle .icon-moon{ opacity:0; transform: scale(.4) rotate(90deg); }

.burger{
  display:none;
  flex-direction:column; gap:5px;
  width:34px; height:34px;
  align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px;
  background: transparent;
}
.burger span{width:16px; height:2px; background:var(--ink); border-radius:2px; transition:.3s;}
.mobile-menu{
  display:none;
  flex-direction:column;
  background: var(--mist);
  border-bottom:1px solid var(--line);
  padding: 6px 32px 22px;
}
.mobile-menu a{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px; font-weight:500;
}
.mobile-menu.open{display:flex;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding: 84px 0 60px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-220px; right:-160px;
  width:560px; height:560px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.35), rgba(212,175,55,0) 70%);
  filter: blur(10px);
  pointer-events:none;
  animation: float-blob 14s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(100deg, rgba(20,20,20,.05) 0px, rgba(20,20,20,.05) 1px, transparent 1px, transparent 64px);
  pointer-events:none;
  opacity:.6;
}
html.dark .hero::after{
  background-image: repeating-linear-gradient(100deg, rgba(249,248,246,.04) 0px, rgba(249,248,246,.04) 1px, transparent 1px, transparent 64px);
}
.mist{
  position:absolute;
  border-radius:50%;
  filter: blur(30px);
  pointer-events:none;
  opacity:.5;
}
.mist-1{
  top: 10%; left: -8%;
  width:320px; height:220px;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  animation: drift-mist 18s ease-in-out infinite;
}
.mist-2{
  bottom: 4%; right: 6%;
  width:260px; height:180px;
  background: radial-gradient(circle, rgba(38,38,38,.35), transparent 70%);
  animation: drift-mist 22s ease-in-out infinite reverse;
}
@keyframes drift-mist{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-18px) scale(1.12); }
}
@keyframes float-blob{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 40px) scale(1.06); }
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items:center;
}
.hero h1{
  font-size: clamp(38px, 5vw, 60px);
  margin: 18px 0 22px;
  letter-spacing:-0.01em;
}
.hero h1 em{
  font-style: italic;
  color: var(--citrus-dark);
}
.hero p.lead{
  font-size:17.5px;
  color: var(--metal);
  max-width: 480px;
  line-height:1.6;
  margin-bottom: 30px;
}
.hero-actions{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.hero-note{
  font-family: var(--mono);
  font-size:13px;
  color: var(--metal);
}
.hero-stats{
  display:flex; gap:34px;
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.stat b{
  font-family: var(--mono);
  font-size: 26px;
  font-weight:600;
  display:block;
  color: var(--ink);
}
.stat span{
  font-size:12.5px;
  color: var(--metal);
}

/* --- Before/After signature slider --- */
.compare-stage{
  perspective: 1700px;
}
.compare{
  position:relative;
  aspect-ratio: 4/3.1;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
  user-select:none;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.3), transparent 42%),
    linear-gradient(150deg, #3A3A3A, #141414 72%);
  transform-style: preserve-3d;
  will-change: transform;
}
.compare-layer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* La photo "propre" est la base, toujours en place en dessous */
.compare-after{ z-index:1; }
.compare-after::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(75deg, transparent 20%, rgba(212,175,55,.28) 32%, transparent 44%);
  animation: shine-sweep 3.2s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes shine-sweep{
  0%{ transform: translateX(-40%); opacity:0; }
  15%{ opacity:1; }
  50%{ transform: translateX(40%); opacity:0; }
  100%{ transform: translateX(40%); opacity:0; }
}
/* La photo "sale" recouvre tout par défaut, puis s'efface au survol */
.compare-before{
  z-index:3;
  opacity:1;
  transition: opacity .8s ease .1s;
}
.compare:hover .compare-before,
.compare.is-revealed .compare-before{
  opacity:0;
}
.compare-photo{
  width:96%;
  height:94%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
  position:relative;
  z-index:1;
}
.compare-before .compare-photo{
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)) sepia(0.4) saturate(0.55) brightness(0.7) contrast(1.15);
}

@media (prefers-reduced-motion: reduce){
  .compare-before{ transition: opacity .3s ease; }
}
.compare-label{
  position:absolute; top:18px;
  font-family: var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:100px;
  background: rgba(255,255,255,.14);
  color:#fff;
  backdrop-filter: blur(6px);
  z-index:6;
}
.label-after{ left:18px; }
.label-before{ right:18px; background: rgba(0,0,0,.22); }
.compare-caption{
  position:absolute; bottom:16px; left:18px; right:18px;
  font-size:12.5px; color: rgba(255,255,255,.85);
  z-index:6;
}

/* ---------- MARQUEE ---------- */
/* ---------- MARQUEE ---------- */
.zovalux-marquee-container {
  width: 100%;
  overflow: hidden;
  background: var(--mist-2); /* Utilise la couleur auto de ton thème */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  transition: background .35s ease, border-color .35s ease;
}

.zovalux-marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-marquee 25s linear infinite;
}

.zovalux-marquee-content {
  display: flex;
  gap: 56px;
  padding-right: 56px; /* L'astuce pour coller le bloc 2 avec le bon espacement */
}

.zovalux-marquee-content span {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--metal);
  text-transform: uppercase;
  white-space: nowrap;
  /* J'ai dégagé la ligne "margin" qui rajoutait du vide */
}

.zovalux-marquee-content span b { 
  color: var(--citrus-dark); 
}

@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- SCROLL STAGE ---------- */
.scroll-stage{
  position:relative;
  height: 380vh;
  background: var(--ink);
}
html.dark .scroll-stage{ background:#0A0A0A; }
.stage-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 2000px;
}
.stage-rays{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 80px);
  mix-blend-mode: screen;
  pointer-events:none;
}
.stage-glow{
  position:absolute;
  width:900px; height:900px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.14), transparent 65%);
  filter: blur(20px);
  pointer-events:none;
}
.stage-eyebrow{
  position:absolute; top:9%; left:50%; transform:translateX(-50%);
  font-family: var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(249,248,246,.55);
}
.stage-car-wrap{
  position:relative;
  width:min(88vw,680px);
  aspect-ratio: 16/8.6;
  transform-style: preserve-3d;
  will-change: transform;
}
.stage-car-layer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .1s linear;
}
.stage-photo{
  width:100%;
  height:100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 46px rgba(0,0,0,.55));
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 55%, transparent 88%);
}
#stageDirty .stage-photo{
  filter: drop-shadow(0 30px 46px rgba(0,0,0,.55)) sepia(0.4) saturate(0.55) brightness(0.68) contrast(1.15);
}
.stage-copy{
  position:absolute; left:50%; top:20%;
  transform:translateX(-50%);
  text-align:center;
  width:min(88vw,540px);
  height: 3.2em;
  pointer-events:none;
}
.stage-line{
  position:absolute; left:0; right:0; top:0;
  font-family: var(--serif); font-style:italic; font-weight:500;
  font-size: clamp(21px,3.3vw,32px);
  line-height:1.25;
  color:#fff;
  opacity:0; filter: blur(10px); transform: translateY(16px);
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.stage-line.active{ opacity:1; filter:blur(0); transform:translateY(0); }
.stage-chips{
  position:absolute; bottom:88px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  opacity:0; transition: opacity .6s ease;
  width:min(90vw,460px);
}
.stage-chips.active{ opacity:1; }
.stage-chips span{
  font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; padding:7px 13px; border:1px solid rgba(255,255,255,.22); border-radius:100px;
  background: rgba(255,255,255,.06);
}
.stage-progress{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  width:min(64vw,380px); height:2px; background:rgba(255,255,255,.14); border-radius:2px;
}
.stage-progress-bar{ height:100%; width:0%; background: var(--citrus); border-radius:2px; }
@media (max-width: 680px){
  .scroll-stage{ height: 320vh; }
  .stage-car-wrap{ width:92vw; }
  .stage-line{ font-size: 20px; }
}


/* ---------- SECTIONS ---------- */
section{ padding: 96px 0; }
section[id]{ scroll-margin-top: 88px; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px;
  margin-bottom: 52px;
}
.section-head h2{
  font-size: clamp(28px, 3.4vw, 42px);
  margin-top:14px;
  max-width:560px;
}
.section-head p{
  max-width:340px;
  color: var(--metal);
  font-size:14.5px;
  line-height:1.6;
  padding-bottom:6px;
}

/* Pillars */
.pillars{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}
.pillars{ perspective: 1200px; }
.pillar{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out, box-shadow .35s ease, background .35s ease;
}
.pillar::before{
  content:"";
  position:absolute; top:0; left:-140%;
  width:70%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(212,175,55,.35), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
}
.pillar:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.pillar:hover::before{ left:130%; }
.pillar .num{
  font-family: var(--mono);
  font-size:12.5px;
  color: var(--citrus-dark);
  font-weight:600;
}
.pillar h3{
  font-size:21px;
  margin: 14px 0 10px;
}
.pillar p{
  font-size:14px;
  color: var(--metal);
  line-height:1.65;
}

/* Services */
.services{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.services{ perspective: 1400px; }
.service-card{
  background: var(--pine);
  color: #F5F3EE;
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  min-height: 260px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,.4);
  transition: transform .15s ease-out, box-shadow .35s ease;
}
.service-card .top, .service-card h3, .service-card p{
  transform: translateZ(28px);
}
.service-card:nth-child(2){ background:#1F1F1F; }
.service-card:nth-child(3){ background:#141414; }
.service-card:hover{ transform: translateY(-8px); }
.service-card .shine{
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(212,175,55,.22) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.service-card:hover .shine{ transform: translateX(120%); }
.service-card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.service-icon{
  width:42px; height:42px;
  border-radius:12px;
  background: rgba(212,175,55,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  color: var(--citrus);
}
.service-price{
  font-family: var(--mono);
  font-size:12px;
  color: var(--citrus);
  border:1px solid rgba(212,175,55,.4);
  padding:4px 10px;
  border-radius:100px;
}
.service-card h3{
  color:#fff;
  font-size:22px;
  margin-top:22px;
}
.service-card p{
  font-size:13.5px;
  color: rgba(245,243,238,.72);
  margin-top:8px;
  line-height:1.6;
}

/* Process */
.process{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.step{
  padding: 30px 24px 30px 0;
  border-right:1px solid var(--line);
  position:relative;
}
.step:last-child{ border-right:none; }
.step .step-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:40px;
  color: rgba(20,20,20,.16);
}
html.dark .step .step-num{ color: rgba(249,248,246,.16); }
.step h3{ font-size:17px; margin: 10px 0 8px; }
.step p{ font-size:13.5px; color:var(--metal); line-height:1.6; }

/* Zones */
.zones-wrap{
  background: var(--pine);
  border-radius: 28px;
  padding: 54px;
  color: #F5F3EE;
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:50px;
  align-items:center;
  transition: background .35s ease;
}
.zones-wrap h2{ color:#fff; }
.zones-wrap p{ color: rgba(245,243,238,.75); font-size:14.5px; margin-top:14px; line-height:1.65; max-width:420px; }
.chip-grid{
  display:flex; flex-wrap:wrap; gap:10px;
}
.chip{
  font-family: var(--mono);
  font-size:12.5px;
  padding:9px 14px;
  border-radius:100px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
.chip:hover{ background: var(--citrus); color:var(--ink); transform: translateY(-2px); }

/* Counters */
.counters{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:22px;
  text-align:center;
  perspective: 1200px;
}
.counter-card{
  padding: 34px 18px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out, box-shadow .35s ease, background .35s ease;
}
.counter-card b{
  font-family:var(--mono);
  font-size:38px;
  color: var(--citrus-dark);
  display:block;
}
.counter-card span{
  font-size:13px; color:var(--metal);
}

/* Testimonials */
.testi-track{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}
.testi{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: background .35s ease;
}
.testi .stars{ color: var(--citrus-dark); letter-spacing:2px; font-size:14px; }
.testi p{ font-size:14.5px; line-height:1.65; margin: 16px 0 20px; color: var(--ink); }
.testi .who{ display:flex; align-items:center; gap:10px; }
.who-avatar{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--citrus), var(--pine));
}
.who b{ display:block; font-size:13.5px; }
.who span{ font-size:12px; color:var(--metal); }

/* Team */
.team-wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items:center;
}
.team-people{
  display:flex;
  gap:16px;
}
.team-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align:center;
  flex:1;
  transition: background .35s ease;
}
.avatar-big{
  width:84px; height:84px;
  margin:0 auto 16px;
  border-radius:50%;
  background: conic-gradient(from 140deg, var(--pine), var(--citrus), var(--pine));
  position:relative;
  overflow:hidden;
}
.avatar-big img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  z-index:2;
}
.avatar-big .avatar-initials{
  position:absolute; inset:6px;
  border-radius:50%;
  background: var(--mist);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size:20px; font-style:italic;
  color: var(--ink);
  z-index:1;
}
.team-card h3{ font-size:16.5px; margin-top:2px; }
.team-card span{ font-size:12.5px; color:var(--metal); }
.team-copy p{ font-size:15px; line-height:1.75; color: var(--metal); margin-bottom:16px; }
.team-copy p:first-child{
  font-family: var(--serif); font-size:22px; font-style:italic; color:var(--ink); line-height:1.5;
}

/* Album avant/après */
.album-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.album-item{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  aspect-ratio: 4/3;
  border:1px solid var(--line);
  background: var(--mist-2);
}
.album-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.album-tag{
  position:absolute; top:10px; left:10px;
  font-family: var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 10px; border-radius:100px; color:#fff;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.album-tag.after{ background: rgba(212,175,55,.85); color:#15120D; }
.album-caption{
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 12px; font-size:12px; color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.album-empty{ color: var(--metal); font-size:14px; grid-column: 1/-1; text-align:center; padding:30px 0; }
@media (max-width:900px){ .album-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .album-grid{ grid-template-columns: 1fr 1fr; gap:10px; } }

/* Réservation / Calendrier */
.booking-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
  align-items:start;
}
.cal-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.cal-head h3{ font-size:19px; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--ink);
}
.cal-nav button:hover{ background: var(--mist-2); }
.cal-grid{
  display:grid; grid-template-columns: repeat(7,1fr);
  gap:6px;
}
.cal-dow{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  color:var(--metal); text-align:center; padding-bottom:6px;
}
.cal-day{
  aspect-ratio:1; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13.5px; cursor:pointer;
  border:1px solid transparent;
  background: var(--mist-2);
  gap:2px;
  transition: background .2s ease, transform .15s ease;
}
.cal-day:hover:not(.disabled){ background: var(--citrus); color:var(--ink); transform: translateY(-1px); }
.cal-day.empty{ visibility:hidden; }
.cal-day.disabled{ opacity:.35; cursor:not-allowed; background:transparent; border:1px dashed var(--line); }
.cal-day.full{ opacity:.5; cursor:not-allowed; background:transparent; border:1px solid rgba(220,90,90,.4); color:#B5514F; }
.cal-day.selected{ background: var(--ink); color:#fff; }
.cal-day .dots{ display:flex; gap:2px; }
.cal-day .dot{ width:4px; height:4px; border-radius:50%; background: var(--citrus-dark); }
.cal-day.full .dot{ background:#C96A67; }
.cal-legend{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:16px;
  font-size:12px; color:var(--metal);
}
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.cal-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.cal-legend .i-ok{ background: var(--citrus-dark); }
.cal-legend .i-full{ background:#C96A67; }

.booking-form-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.booking-form-card h3{ font-size:19px; margin-bottom:4px; }
.booking-selected-date{
  font-family:var(--mono); font-size:12.5px; color: var(--citrus-dark);
  margin-bottom:18px;
}
.bk-row{ margin-bottom:14px; }
.bk-row label{
  display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--metal); margin-bottom:6px; font-family:var(--mono);
}
.bk-row input, .bk-row select, .bk-row textarea{
  width:100%; background: var(--mist-2); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; font-family:var(--sans); font-size:14px; color: var(--ink);
}
.bk-row textarea{ resize:vertical; min-height:60px; }
.bk-submit{
  width:100%; background: var(--ink); color: var(--mist); border:none;
  padding:14px; border-radius:10px; font-weight:700; font-size:14.5px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.bk-submit:hover:not(:disabled){ transform: translateY(-2px); background: var(--pine); color: var(--mist); }
.bk-submit:disabled{ opacity:.55; cursor:not-allowed; }
.bk-note{ font-size:11.5px; color: var(--metal); margin-top:10px; }
.bk-note.error{ color:#C24A47; }
.bk-note.success{ color: var(--citrus-dark); font-weight:600; }
.booking-placeholder{
  font-size:14px; color: var(--metal); line-height:1.6;
  display:flex; align-items:center; justify-content:center;
  height:100%; min-height:260px; text-align:center;
}
@media (max-width:900px){
  .booking-wrap{ grid-template-columns:1fr; }
}

/* CTA / Contact */
.contact{
  background: var(--ink);
  border-radius: 28px;
  padding: 58px;
  color: #F5F3EE;
  position:relative;
  overflow:hidden;
  transition: background .35s ease;
}
html.dark .contact{ background:#0E0E0E; }
.contact::before{
  content:"";
  position:absolute; bottom:-140px; left:-100px;
  width:340px; height:340px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.22), transparent 70%);
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  position:relative; z-index:1;
}
.contact h2{ color:#fff; font-size: clamp(28px,3.2vw,38px); }
.contact p.sub{ color: rgba(245,243,238,.7); font-size:15px; margin-top:14px; max-width:400px; line-height:1.6;}
.contact-list{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.contact-list a{
  display:flex; align-items:center; gap:12px;
  font-size:15px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition: color .2s ease;
}
.contact-list a:hover{ color: var(--citrus); }
.contact-list .ico{
  width:34px; height:34px; border-radius:10px;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
}
.form-card{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 28px;
}
.form-row{ margin-bottom:16px; }
.form-row label{
  display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color: rgba(245,243,238,.6); margin-bottom:8px; font-family:var(--mono);
}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:12px 14px;
  color:#fff;
  font-family: var(--sans);
  font-size:14px;
}
.form-row textarea{ resize:vertical; min-height:70px; }
.form-row input::placeholder, .form-row textarea::placeholder{ color: rgba(255,255,255,.35); }
.form-submit{
  width:100%;
  background: var(--citrus);
  color: #15120D;
  border:none;
  padding:14px;
  border-radius:10px;
  font-weight:700;
  font-size:14.5px;
  margin-top:6px;
  transition: transform .2s ease, background .2s ease;
}
.form-submit:hover{ transform: translateY(-2px); background: var(--citrus-dark); }
.form-note{ font-size:11.5px; color: rgba(245,243,238,.5); margin-top:10px; }

/* Footer */
footer{
  padding: 50px 0 34px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:30px;
  margin-bottom: 40px;
}
.footer-cols{ display:flex; gap:70px; flex-wrap:wrap; }
.footer-col h4{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--metal); margin-bottom:14px;
}
.footer-col a, .footer-col span{
  display:block; font-size:14px; color: var(--ink); margin-bottom:10px;
}
.footer-col a:hover{ color: var(--citrus-dark); text-decoration:underline; }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.social-row a:hover{ background: var(--ink); color: var(--mist); transform: translateY(-3px); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:12.5px; color: var(--metal); flex-wrap:wrap; gap:10px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .services{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .step{ border-bottom:1px solid var(--line); }
  .zones-wrap{ grid-template-columns:1fr; padding:36px; }
  .counters{ grid-template-columns:1fr 1fr; }
  .testi-track{ grid-template-columns:1fr; }
  .team-wrap{ grid-template-columns:1fr; text-align:center; }
  .team-people{ max-width:360px; margin:0 auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact{ padding:36px; }
}
@media (max-width: 680px){
  .container{ padding:0 18px; }

  /* Nav */
  .nav{ padding:14px 18px; }
  .logo{ font-size:18px; gap:8px; }
  .logo .mark{ width:90px; height:90px; }
  .nav-links{ display:none; }
  .nav-cta{ gap:8px; }
  .btn-ghost{ display:none !important; }
  .btn-primary{ padding:10px 14px; font-size:12.5px; white-space:nowrap; }
  .theme-toggle{ width:38px; height:38px; }
  .theme-toggle svg{ width:17px; height:17px; }
  .burger{ display:flex; width:38px; height:38px; }
  .mobile-menu{ padding:6px 18px 18px; }

  /* Hero */
  .hero{ padding: 34px 0 36px; }
  .hero::before{ width:340px; height:340px; top:-140px; right:-120px; }
  .eyebrow{ font-size:11px; }
  .hero h1{ font-size: clamp(28px, 8vw, 38px); margin: 14px 0 16px; letter-spacing:-0.01em; }
  .hero p.lead{ font-size:15px; max-width:100%; margin-bottom:22px; }
  .hero-actions{ gap:14px; }
  .hero-actions .btn-primary{ width:100%; justify-content:center; padding:14px 22px; font-size:14px; }
  .hero-note{ font-size:12px; }
  .hero-stats{ flex-wrap:wrap; gap:16px 24px; margin-top:30px; padding-top:20px; }
  .stat b{ font-size:21px; }

  /* Before/after compare card */
  .compare-stage{ margin-top:32px; perspective:none; }
  .compare{ aspect-ratio: 4/3.6; border-radius:20px; }
  .compare-photo{ width:98%; height:96%; }
  .compare-label{ font-size:10px; padding:5px 10px; top:12px; }
  .compare-caption{ font-size:11px; bottom:12px; left:14px; right:14px; }

  /* Scroll stage */
  .scroll-stage{ height: 260vh; }
  .stage-eyebrow{ font-size:10.5px; top:7%; }
  .stage-copy{ top:16%; width:92vw; }
  .stage-chips{ bottom:70px; gap:8px; }
  .stage-chips span{ font-size:9.5px; padding:6px 10px; }
  .stage-progress{ bottom:34px; width:80vw; }

  /* Sections */
  section{ padding: 48px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:34px; }
  .section-head h2{ font-size: clamp(24px, 6.5vw, 30px); margin-top:10px; }
  .section-head p{ max-width:100%; font-size:13.5px; }
  .eyebrow::before{ width:14px; }

  .pillars{ grid-template-columns:1fr; gap:14px; }
  .pillar{ padding:24px 20px; }
  .services{ grid-template-columns:1fr; gap:14px; }
  .service-card{ min-height:auto; padding:24px 22px 22px; }
  .process{ grid-template-columns:1fr; }
  .step{ border-right:none; padding:22px 0; border-bottom:1px solid var(--line); }
  .step:last-child{ border-bottom:none; }

  .zones-wrap{ padding:26px 22px; border-radius:22px; }
  .chip{ font-size:11.5px; padding:8px 12px; }

  .counters{ grid-template-columns:1fr 1fr; gap:12px; }
  .counter-card{ padding:22px 12px; }
  .counter-card b{ font-size:26px; }
  .counter-card span{ font-size:11.5px; }

  .testi-track{ grid-template-columns:1fr; gap:14px; }
  .testi{ padding:22px; }

  .team-wrap{ gap:28px; }
  .team-people{ gap:12px; }
  .avatar-big{ width:64px; height:64px; }
  .team-copy p:first-child{ font-size:18px; }

  .contact{ padding:26px 20px; border-radius:22px; }
  .contact-grid{ gap:32px; }
  .form-card{ padding:20px; }

  .footer-cols{ gap:28px 36px; }
  .footer-top{ flex-direction:column; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width: 400px){
  .btn-primary{ padding:9px 12px; font-size:11.5px; }
  .nav-cta{ gap:6px; }
  .logo{ font-size:16px; }
  .hero h1{ font-size: clamp(25px, 8.5vw, 32px); }
  .counters{ grid-template-columns:1fr 1fr; }
  .compare{ aspect-ratio: 4/3.9; }
}
/* ---------- BOUTON RETOUR EN HAUT ---------- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--citrus);
  color: var(--ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* Classe ajoutée par JS quand on scrolle */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--citrus-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* --- Responsive Mobile --- */
@media (max-width: 680px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}
/* ---------- HOVER DORÉ BOUTONS (MODE SOMBRE UNIQUEMENT) ---------- */
html.dark .btn-primary:hover {
  background-color: var(--citrus);
  color: var(--ink); /* On passe le texte en sombre pour qu'il reste lisible sur l'or */
  border-color: var(--citrus);
  box-shadow: 0 4px 15px rgba(220, 170, 70, 0.3); /* Léger halo lumineux doré */
  transform: translateY(-2px); /* Petit soulèvement au survol */
  transition: all 0.3s ease;
}
/* ---------- ÉTIQUETTES AVANT / APRÈS DYNAMIQUES ---------- */
.compare-label {
  transition: all 0.3s ease;
  z-index: 10;
}

/* État par défaut : Image AVANT (Bouton Avant en doré) */
.compare .label-before {
  background-color: var(--citrus);
  color: var(--ink);
  font-weight: 600;
}
.compare .label-after {
  background-color: rgba(20, 20, 20, 0.65);
  color: #ffffff;
}

/* Au survol de la souris : Image APRÈS (Bouton Après en doré) */
.compare:hover .label-before,
.compare.is-revealed .label-before {
  background-color: rgba(20, 20, 20, 0.65);
  color: #ffffff;
  font-weight: 400;
}
.compare:hover .label-after,
.compare.is-revealed .label-after {
  background-color: var(--citrus);
  color: var(--ink);
  font-weight: 600;
}
/* Par défaut : tous les liens en blanc (ou gris clair) */
.footer-legal a {
    color: #ffffff; /* Mets var(--metal) si tu préfères gris */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Au passage de la souris : jaune + souligné */
.footer-legal a:hover {
    color: #D4AF37; /* Ton jaune */
    text-decoration: underline;
}

/* La page actuellement ouverte : reste jaune */
.footer-legal a.active-page {
    color: #D4AF37;
}