/* ==========================================================================
   CARSHERWASH — THÈME SOMBRE + FOND ANIMÉ À BULLES
   Se charge APRÈS style.css. Reprend les couleurs de la marque :
   navy #0d1b2a, bleu #2d8cf0, DM Sans.

   Pour revenir au thème clair d'origine : retirer la ligne
   <link rel="stylesheet" href="assets/theme.css"> des pages HTML.
   ========================================================================== */

:root { color-scheme: dark; }

body {
  background-color: var(--navy);
  color: #c2d2e3;
  /* Lueurs bleues volontairement discrètes : un fond trop lumineux fait
     « gabarit », alors qu'une teinte sobre laisse le contenu au premier plan. */
  background-image:
    radial-gradient(900px 600px at 14% 0%, rgba(45, 140, 240, .13), transparent 60%),
    radial-gradient(800px 560px at 88% 30%, rgba(45, 140, 240, .08), transparent 62%);
  background-attachment: fixed;
}

/* ==========================================================================
   FOND ANIMÉ — bulles de mousse
   Les éléments sont créés par app.js. Trois plans de profondeur qui se
   décalent à des vitesses différentes quand on fait défiler la page.
   ========================================================================== */
.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.fx-depth {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.fx-depth span {
  position: absolute;
  bottom: -14vh;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(90, 170, 245, .34);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(45, 140, 240, .14), transparent 68%);
  will-change: transform, opacity;
  animation: fxBubble var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes fxBubble {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  14%  { opacity: .42; }
  85%  { opacity: .24; }
  100% { transform: translate3d(var(--drift), -132vh, 0) scale(1.1); opacity: 0; }
}

/* Économie de batterie / confort : on coupe tout le fond animé */
@media (prefers-reduced-motion: reduce) {
  .fx { display: none; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { background: transparent; }
.bg-soft {
  background: rgba(255, 255, 255, .025);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bg-navy { background: transparent; }

/* Le hero devient translucide : les bulles traversent aussi le haut de page */
.hero {
  background: radial-gradient(900px 480px at 78% 8%, rgba(45, 140, 240, .18), transparent 62%);
}
.hero--sub { background: radial-gradient(820px 420px at 76% 10%, rgba(45, 140, 240, .16), transparent 62%); }

.site-header { background: rgba(13, 27, 42, .8); }
.cta-band {
  background:
    radial-gradient(700px 380px at 82% 12%, rgba(45, 140, 240, .22), transparent 62%),
    rgba(255, 255, 255, .03);
}
.site-footer {
  background: rgba(255, 255, 255, .03);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* ==========================================================================
   TEXTE
   ========================================================================== */
h1, h2, h3, h4 { color: #fff; }

.lead,
.card p,
.note,
.formule-sub,
.step p,
.contact-card p,
.form-note,
.ba-hint,
.review-top span { color: #8fa5bb; }

.eyebrow { color: var(--blue-light); }
.bg-navy .lead { color: #8fa5bb; }
.bg-navy .ba-hint { color: #8fa5bb !important; }

/* ==========================================================================
   CARTES ET BLOCS — verre translucide
   ========================================================================== */
.card,
.formule,
.review,
.contact-card,
.extras,
.faq-item,
.form-wrap,
.wizard,
.zone-chip,
.rating-score,
.review-cta,
.social {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #c2d2e3;
}

.card:hover,
.formule:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(45, 140, 240, .45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.formule--featured {
  background: rgba(45, 140, 240, .1);
  border-color: rgba(45, 140, 240, .55);
  box-shadow: 0 16px 46px rgba(45, 140, 240, .22);
}

.formule-price,
.price-lines b,
.rating-score b,
.contact-card a,
.review-top b { color: #fff; }
.contact-card a:hover { color: var(--blue-light); }

.price-lines li { border-bottom-color: rgba(255, 255, 255, .1); }
.features li { color: #b0c2d6; }
.features li::before { background-color: rgba(45, 140, 240, .22); }

.card-icon { background: rgba(45, 140, 240, .18); }

.extra {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #c2d2e3;
}

.step-num { box-shadow: 0 6px 22px rgba(45, 140, 240, .45); }

.faq-q { color: #fff; }
.faq-a p { color: #8fa5bb; }

.review p { color: #a4b8cc; }

.zone-chip { color: #c2d2e3; }

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.btn-outline:hover { border-color: var(--blue-light); color: var(--blue-light); }

/* ==========================================================================
   COMPARATEUR AVANT / APRÈS
   ========================================================================== */
.ba-arrow {
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.ba-arrow:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.ba-dot { background: rgba(255, 255, 255, .25); }
.ba-dot.is-active { background: var(--blue-light); }
.ba-caption strong { color: #fff; }
.ba-caption span { color: #8fa5bb; }

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.form-group label { color: #dbe7f3; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #eaf2fa;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6f849b; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  background: rgba(255, 255, 255, .09);
}

/* ==========================================================================
   DEVIS EN 5 ÉTAPES
   ========================================================================== */
.wz-seg { background: rgba(255, 255, 255, .12); }
.wz-title, .wz-q, .wz-sub { color: #fff; }
.wz-step, .wz-hint, .wz-note, .wz-empty { color: #8fa5bb; }

.wz-choice {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.wz-choice:hover { border-color: var(--blue); background: rgba(255, 255, 255, .09); }
.wz-choice.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.wz-opt {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: #dbe7f3;
}
.wz-opt:hover { border-color: var(--blue); background: rgba(255, 255, 255, .08); }
.wz-opt.is-on { background: rgba(45, 140, 240, .16); border-color: var(--blue); }
.wz-box { border-color: rgba(255, 255, 255, .3); }
.wz-opt-price { color: var(--blue-light); }
.wz-opt select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #eaf2fa;
}

/* La liste déroulante est dessinée par le système : sans couleur de fond
   explicite sur les <option>, on obtient du texte clair sur fond blanc. */
.wz-opt select option,
.form-group select option,
.form-group select optgroup {
  background-color: #16273a;
  color: #eaf2fa;
}

.wz-recap { border-top-color: rgba(255, 255, 255, .12); }
.wz-line span { color: #a4b8cc; }
.wz-line b { color: #fff; }
.wz-total {
  background: rgba(45, 140, 240, .14);
  border: 1px solid rgba(45, 140, 240, .3);
}
.wz-total span { color: #fff; }
.wz-total b { color: var(--blue-light); }

/* ==========================================================================
   AFFINAGE — icônes, en-têtes, bandeau de confiance, appel au devis
   ========================================================================== */
.card-icon {
  background: rgba(45, 140, 240, .14);
  border-color: rgba(45, 140, 240, .26);
  color: var(--blue-light);
}

.trust {
  border-top-color: rgba(255, 255, 255, .08);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.trust-item b { color: #fff; }
.trust-item span { color: #8fa5bb; }
.trust-item .ico { color: var(--blue-light); }

.quote-teaser {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.quote-steps li { color: #b0c2d6; }
.quote-steps .n { background: rgba(45, 140, 240, .2); color: var(--blue-light); }
.quote-price { color: #fff; }
.quote-price small { color: #8fa5bb; }
.quote-reassure { color: #8fa5bb; }
.quote-reassure .ico { color: #3fbd7e; }
.quote-call { color: var(--blue-light); }

/* Cartes de formules de l'accueil */
.fcard {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fcard:hover { background: rgba(255, 255, 255, .08); border-color: rgba(45, 140, 240, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.fcard--featured { background: rgba(45, 140, 240, .1); border-color: rgba(45, 140, 240, .55); }
.fcard p { color: #8fa5bb; }
.fcard-price { color: #fff; }
.fcard-price small { color: #8fa5bb; }
.fcard-link { color: var(--blue-light); }

/* Lien « + 14 autres » de la zone */
.zone-chip--more { color: var(--blue-light); border-color: rgba(90, 170, 245, .45); }
.zone-chip--more:hover { background: rgba(45, 140, 240, .16); border-color: var(--blue-light); }

/* Barre de progression des carrousels */
.swipe-bar { background: rgba(255, 255, 255, .12); }
.swipe-bar span { background: var(--blue-light); }

/* Avis clients */
.review blockquote { color: #fff; }
.review figcaption { border-top-color: rgba(255, 255, 255, .1); }
.review figcaption b { color: #fff; }
.review figcaption span { color: #8fa5bb; }
.rating-badge {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: #a4b8cc;
}
.rating-badge b { color: #fff; }
.rating-badge:hover { border-color: var(--blue-light); }

/* Ombres et halos adoucis : moins d'effets, plus de lisibilité */
.card:hover, .formule:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.formule--featured { box-shadow: 0 10px 30px rgba(45, 140, 240, .14); }
.btn-primary { box-shadow: 0 4px 14px rgba(45, 140, 240, .24); }
.step-num { box-shadow: 0 4px 14px rgba(45, 140, 240, .3); }

/* ==========================================================================
   CALCULATEUR DE DÉPLACEMENT
   ========================================================================== */
.addr-list {
  background: var(--navy2);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}
.addr-list li { color: #c2d2e3; }
.addr-list li:hover,
.addr-list li.is-on { background: rgba(45, 140, 240, .18); color: #fff; }
.addr-result { color: #fff; }
.addr-result.is-free { color: #4fd18b; }
.addr-result.is-far { color: #f0a35a; }
.addr-result.is-wait { color: #8fa5bb; }
.calc-depl {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.calc-depl h3 { color: #fff; }
.calc-depl > p { color: #8fa5bb; }
.wz-opt-name small { color: #8fa5bb; }

.wz-count-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.wz-count-btn[data-plus] { background: var(--blue); border-color: var(--blue); }
.wz-count-val { color: #fff; }