/* Élite Auto Clean : design system public (charte noir / or reprise de la maquette client) */

:root{
  --noir:#050505;
  --noir-2:#0a0a0b;
  --anthracite:#17171a;
  --anthracite-2:#222226;
  --blanc:#f5f5f4;
  --or:#c8a86b;
  --or-clair:#e8d4a8;
  --gris:#8a8a8e;
  --line: rgba(200,168,107,0.18);
  --danger:#d96a5b;
  --success:#7fbf8f;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Mode noir & blanc (Réglages) : convertit les couleurs du thème (or, accents, bordures)
   en gris. Volontairement PAS un filter:grayscale() sur html/body : un filter posé sur un
   ancêtre désature aussi tout son contenu, y compris les vraies photos produit, sans
   qu'un enfant puisse s'y soustraire (limite de CSS, pas contournable proprement). En
   passant par les variables de couleur, les photos (pixels réels, pas pilotés par ces
   variables) restent en couleur, seul l'habillage du site (thème) devient gris. */
html.bw-mode{
  --or:#9a9a9a;
  --or-clair:#cfcfcf;
  --line: rgba(160,160,160,0.18);
  --danger:#9a9a9a;
  --success:#a8a8a8;
  --product-glow:#9a9a9a !important;
}
html.bw-mode .btn-gold:hover:not(:disabled){ box-shadow:0 14px 40px -10px rgba(160,160,160,0.55); }
html.bw-mode .hero{
  background:
    radial-gradient(ellipse at 78% 30%, rgba(160,160,160,0.10), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(160,160,160,0.06), transparent 50%),
    var(--noir);
}
html.bw-mode .garage-glow{
  background:
    linear-gradient(180deg, rgba(160,160,160,0.05), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, #131315, #050505 70%);
}
html.bw-mode .beam{ background:linear-gradient(180deg, rgba(160,160,160,0.16), transparent 70%); }
html.bw-mode .swatch.active{ box-shadow:0 0 0 3px rgba(160,160,160,0.18); }
html.bw-mode .size-btn.active{ background:rgba(160,160,160,0.1); }
html.bw-mode .qty-stepper button:hover{ background:rgba(160,160,160,0.08); }
html.bw-mode .cart-line:hover{ border-color:rgba(160,160,160,0.3); }
html.bw-mode .delivery-option:hover{ background:rgba(160,160,160,0.05); }
html.bw-mode .delivery-option:has(input:checked){ background:rgba(160,160,160,0.08); }
html.bw-mode .tracking-step.is-current .tracking-dot{ box-shadow:0 0 0 4px rgba(160,160,160,0.25); }
html.bw-mode .clean-car-shine{ filter:drop-shadow(0 0 12px rgba(160,160,160,0.55)); }
html.bw-mode .form-field input:focus, html.bw-mode .form-field textarea:focus, html.bw-mode .form-field select:focus{ box-shadow:0 0 0 3px rgba(160,160,160,0.12); }
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:page-fade-in .5s ease;
}
@keyframes page-fade-in{ from{ opacity:0; } to{ opacity:1; } }
::selection{ background:var(--or); color:var(--noir); }
h1,h2,h3,.disp{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:600;
  line-height:1.05;
}
.mono{ font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1280px; margin:0 auto; padding:0 24px; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* ---------- stitch divider ---------- */
.stitch{
  position:relative; height:1px; background:var(--line); width:100%;
}
.stitch::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, var(--or) 0 6px, transparent 6px 18px);
  opacity:0.55; height:1px;
  transform:scaleX(0); transform-origin:center; transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.stitch.in::before{ transform:scaleX(1); }

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.28em; font-size:11px; color:var(--or);
  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;
  margin-bottom:18px;
}

/* ---------- nav ---------- */
nav.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-bottom:22px; transition:all .4s ease; border-bottom:1px solid transparent;
}
nav.site-nav.scrolled{
  background:rgba(5,5,5,0.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; transition:padding .4s ease; }
nav.site-nav.scrolled .nav-inner{ padding-top:14px; }

/* ---------- bandeau promo ---------- */
.promo-banner{ background:linear-gradient(135deg,var(--or-clair),var(--or)); text-align:center; padding:9px 0; }
.promo-banner a, .promo-banner span{ color:var(--noir); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.promo-banner a{ text-decoration:underline; }
.logo-mark{ display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.06em; }
.logo-mark .dot{ width:8px; height:8px; background:var(--or); border-radius:1px; transform:rotate(45deg); flex-shrink:0; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
a.logo-mark:hover .dot{ transform:rotate(225deg); }
.logo-mark img.brand-icon{ height:40px; width:auto; object-fit:contain; display:block; }
.nav-links{ display:flex; gap:38px; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; }
.nav-links a{ position:relative; color:var(--gris); transition:color .3s; }
.nav-links a:hover, .nav-links a.active{ color:var(--blanc); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--or); transition:width .3s; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-phone{
  display:flex; align-items:center; gap:8px; color:var(--gris); font-size:13px;
  font-family:'JetBrains Mono',monospace; letter-spacing:0.03em; white-space:nowrap; transition:color .3s;
}
.nav-phone:hover{ color:var(--or); }
.nav-cart{ position:relative; display:flex; align-items:center; }
.nav-cart .badge{
  position:absolute; top:-9px; right:-11px; background:var(--or); color:var(--noir);
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nav-cart .badge.bump{ transform:scale(1.35); }
.nav-cart svg{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav-cart.bump svg{ transform:scale(1.12) rotate(-6deg); }
.nav-toggle{ display:none; background:none; border:none; color:var(--blanc); cursor:pointer; transition:transform .2s ease; }
.nav-toggle:active{ transform:scale(0.85); }
.nav-mobile{
  display:flex; flex-direction:column; gap:0; overflow:hidden;
  max-height:0; opacity:0; margin-top:0; border-top:0 solid var(--line);
  transition:max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin-top .4s ease, border-top-width .4s ease;
}
.nav-mobile a{ padding:16px 4px; border-bottom:1px solid var(--line); color:var(--gris); font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.nav-mobile.open{ max-height:400px; opacity:1; margin-top:18px; border-top:1px solid var(--line); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 38px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; cursor:pointer; border:1px solid transparent; transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative; overflow:hidden; background:none;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-gold{ background:linear-gradient(135deg,var(--or-clair),var(--or)); color:var(--noir); }
.btn-gold:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(200,168,107,0.55); }
.btn-ghost{ border-color:rgba(255,255,255,0.25); color:var(--blanc); }
.btn-ghost:hover:not(:disabled), .btn-ghost:focus-visible:not(:disabled){ background:var(--blanc); border-color:var(--blanc); color:var(--noir); }
.btn-sm{ padding:11px 22px; font-size:11px; }
.btn-block{ width:100%; }

/* ---------- bannière de lancement (accueil) ---------- */
.hero-banner{ padding-top:84px; }
.hero-banner a{ display:block; }
.hero-banner img{
  display:block; width:100%; height:auto; max-height:520px;
  aspect-ratio:1774/887; object-fit:contain; margin:0 auto; background:var(--noir);
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center;
  padding-top:120px; padding-bottom:60px;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(200,168,107,0.10), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(200,168,107,0.06), transparent 50%),
    var(--noir);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
.hero h1{ font-size:clamp(42px,5.4vw,74px); }
.hero h1 .accent{ color:var(--or); }
.hero p.lead{ color:var(--gris); font-size:17px; max-width:460px; margin:26px 0 38px; line-height:1.7; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; margin-top:56px; flex-wrap:wrap; }
.hero-stats div .num{ font-family:'Oswald'; font-size:26px; color:var(--or-clair); }
.hero-stats div .lbl{ font-size:11px; color:var(--gris); letter-spacing:0.1em; text-transform:uppercase; margin-top:4px; }

.hero-visual{ position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
.garage-glow{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(200,168,107,0.05), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, #131315, #050505 70%);
  border:1px solid var(--line);
}
.beam{ position:absolute; top:-10%; width:220px; height:140%; background:linear-gradient(180deg, rgba(200,168,107,0.16), transparent 70%); filter:blur(30px); transform:rotate(18deg); }
.beam.b1{ left:15%; } .beam.b2{ left:60%; opacity:.6; }
.hero-photo{
  position:relative; z-index:2; height:100%; width:auto; max-width:100%;
  object-fit:cover; border-radius:6px; border:1px solid var(--line);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,0.6));
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger.in .stagger-item{ opacity:1; transform:translateY(0); }
.stagger-item{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.stagger-item:nth-child(1){ transition-delay:0s; }
.stagger-item:nth-child(2){ transition-delay:.08s; }
.stagger-item:nth-child(3){ transition-delay:.16s; }
.stagger-item:nth-child(4){ transition-delay:.24s; }
.stagger-item:nth-child(5){ transition-delay:.32s; }
.stagger-item:nth-child(6){ transition-delay:.4s; }
.stagger-item:nth-child(7){ transition-delay:.48s; }
.stagger-item:nth-child(8){ transition-delay:.56s; }
.stagger-item:nth-child(n+9){ transition-delay:.64s; }

section{ position:relative; padding:120px 0; }
section.tight{ padding:80px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 64px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); }
.section-head p{ color:var(--gris); margin-top:18px; font-size:16px; line-height:1.7; }

/* ---------- advantages / feature grid ---------- */
.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.adv-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.adv-card{ background:var(--noir); padding:44px 34px; transition:background .4s; overflow:hidden; }
.adv-card:hover{ background:var(--anthracite); }
.adv-icon{ width:42px; height:42px; margin-bottom:22px; color:var(--or); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.adv-card:hover .adv-icon{ transform:translateY(-4px) scale(1.08); }
.adv-card h3{ font-size:17px; margin-bottom:10px; font-weight:500; text-transform:none; letter-spacing:0; font-family:'Inter'; transition:color .3s ease; }
.adv-card:hover h3{ color:var(--or-clair); }
.adv-card p{ color:var(--gris); font-size:14px; line-height:1.6; }

/* ---------- suggestions accueil (aperçu de la collection) ---------- */
/* Largeur fixe (pas 1fr) plutôt qu'un pourcentage : chaque carte garde toujours exactement
   300px, quelle que soit la largeur du conteneur. auto-fit (pas repeat(4, ...)) : avec 4
   cartes à 300px + gaps, la largeur totale (1254px) dépasse le conteneur max (1232px de
   contenu utile sur 1280px de max-width), donc un repeat(4,...) fixe déborderait sur tout
   écran plus étroit que ça. auto-fit affiche les 4 côte à côte quand la place le permet et
   bascule proprement en 2x2 sinon, sans jamais changer la taille des cartes elles-mêmes. */
.home-suggestions{ display:grid; grid-template-columns:repeat(auto-fit, 300px); gap:18px; justify-content:center; }
.suggestion-card{ display:block; text-decoration:none; color:inherit; width:300px; }
.suggestion-img{
  aspect-ratio:1/1; background:var(--anthracite); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:10px; transition:border-color .3s ease;
}
.suggestion-card:hover .suggestion-img{ border-color:var(--or); }
.suggestion-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.suggestion-card:hover .suggestion-img img{ transform:scale(1.05); }
.suggestion-body{ text-align:center; }
.suggestion-body h3{
  font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; margin-bottom:3px;
  font-family:'Inter'; line-height:1.25;
}
.suggestion-price{ font-family:'JetBrains Mono',monospace; color:var(--or-clair); font-size:11px; }
@media (max-width:480px){
  .home-suggestions{ grid-template-columns:repeat(auto-fit, 104px); gap:8px; }
  .suggestion-card{ width:104px; }
  .suggestion-body h3{ font-size:10px; }
  .suggestion-price{ font-size:10px; }
}

/* ---------- grille boutique ---------- */
/* Pas de fond "hairline" comme .adv-grid : sur une dernière rangée incomplète, ce fond
   restait visible dans les colonnes vides et formait un rectangle plein disgracieux. */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,240px)); gap:20px; justify-content:center; }
.shop-card{
  display:block; background:var(--anthracite); border:1px solid var(--line);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.shop-card:hover{
  transform:translateY(-6px); border-color:var(--or);
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.6);
}
.shop-card-img{
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.stock-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(138,138,142,0.55); color:var(--blanc);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:2px;
}
.new-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  background:var(--or); color:var(--noir);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:2px; overflow:hidden;
}
.new-badge::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation:badge-shine 3.6s ease-in-out infinite;
}
.shop-card-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(0); transition:filter .5s ease, transform .5s ease;
}
.shop-card:hover .shop-card-img img{ filter:grayscale(1); transform:scale(1.05); }
.shop-card-body{ padding:18px; }
.shop-card-body h3{
  font-size:15px; font-weight:500; text-transform:none; letter-spacing:0;
  font-family:'Inter'; margin-bottom:6px; transition:color .3s ease;
}
.shop-card:hover .shop-card-body h3{ color:var(--or-clair); }
.shop-card-price{ color:var(--or-clair); font-size:14px; }

/* ---------- trust bar ---------- */
.trust-bar{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:50px 0; border-top:1px solid var(--line); }
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-item svg{ width:30px; height:30px; color:var(--or); flex-shrink:0; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
a.trust-item:hover svg{ transform:rotate(-8deg) scale(1.12); }
a.trust-item{ transition:opacity .3s ease; }
a.trust-item:hover{ opacity:.85; }
.trust-item strong{ display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.trust-item span{ display:block; font-size:13px; color:var(--gris); margin-top:2px; }

/* ---------- product page ---------- */
.product-video{
  aspect-ratio:21/9; background:var(--anthracite); border:1px solid var(--line);
  overflow:hidden;
}
.product-video video, .product-video iframe{ width:100%; height:100%; object-fit:cover; display:block; border:none; }
@media (max-width: 700px){ .product-video{ aspect-ratio:9/16; } }

.product-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-address{
  background:var(--anthracite); border:1px solid var(--line); padding:28px;
  margin-bottom:20px;
}
.contact-address h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--or-clair);
  margin-bottom:14px; font-weight:500;
}
.contact-address p{ color:var(--gris); font-size:14px; line-height:1.6; margin-bottom:14px; }
.contact-address a{
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--blanc);
  margin-bottom:8px; transition:color .25s ease;
}
.contact-address a:hover{ color:var(--or-clair); }
.contact-map{
  border:1px solid var(--line); overflow:hidden; line-height:0;
  filter:invert(90%) hue-rotate(180deg) brightness(0.95) contrast(1.05);
}
.contact-map iframe{ display:block; }
html.bw-mode .contact-map{ filter:invert(90%) hue-rotate(180deg) grayscale(1) brightness(0.95) contrast(1.05); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.gallery-glow{ position:relative; }
.gallery-glow::before{
  content:""; position:absolute; inset:-10%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, var(--product-glow, var(--or)) 0%, transparent 70%);
  opacity:0.3; filter:blur(60px); transition:background .6s ease; pointer-events:none;
}
.gallery-main{
  aspect-ratio:4/5; background:var(--anthracite); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
#mainProductImg{ transition:opacity .25s ease; }
.gallery-main .badge{
  position:absolute; top:20px; left:20px; background:var(--or); color:var(--noir);
  font-size:11px; padding:7px 14px; letter-spacing:.12em; font-family:'JetBrains Mono'; text-transform:uppercase; z-index:3;
  overflow:hidden;
}
.gallery-main .badge::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation:badge-shine 3.6s ease-in-out infinite;
}
@keyframes badge-shine{ 0%{ left:-150%; } 35%{ left:150%; } 100%{ left:150%; } }
.viewer-3d{ width:100%; height:100%; cursor:grab; touch-action:none; }
.viewer-3d:active{ cursor:grabbing; }
.viewer-fallback{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; text-align:center; padding:30px; }
.viewer-fallback img{ max-height:70%; object-fit:contain; opacity:.92; }
.viewer-fallback p{ color:var(--gris); font-size:13px; line-height:1.6; font-family:'JetBrains Mono',monospace; letter-spacing:0.04em; }
.viewer-hint{ text-align:center; font-size:11px; color:var(--gris); letter-spacing:.08em; text-transform:uppercase; margin-top:12px; }
.views-available{
  font-size:11px; color:var(--gris); letter-spacing:.08em; text-transform:uppercase;
  margin-top:12px; font-family:'JetBrains Mono',monospace; transition:opacity .3s ease;
}
.views-available-mini{ margin-top:0; padding:10px 18px 0; }

.price-row{ display:flex; align-items:baseline; gap:16px; margin:20px 0 6px; }
.price-now{ font-family:'Oswald'; font-size:32px; color:var(--or-clair); display:inline-block; }
@keyframes price-pulse{ 0%{ transform:scale(1.14); color:var(--blanc); } 100%{ transform:scale(1); color:var(--or-clair); } }
.price-now.price-pulse{ animation:price-pulse .45s cubic-bezier(.2,.8,.2,1); }

@keyframes add-to-cart-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(0.96); } 70%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.btn.added{ animation:add-to-cart-pop .5s cubic-bezier(.2,.8,.2,1); background:linear-gradient(135deg,var(--success),#5fa06e); color:var(--noir); }

.fly-to-cart{
  position:fixed; width:68px; height:32px; z-index:500; pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,0.5));
  transform:translate(0,0) scale(1) rotate(0deg); opacity:1;
  transition:transform .6s cubic-bezier(.3,.15,.6,1), opacity .5s ease .15s;
}
.fly-to-cart svg{ width:100%; height:100%; display:block; }

.option-group{ margin:30px 0; }
.option-group h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-bottom:14px; font-weight:500; }
.swatches{ display:flex; gap:12px; flex-wrap:wrap; }
.swatch{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--line); cursor:pointer;
  position:relative; transition:border-color .25s, transform .25s, box-shadow .3s cubic-bezier(.34,1.56,.64,1);
}
.swatch:hover{ transform:translateY(-2px); }
.swatch.active{ border-color:var(--or); box-shadow:0 0 0 3px rgba(200,168,107,0.18); }
@keyframes swatch-pop{ 0%{ transform:scale(0.82); } 60%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.swatch.active.swatch-pop{ animation:swatch-pop .4s cubic-bezier(.34,1.56,.64,1); }
.swatch-label{ font-size:11px; color:var(--gris); margin-top:8px; text-transform:uppercase; letter-spacing:.05em; }

.size-list{ display:flex; gap:10px; flex-wrap:wrap; }
.size-btn{
  min-width:48px; padding:11px 14px; border:1px solid var(--line); color:var(--blanc);
  background:none; cursor:pointer; font-size:13px; letter-spacing:.05em; transition:all .25s;
}
.size-btn:hover:not(:disabled){ border-color:var(--or); }
.size-btn.active{ border-color:var(--or); background:rgba(200,168,107,0.1); color:var(--or-clair); }
.size-btn:disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }

.qty-stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--line); }
.qty-stepper button{ width:40px; background:none; border:none; color:var(--blanc); font-size:16px; cursor:pointer; transition:color .25s ease, background .25s ease, transform .15s ease; }
.qty-stepper button:hover{ color:var(--or-clair); background:rgba(200,168,107,0.08); }
.qty-stepper button:active{ transform:scale(0.85); }
.qty-stepper input{ width:48px; text-align:center; background:none; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--blanc); font-family:'JetBrains Mono'; }

.product-checks{ list-style:none; margin:24px 0; display:flex; flex-direction:column; gap:10px; }
.product-checks li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--gris); }
.product-checks svg{ width:16px; height:16px; color:var(--or); flex-shrink:0; margin-top:3px; }

.ship-notes{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.ship-notes div{ display:flex; gap:10px; align-items:flex-start; }
.ship-notes svg{ width:20px; height:20px; color:var(--or); flex-shrink:0; }
.ship-notes strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.ship-notes span{ display:block; font-size:12px; color:var(--gris); margin-top:2px; }

/* ---------- témoignages ---------- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.testimonial-card{
  background:var(--anthracite); border:1px solid var(--line); padding:28px;
  display:flex; flex-direction:column; gap:16px; transition:border-color .35s ease, transform .35s ease;
}
.testimonial-card:hover{ border-color:var(--or); transform:translateY(-4px); }
.stars{ display:flex; gap:4px; }
.stars svg{ width:16px; height:16px; flex-shrink:0; }
.testimonial-quote{ color:var(--gris); font-size:14px; line-height:1.7; flex:1; }
.testimonial-author{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--blanc); font-weight:500; }

/* ---------- upsells (grille "vous aimerez aussi" + popup post-ajout) ---------- */
.upsell-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,300px)); gap:20px; justify-content:center; }
.upsell-card{
  background:var(--anthracite); border:1px solid var(--line); padding:16px;
  display:flex; flex-direction:column; gap:12px; transition:border-color .35s ease, transform .35s ease;
}
.upsell-card:hover{ border-color:var(--or); transform:translateY(-4px); }
.upsell-thumb{ display:block; aspect-ratio:1/1; background:var(--noir-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.upsell-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0); transition:filter .5s ease, transform .5s ease; }
.upsell-card:hover .upsell-thumb img{ filter:grayscale(1); transform:scale(1.05); }
.upsell-thumb svg{ width:40px; height:40px; }
.upsell-info h4{ font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; font-family:'Inter'; margin-bottom:4px; transition:color .3s ease; }
.upsell-card:hover .upsell-info h4{ color:var(--or-clair); }
.upsell-price{ font-family:'JetBrains Mono',monospace; color:var(--or-clair); font-size:13px; }

.upsell-modal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px; }
.upsell-modal.open{ display:flex; }
.upsell-modal-backdrop{ position:absolute; inset:0; background:rgba(5,5,5,0.75); backdrop-filter:blur(4px); }
.upsell-modal-panel{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  background:var(--anthracite); border:1px solid var(--line); padding:36px 30px 30px;
}
.upsell-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid var(--line);
  background:none; color:var(--gris); font-size:18px; cursor:pointer; line-height:1;
}
.upsell-modal-close:hover{ color:var(--blanc); border-color:var(--or); }
.upsell-modal-head{ text-align:center; margin-bottom:26px; }
.upsell-modal-head svg{ margin:0 auto 12px; }
.upsell-modal-head h3{ font-size:19px; margin-bottom:6px; }
.upsell-modal-head p{ color:var(--gris); font-size:13px; }
.upsell-modal-items{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.upsell-modal-item{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); padding:12px; }
.upsell-modal-item .upsell-thumb{ width:56px; height:56px; aspect-ratio:auto; flex-shrink:0; }
.upsell-modal-item .upsell-modal-item-info{ flex:1; min-width:0; }
.upsell-modal-item .upsell-modal-item-info h4{ font-size:13px; font-weight:500; margin-bottom:3px; }
.upsell-modal-item .upsell-modal-item-info span{ font-family:'JetBrains Mono',monospace; color:var(--or-clair); font-size:12px; }
.upsell-modal-actions{ display:flex; flex-direction:column; gap:10px; }

/* ---------- alerts / toasts ---------- */
.alert{ padding:16px 20px; border:1px solid var(--line); font-size:14px; margin-bottom:20px; }
.alert-error{ border-color:rgba(217,106,91,0.5); color:var(--danger); background:rgba(217,106,91,0.08); }
.alert-success{ border-color:rgba(127,191,143,0.5); color:var(--success); background:rgba(127,191,143,0.08); }
.toast{
  position:fixed; bottom:30px; right:30px; z-index:200; background:var(--anthracite);
  border:1px solid var(--or); color:var(--blanc); padding:16px 22px; font-size:13px;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:all .35s ease;
}
.toast.show{ transform:translateY(0); opacity:1; }

.social-links{ display:flex; gap:14px; margin-top:14px; }
.social-links a{ color:var(--gris); display:flex; transition:color .2s ease; }
.social-links a:hover{ color:var(--or); }
.social-links svg{ width:18px; height:18px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.social-links a:hover svg{ transform:rotate(-8deg) scale(1.15); }

.sales-ticker{
  position:fixed; bottom:30px; left:30px; z-index:200; max-width:300px;
  background:var(--anthracite); border:1px solid var(--line); padding:16px 40px 16px 16px;
  display:flex; align-items:flex-start; gap:12px;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:all .4s ease;
}
.sales-ticker.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.sales-ticker svg{ flex-shrink:0; margin-top:2px; }
.sales-ticker-text{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--gris); line-height:1.4; }
.sales-ticker-text strong{ color:var(--blanc); font-size:13px; font-weight:500; }
.sales-ticker-close{
  position:absolute; top:10px; right:12px; background:none; border:none; color:var(--gris);
  font-size:18px; line-height:1; cursor:pointer; padding:0;
}
.sales-ticker-close:hover{ color:var(--blanc); }
@media (max-width: 700px){ .sales-ticker{ left:16px; right:16px; max-width:none; bottom:16px; } }

/* ---------- cart page ---------- */
.free-shipping-bar{ margin-bottom:32px; }
.free-shipping-bar p{ font-size:13px; color:var(--blanc); margin-bottom:10px; }
.free-shipping-bar p strong{ color:var(--or-clair); }
.free-shipping-track{ height:6px; background:var(--anthracite); border:1px solid var(--line); overflow:hidden; }
.free-shipping-fill{ height:100%; background:var(--or); transition:width .4s ease; }
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:start; }
.cart-line{
  display:grid; grid-template-columns:64px 1fr auto auto; gap:18px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .3s ease, border-color .3s ease;
}
.cart-line:hover{ padding-left:8px; border-color:rgba(200,168,107,0.3); }
.cart-line-img{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:6px; border:1px solid var(--line);
  background:var(--anthracite); overflow:hidden; flex-shrink:0; transition:transform .3s ease;
}
.cart-line-img img{ width:100%; height:100%; object-fit:cover; }
.cart-line:hover .cart-line-img{ transform:scale(1.06); }
.cart-line .swatch-dot{
  position:absolute; bottom:-4px; right:-4px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--anthracite); box-shadow:0 0 0 1px var(--line);
}
.cart-line .meta strong{ display:block; font-size:15px; font-weight:500; }
.cart-line .meta span{ display:block; font-size:12px; color:var(--gris); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }
.cart-line .price{ font-family:'Oswald'; color:var(--or-clair); white-space:nowrap; }
.cart-remove{ background:none; border:none; color:var(--gris); cursor:pointer; font-size:12px; text-decoration:underline; letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }
.cart-remove:hover{ color:var(--danger); }
.cart-empty{ text-align:center; padding:80px 0; color:var(--gris); }

.delivery-option{ transition:background .25s ease, padding-left .25s ease; }
.delivery-option:hover{ background:rgba(200,168,107,0.05); padding-left:14px; }
.delivery-option:has(input:checked){ background:rgba(200,168,107,0.08); }
.delivery-star{ color:var(--or); font-size:12px; cursor:help; }
.delivery-option-disabled{ opacity:.45; cursor:not-allowed; }
.delivery-option-disabled input{ cursor:not-allowed; }

.summary-card{ background:var(--anthracite); border:1px solid var(--line); padding:32px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--gris); margin-bottom:14px; }
.summary-row.total{ color:var(--blanc); font-size:17px; font-family:'Oswald'; border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }

/* ---------- forms ---------- */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gris); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--anthracite); border:1px solid var(--line); color:var(--blanc);
  padding:14px 16px; font-family:inherit; font-size:14px; transition:border-color .3s ease, box-shadow .3s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(200,168,107,0.12); }
.form-field textarea{ resize:vertical; min-height:120px; }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--or-clair); margin-bottom:18px; }
.footer-col a{ display:block; color:var(--gris); font-size:13px; margin-bottom:10px; transition:color .25s; }
.footer-col a:hover{ color:var(--blanc); }
.footer-col p{ color:var(--gris); font-size:13px; line-height:1.7; max-width:320px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--gris); border-top:1px solid var(--line); padding-top:24px; }

/* ---------- legal / prose pages ---------- */
.prose{ max-width:820px; margin:0 auto; padding-top:160px; padding-bottom:100px; }
.prose h1{ font-size:clamp(30px,4vw,44px); margin-bottom:30px; }
.prose h2{ font-size:20px; margin:36px 0 14px; text-transform:none; letter-spacing:0; }
.prose p, .prose li{ color:var(--gris); font-size:15px; line-height:1.8; margin-bottom:14px; }
.prose ul{ padding-left:22px; }
.prose strong{ color:var(--blanc); font-weight:500; }

/* ---------- 404 ---------- */
.error-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px; padding:24px; }
.error-page .code{ font-family:'Oswald'; font-size:120px; color:var(--or); line-height:1; animation:error-code-pop .7s cubic-bezier(.2,.8,.2,1); }
@keyframes error-code-pop{ 0%{ transform:scale(0.7); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }

/* ---------- confirmation de commande : boucle "voiture qui brille" -> "commande validée" ---------- */
.clean-reveal{ position:relative; width:220px; height:100px; margin:0 auto 10px; }

/* Phase 1/2 : la voiture terne est nettoyée puis brille (0-52% du cycle) */
.clean-car-group{
  position:absolute; inset:0;
  animation:clean-car-group-cycle 6s ease-in-out infinite;
}
.clean-speedlines{ position:absolute; left:-6px; top:50%; transform:translateY(-50%); }
.clean-speedlines span{
  display:block; height:2px; background:var(--line); margin-bottom:6px; border-radius:2px;
  animation:clean-speedline-cycle 6s ease infinite;
}
.clean-speedlines span:nth-child(1){ width:10px; }
.clean-speedlines span:nth-child(2){ width:16px; }
.clean-speedlines span:nth-child(3){ width:8px; }
.clean-car{ position:absolute; inset:0; width:100%; height:100%; }
.clean-car-dull{ stroke:var(--line); }
.clean-car-shine{
  stroke:var(--or); filter:drop-shadow(0 0 12px rgba(200,168,107,0.55));
  animation:clean-car-shine-wipe 6s cubic-bezier(.65,0,.35,1) infinite;
}
.clean-sweep{
  position:absolute; top:-14px; bottom:-14px; left:0; width:16px;
  background:linear-gradient(90deg, transparent, rgba(245,245,244,0.85), transparent);
  filter:blur(5px); opacity:0;
  animation:clean-sweep-cycle 6s cubic-bezier(.65,0,.35,1) infinite;
}
.sparkle{
  position:absolute; color:var(--or-clair); font-size:15px; opacity:0; pointer-events:none;
  animation:sparkle-twinkle 2.6s ease-in-out infinite;
}
.sparkle.s1{ top:2%; left:18%; animation-delay:1.9s; }
.sparkle.s2{ top:62%; left:6%; font-size:10px; animation-delay:2.3s; }
.sparkle.s3{ top:-4%; left:68%; font-size:12px; animation-delay:2.7s; }
.sparkle.s4{ top:60%; left:88%; font-size:10px; animation-delay:3.1s; }

/* Phase 3 : le logo brillant laisse place au checkmark de validation (52-85% du cycle) */
.clean-check-group{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  animation:clean-check-group-cycle 6s ease-in-out infinite;
}
.clean-check{ width:64px; height:64px; }
.clean-check-path{
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:clean-check-draw 6s ease-in-out infinite;
}
.clean-check-ring{
  position:absolute; width:64px; height:64px; border-radius:50%; border:1px solid var(--or);
  animation:clean-check-ring-pulse 6s ease-out infinite;
}

@keyframes clean-car-group-cycle{
  0%, 43%{ opacity:1; transform:scale(1); }
  52%, 85%{ opacity:0; transform:scale(.85); }
  93%, 100%{ opacity:1; transform:scale(1); }
}
@keyframes clean-car-shine-wipe{
  0%, 7%{ clip-path:inset(0 100% 0 0); }
  33%, 52%{ clip-path:inset(0 0% 0 0); }
  53%, 100%{ clip-path:inset(0 100% 0 0); }
}
@keyframes clean-sweep-cycle{
  0%, 7%{ left:0%; opacity:0; }
  10%, 30%{ opacity:1; }
  33%{ left:100%; opacity:0; }
  100%{ left:0%; opacity:0; }
}
@keyframes clean-speedline-cycle{
  0%, 7%{ opacity:.6; transform:translateX(0); }
  20%, 52%{ opacity:0; transform:translateX(-14px); }
  53%, 100%{ opacity:.6; transform:translateX(0); }
}
@keyframes sparkle-twinkle{
  0%, 100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  50%{ opacity:1; transform:scale(1) rotate(25deg); }
}
@keyframes clean-check-group-cycle{
  0%, 43%{ opacity:0; transform:scale(.7); }
  52%, 77%{ opacity:1; transform:scale(1); }
  85%, 100%{ opacity:0; transform:scale(.7); }
}
@keyframes clean-check-draw{
  0%, 50%{ stroke-dashoffset:60; }
  62%, 85%{ stroke-dashoffset:0; }
  86%, 100%{ stroke-dashoffset:60; }
}
@keyframes clean-check-ring-pulse{
  0%, 55%{ transform:scale(1); opacity:0; }
  62%{ transform:scale(1); opacity:.6; }
  78%, 100%{ transform:scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .clean-car-group, .clean-car-shine, .clean-sweep, .sparkle, .clean-speedlines span,
  .clean-check-group, .clean-check-path, .clean-check-ring{ animation:none; }
  .clean-car-group{ opacity:1; }
  .clean-car-shine{ clip-path:inset(0 0% 0 0); }
  .clean-check-group{ opacity:0; }
}

/* ---------- suivi de commande ---------- */
.tracking-steps{ display:flex; justify-content:space-between; gap:6px; }
.tracking-step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative; }
.tracking-step::before{
  content:""; position:absolute; top:5px; left:-50%; width:100%; height:1px; background:var(--line); z-index:0;
}
.tracking-step:first-child::before{ display:none; }
.tracking-step.is-done::before{ background:var(--or); }
.tracking-dot{ width:11px; height:11px; border-radius:50%; background:var(--noir); border:1px solid var(--line); z-index:1; }
.tracking-step.is-done .tracking-dot{ background:var(--or); border-color:var(--or); }
.tracking-step.is-current .tracking-dot{ box-shadow:0 0 0 4px rgba(200,168,107,0.25); }
.tracking-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); }
.tracking-step.is-done .tracking-label{ color:var(--blanc); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-phone{ display:none; }
  .nav-toggle{ display:block; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:380px; order:-1; }
  .adv-grid{ grid-template-columns:1fr; }
  .adv-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .product-wrap{ grid-template-columns:1fr; gap:44px; }
  .cart-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:80px 0; }
}
@media (max-width: 560px){
  .adv-grid.cols-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cart-line{ grid-template-columns:48px 1fr; row-gap:10px; }
  .cart-line .price, .cart-line .qty-stepper{ grid-column:2; }
  .cart-line-img{ width:48px; height:48px; }
}