/* 777 Cars — feuille commune aux pages Location, Vente et back-office.
   Reprend les tokens et les composants de la page d'accueil, qui reste
   autonome avec son CSS inline. Servie avec un cache d'un jour par Caddy :
   après modification, suffixer les liens d'un ?v= pour forcer le rechargement. */

:root{
  /* Sans ca, Chrome dessine les select, le calendrier natif des champs date et
     la barre de defilement au theme clair : du gris souris au milieu du noir. */
  color-scheme:dark;
  --noir:#0A0A0B;
  --carbone:#141416;
  --carbone-2:#1D1D20;
  --jaune:#FFD400;
  --jaune-clair:#FFE454;
  --jaune-sombre:#8A7400;
  --creme:#F5F3EE;
  --gris:#9A9AA2;
  --gris-faible:#7C7C85;
  --bordure:#26262a;
  --bordure-2:#33333a;
  --vert:#3ECF8E;
  --rouge:#FF5C5C;
  --r-tap:44px;
  --z-nav:60;
  --z-drawer:90;
  --z-modale:100;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  background:var(--noir);color:var(--creme);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip et non hidden : hidden fait du body un conteneur de défilement sur
     certains Safari, et les barres collantes (nav, filtres de la vente)
     cessent alors de suivre la page. hidden reste en repli. (24/09) */
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3,.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.94;letter-spacing:.01em;text-wrap:balance}
.mono{font-family:'Space Mono',monospace}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}

.wrap{width:min(1180px,92vw);margin-inline:auto}
section{padding:84px 0;position:relative}
@media(max-width:640px){section{padding:56px 0}}
.sep{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--bordure) 18%,var(--bordure) 82%,transparent)}
/* Ces pages se deroulent sur un seul et meme noir du hero au pied : rien ne les
   decoupe. Une section sur deux passe en carbone, avec un trait pour que la
   bascule se lise — les deux teintes ne different que de 10 points. */
.sect-carbone{
  background:var(--carbone);
  border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);
}
.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}

.eyebrow{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--jaune);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--jaune);flex:none}
.h-section{font-size:clamp(1.9rem,4.6vw,3rem)}
.chapo{color:var(--gris);max-width:62ch;margin-top:16px}
/* Les anciennes accroches des H1 (« Une citadine propre, tout de suite. »,
   « Des occasions qu'on assume. ») ont été déplacées en tête de chapô quand les
   titres sont passés sur la requête + la ville. Elles restent plus claires que
   le reste du paragraphe pour garder leur rôle d'accroche. */
.chapo strong{color:var(--creme);font-weight:600}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--jaune);color:#000;text-decoration:none;
  font-weight:700;font-size:.9rem;padding:15px 28px;border:none;cursor:pointer;
  min-height:var(--r-tap);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  touch-action:manipulation;
}@media(hover:hover){.btn:hover:not(:disabled){transform:translate(-2px,-2px);background:var(--jaune-clair);box-shadow:4px 4px 0 rgba(255,212,0,.25)}}
.btn:active:not(:disabled){transform:translate(0,0);box-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn .icon{width:18px;height:18px;flex:none}
.btn-ghost{background:transparent;color:var(--creme);border:1px solid var(--bordure-2)}@media(hover:hover){.btn-ghost:hover:not(:disabled){background:var(--carbone-2);color:var(--jaune);box-shadow:none;border-color:var(--jaune-sombre)}}
.btn-petit{padding:10px 18px;font-size:.82rem;min-height:38px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn-danger{background:transparent;border:1px solid #5a2b2b;color:#ff9d9d}@media(hover:hover){.btn-danger:hover:not(:disabled){background:#2a1414;color:#ffbdbd;box-shadow:none}}

.icon{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordure);
}
.nav .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{font-family:'Anton',Impact,sans-serif;font-size:1.15rem;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.logo b{color:var(--jaune);font-weight:400}
.logo span{color:var(--gris-faible);font-size:.72em}
/* Le logo dessine de la marque (fourni par Alex le 03/09) remplace le lockup
   typographique « 777 CARS ». Le nom reste porte par l'attribut alt, le title
   de la page et le JSON-LD ; le suffixe de page (LOCATION, VENTE, PRO) garde
   sa place a cote. .logo est en flex ici, sinon l'image et le suffixe ne
   s'alignent pas sur la meme ligne de base. */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{height:42px;width:auto;display:block}
.logo-pied img{height:64px}
@media(max-width:700px){.logo img{height:32px}}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.88rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--gris);transition:color .15s ease;position:relative;padding:6px 0}.nav-links a[aria-current="page"]{color:var(--creme)}@media(hover:hover){.nav-links a:hover{color:var(--creme)}}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--jaune)}
/* Les trois metiers cohabitent dans la nav avec les ancres internes de la page.
   Sans marqueur, rien ne distingue « descendre dans la page » de « changer de
   metier ». Le carre jaune existait deja sur la page nettoyage : il devient le
   vocabulaire commun des trois pages. La page courante n'en porte pas, elle est
   deja signalee par son souligne. */
.nav-links a.lien-metier{display:inline-flex;align-items:center;gap:7px}
/* Dans le tiroir, les liens occupent toute la largeur : flex et non inline-flex,
   sinon la bordure basse se retracte a la largeur du texte. */
.drawer nav a.lien-metier{display:flex;align-items:center;gap:11px}
.nav-links a.lien-metier::before,.drawer nav a.lien-metier::before{content:"";width:5px;height:5px;background:var(--jaune);flex:none}
.nav-links a.lien-metier[aria-current="page"]::before{display:none}
/* Location et vente fermées (10/09) : même traitement que les portes de
   l'accueil. Un span et non un lien, texte éteint, carré gris, « à venir » en
   petites capitales — aucun survol, rien qui se lise cliquable. */
.lien-avenir{display:inline-flex;align-items:center;gap:7px;color:var(--gris-faible);cursor:default}
.nav-links .lien-avenir{padding:6px 0}
.nav-links .lien-avenir::before,.drawer nav .lien-avenir::before{content:"";width:5px;height:5px;background:var(--gris-faible);flex:none}
.lien-avenir small{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.drawer nav .lien-avenir{
  display:flex;gap:11px;padding:16px 4px;border-bottom:1px solid var(--bordure);
  font-family:'Anton',Impact,sans-serif;font-size:1.5rem;text-transform:uppercase;
}
.drawer nav .lien-avenir small{margin-left:auto;font-size:.7rem}
.pied .bas-avenir{color:var(--gris-faible)}
.nav .btn{padding:11px 20px;font-size:.82rem}
.burger{display:none;background:none;border:1px solid var(--bordure-2);color:var(--creme);width:var(--r-tap);height:var(--r-tap);cursor:pointer;margin-left:auto;align-items:center;justify-content:center}
.burger .icon{width:20px;height:20px}
/* Acces a l'espace client (03/09) : meme carre que le burger, au meme endroit
   sur toutes les pages, pour qu'on le retrouve sans le chercher. */
/* Le numero de telephone est un carre-icone jumeau, pose a gauche du compte
   (demande d'Alex, 03/09) : appeler et retrouver ses rendez-vous sont les deux
   memes gestes, ils se tiennent cote a cote au meme endroit sur chaque page. */
/* La paire est un seul item de la barre : sur la page nettoyage la barre est en
   space-between, qui ecartait les deux carres de 58 px — ils ne se lisaient plus
   comme une paire. Le conteneur porte l'ecart, les carres n'ont plus de marge. */
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
/* Réseaux sociaux (25/09) : mêmes carrés que le téléphone, logo en crème. */
.btn-reseau{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--r-tap);height:var(--r-tap);color:var(--creme);
  border:1px solid var(--bordure-2);background:transparent;text-decoration:none;
  transition:border-color .2s,background .2s,color .2s;
}
.btn-reseau svg{width:19px;height:19px;display:block}
@media(hover:hover){.btn-reseau:hover{border-color:var(--jaune);background:rgba(255,212,0,.08);color:var(--jaune)}}
.btn-reseau:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.btn-compte,.btn-tel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--r-tap);height:var(--r-tap);
  border:1px solid var(--bordure-2);background:transparent;text-decoration:none;
  transition:border-color .2s,background .2s;
}
.btn-compte .icon,.btn-tel .icon{width:20px;height:20px}
@media(hover:hover){
  .btn-compte:hover,.btn-tel:hover{border-color:var(--jaune);background:rgba(255,212,0,.08)}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav .btn{display:none}
  .burger{display:inline-flex}
  /* Le bouton principal s'efface ici, pas celui du compte ni le telephone :
     c'est sur telephone qu'on veut appeler et retrouver ses rendez-vous en
     deux touches.
     ⚠️ Une seule marge auto, portee par le premier des deux carres : deux
     marges auto se partagent l'espace libre a egalite et separeraient la
     paire au milieu de la barre. */
  .nav-actions{margin-left:auto;margin-right:8px}
  .burger{margin-left:0}
}
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);background:var(--noir);
  display:flex;flex-direction:column;padding:24px;gap:6px;
  transform:translateX(100%);transition:transform .28s ease;visibility:hidden;
}
.drawer[data-ouvert="true"]{transform:translateX(0);visibility:visible}
.drawer nav{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.drawer nav a{
  text-decoration:none;padding:16px 4px;border-bottom:1px solid var(--bordure);
  font-family:'Anton',Impact,sans-serif;font-size:1.5rem;text-transform:uppercase;
}@media(hover:hover){.drawer nav a:hover{color:var(--jaune)}}
.drawer-haut{display:flex;align-items:center;justify-content:space-between}

/* ---------- Hero de page intérieure ---------- */
.hero-page{
  padding:64px 0 56px;border-bottom:1px solid var(--bordure);
  background:
    radial-gradient(900px 340px at 82% -10%,rgba(255,212,0,.09),transparent 70%),
    linear-gradient(180deg,var(--carbone),var(--noir));
}
/* Le filigrane « 777 » n'existait que sur la page nettoyage et la page de choix.
   Les hero de Location et de Vente laissaient donc leur moitie droite vide : le
   texte a gauche, plus rien a cote. Meme trait, meme couleur, en plus petit —
   ces hero font la moitie de la hauteur de celui du nettoyage. */
.hero-page{position:relative;overflow:hidden;isolation:isolate}
.hero-page::after{
  content:"777";position:absolute;top:50%;right:-2%;transform:translateY(-46%);
  font-family:'Anton',Impact,sans-serif;font-size:clamp(9rem,17vw,15rem);line-height:.8;
  color:transparent;-webkit-text-stroke:2px #232328;
  user-select:none;pointer-events:none;white-space:nowrap;z-index:-1;
}
/* Sous 1000 px le texte du hero occupe toute la largeur : le filigrane repasse
   derriere lui, en retrait, pour ne pas gener la lecture du titre. */
@media(max-width:1000px){
  .hero-page::after{right:auto;left:50%;transform:translate(-50%,-46%);-webkit-text-stroke-color:#171719}
}
.hero-page .wrap{position:relative;z-index:1}
.hero-page h1{font-size:clamp(2.4rem,7vw,4.6rem)}
/* La ville est mise en jaune dans les titres, comme sur la page nettoyage. */
.hero-page h1 em{font-style:normal;color:var(--jaune)}
.hero-page .chapo{font-size:1.05rem;margin-top:18px}
.fil{font-size:.78rem;color:var(--gris-faible);margin-bottom:20px;font-family:'Space Mono',monospace}
.fil a{text-decoration:none}@media(hover:hover){.fil a:hover{color:var(--jaune)}}

/* ---------- Cartes ---------- */
.grille{display:grid;gap:20px}
/* `min(…, 100%)` est indispensable : un minmax() en pixels durs ne se réduit
   pas sous sa borne basse, donc la colonne débordait de l'écran sur un iPhone
   SE / mini (330 px de colonne dans 294 px utiles = 30 px de scroll latéral). */
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.g-3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.g-4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

.carte{
  background:var(--carbone);border:1px solid var(--bordure);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .18s ease,transform .18s ease;
}@media(hover:hover){.carte:hover{border-color:var(--bordure-2)}}
.carte-media{
  aspect-ratio:16/10;background:var(--carbone-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.carte-media img{width:100%;height:100%;object-fit:cover}
.carte-corps{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.carte h3{font-size:1.3rem}

/* Silhouette de voiture pour les fiches sans photo : mieux qu'un carré vide,
   et sans requête réseau. */
.silhouette{width:64%;max-width:190px;opacity:.16;stroke:var(--creme);stroke-width:1.5;fill:none}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--bordure-2);color:var(--gris);white-space:nowrap;
}
.badge-jaune{background:var(--jaune);color:#000;border-color:var(--jaune);font-weight:700}
.badge-vert{color:var(--vert);border-color:#1e4a37}
.badge-rouge{color:var(--rouge);border-color:#5a2b2b}
.badge-flottant{position:absolute;top:12px;left:12px;z-index:2;background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.prix{font-family:'Anton',Impact,sans-serif;font-size:1.9rem;color:var(--jaune);line-height:1}
.prix small{font-family:'Inter',sans-serif;font-size:.42em;color:var(--gris);text-transform:none;font-weight:500}
.prix-barre{text-decoration:line-through;color:var(--gris-faible);font-size:.95rem;font-family:'Inter',sans-serif}

.specs{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.82rem;color:var(--gris)}
.specs span{display:inline-flex;align-items:center;gap:6px}
.specs .icon{width:15px;height:15px;color:var(--jaune-sombre)}

/* Ce qui sépare vraiment deux véhicules du parc (sans permis ou non, vitesse,
   autonomie, recharge). Sans cette ligne, les fiches se ressemblent toutes. */
.note-veh{
  margin:0;font-size:.84rem;line-height:1.45;color:var(--gris);
  border-left:2px solid var(--jaune-sombre);padding-left:10px
}

/* ---------- Formulaires ---------- */
.champ{display:flex;flex-direction:column;gap:7px}
.champ label,.lbl{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.champ input,.champ select,.champ textarea{
  /* background-color et non le raccourci background : celui-ci effacerait le
     chevron jaune que la regle `select` pose en background-image — et il est
     plus specifique, donc il gagnerait. */
  background-color:var(--noir);border:1px solid var(--bordure-2);color:var(--creme);
  padding:13px 14px;min-height:var(--r-tap);width:100%;
  transition:border-color .15s ease;
  /* Sans ça, iOS zoome sur le champ au focus si la police fait moins de 16px */
  font-size:16px;
}
/* Tous les select du site, pas seulement ceux poses dans un .champ : la page
   compte et le back-office ont les leurs, et un seul menu deroulant reste a la
   fleche systeme suffit a trahir la charte. */
select{
  /* La fleche systeme est grise et ne suit pas la charte : on la remplace par un
     chevron jaune en fond. padding-right laisse la place au chevron. */
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFD400' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
}
select::-ms-expand{display:none}
/* L'icone du calendrier est deja dessinee en clair par color-scheme:dark — un
   invert() la renverrait dans le noir. On ne touche donc qu'au curseur et on la
   passe en jaune au survol, comme le chevron des select. */
.champ input[type="date"]::-webkit-calendar-picker-indicator,
.champ input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.7;transition:opacity .15s ease;
}
@media(hover:hover){
  .champ input[type="date"]:hover::-webkit-calendar-picker-indicator,
  .champ input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:1}
}
@media(hover:hover){
  .champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--gris-faible)}
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--jaune);outline:none}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:var(--rouge)}
.champ textarea{resize:vertical;min-height:96px;line-height:1.5}
.champ .aide{font-size:.76rem;color:var(--gris-faible)}
.champ-erreur{font-size:.78rem;color:var(--rouge)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.duo{grid-template-columns:1fr}}

.case{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.88rem;line-height:1.45;color:var(--gris)}
.case input{width:20px;height:20px;flex:none;accent-color:var(--jaune);margin-top:2px;min-height:0}

/* Choix en pastilles (type de véhicule, filtres…) */
.pastilles{display:flex;flex-wrap:wrap;gap:9px}
.pastille{
  border:1px solid var(--bordure-2);background:var(--carbone);color:var(--gris);
  padding:10px 16px;cursor:pointer;font-size:.85rem;font-weight:600;min-height:var(--r-tap);
  transition:all .15s ease;
}@media(hover:hover){.pastille:hover{border-color:var(--jaune-sombre);color:var(--creme)}}
.pastille[aria-pressed="true"]{background:var(--jaune);color:#000;border-color:var(--jaune)}

/* ---------- Messages ---------- */
.alerte{
  padding:14px 16px;border-left:3px solid var(--jaune);background:var(--carbone);
  font-size:.88rem;color:var(--gris);display:flex;gap:11px;align-items:flex-start;
}
.alerte .icon{width:18px;height:18px;color:var(--jaune);flex:none;margin-top:2px}
/* Sans cette règle, display:flex l'emporte sur l'attribut hidden : la zone
   d'erreur vide (triangle rouge seul) restait affichée sous chaque formulaire. */
.alerte[hidden]{display:none}
.alerte-erreur{border-left-color:var(--rouge)}
.alerte-erreur .icon{color:var(--rouge)}
.alerte-succes{border-left-color:var(--vert)}
.alerte-succes .icon{color:var(--vert)}

.vide{padding:56px 24px;text-align:center;color:var(--gris-faible);border:1px dashed var(--bordure-2)}
.vide b{display:block;color:var(--creme);font-family:'Anton',Impact,sans-serif;font-size:1.3rem;text-transform:uppercase;margin-bottom:8px}

/* Barres de chargement : occuper la place finale évite que la page saute
   quand les données arrivent. */
.fantome{background:linear-gradient(90deg,var(--carbone) 25%,var(--carbone-2) 50%,var(--carbone) 75%);background-size:200% 100%;animation:glisse 1.4s infinite}
@keyframes glisse{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Modale ---------- */
.modale{
  position:fixed;inset:0;z-index:var(--z-modale);
  background:rgba(5,5,6,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;overscroll-behavior:contain;
}
.modale[data-ouvert="true"]{display:flex}
.modale-boite{
  background:var(--carbone);border:1px solid var(--bordure-2);
  width:min(920px,100%);margin:auto;position:relative;
}
.modale-haut{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--bordure);
  position:sticky;top:0;background:var(--carbone);z-index:2;
}
.modale-corps{padding:22px}
.fermer{
  background:none;border:1px solid var(--bordure-2);color:var(--gris);
  width:38px;height:38px;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
}@media(hover:hover){.fermer:hover{color:var(--jaune);border-color:var(--jaune-sombre)}}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--bordure);padding:52px 0 34px;background:var(--carbone)}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){.pied-grille{grid-template-columns:1fr;gap:26px}}
/* ex-h4 passe en h3 (le h4 sautait un niveau apres le h2 de section) :
   la typo Space Mono est redeclaree, sinon la regle globale impose Anton. */
.pied h3{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jaune);margin-bottom:14px;font-weight:700;line-height:1.4}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.88rem}
.pied a{color:var(--gris);text-decoration:none}@media(hover:hover){.pied a:hover{color:var(--jaune)}}
/* Au doigt, les liens de pied de page ne font que ~18 px de haut (Apple recommande 44).
   Le ::before étend la zone tactile sans rien déplacer à l'écran. */
@media(pointer:coarse){
  .pied a{position:relative;display:inline-block}
  .pied a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
.pied-bas{margin-top:34px;padding-top:22px;border-top:1px solid var(--bordure);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.78rem;color:var(--gris-faible)}

/* ---------- Utilitaires ---------- */
.pile{display:flex;flex-direction:column}
.pile-8{gap:8px}.pile-12{gap:12px}.pile-16{gap:16px}.pile-24{gap:24px}
.rangee{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pousse{margin-left:auto}
.gris{color:var(--gris)}
.faible{color:var(--gris-faible);font-size:.84rem}
.jaune{color:var(--jaune)}
.centre{text-align:center}
.masque{display:none!important}

/* ---------- RETOUR EN HAUT ---------- */
/* `visibility` en plus de l'opacité : un bouton seulement transparent resterait
   cliquable et focusable au clavier alors qu'il est censé être absent. */
.haut-page{
  position:fixed;right:max(4vw,14px);bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:var(--z-nav);
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  background:rgba(20,20,22,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--bordure-2);color:var(--jaune);cursor:pointer;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,
             background .18s ease,border-color .18s ease,color .18s ease;
}
.haut-page[data-show="true"]{opacity:1;visibility:visible;transform:none}@media(hover:hover){.haut-page:hover{background:var(--jaune);color:#000;border-color:var(--jaune)}}
.haut-page .icon{width:20px;height:20px;stroke-width:2}

/* ---------- BARRE D'ACTION MOBILE ----------
   Reprise a l'identique de la page nettoyage : sur telephone, appeler ne doit
   jamais demander de remonter la page. Elle n'apparait qu'une fois le hero
   passe, sinon elle recouvre l'accroche des le chargement. */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:12px max(4vw,14px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--bordure);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.bar[data-show="true"]{transform:none}
.bar .btn{flex:1;font-size:.85rem;padding:14px 12px}
@media(max-width:940px){
  .bar{display:flex}
  /* Le bouton « retour en haut » se cale au-dessus de la barre, sinon les deux
     se superposent dans le coin bas droit. */
  .haut-page{bottom:calc(80px + env(safe-area-inset-bottom))}
  /* Et le pied de page se degage de la barre, sinon ses derniers liens
     passent dessous. */
  .pied{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}

/* ---------- LISIBILITE DES SURTITRES SUR MOBILE ----------
   Le Space Mono en petites capitales est pose a .72rem (11,5 px) : correct sur
   un ecran de bureau, trop petit a bout de bras sur un telephone. Plancher a
   .78rem (12,5 px) sous 640 px seulement — le rendu desktop ne bouge pas.
   L'interlettrage est reduit d'autant : a .22em, un surtitre grossi passerait
   sur deux lignes, ce qui annulerait le gain. */
@media(max-width:640px){
  .eyebrow{font-size:.78rem;letter-spacing:.16em}
  .pied h3{font-size:.78rem;letter-spacing:.14em}
  .champ .aide{font-size:.78rem}
  .fil{font-size:.8rem}
}
/* Sous 360 px, l'interlettrage coute plus de place que la taille elle-meme :
   on le resserre plutot que de re-rapetisser le texte. */
@media(max-width:360px){
  .eyebrow{letter-spacing:.1em}
  .pied h3{letter-spacing:.1em}
}

/* ---------- « chez IMO Car Wash » dans l'en-tête (02/09) ---------- */
/* Les deux enseignes forment un seul bloc : la barre est en space-between, elle
   ecarterait sinon le logo IMO jusqu'au milieu de l'en-tete. */
.marques{display:flex;align-items:center;min-width:0}
.chez-imo{
  display:flex;align-items:center;margin-left:13px;padding-left:13px;
  border-left:1px solid var(--bordure-2);
}
/* Le logo IMO est bleu vif + rouge : les deux seules couleurs hors charte du
   site, posees a 30 px du logo 777. Desature dans l'en-tete, il redevient une
   mention d'enseigne au lieu d'un second logo qui se dispute la vedette. Il
   reprend ses couleurs au survol de l'en-tete, et partout ailleurs (bloc du
   lavage automatique, pied) il reste en couleur. */
.chez-imo img{
  display:block;height:26px;width:auto;
  filter:grayscale(1) brightness(1.12);opacity:.62;
  transition:filter .2s ease,opacity .2s ease;
}
@media(hover:hover){
  .nav:hover .chez-imo img,.haut:hover .chez-imo img,.chez-imo:hover img{filter:none;opacity:1}
}
/* 02/09 : la mention disparaissait sous 1040 px "parce que l'en-tete est dense".
   Elle tient en fait jusqu'a 320 px (logo 171 px + IMO 89 px + burger 44 px,
   mesure faite), et c'est la seule image de tout le site : la masquer donnait
   un en-tete sans aucun logo sur mobile. Elle reste, juste reduite au plus etroit. */
@media(max-width:400px){
  .chez-imo{margin-left:9px;padding-left:9px}
  .chez-imo img{height:22px}
}
/* Sous 360 px le suffixe du logo passait sur deux lignes une fois le logo IMO
   revenu : on le resserre pour qu'il tienne sur une seule. */
@media(max-width:360px){.logo span{font-size:.55rem;letter-spacing:.12em}}