/* ==========================================================================
   ANOLIS AUTO — styles.css
   Mobile d'abord (375px), puis 640px, puis 1024px.
   Toutes les couleurs, espacements et rayons sont en variables ci-dessous :
   c'est le seul endroit à modifier pour adapter le site à une autre agence.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  /* ---- Couleurs de marque ---- */
  --couleur-fond: #F8F9FA;
  --couleur-fond-carte: #FFFFFF;
  --couleur-fond-contraste: #0F2E3D;
  --couleur-fond-contraste-soft: #163a4c;
  --couleur-accent: #F5B921;
  --couleur-accent-hover: #e0a90f;
  --couleur-accent-texte: #0F2E3D;
  --couleur-lagon: #2AA8A0;
  --couleur-lagon-hover: #22897f;
  --couleur-texte: #101D24;
  --couleur-texte-clair: #4b5b63;
  --couleur-gris: #DDE2E6;
  --couleur-gris-clair: #EEF1F3;
  --couleur-blanc: #FFFFFF;
  --couleur-alerte: #B3401C;

  /* ---- Teintes dérivées (fonds légers) ---- */
  --lagon-10: rgba(42, 168, 160, 0.10);
  --lagon-20: rgba(42, 168, 160, 0.18);
  --accent-15: rgba(245, 185, 33, 0.18);
  --contraste-texte-doux: rgba(248, 249, 250, 0.78);

  /* ---- Typographie ---- */
  --police-titres: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --police-corps: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --police-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Espacements ---- */
  --espace-3xs: .25rem;
  --espace-2xs: .5rem;
  --espace-xs: .75rem;
  --espace-sm: 1rem;
  --espace-md: 1.5rem;
  --espace-lg: 2.5rem;
  --espace-xl: 4rem;
  --espace-2xl: 6rem;

  /* ---- Rayons ---- */
  --rayon-sm: 8px;
  --rayon-md: 14px;
  --rayon-lg: 22px;
  --rayon-pill: 999px;

  /* ---- Ombres ---- */
  --ombre-carte: 0 4px 18px rgba(16, 29, 36, 0.08);
  --ombre-carte-hover: 0 10px 30px rgba(16, 29, 36, 0.14);
  --ombre-barre: 0 16px 40px rgba(16, 29, 36, 0.18);

  /* ---- Mise en page ---- */
  --largeur-max: 1220px;
  --largeur-texte: 720px;
  --hauteur-entete: 72px;

  --transition: .2s ease;
  --transition-lente: .35s ease;
}

/* ==========================================================================
   RÉINITIALISATION
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 90px); }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--police-titres); font-weight: 800; line-height: 1.15; margin: 0 0 var(--espace-sm); color: var(--couleur-texte); }
p { margin: 0 0 var(--espace-sm); }
table { border-collapse: collapse; width: 100%; }

/* Filtre commun appliqué à toutes les photos du site : cohérence visuelle
   même si les photos viennent de sources différentes (voir la note sur les
   photos placeholder dans script.js). */
img.photo-flotte, .fiche-photo, .hero-photo img, .photo-filtre {
  filter: contrast(1.03) saturate(1.02);
}

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

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-sm);
}

.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement {
  position: absolute; left: -999px; top: 0; background: var(--couleur-accent); color: var(--couleur-accent-texte);
  padding: var(--espace-xs) var(--espace-sm); z-index: 200; border-radius: 0 0 var(--rayon-sm) 0; font-weight: 700;
}
.lien-evitement:focus { left: 0; }

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.5em;
  border-radius: var(--rayon-pill);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.bouton--plein { background: var(--couleur-accent); color: var(--couleur-accent-texte); }
.bouton--plein:hover { background: var(--couleur-accent-hover); transform: translateY(-1px); }
.bouton--contour { background: transparent; border-color: var(--couleur-fond-contraste); color: var(--couleur-fond-contraste); }
.bouton--contour:hover { background: var(--couleur-fond-contraste); color: var(--couleur-blanc); }
.bouton--contour-clair { background: transparent; border-color: rgba(255,255,255,.5); color: var(--couleur-blanc); }
.bouton--contour-clair:hover { background: rgba(255,255,255,.12); border-color: var(--couleur-blanc); }
.bouton--lagon { background: var(--couleur-lagon); color: var(--couleur-blanc); }
.bouton--lagon:hover { background: var(--couleur-lagon-hover); transform: translateY(-1px); }
.bouton--whatsapp { background: #EAF7EC; color: #15602a; border-color: #cdeccf; }
.bouton--whatsapp:hover { background: #d9f2dc; }
.bouton--bloc { width: 100%; }
.bouton--petit { padding: .6em 1.1em; font-size: .85rem; }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--hauteur-entete);
  display: flex;
  align-items: center;
  background: rgba(248, 249, 250, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--couleur-gris);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-sm); min-width: 0; }
.entete-logo { display: flex; flex-direction: column; text-decoration: none; color: var(--couleur-texte); line-height: 1.1; min-width: 0; overflow: hidden; }
.entete-logo strong { font-family: var(--police-titres); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.entete-logo strong span { color: var(--couleur-lagon); }
.entete-logo small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--couleur-texte-clair); }

.menu-bouton {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--couleur-gris);
  background: var(--couleur-blanc);
  flex-direction: column; gap: 4px;
}
.menu-bouton span { display: block; width: 20px; height: 2px; background: var(--couleur-texte); }

.nav-principale {
  position: fixed;
  top: var(--hauteur-entete); left: 0; right: 0;
  background: var(--couleur-blanc);
  border-bottom: 1px solid var(--couleur-gris);
  padding: var(--espace-sm);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.nav-principale.est-ouvert { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-principale ul { display: flex; flex-direction: column; gap: var(--espace-2xs); }
.nav-principale a { display: block; padding: var(--espace-xs) var(--espace-2xs); text-decoration: none; font-weight: 600; border-radius: var(--rayon-sm); }
.nav-principale a:hover, .nav-principale a[aria-current="page"] { background: var(--lagon-10); color: var(--couleur-lagon); }

.entete-actions { display: flex; align-items: center; gap: var(--espace-2xs); flex-shrink: 0; }
.entete-tel { display: none; }
/* Sur mobile, le bouton "Réserver" de l'en-tête est masqué : la barre fixe
   du bas (Réserver / Appeler) prend déjà ce rôle, pour ne pas surcharger
   l'en-tête sur un petit écran. */
.entete-actions > a.bouton { display: none; }

/* ==========================================================================
   HERO + MODULE DE RÉSERVATION
   ========================================================================== */

.hero {
  position: relative;
  margin-top: var(--hauteur-entete);
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-degrade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,46,61,.15) 0%, rgba(15,46,61,.25) 55%, rgba(15,46,61,.78) 100%);
  z-index: 1;
}
.hero-contenu { position: relative; z-index: 2; color: var(--couleur-blanc); padding-block: var(--espace-2xl) var(--espace-xl); width: 100%; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--accent-15); border: 1px solid rgba(245,185,33,.5);
  color: var(--couleur-accent);
  padding: .35em .9em; border-radius: var(--rayon-pill);
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  margin-bottom: var(--espace-sm);
}
.hero h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); max-width: 14ch; margin-bottom: var(--espace-2xs); }
.hero-souschapo { font-size: 1.05rem; max-width: 46ch; color: var(--contraste-texte-doux); margin-bottom: var(--espace-md); }

#reservation-sentinelle { position: absolute; top: 0; height: 1px; width: 1px; }

.reservation-conteneur { position: relative; z-index: 3; }
.reservation-barre {
  background: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-barre);
  padding: var(--espace-md);
  display: grid;
  gap: var(--espace-sm);
  min-width: 0;
  max-width: 100%;
}
.reservation-champ { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.reservation-champ label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--couleur-texte-clair); }
.reservation-champ select,
.reservation-champ input {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--couleur-gris);
  border-radius: var(--rayon-sm);
  padding: .7em .6em;
  font-family: var(--police-corps);
  font-size: .95rem;
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}
.reservation-champ select:focus, .reservation-champ input:focus { border-color: var(--couleur-lagon); }
.reservation-ligne-dates { display: grid; grid-template-columns: 1fr; gap: var(--espace-sm); min-width: 0; }
.reservation-barre .bouton { margin-top: var(--espace-2xs); }

/* Barre collante après le hero — uniquement à partir de 640px. Sur mobile,
   le formulaire complet est trop haut pour rester épinglé en haut de
   l'écran ; c'est la barre fixe du bas (Réserver / Appeler) qui prend le
   relais pour garder l'action accessible pendant le défilement. */
@media (min-width: 640px) {
  .reservation-barre.est-collante {
    position: fixed;
    top: var(--hauteur-entete);
    left: 0; right: 0;
    border-radius: 0;
    z-index: 90;
    max-width: 100%;
  }
}

/* ==========================================================================
   BANDEAU AÉROPORT
   ========================================================================== */

.bandeau-aeroport {
  position: relative;
  color: var(--couleur-blanc);
  padding-block: var(--espace-md);
  overflow: hidden;
}
.bandeau-aeroport-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bandeau-aeroport-degrade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,46,61,.94) 0%, rgba(15,46,61,.86) 45%, rgba(15,46,61,.55) 100%); z-index: 1; }
.bandeau-aeroport .conteneur {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-sm) var(--espace-lg);
}
.bandeau-aeroport-avion { font-size: 1.8rem; flex-shrink: 0; }
.bandeau-aeroport-texte { flex: 1 1 260px; }
.bandeau-aeroport-texte strong { display: block; font-family: var(--police-titres); font-size: 1.05rem; margin-bottom: .15em; }
.bandeau-aeroport-texte span { color: var(--contraste-texte-doux); font-size: .92rem; }
.bandeau-aeroport .bouton { flex-shrink: 0; }

/* ==========================================================================
   BANNIÈRE DE PAGE AVEC PHOTO (pages secondaires)
   ========================================================================== */

.section-photo {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding-block: var(--espace-xl);
}
.section-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.section-photo-degrade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15,46,61,.95) 0%, rgba(15,46,61,.82) 50%, rgba(15,46,61,.5) 100%);
}
.section-photo-contenu { position: relative; z-index: 2; color: var(--couleur-blanc); }
.section-photo-contenu h1 { color: var(--couleur-blanc); }
.section-photo-contenu .section-chapo { color: var(--contraste-texte-doux); }

/* ==========================================================================
   BANDEAU D'INCLUSIONS
   ========================================================================== */

.bandeau-inclusions { padding-block: var(--espace-lg); border-bottom: 1px solid var(--couleur-gris); }
.inclusions-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-md);
}
.inclusion { display: flex; align-items: center; gap: var(--espace-xs); }
.inclusion-icone {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lagon-10); color: var(--couleur-lagon);
  border-radius: 50%; font-size: 1.3rem;
}
.inclusion strong { display: block; font-size: .92rem; }
.inclusion span { font-size: .82rem; color: var(--couleur-texte-clair); }

/* ==========================================================================
   SECTIONS GÉNÉRALES
   ========================================================================== */

.section { padding-block: var(--espace-2xl); }
.section--serree { padding-block: var(--espace-xl); }
.section--contraste { background: var(--couleur-fond-contraste); color: var(--couleur-blanc); }
.section--contraste h2 { color: var(--couleur-blanc); }
.section--carte { background: var(--couleur-blanc); }
.section-entete { max-width: var(--largeur-texte); margin-bottom: var(--espace-lg); }
.section-kicker {
  display: inline-block; font-family: var(--police-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--couleur-lagon); margin-bottom: var(--espace-2xs);
}
.section h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.section-chapo { color: var(--couleur-texte-clair); font-size: 1.02rem; }
.section--contraste .section-chapo { color: var(--contraste-texte-doux); }

/* ==========================================================================
   BANDEAU DE SAISONNALITÉ
   ========================================================================== */

.bandeau-saison {
  background: var(--accent-15);
  border-top: 1px solid rgba(245,185,33,.4);
  border-bottom: 1px solid rgba(245,185,33,.4);
  padding-block: var(--espace-sm);
  text-align: center;
  font-size: .9rem;
}
.bandeau-saison strong { color: var(--couleur-accent-texte); }

/* ==========================================================================
   FLOTTE — FILTRES ET FICHES
   ========================================================================== */

.filtres-flotte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-sm);
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-gris);
  border-radius: var(--rayon-md);
  padding: var(--espace-md);
  margin-bottom: var(--espace-lg);
}
.filtre-champ { display: flex; flex-direction: column; gap: .35rem; }
.filtre-champ label { font-size: .78rem; font-weight: 700; color: var(--couleur-texte-clair); text-transform: uppercase; letter-spacing: .03em; }
.filtre-champ select {
  border: 1.5px solid var(--couleur-gris); border-radius: var(--rayon-sm);
  padding: .65em .8em; background: var(--couleur-fond); font-family: var(--police-corps); font-size: .92rem;
}
.filtres-flotte [data-reinitialiser] {
  justify-self: start;
  background: none; border: none; color: var(--couleur-lagon); font-weight: 700; text-decoration: underline;
  cursor: pointer; padding: 0;
}

.grille-flotte { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); }

.fiche-vehicule {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-gris);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.fiche-vehicule:hover { box-shadow: var(--ombre-carte-hover); transform: translateY(-2px); }

.fiche-photo-cadre { position: relative; aspect-ratio: 4 / 3; background: var(--couleur-gris-clair); overflow: hidden; }
.fiche-photo { width: 100%; height: 100%; object-fit: cover; }

.badge {
  position: absolute; top: var(--espace-2xs); left: var(--espace-2xs);
  padding: .35em .85em; border-radius: var(--rayon-pill);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--couleur-blanc);
  background: var(--couleur-fond-contraste);
}
.badge--citadine { background: #2AA8A0; }
.badge--compacte { background: #1c7fbf; }
.badge--suv { background: #b3771c; }
.badge--4x4 { background: #b3401c; }
.badge--7places { background: #6a4fc4; }

.fiche-corps { padding: var(--espace-sm) var(--espace-md) var(--espace-md); display: flex; flex-direction: column; gap: var(--espace-2xs); flex: 1; }
.fiche-nom { font-size: 1.1rem; margin-bottom: .2rem; }

.fiche-picto { display: flex; flex-wrap: wrap; gap: var(--espace-2xs) var(--espace-sm); font-family: var(--police-mono); font-size: .78rem; color: var(--couleur-texte-clair); margin-bottom: .2rem; }
.fiche-picto li { display: flex; align-items: center; gap: .3em; }

.fiche-note { font-size: .82rem; color: var(--couleur-lagon); font-weight: 600; margin-bottom: 0; }

.fiche-prix { border-top: 1px dashed var(--couleur-gris); margin-top: var(--espace-2xs); padding-top: var(--espace-2xs); }
.fiche-prix-base { font-family: var(--police-mono); font-size: .95rem; margin: 0; }
.fiche-prix-base--grand strong { font-size: 1.35rem; color: var(--couleur-fond-contraste); }
.fiche-prix-calcule { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-family: var(--police-mono); }
.fiche-duree { font-size: .82rem; color: var(--couleur-texte-clair); }
.fiche-total { font-size: 1.4rem; font-weight: 700; color: var(--couleur-fond-contraste); }

.lien-degressif { background: none; border: none; color: var(--couleur-lagon); font-weight: 700; font-size: .82rem; padding: .4em 0; cursor: pointer; text-decoration: underline; }
.fiche-degressif-detail table { margin-top: .4rem; font-family: var(--police-mono); font-size: .78rem; }
.fiche-degressif-detail th, .fiche-degressif-detail td { text-align: left; padding: .3em .5em .3em 0; border-bottom: 1px solid var(--couleur-gris); }

.fiche-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2xs); align-items: center; margin-top: var(--espace-2xs); }
.fiche-actions .bouton { flex: 1 1 auto; }
.fiche-comparer { display: flex; align-items: center; gap: .4em; font-size: .82rem; color: var(--couleur-texte-clair); width: 100%; margin-top: .2rem; }

.flotte-vide { text-align: center; color: var(--couleur-texte-clair); padding: var(--espace-lg) 0; grid-column: 1 / -1; }

/* Comparateur */
.comparateur-resultat-conteneur { overflow-x: auto; }
.table-comparateur { min-width: 480px; background: var(--couleur-blanc); border-radius: var(--rayon-md); overflow: hidden; box-shadow: var(--ombre-carte); }
.table-comparateur th, .table-comparateur td { padding: .75em 1em; border-bottom: 1px solid var(--couleur-gris); text-align: left; font-size: .9rem; }
.table-comparateur thead th { background: var(--couleur-fond-contraste); color: var(--couleur-blanc); font-family: var(--police-titres); }
.comparateur-vide { color: var(--couleur-texte-clair); font-style: italic; }

/* ==========================================================================
   TARIFS DÉGRESSIFS (tableau)
   ========================================================================== */

.table-tarifs-conteneur { overflow-x: auto; }
.table-tarifs { min-width: 480px; background: var(--couleur-blanc); border-radius: var(--rayon-md); overflow: hidden; box-shadow: var(--ombre-carte); font-family: var(--police-mono); }
.table-tarifs th, .table-tarifs td { padding: .85em 1.1em; text-align: left; border-bottom: 1px solid var(--couleur-gris); }
.table-tarifs thead th { background: var(--couleur-fond-contraste); color: var(--couleur-blanc); font-family: var(--police-titres); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.table-tarifs tbody tr:last-child td { border-bottom: none; }
.table-tarifs td.reduction { color: var(--couleur-lagon); font-weight: 700; }

/* ==========================================================================
   ASSURANCES — tableau comparatif 3 colonnes
   ========================================================================== */

.grille-assurances { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); }
.carte-assurance {
  background: var(--couleur-blanc);
  border: 2px solid var(--couleur-gris);
  border-radius: var(--rayon-lg);
  padding: var(--espace-md);
  display: flex; flex-direction: column; gap: var(--espace-2xs);
}
.carte-assurance--recommandee { border-color: var(--couleur-lagon); box-shadow: var(--ombre-carte-hover); position: relative; }
.carte-assurance--recommandee::before {
  content: "La plus choisie";
  position: absolute; top: -14px; left: var(--espace-md);
  background: var(--couleur-lagon); color: var(--couleur-blanc);
  font-size: .72rem; font-weight: 700; padding: .3em .8em; border-radius: var(--rayon-pill);
}
.carte-assurance h3 { font-size: 1.2rem; margin-bottom: 0; }
.carte-assurance-souschapo { color: var(--couleur-texte-clair); font-size: .85rem; margin-bottom: var(--espace-2xs); }
.carte-assurance-franchise { font-family: var(--police-mono); font-size: 2rem; font-weight: 700; color: var(--couleur-fond-contraste); line-height: 1; }
.carte-assurance-franchise small { display: block; font-family: var(--police-corps); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--couleur-texte-clair); margin-top: .3em; }
.carte-assurance-liste { display: flex; flex-direction: column; gap: .5em; margin-block: var(--espace-2xs); font-size: .9rem; }
.carte-assurance-liste li { display: flex; align-items: center; gap: .5em; }
.icone-oui { color: var(--couleur-lagon); font-weight: 800; }
.icone-non { color: var(--couleur-texte-clair); }
.carte-assurance-supplement { font-family: var(--police-mono); font-size: .95rem; margin-top: auto; padding-top: var(--espace-2xs); border-top: 1px dashed var(--couleur-gris); }

.avertissement-exemple {
  background: var(--accent-15);
  border: 1px solid rgba(245,185,33,.5);
  border-radius: var(--rayon-md);
  padding: var(--espace-sm);
  font-size: .88rem;
  margin-top: var(--espace-md);
}

/* ==========================================================================
   ENCART RÉSERVATION DIRECTE
   ========================================================================== */

.encart-direct { background: linear-gradient(135deg, var(--couleur-fond-contraste), var(--couleur-fond-contraste-soft)); color: var(--couleur-blanc); border-radius: var(--rayon-lg); padding: var(--espace-lg); }
.encart-direct-grille { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); }
.encart-direct-avantage { display: flex; gap: var(--espace-xs); align-items: flex-start; }
.encart-direct-avantage span.icone { font-size: 1.4rem; }
.encart-direct-avantage strong { display: block; margin-bottom: .2em; }
.encart-direct-avantage p { color: var(--contraste-texte-doux); font-size: .9rem; margin: 0; }

/* ==========================================================================
   LONGUE DURÉE
   ========================================================================== */

.grille-longue-duree { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); align-items: start; }
.table-longue-duree { background: var(--couleur-blanc); border-radius: var(--rayon-md); overflow: hidden; box-shadow: var(--ombre-carte); }
.table-longue-duree th, .table-longue-duree td { padding: .85em 1em; border-bottom: 1px solid var(--couleur-gris); text-align: left; font-size: .9rem; }
.table-longue-duree thead th { background: var(--couleur-fond-contraste); color: var(--couleur-blanc); }
.liste-avantages-ld { display: flex; flex-direction: column; gap: var(--espace-xs); }
.liste-avantages-ld li { display: flex; gap: .6em; align-items: flex-start; background: var(--couleur-blanc); border: 1px solid var(--couleur-gris); border-radius: var(--rayon-md); padding: var(--espace-sm); }
.liste-avantages-ld .icone { color: var(--couleur-lagon); font-size: 1.2rem; }

.formulaire-carte {
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-gris);
  border-radius: var(--rayon-lg);
  padding: var(--espace-md);
  box-shadow: var(--ombre-carte);
}
.champ-formulaire { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--espace-sm); }
.champ-formulaire label { font-weight: 700; font-size: .88rem; }
.champ-formulaire small { color: var(--couleur-texte-clair); font-size: .78rem; }
.champ-formulaire input, .champ-formulaire select, .champ-formulaire textarea {
  border: 1.5px solid var(--couleur-gris); border-radius: var(--rayon-sm);
  padding: .75em .85em; font-family: var(--police-corps); font-size: .95rem; background: var(--couleur-fond);
}
.champ-formulaire textarea { resize: vertical; min-height: 100px; }
.ligne-champs { display: grid; grid-template-columns: 1fr; gap: var(--espace-sm); }

/* ==========================================================================
   FAQ — ACCORDÉON
   ========================================================================== */

.accordeon { max-width: var(--largeur-texte); }
.accordeon-item { border-bottom: 1px solid var(--couleur-gris); }
.accordeon-declencheur {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: var(--espace-sm) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--espace-sm);
  font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--couleur-texte);
}
.accordeon-declencheur .icone-plus { flex-shrink: 0; font-size: 1.3rem; color: var(--couleur-lagon); transition: transform var(--transition); }
.accordeon-declencheur[aria-expanded="true"] .icone-plus { transform: rotate(45deg); }
.accordeon-panneau { padding-bottom: var(--espace-sm); color: var(--couleur-texte-clair); }
.accordeon-panneau p { margin: 0; }

/* ==========================================================================
   SECTION CONFIANCE — COMPTEURS
   ========================================================================== */

.grille-confiance { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-md); text-align: center; }
.compteur-bloc { display: flex; flex-direction: column; gap: .2rem; }
.compteur-valeur { font-family: var(--police-mono); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; color: var(--couleur-accent); }
.compteur-legende { font-size: .82rem; color: var(--contraste-texte-doux); }

/* ==========================================================================
   AVIS CLIENTS
   ========================================================================== */

.grille-avis { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); }
.carte-avis { background: var(--couleur-blanc); border: 1px solid var(--couleur-gris); border-radius: var(--rayon-md); padding: var(--espace-md); box-shadow: var(--ombre-carte); }
.carte-avis-etoiles { color: var(--couleur-accent); letter-spacing: .1em; margin-bottom: var(--espace-2xs); }
.carte-avis p.texte-avis { font-style: italic; color: var(--couleur-texte); }
.carte-avis-auteur { display: flex; flex-direction: column; font-size: .85rem; color: var(--couleur-texte-clair); margin-top: var(--espace-2xs); }
.carte-avis-auteur strong { color: var(--couleur-texte); }

/* ==========================================================================
   NOUS TROUVER
   ========================================================================== */

.grille-carte { display: grid; grid-template-columns: 1fr; gap: var(--espace-md); }
.carte-infos-pratiques { display: flex; flex-direction: column; gap: var(--espace-sm); }
.info-pratique { display: flex; gap: var(--espace-xs); }
.info-pratique .icone { font-size: 1.3rem; color: var(--couleur-lagon); flex-shrink: 0; }
.info-pratique strong { display: block; }
.carte-iframe-cadre { border-radius: var(--rayon-md); overflow: hidden; border: 1px solid var(--couleur-gris); aspect-ratio: 4 / 3; }
.carte-iframe-cadre iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   BLOC FINAL CTA
   ========================================================================== */

.cta-final { text-align: center; }
.cta-final-actions { display: flex; flex-direction: column; gap: var(--espace-2xs); align-items: stretch; max-width: 360px; margin-inline: auto; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.pied-page { background: var(--couleur-fond-contraste); color: var(--contraste-texte-doux); padding-block: var(--espace-xl) var(--espace-md); }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: var(--espace-lg); margin-bottom: var(--espace-lg); }
.pied-bloc h4 { color: var(--couleur-blanc); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--espace-sm); }
.pied-bloc p, .pied-bloc a { color: var(--contraste-texte-doux); text-decoration: none; font-size: .9rem; }
.pied-bloc ul { display: flex; flex-direction: column; gap: .5em; }
.pied-bloc a:hover { color: var(--couleur-blanc); }
.pied-logo { color: var(--couleur-blanc); font-family: var(--police-titres); font-weight: 800; font-size: 1.3rem; margin-bottom: .3em; display: block; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--espace-sm); display: flex; flex-wrap: wrap; gap: var(--espace-sm); justify-content: space-between; font-size: .8rem; color: rgba(248,249,250,.55); }

/* ==========================================================================
   BARRE FIXE MOBILE (Réserver / Appeler)
   ========================================================================== */

.barre-mobile-fixe {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--couleur-blanc);
  border-top: 1px solid var(--couleur-gris);
  box-shadow: 0 -6px 20px rgba(16,29,36,.1);
  padding: var(--espace-2xs);
  gap: var(--espace-2xs);
}
.barre-mobile-fixe .bouton { width: 100%; padding-inline: .5em; }

/* ==========================================================================
   PAGE CONDITIONS — mise en page longue
   ========================================================================== */

.bloc-condition { margin-bottom: var(--espace-lg); }
.bloc-condition h3 { font-size: 1.15rem; }
.sommaire-conditions { display: flex; flex-wrap: wrap; gap: var(--espace-2xs); margin-bottom: var(--espace-lg); }
.sommaire-conditions a {
  text-decoration: none; font-size: .85rem; font-weight: 700; color: var(--couleur-lagon);
  background: var(--lagon-10); padding: .5em 1em; border-radius: var(--rayon-pill);
}

/* ==========================================================================
   RESPONSIVE — 640px et plus
   ========================================================================== */

@media (min-width: 640px) {
  .reservation-ligne-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reservation-barre { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) auto; align-items: end; }
  .reservation-barre .reservation-ligne-dates { grid-column: span 2; }
  .reservation-barre .bouton { margin-top: 0; }

  .reservation-conteneur { margin-top: -64px; position: relative; z-index: 3; }

  .barre-mobile-fixe { display: none; }

  .inclusions-grille { grid-template-columns: repeat(4, 1fr); }
  .grille-flotte { grid-template-columns: repeat(2, 1fr); }
  .filtres-flotte { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
  .grille-assurances { grid-template-columns: repeat(3, 1fr); }
  .encart-direct-grille { grid-template-columns: repeat(3, 1fr); }
  .grille-avis { grid-template-columns: repeat(3, 1fr); }
  .grille-confiance { grid-template-columns: repeat(4, 1fr); }
  .pied-grille { grid-template-columns: repeat(2, 1fr); }
  .ligne-champs { grid-template-columns: 1fr 1fr; }
  .grille-carte { grid-template-columns: 1fr 1fr; }
  .cta-final-actions { flex-direction: row; justify-content: center; max-width: none; }
}

/* ==========================================================================
   RESPONSIVE — 1024px et plus
   ========================================================================== */

@media (min-width: 1024px) {
  /* La navigation horizontale complète (5 liens + téléphone + bouton) a
     besoin de cette largeur pour ne pas écraser le logo — en dessous,
     le menu burger prend le relais, y compris sur tablette. */
  .entete-tel { display: inline-flex; }
  .entete-actions > a.bouton { display: inline-flex; }
  .menu-bouton { display: none; }
  .nav-principale {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    background: none; border: none; padding: 0; width: auto;
  }
  .nav-principale ul { flex-direction: row; gap: var(--espace-md); }
  .nav-principale a:hover, .nav-principale a[aria-current="page"] { background: none; color: var(--couleur-lagon); }

  .grille-flotte { grid-template-columns: repeat(3, 1fr); }
  .pied-grille { grid-template-columns: repeat(4, 1fr); }
  .grille-longue-duree { grid-template-columns: 1.3fr 1fr; }
  .encart-direct { padding: var(--espace-2xl); }
  .hero { min-height: 86vh; }
}

/* ==========================================================================
   ACCESSIBILITÉ — mouvement réduit
   ========================================================================== */

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