/* ==========================================================================
   Les Partenaires de l'Auto — style.css
   Mobile d'abord. Reprend la maquette validée (accueil « Main »).
   Sommaire :
     1. Polices
     2. Base
     3. Utilitaires
     4. Mise en page et sections
     5. Typographie
     6. Boutons et étiquettes
     7. En-tête
     8. Accueil (hero) : rappel, photo, pastilles
     8 bis. Véhicules : carrousel des modèles
     8 ter. Le loyer : ce qui est compris
     8 quater. Tarifs et conditions
     8 quinquies. Étapes et agences
     8 sexies. Simulateur de revenus
     8 septies. Propriétaires et questions fréquentes
     8 octies. Contact et formulaire de demande
     9. Pied de page
    10. Barre de contact collante
    11. Bandeau cookies
   ========================================================================== */

/* ---------- 1. Polices (hébergées sur le site) ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/outfit-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/outfit-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/outfit-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600.woff2") format("woff2"); }

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* place pour la barre de contact collante du téléphone */
  padding-bottom: calc(var(--hauteur-barre-contact) + var(--zone-sure-bas));
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: var(--ih-texte);
  color: var(--c-encre);
  background: var(--c-fond);
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

img,
svg,
picture { display: block; max-width: 100%; }

input,
button,
select,
textarea { font: inherit; color: inherit; }

a { color: var(--c-encre); }
a:hover { color: var(--c-bleu); }

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-decalage);
}

/* Sur fond sombre, l'anneau de focus passe en ciel */
.section--nuit :focus-visible,
.section--marine :focus-visible,
.barre-contact :focus-visible { outline: var(--focus-sombre); }

/* ---------- 3. Utilitaires ---------- */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 300;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-pilule);
  background: var(--c-marine);
  color: var(--c-sur-sombre);
  font-weight: var(--g-moyenne);
  text-decoration: none;
}
.lien-evitement:focus { top: var(--e-4); color: var(--c-sur-sombre); }

/* Empêche la coupure d'un mot composé en fin de ligne (Île-de-France, reste-t-il) */
.sans-coupure { white-space: nowrap; }

/* Champ piège anti-robots : invisible pour les visiteurs */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 4. Mise en page et sections ---------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e-gouttiere);
}

.section { padding-block: var(--e-section); }
.section--serree-bas { padding-bottom: var(--e-section-serree); }
.section--serree-haut { padding-top: var(--e-section-serree); }
.section--sans-haut { padding-top: 0; }

.section--nuit {
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
}

/* Fond gris clair : sépare deux sections claires sans ajouter de bleu */
.section--gris { background: var(--c-fond-alt); }

.section--marine {
  background: var(--c-marine);
  color: var(--c-sur-sombre);
}

.section--nuit a:not(.bouton),
.section--marine a:not(.bouton) { color: var(--c-sur-sombre); }

.section--centree .conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- 5. Typographie ---------- */
.titre-hero,
.titre-section {
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  line-height: var(--ih-titres);
  letter-spacing: var(--ls-titres);
  text-wrap: balance;
}

.titre-hero {
  max-width: var(--mesure-titre);
  margin-bottom: var(--e-6);
  font-size: var(--t-hero);
}

.titre-section {
  max-width: var(--mesure-titre);
  margin-bottom: var(--e-6);
  font-size: var(--t-section);
}

.titre-section--xl {
  max-width: none;
  margin-bottom: var(--e-7);
  font-size: var(--t-section-xl);
}

/* Titre suivi directement de cartes (sans paragraphe d'introduction) */
.titre-section--espace { margin-bottom: var(--e-12); }

.surtitre {
  margin-bottom: var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: var(--t-surtitre);
  color: var(--c-encre-douce);
}

.section--nuit .surtitre,
.section--marine .surtitre { color: var(--c-sur-sombre-doux); }

.intro {
  max-width: var(--mesure-intro);
  margin-bottom: var(--e-8);
  font-size: var(--t-intro);
  line-height: var(--ih-intro);
  text-wrap: pretty;
}

.section--centree .intro {
  max-width: 32em;
  margin-bottom: var(--e-9);
  font-size: var(--t-intro-xl);
}

/* ---------- 6. Boutons et étiquettes ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--h-bouton-section);
  padding: 0.75rem 1.875rem;
  border: 0;
  border-radius: var(--r-pilule);
  font-family: var(--police-texte);
  font-weight: var(--g-moyenne);
  font-size: var(--t-bouton);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) ease, color var(--duree) ease;
}

.bouton svg { flex: none; }

.bouton--petit {
  min-height: var(--h-bouton-petit);
  padding: 0.625rem 1.25rem;
  font-size: var(--t-bouton-petit);
}

.bouton--carte {
  min-height: var(--h-bouton);
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
}

.bouton--grand {
  min-height: var(--h-bouton-grand);
  padding: 0.875rem 2.25rem;
}

/* Bouton principal : pilule nuit, presque noire, comme les boutons de Revolut */
.bouton--marine { background: var(--c-nuit); color: var(--c-sur-sombre); }
.bouton--marine:hover { background: var(--c-marine); color: var(--c-sur-sombre); }

.bouton--blanc { background: var(--c-fond); color: var(--c-nuit); }
.bouton--blanc:hover { background: var(--c-fond-alt); color: var(--c-nuit); }

.bouton--whatsapp { background: var(--c-whatsapp); color: var(--c-nuit); }
.bouton--whatsapp:hover { background: #1fbd5a; color: var(--c-nuit); }

.bouton--contour-sombre {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-sur-sombre-doux);
  color: var(--c-sur-sombre);
}
.bouton--contour-sombre:hover { box-shadow: inset 0 0 0 2px var(--c-sur-sombre); color: var(--c-sur-sombre); }

.bouton--contour-marine {
  background: var(--c-fond);
  box-shadow: inset 0 0 0 2px var(--c-marine);
  color: var(--c-marine);
}
.bouton--contour-marine:hover { background: var(--c-fond-alt); color: var(--c-marine); }

.bouton:disabled,
.bouton[aria-disabled="true"] {
  background: var(--c-desactive);
  color: var(--c-encre-douce);
  cursor: not-allowed;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.etiquette {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-etiquette);
  padding: 0 var(--e-4);
  border-radius: var(--r-pilule);
  font-weight: var(--g-moyenne);
  font-size: var(--t-bouton-petit);
}

.etiquette--blanche { background: var(--c-fond); color: var(--c-encre); }
.etiquette--nuit { background: var(--c-nuit); color: var(--c-sur-sombre); }

/* ---------- 7. En-tête ---------- */
.entete { background: var(--c-fond); }

.entete__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-8);
  padding-block: 0.875rem 0.25rem;
}

.marque {
  padding-block: var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-gras);
  font-size: var(--t-marque);
  line-height: 1.2;
  letter-spacing: var(--ls-marque);
  color: var(--c-encre);
  text-decoration: none;
}
.marque:hover { color: var(--c-encre); }
.marque__suite { color: var(--c-bleu); }

/* Logo de l'en-tête (silhouette et nom), hauteur fixe */
.marque__logo {
  width: auto;
  height: min(2.5rem, 11vw); /* 40px sur téléphone (logo v2, en largeur), un peu moins sous 365px */
}

@media (min-width: 64em) {
  .marque__logo { height: 3rem; } /* 48px sur ordinateur */
}

/* Téléphone : la navigation passe sous le nom, sur toute la largeur (défilement de secours si elle ne tenait pas) */
.entete__nav {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  margin-inline: calc(var(--e-gouttiere) * -1);
  padding-inline: var(--e-gouttiere);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.entete__nav::-webkit-scrollbar { display: none; }

/* Menu ☰ du téléphone et de la tablette (ajouté par js/main.js, comme sur Revolut) :
   la navigation se replie derrière le bouton et s'ouvre en plein écran sur fond nuit */
.entete__menu { display: none; }

@media (max-width: 63.99em) {
  .entete--menu .entete__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-pilule);
    background: var(--c-fond-alt);
    color: var(--c-encre);
    cursor: pointer;
  }
  .entete--menu .entete__menu { order: 5; }
  .entete--menu .entete__interieur { padding-block: 0.875rem; }
  .entete--menu .entete__nav { display: none; }
  .entete__menu-fermer,
  .entete--ouvert .entete__menu-ouvrir { display: none; }
  .entete--ouvert .entete__menu-fermer { display: block; }

  .entete--ouvert .entete__nav {
    display: block;
    position: fixed;
    top: var(--menu-haut, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-menu);
    margin: 0;
    padding: var(--e-6) var(--e-gouttiere) calc(var(--e-16) + var(--e-10) + var(--zone-sure-bas));
    overflow-y: auto;
    background: var(--c-nuit);
  }
  .entete--ouvert .entete__liens {
    flex-direction: column;
    gap: 0;
  }
  .entete--ouvert .entete__liens li { border-bottom: 1px solid var(--c-trait-sombre); }
  .entete--ouvert .entete__liens a {
    display: flex;
    min-height: 3.75rem;
    font-family: var(--police-titres);
    font-size: 1.5rem;
    color: var(--c-sur-sombre);
  }
  .entete--ouvert :focus-visible { outline: var(--focus-sombre); }

  /* En bas du menu : appeler et demander un véhicule, en pilules */
  .entete--ouvert .entete__actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--e-3);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-menu);
    margin: 0;
    padding: var(--e-4) var(--e-gouttiere) calc(var(--e-4) + var(--zone-sure-bas));
    background: var(--c-nuit);
  }
  .entete--ouvert .entete__tel {
    justify-content: center;
    border-radius: var(--r-pilule);
    box-shadow: inset 0 0 0 2px var(--c-sur-sombre-doux);
    color: var(--c-sur-sombre);
  }
  .entete--ouvert .entete__actions .bouton,
  .entete--ouvert .entete__tel { padding-inline: var(--e-3); }
  .entete--ouvert .entete__actions .bouton { background: var(--c-fond); color: var(--c-nuit); }
  /* Menu ouvert : la croix reste à droite, y compris sur tablette */
  .entete--menu.entete--ouvert .entete__menu { margin-left: auto; }
}

/* Page figée derrière le menu ouvert */
.menu-ouvert { overflow: hidden; }

/* Téléphone : les cinq liens se répartissent sur toute la largeur, « FAQ » compris ;
   sous 350 px environ, le texte rétrécit légèrement pour tenir sans défilement */
.entete__liens {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.entete__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--g-moyenne);
  font-size: min(var(--t-nav), 4.3vw);
  text-decoration: none;
}

@media (min-width: 30em) {
  .entete__liens {
    justify-content: flex-start;
    gap: var(--e-7);
  }
}

/* Sur téléphone, l'appel et la demande passent par la barre collante du bas */
.entete__actions { display: none; }

.entete__tel {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--g-moyenne);
  font-size: var(--t-nav);
  text-decoration: none;
}

@media (min-width: 45em) {
  .entete__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-5);
    margin-left: auto;
  }

  /* Tablette : téléphone et bouton à droite, puis le bouton du menu */
  .entete--menu .entete__menu { margin-left: 0; }
}

@media (min-width: 64em) {
  .entete__interieur { padding-block: 0.875rem; }

  .entete__nav {
    order: 0;
    flex: 999 1 22.5rem;
    margin-inline: 0;
    padding-inline: 0;
  }

  .entete__actions { margin-left: 0; }
}

/* ---------- 8. Accueil (hero) ---------- */
.hero {
  padding-block: var(--e-hero-haut) var(--e-hero-bas);
  background: linear-gradient(180deg, var(--c-nuit) 0%, var(--c-marine) 100%);
  color: var(--c-sur-sombre);
}

/* Bande blanche entre l'accueil (nuit) et la section des véhicules (nuit) */
.hero + .section--nuit { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Accueil sur fond nuit : focus ciel, champs blancs, bouton blanc, petits textes en blanc */
.hero :focus-visible { outline: var(--focus-sombre); }
.hero .bouton--marine:not(:disabled) { background: var(--c-fond); color: var(--c-nuit); }
.hero .bouton--marine:not(:disabled):hover { background: var(--c-fond-alt); color: var(--c-nuit); }
.hero .rappel__indicatif,
.hero .champ { background: var(--c-fond); color: var(--c-encre); }
.hero .rappel__note,
.hero .rappel__note a { color: var(--c-sur-sombre); }
.hero .statut { color: var(--c-encre); }

.hero .intro { margin-bottom: 1.125rem; }
/* Trois atouts sous le titre : courts, cochés, lisibles en un coup d'œil */
.hero__atouts {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0 0 var(--e-7);
  padding: 0;
  list-style: none;
  font-weight: var(--g-moyenne);
  font-size: var(--t-intro);
}
.hero__atouts li { display: inline-flex; align-items: center; gap: var(--e-2); }
.hero__atouts svg { flex: none; color: var(--c-ciel); }
.titre-hero .hero__prix { color: var(--c-ciel); }
.hero .intro + .intro { margin-bottom: var(--e-7); }

/* Formulaire de rappel */
.rappel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: var(--largeur-formulaire);
}

.rappel__ligne {
  display: flex;
  gap: var(--e-3);
}

.rappel__indicatif {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--h-champ);
  padding: 0 1.125rem;
  border-radius: var(--r-champ);
  background: var(--c-fond-alt);
  font-size: var(--t-texte);
}

.champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--h-champ);
  padding: 0 1.125rem;
  border: 0;
  border-radius: var(--r-champ);
  background: var(--c-fond-alt);
  color: var(--c-encre);
  font-family: var(--police-texte);
  font-size: var(--t-texte); /* 17px : évite le zoom automatique d'iOS */
}
.champ::placeholder { color: var(--c-encre-douce); opacity: 1; }
.champ[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--c-erreur); }

.rappel .bouton { font-weight: var(--g-semi); }

.rappel__note {
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

/* Message d'envoi (rempli par js/main.js) */
.statut:empty { display: none; }
.statut {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1.375rem 1.5rem;
  border-radius: var(--r-faq);
  background: var(--c-fond-alt);
}
.statut--erreur { background: var(--c-attention-fond); color: var(--c-attention); }

/* Photo de la flotte et pastilles */
.hero__grille {
  display: grid;
  gap: var(--e-10);
  align-items: center;
}

/* Sans cela, la photo (684 px) élargirait la colonne sur téléphone */
.hero__grille > * { min-width: 0; }

@media (min-width: 64em) {
  .hero__grille { grid-template-columns: 1fr minmax(0, 34rem); gap: var(--e-16); }
}

/* Texte des pastilles blanches (cartes du carrousel) */
.pastille__texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pastille__sous-titre { font-size: var(--t-petit); color: var(--c-encre-douce); }

/* Photo studio réelle (Toyota Yaris Cross, le modèle le plus récent), avec sa légende */
.vitrine { margin: 0; }

.vitrine__photo {
  width: 100%;
  height: auto;
  border-radius: var(--r-grand);
  background: var(--c-fond-photo);
}

.vitrine__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1) var(--e-4);
  margin-top: var(--e-4);
  padding-inline: var(--e-2);
  color: var(--c-sur-sombre);
}

.vitrine__modele { font-weight: var(--g-semi); }

.vitrine__legende strong { color: var(--c-ciel); }

/* Pages modèles : photo verticale du modèle, centrée et limitée en largeur */
.vitrine--modele { max-width: 26rem; margin-inline: auto; }

.hero__grille .titre-hero { max-width: none; font-size: clamp(2.25rem, 4.6vw, 4rem); }

/* ---------- 8 bis. Véhicules : carrousel des modèles ---------- */
/* Sans JavaScript : liste qui défile horizontalement, une carte calée à la fois.
   Avec JavaScript (.flotte--carrousel) : trois cartes, la centrale agrandie, flèches et points. */
.flotte {
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}

.flotte__liste {
  display: flex;
  gap: var(--e-4);
  margin-inline: calc(var(--e-gouttiere) * -1);
  padding: 0 var(--e-gouttiere) var(--e-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--e-gouttiere);
  -webkit-overflow-scrolling: touch;
}

.flotte__item {
  flex: 0 0 min(85%, 21.25rem);
  min-width: 0;
  scroll-snap-align: center;
}

.flotte__carte {
  position: relative;
  display: block;
  aspect-ratio: 640 / 880;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--c-fond-photo-bas);
  color: var(--c-encre);
  text-decoration: none;
}
/* Plus précis que la règle des liens sur fond nuit, qui passerait le texte en blanc */
.section--nuit a.flotte__carte,
.section--nuit a.flotte__carte:hover { color: var(--c-encre); }

/* Le focus se voit sur le fond nuit, autour de la carte */
.section--nuit .flotte__carte:focus-visible { outline-offset: 4px; }

.flotte__photo {
  position: absolute;
  inset: -10% 0 auto 0; /* photo remontée : la voiture reste au-dessus de l'encart blanc */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flotte__prix {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

.flotte__type {
  font-size: var(--t-bouton-petit);
  color: var(--c-encre-douce);
}

.flotte__montant {
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: clamp(2.25rem, 3.8vw, 3.25rem); /* 36px -> 52px */
  line-height: 1;
  letter-spacing: var(--ls-titres);
}

.flotte__prix .etiquette { margin-top: var(--e-1); }

.flotte__pastille {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0.875rem;
  border-radius: var(--r-pastille);
  background: var(--c-fond);
  box-shadow: var(--ombre-pastille);
}

.flotte__icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pilule);
  background: var(--c-bleu);
  color: var(--c-sur-sombre);
}

.flotte__nom {
  font-weight: var(--g-semi);
  font-size: var(--t-bouton-petit);
  line-height: 1.35;
}

.flotte__pastille .pastille__sous-titre { font-size: 0.8125rem; }

.flotte__places {
  flex: none;
  font-weight: var(--g-semi);
  font-size: var(--t-bouton-petit);
}

/* Flèches et points, ajoutés par js/main.js */
.flotte__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  margin-top: var(--e-8);
}
.flotte__commandes[hidden] { display: none; }

.flotte__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-bouton);
  height: var(--h-bouton);
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--c-marine);
  color: var(--c-sur-sombre);
  cursor: pointer;
  transition: background-color var(--duree) ease;
}
.flotte__fleche:hover { background: var(--c-bleu); }

.flotte__points {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.flotte__point {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pilule);
  background: var(--c-sur-sombre-doux);
  transition: width var(--duree) ease, background-color var(--duree) ease;
}
.flotte__point--actif { width: 1.5rem; background: var(--c-sur-sombre); }

/* --- Mode carrousel (JavaScript actif) --- */
.flotte--carrousel .flotte__liste {
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-inline: 0;
  padding: 0;
  overflow: visible;
  touch-action: pan-y; /* le glissement horizontal change de modèle, le vertical fait défiler la page */
}

.flotte--carrousel .flotte__item { display: none; }

.flotte--carrousel .flotte__item[data-position="actif"] {
  display: block;
  order: 2;
  flex: 0 1 26.25rem; /* 420px */
}

/* Cartes latérales : masquées sur téléphone et tablette (la carte centrale garde sa largeur) */
@media (min-width: 64em) {
  .flotte--carrousel .flotte__item[data-position="actif"] { flex-shrink: 0; }
  .flotte--carrousel .flotte__item[data-position="precedent"],
  .flotte--carrousel .flotte__item[data-position="suivant"] {
    display: block;
    flex: 0 1 21.25rem; /* 340px */
  }
  .flotte--carrousel .flotte__item[data-position="precedent"] { order: 1; }
  .flotte--carrousel .flotte__item[data-position="suivant"] { order: 3; }
}

/* Les cartes latérales n'affichent ni le nombre de places ni le sous-titre : l'encart reste sur une ligne, sous la voiture */
.flotte--carrousel .flotte__item:not([data-position="actif"]) .flotte__places,
.flotte--carrousel .flotte__item:not([data-position="actif"]) .pastille__sous-titre { display: none; }

/* Carte centrale : plus grande, d'après la maquette */
.flotte--carrousel [data-position="actif"] .flotte__carte { border-radius: var(--r-grand); }
.flotte--carrousel [data-position="actif"] .flotte__prix { top: 8%; gap: 0.625rem; }
.flotte--carrousel [data-position="actif"] .flotte__type { font-size: var(--t-pastille); }
.flotte--carrousel [data-position="actif"] .flotte__montant { font-size: var(--t-prix-carte); }
.flotte--carrousel [data-position="actif"] .etiquette { min-height: 2.5rem; padding-inline: 1.125rem; font-size: var(--t-pastille); }
.flotte--carrousel [data-position="actif"] .flotte__pastille { left: var(--e-4); right: var(--e-4); bottom: var(--e-4); padding: 0.875rem var(--e-4); }
.flotte--carrousel [data-position="actif"] .flotte__icone { width: var(--taille-pastille-icone); height: var(--taille-pastille-icone); }
.flotte--carrousel [data-position="actif"] .flotte__nom { font-size: var(--t-texte); }
.flotte--carrousel [data-position="actif"] .pastille__sous-titre { font-size: var(--t-petit); }

.flotte--carrousel [data-position="actif"] .flotte__carte {
  animation: apparition var(--duree-montee) var(--courbe-montee) both;
}

@keyframes apparition {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ---------- 8 ter. Le loyer : ce qui est compris ---------- */
/* Titre à gauche (reste visible au défilement sur ordinateur), avantages à droite séparés par un filet. */
.loyer {
  display: grid;
  gap: var(--e-10);
}

.loyer .intro { margin-bottom: var(--e-7); }

.avantages {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-trait);
}

.avantage {
  display: flex;
  gap: var(--e-5);
  align-items: flex-start;
  padding-block: var(--e-7);
  border-bottom: 1px solid var(--c-trait);
}

.avantage__icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-pastille-icone);
  height: var(--taille-pastille-icone);
  border-radius: var(--r-pilule);
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
}

.avantage__titre {
  margin: 0.375rem 0 var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.5rem;
  line-height: var(--ih-carte);
  letter-spacing: var(--ls-carte);
}

.avantage__texte {
  max-width: 32em;
  color: var(--c-encre-douce);
}

@media (min-width: 64em) {
  .loyer {
    grid-template-columns: 5fr 6fr;
    gap: var(--e-16);
    align-items: start;
  }

  .loyer__entete {
    position: sticky;
    top: var(--e-8);
  }
}

/* ---------- 8 quater. Tarifs et conditions (fond nuit) ---------- */
/* Une carte blanche par prix, à la manière des abonnements Revolut, puis les conditions. */
.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--e-4);
  padding: 0;
  list-style: none;
}

.formule__lien {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--e-carte);
  padding-bottom: calc(var(--e-16) + var(--e-2));
  border-radius: var(--r-carte);
  background: var(--c-fond);
  color: var(--c-encre);
  text-decoration: none;
  transition: background-color var(--duree) ease;
}
.formule__lien:hover { background: var(--c-fond-alt); color: var(--c-encre); }
/* Sur fond nuit, les liens passent en blanc : les cartes blanches gardent l'encre */
.section--nuit a.formule__lien,
.section--nuit a.formule__lien:hover { color: var(--c-encre); }

.formule__titre {
  margin-bottom: var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.375rem;
  line-height: var(--ih-carte);
}

.formule__prix {
  margin-bottom: var(--e-4);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.375rem;
  color: var(--c-bleu);
}

.formule__unite { font-size: 1rem; }

.formule__texte { color: var(--c-encre-douce); }

.formule__fleche {
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  color: var(--c-nuit);
  transition: transform var(--duree) ease;
}
.formule__lien:hover .formule__fleche { transform: translateX(4px); }

/* Conditions : liste sobre à traits fins, sur deux colonnes dès que la place le permet */
.conditions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 var(--e-10);
  margin-top: var(--e-12);
}

.condition {
  padding-block: var(--e-5);
  border-top: 1px solid var(--c-trait-sombre);
}

.condition__titre {
  margin-bottom: var(--e-1);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.25rem;
}

.condition__texte { color: var(--c-sur-sombre-doux); }

/* ---------- 8 quinquies. Étapes et agences ---------- */
.etapes,
.agences {
  display: grid;
  gap: var(--e-4);
  padding: 0;
  list-style: none;
}

.etapes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.agences { grid-template-columns: repeat(auto-fit, minmax(min(100%, 27.5rem), 1fr)); }

.etape,
.agence {
  display: flex;
  flex-direction: column;
  padding: var(--e-carte);
  border-radius: var(--r-carte);
  background: var(--c-fond-alt);
}

.etape__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-pastille-numero);
  height: var(--taille-pastille-numero);
  margin-bottom: var(--e-5);
  border-radius: var(--r-pilule);
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.25rem;
}

.etape__titre,
.agence__titre {
  margin-bottom: var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  line-height: var(--ih-carte);
  letter-spacing: var(--ls-carte);
}

.etape__titre { font-size: var(--t-etape); }
.agence__titre { margin-bottom: var(--e-5); font-size: var(--t-carte-agence); }

.etape__texte { color: var(--c-encre-douce); }

.agence__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-pastille-icone);
  height: var(--taille-pastille-icone);
  margin-bottom: var(--e-5);
  border-radius: var(--r-pilule);
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
}

.agence__infos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-7);
}

.agence__infos dt {
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.agence__infos dd { font-weight: var(--g-moyenne); }

/* Les boutons restent alignés en bas des deux cartes */
.agence__boutons { margin-top: auto; }

/* Bouton secondaire dans les cartes grises : pilule blanche, comme « Me connecter » chez Revolut */
.agence .bouton--contour-marine { background: var(--c-fond); box-shadow: none; color: var(--c-nuit); }
.agence .bouton--contour-marine:hover { background: var(--c-trait); color: var(--c-nuit); }

/* ---------- 8 quinquies. Page Véhicules : une carte par modèle ---------- */
/* 8 cartes (7 voitures + conseil) : 1 colonne, puis 2, puis 4 : toujours des rangées pleines */
.modeles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  margin-top: var(--e-6);
  padding: 0;
  list-style: none;
}
.modele {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--c-fond-alt);
}
/* Photo de studio recadrée sur la voiture (la voiture est dans le bas de l'image d'origine) */
.modele__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 78%;
  background: var(--c-fond-photo);
}
.modele__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-carte);
}
.modele__type { font-size: var(--t-petit); color: var(--c-encre-douce); }
.modele__nom { font-family: var(--police-titres); font-weight: var(--g-moyenne); font-size: var(--t-carte); line-height: 1.15; }
.modele__prix { font-family: var(--police-titres); font-weight: var(--g-moyenne); font-size: 1.75rem; }
.modele__unite { font-family: var(--police-texte); font-size: var(--t-petit); color: var(--c-encre-douce); }
.modele__atouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  list-style: none;
}
.modele__atout {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pilule);
  background: var(--c-fond);
  font-weight: var(--g-semi);
}
.modele__atout svg,
.modele__mesures svg { flex: none; color: var(--c-bleu); }
.modele__phrase { color: var(--c-encre-douce); }
.modele__mesures {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-trait);
  font-size: var(--t-bouton-petit);
}
.modele__mesures div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--e-3); }
.modele__mesures dt { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--c-encre-douce); }
.modele__mesures dd { font-weight: var(--g-moyenne); }
.modele__demande { margin-top: auto; align-self: stretch; padding-inline: var(--e-3); white-space: nowrap; }
@media (min-width: 45em) { .modeles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .modeles { grid-template-columns: repeat(4, 1fr); } }
/* Carte conseil : bleu nuit, centrée verticalement */
.modele--conseil { background: var(--c-nuit); color: var(--c-sur-sombre); }
.modele__fiche { align-self: stretch; margin-top: var(--e-2); padding-inline: var(--e-3); white-space: nowrap; }

.modele--conseil .modele__corps { justify-content: center; gap: var(--e-4); }
.modele--conseil .agence__icone { margin-bottom: 0; background: var(--c-bleu); }
.modele--conseil .modele__phrase { color: var(--c-sur-sombre-doux); }
.modele__boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.modeles__note { margin-top: var(--e-6); font-size: var(--t-petit); color: var(--c-encre-douce); }

/* Carrousel de l'accueil : places et valises en pictogrammes */
.flotte__places { display: inline-flex; align-items: center; gap: 0.25rem 0.625rem; flex-wrap: wrap; justify-content: flex-end; }
.flotte__lien { margin-top: var(--e-6); }
.section--nuit .flotte__lien a { color: var(--c-sur-sombre); }
/* Liens vers la fiche de chaque modèle (accueil, pages régionales, pages modèles) */
.liens-modeles { margin-top: var(--e-6); }
.liens-modeles a { white-space: nowrap; }
.section--nuit .liens-modeles a { color: var(--c-sur-sombre); }
.flotte__atout { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }

/* ---------- 8 sexies a. Page Tarifs : tableau des loyers ---------- */
.tarifs__cadre { margin-top: var(--e-6); border-radius: var(--r-carte); background: var(--c-fond-alt); }
.tarifs { width: 100%; border-collapse: collapse; font-size: var(--t-bouton-petit); }
.tarifs th,
.tarifs td { padding: var(--e-4) var(--e-5); text-align: left; white-space: nowrap; }
.tarifs thead th { font-weight: var(--g-moyenne); color: var(--c-encre-douce); font-size: var(--t-petit); }
.tarifs tbody tr { border-top: 1px solid var(--c-trait); }
.tarifs tbody th { font-weight: var(--g-semi); }
.tarifs td:nth-child(2) { font-family: var(--police-titres); font-weight: var(--g-moyenne); font-size: 1.25rem; }
.tarifs td:last-child { text-align: right; }
.tarifs__lien { font-weight: var(--g-semi); }
/* Téléphone : une fiche par modèle (le titre de chaque colonne vient de data-titre) */
@media (max-width: 44.99em) {
  .tarifs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tarifs tbody tr { display: grid; grid-template-columns: 1fr auto; padding: var(--e-4) var(--e-5); }
  .tarifs tbody tr:first-child { border-top: 0; }
  .tarifs th,
  .tarifs td { padding: var(--e-1) 0; white-space: normal; }
  .tarifs tbody th { grid-column: 1 / -1; font-size: 1.125rem; }
  .tarifs td[data-titre] { display: contents; }
  .tarifs td[data-titre]::before { content: attr(data-titre); padding: var(--e-1) 0; font-family: var(--police-texte); font-weight: var(--g-normale); color: var(--c-encre-douce); }
  .tarifs td:nth-child(2) { font-size: inherit; }
  .tarifs td.tarifs__action { grid-column: 1 / -1; padding-top: var(--e-2); text-align: left; }
}
.tarifs__note { margin-top: var(--e-4); font-size: var(--t-petit); color: var(--c-encre-douce); }
.conditions--page { margin-top: var(--e-6); }
.conditions__autres { margin-top: var(--e-6); max-width: 46rem; color: var(--c-sur-sombre-doux); font-size: var(--t-bouton-petit); }

.tarifs__fiche { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 8 sexies. Simulateur de revenus (fond gris clair) ---------- */
.sim__avertissement {
  margin-bottom: var(--e-6);
  padding: var(--e-5) var(--e-6);
  border-left: 4px solid var(--c-attention-vif);
  border-radius: var(--r-champ);
  background: var(--c-attention-fond);
  color: var(--c-attention);
  font-size: var(--t-bouton-petit);
}

.sim__grille {
  display: grid;
  gap: var(--e-4);
  align-items: start;
}

@media (min-width: 64em) {
  .sim__grille { grid-template-columns: 7fr 6fr; }
  .sim__resultats { position: sticky; top: var(--e-4); }
}

.sim__reglages,
.sim__resultats {
  padding: var(--e-carte);
  border-radius: var(--r-carte);
  background: var(--c-fond);
}

.sim__groupe {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sim__groupe + .sim__groupe { margin-top: var(--e-10); }

.sim__titre {
  margin-bottom: var(--e-1);
  padding: 0;
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.5rem;
  color: var(--c-marine);
}

.sim__champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}

.sim__champ label,
.sim__entete-curseur {
  font-weight: var(--g-moyenne);
  font-size: var(--t-bouton-petit);
}

.sim__entete-curseur {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
}

.sim__valeur {
  font-weight: var(--g-semi);
  color: var(--c-bleu);
}

.sim__base {
  font-weight: var(--g-normale);
  color: var(--c-encre-douce);
}

.sim__paire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--e-4);
  align-items: end;
}

.sim__select,
.sim__saisie {
  width: 100%;
  min-height: var(--h-bouton);
  padding: 0 var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--r-champ);
  background: var(--c-fond-alt);
  color: var(--c-encre);
  font-size: var(--t-texte); /* 17px : évite le zoom automatique d'iOS */
}

.sim__select {
  appearance: none;
  padding-right: var(--e-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232352a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  cursor: pointer;
}

.sim__select:hover,
.sim__saisie:hover { border-color: var(--c-trait); }

.sim__curseur {
  width: 100%;
  accent-color: var(--c-bleu);
  cursor: pointer;
}

.sim__aide {
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.sim__alerte,
.sim__alertes p {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-champ);
  background: var(--c-attention-fond);
  color: var(--c-attention);
  font-size: var(--t-petit);
}
.sim__alerte[hidden] { display: none; }

.sim__alertes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.sim__alertes:empty { display: none; }

/* Résultats */
.sim__etiquette {
  display: inline-block;
  margin-bottom: var(--e-4);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pilule);
  background: var(--c-attention-fond);
  color: var(--c-attention);
  font-weight: var(--g-moyenne);
  font-size: var(--t-petit);
}

.sim__tableau {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sim__tableau th,
.sim__tableau td {
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--c-trait);
  text-align: right;
  white-space: nowrap;
}

.sim__tableau th[scope="row"],
.sim__tableau thead th:first-child {
  padding-left: 0;
  text-align: left;
  white-space: normal;
  font-weight: var(--g-moyenne);
}

.sim__tableau thead th {
  font-weight: var(--g-normale);
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

/* Téléphone : tableau plus compact pour garder trois colonnes lisibles */
@media (max-width: 44.99em) {
  .sim__reglages,
  .sim__resultats { padding: var(--e-6) var(--e-4); }
  .sim__tableau { font-size: var(--t-petit); }
  .sim__tableau th,
  .sim__tableau td { padding-inline: var(--e-1); }
}

.sim__tableau .sim__moins th,
.sim__tableau .sim__moins td {
  font-weight: var(--g-normale);
  color: var(--c-encre-douce);
}

.sim__tableau tr[hidden] { display: none; }

/* Ligne du total : le rappel de bleu de la section */
.sim__total th,
.sim__total td {
  border-bottom: 0;
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
  font-weight: var(--g-semi);
}

.sim__tableau .sim__total th[scope="row"] {
  padding-left: var(--e-4);
  border-radius: var(--r-champ) 0 0 var(--r-champ);
  font-weight: var(--g-semi);
}

.sim__total td:last-child {
  padding-right: var(--e-4);
  border-radius: 0 var(--r-champ) var(--r-champ) 0;
}

.sim__total .sim__negatif { color: #ffb4a8; }

.sim__heure { margin: var(--e-5) 0 var(--e-4); }
.sim__heure strong { color: var(--c-bleu); }

.sim__note {
  margin-top: var(--e-4);
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.sim__sources {
  margin-top: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border-radius: var(--r-carte);
  background: var(--c-fond);
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.sim__sources summary {
  font-weight: var(--g-semi);
  font-size: var(--t-texte);
  color: var(--c-encre);
  cursor: pointer;
}

.sim__sources ul {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding-left: var(--e-5);
}

.sim__sources a { color: var(--c-bleu); }

/* ---------- 8 septies. Propriétaires et questions fréquentes ---------- */
.proprios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27.5rem), 1fr));
  gap: var(--e-4);
  padding: 0;
  list-style: none;
}

.proprio {
  display: flex;
  flex-direction: column;
  padding: var(--e-carte);
  border-radius: var(--r-carte);
  background: var(--c-fond-alt);
}

.proprio .agence__titre { margin-bottom: var(--e-2); }

.proprio__texte {
  margin-bottom: var(--e-7);
  color: var(--c-encre-douce);
}

.proprio__bouton {
  align-self: flex-start;
  margin-top: auto;
}

.questions {
  display: flex;
  flex-direction: column;
  max-width: var(--largeur-faq);
  border-top: 1px solid var(--c-trait-fort);
}

/* Liste sobre à la manière de Revolut : traits fins et signe « + » dans un rond nuit */
.question { border-bottom: 1px solid var(--c-trait-fort); }

.question__intitule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--h-question);
  padding-block: var(--e-5);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: var(--t-faq);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.question__intitule::-webkit-details-marker { display: none; }

.question__signe {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3125rem;
  border-radius: var(--r-pilule);
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
  transition: transform var(--duree) ease;
}

.question[open] .question__signe { transform: rotate(45deg); }

.question__reponse {
  max-width: 44em;
  padding-bottom: var(--e-6);
  color: var(--c-encre-douce);
}

.question__reponse a { color: var(--c-bleu); }

/* ---------- 8 octies. Contact et formulaire de demande (fond nuit) ---------- */
.contact {
  display: grid;
  gap: var(--e-10);
  align-items: start;
}

@media (min-width: 64em) {
  .contact { grid-template-columns: 5fr 6fr; gap: var(--e-16); }
}

.demande {
  padding: var(--e-carte);
  border-radius: var(--r-carte);
  background: var(--c-fond);
  color: var(--c-encre);
}

/* Le texte du formulaire reste foncé sur la carte blanche, malgré le fond nuit de la section */
.section--nuit .demande a:not(.bouton) { color: var(--c-bleu); }
.section--nuit .demande :focus-visible { outline: var(--focus); }

.demande__titre {
  margin-bottom: var(--e-5);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: var(--t-carte);
}

.demande__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
}

@media (min-width: 36em) {
  .demande__grille { grid-template-columns: 1fr 1fr; }
  .demande__champ--large { grid-column: 1 / -1; }
}

.demande__champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}

.demande__champ label {
  font-weight: var(--g-moyenne);
  font-size: var(--t-bouton-petit);
}

.demande__requis {
  font-weight: var(--g-normale);
  color: var(--c-encre-douce);
}

.demande__saisie {
  width: 100%;
  min-height: var(--h-bouton-section);
  padding: 0 var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--r-champ);
  background: var(--c-fond-alt);
  color: var(--c-encre);
  font-size: var(--t-texte); /* 17px : évite le zoom automatique d'iOS */
}

.demande__saisie:hover { border-color: var(--c-trait); }
.demande__saisie:user-invalid { border-color: var(--c-erreur); }

.demande__select {
  appearance: none;
  padding-right: var(--e-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232352a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  cursor: pointer;
}

.demande__zone {
  min-height: 7.5rem;
  padding-block: var(--e-3);
  resize: vertical;
  font-family: var(--police-texte);
}

.demande__envoyer {
  width: 100%;
  margin-top: var(--e-6);
  font-weight: var(--g-semi);
}

.demande__mention {
  margin: var(--e-3) 0;
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

/* Message après envoi (rappel et demande) */
.statut__coche {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pilule);
  background: var(--c-bleu);
  color: var(--c-sur-sombre);
}

.statut a { color: inherit; font-weight: var(--g-semi); }

/* ---------- Page des mentions légales ---------- */
.legal__conteneur { max-width: 52rem; }

.legal__bloc {
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-trait);
}

.legal__bloc p + p { margin-top: var(--e-3); }

.legal__titre {
  margin-bottom: var(--e-3);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.5rem;
}

.legal a,
.legal__lien-bouton { color: var(--c-bleu); }

.legal__lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Page d'erreur 404 : liste des pages du site ---------- */
.liste-pages {
  margin: var(--e-6) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-trait);
}

.liste-pages li {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--c-trait);
}

.liste-pages a {
  color: var(--c-bleu);
  font-weight: var(--g-moyenne);
}

.liste-pages__boutons { margin-top: var(--e-6); }

/* ---------- 9. Pied de page ---------- */
.pied {
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
  font-size: var(--t-bouton-petit);
}

/* Pied sombre à la manière de Revolut : un trait le sépare de la section contact */
.section--nuit + .pied { border-top: 1px solid var(--c-trait-sombre); }
.pied :focus-visible { outline: var(--focus-sombre); }

.pied .conteneur { padding-block: var(--e-16) var(--e-9); }

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr));
  gap: var(--e-8) var(--e-10);
  padding-bottom: var(--e-10);
  border-bottom: 1px solid var(--c-trait-sombre);
}

.pied__marque {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--c-sur-sombre-doux);
}

.pied__marque .marque {
  padding: 0;
  font-size: 1.375rem;
  color: var(--c-sur-sombre);
}
/* Logo v2 en version claire (blanc et ciel) sur le fond nuit */
.pied__logo {
  width: auto;
  height: 2.75rem;
}

.pied__titre {
  margin-bottom: var(--e-2);
  font-weight: var(--g-semi);
}

.pied__groupe ul {
  padding: 0;
  list-style: none;
}

.pied__groupe a,
.pied__cookies {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* cible tactile confortable */
  color: var(--c-sur-sombre-doux);
  text-decoration: none;
}

.pied__groupe a:hover,
.pied__cookies:hover { color: var(--c-sur-sombre); }

.pied__cookies {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  cursor: pointer;
}

.pied__legal {
  margin-top: var(--e-6);
  font-size: var(--t-petit);
  font-style: normal;
  color: var(--c-sur-sombre-doux);
}
.pied__legal a { color: inherit; }

@media (min-width: 64em) {
  .pied__groupe a,
  .pied__cookies { min-height: 2.25rem; }
}

/* ---------- 10. Barre de contact collante (téléphone et tablette) ---------- */
.barre-contact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-barre-contact);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + var(--zone-sure-bas));
  background: var(--c-nuit);
  box-shadow: var(--ombre-barre);
}

.barre-contact__bouton {
  min-height: 3.25rem; /* 52px : facile à toucher avec le pouce */
  padding-inline: var(--e-4);
  font-weight: var(--g-semi);
}

@media (min-width: 64em) {
  body { padding-bottom: 0; }
  .barre-contact { display: none; }
}

/* ---------- 11. Bandeau cookies ---------- */
.cookies {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: calc(var(--hauteur-barre-contact) + var(--zone-sure-bas) + var(--e-3));
  z-index: var(--z-cookies);
  max-width: 38.75rem;
  margin-inline: auto;
  padding: var(--e-5) 1.375rem;
  border-radius: var(--r-faq);
  background: var(--c-fond);
  color: var(--c-encre);
  box-shadow: var(--ombre-pastille);
}

.cookies[hidden] { display: none; }

.cookies__titre {
  margin-bottom: var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--g-semi);
  font-size: 1.125rem;
}

.cookies p {
  font-size: var(--t-petit);
  line-height: 1.6;
  color: var(--c-encre-douce);
}

.cookies p a { color: var(--c-bleu); }

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.cookies__actions .bouton {
  flex: 1 1 8.75rem;
  min-height: var(--h-bouton);
}

@media (min-width: 64em) {
  .cookies { bottom: var(--e-4); }
}