/* ==========================================================================
   ALPS EXECUTIVE — mise en page
   Mobile d'abord : les règles de base valent pour 375px, les media queries
   n'ajoutent que ce que la largeur permet en plus.
   ========================================================================== */

/* --- Accessibilité au clavier --------------------------------------------
   Le lien d'évitement est la première cible tabulable de chaque page : sans
   lui, un utilisateur au clavier retraverse toute la navigation à chaque page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  padding:14px 20px;background:var(--brass);color:var(--ink-900);
  font-weight:600;font-size:15px}
.skip-link:focus{left:0;text-decoration:none}

/* --- Conteneur ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){ .wrap{padding-inline:32px} }
@media (min-width:1024px){ .wrap{padding-inline:40px} }

/* --- Rythme vertical de section ------------------------------------------ */
.section{padding-block:var(--s9)}
@media (min-width:1024px){ .section{padding-block:var(--s10)} }
.section--tight{padding-block:var(--s8)}
.section--flush-top{padding-top:0}

/* --- Grilles fluides ------------------------------------------------------
   Une seule colonne en mobile ; les paliers ajoutent des colonnes. Aucune
   largeur fixe en pixels : le défilement horizontal est proscrit. */
.g{display:grid;gap:var(--s5)}
@media (min-width:768px){
  .g-2\@md{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3\@md{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .g-3\@md{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4\@lg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s9)}
  .g-split--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* --- Mesure de lecture ----------------------------------------------------
   62 caractères : au-delà l'œil perd le début de la ligne suivante. */
.measure{max-inline-size:62ch}
.measure-tight{max-inline-size:48ch}
.balance{text-wrap:balance;max-inline-size:22ch}

/* --- En-tête de site ------------------------------------------------------ */
.site-header{position:relative;z-index:50;background:var(--ink-900)}
.site-header--light{background:var(--white);border-bottom:1px solid var(--line-light)}
.header-bar{display:flex;align-items:center;justify-content:space-between;
  min-height:60px;gap:var(--s4)}
.header-bar > .brand{flex:none}
.header-utility{display:none}
@media (min-width:1024px){
  .header-utility{display:flex;align-items:center;justify-content:space-between;
    min-height:52px;border-bottom:1px solid var(--line-dark)}
  .site-header--light .header-utility{border-bottom-color:var(--line-light)}
  .header-bar{min-height:84px}
}

/* Navigation principale : masquée sous 1280px, remplacée par le panneau.
   Le seuil est à 1280 et non à 1024, pour une raison mesurée : entre 1024 et
   1180px, la barre affichait la navigation complète alors que la place
   manquait. Les libellés étant en `nowrap`, le conteneur se comprimait sans
   que son contenu ne rétrécisse — les liens débordaient donc SOUS la marque et
   SOUS les boutons d'action, jusqu'à 112px de recouvrement à 1024px. Un
   recouvrement de boîtes cliquables n'est pas un défaut esthétique : le clic
   part sur la mauvaise cible. */
.nav-primary{display:none}
@media (min-width:1280px){
  /* `flex:0 1 auto` et non `flex:1` : la navigation prend la largeur de son
     contenu et rend le reste. Avec `flex:1` elle recevait une part fixe de la
     barre, plus étroite que ses libellés, et débordait des deux côtés — sept
     pixels de recouvrement subsistaient même à 1600px. */
  .nav-primary{display:flex;flex:0 1 auto;min-width:0;justify-content:center;
    gap:16px;flex-wrap:nowrap;overflow:hidden}
  .nav-primary a{font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none}
}

/* Les deux appels à l'action ne cèdent jamais de place : ce sont les deux
   points d'entrée commerciaux de la barre. Sans `flex:none`, ils se faisaient
   comprimer par la navigation et leurs libellés passaient sur deux lignes —
   « Obtenir mon / prix » — ce qui est pire qu'un menu court.
   BUDGET DE PLACE, mesuré et non estimé : la barre plafonne à 1200px. Marque
   346, actions 306, deux gouttières de 24 : il reste environ 500px pour le
   menu principal, soit six libellés courts. Un septième ne tient pas ;
   `overflow:hidden` sur la navigation évite alors le recouvrement, mais la
   vraie réponse est de déplacer l'entrée surnuméraire vers le pied de page.
   C'est aussi ce qui fixe le seuil à 1280 : à 1200px de fenêtre, le conteneur
   retombe sous 1140px une fois les marges retirées, et la barre ne tient plus.
   Mesure : tools/check-layout.mjs, plus le relevé de recouvrement de boîtes
   entre 768 et 1600px. */
.header-actions{display:flex;gap:12px;align-items:center;flex:none}
.header-actions .btn{white-space:nowrap}
.nav-toggle{display:inline-flex}
@media (min-width:1280px){ .nav-toggle{display:none} }

/* Panneau mobile : plein écran, fermé par défaut, piégeage du focus en JS. */
.nav-panel{position:fixed;inset:0;z-index:60;background:var(--ink-900);
  display:flex;flex-direction:column;padding:20px;overflow-y:auto;
  visibility:hidden;opacity:0;transition:opacity .18s ease,visibility .18s}
.nav-panel[data-open="true"]{visibility:visible;opacity:1}
.nav-panel a{color:var(--paper);text-decoration:none;font-size:20px;font-weight:500;
  display:flex;align-items:center;min-height:52px;
  border-bottom:1px solid var(--line-dark)}

/* --- Barre d'action collée (mobile) ---------------------------------------
   Hauteur réservée sur <body> : sans elle, la barre masque la fin du contenu
   et le dernier lien du footer devient inatteignable. */
.has-action-bar{padding-bottom:84px}
@media (min-width:1024px){ .has-action-bar{padding-bottom:0} }
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:var(--s2);align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--line-light);
  box-shadow:0 -6px 20px rgba(14,17,22,.10)}
@media (min-width:1024px){ .action-bar{display:none} }

/* --- Pied de page --------------------------------------------------------- */
.site-footer{background:var(--ink-900);color:var(--paper);padding-block:var(--s9) var(--s6)}
.footer-cols{display:grid;gap:var(--s7)}
@media (min-width:768px){ .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .footer-cols{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:var(--s7)} }
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  justify-content:space-between;align-items:center}

/* --- Héros ---------------------------------------------------------------- */
.hero{position:relative;background:var(--ink-900);color:var(--paper);
  padding-block:var(--s8) var(--s7);overflow:hidden}
@media (min-width:1024px){ .hero{padding-block:var(--s9) var(--s8)} }
.hero__ridge{position:absolute;inset:auto 0 0 0;opacity:.85;pointer-events:none}

/* --- Hero alpin ---------------------------------------------------------- */
/* Le média occupe tout le cadre ; le voile garantit le contraste du texte
   quelle que soit la photographie qui sera fournie plus tard. */
.hero--alpine{overflow:hidden}
/* La composition n'occupe pas toute la hauteur du hero : elle est ancrée en
   HAUT, pour que la ligne d'horizon tombe à hauteur de regard, à côté du titre.
   Ancrée en bas, la montagne se retrouvait sous le moteur de réservation,
   c'est-à-dire hors du premier écran — elle n'existait pas pour le visiteur. */
.hero--alpine .hero__media{position:absolute;inset:0 0 auto 0;aspect-ratio:auto;
  height:min(820px,100%);z-index:0}
/* Mobile : le cadre desktop (820 px sur 390) faisait perdre 36 % de sa largeur
   au recadrage portrait — le Sprinter était rogné des deux côtés. */
@media (max-width:767px){
  .hero--alpine .hero__media{height:min(740px,100%)}
}
.hero--alpine .hero__media::after{content:"";position:absolute;inset:auto 0 0 0;
  height:20%;background:linear-gradient(to top,var(--ink-900) 0%,transparent 100%)}
.hero--alpine .hero__media .media__note{bottom:auto;top:var(--s3);left:auto;right:var(--s3)}
/* La photographie est un CONVOI : Sprinter à droite, Classe V et berlines au
   centre, autocar à gauche. Elle se cadre donc sur toute sa largeur — l'ancrage
   à droite, hérité d'une photographie à véhicule unique, en sortait la moitié.
   L'agrandissement remonte la file au-dessus du moteur de réservation, seul
   élément opaque du premier écran, qui lui coupait ses phares ; le facteur
   garde le rendu à la définition native, sans suréchantillonnage. */
.hero--alpine .hero__media img{object-position:46% 88%}
@media (min-width:1024px){
  .hero--alpine .hero__media img{
    transform:scale(1.15);
    transform-origin:55% 100%}
}
@media (max-width:767px){
  .hero--alpine .hero__media img{object-position:62% 100%}
}
/* Mobile : voile vertical, en PIXELS et non en pourcentages. Le voile protège
   le bloc éditorial, de hauteur à peu près constante, alors que le hero mobile
   mesure deux mille pixels — le moteur en occupe les trois quarts. En
   pourcentages, le palier de relâche tombait sous l'image, qui restait donc
   noyée sur toute sa hauteur. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(14,17,22,.94) 0px, rgba(14,17,22,.92) 410px, rgba(14,17,22,.34) 480px,
    rgba(14,17,22,.16) 600px, rgba(14,17,22,.58) 700px, rgba(14,17,22,.90) 750px)}
@media (min-width:1024px){
  .hero__scrim{
    /* Desktop : un HALO, non plus une bande. Une bande couvre toute la
       hauteur — donc la moitié basse du cadre, où roule le convoi : les
       berlines disparaissaient sous 0,84 d'encre sans qu'aucun texte ne s'y
       trouve. Le halo tient le bloc éditorial et relâche la bande basse.
       Le rayon horizontal est dimensionné sur le chapô ANGLAIS, plus large
       que le français : sa première ligne atteint 800 px et allait chercher
       la montagne éclairée, où le contraste tombait à 3,86:1. C'est donc lui
       qui commande, et non le rendu français, plus court de quarante pixels. */
    background:
      radial-gradient(1150px 430px at 0% 120px,
        rgba(14,17,22,.95) 0%, rgba(14,17,22,.93) 45%, rgba(14,17,22,.90) 63%,
        rgba(14,17,22,.81) 85%, rgba(14,17,22,.52) 92%, rgba(14,17,22,.24) 100%,
        rgba(14,17,22,.08) 107%, rgba(14,17,22,0) 116%),
      linear-gradient(to top,
        rgba(14,17,22,.88) 0%, rgba(14,17,22,.40) 12%, rgba(14,17,22,0) 26%)}
}
.hero--alpine .hero__inner{z-index:2}
.hero__inner{position:relative}

/* --- Visibilité par palier ------------------------------------------------
   Masquage par CSS et non par JavaScript : un élément caché en ligne puis
   révélé par script disparaît définitivement si le script échoue. */
.from-lg{display:none}
@media (min-width:1024px){ .from-lg{display:inline-flex} }
.upto-md{display:block}
@media (min-width:768px){ .upto-md{display:none} }
/* L'indicateur d'étapes détaillé n'apparaît qu'à partir de 768px : sept
   libellés ne tiennent pas sur 375px. */
.steps{display:none}
@media (min-width:768px){ .steps{display:flex} }