/* =================================================================
   Dépannage Orion : feuille de style (CSS3 vanilla), gabarit « depannage »
   (14e gabarit, chantier « Dépannage / Remorquage » du 10/10/2026).
   Design « ambre de sécurité sur bleu nuit » : page SOMBRE, ambre des
   feux de détresse pour l'appel à l'action, carte formulaire sombre.
   Écrit pour le téléphone d'abord (un automobiliste en panne lit la page
   sur son téléphone, au bord de la route) : bouton d'appel dans l'en-tête,
   barre basse « Appeler · Dépannage », formulaire à gros champs.

   ACCENT PILOTABLE PAR LE PIPELINE
   --------------------------------
   Mêmes noms de variables que le garage (bot/sectors/_templates.json
   recopie son accent_css) :
     --accent     : couleur principale (boutons, pastilles, feu de la dépanneuse)
     --accent-2   : variante CLAIRE (textes et icônes posés sur le fond sombre)
     --accent-3   : variante foncée (états actifs)
     --accent-ink : texte posé SUR l'accent. L'ambre est clair : texte SOMBRE
                    (bleu nuit). Une couleur de marque injectée qui serait
                    foncée demande une encre claire : à poser par le bot.
     --surface    : cartes et formulaire (lue par le widget de réservation,
                    data-surface="--surface") ; --ink : bleu nuit le plus profond.
   Contraste mesuré (WCAG) : tout texte posé par cette feuille atteint 4,5:1
   au moins sur son fond (relevé du 10/10/2026, de 4,7 à 15,8:1).
   ================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  color-scheme: dark;

  /* Fonds bleu nuit */
  --ink:        #0A1322;   /* le plus profond (pied de page) */
  --bg:         #0D182A;   /* fond de page */
  --bg-2:       #111E33;   /* sections alternées, champs */
  --surface:    #16253D;   /* cartes, formulaire */
  --surface-2:  #1E3150;   /* cartes élevées, survol */

  /* Lignes et textes sur fond sombre */
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --mist:       #93A2B8;
  --text:       #EEF2F8;
  --text-soft:  #B7C3D4;
  --text-faint: #93A2B8;

  /* Accent : ambre de sécurité (voir la note pipeline en tête de fichier) */
  --accent:     #FFB020;
  --accent-2:   #FFC85A;
  --accent-3:   #E59A00;
  --accent-ink: #0A1322;   /* texte sur l'accent : SOMBRE */
  --shadow-accent: 0 12px 30px rgba(255, 176, 32, .28);

  /* États du formulaire, sur fond sombre */
  --danger:     #FF9C91;
  --ok:         #8CE3AC;
  --ok-bg:      #12321F;

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Ombres */
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .35);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, .45);

  /* Transitions */
  --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
  --t-med:  .32s cubic-bezier(.4, 0, .2, 1);
  --t-slow: .6s cubic-bezier(.16, 1, .3, 1);

  /* Typo */
  --font-head: "Syne", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Espacements */
  --space-section: clamp(4rem, 8vw, 7rem);
  --container: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* En-tête, barre basse du téléphone, bouton « haut de page » */
  --header-h: 76px;
  --callbar-h: 64px;
  --tt-bas: 22px;          /* retrait du bas du bouton « haut de page » */
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* l'en-tête fixe pleine largeur s'étend sur la gouttière de la barre de défilement ; aucun élément sticky ici */
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
}

::selection { background: var(--accent); color: var(--accent-ink); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }

.section__head {
  max-width: 720px;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}

/* Taille plancher : le mot le plus long des titres des trois langues tient de 280 px à 1920 px
   (« dépannage », « verrassing. », « assistance » ; balayage du 10/10/2026). */
.section__title {
  font-size: clamp(1.55rem, 1.05rem + 2.9vw, 3.2rem);
  font-weight: 800;
  color: var(--text);
  margin-block: .5rem .9rem;
}

.section__intro {
  font-size: clamp(1.02rem, 1rem + .3vw, 1.18rem);
  color: var(--text-soft);
  max-width: 60ch;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.kicker span {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .75rem 1.25rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  line-height: 1.15;
}
.btn svg { flex-shrink: 0; }

/* Appel à l'action principal : ambre plein, texte bleu nuit. */
.btn--accent,
.btn--call {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover,
.btn--call:hover { transform: translateY(-2px); background: var(--accent-2); }
.btn--accent:active,
.btn--call:active { transform: translateY(0); background: var(--accent-3); }

.btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border: 1.5px solid rgba(255, 255, 255, .28);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }

.btn--lg { padding: 1rem 1.6rem; font-size: 1.04rem; }
/* Bouton pleine largeur : retour à la ligne permis et centré (leçon du garage, 22/09/2026 : un
   libellé insécable élargissait son formulaire au-delà de l'écran du téléphone). */
.btn--block { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 480px) { .btn--block { line-height: 1.3; } }

/* ---------- EN-TÊTE ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 19, 34, .62);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: background var(--t-med), box-shadow var(--t-med), backdrop-filter var(--t-med), border-color var(--t-med);
}
.site-header.is-scrolled {
  background: rgba(10, 19, 34, .94);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* sous le seuil du burger, la nav sort du flux (panneau fixe) : le burger reste à droite */
  gap: .9rem;
  width: 100%;
}

/* Marque : rétrécissable. Dans une démo, elle porte le nom du prospect ; un nom long passe à
   la ligne au lieu de pousser le bouton d'appel et le burger hors de l'écran. Syne en 700 et
   non 800 : le 800 de cette police est un dessin très large (nom du modèle : 13,7 em contre
   9,4 em en 700), qui passait sur deux lignes en bureau comme sur téléphone (recette_entetes
   du 10/10/2026). */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -.02em;
  color: var(--text);
  flex-shrink: 1;
}
.logo__mark { border-radius: 11px; flex-shrink: 0; }
.logo__text { line-height: 1.08; }
.logo__accent { color: var(--accent-2); }
.logo--footer { color: var(--text); }

/* Navigation : écart FIXE (en-têtes du 18/09/2026) ; le menu ne se déplie qu'à partir de
   1280 px, où le conteneur est déjà plafonné. */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.nav__link {
  position: relative;
  color: rgba(238, 242, 248, .84);
  font-weight: 500;
  font-size: .93rem;
  padding: .5rem .2rem;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .25rem; right: .25rem;
  bottom: .15rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after { transform: scaleX(1); }

/* Éléments du menu mobile, masqués en bureau */
.nav__phone, .nav__cta--mobile { display: none; }
/* Spécificité 0,2,0 : bat la règle .lang-switch { display: inline-flex } plus bas */
.nav .lang-switch--mobile { display: none; }

/* Voile du tiroir tablette : masqué partout par défaut (le <div> créé en JS serait sinon un
   bloc vide en flux en bureau) ; affiché seulement de 601 à 1279 px. */
.nav-scrim { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* Bouton d'appel de l'en-tête : visible à toutes les largeurs. En bureau, libellé et numéro ;
   sous le seuil du burger, le numéro seul ; sur téléphone, pastille ambre « Appeler ». */
.header__call {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-family: var(--font-head);
  flex-shrink: 0;
}
.header__call-ic {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  flex-shrink: 0;
}
.header__call-txt { display: flex; flex-direction: column; line-height: 1.15; }
.header__call-label { font-size: .68rem; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.header__call-num { font-family: var(--font-body); font-size: 1.04rem; font-weight: 700; white-space: nowrap; }
.header__call-short { display: none; }
.header__call:hover .header__call-num { color: var(--accent-2); }

.header__cta { padding: .8rem 1.2rem; font-size: .92rem; }
.lang-switch--desktop .lang-switch__btn { padding-inline: .55rem; }

/* ---------- SÉLECTEUR DE LANGUE ---------- */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.lang-switch__btn {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(238, 242, 248, .78);
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch__btn:hover { color: #fff; }
.lang-switch__btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  margin-inline: auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- HÉROS ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.2rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(760px 520px at 82% 18%, rgba(255, 176, 32, .13), transparent 62%),
    radial-gradient(900px 600px at 0% 100%, rgba(30, 49, 80, .55), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--bg) 100%);
  color: var(--text);
  overflow: hidden;
}
/* Filet « chevrons » de chantier en bas du héros, purement décoratif. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 14px, var(--ink) 14px 28px);
  opacity: .85;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.hero__content { min-width: 0; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 600;
  color: rgba(238, 242, 248, .94);
  margin-bottom: 1.4rem;
}
.hero__eyebrow .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 176, 32, .25);
  flex-shrink: 0;
}

/* Taille suivant la largeur, plafonnée : la ligne la plus large des trois langues (« En panne ? »,
   insécable avant le point d'interrogation) tient dans la colonne du héros dès qu'il passe sur
   deux colonnes (1101 px) ; plancher pour les plus petits téléphones (280 px). */
.hero__title {
  font-size: clamp(2.05rem, 1.1rem + 4.1vw, 4.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: 1.3rem;
}
.hero__title-accent { color: var(--accent-2); }

.hero__lead {
  font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem);
  color: var(--text-soft);
  max-width: 58ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.2rem;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .93rem;
  color: rgba(238, 242, 248, .94);
}
.hero__badge svg { color: var(--accent-2); flex-shrink: 0; }

/* Illustration : dépanneuse à plateau, dessinée en SVG (aucune photo). */
.hero__art {
  position: relative;
  min-width: 0;
}
.hero__art svg { display: block; width: 100%; height: auto; }

/* ---------- SERVICES ---------- */
.services { background: var(--bg-2); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  overflow: hidden;
  transition: transform var(--t-med), border-color var(--t-med), background var(--t-med);
}
.service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.service:hover { transform: translateY(-4px); border-color: rgba(255, 176, 32, .35); background: var(--surface-2); }
.service:hover::before { transform: scaleX(1); }
.service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: rgba(255, 176, 32, .12);
  border: 1px solid rgba(255, 176, 32, .28);
  color: var(--accent-2);
  margin-bottom: 1rem;
}
.service__title { font-size: 1.2rem; color: var(--text); margin-bottom: .5rem; }
.service__desc { color: var(--text-soft); font-size: .95rem; }
.service__items {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- DÉROULEMENT ---------- */
.process { background: var(--bg); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  counter-reset: etape;
}
.step {
  position: relative;
  padding-top: 1.2rem;
}
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
/* Numéro d'étape : décoratif (aria-hidden), mais lisible malgré tout (4,7:1 sur --bg). */
.step__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.4rem;
  color: #7084A6;
  line-height: 1;
  margin-bottom: .7rem;
}
.step__title { font-size: 1.22rem; color: var(--text); margin-bottom: .5rem; }
.step__desc { color: var(--text-soft); font-size: .96rem; }

/* ---------- ZONE D'INTERVENTION ---------- */
.zone { background: var(--bg-2); }
.zone__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.zone__lead { color: var(--text-soft); margin-block: 1rem 1.6rem; max-width: 54ch; }
.zone__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: .7rem 1.2rem;
}
.zone__list li {
  position: relative;
  padding-left: 1.4rem;
  font-weight: 600;
  color: var(--text);
}
.zone__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.zone__map {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  aspect-ratio: 1;
  max-width: 380px;
  margin-inline: auto;
  width: 100%;
}
.zone__map svg { display: block; width: 100%; height: 100%; }

/* ---------- TARIFS ---------- */
.tarifs { background: var(--bg); }
.tarifs__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.tarifs__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.1rem, 3vw, 2rem);
}
.tarifs__table {
  width: 100%;
  border-collapse: collapse;
}
.tarifs__table thead th {
  font-family: var(--font-head);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  text-align: left;
  padding: 0 0 .8rem;
}
.tarifs__table thead th + th { text-align: right; }
.tarifs__table td {
  padding: .95rem 0;
  border-top: 1px dashed var(--line-strong);
  vertical-align: baseline;
}
.tarifs__label { color: var(--text); padding-right: 1rem; }
/* Prix et numéros de téléphone en Inter : les chiffres de Syne sont trop stylisés pour être lus
   d'un coup d'œil. */
.tarifs__prix {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.tarifs__note { margin-top: 1.2rem; color: var(--text-faint); font-size: .92rem; }
.tarifs__assist {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: rgba(255, 176, 32, .07);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-soft);
  font-size: .95rem;
}

/* ---------- AVIS ---------- */
.testi { background: var(--bg-2); }
.testi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.testi__card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
}
.testi__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.testi__quote {
  font-size: 1.04rem;
  line-height: 1.65;
  color: rgba(238, 242, 248, .92);
  font-style: italic;
}
.testi__author { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.testi__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}
.testi__meta { display: flex; flex-direction: column; min-width: 0; }
.testi__name { font-weight: 700; font-family: var(--font-head); }
.testi__loc { font-size: .86rem; color: var(--text-faint); }

/* ---------- INFOS PRATIQUES ---------- */
.infos { background: var(--bg); }
.infos__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.infos__lead { color: var(--text-soft); margin-block: 1rem 1.8rem; max-width: 54ch; }

.infos__contact { display: grid; gap: 1.1rem; margin-bottom: 1.8rem; }
.infos__contact li { display: flex; gap: .9rem; align-items: flex-start; }
.infos__contact li > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.infos__contact strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.infos__contact a, .infos__contact span { color: var(--text); }
.infos__contact a:hover { color: var(--accent-2); }
.infos__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--accent-2);
}
.infos__maplink {
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-2) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.infos__hours {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.3rem 1.5rem;
  max-width: 480px;
}
.infos__hours-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .8rem;
}
.infos__hours-title svg { flex-shrink: 0; }
/* Jour et horaires trop longs pour une ligne (décision de Charles « G1 » du 04/10/2026, règle du
   garage) : la ligne se replie seulement quand le mot le plus long du jour et les horaires ne
   tiennent plus côte à côte ; les horaires passent alors dessous, calés à droite. Tant que tout
   tient, le jour, à base nulle, prend la place qui reste. */
.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 1rem;
  padding-block: .45rem;
}
.hours__row + .hours__row { border-top: 1px dashed var(--line-strong); }
.hours__day { color: var(--text-soft); font-size: .95rem; flex: 1 1 0; }
.hours__time {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}
.hours__row--h24 .hours__day,
.hours__row--h24 .hours__time { color: var(--accent-2); }

.infos__map {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.infos__map svg { display: block; width: 100%; height: 100%; }
.infos__map-pin {
  position: absolute;
  left: 1rem; bottom: 1rem;
  max-width: calc(100% - 2rem);
  background: rgba(10, 19, 34, .88);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  color: var(--text);
}

/* ---------- DEMANDE DE DÉPANNAGE (formulaire de la formule Standard) ---------- */
.depannage {
  position: relative;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(255, 176, 32, .1), transparent 60%),
    linear-gradient(160deg, var(--bg-2) 0%, var(--ink) 100%);
}
.depannage__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.depannage__lead { color: var(--text-soft); margin-block: 1rem 1.4rem; max-width: 46ch; font-size: 1.06rem; }
.depannage__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .5rem;
  color: var(--text-soft);
  margin-bottom: 1.8rem;
}
.depannage .section__title { font-size: clamp(1.55rem, 1.05rem + 2.3vw, 2.7rem); }
.depannage__tel {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-2);
  white-space: nowrap;
}
.depannage__tel:hover { text-decoration: underline; text-underline-offset: 4px; }

.depannage__safety {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem 1.3rem;
  max-width: 46ch;
}
.depannage__safety-title {
  font-size: .98rem;
  color: var(--text);
  margin-bottom: .7rem;
}
.depannage__safety ul { display: grid; gap: .55rem; }
.depannage__safety li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-soft);
  font-size: .94rem;
}
.depannage__safety li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--accent);
}

.depannage__formwrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
}
.depannage__formwrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 12px, var(--ink) 12px 24px);
}

.form { display: grid; gap: 1.1rem; }
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field[hidden] { display: none; }
.field__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
}
.field__optional {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .82rem;
  color: var(--text-faint);
}
.field__hint { font-size: .86rem; color: var(--text-faint); margin-top: -.15rem; }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: .75rem .95rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field__input::placeholder { color: #8E9DB2; opacity: 1; }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px rgba(255, 176, 32, .22);
}
textarea.field__input { resize: vertical; min-height: 96px; }
select.field__input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23B7C3D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field.has-error .field__input { border-color: var(--danger); }
.field__error {
  color: var(--danger);
  font-size: .84rem;
  font-weight: 600;
  min-height: 1em;
}
.field__error:empty { min-height: 0; }

/* Choix à pastilles (type de demande, le véhicule roule ou non) : vrais boutons radio, grandes
   zones tactiles, deux colonnes qui ne s'élargissent jamais pour leur contenu. */
.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.choice__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .7rem .85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.choice__opt input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.choice__opt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 176, 32, .1);
}
.choice__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Lieu : champ et bouton « Me localiser » côte à côte tant qu'ils tiennent, puis le bouton passe
   dessous (jamais de champ écrasé sur un petit téléphone). */
.lieu {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.lieu .field__input { flex: 1 1 13rem; min-width: 0; width: auto; }
.btn--locate {
  flex: 0 0 auto;
  min-height: 48px;
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 176, 32, .12);
  border: 1.5px solid rgba(255, 176, 32, .55);
  color: var(--accent-2);
  font-size: .94rem;
}
.btn--locate:hover { background: rgba(255, 176, 32, .2); }
.btn--locate[disabled] { opacity: .7; cursor: progress; }
.df-position { font-size: .88rem; font-weight: 600; }
.df-position:empty { display: none; }
.df-position__ok { color: var(--ok); }
.df-position__err { color: var(--danger); }
.df-position__wait { color: var(--text-soft); }

.form__rgpd { font-size: .85rem; color: var(--text-faint); }
.form__rgpd a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }

/* L'attribut hidden l'emporte sur le display ci-dessous. */
.form__success[hidden] { display: none; }
.form__success {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid rgba(140, 227, 172, .35);
  border-radius: var(--r-sm);
  padding: .95rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
}
.form__success svg { flex-shrink: 0; margin-top: .15em; }

/* ---------- PIED DE PAGE ---------- */
.footer { background: var(--ink); color: rgba(238, 242, 248, .76); border-top: 1px solid var(--line); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__tagline { margin-block: 1.1rem 1.2rem; max-width: 38ch; }
.footer__call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-2);
}
.footer__call:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.footer__col-title {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.footer__col ul { display: grid; gap: .65rem; }
.footer__col a, .footer__col span { font-size: .95rem; transition: color var(--t-fast); }
.footer__col a:hover { color: var(--accent-2); }

/* Ligne du bas : société, copyright, liens légaux. Dernière ligne du pied, gouttière du
   conteneur gardée (jamais de padding horizontal à zéro, constat du 03/10/2026). */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
}
.footer__company { flex-basis: 100%; color: var(--text-faint); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.footer__legal a:hover { color: var(--accent-2); }

/* Fin de page : le bouton « haut de page » se poserait sur la dernière ligne du pied. Sous elle,
   le pied garde la place du bouton : son retrait du bas, sa hauteur et 12 px d'air ; sur
   téléphone, le retrait du bas compte aussi la barre basse « Appeler · Dépannage », sous le
   bouton. Au-delà de 1308 px (1291 px de largeur utile + 17 px de barre de défilement
   classique), le bouton est dans la marge du conteneur (22 + 44 px < (largeur - 1160) / 2) :
   rendu inchangé. */
@media (max-width: 1308px) {
  .footer__bottom { padding-bottom: calc(var(--tt-bas) + 44px + 12px); }
}

/* ---------- BARRE BASSE DU TÉLÉPHONE ---------- */
/* « Appeler » et « Dépannage » toujours sous le pouce. Classe floating-cta en plus : la règle
   des démos (.to-top,.floating-cta { margin-bottom }) la remonte au-dessus du bandeau. */
.callbar { display: none; }

/* ---------- BOUTON « HAUT DE PAGE » ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: var(--tt-bas);
  z-index: 85;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med), background var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- RÉVÉLATIONS AU DÉFILEMENT ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 70px; }
  .infos__inner, .depannage__inner, .tarifs__inner { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { grid-template-columns: 1fr; }
  .depannage__safety, .depannage__lead { max-width: none; }
}

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 520px; }
}

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

/* Choix à pastilles sur une colonne sur les petits téléphones : le mot le plus long d'un libellé
   (« maintenant », « verzekeringen ») tient toujours, et les zones tactiles s'allongent. */
@media (max-width: 400px) {
  .choice { grid-template-columns: minmax(0, 1fr); }
}

/* Très petit téléphone : la marque garde son nom, le pictogramme s'efface (le nom, l'appel et le
   burger tiennent jusqu'à 280 px). */
@media (max-width: 340px) {
  .logo__mark { display: none; }
}

/* Menu replié (burger) jusqu'à 1279 px : la barre dépliée (marque, cinq liens, appel, FR/NL/EN,
   bouton) demande environ 1 120 px, que le conteneur n'offre qu'à partir de 1280 px. Seuil
   repris par main.js (matchMedia, même requête) : le menu se referme en quittant la plage. */
@media (max-width: 1279px) {
  /* MENU MOBILE : panneau plein écran sous l'en-tête, fermé par opacité et visibilité
     seulement (aucun positionnement hors écran : jamais de défilement horizontal). */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    background: rgba(10, 19, 34, .98);
    backdrop-filter: blur(16px) saturate(140%);
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.6rem var(--gutter) 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    gap: 1.2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Menu ouvert : en-tête opaque et sans flou (piège du 18/09/2026 : son backdrop-filter en
     faisait le conteneur du panneau fixe, la page transparaissait à travers le menu). */
  .site-header:has(.nav.is-open) {
    background: rgba(10, 19, 34, .98);
    backdrop-filter: none;
  }

  .nav-scrim { display: none; }

  .nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    margin: -.4rem -.4rem .2rem 0;
    border-radius: var(--r-sm);
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
  }
  .nav__close:hover { background: rgba(255, 255, 255, .14); color: var(--accent-2); }
  .nav__close svg { width: 22px; height: 22px; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    width: 100%;
  }
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 1.18rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .nav__link::after { display: none; }
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    border-radius: 3px;
    background: var(--accent);
    transform: translateY(-50%) scaleY(0);
    transition: transform var(--t-fast);
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link:active {
    color: var(--accent-2);
    background: rgba(255, 176, 32, .1);
  }
  .nav__link:hover::before,
  .nav__link:focus-visible::before,
  .nav__link:active::before { transform: translateY(-50%) scaleY(1); }

  .nav__phone {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.3rem;
  }
  .nav__phone svg { color: var(--accent-2); flex-shrink: 0; }

  .nav__cta--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.05rem;
    padding: .95rem;
    border-radius: var(--r-pill);
    text-align: center;
  }

  .nav .lang-switch--mobile { display: inline-flex; align-self: flex-start; }
  .lang-switch--desktop, .header__cta, .header__call-label { display: none; }

  .burger { display: flex; }
}

/* Le bouton de fermeture n'existe que dans le menu mobile : masqué en bureau. */
.nav__close { display: none; }

/* MENU TABLETTE : de 601 px au seuil du burger, le panneau plein écran devient un tiroir ancré
   à droite, avec un voile cliquable (aucun translateX : pas de défilement horizontal). */
@media (min-width: 601px) and (max-width: 1279px) {
  .nav {
    left: auto;
    right: 0;
    width: min(80vw, 400px);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .6);
    z-index: 95;                 /* au-dessus du voile (90), sous l'en-tête (100) */
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Retient le défilement : le verrou du <body> est sans effet (html { overflow-x: clip }). */
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med), visibility var(--t-med);
  }
  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Téléphone : en-tête plus bas, appel en pastille, barre basse « Appeler · Dépannage ». Le
   bouton « haut de page » monte au-dessus de la barre (son retrait du bas la compte). */
@media (max-width: 760px) {
  :root {
    --header-h: 64px;
    --tt-bas: calc(var(--callbar-h) + 12px);
  }
  .logo { font-size: 1.08rem; gap: .5rem; }
  .logo__mark { width: 34px; height: 34px; }
  .header__inner { gap: .5rem; }
  .header__actions { gap: .4rem; }
  /* Appel de l'en-tête : pastille ronde ambre de 44 px (la barre basse porte le libellé
     « Appeler ») ; le libellé reste lu par les lecteurs d'écran. Marque (deux lignes au plus),
     appel et burger tiennent dès 320 px. */
  .header__call {
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
  }
  .header__call-ic { width: auto; height: auto; background: none; color: inherit; }
  .header__call-txt { display: none; }
  .header__call-short {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .callbar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: .5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: var(--callbar-h);
    padding: 8px var(--gutter);
    background: rgba(10, 19, 34, .96);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -10px 26px rgba(0, 0, 0, .35);
    transition: opacity var(--t-fast), visibility var(--t-fast);
  }
  .callbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 0;
    height: 48px;
    padding: 0 .6rem;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
  }
  .callbar__btn svg { flex-shrink: 0; }
  .callbar__btn--call { background: var(--accent); color: var(--accent-ink); }
  .callbar__btn--form { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
  /* Saisie dans la section de demande (clavier ouvert) : la barre s'efface pour ne pas couvrir
     le champ ou le bouton d'envoi ; elle revient dès que le focus quitte la section. */
  body.saisie-en-cours .callbar { opacity: 0; visibility: hidden; }

  .hero { padding-top: calc(var(--header-h) + 1.8rem); }
  .hero__lead { margin-bottom: 1.6rem; }
  .hero__actions { margin-bottom: 1.8rem; }
}

@media (max-width: 540px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .hero__badges { gap: .7rem 1.4rem; }
  .btn--lg { width: 100%; white-space: normal; text-align: center; }
  .hero__actions { width: 100%; }
  .tarifs__prix { font-size: 1.05rem; }
}

/* Petit téléphone : marque resserrée (un nom long de démo passe sur deux lignes ; celui du modèle
   tient sur une ligne jusqu'à 280 px, d'où le plancher à .9rem sous 320 px), boutons de la barre
   basse un peu plus serrés. */
@media (max-width: 374px) {
  .logo { font-size: clamp(.9rem, 4.8vw, .96rem); gap: .4rem; }
  .logo__mark { width: 30px; height: 30px; }
  .callbar__btn { font-size: .94rem; gap: .35rem; }
}

/* Liens du pied sur deux colonnes jusqu'à 720 px, colonne Contact sur toute la largeur (décision de
   Charles du 03/10/2026 pour le garage, l'artisan et l'agence, même pied ici) : un e-mail long ne
   pousse plus le pied hors de l'écran ; au-delà de 720 px, trois colonnes. 1 / -1 et non 1 / 3 :
   la règle vaut aussi sous 481 px, sur une seule colonne, où 1 / 3 créerait une colonne vide. */
@media (max-width: 720px) {
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
}

/* Liens du pied sur une colonne jusqu'à 480 px : minmax(0, 1fr), les colonnes ne s'élargissent
   plus pour leur contenu ; overflow-wrap: anywhere (et non break-word, sans effet sur la largeur
   minimale des li des listes en grille) : un e-mail plus long que l'écran passe à la ligne. */
@media (max-width: 480px) {
  .footer__inner, .footer__nav { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { overflow-wrap: anywhere; }
  .choice__opt { padding: .65rem .7rem; font-size: .92rem; }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .nav { transform: none; }
  .nav.is-open { transform: none; }
}


/* ============================================================
   DATE EN JJ-MM-AAAA : champ texte masqué + bouton calendrier (même mécanique que le garage)
   Un <input type="date"> s'affiche dans la locale du NAVIGATEUR : le champ visible est un
   texte, le champ date natif reste dans le DOM, transparent et neutralisé au clic
   (showPicker() refuse de s'ouvrir sur un display:none).
   ============================================================ */
.field-date { position: relative; }
.field-date > input[type="text"] { padding-right: 3rem; cursor: pointer; }
.field-date__btn {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: inherit;
  opacity: .75;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.field-date__btn:hover,
.field-date__btn:focus-visible { opacity: 1; }
.field-date > input.field-date__native {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Adresse e-mail affichée dans la page (04/10/2026, décision de Charles « E2 ») : le bot pose une
   coupure permise juste après « @ » (<wbr>) et enveloppe dans .itx-email une adresse écrite seule
   hors d'un lien. Cette coupure, et son filet (une partie encore trop longue se coupe n'importe
   où), ne jouent que dans la liste de contact, jusqu'à la largeur où sa section passe sur une
   colonne. Ailleurs (pied de page), la coupure est neutralisée. */
a[href^="mailto:"] wbr, .itx-email wbr { display: none; }
@media (max-width: 1024px) {
  .infos__contact a[href^="mailto:"] wbr, .infos__contact .itx-email wbr { display: inline; }
  .infos__contact a[href^="mailto:"], .infos__contact .itx-email { overflow-wrap: anywhere; }
}