/* K&N Mobility — site public (accueil, recherche, fiche, devis, espace
   client). Mobile d'abord (CONVENTIONS.md) : la mise en page de base ICI
   est celle d'un téléphone, élargie ensuite pour un grand écran — pas
   l'inverse. Toujours utilisable sans JavaScript (aucun script chargé sur
   ces pages) : le style seul porte toute la mise en avant visuelle —
   pas d'effet qui dépendrait d'une classe posée en JS.

   Refonte du 26/08/2026 (accord Michael : « rendre l'appli plus jolie et
   conviviale, s'inspirer des sites concurrents — Turo, GetAround, Avis —
   en mieux »). Toujours zéro dépendance externe : pas de police Google,
   pas d'icônes CDN — uniquement des SVG en ligne (rares, dans le HTML
   généré par server.js) ou en masque CSS (icônes de la barre de
   confiance ci-dessous), pour rester 100% autonome. */

:root {
  --bleu: #0483D2;
  --bleu-fonce: #04568C;
  --bleu-clair: #E8F4FC;
  --jaune: #FCC302;
  --vert: #0C8F44;
  --rouge: #C0392B;
  --texte: #16212C;
  --gris-texte: #5B6770;
  --fond: #FFFFFF;
  --gris-fond: #F4F6F8;
  --gris-fond-fonce: #EAEEF1;
  --bordure: #DEE3E7;
  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgba(16,32,45,.06), 0 6px 20px -8px rgba(16,32,45,.18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* évite le zoom auto iOS sur les champs */
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--bleu-fonce); }
img { max-width: 100%; display: block; }

/* ── Bandeau ──────────────────────────────────────────────────────── */
.site-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.site-marque { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--bleu-fonce); text-decoration: none; font-size: 1.08rem; letter-spacing: -.01em; }
.site-marque .pastille { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce)); flex-shrink: 0; }
.site-langues { font-size: .8rem; }
.site-langues a { color: var(--gris-texte); text-decoration: none; padding: 4px 5px; font-weight: 600; }
.site-langues a.actif { color: var(--bleu); }

/* ── Héros + recherche (accueil) ─────────────────────────────────── */
.site-hero {
  background: linear-gradient(165deg, var(--bleu-fonce), var(--bleu) 65%);
  color: #fff;
  padding: 34px 18px 90px;
  margin: -1px -18px 0;
  position: relative;
  overflow: hidden;
}
.site-hero::after { /* motif discret, purement décoratif, en CSS seul */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 88% 18%, rgba(255,255,255,.14) 0, transparent 45%),
                     radial-gradient(circle at 8% 92%, rgba(252,195,2,.18) 0, transparent 40%);
  pointer-events: none;
}
.site-hero h1 { position: relative; font-size: 1.5rem; margin: 4px 0 6px; letter-spacing: -.01em; }
.site-hero p.accroche { position: relative; margin: 0; color: rgba(255,255,255,.86); font-size: .95rem; }

.carte-recherche {
  position: relative;
  background: #fff;
  color: var(--texte);
  border-radius: var(--rayon);
  box-shadow: 0 20px 40px -18px rgba(4,45,75,.45);
  padding: 18px;
  margin: 22px -4px -68px;
}
.site-contenu { padding: 16px; max-width: 720px; margin: 0 auto; }
.site-contenu.pousse-hero { padding-top: 84px; }
.site-pied { text-align: center; color: var(--gris-texte); font-size: .8rem; padding: 32px 16px 40px; border-top: 1px solid var(--bordure); margin-top: 32px; }
.site-pied a { color: var(--gris-texte); }

h1 { font-size: 1.3rem; margin: 4px 0 16px; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 26px 0 12px; letter-spacing: -.01em; }

/* ── Barre de confiance (accueil) — icônes en masque CSS, zéro image ── */
.barre-confiance { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 6px; }
.item-confiance { display: flex; align-items: flex-start; gap: 12px; }
.item-confiance .icone {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bleu-clair); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.item-confiance .icone svg { width: 20px; height: 20px; stroke: var(--bleu-fonce); }
.item-confiance strong { display: block; font-size: .9rem; }
.item-confiance span { color: var(--gris-texte); font-size: .82rem; }

/* ── Formulaires — grandes cibles tactiles, colonne unique ───────── */
form label { display: block; font-size: .83rem; color: var(--gris-texte); font-weight: 600; margin-bottom: 14px; }
.carte-recherche form label { margin-bottom: 10px; }
form input[type=date], form input[type=email], form input[type=password], form input[type=text],
form input[type=number], form select {
  display: block; width: 100%; margin-top: 5px; padding: 12px 13px; font-size: 1rem;
  font-family: inherit; color: var(--texte);
  border: 1.5px solid var(--bordure); border-radius: var(--rayon-petit); background: #fff;
}
form input:focus, form select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-clair); }
form fieldset { border: none; padding: 0; margin: 0 0 14px; display: flex; gap: 10px; }
form fieldset label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  padding: 11px 8px; border: 1.5px solid var(--bordure); border-radius: var(--rayon-petit); font-weight: 600; font-size: .85rem; color: var(--texte);
}
form fieldset input { width: auto; margin: 0; accent-color: var(--bleu); }
form fieldset label:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); }
button, input[type=submit] {
  display: block; width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; font-family: inherit;
  background: var(--bleu); color: #fff; border: none; border-radius: var(--rayon-petit); cursor: pointer;
  transition: background .12s;
}
button:hover, input[type=submit]:hover { background: var(--bleu-fonce); }
button:active { transform: translateY(1px); }
.carte-recherche button { margin-top: 4px; }

/* ── Grille de véhicules (accueil + résultats) ───────────────────── */
.grille-vehicules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.carte-vehicule {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.carte-vehicule:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.carte-vehicule .visuel {
  aspect-ratio: 16/10; background: linear-gradient(160deg, var(--gris-fond), var(--gris-fond-fonce));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.carte-vehicule .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-vehicule .visuel svg { width: 34%; opacity: .28; }
.carte-vehicule .detail { padding: 13px 14px 15px; }
.carte-vehicule .titre { font-weight: 700; font-size: 1rem; margin: 0 0 4px; }
.carte-vehicule .meta { color: var(--gris-texte); font-size: .82rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.puce { display: inline-block; padding: 2px 9px; border-radius: 100px; background: var(--gris-fond); font-size: .74rem; font-weight: 600; color: var(--gris-texte); }
.puce.categorie { background: var(--bleu-clair); color: var(--bleu-fonce); }

.message-vide { color: var(--gris-texte); background: var(--gris-fond); border-radius: var(--rayon); padding: 28px 20px; text-align: center; font-size: .92rem; }

/* ── Fiche véhicule ───────────────────────────────────────────────── */
.galerie { margin-bottom: 6px; }
.galerie .photo-principale {
  aspect-ratio: 16/10; border-radius: var(--rayon); overflow: hidden; background: linear-gradient(160deg, var(--gris-fond), var(--gris-fond-fonce));
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.galerie .photo-principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie .photo-principale svg { width: 30%; opacity: .25; }
.galerie .miniatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.galerie .miniatures img { aspect-ratio: 1/1; object-fit: cover; border-radius: var(--rayon-petit); border: 1px solid var(--bordure); }

.fil-ariane { font-size: .82rem; color: var(--gris-texte); margin-bottom: 8px; }
.fil-ariane a { color: var(--gris-texte); text-decoration: none; }
.entete-fiche { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.entete-fiche h1 { margin: 0; }
.colonne-devis { margin-top: 26px; padding: 18px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; }

table.fiche-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
table.fiche-table td { padding: 9px 4px; border-bottom: 1px solid var(--bordure); font-size: .93rem; }
table.fiche-table td:first-child { color: var(--gris-texte); }
ul.liste-equipements { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.liste-equipements li { background: var(--gris-fond); border-radius: 100px; padding: 5px 12px; font-size: .82rem; }

.devis { margin-top: 22px; padding: 18px; background: var(--gris-fond); border-radius: var(--rayon); }
.devis table { width: 100%; border-collapse: collapse; }
.devis td { padding: 6px 2px; font-size: .92rem; }
.devis tr.total td { font-weight: 700; font-size: 1.02rem; border-top: 1px solid var(--bordure); padding-top: 10px; }
.devis .caution-note { font-size: .82rem; color: var(--gris-texte); }
.devis .cta-bientot { margin-top: 12px; padding: 10px; background: #FEF3D6; border-radius: 8px; font-size: .88rem; }
.devis .cta-reserver { margin-top: 12px; }
.devis .cta-reserver button { width: 100%; }
a.bouton-lien { display: block; text-align: center; padding: 14px; background: var(--bleu); color: #fff; border-radius: var(--rayon-petit); text-decoration: none; font-weight: 700; }
a.bouton-lien:hover { background: var(--bleu-fonce); }
.contact-note { font-size: .82rem; color: var(--gris-texte); margin-top: 10px; }

/* ── Lot 9 — espace client authentifié (connexion, inscription...) ── */
p.erreur { background: #FBE0DD; color: #C0392B; padding: 10px 14px; border-radius: var(--rayon-petit); }
p.ok { background: #DDF0E4; color: var(--vert); padding: 10px 14px; border-radius: var(--rayon-petit); }
table.liste-simple { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.liste-simple td, table.liste-simple th { padding: 10px 6px; border-bottom: 1px solid var(--bordure); text-align: left; font-size: .92rem; }
table.liste-simple th { color: var(--gris-texte); font-size: .78rem; text-transform: uppercase; }

.conditions { font-size: .82rem; color: var(--gris-texte); white-space: pre-line; }

/* ── Écran large ─────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .site-entete { padding: 16px 32px; }
  .site-hero { padding: 46px 32px 110px; margin: -1px -32px 0; }
  .site-hero h1 { font-size: 2rem; }
  .site-contenu { padding: 24px 32px; max-width: 1180px; }
  form fieldset { gap: 14px; }
  button, input[type=submit] { width: auto; padding: 12px 30px; }
  .carte-recherche { padding: 22px; margin: 28px auto -74px; max-width: 620px; }
  .carte-recherche form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .carte-recherche fieldset { grid-column: 1 / -1; }
  .carte-recherche button { grid-column: 1 / -1; width: 100%; }
  .grille-vehicules { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .barre-confiance { grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .fiche-mise-en-page { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
  .fiche-mise-en-page .colonne-devis { position: sticky; top: 84px; margin-top: 0; }
  .galerie .photo-principale { aspect-ratio: 16/9; }
}
@media (min-width: 980px) { .grille-vehicules { grid-template-columns: repeat(4, 1fr); } }