/* 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.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.

   IL NE PROMET PAS DE PRIX, ET C'EST VOLONTAIRE.
   Aucune route publique ne calcule un tarif aujourd'hui (voir
   reservationsController.ts : le seul point d'entrée public CRÉE une
   réservation). Le formulaire transmet donc le trajet à la page de
   réservation au lieu d'afficher un montant qu'il n'a pas. Le jour où un
   point `POST /devis` existera, seule l'action du formulaire changera. */
.recherche {
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 18px 40px -24px rgba(15, 23, 41, 0.35);
  padding: 1.25rem;
  margin: 2rem 0 0;
}

.recherche-grille {
  display: grid;
  gap: 0.85rem;
  /* Une colonne sur téléphone : quatre champs côte à côte y deviennent
     illisibles bien avant d'être trop étroits. */
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .recherche-grille {
    grid-template-columns: 1.3fr 1.3fr 1fr 0.7fr auto;
    align-items: end;
  }
}

.recherche-champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

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

.recherche-champ input,
.recherche-champ select {
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  min-width: 0;
  width: 100%;
}

.recherche-champ input:focus-visible,
.recherche-champ select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.recherche button[type="submit"] {
  /* Aligné sur la ligne des champs, pas sur celle des étiquettes.
     Ciblé sur le bouton d'envoi et non sur `.bouton` : le lien « poursuivre
     la réservation » vit lui aussi dans ce formulaire, et s'étirait sur toute
     la largeur du devis. */
  width: 100%;
  justify-content: center;
  padding-block: 0.72rem;
}

.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 formulaire se resserre à gauche, en deux
   colonnes, pour laisser voir la voiture du quai à droite de l'image. */
@media (min-width: 1000px) {
  .accueil-hero .recherche { max-width: 640px; }
  .accueil-hero .recherche-grille { grid-template-columns: 1fr 1fr; align-items: end; }
  .accueil-hero .recherche-champ:last-child { grid-column: 1 / -1; }
  .accueil-hero .recherche-champ:last-child .bouton { width: 100%; }
  .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;
}

.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;
}

.choix-categorie input { 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; } }