/* =============================================================================
   Roule encore — feuille de style unique
   Refonte du 2026-09-17 (soir), après retour du propriétaire : « ce design
   plat/moche de spécialiste IA ». La version précédente posait des aplats de
   carton kraft et des boîtes blanches à filet noir, sans matière ni relief.

   Direction : SIGNALISATION ROUTIÈRE ET PLAQUE D'IMMATRICULATION.
   Le fond est l'asphalte (sombre, grainé) : les photos de véhicules, qui sont
   le vrai contenu du site, y ressortent au lieu de se diluer dans du blanc.
   La signature est le PANNEAU : surface claire émaillée, bande bleue à gauche
   comme sur une plaque française, filet sombre, ombre portée réelle. Le jaune
   haute visibilité du gilet porte l'action principale, et lui seul.

   Règles tenues (ui-ux-pro-max §1-§5, ui-skills, anti « IA slop ») :
   aucun dégradé décoratif, aucune emoji en guise d'icône, aucune ombre douce
   générique, `aspect-ratio` sur toute image, `text-wrap` sur les titres,
   chiffres tabulaires sur les prix et les kilométrages, cibles tactiles 44 px,
   focus visible de 3 px, rayons concentriques, retour d'appui à l'échelle,
   mouvement désactivable.
   ============================================================================= */

/* ---------- 1. Polices ---------- */
@font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/static/fonts/oswald-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Asap"; src: url("/static/fonts/asap-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Asap"; src: url("/static/fonts/asap-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Asap"; src: url("/static/fonts/asap-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- 2. Jetons ---------- */
:root {
  /* Surfaces */
  --asphalte: #16181C;          /* fond de page */
  --asphalte-2: #1E2228;        /* barres, filtres, surfaces posées sur le fond */
  --asphalte-3: #2A2F37;        /* bordures sur fond sombre */
  --panneau: #F4F4F1;           /* surface claire : panneaux, feuilles de lecture */
  --panneau-2: #E7E7E2;         /* creux dans une surface claire */
  --encre: #101216;             /* texte sur surface claire */
  --encre-douce: #4B515A;       /* texte secondaire sur surface claire */
  --signal: #A7B0BB;            /* texte secondaire sur asphalte (6,6:1) */

  /* Couleurs de sens */
  --bande: #123A8C;             /* bleu de la bande européenne : liens, repères */
  --bande-clair: #7FA2E8;       /* même rôle, sur fond sombre */
  --hv: #D8FF33;                /* jaune haute visibilité : action principale, focus */
  --hv-appui: #C2E82A;
  --controle: #2FA36B;          /* vérifié (aplat) */
  --controle-texte: #16704A;    /* vérifié (texte sur surface claire) */
  --refus: #E03A2F;
  --refus-texte: #B32419;

  /* Typographie */
  --police-signal: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --police-texte: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-base: 1.0625rem;
  --t-m: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --t-l: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --t-xl: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 3.2vw, 3.5rem);

  /* Espace : rythme de 4 px */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem;

  /* Rayons concentriques : l'enfant vaut le parent moins son écart */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 14px;

  /* Relief : deux couches, une serrée et une large, jamais une ombre floue seule */
  --ombre-1: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.22);
  --ombre-2: 0 2px 4px rgb(0 0 0 / 0.45), 0 8px 20px rgb(0 0 0 / 0.30);
  --ombre-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 18px 44px rgb(0 0 0 / 0.38);
  --liseré: inset 0 1px 0 rgb(255 255 255 / 0.55);

  --colonne: 1180px;
  --touche: 44px;
  --duree-1: 140ms;
  --duree-2: 220ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.3, 1);

  --z-fond: 0; --z-contenu: 1; --z-barre: 40; --z-voile: 60; --z-tiroir: 70;
  --z-visionneuse: 90;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--asphalte);
  /* Grain : l'asphalte n'est pas un aplat. Bruit fractal en data-URI, très
     léger, fixé au fond pour ne pas défiler avec le contenu. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  color: var(--panneau);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background-color: var(--asphalte-2); }

h1, h2, h3, h4 {
  font-family: var(--police-signal);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: 0.005em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-weight: 600; }
h4 { font-size: var(--t-m); font-weight: 600; }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--bande-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus : jaune haute visibilité, jamais retiré, visible sur les deux fonds. */
:focus-visible {
  outline: 3px solid var(--hv);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.surface-claire :focus-visible, .feuille :focus-visible, .panneau :focus-visible {
  outline-color: var(--bande);
}

::selection { background: var(--hv); color: var(--encre); }

/* Données : les chiffres ne doivent pas danser d'une ligne à l'autre. */
.nombre, .pancarte__prix, .pancarte__meta, .prix, td.nombre, .annonces-total {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Ossature ---------- */
/* Le conteneur s'applique à TOUT enfant direct de main : une page qui ouvre
   sur un <div> (la fiche) débordait jusqu'au bord de l'écran. */
.conteneur, .site-header__inner, .site-footer__inner, main > *, .section {
  width: min(100% - 2 * var(--e-4), var(--colonne));
  margin-inline: auto;
}
/* Le contenu respire AUTANT en haut qu'en bas. L'espace du bas venait de trois
   sources cumulées (marge du dernier bloc, rembourrage du contenu, marge du
   pied) et valait 112 px contre 32 en haut. Il n'en reste qu'une, la marge du
   pied, qui vaut exactement la marge haute du premier bloc. */
main { display: block; padding-bottom: 0; }
/* Rythme vertical réservé aux sections de premier niveau : appliqué aux
   sections imbriquées, il écartait les blocs d'une fiche de 3 rem. */
main > section, main > .section { margin-block: var(--e-6); }
@media (min-width: 720px) { main > section, main > .section { margin-block: var(--e-7); } }
/* Le dernier bloc n'a pas besoin de sa marge basse : elle s'ajoutait au
   rembourrage du pied et laissait un trou de 190 px avant le pied de page. */
main > section:last-child, main > .section:last-child { margin-bottom: 0; }
.section__titre { margin-bottom: var(--e-4); }
.section__titre::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: var(--e-2);
  background: var(--hv);
  border-radius: 2px;
}
.section__lien-plus { margin-top: var(--e-4); }
.section__lien-plus a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche); font-family: var(--police-signal);
  font-size: var(--t-m); text-decoration: none; color: var(--hv);
}
.section__lien-plus a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Feuille : surface claire de lecture posée sur l'asphalte. */
.feuille {
  background: var(--panneau);
  color: var(--encre);
  border-radius: var(--r-4);
  padding: var(--e-5);
  box-shadow: var(--ombre-2), var(--liseré);
  margin-bottom: var(--e-5);
}
.feuille h1, .feuille h2, .feuille h3, .feuille h4 { color: var(--encre); }
.feuille a:not(.btn) { color: var(--bande); }
.feuille p { color: var(--encre); }
@media (min-width: 720px) { .feuille { padding: var(--e-6); } }

/* ---------- 5. En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-barre);
  background: rgb(22 24 28 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--asphalte-3);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 64px; padding-block: var(--e-2);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.logo__img { height: 30px; width: auto; }
/* Sur téléphone, l'action de dépôt vit DANS le tiroir : la garder aussi dans
   l'en-tête volait la place du burger et le repoussait contre le logo. */
.site-header__actions { display: none; }
@media (min-width: 1000px) {
  .site-header__actions { display: flex; align-items: center; gap: var(--e-2); }
}

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); }
  .nav a:not(.btn) {
    display: inline-flex; align-items: center; min-height: var(--touche);
    padding: 0 var(--e-3);
    font-family: var(--police-signal); font-weight: 500; font-size: var(--t-s);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--panneau); text-decoration: none; border-radius: var(--r-2);
  }
  .nav a:not(.btn):hover { background: var(--asphalte-2); }
  .nav a:not(.btn)[aria-current="page"] { color: var(--hv); box-shadow: inset 0 -3px 0 var(--hv); }
}

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  order: 9;
  width: var(--touche); height: var(--touche);
  background: var(--asphalte-2); border: 1px solid var(--asphalte-3);
  border-radius: var(--r-2); cursor: pointer;
}
.burger__bar { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--panneau); border-radius: 2px; }
@media (min-width: 1000px) { .burger { display: none; } }

/* Tiroir mobile */
.nav.est-ouvert {
  display: flex; flex-direction: column; gap: 0;
  position: fixed; inset: 64px 0 auto 0; z-index: var(--z-tiroir);
  background: var(--asphalte-2);
  border-bottom: 1px solid var(--asphalte-3);
  padding: var(--e-3) var(--e-4) var(--e-5);
  max-height: calc(100dvh - 64px); overflow-y: auto;
  box-shadow: var(--ombre-3);
}
.nav.est-ouvert a:not(.btn) {
  display: flex; align-items: center; min-height: 52px;
  font-family: var(--police-signal); font-size: var(--t-m);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--panneau); text-decoration: none;
  border-bottom: 1px solid var(--asphalte-3);
}
.nav.est-ouvert a:not(.btn)[aria-current="page"] { color: var(--hv); }
/* En tête du tiroir : la marge passe DESSOUS, pour la détacher des
   entrées de navigation qui la suivent. */
.nav__cta-mobile { margin-bottom: var(--e-4); }
/* Spécificité : `.nav a` (0,1,1) l'emporte sur `.nav__cta-mobile` (0,1,0) et
   rétablissait `display: inline-flex`, d'où deux fois l'action sur desktop.
   Même piège que la bordure héritée relevée sur un autre projet du portefeuille. */
@media (min-width: 1000px) { .nav a.nav__cta-mobile { display: none; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hv); color: var(--encre);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-2);
  font-weight: 600;
}
.skip-link:focus { left: var(--e-3); top: var(--e-3); }

/* ---------- 6. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--touche); padding: 0 var(--e-4);
  font-family: var(--police-signal); font-size: var(--t-base); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-3);
  transition: transform var(--duree-1) var(--courbe), background-color var(--duree-1), box-shadow var(--duree-1);
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--hv); color: var(--encre);
  box-shadow: var(--ombre-1), inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.btn--primary:hover { background: var(--hv-appui); }
/* Un bouton reste lisible où qu'il soit posé. Dans le tiroir mobile,
   `.nav.est-ouvert a` repeignait le texte du bouton de dépôt en crème sur
   fond jaune : contraste 1,04, illisible. Mesuré, pas jugé à l'œil. */
a.btn--primary, .feuille a.btn--primary, .nav a.btn--primary { color: var(--encre); }
a.btn--danger, .feuille a.btn--danger { color: #fff; }

.btn--secondaire {
  background: transparent; color: var(--panneau); border-color: var(--asphalte-3);
}
.btn--secondaire:hover { background: var(--asphalte-2); border-color: var(--signal); }
/* Le bouton secondaire n'a pas de fond : sa couleur doit venir de la surface
   qui le porte, sinon il disparaît. Le cas s'est présenté deux fois (feuille
   claire, puis bandeau d'avertissement) : la règle couvre désormais toute
   surface claire nommée, plutôt qu'un sélecteur de plus à chaque fois. */
.feuille .btn--secondaire,
.bandeau-succes .btn--secondaire,
.bandeau-avertissement .btn--secondaire { color: var(--encre); border-color: rgb(16 18 22 / 0.35); }
.feuille .btn--secondaire:hover,
.bandeau-succes .btn--secondaire:hover,
.bandeau-avertissement .btn--secondaire:hover { background: rgb(16 18 22 / 0.06); border-color: var(--encre); }

.btn--danger { background: var(--refus); color: #fff; box-shadow: var(--ombre-1); }
.btn--danger:hover { filter: brightness(1.08); }

.btn--petit { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-xs); }
.btn--large { min-height: 56px; padding: 0 var(--e-6); font-size: var(--t-m); width: 100%; }
@media (min-width: 560px) { .btn--large { width: auto; } }
.btn--retirer { background: transparent; color: var(--refus-texte); border-color: currentColor; }

/* ---------- 7. Signature : le panneau ---------- */
/* Une fiche est un panneau de signalisation : surface claire émaillée, bande
   bleue de plaque à gauche, filet sombre, relief réel. */
.pancarte {
  position: relative;
  background: var(--panneau);
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: var(--r-4);
  box-shadow: var(--ombre-2), var(--liseré);
  overflow: hidden;            /* la photo à fond perdu s'arrête au rayon */
  height: 100%;
  display: flex; flex-direction: column;
  padding-left: 26px;          /* la place de la bande, qui court sur TOUTE la hauteur */
}
/* La bande de plaque longe le panneau entier, photo comprise. Attachée au
   seul corps de texte, elle s'arrêtait sous la photo et le panneau semblait
   coupé en deux. */
.pancarte::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 26px; z-index: 1;
  background: var(--bande);
  box-shadow: inset -2px 0 0 rgb(0 0 0 / 0.35), inset 1px 0 0 rgb(255 255 255 / 0.18);
}
.pancarte::after {
  content: "";
  position: absolute; left: 7px; top: 14px; width: 12px; height: 12px; z-index: 2;
  border-radius: 50%;
  border: 1.5px dotted rgb(255 255 255 / 0.6);
}
.pancarte__ruban { display: none; }        /* le ruban adhésif de l'ancienne version */

/* Marquage professionnel : bandeau en biais dans le coin haut droit. Il se
   voit d'un coup d'œil dans une grille, sans voler la place du prix. */
.pancarte__pro {
  position: absolute; top: 14px; right: -34px; z-index: 3;
  width: 130px; padding: 4px 0;
  transform: rotate(38deg);
  background: var(--hv); color: var(--encre);
  font-family: var(--police-signal); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.16em; text-align: center;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, var(--ombre-1);
}
.pancarte--liste .pancarte__pro { top: 10px; right: -38px; width: 120px; letter-spacing: 0.12em; }

/* La photo occupe toute la largeur, sans marge négative. */
.pancarte__photo-bloc { margin: 0; }
.pancarte__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 2px solid var(--encre);
}
.pancarte__photo-bloc--liste .pancarte__photo { aspect-ratio: 3 / 2; }

/* Le corps porte la bande bleue de plaque, avec son creux d'impression et la
   pastille d'étoile européenne. */
.pancarte__corps {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4);
}

.pancarte__titre-vente {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin: 0;
  font-family: var(--police-signal); font-weight: 700; font-size: var(--t-s);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--bande);
}
.pancarte__titre-vente .icone { color: var(--encre); }
.pancarte__marqueur { font-family: inherit; }

.pancarte__marque-modele {
  margin: 0;
  font-family: var(--police-signal); font-weight: 700;
  font-size: var(--t-l); line-height: 1.05; color: var(--encre);
  text-wrap: balance;
}
.pancarte__annee { color: var(--encre-douce); font-weight: 500; }

.pancarte__meta {
  margin: 0; color: var(--encre-douce); font-size: var(--t-s);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.pancarte__meta-sep { color: var(--panneau-2); }

/* Le prix est une plaque dans le panneau. */
.pancarte__prix-bloc { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1); }
.pancarte__prix {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.5em 0.1em 0.75em;
  background: #fff; color: var(--encre);
  font-family: var(--police-signal); font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.15;
  letter-spacing: 0.015em;
  border: 2px solid var(--encre); border-radius: var(--r-2);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, var(--ombre-1);
  overflow: hidden;
}
.pancarte__prix::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 9px;
  background: var(--bande);
  box-shadow: inset -1px 0 0 rgb(0 0 0 / 0.3);
}
.pancarte__negociable { color: var(--encre-douce); font-size: var(--t-s); }
.pancarte__ville, .pancarte__departement { color: var(--encre-douce); font-size: var(--t-s); }

.pancarte__badges { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.28em 0.6em;
  font-family: var(--police-signal); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1.5px solid currentColor; border-radius: 999px;
  white-space: nowrap;
}
.badge--ok { color: var(--controle-texte); }
.badge--absent { color: var(--encre-douce); opacity: 0.75; }
.badge__coche { display: inline-flex; }

.pancarte__photo-bloc { margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) var(--e-3) calc(-1 * (var(--e-4) + 26px)); }
.pancarte__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 2px solid var(--encre);
}
.pancarte__photo-bloc--liste .pancarte__photo { aspect-ratio: 3 / 2; }
.pancarte__astuce { font-size: var(--t-s); color: var(--encre-douce); padding: 0 var(--e-4) var(--e-4) calc(var(--e-4) + 26px); }

.pancarte-tampon {
  position: absolute; top: var(--e-4); right: calc(-1 * var(--e-2));
  transform: rotate(-6deg);
  padding: 0.2em 0.9em;
  font-family: var(--police-signal); font-weight: 700; font-size: var(--t-m);
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 3px solid var(--refus-texte); color: var(--refus-texte);
  border-radius: var(--r-2);
  background: rgb(244 244 241 / 0.9);
}
.pancarte-tampon--vendu { color: var(--refus-texte); }

/* ---------- 8. Grille d'annonces ---------- */
.grille-pancartes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.grille-pancartes > li > a, .grille-pancartes > li > .pancarte { display: block; text-decoration: none; color: inherit; }
.grille-pancartes .pancarte { transition: transform var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe); }
.grille-pancartes a:hover .pancarte { transform: translateY(-3px); box-shadow: var(--ombre-3), var(--liseré); }
.grille-pancartes a:active .pancarte { transform: translateY(-1px) scale(0.995); }

/* Barre de recherche de l'accueil : première chose qu'on voit, elle doit se
   distinguer du formulaire de dépôt sans lui voler la vedette. */
.section--chercher { margin-top: var(--e-5) !important; margin-bottom: var(--e-4) !important; }
.barre-recherche {
  background: var(--asphalte-2); border: 1px solid var(--asphalte-3);
  border-radius: var(--r-3); padding: var(--e-4);
}
.barre-recherche > label {
  display: block; margin-bottom: var(--e-2);
  font-family: var(--police-signal); font-weight: 600; font-size: var(--t-base);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.barre-recherche__ligne { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.barre-recherche__ligne input { flex: 1 1 200px; }
.barre-recherche__ou { flex: 1 1 190px; }
.barre-recherche__rayon { flex: 0 1 120px; }
.barre-recherche__aide { margin: var(--e-3) 0 0; font-size: var(--t-s); color: var(--signal); }

.filtres-annonces {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end;
  background: var(--asphalte-2); border: 1px solid var(--asphalte-3);
  border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-5);
}
/* La recherche libre prend toute la ligne : c'est le champ qu'on vient
   utiliser, les listes déroulantes ne font qu'affiner. */
.filtres-annonces__ligne { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.filtres-annonces__ligne .champ--recherche { flex: 1 1 220px; margin-bottom: 0; }
.filtres-annonces__ligne .champ--ville { flex: 1 1 180px; margin-bottom: 0; }
.filtres-annonces__ligne .champ--rayon { flex: 0 1 130px; margin-bottom: 0; }
.filtres-annonces__aide { flex: 1 0 100%; margin: 0; }
.filtres-annonces .champ { flex: 1 1 180px; }
.filtres-annonces__plus { flex: 1 0 100%; }
.filtres-annonces__plus > summary {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche); cursor: pointer;
  font-family: var(--police-signal); font-weight: 600; font-size: var(--t-s);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--panneau);
}
/* Le marqueur natif ne se voit pas sur fond sombre selon les navigateurs :
   on le remplace par un chevron dessiné, qui pivote à l'ouverture. */
.filtres-annonces__plus > summary { list-style: none; }
.filtres-annonces__plus > summary::-webkit-details-marker { display: none; }
.filtres-annonces__plus > summary::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  border-right: 2px solid var(--hv); border-bottom: 2px solid var(--hv);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duree-1) var(--courbe);
}
.filtres-annonces__plus[open] > summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.filtres-annonces__grille {
  display: grid; gap: var(--e-3); margin-top: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.filtres-annonces__grille .champ { flex: initial; }
.filtres-annonces__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
@media (min-width: 720px) { .filtres-annonces__actions { margin-left: auto; } }
.etat-vide .btn { margin-top: var(--e-3); }
.annonces-total { color: var(--signal); font-size: var(--t-s); }
.pagination { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-6); flex-wrap: wrap; }
.pagination__etat { color: var(--signal); font-size: var(--t-s); }
.etat-vide {
  background: var(--asphalte-2); border: 1px dashed var(--asphalte-3);
  border-radius: var(--r-3); padding: var(--e-6); text-align: center; color: var(--signal);
}
/* Le texte est centré par `text-align`, mais les boutons sont dans un conteneur
   flex qui, lui, ne l'écoute pas : ils restaient collés à gauche sous un
   paragraphe centré. */
.etat-vide .boutons-partage,
.etat-vide .boutons-contact,
.etat-vide .boutons-gestion { justify-content: center; }

/* ---------- 9. Accueil : le guichet ---------- */
.hero__titre { margin-bottom: var(--e-3); text-transform: uppercase; letter-spacing: 0.01em; }
.hero__chapeau { color: var(--signal); font-size: var(--t-m); max-width: 60ch; }

.mise-en-page-depot { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 1000px) {
  .mise-en-page-depot { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: var(--e-6); }
  .mise-en-page-depot__pancarte { position: sticky; top: 88px; }
}
.mise-en-page-depot__pancarte-titre {
  font-family: var(--police-signal); font-size: var(--t-s); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--signal);
  margin-bottom: var(--e-3);
}

.etapes-resume { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 720px) { .etapes-resume { grid-template-columns: repeat(3, 1fr); } }
.etapes-resume__item {
  background: var(--asphalte-2); border: 1px solid var(--asphalte-3);
  border-radius: var(--r-3); padding: var(--e-4);
}
.etapes-resume__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: var(--e-2);
  background: var(--hv); color: var(--encre);
  font-family: var(--police-signal); font-weight: 700; font-size: var(--t-m);
  border-radius: var(--r-2);
}
.etapes-resume__titre { font-family: var(--police-signal); font-size: var(--t-m); margin-bottom: var(--e-1); }

/* ---------- 10. Formulaires ---------- */
.form-depot, .form-contact, .form-signalement, .form-admin-connexion, .form-admin-fiche { margin: 0; }
.etape { margin-bottom: var(--e-6); }
.etape__titre { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-l); }
.etape__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  background: var(--encre); color: var(--hv);
  font-family: var(--police-signal); font-weight: 700; font-size: var(--t-base);
  border-radius: var(--r-2);
}
.feuille .etape__numero { background: var(--encre); color: var(--hv); }

.champ { margin-bottom: var(--e-4); }
.champ label, .champ-radios > legend {
  display: block; margin-bottom: var(--e-2);
  font-family: var(--police-signal); font-weight: 600; font-size: var(--t-base);
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* Texte secondaire : par défaut sur ASPHALTE (le formulaire d'accueil y vit),
   repassé en encre douce dès qu'il est posé sur une surface claire. Le défaut
   inverse rendait « (facultatif) », les aides et le compteur de photos
   illisibles, gris foncé sur fond foncé, et le message « Préparation des
   photos… » invisible : on croyait que rien ne se passait. */
.champ__optionnel { font-family: var(--police-texte); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--signal); font-size: var(--t-s); }
.champ__aide { margin: var(--e-1) 0 var(--e-2); font-size: var(--t-s); color: var(--signal); line-height: 1.5; }
/* Une case à cocher est `inline-flex` : sur une colonne étroite, son texte
   explicatif venait toucher la case suivante et on ne savait plus à laquelle
   il se rapportait. Il se colle à SA case au-dessus, et respire en dessous. */
.champ--case + .champ__aide { margin-top: calc(var(--e-1) * -1); margin-bottom: var(--e-5); }
.champ--case { margin-bottom: var(--e-3); }
.champ__aide + .champ--case { margin-top: var(--e-2); }
.champ__compteur { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--signal); }
.feuille .champ__optionnel, .feuille .champ__aide, .feuille .champ__compteur,
.zone-photos .champ__aide, .vignette .champ__aide { color: var(--encre-douce); }
/* Aide repliée sous un champ : le chevron est dessiné, le marqueur natif ne
   se voit pas sur fond sombre selon les navigateurs. */
.aide-depliable { margin-top: var(--e-3); }
.aide-depliable > summary {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche); cursor: pointer; list-style: none;
  font-size: var(--t-s); font-weight: 600; color: var(--bande-clair);
}
.aide-depliable > summary::-webkit-details-marker { display: none; }
.aide-depliable > summary::before {
  content: ""; width: 10px; height: 10px; flex: 0 0 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform var(--duree-1) var(--courbe);
}
.aide-depliable[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.aide-depliable__corps {
  margin-top: var(--e-2); padding: var(--e-3) var(--e-4);
  background: var(--asphalte-2); border-left: 3px solid var(--bande-clair);
  border-radius: var(--r-2);
  font-size: var(--t-s); color: var(--signal); line-height: 1.6;
}
.aide-depliable__corps p { margin: 0 0 var(--e-2); color: var(--panneau); }
.aide-depliable__corps p + ol { margin-top: 0; }
.aide-depliable__corps ol { margin: 0 0 var(--e-3); padding-left: var(--e-5); }
.aide-depliable__corps li { margin-bottom: var(--e-1); }
.aide-depliable__corps > *:last-child { margin-bottom: 0; }

.champ__erreur {
  margin: var(--e-2) 0 0; display: flex; align-items: center; gap: var(--e-2);
  color: var(--refus-texte); font-weight: 600; font-size: var(--t-s);
}

input[type="text"], input[type="tel"], input[type="url"], input[type="email"],
input[type="number"], input[type="month"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: var(--touche);
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-texte);
  font-size: 1rem;                 /* jamais sous 16 px : iOS zoome sinon */
  color: var(--encre);
  background: #fff;
  border: 2px solid rgb(16 18 22 / 0.45);
  border-radius: var(--r-2);
  transition: border-color var(--duree-1), box-shadow var(--duree-1);
}
textarea { min-height: 7em; resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--encre); }
input:focus, select:focus, textarea:focus { border-color: var(--bande); box-shadow: 0 0 0 3px rgb(18 58 140 / 0.18); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--refus-texte); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23101216' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e-3) center;
  padding-right: calc(var(--e-3) * 2 + 20px);
}

.champ-date { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.champ-date select { flex: 1 1 140px; }
.champ-groupe { display: grid; gap: var(--e-4); }
@media (min-width: 620px) { .champ-groupe { grid-template-columns: 1fr 1fr; } }
/* Une case à cocher placée à côté d'un champ n'a pas d'étiquette au-dessus :
   alignée en haut de la rangée, elle flottait 16 px plus haut que le champ.
   Les deux ont la même hauteur de zone tactile, donc caler les bas aligne
   aussi les centres. */
@media (min-width: 620px) {
  .champ-groupe > .champ--case { align-self: end; margin-bottom: var(--e-4); }
}

.champ-radios { border: 0; margin: 0 0 var(--e-4); padding: 0; }
.champ-radio, .champ--case {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche); margin-right: var(--e-4);
  font-family: var(--police-texte); font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: var(--t-base); cursor: pointer;
}
/* Une case à cocher en erreur passe en grille : case et libellé sur la
   première ligne, message d'erreur en dessous sur toute la largeur. En flex,
   le message devenait une troisième colonne et le libellé se cassait en
   trois lignes de deux mots. */
.champ--case:has(.champ__erreur) {
  display: grid; width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center; row-gap: var(--e-2);
}
.champ--case .champ__erreur { grid-column: 1 / -1; margin: 0; }
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px; flex: 0 0 24px; margin: 0;
  accent-color: var(--bande); cursor: pointer;
  /* Sans effet visuel (la case est dessinée par le système), mais le contrôle
     mobile-first mesure la taille de police de TOUS les champs. */
  font-size: 1rem;
}
.champ-piege input { font-size: 1rem; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.resume-erreurs {
  background: #FDECEA; border: 2px solid var(--refus-texte); color: var(--refus-texte);
  border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-5);
}
.resume-erreurs__titre { font-family: var(--police-signal); font-size: var(--t-m); margin: 0 0 var(--e-2); }
.resume-erreurs ul { margin: 0; padding-left: var(--e-5); }
.resume-erreurs a { color: var(--refus-texte); }

.bandeau-succes, .bandeau-avertissement {
  display: flex; gap: var(--e-3); align-items: flex-start;
  border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-5);
  border: 2px solid currentColor;
}
.bandeau-succes { background: #E8F6EE; border-color: var(--controle-texte); color: var(--controle-texte); }
.bandeau-avertissement { background: #FFF6E0; border-color: #8A5A00; color: #8A5A00; }
.bandeau-succes p, .bandeau-avertissement p { color: inherit; }

/* Photos : zone de dépôt et vignettes */
.zone-photos {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-5) var(--e-4);
  text-align: center;
  background: var(--panneau-2);
  border: 2px dashed rgb(16 18 22 / 0.4);
  border-radius: var(--r-3);
  transition: border-color var(--duree-1), background-color var(--duree-1);
}
.zone-photos--survol { border-style: solid; border-color: var(--bande); background: #fff; }
.zone-photos__glisser { margin: 0; color: var(--encre-douce); font-size: var(--t-base); font-weight: 500; }
.zone-photos input[type="file"] { max-width: 100%; font-size: 1rem; }
.zone-photos { cursor: pointer; }
.zone-photos__icone { display: inline-flex; color: var(--bande); }
.zone-photos__glisser { font-family: var(--police-signal); font-size: var(--t-l); letter-spacing: 0.01em; }
.zone-photos__format {
  margin: 0; max-width: 46ch;
  color: var(--encre-douce); font-size: var(--t-s); line-height: 1.5;
}
/* Pendant la préparation : la zone cesse d'inviter au clic et le dit. */
.zone-photos--occupee { cursor: progress; border-style: solid; border-color: var(--bande-clair); opacity: 0.85; }
.zone-photos--occupee .zone-photos__icone { animation: pulse-photo 1s ease-in-out infinite; }
@keyframes pulse-photo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Compte rendu textuel sous la zone : combien de photos, laquelle est en
   couverture, ce qui a été refusé. Il est en aria-live, donc il est lu. */
.etat-photos {
  margin: var(--e-3) 0 0; min-height: 1.5em;
  /* Le compte rendu vit sur la page SOMBRE, pas dans la zone claire : avec
     l'encre douce il était gris sur gris. */
  color: var(--signal); font-size: var(--t-s); line-height: 1.5;
}
.etat-photos:empty { margin-top: 0; min-height: 0; }

/* Bande « au-dessus du plafond » : c'est l'argument d'entrée du site, il a
   droit à un contraste inversé pour ne pas se fondre dans les sections. */
.feuille--plafond {
  border-left: 6px solid var(--hv);
  background: linear-gradient(180deg, var(--panneau) 0%, var(--panneau-2) 100%);
}
.feuille--plafond h2 { margin-top: 0; }
.feuille--plafond p { max-width: 62ch; }
.feuille--plafond__cta { margin-top: var(--e-4); }

.barre-progression {
  margin-top: var(--e-2); height: 6px; overflow: hidden;
  background: rgb(16 18 22 / 0.12); border-radius: 999px;
}
.barre-progression__jauge {
  display: block; width: 0; height: 100%;
  background: var(--bande);
  border-radius: inherit;
  transition: width var(--duree-2) var(--courbe);
}

.grille-vignettes {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.vignette {
  position: relative; display: flex; flex-direction: column; gap: var(--e-2);
  background: #fff; border: 2px solid rgb(16 18 22 / 0.4);
  border-radius: var(--r-3); padding: var(--e-2);
  /* La vignette est un carré BLANC posé dans une page sombre : sans cette
     ligne, son texte héritait de la couleur claire du corps et « Retirer »
     était blanc sur blanc. */
  color: var(--encre);
}
.vignette--principale { border-color: var(--bande); box-shadow: 0 0 0 3px rgb(18 58 140 / 0.18); }
.vignette__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-1); }
.vignette__badge {
  align-self: flex-start;
  background: var(--bande); color: #fff;
  font-family: var(--police-signal); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.15em 0.5em; border-radius: var(--r-1);
}
.vignette__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; }
.vignette__actions .btn { flex: 1 1 auto; }

/* Croix de suppression dans le coin de la vignette, et flèches de classement.
   Le glisser-déposer reste un confort : les flèches font la même chose au
   clavier et au doigt, ce qui est la règle pour toute action de glissement. */
.vignette__croix {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; line-height: 0;
  color: #fff; background: rgb(16 18 22 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px;
  cursor: pointer; transition: background-color var(--duree-1), transform var(--duree-1);
}
.vignette__croix svg { display: block; }
.vignette__croix:hover { background: var(--refus-texte); }
.vignette__croix:active { transform: scale(0.92); }
.vignette__croix:focus-visible { outline: 3px solid var(--hv); outline-offset: 2px; }
/* Les flèches sont des commandes, pas de la décoration : elles reprennent le
   bleu de plaque et le filet d'encre du reste du site. En gris sur gris, elles
   ressemblaient à des boutons désactivés. */
.vignette__fleche {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touche); padding: 0 var(--e-2);
  color: var(--bande); background: #fff;
  border: 2px solid var(--bande); border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--duree-1), color var(--duree-1), transform var(--duree-1);
}
.vignette__fleche:hover { background: var(--bande); color: #fff; }
.vignette__fleche:active { transform: scale(0.94); }
.vignette__fleche:focus-visible { outline: 3px solid var(--hv); outline-offset: 2px; }
/* Une seule flèche (première ou dernière photo) ne s'étire pas sur toute la
   largeur de la vignette : elle garderait la place de deux. */
.vignette__actions { gap: var(--e-2); }
.vignette__actions > .vignette__fleche:only-child { flex: 0 1 50%; }
.vignette[draggable="true"] { cursor: grab; }
.vignette--traine { opacity: 0.45; cursor: grabbing; }
.vignette--cible { border-color: var(--bande); box-shadow: 0 0 0 3px rgb(18 58 140 / 0.3); }
/* Photo marquée pour le retrait : elle reste visible, on peut revenir dessus
   tant que le formulaire n'est pas renvoyé. */
.vignette--retiree { opacity: 0.4; border-color: var(--refus-texte); border-style: dashed; }
.vignette--retiree .vignette__image { filter: grayscale(1); }
.vignette__case { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--touche); font-size: var(--t-s); }
.photos-existantes { margin-bottom: var(--e-5); }

/* ---------- 11. Page d'une fiche ---------- */
.page-fiche { display: grid; gap: var(--e-5); align-items: start; margin-block: var(--e-5) var(--e-3); }
.page-fiche .feuille { margin-bottom: 0; }
@media (min-width: 1000px) { .page-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-6); } }
.page-fiche__pancarte { position: relative; }
@media (min-width: 1000px) { .page-fiche__pancarte { position: sticky; top: 88px; } }
.page-fiche__details { display: flex; flex-direction: column; gap: var(--e-4); }

.galerie-photos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.galerie-photos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--asphalte-3); border-radius: var(--r-3);
}
.description-texte { white-space: pre-line; }
.boutons-contact, .boutons-partage, .boutons-gestion { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.telephone-affiche {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  font-family: var(--police-signal); font-size: var(--t-l); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
/* Le numéro arrive en image : elle se met à l'échelle du texte autour plutôt
   que de garder sa taille de rendu. */
.telephone-image { height: 2.2em; width: auto; border-radius: var(--r-1); }
.feuille--appel { border-left: 6px solid var(--hv); }
.numero-appel {
  font-family: var(--police-signal); font-size: var(--t-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.numero-appel a { color: var(--bande); text-decoration: none; }
.texte-groupe {
  width: 100%; min-height: 9em;
  font-family: var(--police-texte); font-size: 1rem; line-height: 1.5;
  padding: var(--e-3); border: 2px solid rgb(16 18 22 / 0.4); border-radius: var(--r-2);
  background: #fff; color: var(--encre);
}
.feuille--assurance { border-left: 6px solid var(--bande); }
.feuille--pro { border-left: 6px solid var(--hv); }
/* Le bandeau générique est en `flex` pour poser une icône à côté d'un
   paragraphe. Celui-ci a quatre enfants : sans cette règle, ils se rangeaient
   en quatre colonnes de deux mots de large sur téléphone. */
.bandeau-avertissement--garde {
  display: block; border-left-width: 6px;
}
.bandeau-avertissement--garde > * + * { margin-top: var(--e-3); }
.bandeau-avertissement--garde .boutons-partage { margin-bottom: 0; }

/* Le mot « Facebook » garde le bleu de la marque : c'est ce qui le fait
   reconnaître d'un coup d'œil au milieu d'entrées de menu identiques. */
/* Le lien du menu est `inline-flex` : l'espace entre « Groupe » et le mot
   coloré est un nœud de texte que la mise en page en flex supprime. On le
   rétablit par un `gap`, on ne le rend pas avec une espace insécable. */
.nav__facebook { gap: 0.36em; }
.nav__facebook > span { color: #4A90E2; }
.nav a.nav__facebook[aria-current="page"] > span, .nav__facebook:hover > span { color: #7FB2F0; }
.bandeau-avertissement--garde .champ__aide,
.bandeau-avertissement--garde .boutons-partage { color: inherit; }
.bandeau-avertissement--garde .champ__aide { color: inherit; opacity: 0.85; }
.bandeau-avertissement__retour { font-weight: 600; }
/* Un QR se lit par contraste : il lui faut du blanc autour, pas seulement
   derrière ses modules. Posé à même la page sombre, il passait pour gris. */
.cartouche-qr {
  display: inline-flex; padding: var(--e-3);
  background: #fff; border-radius: var(--r-2); box-shadow: var(--ombre-1);
}
.cartouche-qr img { display: block; }
.form-lien-email { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-start; }
.form-lien-email .champ { flex: 1 1 260px; margin-bottom: 0; }
.form-lien-email .btn { margin-top: 2.1rem; }
.liste-guides-liees { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }

/* ---------- 12. Guides ---------- */
.fil-ariane { font-size: var(--t-s); color: var(--signal); margin-bottom: var(--e-3); }
.fil-ariane a { color: var(--bande-clair); }
.guide-entete__chapeau { font-size: var(--t-m); color: var(--signal); max-width: 64ch; }
.guide-entete__date { font-size: var(--t-s); color: var(--signal); }
.guide-contenu { max-width: none; }
.guide-contenu h2 { margin-top: var(--e-6); }
.guide-contenu h3 { margin-top: var(--e-5); }
.guide-contenu ul, .guide-contenu ol { padding-left: var(--e-5); }
.guide-contenu li { margin-bottom: var(--e-2); }
.guide-contenu table { width: 100%; border-collapse: collapse; margin-bottom: var(--e-4); }
.guide-contenu th, .guide-contenu td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--panneau-2); }
.guide-faq__item { border-top: 1px solid var(--panneau-2); padding-top: var(--e-3); margin-top: var(--e-3); }
.guide-sources { font-size: var(--t-s); }
.guide-sources ul { margin-top: var(--e-3); padding-left: var(--e-5); }
.guide-sources li { margin-bottom: var(--e-2); }
.guide-cta { border-left: 6px solid var(--hv); }
.guide-cta .btn { margin-top: var(--e-3); }
.liste-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.liste-guides > li { list-style: none; }
@media (min-width: 760px) { .liste-guides { grid-template-columns: repeat(2, 1fr); } }
/* Carte de guide : un bloc posé sur l'asphalte, pas une liste de liens
   soulignés. Le lien couvre la carte, la soulignure est retirée, le titre
   seul se souligne au survol. */
.carte-guide { height: 100%; }
.carte-guide > a {
  display: flex; flex-direction: column; gap: var(--e-2); height: 100%;
  padding: var(--e-4);
  background: var(--asphalte-2);
  border: 1px solid var(--asphalte-3);
  border-left: 4px solid var(--bande);
  border-radius: var(--r-3);
  color: var(--panneau); text-decoration: none;
  box-shadow: var(--ombre-1);
  transition: transform var(--duree-2) var(--courbe), border-color var(--duree-2), box-shadow var(--duree-2);
}
.carte-guide > a:hover { transform: translateY(-2px); border-left-color: var(--hv); box-shadow: var(--ombre-2); }
.carte-guide > a:active { transform: translateY(0) scale(0.995); }
.carte-guide h2 { font-size: var(--t-m); margin: 0; color: var(--panneau); }
.carte-guide > a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.carte-guide p { color: var(--signal); font-size: var(--t-s); margin: 0; }
.carte-guide__date { font-size: var(--t-xs); color: var(--signal); opacity: 0.8; margin: auto 0 0; }
.guide-autres { margin-top: var(--e-6); }

/* ---------- 13. Tableaux et admin ---------- */
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-admin { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau-admin th, .tableau-admin td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--panneau-2); white-space: nowrap; }
.tableau-admin th { font-family: var(--police-signal); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-entete { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; }
.admin-compteurs { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--e-5); }
.admin-compteur { background: var(--asphalte-2); border: 1px solid var(--asphalte-3); border-radius: var(--r-3); padding: var(--e-4); }
.admin-compteur__valeur { display: block; font-family: var(--police-signal); font-size: var(--t-xl); font-variant-numeric: tabular-nums; color: var(--hv); }
.admin-compteur__label { font-size: var(--t-xs); color: var(--signal); text-transform: uppercase; letter-spacing: 0.04em; }
.liste-admin { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.form-inline { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

/* ---------- 14. Pied de page ---------- */
.site-footer { margin-top: var(--e-6); border-top: 1px solid var(--asphalte-3); background: rgb(30 34 40 / 0.6); }
@media (min-width: 720px) { .site-footer { margin-top: var(--e-7); } }
.site-footer__inner { padding-block: var(--e-6); display: grid; gap: var(--e-5); }
@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer__col--marque .logo__img { height: 26px; }
.site-footer__baseline { color: var(--signal); font-size: var(--t-s); margin-top: var(--e-2); }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--panneau); text-decoration: none; }
.site-footer__nav a:hover { color: var(--hv); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__separateur { border: 0; border-top: 1px solid var(--asphalte-3); margin: 0; }
.site-footer__meta, .site-footer__meta-col { color: var(--signal); font-size: var(--t-s); }

/* ---------- 15. Utilitaires ---------- */
.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;
}
[hidden] { display: none !important; }
.icone { flex: 0 0 auto; }
.hide-sm { display: none; }
@media (min-width: 620px) { .hide-sm { display: revert; } }
/* Article : une colonne de lecture centrée. À 1280 px, une feuille de 70ch
   calée à gauche laissait la moitié de l'écran vide. */
/* Les pages de contenu occupent la largeur courante du site : il n'y a aucun
   bloc à droite, et 260 px de vide de chaque côté donnaient une page qui
   semblait tronquée. La LIGNE DE TEXTE, elle, reste bornée à une longueur
   lisible : au-delà d'une soixantaine de caractères, l'œil perd sa ligne en
   revenant à la marge. La feuille s'élargit, le paragraphe non. */
/* Les pages de contenu occupent la largeur courante du site : il n'y a aucun
   bloc à droite, et 260 px de vide de chaque côté donnaient une page qui
   semblait tronquée. La colonne de LECTURE, elle, est bornée une seule fois,
   sur le bloc lui-même : borner chaque paragraphe laissait une feuille blanche
   large avec un texte étroit collé à gauche, ce qui ressemblait à un défaut. */
main > .section--guide, main > .section--legal { width: min(100% - 2 * var(--e-4), var(--colonne)); }
.section--guide > *, .section--legal > * { max-width: 62rem; margin-inline: auto; }
.section--guide .guide-contenu, .section--legal .feuille { max-width: 62rem; }
.section--guide .guide-contenu > *, .section--legal .feuille > * { max-width: none; }

/* Chaque bloc de la page respire : sans cela, « Sources » collait à la FAQ et
   l'appel à l'action au bloc du dessus. */
.section--guide > section { margin-top: var(--e-6); }
.guide-sources h2, .guide-cta h2 { margin-top: 0; }

/* ---------- 15 quater. Suggestions de villes ---------- */
/* Liste maison plutôt qu'un <datalist> : le menu natif ne s'affiche pas de
   façon fiable sur téléphone ni sur un champ de recherche. */
.combo { position: relative; }
.combo > input { width: 100%; }
.combo__liste {
  position: absolute; z-index: var(--z-tiroir);
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  margin: 0; padding: var(--e-1); list-style: none;
  background: #fff; color: var(--encre);
  border: 2px solid var(--encre); border-radius: var(--r-3);
  box-shadow: var(--ombre-3);
}
.combo__option {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  min-height: var(--touche); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-1); cursor: pointer;
}
.combo__option:hover, .combo__option--actif { background: var(--bande); color: #fff; }
.combo__nom { font-weight: 600; }
.combo__repere { font-size: var(--t-s); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.combo__option:hover .combo__repere, .combo__option--actif .combo__repere { color: rgb(255 255 255 / 0.85); }

/* ---------- 15 ter. Petite fenêtre ---------- */
.popin-ouverte, .popin-ouverte body { overflow: hidden; }
.popin {
  position: fixed; inset: 0; z-index: var(--z-visionneuse);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-4);
  background: rgb(10 11 13 / 0.72);
  backdrop-filter: blur(4px);
}
.popin__boite {
  position: relative;
  width: min(100%, 460px); max-height: calc(100dvh - 2 * var(--e-4)); overflow-y: auto;
  background: var(--panneau); color: var(--encre);
  border: 2px solid var(--encre); border-radius: var(--r-4);
  box-shadow: var(--ombre-3); padding: var(--e-5);
}
.popin__boite h2 { margin-top: 0; color: var(--encre); }
.popin__boite p { color: var(--encre); }
.popin__fermer {
  position: absolute; top: var(--e-3); right: var(--e-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  font-family: var(--police-texte); font-size: 24px; line-height: 1;
  color: var(--encre); background: transparent;
  border: 1px solid rgb(16 18 22 / 0.3); border-radius: 999px; cursor: pointer;
}
.popin__fermer:hover { background: var(--panneau-2); }
.popin__fermer:focus-visible { outline: 3px solid var(--bande); outline-offset: 2px; }

/* ---------- 15 bis. Visionneuse de photos ---------- */
.photo-zoomable { cursor: zoom-in; }
.photo-zoomable:focus-visible { outline: 3px solid var(--hv); outline-offset: 3px; }

.visionneuse-ouverte, .visionneuse-ouverte body { overflow: hidden; }

.visionneuse {
  position: fixed; inset: 0; z-index: var(--z-visionneuse);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  /* Presque noir plutôt que noir : la photo garde ses noirs à elle. */
  background: rgb(10 11 13 / 0.94);
  backdrop-filter: blur(6px);
}

.visionneuse__scene {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 0;
  overflow: hidden;
}
.visionneuse__image {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-2);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}
.visionneuse__image--entre-droite { animation: glisse-droite var(--duree-2) var(--courbe) both; }
.visionneuse__image--entre-gauche { animation: glisse-gauche var(--duree-2) var(--courbe) both; }
@keyframes glisse-droite { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes glisse-gauche { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }

.visionneuse__fermer, .visionneuse__nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touche); min-height: var(--touche);
  color: var(--panneau);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--duree-1), transform var(--duree-1);
}
.visionneuse__fermer:hover, .visionneuse__nav:hover { background: rgb(255 255 255 / 0.2); }
.visionneuse__fermer:active, .visionneuse__nav:active { transform: scale(0.94); }
.visionneuse__fermer:focus-visible, .visionneuse__nav:focus-visible { outline: 3px solid var(--hv); outline-offset: 2px; }

.visionneuse__fermer { position: absolute; top: var(--e-3); right: var(--e-3); }
.visionneuse__nav { grid-row: 1; z-index: 1; }
.visionneuse__nav--gauche { grid-column: 1; justify-self: start; }
.visionneuse__nav--droite { grid-column: 3; justify-self: end; }

.visionneuse__pied {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-6) 0;
  text-align: center;
}
.visionneuse__legende { margin: 0; color: var(--panneau); font-size: var(--t-s); }
.visionneuse__compteur {
  margin: 0; color: var(--hv);
  font-family: var(--police-signal); font-size: var(--t-s);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- 16. Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .grille-pancartes > li { animation: apparait var(--duree-2) var(--courbe) both; }
  .grille-pancartes > li:nth-child(1) { animation-delay: 0ms; }
  .grille-pancartes > li:nth-child(2) { animation-delay: 40ms; }
  .grille-pancartes > li:nth-child(3) { animation-delay: 80ms; }
  .grille-pancartes > li:nth-child(4) { animation-delay: 120ms; }
  .grille-pancartes > li:nth-child(5) { animation-delay: 160ms; }
  .grille-pancartes > li:nth-child(n+6) { animation-delay: 200ms; }
}
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- 17. Impression : la fiche doit sortir propre sur une feuille ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .boutons-partage, .boutons-gestion, .burger, .feuille--assurance { display: none; }
  .feuille, .pancarte { box-shadow: none; border-color: #000; }
}

/* Badge : les deux icônes sont rendues, le CSS montre celle de l'état. */
.badge--ok .coche-non, .badge--absent .coche-oui { display: none; }

/* ---------- 18. Marque ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--panneau); }
/* La plaque se cale sur le centre OPTIQUE des capitales, pas sur le centre de
   la boîte de ligne : Oswald laisse de l'air au-dessus de ses capitales, et la
   plaque paraissait montée d'un cheveu. Correction mesurée au navigateur
   (0,8 px pour un nom à 1,28 rem), exprimée dans l'em du NOM pour qu'elle
   suive toutes les tailles. */
.logo__mark {
  display: inline-flex; font-size: 1.28rem; transform: translateY(0.04em);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5));
}
.site-footer .logo__mark { font-size: 1.1rem; }
.logo__mot {
  font-family: var(--police-signal); font-weight: 700; font-size: 1.28rem;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
}
.logo__mot-2 { color: var(--hv); }
.site-footer .logo__mot { font-size: 1.1rem; }

/* Navigation : les types de véhicule n'existent que dans le tiroir mobile. */
.nav__types-mobile { display: contents; }
@media (min-width: 1000px) { .nav__types-mobile { display: none; } }
.nav { flex-wrap: nowrap; }
.site-header__inner { flex-wrap: nowrap; }
.site-header__actions .btn { white-space: nowrap; }
@media (max-width: 999px) { .site-header__actions { display: none; } }

/* Carte cliquable : le lien enveloppe le panneau sans changer son apparence. */
.carte-lien { display: block; text-decoration: none; color: inherit; height: 100%; border-radius: var(--r-4); }
.carte-lien:focus-visible { outline: 3px solid var(--hv); outline-offset: 3px; }
.grille-pancartes > li { list-style: none; }