/* ==========================================================================
   LES CLEANERS AUTO - feuille de style
   Identite visuelle atelier / signalisation routiere : fond ardoise,
   accent orange securite, typographie condensee pour les titres.
   ========================================================================== */

@font-face { font-display: swap; }

:root {
  /* Palette - « verre nuit » : bleu-nuit profond, accent cyan verre,
     ambre réservé aux seules actions d'urgence. */
  --nuit-950: #060B12;
  --nuit-900: #0A1017;
  --nuit-800: #121C26;
  --nuit-700: #1C2A36;
  --nuit-600: #263745;
  --nuit-500: #3A4E5E;
  --givre-300: #93A7B5;
  --givre-100: #CFDDE6;
  --blanc: #E8F0F5;
  --cyan: #6FD3EE;
  --cyan-vif: #96E2F5;
  --cyan-sombre: #2E9CBD;
  --ambre: #FFB020;
  --ambre-sombre: #C97F0A;
  --vert-ok: #4CD183;

  /* Typo - grotesque large pour les titres (a l'oppose du condense
     precedent), sans neutre tres lisible pour le texte courant, et une
     monospace qui prend en charge tout ce qui est etiquette ou donnee. */
  --f-titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Public Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Layout */
  /* Rayons : aucun angle vif sur le site. Une echelle a trois crans plus
     un rayon pilule pour les boutons. */
  --rayon-sm: 10px;
  --rayon: 16px;
  --rayon-lg: 24px;
  --rayon-pill: 999px;
  --ombre: 0 18px 44px -18px rgba(0, 0, 0, 0.72);
  --lueur: 0 0 0 1px rgba(111, 211, 238, 0.18), 0 0 34px -8px rgba(111, 211, 238, 0.35);
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--nuit-900);
  color: var(--givre-100);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.section-deco { position: relative; overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  color: var(--blanc);
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw + 1rem, 4.1rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.03em;
}
h2 { font-size: clamp(1.7rem, 3.1vw + 1rem, 2.65rem); font-stretch: 112%; letter-spacing: -0.024em; }
h3 { font-size: 1.06rem; font-stretch: 106%; letter-spacing: -0.008em; }
h4 { font-size: 0.95rem; font-stretch: 104%; }

p { margin: 0 0 1em; color: var(--givre-300); }
a { color: var(--cyan-vif); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--cyan-vif);
  font-weight: 500;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  display: block;
  flex: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cyan);
  color: var(--nuit-950);
  padding: 12px 18px;
  z-index: 1000;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Coin coupe (signature graphique : angles techniques type plaque/panneau) */
.coupe {
  clip-path: polygon(
    var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)),
    calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe)
  );
}
.coupe-sm {
  border-radius: var(--rayon);
}

/* Filet de separation : un trait de lumiere qui court d'un bord a l'autre,
   comme un reflet sur une aretes de vitre. Remplace les chevrons de chantier. */
.bande-danger {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(111, 211, 238, 0.05) 12%,
    rgba(111, 211, 238, 0.55) 50%,
    rgba(111, 211, 238, 0.05) 88%,
    transparent 100%
  );
}

/* Fond quadrillage technique, discret */
.fond-grille {
  background-image:
    linear-gradient(rgba(111, 211, 238, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 211, 238, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Boutons ------------------------------------------------------------- */
/* Boutons : anatomie en deux parties. Le libelle occupe la gauche, une
   cellule d'action carree tient la droite, separee par un filet. Au survol
   c'est la cellule qui se remplit et la fleche qui avance : l'affordance est
   portee par la cellule, pas par un simple changement de fond. Angles vifs,
   libelle en monospace : plus rien a voir avec le bouton arrondi precedent. */
.btn {
  --btn-cell: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.74rem;
  line-height: 1;
  padding: 15px 0 15px 24px;
  padding-right: calc(var(--btn-cell) + 26px);
  border: 1px solid;
  border-radius: var(--rayon-pill);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* La cellule d'action est une pastille ronde posee dans la pilule : on garde
   l'anatomie en deux temps, sans le moindre angle. */
.btn::after {
  content: "→";
  position: absolute;
  right: 7px;
  top: 50%;
  width: var(--btn-cell);
  height: var(--btn-cell);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transform: translateY(-50%);
  transition: background 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.btn:hover::after { transform: translateY(-50%) translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--nuit-950);
}
.btn-primary::after { background: rgba(6, 11, 18, 0.14); }
.btn-primary:hover { background: var(--cyan-vif); border-color: var(--cyan-vif); }
.btn-primary:hover::after { background: rgba(6, 11, 18, 0.26); }

.btn-secondary {
  background: transparent;
  border-color: var(--nuit-500);
  color: var(--blanc);
}
.btn-secondary::after { background: rgba(255, 255, 255, 0.03); }
.btn-secondary:hover { border-color: var(--cyan); color: var(--cyan-vif); }
.btn-secondary:hover::after { background: rgba(111, 211, 238, 0.14); }

.btn-urgence {
  background: transparent;
  border-color: var(--ambre);
  color: var(--ambre);
}
.btn-urgence::after { content: "☎"; background: rgba(255, 176, 32, 0.12); }
.btn-urgence:hover { background: var(--ambre); color: var(--nuit-950); }
.btn-urgence:hover::after { background: rgba(6, 11, 18, 0.18); transform: translateY(-50%) scale(1.06); }

.btn-bloc { width: 100%; justify-content: flex-start; }
.btn:active { transform: translateY(1px); }

/* En-tete --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(10, 16, 23, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(111, 211, 238, 0.14);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* Le logo remplace l'ancienne pastille « 31 » et le nom compose en CSS.
   Hauteur fixe, largeur automatique : le lockup garde ses proportions. */
.brand-logo {
  height: 54px;
  width: auto;
  display: block;
}
@media (max-width: 560px) { .brand-logo { height: 42px; } }

.footer-logo {
  height: 72px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--nuit-600);
  padding: 9px 11px;
  cursor: pointer;
  border-radius: var(--rayon-sm);
}
.burger, .burger::before, .burger::after {
  border-radius: 2px;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--blanc);
  position: relative;
}
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }

/* Navigation : libelles en monospace, et un curseur de position qui glisse
   d'un lien a l'autre au fil du scroll. On sait en permanence ou l'on est
   dans la page, ce que la barre precedente ne disait pas. */
.site-nav { display: flex; align-items: center; gap: 22px; position: relative; }
.site-nav a {
  position: relative;
  color: var(--givre-300);
  text-decoration: none;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  font-weight: 400;
  padding: 6px 0;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--blanc); }
.site-nav a.actif { color: var(--cyan-vif); }
.site-nav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* Le curseur est un element unique deplace en JS, pas une bordure par lien :
   la transition est donc continue d'un onglet a l'autre. */
.nav-curseur {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--cyan);
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.15, 1), width 0.32s cubic-bezier(0.4, 0, 0.15, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .nav-curseur { transition: none; } }
@media (max-width: 860px) { .nav-curseur { display: none; } }
/* Selecteur volontairement plus specifique que `.site-nav a`, sinon le
   padding de ce dernier l'emporte et le numero touche la bordure.
   `flex: none` empeche la pilule d'etre comprimee sous la largeur du
   numero quand la barre manque de place. */
.site-nav a.nav-tel {
  color: var(--ambre) !important;
  border: 1px solid rgba(255, 176, 32, 0.55);
  padding: 9px 18px;
  border-radius: var(--rayon-pill);
  flex: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nuit-900);
    border-bottom: 1px solid var(--nuit-700);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 16px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--nuit-800); }
  .site-nav a.nav-tel { text-align: center; margin-top: 10px; align-self: stretch; }
}

/* Barre urgence fixe ------------------------------------------------------ */
.urgence-barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  background: var(--ambre);
  color: var(--nuit-950);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-top: 3px solid var(--nuit-950);
}
.urgence-barre:hover { background: #FFC04D; }
.urgence-barre .pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nuit-950);
  animation: clignote 1.4s infinite;
}
@keyframes clignote { 50% { opacity: 0.25; } }

@media (min-width: 720px) {
  .urgence-barre {
    left: auto;
    right: 24px;
    bottom: 24px;
    border-top: none;
    border: 2px solid var(--nuit-950);
    border-radius: var(--rayon-pill);
    box-shadow: var(--ombre);
  }
}

body { padding-bottom: 62px; }
@media (min-width: 720px) { body { padding-bottom: 0; } }

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 64px 0 56px;
  background: var(--nuit-950);
  overflow: hidden;
  border-bottom: 1px solid var(--nuit-700);
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; }
.hero .lead { font-size: 1.1rem; color: var(--givre-100); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 34px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 640px;
}
.stat {
  border: 1px solid var(--nuit-700);
  background: var(--nuit-900);
  padding: 14px 16px;
  border-radius: var(--rayon);
}
.stat strong {
  display: block;
  font-family: var(--f-titre);
  color: var(--cyan-vif);
  font-size: 1.5rem;
}
.stat span { font-size: 0.8rem; color: var(--givre-300); }

.hero-corner {
  position: absolute;
  top: -140px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(111, 211, 238, 0.16) 0%,
    rgba(111, 211, 238, 0.06) 38%,
    transparent 68%
  );
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 720px) { .hero-corner { opacity: 0.55; width: 380px; height: 380px; } }

/* Sections generiques ------------------------------------------------------ */
/* La page n'est plus centree : au-dela de 1080 px, tout le contenu se decale
   vers la droite et laisse une gouttiere qui porte la numerotation des
   sections et un filet vertical continu. C'est ce decalage qui donne le
   rythme, a la place de l'empilement centre precedent. */
section { padding: 76px 0; position: relative; }
.section-alt { background: var(--nuit-800); border-top: 1px solid var(--nuit-700); border-bottom: 1px solid var(--nuit-700); }

.section-head { margin-bottom: 44px; position: relative; }
.section-head p { font-size: 1.04rem; color: var(--givre-300); }

@media (min-width: 1080px) {
  /* La gouttiere : un filet vertical continu qui court sur toute la page,
     et dans lequel chaque section inscrit son numero et son nom a la
     verticale. C'est le repere de lecture qui remplace l'empilement centre. */
  section > .wrap {
    position: relative;
    padding-left: 112px;
    border-left: 1px solid var(--nuit-700);
  }
  section > .wrap[data-num]::before {
    content: attr(data-num);
    position: absolute;
    left: 22px;
    top: 4px;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--cyan);
  }
  section > .wrap[data-num]::after {
    content: attr(data-label);
    position: absolute;
    left: 24px;
    top: 34px;
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nuit-500);
    writing-mode: vertical-rl;
    white-space: nowrap;
  }

  /* Tete de section en deux colonnes : le titre a gauche tient toute la
     hauteur, l'etiquette et le chapo s'alignent a droite sous un filet. */
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: 56px;
    align-items: start;
  }
  .section-head .eyebrow { grid-column: 2; grid-row: 1; margin: 4px 0 0; }
  .section-head h2 { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; }
  .section-head p {
    grid-column: 2;
    grid-row: 2;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--nuit-700);
  }
}

/* Services ------------------------------------------------------------- */
/* Services : des rangs separes par des filets, plus des boites posees sur
   une grille. L'icone passe en colonne fixe a gauche, le texte s'aligne
   dessus, et la bordure superieure fait office de reglure continue. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  border-top: 1px solid var(--nuit-700);
}
.service-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nuit-700);
  padding: 26px 26px 28px 0;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  align-content: start;
  transition: background 0.18s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  left: -20px; right: 0; top: 0; bottom: -1px;
  background: linear-gradient(90deg, rgba(111, 211, 238, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card > * { grid-column: 2; }
.service-icon {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 30px;
  height: 30px;
  color: var(--cyan-vif);
  margin: 3px 0 0;
}
.service-card h3 { margin-bottom: 6px; }
.service-card h3 { margin-bottom: 8px; }
.service-card p { font-size: 0.92rem; margin-bottom: 0; }
.service-card.mise-avant { border-color: var(--cyan); }
/* Etiquette informative : un chip en contour, jamais un aplat - l'aplat
   plein est reserve aux actions, sinon l'oeil ne distingue plus les deux. */
.tag-adas {
  display: inline-block;
  justify-self: start;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-vif);
  background: rgba(111, 211, 238, 0.08);
  border: 1px solid rgba(111, 211, 238, 0.32);
  padding: 5px 12px;
  border-radius: var(--rayon-pill);
}

/* Action secondaire dans une carte : un lien flechee, pas un pave. La fleche
   avance au survol et le filet se dessine sous le libelle. */
.lien-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: 14px;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan-vif);
  position: relative;
}
.lien-action::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.15, 1);
}
.lien-action:hover::before, .lien-action:focus-visible::before { transform: scaleX(1); }
.lien-action:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Devis rapide ----------------------------------------------------------- */
.devis-panel {
  background: var(--nuit-900);
  border: 1px solid var(--nuit-700);
  box-shadow: var(--ombre);
  padding: 34px;
  border-radius: var(--rayon-lg);
}
.devis-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 860px) { .devis-grid { grid-template-columns: 1fr; gap: 30px; } }

.devis-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.devis-liste li { display: flex; gap: 10px; align-items: flex-start; color: var(--givre-100); font-size: 0.95rem; }
.devis-liste svg { flex: none; width: 20px; height: 20px; color: var(--cyan-vif); margin-top: 2px; }

/* Formulaires -------------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label {
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
  color: var(--givre-300);
}
.champ input,
.champ select,
.champ textarea {
  background: var(--nuit-950);
  border: 1px solid var(--nuit-600);
  color: var(--blanc);
  padding: 13px 16px;
  font-family: var(--f-texte);
  font-size: 0.96rem;
  border-radius: var(--rayon-sm);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(111, 211, 238, 0.22);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ-piege { position: absolute; left: -9999px; top: -9999px; }

.form-note { font-size: 0.8rem; color: var(--givre-300); margin-top: 4px; }

.error-box, .confirm-box {
  border: 1px solid var(--cyan);
  background: var(--nuit-800);
  padding: 24px;
  margin-bottom: 8px;
  border-radius: var(--rayon-sm);
}
.confirm-box { border-color: var(--vert-ok); }
.confirm-box h2 { color: var(--vert-ok); }

/* Galerie avant / apres ------------------------------------------------- */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.galerie-paire {
  border: 1px solid var(--nuit-700);
  background: var(--nuit-900);
  border-radius: var(--rayon);
}
.galerie-images { display: grid; grid-template-columns: 1fr 1fr; }
.galerie-vignette {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.galerie-vignette span {
  position: relative;
  z-index: 2;
  font-family: var(--f-titre);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--blanc);
  background: rgba(14, 17, 20, 0.72);
  padding: 5px 10px;
  margin: 10px;
}
.avant {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(35deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 20px),
    linear-gradient(160deg, #2a2f36, #14171b);
}
.avant span { background: rgba(255, 176, 32, 0.88); }
.apres {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #3a4956, #1a2126);
}
.apres span { background: rgba(76, 175, 109, 0.85); }
.galerie-legende { padding: 14px 16px; }
.galerie-legende p { margin: 0; font-size: 0.88rem; }

/* Zone d'intervention ----------------------------------------------------- */
.zone-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .zone-layout { grid-template-columns: 1fr; } }

.zone-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.zone-liste li {
  font-family: var(--f-titre);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--givre-100);
  border: 1px solid var(--nuit-600);
  padding: 8px 14px;
  border-radius: var(--rayon-pill);
}
.zone-liste li.centre { border-color: var(--cyan); color: var(--cyan-vif); }

.carte-zone {
  height: 420px;
  border: 1px solid var(--nuit-700);
  background: var(--nuit-950);
  position: relative;
  z-index: 1;
  border-radius: var(--rayon);
}
.carte-legende {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.carte-legende li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--givre-100);
  border: 1px solid var(--nuit-700);
  background: var(--nuit-900);
  padding: 9px 12px;
  border-radius: var(--rayon-sm);
}
.carte-legende .puce {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
}
.carte-legende strong { color: var(--blanc); font-family: var(--f-titre); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; margin-right: 4px; }

/* Marqueur personnalise sur la carte Leaflet */
.marker-garage {
  width: 34px;
  height: 34px;
  background: var(--cyan);
  border: 3px solid var(--nuit-950);
  color: var(--nuit-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 0.7rem;
  border-radius: var(--rayon);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Restylage sobre des controles Leaflet pour coller au theme sombre */
.leaflet-control-zoom a {
  background: var(--nuit-900) !important;
  color: var(--blanc) !important;
  border-color: var(--nuit-700) !important;
  border-radius: var(--rayon-sm);
}
.leaflet-control-zoom a:hover { background: var(--nuit-800) !important; color: var(--cyan-vif) !important; }
.leaflet-control-attribution {
  background: rgba(14, 17, 20, 0.75) !important;
  color: var(--givre-300) !important;
}
.leaflet-control-attribution a { color: var(--givre-100) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--nuit-900) !important;
  color: var(--givre-100) !important;
  border-radius: var(--rayon-sm);
}
.leaflet-popup-content { font-family: var(--f-texte); font-size: 0.86rem; margin: 12px 14px; }
.leaflet-popup-content strong { color: var(--blanc); font-family: var(--f-titre); }

/* FAQ (details/summary natif) --------------------------------------------- */
.faq { max-width: 780px; display: grid; gap: 10px; }
.faq details {
  background: var(--nuit-900);
  border: 1px solid var(--nuit-700);
  border-radius: var(--rayon);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--f-texte);
  font-size: 1.4rem;
  color: var(--cyan-vif);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--nuit-700); }
.faq-corps { padding: 4px 20px 20px; }
.faq-corps p { margin: 0; font-size: 0.94rem; }

/* Footer -------------------------------------------------------------------- */
.site-footer { background: var(--nuit-950); border-top: 1px solid var(--nuit-700); padding: 50px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 34px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--givre-100); font-size: 0.85rem; margin-bottom: 14px; }
.footer-grid p, .footer-grid a { color: var(--givre-300); font-size: 0.9rem; text-decoration: none; }
.footer-grid a:hover { color: var(--cyan-vif); }
.footer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bottom {
  border-top: 1px solid var(--nuit-800);
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--acier-500, var(--givre-300));
}
.footer-bottom a { color: inherit; }

/* Reveal on scroll -----------------------------------------------------------
   Le contenu est visible par defaut (aucune dependance au JS pour etre lu).
   Le JS ajoute .reveal-arme *avant* d'observer l'element : seul cet etat est
   masque, et il est systematiquement leve au scroll. Si le JS ne s'execute
   pas, .reveal-arme n'est jamais pose et le contenu reste simplement visible. */
.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.reveal-arme { opacity: 0; transform: translateY(16px); }
.reveal.reveal-arme.is-visible { opacity: 1; transform: none; }

/* Jauge de progression de lecture ------------------------------------------ */
.jauge-scroll {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--cyan);
  z-index: 700;
  transition: width 0.1s linear;
}

/* Avis clients ---------------------------------------------------------------- */
.avis-carte {
  background: var(--nuit-900);
  border: 1px solid var(--nuit-700);
  padding: 26px 24px;
  position: relative;
  border-radius: var(--rayon);
}
.avis-etoiles { display: flex; gap: 3px; margin-bottom: 14px; }
.avis-etoiles svg { width: 16px; height: 16px; color: var(--cyan-vif); fill: var(--cyan-vif); }
.avis-carte p.avis-texte {
  color: var(--givre-100);
  font-size: 0.96rem;
  margin-bottom: 18px;
}
.avis-auteur { display: flex; align-items: center; gap: 12px; }
.avis-avatar {
  width: 38px; height: 38px;
  flex: none;
  background: var(--nuit-700);
  color: var(--cyan-vif);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--rayon);
}
.avis-nom { font-size: 0.88rem; color: var(--blanc); font-weight: 600; }
.avis-meta { font-size: 0.78rem; color: var(--givre-300); }

/* Compteurs animes ------------------------------------------------------------ */
.stat strong { font-variant-numeric: tabular-nums; }

/* Slider avant / apres --------------------------------------------------------- */
.comparateur {
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--nuit-700);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
  border-radius: var(--rayon);
}
.comparateur-apres,
.comparateur-avant {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.comparateur { --pos: 50%; }
.comparateur-avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparateur-apres span,
.comparateur-avant span {
  font-family: var(--f-titre);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--blanc);
  padding: 5px 12px;
  margin: 12px;
  border-radius: var(--rayon-pill);
}
.comparateur-avant span { background: rgba(201, 79, 10, 0.9); }
.comparateur-apres span { background: rgba(76, 175, 109, 0.9); }
.comparateur-poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--cyan);
  transform: translateX(-50%);
  pointer-events: none;
}
.comparateur-poignee::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  background: var(--cyan);
  border: 3px solid var(--nuit-950);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.comparateur-poignee::after {
  content: "\2194";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  color: var(--nuit-950);
  font-size: 1.1rem;
  font-weight: 700;
  z-index: 2;
}
.comparateur-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.galerie-legende-slider { padding: 14px 16px 4px; }
.galerie-legende-slider p { margin: 0; font-size: 0.88rem; }

/* Simulateur d'impact ---------------------------------------------------------- */
.simulateur {
  background: var(--nuit-900);
  border: 1px solid var(--nuit-700);
  padding: 30px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
  border-radius: var(--rayon-lg);
}
@media (max-width: 900px) { .simulateur { grid-template-columns: 1fr; } }

.simulateur-vitre {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #1d2933, #0d141b);
  border: 2px solid var(--nuit-600);
  cursor: crosshair;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: var(--rayon);
}
.simulateur-vitre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.simulateur-vitre .indice {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: 0.76rem;
  color: var(--givre-300);
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.simulateur-vitre.simulateur-alerte { border-color: var(--ambre); box-shadow: inset 0 0 46px rgba(255, 176, 32, 0.12); }
.simulateur-vitre.simulateur-brise {
  border-color: #e2686a;
  box-shadow: inset 0 0 70px rgba(226, 104, 106, 0.2);
  cursor: not-allowed;
}

/* Choix du calibre de l'impact */
.sim-tailles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.sim-taille {
  flex: 1 1 auto;
  background: var(--nuit-800);
  border: 1px solid var(--nuit-600);
  border-radius: var(--rayon-sm);
  color: var(--givre-100);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sim-taille b {
  display: block;
  font-family: var(--f-titre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.84rem;
  color: var(--blanc);
}
.sim-taille i { font-style: normal; font-size: 0.72rem; color: var(--givre-300); }
.sim-taille:hover { border-color: var(--nuit-500); }
.sim-taille[aria-pressed="true"] { border-color: var(--cyan); background: rgba(111, 211, 238, 0.09); }
.sim-taille[aria-pressed="true"] b { color: var(--cyan-vif); }
.sim-taille:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Jauge d'integrite structurelle */
.sim-jauge-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--givre-300);
  margin-bottom: 6px;
}
.sim-jauge-tete b { font-size: 1.05rem; color: var(--blanc); font-variant-numeric: tabular-nums; }
.sim-jauge { height: 7px; background: var(--nuit-700); border-radius: 5px; overflow: hidden; }
.sim-jauge-fill {
  height: 100%; width: 100%;
  background: var(--vert-ok);
  border-radius: 5px;
  transition: width 0.45s cubic-bezier(0.3, 0, 0.2, 1), background 0.45s ease;
}
.sim-jauge-fill.moyen { background: var(--ambre); }
.sim-jauge-fill.critique { background: #e2686a; }

/* Verdict */
.sim-verdict {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.05em;
  border: 1px solid;
  border-radius: 999px;
  padding: 6px 14px;
  margin: 16px 0 10px;
}
.sim-verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sim-verdict.ok        { color: var(--vert-ok); border-color: rgba(76, 209, 131, 0.45); background: rgba(76, 209, 131, 0.08); }
.sim-verdict.attention { color: var(--ambre);   border-color: rgba(255, 176, 32, 0.45); background: rgba(255, 176, 32, 0.08); }
.sim-verdict.grave     { color: #e2686a;        border-color: rgba(226, 104, 106, 0.5);  background: rgba(226, 104, 106, 0.1); }

.sim-raisons { list-style: none; margin: 0 0 6px; padding: 0; }
.sim-raisons li {
  position: relative;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--givre-100);
  margin-bottom: 5px;
}
.sim-raisons li::before {
  content: "";
  position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
}
.sim-raisons li.rouge::before { background: #e2686a; }
.sim-raisons li.ambre::before { background: var(--ambre); }

.sim-compteurs {
  display: flex; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--nuit-700);
  margin-top: 14px; padding-top: 12px;
}
.sim-compteurs div { font-size: 0.74rem; color: var(--givre-300); font-family: var(--f-titre); text-transform: uppercase; letter-spacing: 0.05em; }
.sim-compteurs b { display: block; font-size: 1.3rem; color: var(--blanc); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.simulateur-note { font-size: 0.84rem; color: var(--givre-300); margin-top: 12px; min-height: 38px; }
.sim-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.simulateur-reset {
  background: none;
  border: 1px solid var(--nuit-600);
  color: var(--givre-100);
  font-family: var(--f-titre);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  cursor: pointer;
  border-radius: var(--rayon-pill);
}
.simulateur-reset:hover { border-color: var(--cyan); color: var(--cyan-vif); }
.simulateur-reset:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sim-jauge-fill { transition: none; }
}

/* Photos reelles dans le comparateur (upgrade progressif) ---------------------
   Les blocs .avant/.apres gardent leur motif CSS comme fond de secours ; si
   la photo correspondante existe dans assets/img/, elle vient simplement se
   poser par-dessus. Rien a changer si les images ne sont pas encore fournies. */
.comparateur-avant img,
.comparateur-apres img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avis clients - carrousel horizontal ------------------------------------------ */
.avis-carousel { position: relative; }
.avis-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  scrollbar-width: none;
}
.avis-track::-webkit-scrollbar { display: none; }
.avis-track .avis-carte {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
@media (max-width: 560px) { .avis-track .avis-carte { flex-basis: 84%; } }

.avis-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.avis-nav button {
  width: 40px;
  height: 40px;
  background: var(--nuit-900);
  border: 1px solid var(--nuit-600);
  color: var(--blanc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon);
}
.avis-nav button:hover { border-color: var(--cyan); color: var(--cyan-vif); }
.avis-nav button svg { width: 18px; height: 18px; }

/* Popup "site de demonstration" ------------------------------------------------- */
.modale-demo {
  border: 1px solid var(--cyan);
  background: var(--nuit-900);
  color: var(--givre-100);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 40px);
  border-radius: var(--rayon-lg);
}
.modale-demo::backdrop { background: rgba(6, 8, 10, 0.72); backdrop-filter: blur(2px); }
.modale-demo-corps { padding: 30px 28px 28px; }
.modale-demo-icone {
  width: 46px; height: 46px;
  background: var(--cyan);
  color: var(--nuit-950);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: var(--rayon);
}
.modale-demo-icone svg { width: 24px; height: 24px; }
.modale-demo h3 { margin-bottom: 10px; }
.modale-demo p { color: var(--givre-100); margin-bottom: 0; }
.modale-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.modale-demo-actions .btn { flex: 1 1 auto; }

/* Halos de lumiere a effet parallaxe -------------------------------------
   Trois taches de lumiere froide, tres diffuses, qui derivent lentement au
   scroll (voir JS). Remplacent les carres de bandes de chantier. */
.deco-halo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  background: radial-gradient(circle at 50% 50%,
    rgba(111, 211, 238, 0.18) 0%, rgba(111, 211, 238, 0.05) 45%, transparent 70%);
}
.deco-halo.petit { width: 260px; height: 260px; }
.deco-halo.moyen { width: 420px; height: 420px; }
.deco-halo.haut-droite { top: -80px; right: -120px; }
.deco-halo.bas-gauche { bottom: -100px; left: -130px; }
.deco-halo.haut-gauche { top: -60px; left: -110px; }
.deco-halo.milieu-droite { top: 34%; right: -150px; opacity: 0.75; }
@media (max-width: 720px) { .deco-halo { opacity: 0.55; } }

[data-parallax] { will-change: transform; }


/* =======================================================================
   EFFETS DE VERRE
   Trois effets, tous pilotes par des variables CSS mises a jour en JS.
   Chacun se degrade proprement : sans JS, --mx/--my gardent leur valeur
   par defaut et le reflet reste simplement immobile.
   ======================================================================= */

/* Reflet speculaire du hero : une tache de lumiere froide qui suit le
   curseur, comme le reflet du ciel qui glisse sur un pare-brise. */
.hero {
  --mx: 72%;
  --my: 28%;
}
.hero-reflet {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 26rem at var(--mx) var(--my),
      rgba(111, 211, 238, 0.13) 0%,
      rgba(111, 211, 238, 0.05) 34%,
      transparent 62%
    ),
    radial-gradient(
      18rem 12rem at calc(var(--mx) + 6%) calc(var(--my) + 10%),
      rgba(255, 255, 255, 0.06) 0%,
      transparent 60%
    );
  transition: background-position 0.2s linear;
}
/* Fine arete de lumiere en bas du hero, comme le bord d'une vitre. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg,
    transparent, rgba(111, 211, 238, 0.5) 50%, transparent);
}

/* Brillance de survol sur les cartes : un trait de lumiere balaie la
   surface, comme un chiffon qui passe sur du verre. */
.brillance { position: relative; overflow: hidden; }
.brillance::before {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(111, 211, 238, 0.10) 42%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(111, 211, 238, 0.10) 58%,
    transparent 100%
  );
  transition: left 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brillance:hover::before,
.brillance:focus-within::before { left: 140%; }

@media (prefers-reduced-motion: reduce) {
  .brillance::before { display: none; }
  .hero-reflet { transition: none; }
}