/* ==========================================================================
   Athletic Pilates — Feuille de style principale
   Design system + composants partagés
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --bone:        #f6f3ee;
  --cream:       #fbf9f6;
  --paper:       #ffffff;
  --ink:         #16130f;
  --ink-soft:    #4a443c;
  --ink-mute:    #7d7469;
  --oak:         #b08355;
  --oak-deep:    #8a6440;
  --oak-wash:    #efe4d6;
  --char:        #E7CEB9;
  --line:        #e4ddd3;
  --line-dark:   #3a332b;
  --success:     #3f6f4a;
  --danger:      #a23b32;

  /* Typographie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:   clamp(2.75rem, 6.5vw, 5.25rem);
  --fs-h1:     clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-h2:     clamp(1.85rem, 3.4vw, 2.9rem);
  --fs-h3:     clamp(1.3rem, 2vw, 1.7rem);
  --fs-h4:     1.125rem;
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  /* Espacement */
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4rem, 9vw, 8.5rem);
  --container:  1280px;
  --container-narrow: 820px;

  /* Divers */
  --radius:     2px;
  --radius-lg:  4px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --shadow-sm:  0 1px 2px rgba(22,19,15,.06), 0 4px 16px rgba(22,19,15,.04);
  --shadow-md:  0 2px 6px rgba(22,19,15,.07), 0 18px 44px rgba(22,19,15,.09);
  --header-h:   76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` plutôt que `hidden` : évite de créer un conteneur de défilement,
     ce qui casserait le header en position:sticky. Filet de sécurité contre
     tout futur élément trop large ; la cause réelle doit rester corrigée. */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--dark { background: var(--char); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .eyebrow { color: var(--oak); }
.cream { color: var(--cream); }
.section--dark .lede { color: rgba(251,249,246,.72); }

.section--cream { background: var(--cream); }
.section--wash  { background: var(--oak-wash); }

/* Masqué à l'œil, conservé pour les lecteurs d'écran.
   Cette classe était utilisée dans le balisage sans avoir jamais été
   définie : les noms de teintes s'affichaient donc par-dessus les pastilles. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: .75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--oak-deep);
  margin: 0 0 1.1rem;
  display: block;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 70ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.9em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
  text-align: center;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--oak-deep); --btn-bd: var(--oak-deep); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); }

.btn--light { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: rgba(251,249,246,.5); }
.btn--light:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }

.btn--solid-light { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.btn--solid-light:hover { --btn-bg: var(--oak); --btn-fg: var(--cream); --btn-bd: var(--oak); }

.btn--full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover { gap: .9em; color: var(--oak-deep); }

/* --------------------------------------------------------------------------
   5. En-tête / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--char);
  color: rgba(251,249,246,.8);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem var(--gutter);
}
.topbar a { color: var(--oak); border-bottom: 1px solid transparent; }
.topbar a:hover { border-color: var(--oak); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,243,238,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* Logo — le PNG fourni est opaque (fond blanc, sans canal alpha).
   `multiply` fait disparaître ce fond blanc sur les fonds clairs.
   Si vous remplacez le fichier par un PNG transparent ou un SVG,
   ces règles restent sans effet indésirable. */
.brand__mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

/* Sur fond sombre : on inverse (marque claire sur fond noir),
   puis `screen` rend le noir transparent. */
.brand__mark--sombre {
  filter: invert(1);
  mix-blend-mode: screen;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.brand__name em {
  font-style: normal;
  display: block;
  font-family: var(--font-body);
  font-size: .5rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="page"] { border-color: var(--ink); }

.nav__link svg { transition: transform .3s var(--ease); }

/* Menu déroulant */
.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + .8rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 290px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: .6rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.has-dropdown:hover .nav__link svg { transform: rotate(180deg); }

.dropdown a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  transition: background .2s var(--ease);
}
.dropdown a:hover { background: var(--bone); }
.dropdown a span { color: var(--ink-mute); font-size: var(--fs-micro); white-space: nowrap; }

/* Le nom du modèle est prioritaire sur le prix.
   Auparavant c'était un nœud de texte nu : dans un conteneur flex, un tel
   nœud peut être comprimé jusqu'à disparaître par un voisin en `nowrap`.
   Il a désormais son propre élément, qui ne cède pas. */
.dropdown a .dropdown__nom {
  color: inherit;
  font-size: var(--fs-small);
  white-space: normal;
  /* Le titre ne se comprime jamais.
     Surtout, pas de `min-width: 0` ici : cette déclaration retire la taille
     minimale automatique d'un élément flex et l'autorise à être écrasé
     jusqu'à disparaître — c'est ce qui effaçait les titres au profit
     des prix. */
  flex: 1 0 auto;
}

/* C'est le prix qui cède s'il manque de place, jamais le nom du modèle. */
.dropdown a span:not(.dropdown__nom) {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.header-phone {
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.header-phone:hover { color: var(--oak-deep); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(251,249,246,.72);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  font-size: var(--fs-small);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line-dark);
}

.footer-brand .brand__name { color: var(--cream); }
.footer-brand .brand__name em { color: rgba(251,249,246,.45); }
.footer-brand p { margin-top: 1.25rem; max-width: 38ch; line-height: 1.7; }

.footer-contact { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.footer-contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: .6rem;
}
.footer-contact svg { flex-shrink: 0; margin-top: .35em; color: var(--oak); }
.footer-contact a:hover { color: var(--cream); }

.footer-col h4 {
  color: var(--cream);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .65rem; }
.footer-col a {
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer-col a:hover { color: var(--cream); border-color: var(--oak); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  font-size: var(--fs-micro);
  color: rgba(251,249,246,.5);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,.45) 0%, rgba(20,17,13,.2) 35%, rgba(20,17,13,.86) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.hero h1 {
  font-size: var(--fs-hero);
  color: var(--cream);
  max-width: 16ch;
  margin-bottom: .35em;
}
.hero .lede { color: rgba(251,249,246,.82); max-width: 52ch; margin-bottom: 2.2rem; }
.hero .eyebrow { color: var(--oak); }

/* Bandeau hero interne (pages secondaires) */
.page-hero {
  position: relative;          /* ancre .hero__media — sans quoi l'image se
                                  positionne sur le document entier et recouvre
                                  la topbar et le header */
  overflow: hidden;
  isolation: isolate;
  background: var(--char);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Contenu du bandeau interne au-dessus de l'image */
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .hero__inner { position: relative; z-index: 1; }

/* Bandeau interne accueillant une image de fond */
.page-hero:has(.hero__media) {
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 46vh, 520px);
}
.page-hero h1 { color: var(--cream); max-width: 20ch; }
.page-hero .lede { color: rgba(251,249,246,.72); }
.page-hero .eyebrow { color: var(--oak); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251,249,246,.5);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumb a:hover { color: var(--oak); }

.breadcrumb--light { color: var(--ink-mute); }
.breadcrumb--light a:hover { color: var(--oak-deep); }

/* --------------------------------------------------------------------------
   7 bis. Bande vidéo
   Pleine largeur. Hauteur plafonnée : 530 px sur ordinateur, 480 px sur mobile.
   `object-fit: cover` évite toute déformation quel que soit le format source.
   -------------------------------------------------------------------------- */
.video-section {
  width: 100%;
  background: var(--char);
}

/* Respiration entre la bande de galerie et la vidéo, qui se touchaient. */
.galerie-bande + .video-section { margin-top: clamp(4rem, 10vw, 16rem); }

.video-frame {
  width: 100%;
  height: 530px;
  max-height: 530px;
  overflow: hidden;
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--char);
  /* Vidéo purement décorative : aucune interaction possible.
     Sans survol ni clic, aucun contrôle natif ne peut apparaître
     (y compris l'incrustation « image dans l'image » de Chrome). */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Aucun contrôle n'est affiché : la vidéo remplit toujours le cadre.
   Si la lecture automatique est refusée, js/main.js la relance
   silencieusement au premier geste de l'utilisateur. */
.video-frame video::-webkit-media-controls { display: none !important; }
.video-frame video::-webkit-media-controls-enclosure { display: none !important; }

@media (max-width: 900px) {
  .video-frame {
    height: 480px;
    max-height: 480px;
  }
}

/* --------------------------------------------------------------------------
   7 ter. Composants de la page d'accueil
   -------------------------------------------------------------------------- */

/* Grille numérotée — reprend le traitement typographique des étapes
   de la page d'accueil (.steps--ligne .step::before) : chiffre en gros,
   police de titrage, teinte chêne, au-dessus du titre. */
.grid--numerote { counter-reset: numerote; }
.grid--numerote > * { counter-increment: numerote; }
.grid--numerote > *::before {
  content: "0" counter(numerote);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: var(--oak);
  margin-bottom: .85rem;
}

/* Liste à coches — utilisée sur commencer, studios et les fiches produit.
   Doit rester dans la feuille partagée : product.css n'est chargé que sur
   les fiches produit, et ces règles manquaient donc aux autres pages
   (puces visibles et coche rejetée à la ligne). */
.quote-benefits {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
}
.quote-benefits li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: var(--fs-small);
}
.quote-benefits svg {
  flex-shrink: 0;
  color: var(--oak);
  margin-top: .25em;
}

/* Liste « ce qui est inclus » — section sombre, coche dessinée en CSS */
.liste-incluse { list-style: none; padding: 0; margin: 0; }
.liste-incluse li {
  position: relative;
  padding: .9rem 0 .9rem 1.75rem;
  margin: 0;
}
.liste-incluse li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 10px;
  height: 5px;
  border-left: 1.7px solid var(--oak);
  border-bottom: 1.7px solid var(--oak);
  transform: rotate(-45deg);
}

/* Variante centrée — une seule colonne, coche et texte centrés ensemble.
   La coche repasse en élément de flux (au lieu d'absolu) afin de rester
   solidaire du texte quand la ligne est centrée. Elle est dessinée en SVG
   blanc et dimensionnée en `em` : elle grandit donc avec le texte. */
.liste-incluse--centre {
  max-width: 44rem;
  margin-inline: auto;
}

.liste-incluse--centre li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  text-align: center;
  font-size: 1.5em;            /* 50 % plus grand que la taille de base */
  padding-left: 0;
  position: static;
}

.liste-incluse--centre li::before {
  /* On neutralise la coche dessinée en bordures de la règle de base */
  position: static;
  transform: none;
  border: 0;
  flex-shrink: 0;
  width: .85em;
  height: .85em;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Témoignages — variante épurée, sans encadré */
.testimonials--epure .testimonial {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) 0 0;
  flex-basis: min(82vw, 340px);
}
.testimonials--epure .testimonial:last-child { border-right: 0; }
.testimonials--epure blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
}

.carousel-nav--centre { justify-content: center; margin-top: 1.25rem; }

.avis-note {
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  text-align: center;
  margin-top: 1.5rem;
}

/* Collection — grille épurée, sans carte encadrée */
.produits-epure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.produit-min { display: flex; flex-direction: column; }

.produit-min__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--oak-wash);
  border-radius: var(--radius);
  overflow: hidden;
}
.produit-min__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.produit-min:hover .produit-min__media img { transform: scale(1.04); }

.produit-min h3 {
  font-size: 1.2rem;
  margin: 1.1rem 0 .2rem;
  transition: color .25s var(--ease);
}
.produit-min:hover h3 { color: var(--oak-deep); }

.produit-min .prix {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Bande d'appel à l'action — variante centrée */
.cta-band--centre .cta-band__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(2rem, 4vw, 2.75rem);
}
.cta-band--centre h2 { max-width: 22ch; margin-inline: auto; }
.cta-band--centre p { margin-inline: auto; }
.cta-band--centre .btn-row { justify-content: center; }

@media (max-width: 900px) {
  .produits-epure { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .produits-epure { grid-template-columns: 1fr; }
  .testimonials--epure .testimonial { border-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   8. Grilles génériques
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Bandeau des garanties */
.assurances {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.assurance { background: var(--bone); padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.assurance svg { color: var(--oak-deep); margin-bottom: 1rem; }
.assurance h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.assurance p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   9. Carte produit
   -------------------------------------------------------------------------- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--oak);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--oak-wash);
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(33,29,24,.88);
  color: var(--cream);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--radius);
}

.product-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}
.product-card__body h3 { font-size: 1.35rem; margin: 0; }
.product-card__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; flex: 1; }
.product-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.price { font-family: var(--font-display); font-size: 1.25rem; }
.price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   10. Split (deux colonnes texte + image)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.split--reverse .split__media { order: 2; }

.split__media {
  aspect-ratio: 4 / 5;
  background: var(--oak-wash);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split--wide .split__media { aspect-ratio: 3 / 2; }

/* Duo pleine largeur (studio / maison) */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); }
.duo__panel {
  position: relative;
  min-height: clamp(420px, 55vh, 620px);
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--cream);
  overflow: hidden;
}
.duo__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.duo__panel:hover img { transform: scale(1.04); }
.duo__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.82) 100%);
}
.duo__content { position: relative; z-index: 1; max-width: 42ch; }
.duo__content h3 { color: var(--cream); font-size: var(--fs-h3); }
.duo__content p { color: rgba(251,249,246,.78); font-size: var(--fs-small); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   11. Étapes numérotées
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }

/* Variante « sur une ligne » — les étapes côte à côte, numéro au-dessus
   du titre, plutôt qu'empilées les unes sous les autres. */
.steps--ligne {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.steps--ligne .step {
  display: block;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 0;
}
.steps--ligne .step:last-child { border-bottom: 0; }
.steps--ligne .step::before {
  display: block;
  margin-bottom: .85rem;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
}
.steps--ligne .step h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  margin-bottom: .5rem;
}
.steps--ligne .step p { font-size: var(--fs-small); max-width: none; }

@media (max-width: 900px) {
  .steps--ligne { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps--ligne { grid-template-columns: 1fr; }
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--oak);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.step p { color: var(--ink-soft); max-width: 60ch; }

.section--dark .step { border-color: var(--line-dark); }
.section--dark .step p { color: rgba(251,249,246,.7); }

/* --------------------------------------------------------------------------
   12. Accordéon (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  transition: color .25s var(--ease);
}
.accordion__trigger:hover { color: var(--oak-deep); }

.accordion__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.accordion__icon::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.accordion__icon::after  { left: 8px; top: 0; width: 1.5px; height: 18px; }

.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); opacity: 0; }

.accordion__panel { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.accordion__panel-inner {
  padding-bottom: 1.6rem;
  padding-right: clamp(0px, 8vw, 5rem);
  color: var(--ink-soft);
}

.section--dark .accordion,
.section--dark .accordion__item { border-color: var(--line-dark); }
.section--dark .accordion__panel-inner { color: rgba(251,249,246,.7); }

/* --------------------------------------------------------------------------
   13. Témoignages
   -------------------------------------------------------------------------- */
.testimonials {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
  /* Le défilement reste possible (tactile, molette, flèches) mais la
     barre est masquée : elle coupait la mise en page. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials::-webkit-scrollbar { width: 0; height: 0; display: none; }
.testimonial {
  flex: 0 0 min(88vw, 380px);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial__stars { color: var(--oak); letter-spacing: .15em; font-size: var(--fs-small); }
.testimonial blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; flex: 1; }
.testimonial cite { font-style: normal; font-size: var(--fs-small); font-weight: 600; }
.testimonial cite span {
  display: block;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .2rem;
}

.carousel-nav { display: flex; gap: .6rem; margin-top: .5rem; }
.carousel-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.carousel-nav button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Formulaire de contact / devis
   -------------------------------------------------------------------------- */
.quote-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.quote-panel h3 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.quote-panel__intro { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 1.75rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label .req { color: var(--danger); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--oak); background: var(--paper); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field__error { font-size: var(--fs-micro); color: var(--danger); min-height: 1em; }

.field--consent {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: .7rem;
}
.field--consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: .2rem; padding: 0; }
.field--consent label {
  font-size: var(--fs-micro);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
}
.field--consent label a { border-bottom: 1px solid var(--oak); }

/* Pot de miel — masqué aux humains, visible aux robots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.55;
  border: 1px solid;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #eef4ef; border-color: #c3dbc9; color: var(--success); }
.form-status.is-error   { background: #fbeeed; border-color: #e8c6c2; color: var(--danger); }
.form-status.is-pending { background: var(--oak-wash); border-color: #ddc9b0; color: var(--oak-deep); }

.form-note { font-size: var(--fs-micro); color: var(--ink-mute); margin-top: 1rem; line-height: 1.6; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
  margin-right: .5em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   15. Bande CTA
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--char);
  color: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Variante avec photo de fond.
   Déclarée APRÈS `.cta-band` : la propriété raccourcie `background` ci-dessus
   réinitialiserait sinon l'image.
   Le dégradé sombre est un voile posé au-dessus de la photo : il garantit la
   lisibilité du texte crème quelle que soit la luminosité du cliché, sans
   ajouter de balise. La couleur de repli s'applique si l'image manque. */
.cta-band--centre {
  background-color: #211d18;
  background-image:
    linear-gradient(rgba(20, 17, 13, .68), rgba(20, 17, 13, .68)),
    url("/images/cta.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cta-band h2 { color: var(--cream); max-width: 18ch; }
.cta-band p { color: rgba(251,249,246,.72); max-width: 50ch; }

/* --------------------------------------------------------------------------
   16. Contenu long (pages légales / éditoriales)
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { color: var(--oak-deep); border-bottom: 1px solid var(--oak-wash); }
.prose a:hover { border-color: var(--oak-deep); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .6em; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--fs-small);
}
.prose th, .prose td {
  text-align: left;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--oak-wash); font-weight: 600; }

.legal-meta {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  padding: 1rem 1.25rem;
  background: var(--cream);
  border-left: 2px solid var(--oak);
  margin-bottom: 2.5rem;
}

.toc {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
.toc h2 {
  font-size: var(--fs-micro) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
}
.toc ol { margin: 0; padding-left: 1.25em; font-size: var(--fs-small); }
.toc a { color: var(--ink-soft); border: 0; }
.toc a:hover { color: var(--oak-deep); }

/* --------------------------------------------------------------------------
   17. Divers
   -------------------------------------------------------------------------- */
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.badge {
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.section--dark .badge { border-color: var(--line-dark); color: rgba(251,249,246,.72); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .assurances { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  /* IMPORTANT — `backdrop-filter` fait du header le bloc conteneur de ses
     descendants en position:fixed. Le panneau de menu se retrouvait alors
     positionné dans le header (65 px de haut) au lieu de l'écran : liste
     débordant à côté du logo et défilement horizontal parasite.
     Le flou n'apporte rien en mobile : on le neutralise. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bone);
  }

  .nav-toggle { display: inline-flex; }

  /* =====================================================================
     MENU MOBILE — construction volontairement dépouillée.

     Trois corrections successives ont échoué sur iPhone. La cause tenait
     à la construction elle-même : le panneau était en `position: fixed`,
     ce qui crée un calque composité. WebKit — moteur de TOUS les
     navigateurs iOS, Chrome compris — n'y repeint pas de façon fiable un
     contenu révélé après coup. Le sous-menu restait donc vide jusqu'à ce
     qu'on referme et rouvre le menu, ce qui invalidait le calque.

     Plutôt que de contourner encore, on retire toutes les conditions :
       • ni `position: fixed`, ni `transform` : le panneau est un bloc
         ordinaire du flux, sur sa propre ligne du header ;
       • aucun écrêtage, aucune animation de hauteur ;
       • le sous-menu est TOUJOURS déplié — rien n'étant révélé après
         coup, il n'y a plus rien à repeindre.

     Il ne subsiste aucun calque composité, donc plus aucune prise pour
     ce défaut.
     ===================================================================== */
  .header-inner {
    flex-wrap: wrap;
    /* Les lignes se rangent en haut sans se répartir la hauteur libre. */
    align-content: flex-start;
  }

  /* La première ligne conserve une hauteur constante, que le menu soit
     ouvert ou non. Sans cela, l'apparition de la seconde ligne supprimait
     l'espace libre que la première s'appropriait : elle reprenait sa
     hauteur naturelle, plus courte, et logo, titre et boutons remontaient
     d'un cran à chaque ouverture. */
  .brand,
  .header-actions { min-height: var(--header-h); }

  .nav {
    order: 3;              /* passe sous le logo et les boutons */
    flex: 0 0 100%;        /* occupe toute la ligne */
    position: static;
    display: none;
    width: 100%;
    max-width: 100%;
    margin-top: .25rem;
    padding: .25rem 0 1.25rem;
    background: transparent;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .nav.is-open { display: block; }

  /* Le panneau fermé est retiré du parcours clavier via l'attribut `inert`,
     posé en JS. On évite `visibility`, qui empêchait l'animation du transform. */
  .nav[inert] { pointer-events: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { justify-content: space-between; padding: 1.15rem 0; font-size: 1.05rem; border: 0; }

  /* Sous-menu toujours visible : ni bascule, ni écrêtage, ni animation.
     C'est ce qui rend le défaut impossible — on n'affiche jamais rien
     « après coup », les liens sont là dès l'ouverture du menu. */
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: block;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 0 0 .5rem .75rem;
    transition: none;
  }

  /* Le chevron n'a plus d'objet : plus rien ne se déplie. */
  .has-dropdown > .nav__link svg { display: none; }

  /* En mobile, nom et prix s'empilent au lieu de se disputer la ligne.
     Le titre est ainsi toujours visible, quelle que soit la largeur. */
  .dropdown a {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .7rem 0;
  }
  .dropdown a .dropdown__nom { font-size: 1rem; }
  .dropdown a span:not(.dropdown__nom) { white-space: normal; }

  .header-phone { display: none; }
  .nav .btn { margin-top: 1.5rem; }

  /* La barre d'en-tête doit tenir dans la largeur de l'écran.
     Logo + bouton + burger atteignaient 474 px sur un écran de 375 px :
     le document s'élargissait et tout le site défilait horizontalement. */
  .header-inner { gap: .75rem; min-width: 0; }
  .brand { min-width: 0; }
  .brand__name { font-size: 1.05rem; }
  .header-actions { gap: .6rem; min-width: 0; }
  .header-actions .btn {
    padding: .7em 1.1em;
    font-size: .75rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .split, .cta-band__inner { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .assurances { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero { min-height: 72vh; }
}

@media (max-width: 360px) {
  /* Sur les très petits écrans, la gouttière butait sur son minimum de 20 px
     et faisait déborder l'en-tête de quelques pixels. On la resserre. */
  :root { --gutter: .875rem; }
}

@media (max-width: 560px) {
  /* Sous 560 px, le nom de la marque reste affiché : c'est l'identité du
     site, elle ne doit pas disparaître. On gagne la place ailleurs —
     baseline masquée, monogramme et bouton resserrés. */
  .brand { gap: .5rem; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name {
    display: block;
    font-size: .95rem;
    line-height: 1.15;
  }
  .brand__name em { display: none; }   /* la baseline cède, pas le nom */

  .header-inner { gap: .5rem; }
  .header-actions { gap: .45rem; }
  .header-actions .btn {
    padding: .6em .8em;
    font-size: .68rem;
    letter-spacing: .02em;
  }
  .nav-toggle { width: 40px; height: 40px; }
}