/* 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; }
  .site-entete .conteneur { flex-wrap: wrap; min-height: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .site-nav { margin-left: 0; width: 100%; gap: 0.9rem; }
  .pied-grille { grid-template-columns: 1fr; }
}

/* ================================================================
   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 {
  /* Trois couches, du fond vers l'avant : le dégradé, le panorama alpin, la
     lueur d'accent. `alpes.svg` est un dessin à nous (voir son en-tête) —
     pas une photo sous licence, donc rien à justifier ni à renouveler.

     Il est ancré EN BAS et volontairement pâle : le titre est en encre
     sombre juste au-dessus, et un visuel contrasté le rendrait illisible.
     C'est aussi pour ça qu'il n'occupe qu'un tiers de la hauteur. */
  position: relative;
  background:
    radial-gradient(1000px 420px at 12% -8%, rgba(26, 86, 219, 0.16), transparent 62%),
    url("/alpes.svg") bottom center / 100% auto no-repeat,
    linear-gradient(180deg, var(--accent-pale), var(--fond) 78%);
  border-bottom: 1px solid var(--bord);
  padding: 4.5rem 0 8rem;
}



.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;
  color: var(--accent);
}

.accueil-hero .chapeau {
  font-size: 1.15rem;
  color: var(--encre-douce);
  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; }
  /* Le panorama alpin passe en second plan sur petit écran : la place manque
     pour qu'il respire sous le formulaire de trajet, mais le retirer
     enlèverait au téléphone la seule image de la page. Il est donc élargi et
     descendu, de sorte qu'on n'en voie que les crêtes. */
  .accueil-hero {
    padding: 3rem 0 4.5rem;
    background-size: auto, 200% auto, auto;
  }
}

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