/* ==========================================================================
   BMServices — Composants réutilisables
   Boutons · Badges · Navigation · Cartes · Formulaire · Accordéon
   Lightbox · Footer · CTA flottant
   ========================================================================== */

/* ==========================================================================
   1. Boutons
   ========================================================================== */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .9375rem 1.75rem;
  min-height: 52px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.btn svg { flex: none; width: 1.125em; height: 1.125em; transition: transform var(--t-base) var(--ease-spring); }
.btn span { position: relative; z-index: 2; }

/* Balayage lumineux au survol */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms var(--ease-out);
}
.btn:hover::after { transform: translateX(130%); }

.btn:hover { transform: translateY(-3px); color: var(--btn-fg); }
.btn:active { transform: translateY(-1px) scale(.985); }

/* Variantes */
.btn--primary {
  background: var(--grad-brand);
  box-shadow: var(--sh-brand);
}
.btn--primary:hover { box-shadow: 0 24px 50px -18px rgba(37, 99, 235, .7); }
.btn--primary svg { transition: transform var(--t-base) var(--ease-spring); }
.btn--primary:hover svg { transform: translateX(4px); }

.btn--call {
  background: var(--grad-flame);
  box-shadow: var(--sh-flame);
}
.btn--call:hover { box-shadow: 0 24px 50px -16px rgba(234, 88, 12, .66); }
.btn--call:hover svg { transform: rotate(-14deg) scale(1.1); }

.btn--ghost {
  --btn-fg: var(--text);
  background: transparent;
  border: 1.5px solid var(--border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--ghost-hover-border);
  background: var(--ghost-hover-bg);
  color: var(--ghost-hover-fg);
}

.btn--light {
  --btn-fg: var(--ink-900);
  background: #fff;
  box-shadow: var(--sh-md);
}
.btn--light:hover { background: var(--brand-50); }

.btn--sm { padding: .6875rem 1.25rem; min-height: 44px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.125rem 2.25rem; min-height: 60px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
  transform: none;
}

/* Lien-flèche discret */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--t-base) var(--ease-spring); }
.link-arrow:hover svg { transform: translateX(5px); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ==========================================================================
   2. Badges & puces
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
}
.badge svg { width: 1em; height: 1em; flex: none; }

.badge--glass {
  color: #e9f2ff;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.badge--placeholder {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}

/* Pastille « en direct » */
.pulse-dot {
  position: relative;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: #34d399;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #34d399;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================================
   3. Navigation
   ========================================================================== */
.site-header {
  /* En haut de page l'en-tête est transparent, posé sur le hero sombre :
     il lui faut donc la palette sombre. Elle redevient claire une fois
     l'en-tête compacté sur fond blanc (.is-stuck, plus bas). */
  --text: #eef3fc;
  --border-strong: rgba(255, 255, 255, .26);
  --ghost-hover-bg: rgba(255, 255, 255, .14);
  --ghost-hover-fg: #ffffff;
  --ghost-hover-border: rgba(255, 255, 255, .5);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  /* La hauteur inclut la barre d'état : l'en-tête la recouvre de sa propre
     couleur, et son contenu reste sous l'encoche plutôt que derrière. */
  height: calc(var(--nav-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  transition:
    height var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}

.site-header.is-stuck {
  --text: var(--slate-900);
  --border-strong: #d3dcea;
  --ghost-hover-bg: var(--brand-50);
  --ghost-hover-fg: var(--brand-700);
  --ghost-hover-border: var(--brand-500);

  height: calc(var(--nav-h-compact) + var(--safe-top));
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px -18px rgba(11, 17, 32, .3);
}
.site-header.is-stuck::before { opacity: 1; }

/* La bande d'état de l'iPhone — l'heure, la batterie — était emportée par
   le blanc de l'en-tête compacté : un bandeau clair détaché du site, sous
   lequel l'heure passait en noir. Elle garde désormais l'encre du site,
   la même que celle annoncée au navigateur par « theme-color ». Sur un
   appareil sans encoche, « --safe-top » vaut zéro et la bande n'existe pas. */
.site-header::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  background: var(--ink-900);
  z-index: -1;
  pointer-events: none;
  /* En haut de page, l'en-tête est transparent sur un bandeau déjà sombre :
     inutile d'y superposer une teinte, elle marquerait une couture. */
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.site-header.is-stuck::after { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-right: auto;
  transition: color var(--t-base) var(--ease-out);
}
.logo:hover { color: var(--white); }
.logo__mark {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-brand);
  transition: transform var(--t-base) var(--ease-spring);
}
.logo__mark svg { width: 21px; height: 21px; color: #fff; }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo__text small {
  display: block;
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: -2px;
}

.is-stuck .logo,
.nav--solid .logo { color: var(--slate-900); }

/* --- Liens --- */
.nav__list {
  display: flex;
  align-items: center;
  gap: .125rem;
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem;
  bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: #fff; font-weight: 600; }

.is-stuck .nav__link,
.nav--solid .nav__link { color: var(--text-muted); }
.is-stuck .nav__link:hover,
.nav--solid .nav__link:hover { color: var(--brand-700); background: var(--brand-50); }
.is-stuck .nav__link[aria-current="page"],
.nav--solid .nav__link[aria-current="page"] { color: var(--brand-700); }

/* Sous-menu services */
.nav__item--has-menu { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.nav__toggle svg { width: .7em; height: .7em; transition: transform var(--t-base) var(--ease-out); }
.nav__item--has-menu:hover .nav__toggle svg,
.nav__item--has-menu:focus-within .nav__toggle svg { transform: rotate(180deg); }

.nav__submenu {
  /* Panneau blanc : il garde la palette claire quelle que soit celle de l'en-tête */
  --text: var(--slate-900);

  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 300px;
  padding: .5rem;
  list-style: none;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-spring),
    visibility var(--t-base);
}
.nav__item--has-menu:hover .nav__submenu,
.nav__item--has-menu:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__submenu a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__submenu a:hover { background: var(--brand-50); color: var(--brand-700); }
.nav__submenu svg { width: 18px; height: 18px; flex: none; color: var(--brand-500); }

.nav__actions { display: flex; align-items: center; gap: .625rem; }

/* --- Bouton hamburger --- */
.burger {
  display: none;
  width: 46px; height: 46px;
  flex: none;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.is-stuck .burger { border-color: var(--border-strong); background: var(--slate-50); }

.burger__box { position: relative; width: 20px; height: 14px; }
.burger__bar {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-fast) var(--ease-out), width var(--t-base) var(--ease-out);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 6px; width: 72%; }
.burger__bar:nth-child(3) { top: 12px; }
.is-stuck .burger__bar { background: var(--slate-900); }

.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; transform: translateX(-12px); }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Panneau mobile --- */
.drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* « inset: 0 » mesure la fenêtre barres repliées. En haut de page, où la
     barre d'adresse de Safari est dépliée, le menu passait donc DERRIÈRE
     elle : la barre virait au bleu foncé du panneau, et son bouton d'appel
     tombait hors de vue. « dvh » suit la hauteur réellement visible. */
  height: 100vh;
  height: 100dvh;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}
/* La visibilité ne s'anime pas : elle est commandée par deux états francs.
   « is-closing » tient le panneau à l'écran le temps qu'il finisse de
   sortir — sans quoi il disparaîtrait d'un coup, son glissement s'animant
   dans le vide. Une classe posée puis retirée se comporte de la même façon
   à chaque ouverture, ce qu'une transition sur « visibility » ne garantit
   pas partout. */
.drawer.is-open,
.drawer.is-closing { visibility: visible; }
.drawer.is-open { pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  /* Sur iOS, « overflow:hidden » sur le body ne suffit pas : sans ceci, la page
     continue de défiler derrière le menu quand on glisse le doigt sur le voile. */
  touch-action: none;
  overscroll-behavior: contain;
  /* Pas de « backdrop-filter » ici : flouter l'arrière-plan oblige le
     téléphone à recomposer tout l'écran — halos du bandeau d'accueil
     compris, déjà flous sur 90 px — à chacune des vingt images du
     fondu. C'est ce qui faisait sauter l'ouverture. Un voile plus dense
     rend le même service pour rien du tout. */
  background: rgba(4, 7, 15, .74);
  opacity: 0;
  transition: opacity 340ms var(--ease-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(400px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Le menu occupe toute la hauteur : son contenu doit rester sous
     l'encoche en haut et au-dessus de la barre d'accueil en bas. */
  padding: calc(1.125rem + var(--safe-top)) var(--sp-5)
           calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--grad-ink);
  border-left: 1px solid rgba(255, 255, 255, .1);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .7);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(102%);
  /* Le panneau garde son propre calque : sans cela, certains navigateurs
     le recomposent à la volée et la deuxième ouverture arrive d'un bloc. */
  will-change: transform;
  /* Sans rebond : le ressort faisait dépasser le panneau de quelques
     pixels au-delà du bord droit, découvrant la page derrière lui. */
  transition: transform 340ms var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.drawer__close {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
  .drawer__close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }
}
.drawer__close svg { width: 20px; height: 20px; }

.drawer__list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.drawer__list > li {
  opacity: 0;
  transform: translateX(20px);
}
.drawer.is-open .drawer__list > li {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms var(--ease-out) var(--i-delay, 0ms),
              transform 340ms var(--ease-out) var(--i-delay, 0ms);
}
/* Pendant la sortie, les entrées restent où elles sont : les voir repartir
   en cascade pendant que le panneau glisse fait deux mouvements contraires
   à la fois. Elles se réinitialisent une fois « is-closing » retiré, donc
   hors de vue. */
.drawer.is-closing .drawer__list > li {
  opacity: 1;
  transform: translateX(0);
  transition: none;
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: .9375rem .25rem;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t-base) var(--ease-out);
}
.drawer__link svg { width: 1rem; height: 1rem; opacity: .45; transition: transform var(--t-base) var(--ease-spring), opacity var(--t-fast); }
.drawer__link[aria-current="page"] { color: var(--aqua-300); padding-left: .625rem; }
/* Sur un écran tactile, « :hover » reste accroché au dernier élément touché :
   le lien gardait son décalage après la fermeture du menu. */
@media (hover: hover) {
  .drawer__link:hover { color: var(--aqua-300); padding-left: .625rem; }
  .drawer__link:hover svg { transform: translateX(4px); opacity: 1; }
}

.drawer__foot { margin-top: auto; padding-top: var(--sp-5); display: grid; gap: .75rem; }

/* Écran court (iPhone SE et compagnie) : on resserre pour que le bouton
   d'appel reste visible sans avoir à faire défiler le menu. */
@media (max-height: 700px) {
  .drawer__head { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
  .drawer__link { padding-top: .75rem; padding-bottom: .75rem; }
  .drawer__foot { padding-top: var(--sp-4); }
}
.drawer__meta {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
  text-align: center;
  line-height: 1.7;
}

/* ==========================================================================
   4. Cartes
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

/* Halo lumineux qui suit le curseur (variables posées par ui.js) */
.card--spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(37, 99, 235, .12),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.card--spot:hover::before { opacity: 1; }
.section--dark .card--spot::before,
.theme-dark .card--spot::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, .16), transparent 62%);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-300);
  box-shadow: var(--sh-lg);
}
.section--dark .card:hover,
.theme-dark .card:hover { border-color: rgba(34, 211, 238, .45); }

.card__icon {
  position: relative;
  width: 58px; height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4);
  border-radius: 16px;
  color: var(--brand-600);
  background: var(--grad-brand-soft);
  border: 1px solid var(--brand-100);
  transition: transform var(--t-base) var(--ease-spring), background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.card__icon svg { width: 27px; height: 27px; transition: transform var(--t-base) var(--ease-spring); }
.card:hover .card__icon {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px) rotate(-5deg);
  box-shadow: var(--sh-brand);
}
.card:hover .card__icon svg { transform: scale(1.08); }

.section--dark .card__icon,
.theme-dark .card__icon {
  color: var(--aqua-300);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

.card__title { margin-bottom: .625rem; }
.card__text { color: var(--text-muted); font-size: var(--fs-sm); }

.card__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: .5rem;
}
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
}

/* Rend toute la carte cliquable sans casser les autres liens */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ==========================================================================
   5. Accordéon (FAQ)
   ========================================================================== */
.accordion { display: grid; gap: .75rem; }

.accordion__item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.accordion__item.is-open {
  border-color: var(--brand-300);
  box-shadow: var(--sh-md);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.25rem clamp(1rem, .8rem + .7vw, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  transition: color var(--t-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--brand-600); }

.accordion__icon {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: transform var(--t-base) var(--ease-spring), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-fast);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.is-open .accordion__icon {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  transform: rotate(180deg);
}
.is-open .accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-in-out);
}
.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__inner { overflow: hidden; }
.accordion__inner > div {
  padding: 0 clamp(1rem, .8rem + .7vw, 1.5rem) 1.375rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out) 80ms;
}
.is-open .accordion__inner > div { opacity: 1; }

/* ==========================================================================
   6. Formulaire
   ========================================================================== */
.form { display: grid; gap: var(--sp-4); }

.form__row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* --------------------------------------------------------------------------
   Les deux portes du formulaire
   Une urgence et un devis de travaux n'appellent pas les mêmes questions :
   le mode choisi retire du formulaire ce qui ne sert pas. Les colonnes des
   lignes se referment d'elles-mêmes (auto-fit sur .form__row).
   -------------------------------------------------------------------------- */
.form[data-mode="urgence"] [data-only="devis"] { display: none; }

.modes { border: 0; padding: 0; margin: 0; }
.modes__legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.modes__list {
  display: grid;
  gap: .625rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.modes__opt { display: block; cursor: pointer; }
/* La case reste dans le flux pour le clavier et les lecteurs d'écran :
   on la masque à l'œil seulement. */
.modes__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.modes__box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .2rem .625rem;
  height: 100%;
  padding: .75rem .875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.modes__box svg {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  color: var(--text-subtle);
  transition: color var(--t-fast);
}
.modes__titre { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.modes__sous { font-size: var(--fs-xs); line-height: 1.3; color: var(--text-subtle); }

@media (hover: hover) {
  .modes__opt:hover .modes__box { border-color: var(--brand-300); }
}
.modes__opt input:checked + .modes__box {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-500);
}
.modes__opt input:checked + .modes__box svg { color: var(--brand-600); }
.modes__opt input:focus-visible + .modes__box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Champ à suggestions (ville, adresse)
   Les propositions viennent des annuaires publics de l'État. Le champ reste
   une saisie libre : si le service ne répond pas, ou si l'adresse n'y figure
   pas, le visiteur écrit ce qu'il veut et le formulaire part quand même.
   -------------------------------------------------------------------------- */
.combo { position: relative; }

.combo__liste {
  position: absolute;
  /* Au-dessus du bouton « revenir en haut », qui est fixe et se superposerait
     sinon à la dernière suggestion sur un écran étroit. */
  z-index: calc(var(--z-nav) + 1);
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: .25rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.combo__liste[hidden] { display: none; }

.combo__option {
  display: grid;
  gap: .1rem;
  padding: .5rem .625rem;
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.combo__option small { font-size: var(--fs-xs); color: var(--text-subtle); }
.combo__option:hover,
.combo__option[aria-selected="true"] { background: var(--brand-50); }
.combo__option[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--brand-300); }

/* Message d'attente ou d'absence de résultat : ni cliquable, ni navigable */
.combo__info {
  padding: .5rem .625rem;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.field { display: grid; gap: .4375rem; position: relative; }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.field__label .req { color: var(--danger-600); margin-left: .15em; }
.field__hint { font-size: var(--fs-xs); color: var(--text-subtle); }

.field__control {
  width: 100%;
  padding: .875rem 1rem;
  min-height: 52px;
  font-size: var(--fs-sm);
  /* Couleurs fixées, non héritées du contexte : posé sur une section sombre,
     ce champ prenait un texte presque blanc sur son fond clair. Même défaut
     que les cartes de la page 404. */
  color: var(--slate-900);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
textarea.field__control { min-height: 140px; resize: vertical; line-height: 1.6; }

.field__control::placeholder { color: var(--slate-400); }
.field__control:hover { border-color: var(--slate-400); }
.field__control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
  background: var(--white);
}

select.field__control {
  appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
}

.field.has-error .field__control {
  border-color: var(--danger-600);
  background: var(--danger-50);
}
.field.has-error .field__control:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }

.field.is-valid .field__control { border-color: var(--success-600); }

.field__error {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger-600);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.field__error svg { width: 14px; height: 14px; flex: none; }
.field.has-error .field__error { max-height: 4rem; opacity: 1; }

/* Dépôt de photos */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--slate-50);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--brand-500); background: var(--brand-50); }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone svg { width: 26px; height: 26px; color: var(--brand-500); }
.dropzone__title { font-size: var(--fs-sm); font-weight: 600; }
.dropzone__hint { font-size: var(--fs-xs); color: var(--text-subtle); }

/* Message d'une photo écartée : assez visible pour ne pas être manqué,
   assez discret pour ne pas alarmer — rien n'est perdu, seule la photo
   n'a pas été retenue. */
.dropzone__refus {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  color: var(--danger-600);
}

.previews {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.previews:empty { display: none; }
.previews li {
  position: relative;
  width: 78px; height: 78px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  animation: pop-in 320ms var(--ease-spring);
}
.previews img { width: 100%; height: 100%; object-fit: cover; }
.previews button {
  position: absolute;
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(4, 7, 15, .72);
  transition: background-color var(--t-fast) var(--ease-out);
}
.previews button:hover { background: var(--danger-600); }
.previews button svg { width: 12px; height: 12px; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Case à cocher consentement */
.checkfield {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  cursor: pointer;
}
.checkfield input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: .1rem;
  accent-color: var(--brand-600);
  cursor: pointer;
}
.checkfield.has-error { color: var(--danger-600); }

/* Piège à robots — invisible pour l'utilisateur, atteignable par un bot */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Retour d'envoi */
.form__status {
  display: none;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.125rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  animation: slide-in 380ms var(--ease-spring);
}
.form__status.is-visible { display: flex; }
.form__status svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.form__status--success { color: #065f46; background: var(--success-50); border-color: #a7f3d0; }
.form__status--error { color: #991b1b; background: var(--danger-50); border-color: #fecaca; }
.form__status strong { display: block; margin-bottom: .15rem; }

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* État de chargement du bouton */
.btn.is-loading { pointer-events: none; }
.btn.is-loading span { opacity: .55; }
.btn__spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading > svg:not(.btn__spinner) { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   7. Lightbox (galerie)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  /* Comme le voile du menu : aucun geste ne passe à la page en dessous. */
  touch-action: none;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(4, 7, 15, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
  max-width: min(1000px, 100%);
  transform: scale(.94);
  transition: transform 420ms var(--ease-spring);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__figure img {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}
.lightbox__caption {
  margin-top: var(--sp-4);
  text-align: center;
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-sm);
}
.lightbox__caption strong { display: block; color: #fff; font-family: var(--font-display); font-size: var(--fs-md); margin-bottom: .2rem; }

.lightbox__btn {
  position: absolute;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); transform: scale(1.08); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__prev { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }

/* ==========================================================================
   8. Pied de page
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--grad-ink);
  color: #cfd9ec;
  overflow: hidden;
  padding-top: clamp(3.5rem, 2.6rem + 4vw, 5.5rem);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .6), transparent);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--sp-7);
}
.footer__brand { grid-column: span 1; }
@media (min-width: 60rem) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: #9fadc7;
  max-width: 32ch;
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
}

.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
.footer__list a,
.footer__contact a {
  font-size: var(--fs-sm);
  color: #9fadc7;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  display: inline-block;
}
.footer__list a:hover { color: var(--aqua-300); transform: translateX(4px); }

.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.footer__contact li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); color: #9fadc7; }
.footer__contact svg { width: 18px; height: 18px; flex: none; color: var(--aqua-400); margin-top: .15rem; }
.footer__contact a { display: block; }
.footer__contact a:hover { color: var(--aqua-300); }
.footer__contact strong { display: block; color: #fff; font-size: var(--fs-base); font-family: var(--font-display); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: var(--fs-xs);
  color: #8695b2;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.footer__legal a { color: #8695b2; }
.footer__legal a:hover { color: var(--aqua-300); }

/* ==========================================================================
   9. Éléments flottants
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-nav) + 1);
  height: 3px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: var(--grad-brand);
  pointer-events: none;
}

/* Barre d'appel mobile */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-nav) - 1);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .625rem var(--sp-4) calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px -16px rgba(11, 17, 32, .35);
  transform: translateY(110%);
  transition: transform 400ms var(--ease-spring);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { flex: 1; padding-inline: .75rem; min-height: 50px; }

.to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: calc(var(--z-nav) - 1);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: var(--sh-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring), visibility var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { transform: translateY(-3px) scale(1.06); color: #fff; }
.to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   10. Adaptations responsives de la navigation
   ========================================================================== */
@media (max-width: 63.99rem) {
  .nav__list, .nav__actions .btn--ghost { display: none; }
  .burger { display: grid; }
}

.mobile-cta__lien {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mobile-cta__lien:hover { color: var(--brand-600); }

@media (max-width: 47.99rem) {
  /* Le numéro disparaît du bouton d'appel, mais son conteneur restait dans
     la mise en page : l'écart entre lui et l'icône décalait celle-ci de la
     moitié de l'écart, soit cinq pixels vers la gauche. */
  .nav__actions .btn--call > span { display: none; }
  .nav__actions .btn--call { gap: 0; }
  .mobile-cta { display: flex; }
  /* La barre d'appel est fixe : le bas de la page doit lui laisser sa place,
     et le bouton « revenir en haut » se poser au-dessus d'elle. */
  .to-top { bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); right: var(--sp-4); }
  body { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* Un libellé vidé par les règles ci-dessus ne doit plus occuper d'espace flex */
.btn span:empty { display: none; }

@media (max-width: 30rem) {
  .nav { gap: var(--sp-3); }
  .nav__actions .btn { padding-inline: 1rem; }
  .logo { font-size: 1.0625rem; }
  .logo__mark { width: 34px; height: 34px; border-radius: 10px; }
  .logo__mark svg { width: 19px; height: 19px; }
}

@media (max-width: 22.5rem) {
  .nav__actions .btn--call { padding-inline: .8125rem; }
}

/* La baseline « PLOMBERIE · SERRURERIE · VITRERIE » réclame 230 px. Mesure
   faite : elle n'en obtient que 175 sur un iPhone de 393 px, 208 sur un
   iPhone Plus, et ne tient sur une ligne qu'à partir de 480 px. En dessous
   elle passait sur deux lignes et débordait de la barre. */
@media (max-width: 30rem) {
  .site-header .logo__text small { display: none; }
}

/* ==========================================================================
   11. Confort tactile
   Au doigt, un lien de 20 px de haut se rate une fois sur deux. Sur mobile,
   les liens de listes et les liens d'action offrent une zone d'au moins 44 px.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .footer__list a,
  .footer__legal a,
  .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list { gap: 0; }
  .footer__legal { gap: 0 var(--sp-5); }

  .footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__contact li { align-items: center; }

  /* Liens à l'intérieur d'un paragraphe : on ne peut pas les agrandir sans
     disloquer le texte, on aère donc les lignes pour faciliter la visée. */
  .accordion__inner a,
  .checkfield a { padding-block: .35rem; }
  .accordion__inner > div { line-height: 1.8; }
}


/* ==========================================================================
   12. Corrections mobile & tactile
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 Champs de formulaire — zoom automatique d'iPhone
   Safari agrandit brutalement la page dès qu'on tape dans un champ dont le
   texte fait moins de 16 px : la mise en page part de travers et le visiteur
   doit dézoomer à la main. 16 px minimum règle définitivement le problème.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .field__control,
  select.field__control,
  textarea.field__control {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   12.2 En-tête et barre d'appel : fond opaque au lieu du flou
   Un « backdrop-filter » sur un élément fixe oblige le navigateur à refiltrer
   l'arrière-plan à chaque image pendant le défilement. C'est joli sur
   ordinateur, c'est saccadé sur téléphone.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .site-header::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
  }
  .mobile-cta {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
  .drawer__scrim {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 7, 15, .72);
  }
}

/* --------------------------------------------------------------------------
   12.3 Survol sur écran tactile
   Un doigt n'a pas de survol : après un appui, l'état « hover » reste collé
   et l'élément demeure soulevé ou décalé jusqu'au prochain appui ailleurs.
   Sur les appareils sans souris, on neutralise donc les déplacements.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .why-item:hover,
  .compare:hover,
  .contact-tile:hover,
  .review:hover,
  .gallery__btn:hover,
  .zone__list li:hover,
  .to-top:hover,
  .footer__list a:hover {
    transform: none;
  }
  .card:hover .card__icon,
  .why-item:hover .why-item__icon,
  .logo:hover .logo__mark,
  .gallery__btn:hover img,
  .compare:hover .compare__handle {
    transform: none;
  }
  .compare:hover .compare__handle { transform: translate(-50%, -50%); }
  .card:hover .card__icon { background: var(--grad-brand-soft); color: var(--brand-600); box-shadow: none; }
  .btn::after, .btn:hover::after { display: none; }
  .service-card:hover::after { transform: scaleX(0); }
  .drawer__close:hover { transform: none; }

  /* Les retours visuels sont conservés, mais sur l'appui plutôt que le survol */
  .card:active { transform: translateY(-2px); }
  .btn:active { transform: scale(.98); }
}

/* --------------------------------------------------------------------------
   12.4 En-tête plus compact sur téléphone
   76 px sur un écran de 667 px, c'est plus de 10 % de la hauteur perdue
   en permanence.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  :root {
    --nav-h: 62px;
    --nav-h-compact: 56px;
  }
}

/* --------------------------------------------------------------------------
   12.5 Débordements horizontaux
   Un mot très long (adresse e-mail, nom de ville composé) élargit la page
   et fait apparaître une barre de défilement latérale.
   -------------------------------------------------------------------------- */
.contact-tile strong,
.footer__contact a,
.prose a { overflow-wrap: anywhere; }

/* Le menu déroulant « Services » ne doit jamais sortir de l'écran */
.nav__submenu { max-width: calc(100vw - 2rem); }