/* ==========================================================================
   ALPS EXECUTIVE — composants
   Les jetons et les classes de base (.btn, .input, .mi, .data…) viennent de
   tokens.css. Ce fichier ne contient que ce qui s'y ajoute.
   ========================================================================== */

/* --- Marque --------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{flex:none}
.brand__name{font-family:var(--font-display);font-size:17px;letter-spacing:.06em;
  line-height:1;color:var(--paper)}
.site-header--light .brand__name,.brand--dark .brand__name{color:var(--ink-900)}
/* La baseline disparaît sous 1024px : à cette échelle elle tomberait sous le
   plancher de lisibilité, et une baseline illisible vaut moins que pas de baseline. */
.brand__line{display:none}
@media (min-width:1024px){
  .brand__name{font-size:20px}
  .brand__line{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--brass-bright);margin-top:6px;line-height:1}
  .site-header--light .brand__line{color:var(--brass-deep)}
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:14px;color:var(--ink-tertiary)}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs [aria-current="page"]{color:var(--paper)}
.breadcrumbs__sep{color:var(--ink-500)}
.section--light .breadcrumbs a:hover,.section--light .breadcrumbs [aria-current="page"]{color:var(--ink-900)}

/* --- Appel à l'action -----------------------------------------------------
   Un seul bouton plein par écran. Deux pleins côte à côte annulent la
   hiérarchie et font chuter le taux de clic. */
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.btn{text-decoration:none}
.btn:hover{text-decoration:none}
@media (max-width:767px){
  .btn{height:56px;width:100%}
  .cta-row .btn{width:100%}
}

/* --- Puces de service ----------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--line-light);background:var(--white);
  font-size:13px;font-weight:500;white-space:nowrap}
.on-dark .pill{border-color:var(--line-dark);background:rgba(246,243,236,.05);color:var(--paper)}

/* --- Ligne de route -------------------------------------------------------
   Composant le plus réutilisé du site. Filet et typographie, aucune carte. */
.routes{border-top:1px solid var(--ink-900)}
.on-dark .routes{border-top-color:var(--line-dark)}
.route-line{display:grid;grid-template-columns:1fr auto;gap:6px var(--s4);
  align-items:center;min-height:56px;padding-block:14px;
  border-bottom:1px solid var(--line-light);text-decoration:none;color:inherit}
.on-dark .route-line{border-bottom-color:var(--line-dark)}
.route-line:hover{text-decoration:none;background:rgba(176,138,79,.06)}
.route-line__name{font-size:17px;font-weight:500}
.route-line__sep{color:var(--ink-tertiary)}
.route-line__meta{display:flex;gap:var(--s4);align-items:center;
  font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--ink-tertiary)}
@media (min-width:768px){
  .route-line{grid-template-columns:1.7fr .7fr .7fr auto;gap:var(--s5)}
  .route-line__meta{display:contents}
}

/* --- Fiche véhicule ------------------------------------------------------- */
.vehicle{border-top:2px solid var(--ink-900);padding-top:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3)}
.vehicle__caps{display:flex;flex-wrap:wrap;gap:var(--s4);
  font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:14px}
.vehicle__cap{display:inline-flex;align-items:center;gap:7px}

/* --- Blocs de preuve ------------------------------------------------------ */
.proof{display:grid;gap:var(--s5)}
.proof__item{border-top:1px solid var(--ink-900);padding-top:var(--s4)}
.on-dark .proof__item{border-top-color:var(--line-dark)}
.proof__figure{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:26px;line-height:1.1;margin-top:6px}
/* Une preuve n'est pas toujours un chiffre : l'altitude d'une station étagée
   est une amplitude, donc une phrase. En corps 26 px et en chasse fixe, elle
   écrasait la colonne. La variante garde la famille de la donnée — c'est le
   même type d'information — mais reprend une taille et un interlignage de
   lecture. Le seuil est porté par le gabarit, pas par le CSS. */
.proof__figure--text{font-size:17px;line-height:1.45;letter-spacing:.01em;
  font-variant-numeric:normal;max-width:34ch}

/* --- Comparatif privé / partagé ------------------------------------------- */
.compare{display:grid;border:1px solid var(--line-light);background:var(--white)}
@media (min-width:768px){ .compare{grid-template-columns:1fr 1fr} }
.compare__col{padding:var(--s5)}
.compare__col + .compare__col{background:var(--paper-2);border-top:1px solid var(--line-light)}
@media (min-width:768px){
  .compare__col + .compare__col{border-top:0;border-left:1px solid var(--line-light)}
}
.compare__list{display:flex;flex-direction:column;gap:13px;margin-top:var(--s4)}
.compare__row{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.compare__row svg{flex:none;margin-top:3px}

/* --- FAQ (accordéon natif) ------------------------------------------------
   <details>/<summary> : opérable au clavier et exposé aux lecteurs d'écran
   sans une ligne de JavaScript, et lisible même si le script échoue. */
.faq{border-top:1px solid var(--ink-900)}
.faq__item{border-bottom:1px solid var(--line-light)}
.faq__q{display:flex;gap:var(--s4);justify-content:space-between;align-items:flex-start;
  min-height:56px;padding-block:var(--s4);cursor:pointer;list-style:none;
  font-size:18px;font-weight:500;line-height:1.35}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brass-deep)}
.faq__icon{flex:none;margin-top:5px;transition:transform .18s ease}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding-bottom:var(--s4);max-inline-size:74ch;color:var(--ink-500)}

/* --- Encart d'avertissement ----------------------------------------------- */
.note{display:flex;gap:13px;align-items:flex-start;
  padding:var(--s4) var(--s4);background:var(--paper-2);
  border-left:2px solid var(--brass)}
.note svg{flex:none;margin-top:2px}
.note--warn{border-left-color:var(--warn)}
.on-dark .note{background:rgba(246,243,236,.05);color:var(--paper)}

/* --- Formulaires ----------------------------------------------------------
   Étiquette visible au-dessus, erreur en dessous et reliée par
   aria-describedby, annonce par role="alert". Jamais de placeholder seul. */
.form-grid{display:grid;gap:var(--s4)}
@media (min-width:768px){
  .form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){ .form-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.field__error{display:block;font-size:13px;color:var(--err);margin-top:2px}
.input[aria-invalid="true"]{border-color:var(--err);
  outline:2px solid rgba(140,59,59,.18);outline-offset:0}
.field--span-2{grid-column:span 2}
/* Le champ mobile ne descend jamais sous 16px : en dessous, iOS zoome à la
   mise au point et casse la mise en page. */
@media (max-width:767px){ .input{font-size:16px;height:56px} }

/* --- Autocomplétion des lieux ---------------------------------------------
   Combobox du moteur : la liste s'ancre sous le champ, dans l'identité de la
   maison — filet, fond, laiton — jamais l'apparence d'un widget tiers. Les
   options font au moins 44px de haut : un doigt n'est pas un curseur. */
.placebox{position:relative;display:flex;flex-direction:column}
.placebox__list{position:absolute;top:100%;left:0;right:0;z-index:30;
  margin:4px 0 0;padding:5px 0;list-style:none;
  background:var(--white);border:1px solid var(--line-light);
  box-shadow:0 18px 40px rgba(14,17,22,.16);
  max-height:324px;overflow-y:auto}
.on-dark .placebox__list{background:var(--ink-800);border-color:var(--line-dark);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.placebox__header{padding:10px 14px 4px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--brass-deep)}
.on-dark .placebox__header{color:var(--brass-bright)}
.placebox__option{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;min-height:44px;padding:11px 14px;cursor:pointer;
  transition:background-color .12s ease}
.placebox__option:hover,.placebox__option[aria-selected="true"]{
  background:rgba(176,138,79,.14)}
.placebox__name{font-size:15px;font-weight:500}
.placebox__type{font-size:12px;color:var(--ink-500);letter-spacing:.04em;white-space:nowrap}
.on-dark .placebox__type{color:var(--ink-300)}

.form-status{padding:var(--s4);border:1px solid var(--line-light);
  background:var(--white);font-size:15px}
.form-status[data-state="error"]{border-color:var(--err);color:var(--err)}
.form-status[data-state="ok"]{border-color:var(--ok);color:var(--ok)}

/* --- Compteur de passagers ------------------------------------------------ */
.stepper{display:flex;gap:8px;align-items:stretch}
.stepper__btn{flex:none;width:44px;min-height:44px;
  border:1px solid var(--ink-900);background:transparent;
  font-size:20px;line-height:1;cursor:pointer}
.stepper__btn:disabled{opacity:.35;cursor:not-allowed}
.stepper__val{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  min-height:44px;border:1px solid var(--line-light);background:var(--white);
  font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:17px;
  /* `text-align` : sur un <input>, la centrage flex ne porte pas sur le texte saisi. */
  text-align:center;padding:0 4px}
/* Les flèches natives du champ numérique doublent les boutons + et − : deux
   commandes pour la même action, dont une sous le seuil de 44px. */
.stepper__val::-webkit-outer-spin-button,
.stepper__val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper__val{-moz-appearance:textfield;appearance:textfield}

/* --- Progression du tunnel ------------------------------------------------ */
.steps{display:flex;gap:8px;align-items:center;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;gap:9px;align-items:center;flex:none}
.step__n{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-light);font-family:var(--font-data);font-size:12px;
  color:var(--ink-tertiary)}
.step[data-state="done"] .step__n{border-color:var(--brass);color:var(--brass-deep)}
.step[data-state="now"]  .step__n{border-color:var(--brass);background:var(--brass);color:var(--ink-900)}
.step__label{font-size:14px;white-space:nowrap;color:var(--ink-tertiary)}
.step[data-state="now"] .step__label{font-weight:600;color:var(--ink-900)}
.step[data-state="done"] .step__label{color:var(--ink-900)}
.step__bar{flex:1;min-width:14px;height:1px;background:var(--line-light)}
/* Sous 768px, l'indicateur textuel cède la place à une barre de progression :
   sept libellés sur 375px seraient illisibles. */
.steps-compact{height:3px;background:var(--line-light)}
.steps-compact__fill{height:3px;background:var(--brass)}

/* --- Sélection de véhicule ------------------------------------------------ */
  padding:var(--s5);border:1px solid var(--line-light);background:var(--white);cursor:pointer}
  background:transparent;box-shadow:inset 0 0 0 3px var(--white);margin-top:3px}
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-light)}
@media (min-width:768px){
    align-items:flex-end;text-align:right}
}

/* --- Récapitulatif -------------------------------------------------------- */
.summary{border:1px solid var(--line-light);background:var(--white);padding:var(--s5)}
@media (min-width:1024px){ .summary{position:sticky;top:20px} }
.summary__row{display:flex;justify-content:space-between;gap:var(--s4);
  padding-block:11px;border-bottom:1px solid var(--line-light);font-size:14px}
.summary__row dt{color:var(--ink-500);margin:0}
.summary__row dd{margin:0;text-align:right;font-weight:500}

/* --- Prix ----------------------------------------------------------------
   Le composant sait afficher trois états : montant validé, fourchette, ou
   marqueur d'attente. Tant que la grille n'est pas validée, seul le troisième
   état est rendu — il n'existe aucun chemin de code qui invente un montant. */
.price{font-family:var(--font-data);font-variant-numeric:tabular-nums;line-height:1.1}
.price--lg{font-size:26px}
.price--md{font-size:22px}
.price__note{display:block;font-size:13px;color:var(--ink-500);
  font-family:var(--font-ui);margin-top:2px}
/* Sans grille validée, le public lit une mention assumée — « Tarif sur
   confirmation » — à la place du montant : même emplacement, taille de texte,
   aucun chiffre. */
.price__onrequest{font-family:var(--font-ui);font-size:.58em;font-weight:600;
  letter-spacing:.02em;white-space:nowrap}

/* --- Média ---------------------------------------------------------------
   Ratio réservé à l'avance : une image qui arrive sans place réservée décale
   tout ce qui la suit et dégrade le CLS. */
.media{display:block;width:100%;height:auto;background:var(--paper-2)}
.media-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-800)}
.media-frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-placeholder{display:flex;align-items:flex-end;padding:var(--s5);
  background:var(--ink-900);aspect-ratio:16/10}

/* --- Sélecteur de langue -------------------------------------------------- */
.lang{display:flex;gap:8px;align-items:center;font-size:14px}
.lang a{text-decoration:none;color:var(--ink-tertiary)}
.lang [aria-current="true"]{font-weight:600;color:var(--paper)}
.site-header--light .lang [aria-current="true"]{color:var(--ink-900)}

/* --- Marqueur de donnée non validée --------------------------------------
   Rendu visible à dessein. Aucune donnée sans validation documentaire ne doit
   pouvoir se transformer en affirmation publique par inadvertance. */
.todo{display:inline-block;padding:1px 7px;border:1px dashed var(--warn);
  border-radius:var(--r-1);color:var(--warn);font-family:var(--font-data);
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}

/* --- Contenu réservé aux technologies d'assistance ------------------------
   Retiré du flux visuel sans être retiré de l'arbre d'accessibilité :
   `display:none` le supprimerait aussi pour les lecteurs d'écran. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;
  margin:0;clip:auto;white-space:normal}

/* --- Corps de texte éditorial --------------------------------------------- */
.entry > * + *{margin-top:var(--s4)}
.entry h2{font-size:24px;line-height:1.25;font-weight:600;margin-top:var(--s7)}
.entry h3{font-size:20px;line-height:1.3;font-weight:600;margin-top:var(--s6)}
.entry ul,.entry ol{padding-left:1.25em;display:flex;flex-direction:column;gap:8px}
.entry img{max-width:100%;height:auto}

/* --- Défilement ancré ------------------------------------------------------
   Le header est collant sur le tunnel : sans marge, une ancre place la cible
   sous le header. */
:target{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* --- Carrousel de flotte --------------------------------------------------
   Le défilement est assuré par le navigateur (`scroll-snap`), pas par du
   JavaScript : pas de boucle d'animation, pas de recalcul de transformation,
   et un comportement natif au doigt comme au pavé tactile. */
.carousel{position:relative;margin-top:var(--s6)}
.carousel__track{display:flex;gap:var(--s4);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* La piste déborde volontairement des marges du conteneur : une carte
     coupée au bord signale qu'il y a une suite, sans flèche décorative. */
  padding-inline:20px;margin-inline:-20px;padding-block:4px;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{display:none}
@media (min-width:1024px){
  .carousel__track{padding-inline:40px;margin-inline:-40px;gap:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .carousel__track{scroll-behavior:auto}
}

.carousel__slide{flex:0 0 auto;width:78vw;max-width:420px;margin:0;
  scroll-snap-align:start;border:1px solid var(--line-light);background:var(--white)}
@media (min-width:768px){ .carousel__slide{width:46vw} }
@media (min-width:1024px){ .carousel__slide{width:400px} }
.carousel__media{aspect-ratio:4/3;background:var(--ink-800)}
.carousel__caption{padding:var(--s4)}

/* Boutons masqués tant que le script n'a pas signalé sa présence : le
   défilement natif suffit sans lui, et deux boutons inertes seraient pires
   que pas de boutons. */
.carousel__nav{display:none;gap:8px}
[data-carousel-ready] .carousel__nav,
.carousel-ready .carousel__nav{display:flex}
.carousel__btn{width:44px;height:44px;border:1px solid var(--ink-900);
  background:transparent;color:var(--ink-900);cursor:pointer}
.carousel__btn:hover:not(:disabled){background:var(--ink-900);color:var(--paper)}
.carousel__btn:disabled{opacity:.3;cursor:not-allowed}
.on-dark .carousel__btn{border-color:var(--ink-500);color:var(--paper)}

.carousel__rail{height:1px;background:var(--line-light);margin-top:var(--s5)}
.carousel__rail-fill{display:block;height:1px;background:var(--brass);
  transition:width .2s ease,margin-left .2s ease}
@media (prefers-reduced-motion:reduce){ .carousel__rail-fill{transition:none} }

/* --- Identité juridique ---------------------------------------------------
   Un tableau de définitions plutôt qu'un <table> : la relation est
   étiquette → valeur, pas une grille de données. Sur mobile la valeur passe
   sous son étiquette ; un siège social ne se coupe pas en deux colonnes de
   150px. */
.legal-identity{margin:0 0 32px;border-top:1px solid var(--line-light)}
.legal-identity__row{display:grid;gap:2px 24px;padding:12px 0;
  border-bottom:1px solid var(--line-light)}
.legal-identity__row dt{margin:0;font-size:13px;letter-spacing:.02em;color:var(--ink-500)}
.legal-identity__row dd{margin:0;font-weight:500}
@media (min-width:640px){
  .legal-identity__row{grid-template-columns:minmax(180px,240px) 1fr;align-items:baseline}
}

/* --- Tableaux de contenu --------------------------------------------------
   Les pages légales sont le seul endroit où un tableau apparaît dans du texte
   rédigé. `table-layout:fixed` et `word-break` empêchent une cellule longue
   d'imposer sa largeur au tableau entier, ce qui déborderait la page sur
   mobile ; le conteneur défile plutôt que le document. */
.entry table{width:100%;border-collapse:collapse;table-layout:fixed;
  display:block;overflow-x:auto;font-size:15px}
.entry table th,.entry table td{text-align:left;vertical-align:top;
  padding:10px 14px 10px 0;border-bottom:1px solid var(--line-light);
  overflow-wrap:anywhere}
.entry table th{font-size:13px;font-weight:600;color:var(--ink-500);
  border-bottom-color:var(--ink-900)}
.entry table tr > *:last-child{padding-right:0}

/* --- Proposition de transfert -------------------------------------------- */
/* L'ancien composant alignait nom, capacité et prix sur une ligne : c'est la
   grammaire d'un comparateur, où l'œil balaie une colonne de montants. Ici la
   proposition se lit de haut en bas — photographie, nom, ce que c'est, ce
   qu'elle comprend, et le prix en conséquence, jamais en titre. */
.offer{display:block;position:relative;background:var(--white);
  border:1px solid var(--line-light);padding:0;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease}
.offer + .offer{margin-top:var(--s5)}
.offer:hover{border-color:var(--ink-400)}
.offer[data-selected="true"]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.offer__media{display:block;overflow:hidden;background:var(--ink-800)}
.offer__media .media{aspect-ratio:16/10}
/* Le véhicule est le sujet : le cadrage le garde entier plutôt que de le
   couper pour remplir une colonne. */
.offer__media img{object-position:50% 62%}
.offer__main{display:block;padding:var(--s5)}
/* Le repère de sélection est une mention, pas un badge commercial. */
.offer__mark{display:block;font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.offer--alt .offer__mark{color:var(--ink-500)}
.offer__name{display:block;font-family:var(--font-display);font-size:30px;
  line-height:1.12;letter-spacing:-.01em;margin-top:10px}
.offer--alt .offer__name{font-size:22px}
.offer__lede{display:block;font-size:16px;line-height:1.55;color:var(--ink-500);margin-top:8px;max-width:46ch}
/* La prestation se lit là où se prend la décision, et non sous le prix. */
.offer__services{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--s5)}
.offer__service{font-size:14px;color:var(--ink-700);display:inline-flex;align-items:center}
.offer__service::before{content:"";width:3px;height:3px;border-radius:999px;
  background:var(--brass);margin-right:9px;flex:none}
.offer__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-light)}
.offer__fare{margin:0}
.offer__seats{white-space:nowrap}
.offer__tailored-fare{font-family:var(--font-ui);font-size:17px;font-weight:600;line-height:1.3}
.offer--tailored{border-color:var(--brass)}
.offer--tailored .offer__foot{align-items:center}
@media (min-width:900px){
  /* La photographie prend une colonne entière : c'est elle qui porte le
     positionnement, pas une vignette posée à côté d'un montant. */
  .offer--lead{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch}
  .offer--lead .offer__media{height:100%}
  .offer--lead .offer__media .media{height:100%;aspect-ratio:auto}
  .offer__main{padding:var(--s6)}
}