/* Pages publiques (legal, service, navigation).
   Distinct de style.css, qui habille l'outil interne (connexion +
   tableau de bord) : ces pages-ci s'adressent aux clients, aux chauffeurs
   et aux autorités, pas aux dix entreprises partenaires.

   AUCUNE POLICE NI RESSOURCE EXTERNE — volontairement. Charger Inter
   depuis Google Fonts ferait partir une requête vers un tiers à chaque
   visite, y compris sur la page qui promet qu'aucun tiers ne piste le
   visiteur. La pile système rend très bien et ne ment pas. */

:root {
  --encre: #0f1729;
  --encre-douce: #4b5563;
  --accent: #1a56db;
  --accent-sombre: #1442ab;
  --accent-pale: #eef2ff;
  --bord: #e5e7eb;
  --fond: #ffffff;
  --fond-doux: #f7f8fa;
  --alerte: #b91c1c;
  --alerte-pale: #fee2e2;
  --largeur: 1080px;
  --largeur-texte: 680px;
  --rayon: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-sombre); }

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- En-tête ---------- */

.site-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}

.site-entete .conteneur {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}

.marque img {
  display: block;
  flex: none;
}

.site-nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--accent); }

.langues {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.85rem;
}

.langues a {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--encre-douce);
}

.langues a[aria-current="true"] {
  background: var(--accent-pale);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--accent-pale), var(--fond));
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--bord);
}

.hero .surtitre {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

.hero .chapeau {
  font-size: 1.1rem;
  color: var(--encre-douce);
  margin: 0;
  max-width: var(--largeur-texte);
}

.maj {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--encre-douce);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* ---------- Contenu ---------- */

.contenu {
  padding: 3rem 0 4rem;
}

.prose { max-width: var(--largeur-texte); }

.prose h2 {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.5rem;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

.prose p, .prose li { color: #24303f; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: 0.35rem 0; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.93rem;
}

.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}

.prose th {
  background: var(--fond-doux);
  font-weight: 600;
}

.prose code {
  background: var(--fond-doux);
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.88em;
}

/* ---------- Encadrés ---------- */

.encadre {
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  background: var(--fond-doux);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
}

.encadre p:first-child { margin-top: 0; }
.encadre p:last-child { margin-bottom: 0; }

.encadre.avertissement {
  border-left-color: var(--alerte);
  background: var(--alerte-pale);
}

.encadre .titre-encadre {
  font-weight: 700;
  display: block;
  margin-bottom: 0.35rem;
}

/* ---------- Cartes ---------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.75rem 0;
}

.carte {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem;
  background: var(--fond);
}

.carte h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.carte p { margin: 0; color: var(--encre-douce); font-size: 0.95rem; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  cursor: pointer;
}

.bouton:hover { background: var(--accent-sombre); color: #fff; }

.bouton.secondaire {
  background: var(--fond);
  color: var(--accent);
}

.bouton.secondaire:hover { background: var(--accent-pale); color: var(--accent-sombre); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

/* ---------- Formulaire ---------- */

.form-bloc {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.5rem;
  background: var(--fond-doux);
  max-width: var(--largeur-texte);
}

.form-bloc label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 1rem 0 0.3rem;
}

.form-bloc input,
.form-bloc textarea,
.form-bloc select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cbd2dd;
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: var(--fond);
}

.form-bloc .aide {
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin: 0.3rem 0 0;
}

/* ---------- Pied ---------- */

.site-pied {
  border-top: 1px solid var(--bord);
  background: var(--fond-doux);
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}

.pied-grille h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  margin: 0 0 0.75rem;
}

.pied-grille ul { list-style: none; margin: 0; padding: 0; }
.pied-grille li { margin: 0.4rem 0; }

.pied-grille a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.92rem;
}

.pied-grille a:hover { color: var(--accent); text-decoration: underline; }

.pied-intro p {
  margin: 0.5rem 0 0;
  color: var(--encre-douce);
  font-size: 0.92rem;
  max-width: 34ch;
}

.pied-bas {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bord);
  font-size: 0.85rem;
  color: var(--encre-douce);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.lien-bouton {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
}

.lien-bouton:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Bannière cookies ---------- */

.banniere-cookies {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  left: 1rem;
  max-width: 420px;
  margin-left: auto;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(15, 23, 41, 0.14);
  padding: 1.15rem 1.25rem;
  z-index: 40;
  font-size: 0.92rem;
}

.banniere-cookies h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.banniere-cookies p { margin: 0 0 0.9rem; color: var(--encre-douce); }
.banniere-cookies[hidden] { display: none; }

@media (max-width: 860px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Deux lignes, pas trois : la marque seule en haut, puis les liens et
     FR / EN sur la même rangée (demande de Déo, 26.09.2026). La marque
     prend toute la largeur pour forcer le retour à la ligne ; le HTML garde
     son ordre logique pour les lecteurs d'écran. */
  .site-entete .conteneur { flex-wrap: wrap; min-height: 0; gap: 0.4rem 0.75rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .site-entete .marque { flex-basis: 100%; }
  .site-nav { margin-left: 0; gap: 0.9rem; flex-wrap: nowrap; }
  .site-nav a { font-size: 0.9rem; white-space: nowrap; }
  .langues { margin-left: auto; }
  .pied-grille { grid-template-columns: 1fr; }
}

/* Très petits écrans (320 px) : on resserre juste assez pour que FR / EN
   reste sur la ligne des liens au lieu de passer dessous. */
@media (max-width: 350px) {
  .site-entete .conteneur { column-gap: 0.4rem; }
  .site-nav { gap: 0.6rem; }
  .site-nav a { font-size: 0.84rem; }
  .langues a { padding: 0.2rem 0.35rem; }
}

/* ================================================================
   PAGE D'ACCUEIL
   Gabarit pleine largeur, distinct des pages de contenu : celles-ci
   sont faites pour être lues d'un bout à l'autre, celle-là pour être
   parcourue et donner envie de cliquer.
   ================================================================ */

.accueil-hero {
  /* Le quai de Genève à l'heure bleue, le Jet d'eau à gauche (image générée
     le 27.09.2026, choix de Déo, voir scripts/genererVisuels.mjs) ; par-
     dessus, sur grand écran, la même scène filmée — la vidéo part de cette
     image exacte, le passage de l'une à l'autre ne se voit pas.

     L'image est sombre : le texte passe en blanc, et un voile bleu nuit en
     dégradé, plus dense à gauche où se trouve le titre, garantit sa
     lisibilité même sur les reflets du lac. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0d1b2e url("/medias/accueil-geneve-vs.jpg") center / cover no-repeat;
  color: #fff;
  padding: 4.5rem 0 9rem;
}

.accueil-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 18, 34, 0.78), rgba(8, 18, 34, 0.45) 55%, rgba(8, 18, 34, 0.1) 85%),
    linear-gradient(0deg, rgba(8, 18, 34, 0.35), rgba(8, 18, 34, 0) 40%);
}

.accueil-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.accueil-hero h1 em { color: #8fb4ff; }
.accueil-hero .chapeau { color: rgba(255, 255, 255, 0.86); }
.accueil-hero .recherche { color: var(--encre); }
.accueil-hero .surtitre {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.accueil-hero .surtitre::before { background: #8fb4ff !important; }
.accueil-hero .bouton.secondaire {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
}
.accueil-hero .bouton.secondaire:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-video.lance { opacity: 1; }



.accueil-hero .surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.accueil-hero .surtitre::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.accueil-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 1.1rem;
  /* Assez large pour que les deux lignes du <br> tiennent telles quelles :
     un max-width plus court ferait re-casser chaque ligne au milieu, et le
     titre partirait en quatre morceaux bancals. En dessous de cette largeur
     le retour naturel reprend la main, ce qui est le comportement voulu sur
     téléphone. */
  max-width: 28ch;
}

.accueil-hero h1 em {
  font-style: normal;
}

.accueil-hero .chapeau {
  font-size: 1.15rem;
  max-width: 54ch;
  margin: 0;
}

.accueil-hero .note {
  font-size: 0.88rem;
  color: var(--encre-douce);
  margin: 1rem 0 0;
}

.bouton.grand {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
}

/* ---------- Bandeau de faits ---------- */

.bandeau {
  border-bottom: 1px solid var(--bord);
  background: var(--fond);
}

.bandeau-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bord);
  border-left: 1px solid var(--bord);
  border-right: 1px solid var(--bord);
}

.bandeau-grille > div {
  background: var(--fond);
  padding: 1.75rem 1.5rem;
}

.bandeau-grille .valeur {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.bandeau-grille p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

/* ---------- Sections ---------- */

.section {
  padding: 4.5rem 0;
}

.section.doux {
  background: var(--fond-doux);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.section-entete {
  max-width: 58ch;
  margin-bottom: 2.5rem;
}

.section-entete .etiquette {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.section-entete h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.section-entete p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 1.05rem;
}

/* ---------- Atouts ---------- */

.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}

.atout {
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.atout .puce {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-pale);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}

.atout h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.atout p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

/* ---------- Étapes ---------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  counter-reset: etape;
}

.etape {
  counter-increment: etape;
  position: relative;
  padding-top: 3.25rem;
}

.etape::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.etape h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.etape p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

/* ---------- Section partagée ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.duo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.duo li {
  position: relative;
  padding-left: 1.85rem;
  margin: 0.7rem 0;
  color: var(--encre-douce);
}

.duo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
}

/* ---------- Appel final ---------- */

.cta-final {
  background: var(--encre);
  color: #fff;
  padding: 4rem 0;
}

.cta-final h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  max-width: 20ch;
}

.cta-final p {
  color: #a9b4c4;
  margin: 0;
  max-width: 52ch;
  font-size: 1.05rem;
}

.cta-final .bouton.secondaire {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.cta-final .bouton.secondaire:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 2rem; }
  .bandeau-grille { grid-template-columns: 1fr; }
  .section { padding: 3.25rem 0; }
  /* Sur téléphone, la photo seule : la vidéo n'est pas chargée
     (public/animations.js), pour épargner le forfait de données. */
  .accueil-hero {
    padding: 3rem 0 7rem;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaire de trajet en tête de page d'accueil — 24.09.2026.
   Inspiré des comparateurs de transfert : la première chose qu'on voit
   n'est pas un discours, c'est le champ où l'on tape son départ.

   Habillé depuis le 16.10.2026 comme l'étape 1 de la réservation (demande
   de Déo) : ses règles sont dans reservation.css, section « L'accueil ».
   Restent ici la note sous le bouton et le prix calculé sur place. */
.recherche-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

/* Le prix rendu par /devis, affiché sous le formulaire de trajet. */
.devis {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond-doux);
}

.devis-prix {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.devis-erreur {
  border-color: var(--alerte);
  background: var(--alerte-pale);
  color: var(--alerte);
}

.devis-montant {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
}

.devis-etiquette {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.devis-montant strong {
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  letter-spacing: -0.03em;
  color: var(--encre);
}

.devis-details {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.devis-details .bouton {
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ */
/* Le nom en deux couleurs — décision du 24.09.2026.
   « Val » dans l'encre du texte, « Transfer » dans le bleu de la marque,
   collés sans espace. Les deux couleurs viennent des variables du site :
   le jour où la charte change, le logotype suit. */
.mot-marque {
  display: inline;
  white-space: nowrap;
}

.mot-val {
  color: var(--encre);
}

.mot-transfer {
  color: var(--accent);
}

/* Rien de particulier pour le pied de page : son fond est clair
   (`--fond-doux`), les deux couleurs y tiennent telles quelles. J'avais
   d'abord écrit une surcharge pour fond sombre — elle aurait mis « Val » en
   blanc sur blanc. Vérifier la couleur de fond avant de la compenser.

   Si le pied passe un jour en sombre, c'est ici qu'il faudra deux valeurs
   claires, pas dans les règles ci-dessus. */

/* ---------- Réservation (reserver.html, reserver.js) ---------- */
.reservation { display: grid; gap: 1.25rem; }
.reservation .form-bloc h2 { margin-top: 0; }
.reservation .message-erreur { color: var(--alerte); background: var(--alerte-pale); padding: 0.6rem 0.8rem; border-radius: 8px; }
.reservation .quand { border: 0; padding: 0; margin: 1rem 0 0; }
.reservation .quand legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.reservation .choix { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.2rem; font-weight: 400; }
.reservation .choix input { width: auto; }
.reservation .case { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin-top: 1rem; }
.reservation .case input { width: auto; margin-top: 0.3rem; }
.reservation .bouton { margin-top: 1rem; border: 0; cursor: pointer; font: inherit; }
.reservation .bouton:disabled { opacity: 0.6; cursor: wait; }
.reservation .devis-montant { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 0.2rem; }
#r-element-carte { margin: 1rem 0; }
.reservation .chauffeur-nom { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.2rem; }
#r-suivi-chauffeur { background: var(--accent-pale); border-radius: var(--rayon); padding: 1rem 1.2rem; margin: 1rem 0; }

/* ------------------------------------------------------------------ */
/* Nos véhicules — 27.09.2026. Trois cartes, un bouton chacune.
   Van et Premium se réservent par téléphone tant que la réservation en
   ligne ne connaît qu'une seule catégorie : un bouton « Réservez » qui
   mènerait au formulaire enverrait n'importe quel véhicule. */
.vehicules-grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.vehicule {
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 14px 34px -26px rgba(15, 23, 41, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vehicule:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(15, 23, 41, 0.55);
}

.vehicule img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.vehicule:hover img { transform: scale(1.04); }

.vehicule-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.25rem 1.4rem;
}

.vehicule-texte h3 { margin: 0 0 0.2rem; font-size: 1.25rem; }

.vehicule-capacite {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.vehicule-texte p { margin: 0 0 1rem; }

.vehicule-texte .bouton {
  margin-top: auto;
  align-self: flex-start;
}

.vehicule-note {
  margin: 0.6rem 0 0 !important;
  font-size: 0.82rem;
  color: var(--encre-douce);
}

/* Apparition au défilement — posée par public/animations.js seulement :
   sans script, rien n'est jamais caché. */
.anime .apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anime .apparait.visible {
  opacity: 1;
  transform: none;
}

.anime .vehicules-grille .apparait:nth-child(2) { transition-delay: 0.1s; }
.anime .vehicules-grille .apparait:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .anime .apparait { opacity: 1; transform: none; transition: none; }
  .vehicule, .vehicule img, .hero-video { transition: none; }
  .vehicule:hover, .vehicule:hover img { transform: none; }
}

/* Accueil sur grand écran : le texte se resserre à gauche, pour laisser
   voir la voiture du quai à droite de l'image (le formulaire, lui, est
   borné dans reservation.css). */
@media (min-width: 1000px) {
  .accueil-hero .chapeau { max-width: 46ch; }
}

/* Choix du véhicule sur la page de réservation — 27.09.2026. */
.choix-categories {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 0.75rem;
}

/* `.form-bloc` devant : ses règles génériques (label en bloc, champs en
   pleine largeur) l'emporteraient sinon, et le rond se retrouverait seul
   au-dessus du texte (constaté le 29.09.2026). */
.form-bloc .choix-categorie {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.choix-categorie:hover { border-color: var(--accent); }

.choix-categorie.choisie {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.choix-categorie.indisponible {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-bloc .choix-categorie {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.form-bloc .choix-categorie input { width: auto; flex: none; padding: 0; accent-color: var(--accent); margin: 0; }

.choix-categorie-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.3;
}

.choix-categorie-detail { font-size: 0.85rem; color: var(--encre-douce); }

.choix-categorie-prix { font-weight: 700; white-space: nowrap; }

.vehicule-prix {
  margin: -0.4rem 0 1rem !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--encre);
}

/* Offre « Partenaires fondateurs » — 28.09.2026, partenairesFondateurs.ts. */
.offre-fondateurs {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  border: 2px dashed var(--accent);
  border-radius: var(--rayon);
  background: var(--accent-pale);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.offre-fondateurs p { margin: 0 0 .6rem; }
.offre-fondateurs p:last-child { margin: 0; }
.offre-fondateurs-pct {
  flex: none;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 560px) { .offre-fondateurs { flex-direction: column; align-items: flex-start; } }

/* ---------- Page « Hôtels et entreprises » (06.10.2026) ---------- */
.avantages-etablissements .carte { position: relative; padding-top: 1rem; }
.avantage-icone { font-size: 1.6rem !important; line-height: 1; margin: 0 0 0.6rem !important; color: var(--accent) !important; }
.etapes-etablissement { counter-reset: etape; list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: 0.75rem; }
.etapes-etablissement li { counter-increment: etape; position: relative; padding: 0.2rem 0 0.2rem 2.8rem; }
.etapes-etablissement li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700;
}
.formulaire-etablissement { max-width: 640px; }
.formulaire-etablissement h3 { margin: 1.75rem 0 0.25rem; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .deux-champs { grid-template-columns: 1fr; } }
.formulaire-etablissement .message-erreur { color: var(--alerte); background: var(--alerte-pale); padding: 0.6rem 0.8rem; border-radius: 8px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demande-envoyee { max-width: 640px; }
.deja-acces { margin-top: 2rem; color: var(--encre-douce); }

/* ---------- Recommandation (06.10.2026) ---------- */
.bandeau-recommandation {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 12px;
  background: var(--accent-pale); color: var(--accent-sombre); font-weight: 600;
}
.recommandation-icone { font-size: 1.1rem; }
.choix-categorie-prix .prix-barre { color: var(--encre-douce); font-weight: 400; font-size: 0.85em; }
.recommandation-encadre { margin: 1.5rem 0; }
.usage { border: 0; padding: 0; margin: 0 0 0.5rem; }
.usage legend { font-weight: 600; margin-bottom: 0.4rem; }
.choix-usage { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400 !important; margin: 0.35rem 0 !important; cursor: pointer; }
.choix-usage input { width: auto !important; margin-top: 0.3rem; }
.bandeau-recommandation[hidden] { display: none; }
/* « Ne pas garder » : effacer le code de recommandation (07.10.2026). */
.recommandation-oublier { margin-left: auto; flex: none; background: none; border: 0; padding: 0.25rem 0; color: inherit; font: inherit; font-size: 0.85rem; font-weight: 500; text-decoration: underline; cursor: pointer; opacity: 0.8; }
.recommandation-oublier:hover { opacity: 1; }