/* Azoum Cars, Rabat. Design system, kit-exact.
   Palette and type come from the client's design kit and nothing else is introduced:
   Rouge Azoum #E1062D, Bleu Confiance #1E88E5, Gris Clair #F4F6F8, Bleu Nuit #0B2D4D,
   Montserrat Bold / Regular. The red is reserved for actions, the blue carries the
   structure, and the swoosh ribbon from the kit's vehicle wrap is the section motif. */

/* ------------------------------------------------------------------ tokens */

:root {
  --rouge: #E1062D;
  --rouge-fonce: #B00423;
  --bleu: #1E88E5;
  --bleu-clair: #E8F2FD;
  --nuit: #0B2D4D;
  --nuit-2: #0E3A63;
  --nuit-3: #072339;
  --gris: #F4F6F8;
  --gris-2: #E7EBF0;
  --blanc: #FFFFFF;

  --encre: #0B2D4D;
  --encre-doux: #4A6480;
  --encre-faible: #7C93A9;
  --filet: #DCE3EB;

  --sur-nuit: #FFFFFF;
  --sur-nuit-doux: rgba(255, 255, 255, .74);
  --sur-nuit-faible: rgba(255, 255, 255, .54);
  --filet-nuit: rgba(255, 255, 255, .16);

  --police: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Titres. Anton, condensée très grasse, reprend le poids du logo et donne au site
     une énergie d'affiche automobile. Elle ne croise aucun des quatre autres loueurs
     (Michroma, Saira, Chakra Petch, Archivo, Instrument Sans, Montserrat). Anton n'a
     qu'une graisse : ne jamais lui demander un font-weight, il est déjà dedans. */
  --titre: "Anton", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --wrap: 1220px;
  --pad: clamp(20px, 5vw, 56px);
  --nav-h: 82px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --ombre: 0 2px 12px rgba(11, 45, 77, .07);
  --ombre-lg: 0 24px 60px -26px rgba(11, 45, 77, .38);
}

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

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

body {
  margin: 0;
  background: var(--gris);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 3px;
}

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

/* ------------------------------------------------------------ typographie */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 400;      /* Anton n'existe qu'en une graisse */
  line-height: 1.16;
  letter-spacing: .004em;
  color: var(--encre);
}

.h1 { font-size: clamp(2.15rem, 5.4vw, 3.9rem); }
.h2 { font-size: clamp(1.6rem, 3.2vw, 2.45rem); }
.h3 { font-size: clamp(1.12rem, 1.7vw, 1.36rem); letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--encre-doux);
  max-width: 56ch;
}

/* The kit is a single family, so the micro-typography layer is set apart by weight
   and tracking rather than by importing a second face. */
.micro {
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu);
}

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

.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--gris { background: var(--gris-2); }
.sec--blanc { background: var(--blanc); }
.sec--nuit { background: var(--nuit); color: var(--sur-nuit); }
.sec--nuit .h2, .sec--nuit h3 { color: var(--sur-nuit); }
.sec--nuit .lead { color: var(--sur-nuit-doux); }
.sec--nuit .micro { color: var(--bleu); }

.sec-tete { margin-bottom: clamp(28px, 4vw, 46px); max-width: 62ch; }
.sec-tete .micro { display: block; margin-bottom: 12px; }
.sec-tete .lead { margin-top: 14px; }

/* ----------------------------------------------- le ruban swoosh du kit */

/* Reprend le geste de l'habillage véhicule du kit : deux rubans, rouge et bleu,
   qui filent en parallèle. Sert de séparateur de section, jamais de décor gratuit. */
.ruban { display: block; width: 100%; height: 34px; overflow: hidden; line-height: 0; }
.ruban svg { display: block; width: 100%; height: 100%; }
.ruban--bas { transform: rotate(180deg); }

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--police);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--rouge { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.btn--rouge:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

.btn--contour { border-color: var(--filet); color: var(--encre); background: var(--blanc); }
.btn--contour:hover { border-color: var(--bleu); color: var(--bleu); }

.btn--nuit { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }
.btn--nuit:hover { background: var(--nuit-2); border-color: var(--nuit-2); }

.btn--clair { border-color: var(--filet-nuit); color: var(--sur-nuit); background: transparent; }
.btn--clair:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }

.btn--sm { padding: 10px 18px; font-size: .77rem; }
.btn--bloc { width: 100%; }

.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

.nav__in {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.nav__marque { display: flex; align-items: center; position: relative; z-index: 3; }
.nav__marque img { width: 152px; height: auto; transition: opacity .25s var(--ease); }
.nav__logo--blanc { position: absolute; top: 0; left: 0; }

.nav__liens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__liens a {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sur-nuit);
  padding: 6px 0;
  position: relative;
  transition: color .22s var(--ease);
}

.nav__liens a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}

.nav__liens a:hover::after,
.nav__liens a.actif::after { transform: scaleX(1); }

.nav__fin { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 3; }

/* Solide au scroll et sur toutes les pages intérieures sans bannière transparente. */
.nav.est-defile, .nav--solide {
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--filet), var(--ombre);
}
.nav.est-defile .nav__liens a, .nav--solide .nav__liens a { color: var(--encre); }
.nav.est-defile .nav__liens a:hover, .nav--solide .nav__liens a:hover { color: var(--bleu); }
.nav.est-defile .nav__logo--blanc, .nav--solide .nav__logo--blanc { opacity: 0; }
.nav:not(.est-defile):not(.nav--solide) .nav__logo--couleur { opacity: 0; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 3;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--sur-nuit);
  position: relative;
  transition: background .2s var(--ease), transform .26s var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px; height: 2px;
  background: inherit;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.burger span::before { top: -8px; }
.burger span::after { top: 8px; }

.nav.est-defile .burger span, .nav--solide .burger span { background: var(--encre); }

body.nav-ouvert .burger span { background: transparent; }
body.nav-ouvert .burger span::before { transform: translateY(8px) rotate(45deg); background: var(--encre); }
body.nav-ouvert .burger span::after { transform: translateY(-8px) rotate(-45deg); background: var(--encre); }

.nav__cta--menu { display: none; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 96px;
  overflow: hidden;
}

.hero__fond { position: absolute; inset: 0; z-index: 0; }
/* Sans ce display:block le height:100% de l'img se résout sur un <picture> inline
   et le fond s'effondre. */
.hero__fond picture { position: absolute; inset: 0; display: block; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(7, 35, 57, .92) 0%, rgba(7, 35, 57, .74) 42%, rgba(7, 35, 57, .32) 100%);
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.hero__texte { color: var(--sur-nuit); }
.hero__texte .h1 { color: var(--sur-nuit); max-width: 17ch; }
.hero__sous {
  margin: 20px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: var(--sur-nuit-doux);
}

.hero__faits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--filet-nuit);
}
.hero__faits span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sur-nuit-doux);
}
/* Une icône dans un span inline ignore sa taille : le wrapper doit être flex. */
.hero__faits svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--bleu); }

/* Le widget de réservation : une barre qui chevauche le bas du hero, plutôt qu'une
   carte posée dans le hero. Elle se lit comme la première action de la page et laisse
   le hero respirer sur toute sa largeur. */
.widget-bande { position: relative; z-index: 5; margin-top: -46px; margin-bottom: 10px; }

.widget {
  background: var(--blanc);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--ombre-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}
.widget .btn { height: 48px; }

@media (max-width: 900px) {
  .widget { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .widget > .champ:first-child { grid-column: 1 / -1; }
  .widget .btn { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .widget-bande { margin-top: -28px; }
  .widget { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}

/* ------------------------------------------------------------------ champs */

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--encre-faible);
}

.champ select, .champ input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px; /* sous 16px, iOS zoome la page au focus */
  font-weight: 600;
  line-height: 1.3;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ select:focus, .champ input:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .16);
  outline: none;
}

.champ select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6480' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
}

/* iOS ne peint aucun placeholder jj/mm/aaaa dans un input date vide : sans fond
   opaque ni hauteur minimale le champ est une boîte invisible. */
.champ input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--blanc);
}
.champ input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.champ input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* ------------------------------------------------------------- cartes services */

.grille { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.service {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.service:hover {
  border-color: var(--bleu);
  transform: translateY(-3px);
  box-shadow: var(--ombre);
}
.service__ico {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bleu-clair);
  color: var(--bleu);
  flex-shrink: 0;
}
.service__ico svg { width: 24px; height: 24px; }
.service p { font-size: .93rem; color: var(--encre-doux); }
.service__fleche {
  margin-top: auto;
  padding-top: 6px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bleu);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.service__fleche svg { width: 15px; height: 15px; transition: transform .24s var(--ease); }
.service:hover .service__fleche svg { transform: translateX(4px); }

/* --------------------------------------------------------------- flotte */

.veh {
  background: var(--nuit-2);
  border: 1px solid var(--filet-nuit);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.veh:hover { border-color: var(--bleu); transform: translateY(-3px); }

.veh__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nuit-3); }
.veh__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.veh:hover .veh__media img { transform: scale(1.04); }

.veh__cat {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 11px;
  border-radius: 3px;
  background: rgba(7, 35, 57, .82);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blanc);
}

.veh__corps { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.veh__nom { font-family: var(--titre); font-size: 1.24rem; font-weight: 400; letter-spacing: .01em; color: var(--sur-nuit); }

.veh__specs {
  /* Flex et non grille : à 4 colonnes la carte est trop étroite pour trois specs
     sur une ligne, et une grille fixe les rognait. En grille les cartes d'une même
     rangée s'étirent à la même hauteur, donc un retour à la ligne ne déséquilibre rien. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 13px;
  border-top: 1px solid var(--filet-nuit);
  list-style: none;
  margin: 0;
}
.veh__specs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 600;
  color: var(--sur-nuit-faible);
}
.veh__specs svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--bleu); }

.veh__pied { margin-top: auto; padding-top: 4px; }

/* Rendus détourés : ils se posent sur une plaque, pas en plein cadre. */
.veh__media--rendu { display: flex; align-items: center; justify-content: center; background: var(--nuit-2); }
.veh__media--rendu img { object-fit: contain; padding: 7% 6%; transform: none !important; }
.veh--clair .veh__media--rendu { background: var(--gris-2); }

/* Bande haut de gamme : leurs vraies photos, en grand. À cette taille les décors
   se lisent comme des clichés pris sur place, pas comme une grille dépareillée. */
.premium { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 30px); }
.premium .veh__media { aspect-ratio: 16 / 10; }
.premium .veh__nom { font-size: clamp(1.2rem, 1.8vw, 1.42rem); }
.premium .veh__corps { padding: 24px 24px 26px; }

@media (max-width: 680px) { .premium { grid-template-columns: minmax(0, 1fr); } }

/* Variante claire, pour la page Flotte posée sur le fond gris du site. */
.veh--clair { background: var(--blanc); border-color: var(--filet); }
.veh--clair:hover { border-color: var(--bleu); }
.veh--clair .veh__media { background: var(--gris-2); }
.veh--clair .veh__nom { color: var(--encre); }
.veh--clair .veh__specs { border-top-color: var(--filet); }
.veh--clair .veh__specs li { color: var(--encre-doux); }

/* ------------------------------------------------------------- bandeau confiance */

.confiance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.confiance div { display: flex; flex-direction: column; gap: 11px; }
.confiance__ico {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nuit);
  color: var(--blanc);
  flex-shrink: 0;
}
.confiance__ico svg { width: 25px; height: 25px; }
.confiance h3 { font-size: 1.02rem; }
.confiance p { font-size: .9rem; color: var(--encre-doux); }

/* ------------------------------------------------------------------ avis */

.avis {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--rouge);
  border-radius: var(--r-sm);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.avis blockquote { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.55; }
.avis cite {
  font-style: normal;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-faible);
}

/* ------------------------------------------------------------ bande CTA */

.bande-cta { position: relative; overflow: hidden; background: var(--nuit); color: var(--sur-nuit); }
.bande-cta__in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(44px, 6vw, 72px) 0;
}
.bande-cta .h2 { color: var(--sur-nuit); max-width: 20ch; }
.bande-cta p { color: var(--sur-nuit-doux); margin-top: 10px; }
.bande-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------- bannière de page */

/* Une tête de page ne reste pas un aplat sombre : photo + voile, comme le hero. */
.banniere {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 64px) 0 46px;
  overflow: hidden;
}
.banniere__fond { position: absolute; inset: 0; z-index: 0; }
.banniere__fond img { width: 100%; height: 100%; object-fit: cover; }
.banniere__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 35, 57, .78) 0%, rgba(7, 35, 57, .62) 48%, rgba(7, 35, 57, .88) 100%);
}
.banniere__in { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.banniere .h1 { color: var(--sur-nuit); }
.banniere .micro { color: var(--blanc); opacity: .8; display: block; margin-bottom: 12px; }
.banniere p { color: var(--sur-nuit-doux); margin-top: 14px; max-width: 54ch; }

/* ------------------------------------------------------------------ split */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split__media { border-radius: var(--r); overflow: hidden; align-self: center; }
.split__media img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ contact */

.contact-grille { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 52px); align-items: stretch; }

.fiche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.fiche li { display: flex; gap: 15px; align-items: flex-start; }
.fiche__ico {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bleu-clair);
  color: var(--bleu);
  flex-shrink: 0;
}
.fiche__ico svg { width: 20px; height: 20px; }
.fiche h3 { font-family: var(--police); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-faible); margin-bottom: 3px; }
.fiche a { color: var(--encre); text-decoration: none; font-weight: 600; }
.fiche a:hover { color: var(--bleu); }

/* La carte doit remplir toute la hauteur de sa colonne. */
.carte { position: relative; min-height: 380px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--filet); }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--filet);
  font-size: .92rem;
}
.horaires li:last-child { border-bottom: 0; }
.horaires b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ footer */

.pied { background: var(--nuit); color: var(--sur-nuit-doux); padding-top: clamp(46px, 6vw, 72px); }
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: 42px;
}
.pied__logo { width: 218px; height: auto; margin-bottom: 16px; }
.pied__tag { font-size: .9rem; color: var(--sur-nuit-doux); max-width: 34ch; }
.pied h4 {
  font-family: var(--police);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 16px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pied a { color: var(--sur-nuit-doux); text-decoration: none; font-size: .9rem; transition: color .2s var(--ease); }
.pied a:hover { color: var(--blanc); }
.pied__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; }
.pied__contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--bleu); }

.pied__bas { border-top: 1px solid var(--filet-nuit); }
.pied__bas-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  font-size: .78rem;
}
.pied__credit {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  text-decoration: none;
}

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--filet-nuit);
  border-radius: 50%;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.socials a:hover { border-color: var(--bleu); background: rgba(30, 136, 229, .16); }
.socials svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ modale devis */

.devis {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.devis.est-ouvert { display: flex; }
.devis__fond { position: fixed; inset: 0; background: rgba(7, 35, 57, .72); backdrop-filter: blur(3px); }

/* max-height déclarée deux fois : la ligne vh est le repli, la ligne dvh gagne où
   elle est supportée. Jamais de 100vh nu, le bas passerait sous la barre d'iOS. */
.devis__panneau {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 40px));
  margin: auto;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--blanc);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-lg);
  overflow: hidden;
}

.devis__tete { padding: 24px 26px 0; position: relative; }
.devis__fermer {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--gris-2);
  color: var(--encre);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.devis__fermer:hover { background: var(--filet); }

.devis__jauge { height: 3px; border-radius: 3px; background: var(--gris-2); overflow: hidden; margin-top: 18px; }
.devis__jauge i { display: block; height: 100%; width: 33.33%; background: var(--rouge); transition: width .3s var(--ease); }

/* min-height:0 est la ligne qui allume réellement le défilement : un enfant de grille
   plancher par défaut à la taille de son contenu. */
.devis__corps {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
}
.devis__corps > * { flex-shrink: 0; }

.devis__etape { display: none; flex-direction: column; gap: 18px; }
.devis__etape.est-active { display: flex; }
.devis__etape h3 { font-size: 1.22rem; }
.devis__etape > p { font-size: .92rem; color: var(--encre-doux); margin: -10px 0 0; }

.devis__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.recap { margin: 0; border: 1px solid var(--filet); border-radius: var(--r-sm); overflow: hidden; }
.recap > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--filet); }
.recap > div:last-child { border-bottom: 0; }
.recap dt { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-faible); }
.recap dd { margin: 0; font-weight: 700; text-align: right; }

.devis__sortie { display: flex; flex-wrap: wrap; gap: 12px; }
.devis__sortie .btn { flex: 1 1 190px; min-width: 0; }

.devis__pied {
  display: flex;
  gap: 12px;
  padding: 18px 26px 22px;
  border-top: 1px solid var(--filet);
  background: var(--gris);
}
.devis__pied .btn { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ reveals */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].vu { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
[data-stagger].vu > * { opacity: 1; transform: none; }
[data-stagger].vu > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].vu > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].vu > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].vu > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].vu > *:nth-child(6) { transition-delay: .35s; }

/* ------------------------------------------------------------------ tablette */

@media (max-width: 1020px) {
  .hero__texte .h1 { max-width: none; }
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confiance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .burger { display: inline-flex; }
  .nav__in { grid-template-columns: 1fr auto; }

  .nav__liens {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    background: var(--blanc);
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    z-index: 2;
    padding: 0 var(--pad);
  }
  body.nav-ouvert .nav__liens { transform: none; }
  body.nav-ouvert { overflow: hidden; }

  /* Le menu plein écran vit dans le header : tant qu'il est ouvert le header ne doit
     porter ni backdrop-filter ni ombre, sinon il devient bloc contenant et le menu
     se dimensionne à la barre. */
  .nav.menu-ouvert { background: transparent; box-shadow: none; }

  /* Le menu ouvert est blanc, donc la variante blanche du logo y disparaît. Forcer
     la version couleur, avec assez de spécificité pour battre la règle de nav
     transparente (0,3,0) qui la masque au-dessus du hero. */
  .nav.menu-ouvert:not(.est-defile):not(.nav--solide) .nav__logo--couleur { opacity: 1; }
  .nav.menu-ouvert:not(.est-defile):not(.nav--solide) .nav__logo--blanc { opacity: 0; }

  /* Cible tactile : le lien doit faire au moins 44px de haut, pas la hauteur du texte. */
  .nav__liens a { font-size: 1.05rem; letter-spacing: .1em; color: var(--encre);
    padding: 13px 8px; display: inline-flex; align-items: center; min-height: 44px; }
  .nav__liens a::after { bottom: 8px; }
  .nav.est-defile .nav__liens a, .nav--solide .nav__liens a { color: var(--encre); }

  .nav__fin .btn { display: none; }
  /* Le CTA du menu mobile, caché en desktop par une spécificité qui bat la règle
     de base pour qu'il n'y ait jamais deux boutons dans la barre. */
  .nav__liens .nav__cta--menu { display: inline-flex; margin-top: 8px; }
}

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

@media (max-width: 680px) {
  .hero { min-height: 0; padding: calc(var(--nav-h) + 44px) 0 48px; }
  .hero__voile { background: linear-gradient(180deg, rgba(7, 35, 57, .74) 0%, rgba(7, 35, 57, .86) 100%); }
  .grille--4, .grille--3, .grille--2 { grid-template-columns: minmax(0, 1fr); }
  .confiance { grid-template-columns: minmax(0, 1fr); }
  .pied__haut { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bande-cta__in { flex-direction: column; align-items: flex-start; }
  .banniere { min-height: 0; padding: calc(var(--nav-h) + 48px) 0 38px; }
  .devis { padding: 0; }
  .devis__panneau {
    width: 100vw;
    margin: 0;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .btn { width: 100%; }
  .devis__sortie .btn, .devis__pied .btn { width: auto; }
  .hero__faits { gap: 10px 18px; }
}

/* Sur écran tactile, pas de translation au survol (elle reste collée après le tap). */
@media (hover: none) {
  .service:hover, .veh:hover { transform: none; }
  .veh:hover .veh__media img { transform: none; }
}