/* ============================================================
   SOS BOX Angoulême — feuille de style
   Écrite intégralement sur les jetons de tokens.css (« Encre & Miel »).
   Aucune valeur de couleur, de typographie ou d'espace en dur.
   Échelle d'espace autorisée : 4 8 12 16 24 32 48 64 96 128 160.
   Mobile d'abord. Points de rupture : 768px, 1024px.
   ============================================================ */

/* ---------- 1. Polices auto-hébergées ---------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-var.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Remise à zéro et base ---------- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-4);
  font-weight: var(--graisse-texte);
  line-height: var(--interligne-texte);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.est-verrouille { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  line-height: var(--interligne-titres);
  letter-spacing: var(--approche-titres);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); line-height: var(--interligne-hero); letter-spacing: var(--approche-hero); }
h2 { font-size: var(--fs-1); }
h3 { font-size: var(--fs-2); font-weight: var(--graisse-sous-titres); }

p { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
/* display: contents — l'élément <picture> s'efface de la mise en page pour que
   l'image reste l'enfant direct de son cadre et en hérite les dimensions. */
picture { display: contents; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bleu-hover); }

/* Focus clavier — visible partout, jamais supprimé */
:focus-visible {
  outline: none;
  box-shadow: var(--anneau-focus);
  border-radius: var(--rayon-1);
}
.sur-fond-profond :focus-visible,
.sur-sombre :focus-visible {
  box-shadow: var(--anneau-focus-sombre);
}

/* ---------- 3. Utilitaires ---------- */

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

.section { padding-block: var(--respiration-section); position: relative; }
.section--serree { padding-block: var(--e-9); }

.centre { text-align: center; }
.centre .kicker, .centre .boutons { justify-content: center; }
.centre .lede { margin-inline: auto; }
.espace-haut { margin-top: var(--e-6); }

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

/* Variantes selon l'écran : un même texte, plus court sur téléphone.
   .sauf-telephone est retiré sous 768 px (bloc 28) ; .telephone-seul n'existe
   que là. Rien n'est supprimé sur ordinateur. */
.telephone-seul { display: none; }

.lien-evitement {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: calc(var(--z-loader) + 10);
  transform: translateY(-200%);
  background: var(--bleu);
  color: var(--blanc);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--rayon-pilule);
  font-weight: var(--graisse-texte-fort);
  text-decoration: none;
}
.lien-evitement:focus { transform: translateY(0); color: var(--blanc); }

/* Étiquette de section : pastille miel + capitales bleues */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--fs-6);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: var(--e-4);
}
.kicker::before {
  content: '';
  width: var(--e-2);
  height: var(--e-2);
  border-radius: 50%;
  background: var(--miel);
  flex: none;
}
.sur-fond-profond .kicker,
.sur-sombre .kicker { color: var(--blanc); }

.lede {
  font-size: var(--fs-3);
  color: var(--ardoise);
  max-width: var(--mesure);
  margin-top: var(--e-5);
}
.sur-fond-profond .lede,
.sur-sombre .lede { color: var(--texte-sur-sombre); }

.mention {
  font-size: var(--fs-6);
  color: var(--legende);
  line-height: 1.55;
}
.sur-fond-profond .mention,
.sur-sombre .mention { color: var(--texte-sur-sombre-2); }

/* Fonds.
   .sur-sombre ne fait que basculer les couleurs de texte : à poser sur un
   bloc déjà sombre (photo voilée, vidéo). .sur-fond-profond y ajoute le fond. */
.sur-brume { background: var(--fond-2); }
.sur-sombre { color: var(--blanc); }
.sur-fond-profond {
  background: var(--bleu-profond);
  color: var(--blanc);
}
.sur-fond-profond h2, .sur-fond-profond h3,
.sur-sombre h2, .sur-sombre h3 { color: var(--blanc); }

/* Une carte blanche posée sur un fond profond garde son texte en encre :
   la règle générale « titres en blanc » la rendrait illisible. */
.sur-fond-profond .carte,
.sur-fond-profond .offre,
.sur-fond-profond .avis-carte,
.sur-fond-profond .faq-item,
.sur-fond-profond .service { color: var(--encre-texte); }
.sur-fond-profond .carte h3,
.sur-fond-profond .offre h3,
.sur-fond-profond .service h3 { color: var(--encre-texte); }
.sur-fond-profond .offre p,
.sur-fond-profond .offre__points li { color: var(--ardoise); }

/* Feuilles arrondies qui se recouvrent */
.feuille {
  border-radius: var(--rayon-feuille);
  overflow: hidden;
}
.feuille--haut {
  border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0;
}


.conteneur, .section > .conteneur { position: relative; z-index: 1; }

/* ---------- 4. Primitives ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border: 1px solid transparent;
  border-radius: var(--rayon-pilule);
  font-family: var(--police-texte);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.bouton:active { transform: translateY(1px); }

.bouton--primaire { background: var(--bleu); color: var(--blanc); }
.bouton--primaire:hover { background: var(--bleu-hover); color: var(--blanc); }

.bouton--clair { background: var(--blanc); color: var(--bleu-profond); }
.bouton--clair:hover { background: var(--miel); color: var(--bleu-profond); }

.bouton--fantome {
  background: transparent;
  color: var(--encre-texte);
  border-color: var(--bordure-forte);
}
.bouton--fantome:hover { background: var(--bleu-t-08); color: var(--bleu-hover); border-color: var(--bleu); }

/* Contextes sombres : le hero et la photo pleine page le sont par nature. */
.sur-fond-profond .bouton--fantome,
.sur-sombre .bouton--fantome,
.hero .bouton--fantome,
.pleine-page .bouton--fantome {
  color: var(--blanc);
  border-color: var(--blanc-t-26);
}
.sur-fond-profond .bouton--fantome:hover,
.sur-sombre .bouton--fantome:hover {
  background: var(--blanc-t-10);
  color: var(--blanc);
  border-color: var(--blanc);
}

/* Sur une vidéo ou une photo, le fantôme a besoin d'un fond pour rester lisible */
.hero .bouton--fantome,
.pleine-page .bouton--fantome {
  background: var(--voile-encre-82);
  border-color: var(--blanc-t-26);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero .bouton--fantome:hover,
.pleine-page .bouton--fantome:hover {
  background: var(--bleu-hover);
  border-color: var(--blanc);
}

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

/* Carte */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  padding: var(--e-6);
  box-shadow: var(--ombre-carte);
  transition: box-shadow var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.carte:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

/* Pastille de donnée */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--rayon-pilule);
  background: var(--miel-t-14);
  color: var(--encre-texte);
  font-size: var(--fs-6);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
}
.sur-fond-profond .pastille {
  background: var(--miel-t-18);
  color: var(--miel);
}

/* Photo sertie : cadre + passe-partout intérieur au survol */
.photo {
  position: relative;
  border-radius: var(--rayon-3);
  overflow: hidden;
  background: var(--fond-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after {
  content: '';
  position: absolute;
  inset: var(--e-3);
  border: 1px solid var(--blanc-t-26);
  border-radius: var(--rayon-2);
  opacity: 0;
  transition: opacity var(--t-2) var(--ease), inset var(--t-2) var(--ease);
  pointer-events: none;
}
.photo:hover::after { opacity: 1; inset: var(--e-5); }

/* ---------- 5. Le sigle « rideau de box » ---------- */

.sigle {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  color: currentColor;
  overflow: visible;
}
.sigle .lame {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform var(--t-signature) var(--ease-rideau), opacity var(--t-2) var(--ease);
}
.sigle .serrure { fill: var(--miel); }

/* Ouverture au survol : les lames remontent l'une après l'autre */
a:hover > .sigle .lame,
button:hover > .sigle .lame,
a:focus-visible > .sigle .lame {
  transform: translateY(-160%) scaleY(0.2);
  opacity: 0;
}
a:hover > .sigle .lame:nth-child(1) { transition-delay: 0ms; }
a:hover > .sigle .lame:nth-child(2) { transition-delay: 40ms; }
a:hover > .sigle .lame:nth-child(3) { transition-delay: 80ms; }
a:hover > .sigle .lame:nth-child(4) { transition-delay: 120ms; }
a:hover > .sigle .lame:nth-child(5) { transition-delay: 160ms; }

.lockup {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--e-3);
  text-decoration: none;
  color: inherit;
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-2);
  letter-spacing: -0.02em;
  line-height: 1;
}
.lockup .mot-box { color: var(--miel); }
.lockup:hover { color: inherit; }

/* ---------- 6. Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--bleu-profond);
  display: grid;
  place-items: center;
  transition: opacity var(--t-signature) var(--ease), visibility var(--t-signature);
}
.loader[hidden] { display: grid; }
/* Sans JavaScript, personne ne lèverait ce rideau : il ne s'affiche pas. */
html:not(.js) .loader { display: none; }
.loader.est-parti {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-5);
  color: var(--blanc);
}
.loader .sigle { width: 88px; height: 88px; }
.loader .sigle .lame {
  animation: lameDescend var(--t-signature) var(--ease-rideau) both;
}
.loader .sigle .lame:nth-child(1) { animation-delay: 40ms; }
.loader .sigle .lame:nth-child(2) { animation-delay: 120ms; }
.loader .sigle .lame:nth-child(3) { animation-delay: 200ms; }
.loader .sigle .lame:nth-child(4) { animation-delay: 280ms; }
.loader .sigle .lame:nth-child(5) { animation-delay: 360ms; }
.loader .sigle .serrure { animation: serrurePose 400ms var(--ease) 520ms both; }
.loader__mot {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-2);
  letter-spacing: var(--approche-etiquette);
  opacity: 0;
  animation: monteDoux 500ms var(--ease) 560ms both;
}

@keyframes lameDescend {
  from { transform: translateY(-220%) scaleY(0.15); opacity: 0; }
  to   { transform: translateY(0) scaleY(1); opacity: 1; }
}
@keyframes serrurePose {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes monteDoux {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- 7. Barre de navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--gouttiere);
  color: var(--blanc);
  transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease),
              color var(--t-2) var(--ease), padding var(--t-2) var(--ease);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--voile-encre-82), transparent);
  opacity: 1;
  transition: opacity var(--t-2) var(--ease);
  pointer-events: none;
}
.nav.est-solide {
  background: rgba(27, 42, 85, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  color: var(--blanc);
  box-shadow: 0 1px 0 var(--voile-encre-30);
}
.nav.est-solide::before { opacity: 0; }
/* Le lockup ne change plus au défilement : la barre reste sombre, donc SOS en
   blanc et BOX en miel du haut en bas de la page. Le jaune n'est jamais perdu. */

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  position: relative;
}
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--rayon-pilule);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-1) var(--ease);
}
.nav__tel:hover { background: var(--blanc-t-10); color: inherit; }
/* Sous 768 px, seule l'icône reste : la barre doit rester fine. */
.nav__tel .libelle { display: none; }
.nav__tel {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid currentColor;
}
.nav.est-solide .nav__tel:hover { background: var(--blanc-t-10); }

.nav__menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-5);
  border: 1px solid currentColor;
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: inherit;
  font-family: var(--police-texte);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.nav__menu:hover { background: var(--miel); color: var(--bleu-profond); border-color: var(--miel); }

/* Pastille « Devis » : tout le site conduit au devis, la barre aussi.
   Blanche, comme l'action claire des fonds profonds ; à partir de 768 px
   seulement — sur téléphone, la barre basse tient ce rôle. */
.nav__devis {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-5);
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  color: var(--bleu-profond);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--t-1) var(--ease);
}
.nav__devis:hover { background: var(--miel); color: var(--bleu-profond); }

.nav .lockup { position: relative; z-index: 1; }
.nav__actions { z-index: 1; }

/* ---------- 8. Menu plein écran ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bleu-profond);
  color: var(--blanc);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), visibility var(--t-2);
  overflow-y: auto;
}
.menu.est-ouvert { opacity: 1; visibility: visible; transform: none; }

.menu__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-3) var(--gouttiere);
}
.menu__fermer {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-5);
  border: 1px solid var(--blanc-t-26);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--blanc);
  font-family: var(--police-texte);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  cursor: pointer;
  transition: background var(--t-1) var(--ease);
}
.menu__fermer:hover { background: var(--blanc-t-10); }
.menu__fermer svg { width: 14px; height: 14px; }

.menu__corps {
  display: grid;
  gap: var(--e-8);
  align-content: center;
  padding: var(--e-8) var(--gouttiere);
}
.menu__liens { display: grid; gap: var(--e-2); }
.menu__liens a {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--approche-titres);
  color: var(--blanc);
  text-decoration: none;
  padding-block: var(--e-2);
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-4);
  transition: color var(--t-1) var(--ease);
  width: fit-content;
}
.menu__liens a:hover { color: var(--miel); }
.menu__liens .num {
  font-size: var(--fs-6);
  font-weight: var(--graisse-texte-fort);
  color: var(--miel);
  letter-spacing: var(--approche-etiquette);
}

.menu__contact { display: grid; gap: var(--e-4); align-content: start; }
/* Étiquettes du menu : blanc à 72 % sur le bleu profond (7,4:1). Le bleu
   d'action des kickers n'y donnait que 1,56:1. En bloc, pour que le numéro
   passe SOUS son étiquette au lieu de s'y coller. */
.menu .kicker {
  display: flex;
  color: var(--texte-sur-sombre-2);
  margin-bottom: var(--e-1);
}
.menu__contact p:not(.kicker) { color: var(--texte-sur-sombre); }
.menu__contact .tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--police-titres);
  font-weight: var(--graisse-sous-titres);
  font-size: var(--fs-2);
  color: var(--blanc);
  text-decoration: none;
}
.menu__contact .tel:hover { color: var(--miel); }

.menu__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  padding: var(--e-5) var(--gouttiere) var(--e-7);
  border-top: 1px solid var(--blanc-t-10);
}
.menu__pied a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte-sur-sombre-2);
  font-size: var(--fs-6);
}
.menu__pied a:hover { color: var(--miel); }

/* ---------- 9. Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--bleu-profond);
  color: var(--blanc);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* L'affiche (image) et la vidéo occupent le même cadre : la vidéo, sans
   attribut poster, reste transparente tant qu'elle n'a rien à montrer. */
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La vidéo ne se montre qu'une fois en lecture (classe posée par main.js) :
   d'ici là, et si la lecture automatique est refusée, l'affiche reste seule.
   Sans JavaScript, le navigateur peindrait un cadre noir : la vidéo est retirée. */
.js .hero__media video,
.js .etape__video video {
  opacity: 0;
  transition: opacity var(--t-2) linear;
}
.js .hero__media video.est-prete,
.js .etape__video video.est-prete { opacity: 1; }
html:not(.js) .hero__media video,
html:not(.js) .etape__video video { display: none; }

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    var(--voile-hero);
}
.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--e-8) var(--e-5);
}
.hero h1 { max-width: 16ch; }
.hero__lede {
  font-size: var(--fs-3);
  color: var(--texte-sur-sombre);
  max-width: 46ch;
  margin-top: var(--e-5);
}
.hero__promesse {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  border-radius: var(--rayon-3);
  background: var(--blanc-t-10);
  border: 1px solid var(--blanc-t-26);
  font-size: var(--fs-5);
  color: var(--blanc);
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--t-1) var(--ease);
}
.hero__promesse:hover { background: var(--blanc-t-26); color: var(--blanc); }
.hero__promesse b {
  display: inline-flex;
  align-items: center;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--rayon-pilule);
  background: var(--miel);
  color: var(--bleu-profond);
  font-size: var(--fs-6);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
}

.hero__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-6);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--blanc-t-26);
}
.hero__defile {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--e-3);
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--texte-sur-sombre-2);
  text-decoration: none;
}
.hero__defile .fleche {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--blanc-t-26);
  border-radius: 50%;
  animation: descendDoux 2.4s var(--ease) infinite;
}
@keyframes descendDoux {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.hero__son {
  position: absolute;
  right: var(--gouttiere);
  bottom: var(--e-8);
  z-index: 3;
}

/* ---------- 10. Bande de preuves ---------- */

/* La bande de preuves chevauche le bas du hero : posée sur une surface, elle
   cesse de flotter dans l'ivoire et fait la couture entre l'accroche et le
   contenu. */
.preuves {
  background: transparent;
  padding-block: 0 var(--e-8);
  position: relative;
  z-index: 3;
  margin-top: calc(var(--e-8) * -1);
}
.preuves__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-5) var(--e-4);
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-levee);
}
.preuve { display: grid; gap: var(--e-1); }
/* Chiffres de 28 px (téléphone) à 44 px (ordinateur) : une bande de preuves
   se lit de loin. Libellés en bas de casse, sur une seule ligne. */
.preuve dt {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--approche-titres);
  color: var(--encre-texte);
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  white-space: nowrap;
}
.preuve dd {
  margin: 0;
  font-size: clamp(0.81rem, 1.05vw, 0.94rem);
  color: var(--legende);
  white-space: nowrap;
}
.preuve .etoile { color: var(--miel); font-size: 0.6em; }

/* ---------- 11. Scène 3D pilotée au défilement ---------- */

.scene {
  position: relative;
  background: var(--fond);
}
.scene__grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
}
.scene__objet {
  position: sticky;
  top: var(--hauteur-nav-compacte);
  height: 52svh;
  display: grid;
  place-items: center;
  padding-block: var(--e-4);
  z-index: 1;
}
.scene__objet .vitrine { width: min(100%, 64svh); height: auto; aspect-ratio: 1; }
/* Le cadenas : l'image fixe d'abord, puis le modèle en volume, à la même place.
   La figure a une hauteur explicite — celle du cadre collant (52svh) moins ses
   marges ; un pourcentage ne se résout pas dans une rangée de grille
   automatique — et garde le rapport du rendu (740 × 1045). L'ombre de contact
   de l'image est dessinée ici, le rendu étant détouré sans la sienne. */
.scene__cadenas {
  position: relative;
  margin: 0;
  height: calc(42svh - var(--e-6));
  max-width: 100%;
  aspect-ratio: 740 / 1045;
}
.scene__cadenas img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scene__cadenas::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: 0;
  height: 7%;
  border-radius: 50%;
  background: var(--ombre-contact);
}
/* Le modèle en volume (cadenas3d.js). Sa toile déborde de la figure pour
   laisser de l'air à l'ombre de contact et à la rotation, sans rien déplacer :
   le script la dimensionne et la centre sur l'axe du cadenas tel qu'il tombe
   dans l'image, et la caméra reprend le cadrage du rendu. Elle ne capte ni le
   doigt ni la souris : le défilement n'est jamais retenu.
   Fondu en deux temps — la toile apparaît sur l'image, puis l'image s'efface
   dessous : à aucun moment l'objet ne devient translucide. */
.scene__cadenas canvas {
  position: absolute;
  z-index: 2;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-2) linear;
}
.scene__cadenas img,
.scene__cadenas::after { transition: opacity var(--t-2) linear; }
.scene__cadenas.est-en-3d canvas { opacity: 1; }
.scene__cadenas.est-en-3d img,
.scene__cadenas.est-en-3d::after {
  opacity: 0;
  transition-delay: var(--t-2);
}
/* Sous 1024 px, l'objet est collant au-dessus du récit : il lui faut le fond
   de la section, sinon le texte défile visiblement derrière la vitrine. */
.scene__objet {
  background: var(--fond);
  box-shadow: 0 var(--e-5) var(--e-5) calc(var(--e-3) * -1) var(--fond);
}
.scene__recit {
  display: grid;
  gap: var(--e-8);
  padding-block: var(--e-7) var(--e-8);
}
.scene__etape { max-width: 46ch; }
.scene__etape h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  margin-bottom: var(--e-4);
}
.scene__etape p {
  color: var(--ardoise);
  font-size: var(--fs-3);
}
.scene__num {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  color: var(--bleu);
  margin-bottom: var(--e-3);
}
.scene__intro { padding-top: var(--e-9); }
.scene__intro .lede { font-size: clamp(1.15rem, 1.7vw, 1.32rem); }
.scene__fin { padding-bottom: var(--respiration-section); }

/* ---------- Vitrines d'objets ----------
   Les rendus validés sont livrés avec leur fond crème peint. Plutôt que de les
   détourer — ce qui abîmerait l'ombre de contact et les arêtes chromées — la
   vitrine adopte ce fond : la limite entre l'image et le cadre disparaît.
   La rotation vient de l'enchaînement des angles, pas d'un moteur 3D. */

.vitrine {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 100%;
  margin-inline: auto;
  border-radius: var(--rayon-3);
  overflow: hidden;
  /* Fond transparent : l'objet est détouré et flotte sur la section.
     Aucun rectangle ne vient trahir la vitrine. */
  background: transparent;
}
.vitrine--pivotable { cursor: ew-resize; touch-action: pan-y; }


.vitrine__vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, jamais cover : le cadre n'est pas toujours carré et un rognage
     couperait l'objet. Les bandes laissées ont la couleur du fond des rendus,
     elles sont donc invisibles. */
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--t-2) linear;
}
.vitrine__vue.est-active { opacity: 1; }

/* L'objet lui-même grandit ou rétrécit : utilisé par le sélecteur de tailles. */
.vitrine__echelle {
  position: absolute;
  inset: 0;
  transform-origin: 50% 58%;
  transition: transform 520ms var(--ease);
}

.vitrine__aide {
  position: absolute;
  left: 50%;
  bottom: var(--e-4);
  transform: translateX(-50%);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--rayon-pilule);
  background: var(--blanc-t-70);
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--legende);
  pointer-events: none;
  transition: opacity var(--t-2) var(--ease);
}
.vitrine.est-manipulee .vitrine__aide { opacity: 0; }

/* ---------- 12. Garantie d'alignement ---------- */

.garantie { text-align: center; position: relative; overflow: hidden; }
.garantie__media { position: absolute; inset: 0; z-index: 0; }
.garantie__media img { width: 100%; height: 100%; object-fit: cover; }
.garantie__voile { position: absolute; inset: 0; z-index: 1; background: var(--voile-halo); }
.garantie > .conteneur { position: relative; z-index: 2; }
.garantie__bloc { max-width: 24ch; margin-inline: auto; }
.garantie h2 {
  font-size: clamp(2.25rem, 6.4vw, 4.25rem);
  line-height: 1.05;
}
.garantie h2 .miel { color: var(--miel); }
.garantie .lede { margin-inline: auto; }
.garantie .boutons { justify-content: center; }
.garantie__conditions {
  margin-top: var(--e-6);
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- Replis ----------
   Bouton et contenu repliable : le bouton n'existe que sur téléphone et avec
   JavaScript (bloc 28). Partout ailleurs, le contenu est simplement visible. */
.repli__bouton { display: none; }

/* ---------- 13. Offres ---------- */

.offres__tete {
  display: grid;
  gap: var(--e-5);
  margin-bottom: var(--e-8);
}
.offres__liste { display: grid; gap: var(--e-5); }

.offre {
  display: grid;
  gap: var(--e-5);
  /* Contenu calé en haut : sans cela, la grille répartit la hauteur libre
     entre l'image et le texte, et les titres d'une même rangée se décalent. */
  align-content: start;
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  transition: border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease),
              transform var(--t-2) var(--ease);
}
.offre:hover {
  border-color: var(--bleu);
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
}
.offre__index {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  color: var(--bleu);
}
.offre h3 { margin-bottom: var(--e-3); }
.offre p { color: var(--ardoise); }
.offre__points {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}
.offre__points li {
  display: flex;
  gap: var(--e-3);
  font-size: var(--fs-5);
  color: var(--ardoise);
}
.offre__points li::before {
  content: '';
  width: var(--e-2);
  height: var(--e-2);
  margin-top: 0.55em;   /* alignement optique de la pastille sur la première ligne */
  border-radius: 50%;
  background: var(--miel);
  flex: none;
}
/* Même rapport pour les trois images, quelle que soit la photo : l'image est
   sortie du flux, elle ne peut plus étirer son cadre. */
.offre__media {
  position: relative;
  border-radius: var(--rayon-2);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--fond-2);
}
.offre__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Le box en volume, en CSS pur ----------
   SANS EMPLOI depuis le 13/10/2026 : le sélecteur de tailles montre les box
   meublés (section 14) et box3d.js n'est plus chargé. Règles conservées avec
   ce fichier, pour pouvoir y revenir.
   Six plans dans une perspective réelle. Les nervures et les lames du rideau
   sont des dégradés répétés : aucune image, donc aucune limite de définition.
   La façade n'est qu'un encadrement, rideau relevé : on voit l'intérieur. */

.box3d {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1600px;
  perspective-origin: 50% 46%;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.box3d__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  /* box3d.js complète cette transformation par l'échelle bornée (24 px d'air). */
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease);
}
.box3d__volume {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}
.box3d.est-manipule .box3d__volume { transition: none; }

.box3d__face {
  position: absolute;
  background: var(--blanc);
  /* Nervures verticales, comme le bardage du centre */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(26, 37, 64, 0.13) 0 1.5px,
    rgba(255, 255, 255, 0.95) 1.5px 10px,
    rgba(26, 37, 64, 0.05) 10px 12px,
    rgba(255, 255, 255, 0.66) 12px 20px);
  outline: 1px solid rgba(26, 37, 64, 0.12);
  outline-offset: -1px;
}

/* Éclairage simulé : plus clair au plafond, plus dense sur les flancs. */
.box3d__face--fond    { filter: brightness(0.88); }
.box3d__face--gauche  { filter: brightness(0.94); }
.box3d__face--droite  { filter: brightness(0.78); }
.box3d__face--plafond { filter: brightness(1.05); }
.box3d__face--sol {
  filter: brightness(0.7);
  background-image: none;
  background: var(--fond-2);
}

/* Façade : un encadrement miel, et le rideau remonté sous le linteau. */
.box3d__face--facade {
  background: none;
  outline: none;
  box-shadow: inset 0 0 0 5px var(--miel);
}
.box3d__rideau {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 24%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0 1.5px,
      rgba(0, 0, 0, 0.22) 1.5px 3px,
      transparent 3px 9px),
    linear-gradient(100deg, var(--bleu-profond) 0%, var(--bleu) 48%, var(--bleu-profond) 100%);
  box-shadow: 0 3px 6px rgba(26, 37, 64, 0.35);
}
.box3d__poignee {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 20%;
  height: 8%;
  min-height: 3px;
  transform: translateX(-50%);
  border-radius: var(--rayon-pilule);
  background: var(--fond-2);
}

/* Ombre de contact, couchée sur le plancher. La mascotte se tient au milieu de
   la profondeur du box et le plancher se prolonge devant elle : sans cette
   ombre, l'œil la croit en suspension. */
.box3d__ombre {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(26, 37, 64, 0.32) 0%,
    rgba(26, 37, 64, 0.15) 52%,
    transparent 78%);
  pointer-events: none;
}

/* Silhouette de référence, dressée dans le box */
.box3d__silhouette {
  position: absolute;
  width: auto;
  pointer-events: none;
}

/* Invitation à faire tourner : deux chevrons sous le volume. */
.box3d__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
}
.box3d__fleche {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--bleu);
  cursor: pointer;
  transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.box3d__fleche:hover { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.box3d__fleche svg { width: 22px; height: 22px; }
.box3d__miroir { display: grid; place-items: center; transform: scaleX(-1); }

/* La mascotte garde ses proportions quelle que soit la taille du box. */
.box3d__silhouette img { width: auto; height: 100%; display: block; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .box3d__volume, .box3d__scene { transition: none; }
}

/* ---------- 14. Tailles + box meublés ---------- */

.tailles__grille { display: grid; gap: var(--e-8); }

.tailles__scene {
  position: relative;
  align-self: center;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-carte);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
/* Le cadre a le rapport des rendus (1600 × 1200) : aucune bande de
   remplissage, et la mascotte s'y pose en pourcentages de l'image. Sa hauteur
   découle de sa largeur : rien ne saute au chargement. */
.tailles__vue {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-2);
  background: var(--fond);
  overflow: hidden;
}
/* Un rendu par surface, superposés : fondu de l'un à l'autre (main.js). */
.tailles__box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.tailles__box.est-visible { opacity: 1; }
/* La mascotte, 1,75 m à l'échelle du rendu : main.js règle sa place et sa
   hauteur pour chaque surface. Valeurs de départ : celles du 5 m², la surface
   affichée à l'ouverture — pieds à 378 × 952,6 px, hauteur 357,4 px. */
.tailles__mascotte {
  position: absolute;
  left: 23.625%;
  top: 49.6%;
  height: 29.783%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(26, 37, 64, 0.18));
  transition: left 520ms var(--ease), top 520ms var(--ease), height 520ms var(--ease);
}
/* La vue 3D temps réel (box3d-temps-reel.js, 14/10/2026) : une couche posée
   sur les images fixes, qui restent le repli. Le module y place son image
   d'attente, sa toile et son indicateur ; quand son image apparaît, main.js
   pose « est-en-3d » sur le cadre et les images fixes s'effacent.
   touch-action: pan-y (posé aussi par le module) : le doigt qui glisse
   verticalement fait défiler la page, seul le glissé horizontal tourne.
   Sélecteur à deux classes : la feuille que le module injecte après celle-ci
   pose « .box3d-tr { position: relative } », qui l'emporterait sinon. */
.tailles__vue > .tailles__box3d {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}
.tailles__vue.est-en-3d > .tailles__box,
.tailles__vue.est-en-3d > .tailles__mascotte {
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
}
/* Le cadre rogne son contenu : l'anneau de focus de la vue 3D est donc porté
   par le cadre lui-même. */
.tailles__box3d:focus-visible { box-shadow: none; }
.tailles__vue:has(> .tailles__box3d:focus-visible) { box-shadow: var(--anneau-focus); }
/* Deux boutons de rotation, par pas de 45° ; affichés seulement quand la vue
   3D est possible (main.js retire « hidden »). */
.tailles__rotation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
}
.tailles__rotation[hidden] { display: none; }
.tailles__tourner {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--bleu);
  cursor: pointer;
  transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease),
              color var(--t-1) var(--ease), opacity var(--t-1) var(--ease);
}
.tailles__tourner:hover:not([aria-disabled="true"]) {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}
.tailles__tourner:focus-visible { border-radius: 50%; }
.tailles__tourner svg { width: 22px; height: 22px; }
.tailles__tourner[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.tailles__indice {
  min-width: 9em;
  font-size: var(--fs-6);
  color: var(--legende);
  text-align: center;
}
.tailles__legende {
  display: grid;
  gap: var(--e-1);
  text-align: center;
  padding-bottom: var(--e-2);
}
.tailles__valeur {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-3);
  line-height: 1;
}
.tailles__valeur .unite { font-size: var(--fs-6); color: var(--ardoise); }
.tailles__equiv { font-size: var(--fs-6); color: var(--legende); }
/* Ce que le rendu montre : la mention « Exemple de rangement », puis une
   phrase. Deux lignes lui sont réservées à toutes les largeurs — les plus
   longues y passent : d'une surface à l'autre, ni le panneau ni les puces ne
   bougent sous le doigt. */
.tailles__exemple { padding-top: var(--e-1); }
.tailles__contenu {
  max-width: 52ch;
  min-height: 3em;
  margin-inline: auto;
  font-size: var(--fs-5);
  line-height: 1.5;
  color: var(--ardoise);
  text-wrap: balance;
}

.tailles__choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.taille-puce {
  min-width: 56px;
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  cursor: pointer;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease);
}
.taille-puce:hover { border-color: var(--bleu); color: var(--bleu); }
.taille-puce[aria-pressed="true"] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.tailles__extras {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--bordure);
}

/* ---------- 15. Photo pleine page ---------- */

.pleine-page {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--bleu-profond);
  color: var(--blanc);
}
.pleine-page__media { position: absolute; inset: 0; }
.pleine-page__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.pleine-page__voile {
  position: absolute; inset: 0;
  background: var(--voile-photo);
}
.pleine-page__contenu {
  position: relative;
  z-index: 1;
  padding-block: var(--e-7);
}
.pleine-page h2 { max-width: 22ch; }
.pleine-page__contenu .lede { max-width: 46ch; }

/* ---------- 16. Services ---------- */

.services__grille {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-8);
}
.service {
  display: grid;
  gap: var(--e-3);
  align-content: start;   /* pictogramme, titre, texte : calés en haut, alignés d'une carte à l'autre */
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.service__objet {
  width: 88px;
  height: 88px;
  object-fit: contain;
  object-position: left bottom;   /* boîte fixe, objets posés sur la même ligne */
}
.service h3 { font-size: var(--fs-3); }
.service p { font-size: var(--fs-5); color: var(--ardoise); }

.infos-pratiques {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-8);
  padding: var(--e-7);
  background: var(--fond-2);
  border-radius: var(--rayon-3);
}
.info-bloc dt {
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: var(--graisse-texte-fort);
  margin-bottom: var(--e-2);
}
.info-bloc dd { margin: 0; color: var(--ardoise); font-size: var(--fs-5); }
.info-bloc dd strong { color: var(--encre-texte); }

/* ---------- 17. Étapes avec vidéos ---------- */

.etapes__liste {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-8);
  counter-reset: etape;
}
.etape {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  background: var(--blanc);
}
.etape__video {
  position: relative;
  border-radius: var(--rayon-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bleu-profond);
}
.etape__video video,
.etape__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo verticale dans un cadre horizontal : on garde le haut du sujet. */
.etape__video .etape__photo--haut { object-position: center 34%; }
.etape__texte h3 { margin-bottom: var(--e-3); }
.etape__texte p { color: var(--ardoise); }
.etape__num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--miel);
  color: var(--bleu-profond);
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--fs-5);
  margin-bottom: var(--e-4);
}

/* ---------- 18. Avis ---------- */

.avis__tete {
  display: grid;
  gap: var(--e-5);
  align-items: end;
  margin-bottom: var(--e-8);
}
.avis__note {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}
.avis__chiffre {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: clamp(3rem, 9vw, 4.5rem);
  line-height: 1;
}
.avis__etoiles { color: var(--miel); font-size: var(--fs-2); letter-spacing: 2px; }
.avis__grille { display: grid; gap: var(--e-5); }
.avis-carte {
  display: grid;
  gap: var(--e-4);
  align-content: start;
  /* <figure> porte 40 px de marge par défaut : les cartes sortaient de la grille. */
  margin: 0;
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
}
.avis-carte blockquote { margin: 0; color: var(--encre-texte); font-size: var(--fs-3); }
.avis-carte figcaption { font-size: var(--fs-5); color: var(--legende); }
.avis-carte .etoiles { color: var(--miel); letter-spacing: 2px; }

/* ---------- 19. FAQ ---------- */

.faq__liste { display: grid; gap: var(--e-3); margin-top: var(--e-8); }
.faq-item {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-2);
  background: var(--blanc);
  overflow: hidden;
  transition: border-color var(--t-2) var(--ease);
}
.faq-item:hover { border-color: var(--bordure-forte); }
.faq-item__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 56px;
  padding: var(--e-4) var(--e-5);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--police-texte);
  font-size: var(--fs-4);
  font-weight: var(--graisse-texte-fort);
  color: var(--encre-texte);
  cursor: pointer;
}
.faq-item__signe {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.faq-item__signe::before,
.faq-item__signe::after {
  content: '';
  position: absolute;
  background: var(--bleu);
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
}
.faq-item__signe::before { inset: 7px 0; height: 2px; }
.faq-item__signe::after { inset: 0 7px; width: 2px; }
.faq-item__bouton[aria-expanded="true"] .faq-item__signe::after { transform: scaleY(0); opacity: 0; }
.faq-item__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-2) var(--ease);
}
.faq-item__reponse[data-ouvert="true"] { grid-template-rows: 1fr; }
.faq-item__reponse > div { overflow: hidden; }
.faq-item__reponse p {
  padding: 0 var(--e-5) var(--e-5);
  color: var(--ardoise);
  max-width: var(--mesure);
}
.faq__suite { margin-top: var(--e-4); }

/* ---------- 20. Finale ---------- */

.finale { position: relative; overflow: hidden; }
.finale__grille { display: grid; gap: var(--e-8); align-items: center; }
.finale h2 { font-size: clamp(2.25rem, 6vw, 3.75rem); max-width: 14ch; }
.finale__photo {
  margin: 0;
  border-radius: var(--rayon-3);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bleu-hover);
}
.finale__photo img { width: 100%; height: 100%; object-fit: cover; }
.finale__coords {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--blanc-t-26);
}
.finale__coords dt {
  font-size: var(--fs-6);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--miel);
  margin-bottom: var(--e-2);
}
.finale__coords dd { margin: 0; color: var(--texte-sur-sombre); font-size: var(--fs-5); }
.finale__coords a { color: var(--blanc); }

/* ---------- 21. Pied de page ---------- */

/* Pied de page en bleu profond, comme le prescrit la direction artistique :
   c'est la seule façon de garder le miel du lockup, illisible sur fond clair. */
.pied {
  background: var(--bleu-profond);
  color: var(--blanc);
  border-top: 1px solid var(--blanc-t-10);
  padding-block: var(--e-8) var(--e-6);
  font-size: var(--fs-5);
}
.pied__haut {
  display: grid;
  gap: var(--e-7);
  padding-bottom: var(--e-7);
  border-bottom: 1px solid var(--blanc-t-10);
}
/* align-content: start — la colonne est aussi haute que ses voisines ; sans
   cela ses lignes s'écartent et les interlignes deviennent irréguliers. */
.pied__marque { display: grid; gap: var(--e-4); align-content: start; }
/* Liens autonomes : le téléphone du pied de page et le renvoi vers les avis
   doivent atteindre les 44 px, contrairement aux liens noyés dans une phrase. */
.pied__marque > p > a,
.avis .mention > a { display: inline-flex; align-items: center; min-height: 44px; }

.pied__marque .lockup { color: var(--blanc); }
.pied__marque .lockup .mot-box { color: var(--miel); }
.pied a { color: var(--texte-sur-sombre); }
.pied a:hover { color: var(--miel); }
.pied .mention { color: var(--texte-sur-sombre-2); }

.pied h4 {
  font-family: var(--police-texte);
  font-size: var(--fs-6);
  font-weight: var(--graisse-texte-fort);
  letter-spacing: var(--approche-etiquette);
  text-transform: uppercase;
  color: var(--miel);
  margin-bottom: var(--e-4);
}
.pied__colonne ul { display: grid; gap: var(--e-1); }
.pied__colonne a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte-sur-sombre);
  text-decoration: none;
}
.pied__colonne a:hover { color: var(--miel); text-decoration: underline; }
.pied__horaires { margin-top: var(--e-3); max-width: 32ch; }
.pied__bas a { display: inline-flex; align-items: center; min-height: 44px; }
/* Liens autonomes : ils doivent atteindre 44 px comme les autres commandes.
   Les liens au fil d'une phrase, eux, gardent le flux du texte. */
.pied__marque a,
.avis .mention a { display: inline-flex; align-items: center; min-height: 44px; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  justify-content: space-between;
  padding-top: var(--e-5);
  color: var(--texte-sur-sombre-2);
  font-size: var(--fs-6);
}
.pied__sobriete {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.pied__sobriete::before {
  content: '';
  width: var(--e-2); height: var(--e-2);
  border-radius: 50%;
  background: var(--miel);
}

/* ---------- 22. Formulaire de devis ---------- */

.page-devis { padding-top: 0; }

.devis__entete {
  background: var(--bleu-profond);
  color: var(--blanc);
  padding-block: calc(var(--hauteur-nav) + var(--e-7)) var(--e-9);
  position: relative;
  overflow: hidden;
}
.devis__entete h1 { max-width: 18ch; }

.devis__corps {
  display: grid;
  gap: var(--e-8);
  padding-block: var(--respiration-section);
}

.formulaire {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-carte);
  transition: box-shadow var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.formulaire:focus-within { border-color: var(--bleu); box-shadow: var(--ombre-levee); }
.formulaire[hidden] { display: none; }

.champs-duo { display: grid; gap: var(--e-5); }

/* align-content: start — sans quoi, dans un duo, le champ sans texte d'aide
   voit sa rangée s'étirer et son contrôle décrocher de celui d'à côté. */
.champ { display: grid; gap: var(--e-2); align-content: start; }
.champ[hidden] { display: none; }
.champ label {
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  color: var(--encre-texte);
}
.champ .aide { font-size: var(--fs-6); color: var(--legende); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-1);
  background: var(--blanc);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-4); /* 16px : évite le zoom automatique sur iOS */
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.champ textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
/* Listes déroulantes : le chevron du site, à distance du bord, au lieu de la
   flèche système collée au cadre. */
.champ select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--e-7);
  background-image: var(--chevron-champ);
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  background-size: var(--e-4);
}
/* Le sélecteur de fichier garde la police du navigateur si on ne la force pas.
   Sous 16 px, Safari sur iPhone zoome automatiquement à la saisie. */
.champ input[type="file"] {
  font-size: var(--fs-4);
  padding: var(--e-3);
  line-height: 1.4;
}
.champ input[type="file"]::file-selector-button {
  margin-right: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-pilule);
  background: var(--fond);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-5);
  font-weight: var(--graisse-texte-fort);
  cursor: pointer;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bleu); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-t-16);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--erreur); }
.champ .erreur {
  font-size: var(--fs-6);
  color: var(--erreur);
  font-weight: var(--graisse-texte-fort);
}

.champ-case {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-2);
  background: var(--fond);
}
.champ-case input[type="checkbox"] {
  width: 24px; height: 24px;
  min-height: 0;
  margin-top: 0.15em;   /* alignement optique de la case sur le texte */
  accent-color: var(--bleu);
  flex: none;
}
.champ-case label { font-weight: var(--graisse-texte); font-size: var(--fs-5); }
.champ-case label b { font-weight: var(--graisse-texte-fort); }

.bloc-concurrent {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-5);
  border: 1px solid var(--miel);
  border-radius: var(--rayon-2);
  background: var(--miel-t-14);
}
.bloc-concurrent[hidden] { display: none; }

.formulaire__envoi {
  display: grid;
  gap: var(--e-4);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}

.confirmation {
  display: grid;
  gap: var(--e-5);
  place-items: center;
  text-align: center;
  padding: var(--e-9) var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-3);
}
.confirmation .sigle { width: 72px; height: 72px; color: var(--bleu); }
.confirmation[hidden] { display: none; }
.confirmation__message { display: grid; gap: var(--e-4); justify-items: center; }
.confirmation__message .lede { margin-top: 0; }
/* Envoi par messagerie : le message préparé reste lisible et copiable. */
.confirmation__secours {
  display: grid;
  gap: var(--e-4);
  width: 100%;
  max-width: var(--mesure);
  text-align: left;
}
.confirmation__secours[hidden] { display: none; }
.confirmation__secours textarea { min-height: 220px; background: var(--fond); font-size: var(--fs-5); }
.confirmation__secours .boutons { margin-top: 0; justify-content: center; }
.confirmation__secours .mention { text-align: center; min-height: 1.55em; }

/* À la confirmation, le rideau se ferme et la serrure se pose. */
.confirmation .sigle .lame { animation: lameDescend var(--t-signature) var(--ease-rideau) both; }
.confirmation .sigle .lame:nth-child(1) { animation-delay: 0ms; }
.confirmation .sigle .lame:nth-child(2) { animation-delay: 80ms; }
.confirmation .sigle .lame:nth-child(3) { animation-delay: 160ms; }
.confirmation .sigle .lame:nth-child(4) { animation-delay: 240ms; }
.confirmation .sigle .lame:nth-child(5) { animation-delay: 320ms; }
.confirmation .sigle .serrure { animation: serrurePose 400ms var(--ease) 640ms both; }

.aside-devis { display: grid; gap: var(--e-6); align-content: start; }
.aside-devis .carte { padding: var(--e-6); }
.aside-devis .carte:hover { transform: none; box-shadow: var(--ombre-carte); }
.aside-devis h3 { font-size: var(--fs-3); margin-bottom: var(--e-3); }
.aside-devis p { color: var(--ardoise); font-size: var(--fs-5); }
.aside-devis .carte a,
.aside-devis > .mention a { display: inline-flex; align-items: center; min-height: 44px; }
.aside-devis .nature-morte {
  border-radius: var(--rayon-3);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.aside-devis .nature-morte img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 23. Pages de texte (mentions, confidentialité, 404) ---------- */

.page-texte { padding-top: var(--hauteur-nav); }
.page-texte__corps {
  max-width: 72ch;
  padding-block: var(--respiration-section);
  display: grid;
  gap: var(--e-6);
}
.page-texte__corps h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: var(--interligne-titres); letter-spacing: var(--approche-titres); }
.page-texte__corps h2 { font-size: var(--fs-2); margin-top: var(--e-6); }
.page-texte__corps h3 { font-size: var(--fs-2); }
.page-texte__corps p { color: var(--ardoise); max-width: var(--mesure); }
.page-texte__corps ul { display: grid; gap: var(--e-2); padding-left: var(--e-5); list-style: disc; }
.page-texte__corps li { color: var(--ardoise); }

.page-404 {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bleu-profond);
  color: var(--blanc);
  padding: var(--e-8) var(--gouttiere);
}
.page-404 .sigle { width: 96px; height: 96px; margin-inline: auto; margin-bottom: var(--e-6); }

/* ---------- 24. Révélations au défilement ---------- */

/* L'état masqué n'existe que sous la classe « js », posée dans l'en-tête des
   pages : si le script ne s'exécute pas, tout le contenu reste visible.
   Durée : --t-apparition, ramenée à 250 ms sur téléphone (bloc 28). */
.js .reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-apparition) var(--ease), transform var(--t-apparition) var(--ease);
}
.js .reveal.est-visible > * { opacity: 1; transform: none; }
.js .reveal.est-visible > *:nth-child(2) { transition-delay: 90ms; }
.js .reveal.est-visible > *:nth-child(3) { transition-delay: 180ms; }
.js .reveal.est-visible > *:nth-child(n+4) { transition-delay: 240ms; }

.js .reveal-simple {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-apparition) var(--ease), transform var(--t-apparition) var(--ease);
}
.js .reveal-simple.est-visible { opacity: 1; transform: none; }

/* ---------- 24 bis. Barre basse du téléphone ---------- */

/* Masquée partout ; le bloc 28 l'affiche sous 768 px, avec JavaScript. */
.barre-basse { display: none; }

/* ============================================================
   25. Tablette — à partir de 768 px
   ============================================================ */

@media (min-width: 768px) {
  .nav { padding: var(--e-4) var(--gouttiere); }
  .nav__tel { border-color: transparent; min-width: 0; }
  .nav__tel .libelle { display: inline; }
  .nav__devis { display: inline-flex; }

  .preuves__grille { padding: var(--e-6) var(--e-7); gap: var(--e-6); }

  .offres__liste { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); }
  .offre--vedette { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }

  .services__grille { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); }
  .infos-pratiques { grid-template-columns: repeat(3, 1fr); }

  .etape { grid-template-columns: 5fr 7fr; gap: var(--e-6); padding: var(--e-6); }
  /* Une ligne sur deux inverse l'ordre — les colonnes s'inversent avec elle,
     sans quoi la vidéo hériterait de la piste large et changerait de taille. */
  .etape:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .etape:nth-child(even) .etape__video { order: 2; }

  .avis__grille { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
  .avis__tete { grid-template-columns: 1fr auto; }

  .champs-duo { grid-template-columns: 1fr 1fr; gap: var(--e-5); }
  .formulaire { padding: var(--e-7); }

  .menu__corps { grid-template-columns: 3fr 2fr; gap: var(--e-9); }

  .pied__haut { grid-template-columns: 2fr 1fr 1fr 1fr; }

  .finale__coords { grid-template-columns: repeat(3, 1fr); }

  .hero__contenu { padding-block: var(--e-9) var(--e-7); }
}

/* ============================================================
   26. Ordinateur — à partir de 1024 px
   ============================================================ */

@media (min-width: 1024px) {
  .scene__grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-8);
    align-items: start;
  }
  .scene__objet {
    grid-column: 2;
    grid-row: 1;
    top: 0;
    height: 100svh;
    background: none;
    box-shadow: none;
  }
  /* Resserré : 20svh de vide au-dessus du titre et sous le bouton laissaient
     plus de 340 px sans contenu de part et d'autre de la section. */
  .scene__recit {
    grid-column: 1;
    grid-row: 1;
    gap: var(--e-9);
    padding-block: var(--e-9);
  }
  .scene__intro { padding-top: 0; }
  .scene__fin { padding-bottom: 0; }
  .scene__cadenas { height: 52svh; }

  /* Deux colonnes : le texte et les commandes à gauche, l'un sous l'autre ;
     le box à droite, sur toute la hauteur. Dans le code, le box est placé
     entre les deux pour l'ordre du téléphone. */
  .tailles__grille { grid-template-columns: 5fr 7fr; gap: 0 var(--e-9); }
  .tailles__texte { grid-column: 1; grid-row: 1; align-self: end; }
  .tailles__commandes { grid-column: 1; grid-row: 2; align-self: start; }
  .tailles__scene { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* Bande de preuves : quatre chiffres, une seule ligne, à partir de 1024 px
     seulement — en dessous, les chiffres agrandis n'y tiendraient pas. */
  .preuves__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: var(--e-7) var(--e-6);
  }
  /* Filets de séparation plutôt que du vide : quatre chiffres, une seule bande. */
  .preuves .preuve + .preuve {
    border-left: 1px solid var(--bordure);
    padding-left: var(--e-5);
    margin-left: var(--e-5);
  }

  .offres__tete { grid-template-columns: 1fr 1fr; align-items: end; }
  .offres__liste { grid-template-columns: repeat(3, 1fr); }
  .offre--vedette { grid-column: auto; grid-template-columns: none; }

  .services__grille { grid-template-columns: repeat(3, 1fr); }

  .finale__grille { grid-template-columns: 7fr 5fr; gap: var(--e-9); }
  .finale__photo { max-width: 420px; margin-left: auto; }

  .devis__corps { grid-template-columns: 7fr 4fr; gap: var(--e-9); align-items: start; }

  .hero__contenu { padding-block: var(--e-10) var(--e-8); }
  .pleine-page__contenu { padding-block: var(--e-8); }
}

/* ============================================================
   27. Mouvement réduit — neutralisation intégrale
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal > *, .js .reveal-simple { opacity: 1; transform: none; }
  .scene__objet { position: static; height: auto; }
}

/* ============================================================
   28. Téléphone — composition resserrée
   ------------------------------------------------------------
   Même site, même code, même adresse : sous 768 px on replie et on met en
   ligne, on ne retire que le décor. Objectif : une dizaine d'écrans au lieu
   de dix-neuf (audit du 12/10/2026, section 3). Rien de tout cela ne touche
   la version ordinateur, inchangée au-delà de 767 px.
   Les replis (classe .repli, bouton .repli__bouton) et la barre basse
   n'existent qu'avec JavaScript : sans lui, tout le contenu reste déplié.
   ============================================================ */

@media (max-width: 767px) {

  /* Apparitions courtes : sur un téléphone, on fait défiler vite. */
  :root { --t-apparition: 250ms; }
  .js .reveal.est-visible > *:nth-child(2) { transition-delay: 40ms; }
  .js .reveal.est-visible > *:nth-child(3),
  .js .reveal.est-visible > *:nth-child(n+4) { transition-delay: 80ms; }

  .sauf-telephone { display: none; }
  .telephone-seul { display: inline; }

  /* Respirations resserrées : sur un écran étroit, 96 px de vide entre deux
     sections obligent à faire défiler sans rien apprendre. */
  .section { padding-block: var(--e-7); }
  .lede { margin-top: var(--e-4); }

  /* --- Replis --- */
  .js .repli__bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bleu);
    font-family: var(--police-texte);
    font-size: var(--fs-5);
    font-weight: var(--graisse-texte-fort);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .js .repli__bouton[hidden] { display: none; }
  /* Chevron tracé en bordures : il se retourne quand le contenu est déplié. */
  .js .repli__bouton::after {
    content: '';
    width: var(--e-2);
    height: var(--e-2);
    margin-top: calc(var(--e-1) * -1);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--t-1) var(--ease);
  }
  .js .repli__bouton[aria-expanded="true"]::after { transform: translateY(var(--e-1)) rotate(-135deg); }
  .sur-fond-profond .repli__bouton { color: var(--blanc); }
  .sur-fond-profond .offre .repli__bouton { color: var(--bleu); }
  .js .repli:not(.est-ouvert) { display: none; }

  /* --- Hero : cadrage sur la cliente, bandeau court, deux actions --- */
  .hero__media video,
  .hero__media img { object-position: 30% center; }
  .hero__bas { display: none; }
  .hero__lede { font-size: var(--fs-4); }
  .hero__contenu { padding-block: var(--e-7) var(--e-6); }
  .hero__promesse { align-items: center; }
  /* Une seule action mise en avant, en pleine largeur : le pouce la trouve. */
  .hero .boutons { gap: var(--e-2); }
  .hero .boutons .bouton { flex: 1 1 100%; }

  /* Cartes et panneaux : moins d'ombre, plus de contenu. */
  .carte, .avis-carte, .tailles__scene, .formulaire {
    padding: var(--e-5);
    box-shadow: none;
  }

  /* --- Preuves : pas de chevauchement, deux colonnes, libellés sur une ligne --- */
  .preuves { margin-top: 0; padding-block: var(--e-5) var(--e-6); }
  .preuves__grille { box-shadow: var(--ombre-carte); padding: var(--e-5); gap: var(--e-4); }

  /* --- Sécurité : le cadenas à 280 px, puis trois points d'une phrase.
     La scène cesse d'être collante : l'objet se montre une fois, puis laisse
     la place au texte. Le bouton disparaît, la barre basse le remplace. --- */
  .scene__objet {
    position: static;
    height: auto;
    padding-block: var(--e-5) 0;
    background: none;
    box-shadow: none;
  }
  .scene__cadenas { width: min(200px, 56%); height: auto; }
  .scene__intro { padding-top: var(--e-5); }
  .scene__intro .lede { font-size: var(--fs-4); }
  .scene__recit { gap: var(--e-5); padding-block: 0 var(--e-7); }
  .scene__etape { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-items: baseline; }
  .scene__num { grid-column: 1; margin-bottom: 0; }
  .scene__etape h3 { grid-column: 2; font-size: var(--fs-3); margin-bottom: var(--e-1); }
  .scene__etape p { grid-column: 2; font-size: var(--fs-5); }
  .scene__fin { display: none; }

  /* --- Garantie : une action, conditions repliées --- */
  .garantie h2 { font-size: var(--fs-1); }
  .garantie .boutons { margin-top: var(--e-5); }
  .garantie .repli__bouton { margin-top: var(--e-2); }
  .garantie__conditions { margin-top: var(--e-2); }

  /* --- Offres : trois lignes (vignette, titre, une phrase), détail replié --- */
  .offres__tete { gap: 0; margin-bottom: var(--e-5); }
  .offres__tete .lede { display: none; }
  .offres__liste { gap: var(--e-3); }
  .offre {
    grid-template-columns: 88px 1fr;
    gap: var(--e-4);
    padding: var(--e-4);
    box-shadow: none;
  }
  .offre:hover { transform: none; box-shadow: none; }
  .offre__media { aspect-ratio: 1; border-radius: var(--rayon-1); }
  .offre__index { display: none; }
  .offre h3 { font-size: var(--fs-3); margin-bottom: var(--e-1); }
  .offre p { font-size: var(--fs-5); line-height: 1.5; }
  .offre__points { margin-top: var(--e-2); padding-top: var(--e-3); }

  /* --- Tailles : le box d'abord, puis les onze puces sur deux rangées, toutes
     visibles. Une ligne défilante cachait les grandes tailles sans rien
     signaler (retour du 13/10/2026). --- */
  .tailles__grille { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  /* Sous 390 px de large, les descriptions les plus longues prennent une
     troisième ligne : on la réserve, pour que les puces restent en place. */
  @media (max-width: 389px) {
    .tailles__contenu { min-height: 4.5em; }
  }
  .tailles__choix {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--e-2);
    margin-top: 0;
  }
  .taille-puce {
    min-width: 0;
    padding: var(--e-2) 0;
    font-size: var(--fs-6);
    white-space: nowrap;
  }
  .tailles__extras { display: none; }
  .tailles__commandes .boutons { margin-top: var(--e-5); }
  .tailles__commandes .bouton { flex: 1 1 100%; }

  /* --- Photo du lieu : l'image seule, le titre dessous — plus de texte posé
     sur l'enseigne. --- */
  .pleine-page { display: block; min-height: 0; }
  .pleine-page__media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .pleine-page__media img { position: absolute; inset: 0; object-position: center 30%; }
  .pleine-page__voile { display: none; }
  .pleine-page__contenu { padding-block: var(--e-5) var(--e-6); }
  .pleine-page__contenu .kicker { margin-bottom: var(--e-2); }
  .pleine-page__contenu .lede { display: none; }

  /* --- Sur place : neuf services en liste à deux colonnes (pictogramme de
     32 px et titre), descriptions repliées derrière un seul bouton. Adresse et
     horaires : dans le titre du lieu, le menu et le pied de page. --- */
  #lieu .lede { display: none; }
  .services__grille { grid-template-columns: repeat(2, 1fr); gap: var(--e-2) var(--e-4); margin-top: var(--e-5); }
  .services__grille.est-ouvert { grid-template-columns: 1fr; gap: var(--e-4); }
  .service {
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: var(--e-1) var(--e-3);
    padding: var(--e-2) 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .service:hover { transform: none; box-shadow: none; }
  .service__objet { width: 32px; height: 32px; object-position: center; }
  .service h3 { font-size: var(--fs-5); line-height: 1.25; }
  .service p { grid-column: 2; font-size: var(--fs-5); }
  .js .services__grille:not(.est-ouvert) .service p { display: none; }
  #lieu .repli__bouton { margin-top: var(--e-3); }
  .infos-pratiques { display: none; }

  /* --- Étapes : trois lignes numérotées, sans image --- */
  .etapes__liste { gap: 0; margin-top: var(--e-5); }
  .etape {
    padding: var(--e-4) 0;
    border: 0;
    border-top: 1px solid var(--bordure-forte);
    border-radius: 0;
    background: none;
  }
  .etape__video { display: none; }
  .etape__texte { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--e-4); }
  .etape__num { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .etape__texte h3 { grid-column: 2; font-size: var(--fs-3); margin-bottom: var(--e-1); }
  .etape__texte p:not(.etape__num) { grid-column: 2; font-size: var(--fs-5); }

  /* --- Avis : la note dans l'en-tête, les cartes en défilement horizontal --- */
  .avis__tete { gap: var(--e-3); margin-bottom: var(--e-5); }
  .avis__note { align-items: center; }
  .avis__chiffre { font-size: var(--fs-1); }
  .avis__etoiles { font-size: var(--fs-4); }
  .avis__grille {
    /* position: relative — les mentions .sr-only des cartes sont en position
       absolue ; sans ancêtre positionné, elles échappent au rognage du
       défilement et élargissent la page entière. */
    position: relative;
    display: flex;
    gap: var(--e-3);
    overflow-x: auto;
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    scroll-padding-inline: var(--gouttiere);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .avis__grille::-webkit-scrollbar { display: none; }
  .avis-carte { flex: 0 0 84%; scroll-snap-align: start; }
  /* Une carte hors champ sur le côté ne « rentre » jamais par le bas : elle
     resterait masquée. Dans le défilement horizontal, pas d'apparition. */
  .js .avis__grille .reveal-simple { opacity: 1; transform: none; }
  .avis-carte blockquote { font-size: var(--fs-4); }
  .avis .espace-haut { margin-top: var(--e-3); }

  /* --- FAQ : cinq questions, les trois autres derrière « Toutes les questions » --- */
  .faq__liste { margin-top: var(--e-5); gap: var(--e-2); }
  .js .faq__liste:not(.est-ouvert) .faq-item--suite { display: none; }
  .faq__suite { margin-top: var(--e-2); }

  /* --- Finale : le titre et deux actions --- */
  .finale h2 { font-size: var(--fs-1); }
  .finale .lede, .finale__coords, .finale__photo { display: none; }
  .finale .boutons { margin-top: var(--e-5); }
  .finale .boutons .bouton { flex: 1 1 100%; }

  /* --- Pied : « Le centre » retiré (ces ancres sont dans le menu), liens sur
     deux colonnes --- */
  .pied { padding-block: var(--e-6) var(--e-4); }
  .pied__haut { gap: var(--e-5); padding-bottom: var(--e-5); }
  .pied__marque { gap: 0; }
  .pied__marque .mention { display: none; }
  .pied__colonne--centre { display: none; }
  .pied h4 { margin-bottom: var(--e-1); }
  .pied__colonne--joindre ul { grid-template-columns: 1fr 1fr; column-gap: var(--e-4); }
  .pied__horaires { margin-top: var(--e-2); max-width: none; }
  .pied__bas { gap: 0 var(--e-4); padding-top: var(--e-3); }

  /* --- Barre basse « Appeler · Devis » : après le hero, deux zones de 48 px.
     Elle se retire devant la finale et le pied de page (main.js). --- */
  .js .barre-basse {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-barre);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-2);
    padding: var(--e-2) var(--gouttiere) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
    background: var(--bleu-profond-t-92);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 -1px 0 var(--blanc-t-10);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--t-2) var(--ease), visibility var(--t-2);
  }
  .js .barre-basse.est-visible { transform: none; visibility: visible; }
  .barre-basse .bouton--fantome { color: var(--blanc); border-color: var(--blanc-t-26); }
  .barre-basse :focus-visible { box-shadow: var(--anneau-focus-sombre); }

  /* --- Page devis : le premier champ plus tôt --- */
  .devis__entete { padding-block: calc(var(--hauteur-nav-compacte) + var(--e-6)) var(--e-6); }
  .devis__entete h1 { font-size: var(--fs-1); line-height: var(--interligne-titres); letter-spacing: var(--approche-titres); }
  .devis__corps { padding-block: var(--e-6) var(--e-8); gap: var(--e-7); }
  .confirmation { padding: var(--e-7) var(--e-5); }
  .confirmation__secours .boutons .bouton { flex: 1 1 100%; }

  /* Le menu plein écran : des liens plus sobres, tous atteignables au pouce. */
  .menu__liens a { font-size: clamp(1.5rem, 7vw, 2rem); }
  .menu__contact .tel { font-size: var(--fs-3); }
  .menu__corps { gap: var(--e-6); padding-block: var(--e-6); }
}