@charset "utf-8";
/* ============================================================================
   Lavage Voiture Moto — marque commerciale de 001MARKETING
   Lavage automobile à domicile, Paris et Île-de-France. Prestation réalisée par A2LF SAS.
   Système issu de trois références automobiles premium, ramené à ce que
   supportent des photos prises au téléphone dans des rues et parkings parisiens.

   Trois outils de hiérarchie, et trois seulement : l'échelle typographique,
   le filet 1px, le palier de fond. Aucun rayon, aucune ombre portée
   (sauf la barre d'action mobile, qui doit flotter au-dessus du contenu).
   ========================================================================== */

/* ---------------------------------------------------------------- polices */
@font-face {
  font-family: 'Aboreto';
  src: url('../fonts/aboreto-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Afacad';
  src: url('../fonts/afacad-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- jetons */
:root {
  --ground:     #121110;   /* charbon chaud : le noir pur creuse un trou sous les photos */
  --surface:    #1A1815;
  --elev:       #232019;
  --line:       #33302A;
  --cream:      #F2EDE4;
  --muted:      #A39B8C;
  --gold:       #CFA04E;   /* teinte relevée sur le logo A2LF, H 39° */
  --gold-light: #E4C070;
  --on-gold:    #15110A;
  --alert:      #E4705A;

  --gut: 20px;             /* gouttière latérale */
  --max: 1200px;

  --e: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 1024px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: 'Afacad', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 27px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { body { font-size: 18px; line-height: 30px; } }

img, video { display: block; max-width: 100%; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- titres */
h1, h2, h3 {
  font-family: 'Aboreto', Georgia, serif;
  font-weight: 400; text-transform: uppercase;
  color: var(--cream); margin: 0;
}
h1 { font-size: 34px; line-height: 40px; letter-spacing: .04em; }
h2 { font-size: 28px; line-height: 34px; letter-spacing: .06em; }
h3 { font-size: 22px; line-height: 28px; letter-spacing: .06em; }
@media (min-width: 1024px) {
  h1 { font-size: 58px; line-height: 64px; letter-spacing: .03em; }
  h2 { font-size: 40px; line-height: 48px; }
  h3 { font-size: 24px; line-height: 32px; }
}
p { margin: 0; }

/* Aboreto casse sous 22px : toute la couche fonctionnelle reste en Afacad. */
.sur {
  font-family: 'Afacad', sans-serif; font-weight: 600;
  font-size: 12px; line-height: 16px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
}
@media (min-width: 1024px) { .sur { font-size: 13px; line-height: 18px; letter-spacing: .16em; } }
.chapo { font-size: 19px; line-height: 30px; color: var(--cream); }
@media (min-width: 1024px) { .chapo { font-size: 21px; line-height: 34px; } }
.mut { color: var(--muted); }
.leg { font-size: 13px; line-height: 20px; color: var(--muted); }
@media (min-width: 1024px) { .leg { font-size: 14px; line-height: 22px; } }

/* ---------------------------------------------------------------- trame */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
section { padding: 64px 0; }
@media (min-width: 1024px) { section { padding: 96px 0; } }
.rupture { padding: 96px 0; }
@media (min-width: 1024px) { .rupture { padding: 128px 0; } }
.t-16 { margin-top: 16px; } .t-24 { margin-top: 24px; } .t-32 { margin-top: 32px; }
.t-40 { margin-top: 40px; } .t-48 { margin-top: 48px; } .t-64 { margin-top: 64px; }

/* ------------------------------------------------- la plaque : composant photo unique
   Toute image de la page passe par là. Les trois couches absorbent les écarts
   d'exposition entre des clichés pris à des heures et dans des lieux différents. */
.plate {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface);
  outline: 1px solid var(--line); outline-offset: -1px;
}
.plate > img, .plate > video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88) contrast(1.06) brightness(.97);
}
.plate::after {                       /* virage or, très faible : unifie les dominantes */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--gold); mix-blend-mode: soft-light; opacity: .18; pointer-events: none;
}
.plate--text::before {                /* voile dégradé, seulement là où du texte se pose */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(21,17,10,.88) 0%, rgba(21,17,10,.55) 38%, rgba(21,17,10,.12) 78%);
}
.plate--calme > img { filter: saturate(.7) contrast(1.02) brightness(.72); }

/* La bannière porte quatre blocs de texte empilés : le voile standard s'arrête trop bas et
   le sur-titre finissait sur une carrosserie blanche. On le remonte, pour elle seulement. */
.hero .plate--text::before {
  /* Le bloc de texte monte jusqu'à ~70 % de la hauteur de la bannière : le voile doit tenir
     jusque-là, sinon le sur-titre doré finit sur une carrosserie blanche. */
  background: linear-gradient(0deg,
    rgba(21,17,10,.94) 0%, rgba(21,17,10,.90) 34%, rgba(21,17,10,.80) 56%,
    rgba(21,17,10,.60) 74%, rgba(21,17,10,.28) 92%, rgba(21,17,10,.14) 100%);
}
@media (min-width: 1024px) {
  .hero__txt .wrap > .sur,
  .hero__txt .wrap > h1 { max-width: 720px; }
}

/* En 3:4, le bloc de texte occupe presque toute la hauteur de la bannière : sur mobile le voile
   doit donc couvrir bien plus haut, sinon le sur-titre doré tombe sur une façade en plein soleil. */
@media (max-width: 1023px) {
  .hero .plate--text::before {
    background: linear-gradient(0deg,
      rgba(21,17,10,.95) 0%, rgba(21,17,10,.93) 46%, rgba(21,17,10,.88) 68%,
      rgba(21,17,10,.78) 84%, rgba(21,17,10,.55) 100%);
  }
}

/* diptyque avant / après */
.diptyque__g { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.diptyque__l {
  font-family: 'Afacad', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  padding-top: 10px;
}
.plate__txt { position: relative; z-index: 3; }

/* ---------------------------------------------------------------- bouton */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--gold); color: var(--on-gold);
  font-family: 'Afacad', sans-serif; font-weight: 600;
  font-size: 15px; line-height: 15px; letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 28px; text-decoration: none;
  transition: background .2s var(--e), color .2s var(--e);
}
@media (min-width: 1024px) { .btn { font-size: 16px; line-height: 16px; } }
.btn:hover, .btn:focus-visible { background: var(--gold-light); color: var(--on-gold); }
.btn--vide {
  background: transparent; color: var(--gold);
  outline: 1px solid var(--line); outline-offset: -1px;
}
.btn--vide:hover { background: transparent; color: var(--gold-light); outline-color: var(--gold); }

/* ---------------------------------------------------------------- en-tête */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 17, 16, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
@media (min-width: 1024px) { .hdr__in { height: 76px; } }
.hdr__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.hdr__mark img { width: 30px; height: 30px; outline: 1px solid var(--line); }
.hdr__nom {
  font-family: 'Aboreto', serif; font-size: 13px; letter-spacing: .09em; color: var(--gold);
  text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 640px)  { .hdr__nom { font-size: 16px; } }
@media (min-width: 1024px) { .hdr__nom { font-size: 19px; letter-spacing: .12em; } }
.hdr .btn { padding: 12px 18px; }
@media (max-width: 480px) { .hdr .btn { display: none; } }

.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  background: var(--gold); color: var(--on-gold); padding: 12px 18px;
  clip-path: inset(50%); white-space: nowrap;   /* masqué sans sortir du flux horizontal */
}
.skip:focus { clip-path: none; }

/* ---------------------------------------------------------------- bannière */
.hero { position: relative; }
.hero .plate { width: 100%; aspect-ratio: 3 / 4; min-height: 560px; }
/* width:100% doit précéder : sans elle, min-height pilote la largeur via l'aspect-ratio
   (560 x 3/4 = 420px) et la page déborde de 30px sur un écran de 390px. */
@media (min-width: 1024px) {
  .hero .plate { aspect-ratio: 16 / 9; min-height: 0; height: 76vh; max-height: 760px; }
}
.hero__txt {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding-bottom: 48px;
}
@media (min-width: 1024px) { .hero__txt { padding-bottom: 64px; } }
.hero__txt .wrap > * { max-width: 640px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------------------------------------------------------------- bandeau de faits */
.faits { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faits__g { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
@media (min-width: 1024px) { .faits__g { grid-template-columns: repeat(4, 1fr); } }
.faits__i { background: var(--surface); padding: 20px var(--gut); }
.faits__i dt {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 6px;
}
.faits__i dd { margin: 0; font-size: 16px; line-height: 22px; color: var(--cream); }

/* ---------------------------------------------------------------- grilles */
.duo { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .duo { gap: 48px; grid-template-columns: 5fr 7fr; align-items: start; }
  .duo--inv { grid-template-columns: 7fr 5fr; }
  .duo--egal { grid-template-columns: 1fr 1fr; }
}
.cartes { display: grid; gap: 24px; }
@media (min-width: 768px)  { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cartes--3 { grid-template-columns: repeat(3, 1fr); } }
.carte { background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; padding: 28px 24px; }
.carte__n {
  font-family: 'Aboreto', serif; font-size: 34px; line-height: 34px; color: var(--gold); margin-bottom: 16px;
}
.carte h3 { font-size: 20px; line-height: 26px; font-family: 'Afacad', sans-serif; font-weight: 600; letter-spacing: .02em; text-transform: none; }

/* liste à filets : remplace les puces, qui font « artisan » */
.filets { list-style: none; margin: 0; padding: 0; }
.filets li { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 26px; }
.filets li:first-child { border-top: 1px solid var(--line); }
.filets--n { counter-reset: f; }
.filets--n li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: baseline; }
.filets--n li::before {
  counter-increment: f; content: counter(f, decimal-leading-zero);
  font-family: 'Aboreto', serif; color: var(--gold); font-size: 16px;
}

/* ---------------------------------------------------------------- tarifs */
.tarifs { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grille-prix { display: grid; gap: 1px; background: var(--line); outline: 1px solid var(--line); }
@media (min-width: 768px)  { .grille-prix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille-prix { grid-template-columns: repeat(3, 1fr); } }
.prix { background: var(--surface); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.prix--vedette { background: var(--elev); outline: 1px solid var(--gold); outline-offset: -1px; }
.prix__lab {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.prix--vedette .prix__lab { color: var(--gold); }
.prix__v { font-family: 'Aboreto', serif; font-size: 30px; line-height: 32px; color: var(--gold); }
.prix--vedette .prix__v { font-size: 40px; line-height: 42px; }
@media (min-width: 1024px) {
  .prix__v { font-size: 34px; line-height: 36px; }
  .prix--vedette .prix__v { font-size: 48px; line-height: 50px; }
}
.prix__d { font-size: 16px; line-height: 24px; color: var(--cream); }
.supp { display: grid; gap: 1px; background: var(--line); outline: 1px solid var(--line); }
@media (min-width: 768px) { .supp { grid-template-columns: repeat(3, 1fr); } }
.supp > div { background: var(--surface); padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.supp b { font-family: 'Aboreto', serif; font-weight: 400; color: var(--gold); font-size: 22px; }

/* ---------------------------------------------------------------- étiquettes */
.etiq { display: flex; flex-wrap: wrap; gap: 8px; }
.etiq span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  outline: 1px solid var(--line); outline-offset: -1px; color: var(--cream);
  font-size: 15px; letter-spacing: .04em;
}

/* ---------------------------------------------------------------- avant / après */
.vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.split { display: grid; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1px 1fr; } }
.split__sep { background: var(--line); }
.split > div { padding: 32px 0; }
@media (min-width: 768px) { .split > div:first-child { padding-right: 40px; } .split > div:last-child { padding-left: 40px; } }

/* ---------------------------------------------------------------- questions */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 18px; line-height: 26px; color: var(--cream); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 22px; line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 27px; }

/* ---------------------------------------------------------------- formulaire */
.form-sec { position: relative; }
.form-sec .plate { position: absolute; inset: 0; outline: 0; }
.form-sec .wrap { position: relative; z-index: 3; }
.form-carte { background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; padding: 32px 24px; max-width: 720px; }
@media (min-width: 1024px) { .form-carte { padding: 48px 40px; } }
.champ { display: block; margin-bottom: 20px; }
.champ > span { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  width: 100%; background: var(--ground); color: var(--cream);
  border: 1px solid var(--line); border-radius: 0; padding: 14px 16px;
  font-family: inherit; font-size: 17px; line-height: 24px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--gold); outline: none; }
.champ--2 { display: grid; gap: 20px; }
@media (min-width: 768px) { .champ--2 { grid-template-columns: 1fr 1fr; } }
.case { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-bottom: 16px; font-size: 15px; line-height: 22px; color: var(--muted); }
.case input { width: 22px; height: 22px; accent-color: var(--gold); margin: 1px 0 0; }
.avert { border-left: 2px solid var(--alert); padding: 12px 0 12px 16px; color: var(--cream); font-size: 15px; line-height: 22px; margin-bottom: 20px; }

/* ---------------------------------------------------------------- pied */
.pied { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.pied__g { display: grid; gap: 40px; }
@media (min-width: 1024px) { .pied__g { grid-template-columns: 1fr 1fr; } }
.pied a { color: var(--muted); }
.pied a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- barre mobile */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(18, 17, 16, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);   /* la seule ombre de la page */
}
.barre .btn { display: block; text-align: center; }
@media (min-width: 768px) { .barre { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 84px; } }

/* ---------------------------------------------------------------- apparitions
   L'état initial n'existe QUE si le script s'est chargé : sans JavaScript
   la page est déjà à l'état final, rien n'est masqué. */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.vu { opacity: 1; transform: none; transition: opacity .52s var(--e), transform .52s var(--e); }
.js .rev--img > img { transform: scale(1.04); }
.js .rev--img.vu > img { transform: none; transition: transform .7s var(--e); }
.js .rev.d1.vu { transition-delay: .08s; }
.js .rev.d2.vu { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.vu { opacity: 1; transform: none; transition: none; }
  .js .rev--img > img { transform: none; }
}

/* ---------------------------------------------------------------- bandeau traceurs
   Le pixel Meta est un traceur tiers : l'article 82 de la loi Informatique et
   Libertés impose un consentement préalable. Deux contraintes de forme en
   découlent, et elles dictent ce bloc :

   1. « Accepter » et « Refuser » doivent être de format, de police, de taille
      et de mise en évidence identiques (recommandation CNIL du 17/09/2020).
      Les deux portent donc la même classe .btn, sans variante creuse.
   2. Le bandeau ne doit pas empêcher l'usage du site. Il n'est donc pas modal,
      il ne pose aucun voile, et la page reste défilable derrière lui.

   Sur mobile il se superpose à la barre d'action : tant qu'il est ouvert la
   barre est retirée, sinon deux appels à l'action se chevauchent. */
.traceurs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
}
.traceurs[hidden] { display: none; }
.traceurs__in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) {
  .traceurs__in { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
}
.traceurs__txt p { margin: 0; }
.traceurs__txt p + p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--muted); }
.traceurs__txt a { color: var(--gold); }
/* Une grille à deux colonnes égales, et non un flex : la CNIL demande un format
   et une taille identiques pour « Accepter » et « Refuser ». En flex, le bouton
   au libellé le plus long sortait 14 px plus large, ce qui suffit à constituer
   une mise en évidence différente. */
.traceurs__btn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.traceurs__btn .btn { text-align: center; padding: 16px 22px; }
@media (min-width: 900px) { .traceurs__btn { grid-template-columns: 160px 160px; } }

/* Tant que le choix n'est pas fait, une seule action flotte en bas de l'écran. */
body.traceurs-ouvert .barre { display: none; }

.traceurs__avis {
  position: fixed; left: var(--gut); right: var(--gut); bottom: 16px; z-index: 71;
  margin: 0; padding: 12px 16px;
  background: var(--elev); border: 1px solid var(--line);
  font-size: 15px; line-height: 21px; color: var(--cream);
}
.traceurs__avis[hidden] { display: none; }
@media (min-width: 900px) { .traceurs__avis { left: auto; max-width: 420px; } }

/* ---------------------------------------------------------------- tableau des traceurs
   Un tableau, parce qu'un cookie a quatre attributs et que les aligner en
   colonnes se lit mieux qu'une liste en prose. Il déborde horizontalement sur
   petit écran : le défilement est confiné à son propre conteneur, jamais au
   corps de page. */
.traceurs-liste { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.traceurs-liste caption { text-align: left; margin-bottom: 12px; }
.traceurs-liste th, .traceurs-liste td {
  border-top: 1px solid var(--line);
  padding: 12px 16px 12px 0; text-align: left; vertical-align: top;
  font-size: 15px; line-height: 22px;
}
.traceurs-liste thead th {
  border-top: 0; border-bottom: 1px solid var(--line);
  font-family: 'Afacad', sans-serif; font-weight: 600;
  font-size: 12px; line-height: 16px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 10px;
}
.traceurs-liste td:first-child { white-space: nowrap; }
.traceurs-liste td:last-child { white-space: nowrap; color: var(--muted); }
.traceurs-liste code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px; color: var(--gold);
}
@media (max-width: 639px) { .traceurs-liste td, .traceurs-liste th { padding-right: 20px; } }

/* Ancres : l'en-tête est collante, on décale la cible pour qu'elle ne passe pas dessous. */
#form, #rendez-vous, #tarifs, #traceurs { scroll-margin-top: 84px; }
@media (min-width: 1024px) { #form, #rendez-vous, #tarifs, #traceurs { scroll-margin-top: 96px; } }