/* =============================================================================
   Valais Prestige Transport — socle de styles partagé

   Ce fichier contenait la même chose, recopiée, dans le premier bloc <style>
   de neuf pages : variables et thèmes, typographie, en-tête, boutons, hero,
   panneau de réservation, champs de formulaire, pied de page, barre mobile et
   toutes les règles responsive. Une couleur de marque se changeait donc en
   neuf endroits, et le navigateur retéléchargeait 36 Ko déjà connus à chaque
   page visitée.

   Les pages gardent leur second bloc <style> : c'est là que vivent leurs
   composants propres, et lui n'est partagé par personne.

   Trois pages ne s'appuient pas sur ce socle — l'accueil, la réservation et
   la page véhicule redéfinissent des composants communs (.flotte, .forfaits)
   à l'intérieur même du socle, y compris dans les media queries. Les sortir
   d'ici inverserait l'ordre de la cascade et casserait leur affichage mobile.
   Elles conservent donc leur bloc complet en ligne.
   ========================================================================== */

/* ==========================================================================
   Valais Prestige Transport — feuille de style
   Rythme : ivoire / encre / or. Chaque section pose ses propres jetons
   de couleur (--surface, --texte, --filet, --accent), les composants
   ne connaissent que les jetons.
   ========================================================================== */

:root {
  /* Palette brute */
  --encre: #101319;
  --encre-profonde: #080a0e;
  --graphite: #191d25;
  --ivoire: #f3efe6;
  --sable: #e8e1d3;
  --blanc-casse: #fbf9f5;

  --or: #c09a38;
  --or-clair: #e7ce8e;
  --or-fonce: #8a6a18;

  --degrade-or-clair: linear-gradient(104deg, #efdca4, #c9a227 45%, #f3e6b8);
  --degrade-or-sombre: linear-gradient(104deg, #a07d1d, #c09a38 45%, #8a6a18);

  /* Jetons contextuels — valeurs par défaut : thème sombre */
  --surface: var(--encre);
  --carte: var(--graphite);
  --texte: var(--ivoire);
  --texte-doux: rgba(243, 239, 230, 0.72);
  --texte-faible: #948c7e;
  --filet: rgba(192, 154, 56, 0.3);
  --filet-doux: rgba(243, 239, 230, 0.14);
  --accent: var(--or);
  --accent-texte: var(--or-clair);
  --degrade-prix: var(--degrade-or-clair);
  --champ-fond: rgba(8, 10, 14, 0.6);
  --schema-champ: dark;
  --champ-bord: rgba(243, 239, 230, 0.16);

  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --lg: 1240px;
  --rayon: 2px;
}

/* Thèmes de section ------------------------------------------------------ */

.theme-sombre {
  --surface: var(--encre);
  --carte: var(--graphite);
  --texte: var(--ivoire);
  --texte-doux: rgba(243, 239, 230, 0.72);
  --texte-faible: #948c7e;
  --filet: rgba(192, 154, 56, 0.3);
  --filet-doux: rgba(243, 239, 230, 0.14);
  --accent: var(--or);
  --accent-texte: var(--or-clair);
  --degrade-prix: var(--degrade-or-clair);
  --champ-fond: rgba(8, 10, 14, 0.6);
  --schema-champ: dark;
  --champ-bord: rgba(243, 239, 230, 0.16);
  background: var(--surface);
  color: var(--texte);
}

.theme-nuit {
  --surface: var(--encre-profonde);
  --carte: var(--graphite);
  --texte: var(--ivoire);
  --texte-doux: rgba(243, 239, 230, 0.72);
  --texte-faible: #948c7e;
  --filet: rgba(192, 154, 56, 0.3);
  --filet-doux: rgba(243, 239, 230, 0.14);
  --accent: var(--or);
  --accent-texte: var(--or-clair);
  --degrade-prix: var(--degrade-or-clair);
  --champ-fond: rgba(8, 10, 14, 0.6);
  --schema-champ: dark;
  --champ-bord: rgba(243, 239, 230, 0.16);
  background: var(--surface);
  color: var(--texte);
}

.theme-clair {
  --surface: var(--ivoire);
  --carte: var(--blanc-casse);
  --texte: #14171d;
  --texte-doux: rgba(20, 23, 29, 0.76);
  --texte-faible: #6e675b;
  --filet: rgba(138, 106, 24, 0.34);
  --filet-doux: rgba(20, 23, 29, 0.13);
  --accent: var(--or-fonce);
  --accent-texte: #7c5f14;
  --degrade-prix: var(--degrade-or-sombre);
  --champ-fond: #ffffff;
  --schema-champ: light;
  --champ-bord: rgba(20, 23, 29, 0.18);
  background: var(--surface);
  color: var(--texte);
}

.theme-sable {
  --surface: var(--sable);
  --carte: var(--blanc-casse);
  --texte: #14171d;
  --texte-doux: rgba(20, 23, 29, 0.76);
  --texte-faible: #6b6255;
  --filet: rgba(138, 106, 24, 0.36);
  --filet-doux: rgba(20, 23, 29, 0.14);
  --accent: var(--or-fonce);
  --accent-texte: #7c5f14;
  --degrade-prix: var(--degrade-or-sombre);
  --champ-fond: #ffffff;
  --schema-champ: light;
  --champ-bord: rgba(20, 23, 29, 0.18);
  background: var(--surface);
  color: var(--texte);
}

/* Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit gagner : une règle comme .champ--duo { display: grid }
   écrase sinon le display:none du navigateur, et le bloc reste visible. */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* L'en-tête est collant : les liens d'ancrage s'arrêtent en dessous */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--encre-profonde);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--texte);
}

h1 { font-size: clamp(3rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.5rem; line-height: 1.2; }

p { margin: 0 0 1.15em; max-width: 66ch; color: var(--texte-doux); }
strong { font-weight: 600; color: var(--texte); }

.wrap { width: 100%; max-width: var(--lg); margin: 0 auto; padding: 0 28px; }

.mesure { max-width: 60ch; }
.wrap.mesure { max-width: var(--lg); }
.wrap.mesure > * { max-width: 60ch; }

.dore {
  background: var(--degrade-prix);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.saut-lien {
  position: absolute; left: -9999px; top: 0;
  background: var(--or); color: var(--encre-profonde);
  padding: 12px 18px; z-index: 300;
}
.saut-lien:focus { left: 12px; top: 12px; }

/* Bandeau supérieur et en-tête ------------------------------------------- */

.bandeau-haut {
  background: var(--encre-profonde);
  border-bottom: 1px solid rgba(192, 154, 56, 0.18);
  font-size: 0.8rem; letter-spacing: 0.03em;
  color: #948c7e;
}
.bandeau-haut .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; min-height: 40px;
}
.bandeau-haut a { text-decoration: none; color: var(--or-clair); }
.bandeau-haut a:hover { color: var(--ivoire); }

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 10, 14, 0.94);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
  color: var(--ivoire);
}
.entete__inner {
  display: flex; align-items: center; gap: 26px; min-height: 82px;
  max-width: none; padding: 0 40px;
}
.bandeau-haut .wrap { max-width: none; padding: 0 40px; }

.marque {
  /* Pas de flex ici : l'espace vient du texte lui-même, il reste donc
     identique à celui entre « Valais » et « Prestige ». */
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-size: 1.5rem; font-weight: 400;
  letter-spacing: 0.01em; white-space: nowrap; color: var(--ivoire);
}
.marque .dore { background: var(--degrade-or-clair); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.nav a {
  text-decoration: none; font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.02em; color: rgba(243, 239, 230, 0.72);
  padding: 8px 0; position: relative; transition: color 0.2s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--or); transform: scaleX(0); transition: transform 0.24s ease;
}
.nav a:hover { color: var(--ivoire); }
.nav a[aria-current="page"] { color: var(--or-clair); }
.nav a[aria-current="page"]::after, .nav a:hover::after { transform: scaleX(1); }

/* Le bouton doré porte la réservation sur grand écran ; ce lien prend le relais dans le menu mobile, où le bouton est masqué */
.nav__reservation { display: none; }

.entete .bouton { flex-shrink: 0; }

  /* Sélecteur de langue ---------------------------------------------------
     Deux liens, jamais un menu déroulant : le visiteur voit d'emblée que
     l'autre langue existe, et l'atteint en un clic. */
  .langues {
    display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em;
  }
  .langues a {
    text-decoration: none; color: rgba(243, 239, 230, 0.55);
    padding: 6px 2px; transition: color 0.2s ease;
  }
  .langues a:hover { color: var(--ivoire); }
  .langues a[aria-current="true"] { color: var(--or-clair); }
  .langues span { color: rgba(243, 239, 230, 0.26); }

.burger {
  display: none; margin-left: auto; background: none;
  border: 1px solid rgba(192, 154, 56, 0.3); border-radius: var(--rayon);
  color: var(--ivoire); padding: 10px 14px; font: inherit; font-size: 0.85rem;
  letter-spacing: 0.04em; cursor: pointer;
}

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

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; line-height: 1;
  padding: 17px 28px; border-radius: var(--rayon);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.bouton--or {
  background: linear-gradient(100deg, #e6cf90 0%, #c09a38 48%, #dcbf6a 100%);
  color: #1a1405;
}
.bouton--or:hover { background: linear-gradient(100deg, #f3e2ae 0%, #d0aa45 48%, #ecd48a 100%); }

.bouton--vert { background: #17853f; color: #fff; }
.bouton--vert:hover { background: #1c9b4b; }

.bouton--ligne { border-color: var(--filet); color: var(--accent-texte); background: transparent; }
.bouton--ligne:hover { border-color: var(--accent); background: rgba(192, 154, 56, 0.1); }

.bouton--ligne-sombre { border-color: var(--filet-doux); color: var(--texte); background: transparent; }
.bouton--ligne-sombre:hover { border-color: var(--accent); color: var(--accent-texte); }

.bouton--encre { background: var(--encre-profonde); color: var(--ivoire); }
.bouton--encre:hover { background: var(--encre); }

.bouton--large { width: 100%; }
.bouton svg { width: 16px; height: 16px; flex: none; }

.lien-souligne {
  display: inline-block; text-decoration: none;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--accent-texte);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 5px; transition: border-color 0.2s ease;
}
.lien-souligne:hover { border-bottom-color: var(--accent); }

.actions-groupe { display: flex; gap: 14px; flex-wrap: wrap; }

/* Crête signature -------------------------------------------------------- */

.crete {
  position: relative; z-index: 3; display: block; width: 100%; height: 40px;
  fill: none; stroke: var(--or); stroke-width: 1; opacity: 0.55;
  background: var(--encre-profonde);
}
.crete--recouvre { margin-top: -20px; background: transparent; }

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

.hero {
  position: relative; overflow: hidden;
  background: var(--encre-profonde); color: var(--ivoire);
}
.hero__ciel { position: absolute; inset: 0; overflow: hidden; }
.hero__ciel svg { width: 100%; height: 100%; display: block; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 8, 12, 0.82) 0%, rgba(6, 8, 12, 0.42) 34%, rgba(6, 8, 12, 0) 54%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 440px; gap: 72px;
  align-items: center; padding: 104px 0 88px;
}
.hero h1 { font-size: clamp(2.8rem, 4.8vw, 4.3rem); margin-bottom: 26px; color: var(--ivoire); }
.hero__intro { font-size: 1.1rem; color: rgba(243, 239, 230, 0.78); max-width: 46ch; }

.sur-titre {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.76rem; letter-spacing: 0.18em; font-weight: 500;
  color: var(--accent-texte); margin-bottom: 26px;
}
.sur-titre::before { content: ""; width: 46px; height: 1px; background: var(--accent); flex: none; }
.hero .sur-titre { color: var(--or-clair); }
.hero .sur-titre::before { background: var(--or); }

.garanties {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(192, 154, 56, 0.3);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.garanties div { padding: 26px 30px 26px 0; border-right: 1px solid rgba(243, 239, 230, 0.14); }
.garanties div:last-child { border-right: 0; }
.garanties dt {
  font-family: var(--display); font-size: 1.9rem; line-height: 1; margin-bottom: 6px;
  background: var(--degrade-or-clair); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.garanties dd { margin: 0; font-size: 0.82rem; letter-spacing: 0.04em; color: #a49b8c; }

/* Panneau de réservation -------------------------------------------------- */

.panneau {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 32px 30px 28px;
  color: var(--texte);
}
.panneau::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(100deg, transparent, var(--or) 30%, var(--or-clair) 55%, transparent);
}
.hero .panneau {
  background: linear-gradient(180deg, rgba(25, 29, 37, 0.94), rgba(16, 19, 25, 0.96));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.theme-clair .panneau, .theme-sable .panneau {
  box-shadow: 0 30px 60px -40px rgba(20, 23, 29, 0.5);
}

.panneau__titre {
  font-family: var(--display); font-size: 1.85rem; font-weight: 400;
  line-height: 1.1; margin: 0 0 6px; color: var(--texte);
}
.panneau__sous { font-size: 0.86rem; color: var(--texte-faible); margin: 0 0 22px; max-width: none; }

.champ { margin-bottom: 15px; }
.champ__requis { color: var(--accent); margin-left: 3px; font-weight: 700; }
.champ label {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; margin-bottom: 7px; color: var(--texte-faible);
}
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 0.92rem; padding: 13px 14px;
  border: 1px solid var(--champ-bord); border-radius: var(--rayon);
  background: var(--champ-fond); color: var(--texte);
  /* Le navigateur dessine lui-même l'icône de calendrier, celle de l'horloge,
     le gabarit « jj/mm/aaaa » et la liste ouverte des menus déroulants — et il
     les dessine en sombre tant qu'on ne lui dit rien. Lisible sur les
     formulaires posés sur fond clair, presque invisible sur ceux des sections
     foncées, dont la « Réservation rapide » de l'accueil. Cette ligne accorde
     ces éléments natifs au thème du champ. */
  color-scheme: var(--schema-champ);
  transition: border-color 0.2s ease;
}

/* Safari sur iOS zoome sur le formulaire dès qu'on touche un champ dont le
   texte fait moins de 16 px. À 0.92rem, les champs font 14,7 px : la page se
   décalait à chaque champ touché, une dizaine de fois sur le formulaire de
   réservation. Le seuil que regarde Safari est en pixels, pas en rem, d'où la
   valeur écrite en dur. Limité aux largeurs mobiles : sur ordinateur, aucun
   navigateur ne zoome et le dessin du formulaire reste celui d'origine. */
@media (max-width: 1024px) {
  .champ input, .champ select, .champ textarea { font-size: 16px; }
}
.champ textarea { min-height: 110px; resize: vertical; }
/* Un champ est parfois cellule de grille (.champ--duo), et une cellule a par
   défaut une largeur minimale égale à son contenu. Or sur iOS les champs de
   date et d'heure portent une largeur intrinsèque : la cellule s'élargissait
   à leur mesure et débordait du panneau. Les deux lignes ci-dessous les
   autorisent à rétrécir. */
.champ { min-width: 0; }
.champ input, .champ select, .champ textarea { min-width: 0; max-width: 100%; }
/* Sur iOS, les champs de date et d'heure gardent l'apparence native du
   système : ils se dimensionnent sur leur contenu et ignorent width: 100 %,
   d'où un champ plus large que tous les autres, débordant du panneau. Ce
   n'était pas un problème de grille — sur la page mise à disposition, ces
   deux champs occupent chacun toute la largeur et débordaient quand même.
   Retirer l'apparence native leur rend un comportement de champ ordinaire,
   et aligne leur valeur à gauche comme le reste du formulaire. Le sélecteur
   du système continue de s'ouvrir au toucher. */
.champ input[type="date"],
.champ input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.champ input[type="date"]::-webkit-date-and-time-value,
.champ input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-faible); }
.champ select option { background: var(--carte); color: var(--texte); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent); outline: none; }

/* La flèche native des listes déroulantes se colle au bord droit : elle
   tombait à 7 px de la bordure quand le texte en garde 14 à gauche. On la
   remplace donc par la même chevron que le reste du site, posée à 14 px du
   bord — et l'affichage devient au passage identique d'un navigateur à
   l'autre, chacun dessinant la sienne autrement. */
.champ select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c09a38' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
/* Firefox garde un liseré sur l'option sélectionnée sans cette ligne */
.champ select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--texte); }

.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.estimation {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px; margin: 6px 0 18px;
  background: rgba(192, 154, 56, 0.09);
  border: 1px solid var(--filet);
  font-size: 0.82rem; color: var(--texte-faible);
}
.estimation strong {
  font-family: var(--display); font-size: 1.7rem; font-weight: 400;
  white-space: nowrap; line-height: 1;
  background: var(--degrade-prix); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.panneau__actions { display: grid; gap: 11px; }
.panneau__note { margin: 18px 0 0; font-size: 0.78rem; color: var(--texte-faible); text-align: center; }
.panneau__note a { color: var(--accent-texte); text-decoration: none; border-bottom: 1px solid var(--filet); }
/* Repli sans JavaScript. Les boutons d'envoi sont des <button type="button">
   pilotés par le script : sans lui, ils ne font rien — et surtout ils ne
   disent rien. Ce bloc ne s'affiche que dans ce cas et donne les trois voies
   directes. Il sert autant au visiteur qui a désactivé JavaScript qu'au jour
   où une erreur de script éteint le formulaire sans que personne le voie. */
.panneau__repli {
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--champ-bord); border-radius: var(--rayon);
  background: var(--champ-fond);
  font-size: 0.84rem; line-height: 1.55; color: var(--texte-doux);
}
.panneau__repli a { color: var(--accent-texte); text-decoration: none; border-bottom: 1px solid var(--filet); }

.erreur { font-size: 0.82rem; color: #c04a3c; margin: 0 0 12px; }
.theme-sombre .erreur, .theme-nuit .erreur, .hero .erreur { color: #e0736a; }
.erreur:empty { display: none; }

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

.section { padding: 116px 0; }
.section--serre { padding: 78px 0; }

.section__entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 56px;
}
.section__entete p { margin-bottom: 0; }

/* Services --------------------------------------------------------------- */

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.service {
  background: var(--carte);
  border: 1px solid var(--filet-doux);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.service:hover { border-color: var(--filet); }
.theme-clair .service:hover, .theme-sable .service:hover { box-shadow: 0 18px 40px -30px rgba(20, 23, 29, 0.55); }
.service h3 { margin-bottom: 12px; }
.service p { font-size: 0.92rem; margin-bottom: 22px; }
.service .lien-souligne { margin-top: auto; align-self: flex-start; }

.service__icone {
  width: 30px; height: 30px; margin-bottom: 22px;
  stroke: var(--accent); stroke-width: 1.2; fill: none;
}

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

.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.atout { border-top: 1px solid var(--filet); padding-top: 24px; }
.atout h3 { font-size: 1.3rem; margin-bottom: 10px; }
.atout p { font-size: 0.9rem; margin: 0; }

/* Blocs deux colonnes ---------------------------------------------------- */

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

.equipements {
  list-style: none; margin: 26px 0 34px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 26px; font-size: 0.92rem;
}
.equipements li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--filet-doux);
  color: var(--texte-doux);
}
.equipements li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--accent); transform: rotate(45deg);
}

.cadre-image, .bord-image {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--graphite), var(--encre-profonde));
  border: 1px solid var(--filet-doux);
  aspect-ratio: 4 / 3;
}
.cadre-image img, .bord-image img { width: 100%; height: 100%; object-fit: cover; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

/* Flotte ----------------------------------------------------------------- */

.flotte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.flotte a {
  display: block; text-decoration: none;
  border: 1px solid var(--filet-doux); background: var(--carte);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.flotte a:hover { border-color: var(--filet); }
.theme-clair .flotte a:hover, .theme-sable .flotte a:hover { box-shadow: 0 18px 40px -30px rgba(20, 23, 29, 0.55); }
.flotte .cadre-image, .flotte .cadre-vide { border: 0; border-bottom: 1px solid var(--filet-doux); aspect-ratio: 16 / 9; }
.flotte__texte { padding: 26px 30px 30px; }
.flotte h3 { font-size: 1.7rem; margin-bottom: 8px; }
.flotte p { font-size: 0.9rem; margin: 0 0 18px; }
.flotte dl { display: flex; gap: 26px; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--filet-doux); }
.flotte dl > div { flex: 1; }
.flotte dt { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--texte-faible); margin-bottom: 5px; }
.flotte dd {
  margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1;
  background: var(--degrade-prix); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cadre-vide {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  border: 1px dashed var(--filet);
  background: linear-gradient(140deg, var(--graphite), var(--encre-profonde));
  aspect-ratio: 4 / 3;
  font-size: 0.82rem; letter-spacing: 0.06em; color: #7d766a;
}

/* Tarifs ----------------------------------------------------------------- */

.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--filet); }
.tarif { padding: 36px 32px 36px 0; border-right: 1px solid var(--filet-doux); }
.tarif:last-child { border-right: 0; }
.tarif__prix {
  font-family: var(--display); font-size: 2.7rem; line-height: 1;
  display: block; margin-bottom: 12px;
  background: var(--degrade-prix); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tarif p { font-size: 0.86rem; margin: 0; color: var(--texte-faible); }

/* Horizon valaisan ------------------------------------------------------- */

.horizon { margin: 8px 0 56px; }
.horizon svg { width: 100%; height: auto; display: block; }
.horizon .ligne { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.horizon .voile { fill: rgba(192, 154, 56, 0.09); stroke: none; }
.horizon .repere { stroke: var(--filet); stroke-width: 1; stroke-dasharray: 3 4; }
.horizon .sol { stroke: var(--filet-doux); stroke-width: 1; }
.horizon .nom { fill: var(--texte); font-family: var(--display); font-size: 21px; }
.horizon .alt { fill: var(--texte-faible); font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; }
.horizon .fin { text-anchor: end; }
.horizon__legende { display: none; }

/* Forfaits ---------------------------------------------------------------- */

.forfaits { border-top: 1px solid var(--filet); }
.forfaits__ligne {
  display: grid; grid-template-columns: 1fr 130px 130px 160px; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--filet-doux); align-items: baseline;
}
.forfaits__ligne > span:first-child { font-size: 1rem; color: var(--texte); }
.forfaits__ligne > span { font-size: 0.92rem; color: var(--texte-doux); }
.forfaits__ligne .prix {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  background: var(--degrade-prix); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.forfaits__ligne .route { font-size: 0.84rem; color: var(--texte-faible); }
.forfaits__entete { padding: 14px 0 12px; }
.forfaits__entete > span,
.forfaits__entete > span:first-child {
  font-size: 0.74rem; letter-spacing: 0.1em; color: var(--texte-faible);
}

@media (max-width: 900px) {
  .forfaits__ligne { grid-template-columns: 1fr auto auto; gap: 6px 24px; padding: 20px 0; }
  .forfaits__ligne > span:first-child { grid-column: 1 / -1; }
  .forfaits__ligne .route { grid-column: 1 / -1; }
  .forfaits__entete { display: none; }
  .forfaits__ligne .prix {
    font-size: 1.35rem;
  }
  .forfaits__ligne .prix::before {
    content: attr(data-vehicule);
    font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.09em;
    color: var(--texte-faible); display: block; margin-bottom: 5px;
    -webkit-text-fill-color: var(--texte-faible);
  }
}

/* Destinations ----------------------------------------------------------- */

.destinations {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 30px;
}
.destinations li {
  padding: 14px 0; border-bottom: 1px solid var(--filet-doux);
  font-size: 0.93rem; color: var(--texte-doux);
}

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

.etapes {
  counter-reset: etape; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 38px;
}
.etapes li { counter-increment: etape; padding-top: 20px; border-top: 1px solid var(--filet); }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--display); font-size: 1.5rem; color: var(--accent);
  display: block; margin-bottom: 10px;
}
.etapes h3 { font-size: 1.2rem; margin-bottom: 8px; }
.etapes p { font-size: 0.9rem; margin: 0; }

/* Contact ---------------------------------------------------------------- */

.coords { list-style: none; margin: 0 0 34px; padding: 0; }
.coords li {
  display: flex; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--filet-doux); align-items: flex-start;
}
.coords svg { width: 20px; height: 20px; flex: none; margin-top: 4px; stroke: var(--accent); fill: none; stroke-width: 1.4; }
.coords a { text-decoration: none; font-weight: 600; color: var(--texte); }
.coords a:hover { color: var(--accent-texte); }
.coords span { display: block; font-size: 0.83rem; color: var(--texte-faible); font-weight: 400; }

.reseaux { display: flex; gap: 12px; flex-wrap: wrap; }

/* Bandeau d'appel — la seule surface dorée ------------------------------- */

.bandeau-appel {
  position: relative; padding: 92px 0; text-align: center;
  background: linear-gradient(102deg, #e2c887 0%, #c09a38 46%, #d8bd72 100%);
  color: #1a1405;
}
.bandeau-appel h2 { color: #14100a; margin-bottom: 14px; }
.bandeau-appel p { color: rgba(26, 20, 5, 0.78); margin: 0 auto 32px; }
.bandeau-appel .actions-groupe { justify-content: center; }
.bandeau-appel .bouton--or { background: var(--encre-profonde); color: var(--ivoire); }
.bandeau-appel .bouton--or:hover { background: var(--encre); }
.bandeau-appel .bouton--ligne { border-color: rgba(26, 20, 5, 0.45); color: #1a1405; }
.bandeau-appel .bouton--ligne:hover { background: rgba(26, 20, 5, 0.1); border-color: #1a1405; }
.bandeau-appel .bouton--vert { background: #126b33; }
/* Le contour de focus est or par défaut : sur ce fond or, il disparaîtrait. */
.bandeau-appel :focus-visible { outline-color: #14100a; }

/* En-tête de page interne ------------------------------------------------ */

.entete-page { position: relative; padding: 96px 0 92px; background: var(--encre-profonde); color: var(--ivoire); }
.entete-page h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); color: var(--ivoire); }
.entete-page p { font-size: 1.05rem; color: rgba(243, 239, 230, 0.76); }

/* Pied de page ----------------------------------------------------------- */

.pied { background: var(--encre-profonde); color: #948c7e; padding: 84px 0 34px; font-size: 0.9rem; }
.pied h3 {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  /* Ces titres étaient des h4 : passés en h3 pour ne plus sauter de niveau
     après le h2 de la dernière section. Le h3 générique impose line-height
     1.2, on reprend le 1.06 des h4 pour que le rendu ne bouge pas. */
  line-height: 1.06;
  letter-spacing: 0.14em; color: var(--or-clair); margin: 0 0 18px;
}
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 11px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied p { font-size: 0.9rem; color: #948c7e; }
.pied__bas {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid rgba(243, 239, 230, 0.12);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 0.8rem; color: #948c7e;
}

/* Le bas de pied tient sur une ligne au-delà d'environ 1180 px : le crédit de
   réalisation s'y place au centre, entre le copyright et les liens légaux.
   En dessous, les trois blocs s'empilent et le crédit passe en dernier, sous
   la mention OpenStreetMap — l'ordre du code reste celui de l'affichage
   sur ordinateur, c'est « order » qui le réarrange une fois empilé. */
@media (max-width: 1080px) {
  .pied__credit { order: 1; }
}

/* Barre mobile ----------------------------------------------------------- */

.barre-mobile {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
  background: rgba(8, 10, 14, 0.97);
  border-top: 1px solid rgba(192, 154, 56, 0.3);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.barre-mobile .bouton { flex: 1; padding: 15px 10px; font-size: 0.82rem; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 46px; padding: 64px 0 64px; }
  .panneau { max-width: 560px; }
  /* Le panneau élargi refuse ce plafond : sur la page contact, le
     formulaire occupe seul toute la largeur dès que la grille passe à
     une colonne. Sans cette ligne il restait figé à 560 px, calé à
     gauche dans un conteneur bien plus large, entre 600 et 960 px. */
  .panneau--large { max-width: none; }
  .duo { grid-template-columns: 1fr; gap: 44px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .atouts { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .tarifs { grid-template-columns: repeat(2, 1fr); }
  .tarif { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--filet-doux); }
  .tarif:nth-child(2) { border-right: 0; }
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .garanties div:nth-child(2) { border-right: 0; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Tablettes -----------------------------------------------------------------
   La barre d'en-tête réclame environ 1000 px pour tenir : la marque, quatre
   liens, le sélecteur de langue et le bouton doré. En dessous, elle débordait
   et faisait apparaître une barre de défilement horizontale sur toute la page
   — visible dès un iPad en portrait. Le menu passe donc en bouton ici, et non
   à 820 px comme auparavant. */

@media (max-width: 1024px) {
  body { padding-bottom: 78px; }
  .bandeau-haut { display: none; }
  .bandeau-haut .wrap { padding: 0 20px; }
  .burger { display: block; order: 3; margin-left: 0; }
  .entete .bouton { display: none; }
  /* Le sélecteur reste dans la barre, à gauche du bouton menu */
  .langues { order: 2; margin-left: auto; margin-right: 6px; }
  .entete__inner { position: relative; min-height: 68px; padding: 0 20px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--encre-profonde);
    border-bottom: 1px solid rgba(192, 154, 56, 0.3);
    padding: 6px 20px 20px;
  }
  .nav.est-ouvert { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid rgba(243, 239, 230, 0.12); }
  /* Sur grand écran, la réservation est portée par le bouton doré de l'en-tête.
     Ici ce bouton est masqué : le lien du menu en reprend la couleur pour rester
     l'action mise en avant, sans imiter un bouton au milieu d'une liste. Le
     sélecteur porte « a » car .nav a fixe déjà une couleur, plus spécifique
     qu'une simple classe. */
  .nav a.nav__reservation { display: block; color: var(--or-clair); font-weight: 600; }
  /* La barre d'appel fixe apparait avec le menu en bouton : sans elle, les
     78 px reserves plus haut resteraient un vide noir sous le pied de page. */
  .barre-mobile { display: flex; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .section { padding: 76px 0; }
  .section--serre { padding: 60px 0; }
  .section__entete { margin-bottom: 38px; }
  .services, .flotte { grid-template-columns: 1fr; gap: 16px; }
  /* En colonne unique, les espaces prévus pour quatre colonnes deviennent des
     trous : 92 px de vide entre le dernier lien et le filet, 112 px de noir
     sous la mention légale. On resserre, et le bas du pied se cale sur la
     hauteur de la barre d'appel fixe plutôt que de s'y ajouter. */
  .pied { padding: 54px 0 20px; }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .pied__bas { margin-top: 30px; padding-top: 20px; gap: 8px 20px; }
  .bandeau-appel { padding: 68px 0; }
  .entete-page { padding: 62px 0 62px; }
}

@media (max-width: 720px) {
  .horizon { margin-bottom: 36px; }
  .horizon .nom, .horizon .alt, .horizon .repere { display: none; }
  .horizon__legende { display: flex; justify-content: space-between; gap: 18px; margin-top: 14px; }
  .horizon__legende p { margin: 0; }
  .horizon__legende p:last-child { text-align: right; }
  .horizon__legende strong {
    display: block; font-family: var(--display); font-weight: 400;
    font-size: 1.2rem; color: var(--texte);
  }
  .horizon__legende span { font-size: 0.74rem; letter-spacing: 0.05em; color: var(--texte-faible); }
}

@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .hero h1 { font-size: 2.55rem; }
  .hero__inner { padding: 40px 0 48px; gap: 32px; }
  .panneau { padding: 26px 22px 24px; }
  .champ--duo { grid-template-columns: 1fr; }
  .garanties { grid-template-columns: 1fr; }
  .garanties div { border-right: 0; border-bottom: 1px solid rgba(243, 239, 230, 0.14); padding: 18px 0; }
  .garanties div:last-child { border-bottom: 0; }
  .atouts, .tarifs { grid-template-columns: 1fr; }
  .tarif { border-right: 0; padding: 24px 0; }
}

/* Téléphones ---------------------------------------------------------------
   La marque est en white-space: nowrap : à taille fixe, elle finit par
   pousser le bouton Menu hors de l'écran. Le palier précédent s'arrêtait à
   420 px, or un iPhone 15 Pro Max en fait 430 — dix pixels de trop, et la
   barre débordait. Plutôt que de viser une largeur d'appareil, la taille de
   la marque suit maintenant celle de l'écran, entre deux bornes. */

@media (max-width: 520px) {
  .entete__inner { padding: 0 14px; gap: 10px; }
  .marque { font-size: clamp(0.78rem, 3.9vw, 1.35rem); }
  .langues { font-size: 0.7rem; gap: 5px; margin-right: 2px; }
  .burger { padding: 9px 11px; font-size: 0.78rem; }
  .nav { padding: 6px 14px 18px; }
  .estimation strong { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}