/* ==========================================================================
   Many Clean — Jérôme, lavage de vitres à l'eau pure, pays de Lorient (56)
   Vanilla CSS. Scroll 100 % natif, apparitions via IntersectionObserver.
   Palette échantillonnée sur les fichiers réels du logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Le verre : trois clairs, du plus lumineux au plus sourd */
  --verre-clair: #FBFCFD;
  --verre: #EDF2F5;
  --verre-ombre: #DFE7EC;

  /* La signature, sortie du halo du logo */
  --rose: #F5348D;
  --rose-vif: #FE077C;
  --rose-profond: #AD0B60;

  /* Les ancres foncées : le noir du logo, le noir du t-shirt */
  --noir: #0A0A0B;
  --noir-tissu: #17171A;

  --texte: #14161A;
  --texte-doux: #4A525C;
  --texte-clair: #F2F4F6;
  --texte-clair-doux: rgba(242, 244, 246, .72);

  --filet-clair: #D3DCE2;
  --filet-fonce: rgba(255, 255, 255, .12);

  /* L'outil et l'eau, jamais en aplat de fond */
  --cyan: #00A9E0;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --script: "Yellowtail", cursive;
  --corps: "Manrope", "Helvetica Neue", sans-serif;
  --edito: "Space Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --pad: clamp(1.15rem, 5vw, 3rem);
  --section-y: clamp(4.25rem, 9vw, 7.5rem);
  --r: 4px;
  --t: 260ms cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--verre-clair);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.004em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 1.2rem + 5.9vw, 5.35rem); }
h2 { font-size: clamp(2.1rem, 1.15rem + 4.4vw, 4.05rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .75vw, 1.55rem); letter-spacing: 0; }

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

a { color: var(--rose-profond); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rose-vif); }

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

::selection { background: var(--rose); color: #fff; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  z-index: 200; background: var(--rose); color: var(--noir);
  padding: .7rem 1.1rem; font-weight: 700; font-size: .9rem;
}
.skip:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Sections et fonds
   Jamais deux fonds identiques côte à côte ; le blanc froid domine, le noir
   sert d'ancre (hero, avis, Jérôme, footer).
   -------------------------------------------------------------------------- */
section { padding-block: var(--section-y); scroll-margin-top: 74px; }

.bg-verre { background: var(--verre); }
.bg-ombre { background: var(--verre-ombre); }
.bg-noir { background: var(--noir); }
.bg-tissu { background: var(--noir-tissu); }

/* Sur fond foncé : TOUT passe en clair, filets de sur-titre compris. */
.bg-noir, .bg-tissu { color: var(--texte-clair); }
.bg-noir h1, .bg-noir h2, .bg-noir h3,
.bg-tissu h1, .bg-tissu h2, .bg-tissu h3 { color: var(--texte-clair); }
.bg-noir .kicker, .bg-tissu .kicker { color: var(--rose); }
.bg-noir .kicker::before, .bg-tissu .kicker::before { background: var(--rose); }
.bg-noir .lead, .bg-tissu .lead { color: var(--texte-clair-doux); }
.bg-noir p, .bg-tissu p { color: var(--texte-clair-doux); }
.bg-noir li, .bg-tissu li { color: var(--texte-clair-doux); }
/* `:not(.btn)` est indispensable : sans lui, cette règle l'emporte sur
   `.btn-primaire` et le libellé du bouton devient rose sur fond rose. */
.bg-noir a:not(.btn), .bg-tissu a:not(.btn) { color: var(--rose); }
.bg-noir a:not(.btn):hover, .bg-tissu a:not(.btn):hover { color: #fff; }
.bg-noir .rule, .bg-tissu .rule { background: var(--filet-fonce); }

/* Sur-titre : petites capitales monospace précédées d'un filet court. */
.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--edito);
  font-size: .715rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--rose-profond);
  margin: 0 0 1.1rem;
}
.kicker::before {
  content: ""; width: 26px; height: 2px; flex: none;
  background: var(--rose-profond);
}

.lead {
  font-size: clamp(1.06rem, 1rem + .34vw, 1.22rem);
  color: var(--texte-doux);
  max-width: 58ch;
}

.rule { height: 1px; background: var(--filet-clair); border: 0; margin: 0; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lead { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   4. Boutons
   Le libellé annonce le résultat, jamais l'action mécanique.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  font-family: var(--corps);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: transform var(--t), background-color var(--t), color var(--t), border-color var(--t);
}
.btn:hover { transform: translateY(-3px); }

/* Rose plein + texte noir : 5,4:1, le seul couple qui tienne AA avec le rose vif. */
.btn-primaire,
.bg-noir .btn-primaire,
.bg-tissu .btn-primaire { background: var(--rose); color: var(--noir); }
.btn-primaire:hover,
.bg-noir .btn-primaire:hover,
.bg-tissu .btn-primaire:hover { background: var(--rose-vif); color: var(--noir); }

.btn-fantome {
  background: transparent; color: var(--texte);
  border-color: var(--filet-clair);
}
.btn-fantome:hover { border-color: var(--rose-profond); color: var(--rose-profond); }

/* Le bandeau d'avance immédiate est noir sans porter .bg-noir : son bouton
   fantôme doit passer en clair comme les autres, sinon il tombe à 1,2:1. */
.bg-noir .btn-fantome, .bg-tissu .btn-fantome, .avance .btn-fantome {
  color: var(--texte-clair); border-color: var(--filet-fonce);
}
.bg-noir .btn-fantome:hover, .bg-tissu .btn-fantome:hover, .avance .btn-fantome:hover {
  border-color: var(--rose); color: var(--rose);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 11, .92);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--filet-fonce);
}
.nav__in {
  /* Pas de max-width calé sur --maxw : le header a droit à toute la largeur
     de la fenêtre, pour que le menu ne se comprime jamais sur deux lignes
     (desktop, ≥1200px — la grille mobile ci-dessous reprend la main en
     dessous de 620px). */
  width: 100%;
  padding: .6rem var(--pad);
  display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(.8rem, 2.4vw, 2rem);
}
.nav__logo { flex: none; display: block; line-height: 0; }
.nav__logo img { width: auto; height: 52px; }

.nav__links {
  display: none; flex-wrap: nowrap;
  gap: clamp(.9rem, 2.4vw, 2.25rem);
  margin-left: auto;
}
.nav__links a {
  flex: none; white-space: nowrap;
  color: var(--texte-clair-doux); text-decoration: none;
  font-size: .88rem; font-weight: 600;
  padding: .45rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav__links a:hover { color: #fff; border-bottom-color: var(--rose); }

/* Commutateur particuliers / pros — seul endroit du site où le lien croisé existe. */
.switch {
  display: flex; align-items: stretch;
  border: 1px solid var(--filet-fonce);
  border-radius: var(--r);
  overflow: hidden;
  flex: none;
  margin-left: clamp(.6rem, 2vw, 1.6rem);
}
.switch a, .switch span {
  flex: none; white-space: nowrap;
  font-family: var(--edito);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .62rem .78rem;
  display: flex; align-items: center;
  text-decoration: none;
  color: var(--texte-clair-doux);
  transition: background-color var(--t), color var(--t);
}
.switch a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.switch [aria-current="page"] { background: var(--rose); color: var(--noir); font-weight: 700; }

.nav__tel {
  flex: none;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem .95rem;
  background: var(--rose); color: var(--noir);
  font-weight: 800; font-size: .88rem;
  text-decoration: none; border-radius: var(--r);
  transition: background-color var(--t);
  white-space: nowrap;
}
.nav__tel:hover { background: var(--rose-vif); color: var(--noir); }
.nav__tel span { display: none; white-space: nowrap; }

@media (min-width: 768px) {
  .nav__tel span { display: inline; }
}
@media (min-width: 1200px) {
  .nav__links { display: flex; }
}

/* --------------------------------------------------------------------------
   6. Hero
   Le H1 est textuel et porte la requête ; la photo est une vraie photo de
   chantier, logo visible en situation. Aucun effet de « nettoyage » au
   chargement : la démonstration appartient au glissement, plus bas.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }

.hero__signature {
  font-family: var(--script);
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem);
  line-height: 1;
  color: var(--rose);
  margin: 0 0 .55rem;
  text-transform: none;
}
.hero h1 { margin-bottom: 1.15rem; }
.hero h1 .accent { color: var(--rose); }
.hero__sub {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  color: var(--texte-clair-doux);
  max-width: 46ch;
  margin: 0;
}
/* Deux registres : le catalogue de prestations, puis la promesse détachée
   en monospace rose — elle se lit seule, sans relire la phrase. */
.hero__sub .s1 { display: block; font-weight: 600; color: var(--texte-clair); }
.hero__sub .s2 {
  display: block; margin-top: .8rem;
  font-family: var(--edito);
  font-size: .8rem; line-height: 1.6; letter-spacing: .04em;
  color: var(--rose);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 1.9rem;
  font-family: var(--edito);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-clair-doux);
}
.hero__meta li { list-style: none; display: flex; align-items: center; gap: .45rem; }
.hero__meta li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--cyan); border-radius: 50%;
}
.hero__meta { padding: 0; margin-left: 0; }

.hero__media { position: relative; padding-block: clamp(14px, 2vw, 22px); }
.hero__media img {
  width: 100%;
  aspect-ratio: 955 / 1310;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: 3px;
  /* Le traitement du lettrage : liseré clair, contour noir, halo rose diffus. */
  transform: rotate(-1.2deg);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 10px var(--noir),
    0 0 24px 7px rgba(254, 7, 124, .36),
    0 0 64px 22px rgba(254, 7, 124, .12);
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
  .hero__media img { aspect-ratio: 4 / 5; }
}

/* Le recadrage appartient à la photo, pas au cadre : chaque image emporte son
   point de fuite dans la section où elle se trouve. Les sélecteurs par source
   servent les deux pages, qui ne montrent pas les mêmes photos aux mêmes
   endroits. */
.hero__media img[src*="jerome-lavage-vitrine"] { object-position: 50% 15%; }
.hero__media img[src*="nettoyage-velux"] { object-position: 50% 38%; }
.jerome__media img[src*="lavage-vitres-porte-vitree"] { object-position: 50% 34%; }
.jerome__media img[src*="jerome-lavage-vitrine"] { object-position: 50% 15%; }
.jerome__media img[src*="nettoyage-velux"] { object-position: 50% 38%; }

/* Sur la page particuliers, les deux cadres ont échangé de place : l'inclinaison
   part avec le cadre, pas avec la section. La page pros garde la sienne. */
[data-page="particuliers"] .hero__media img { transform: rotate(1.2deg); }
[data-page="particuliers"] .jerome__media img { transform: rotate(-1.2deg); }

/* Le sceau « −50 % » : même construction que le sticker de la photo — liseré
   blanc, contour noir, halo rose — il se lit comme un second autocollant posé
   sur le premier. Il déborde volontairement dans le noir du hero pour ne
   masquer ni la tête de Jérôme ni la raclette. */
.sceau {
  position: absolute; z-index: 3; margin: 0;
  top: -30px; right: -30px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: rotate(-9deg);
  filter: drop-shadow(0 0 22px rgba(254, 7, 124, .42));
}
.sceau em {
  display: grid; place-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--rose); color: var(--noir);
  box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--noir);
  font-family: var(--display); font-style: normal; font-weight: 800;
  font-size: 39px; line-height: 1; letter-spacing: -.015em;
}
.sceau span {
  width: max-content; white-space: nowrap;
  padding: 5px 15px;
  background: var(--noir); color: var(--texte-clair);
  /* Bords en pics, comme le ruban dentelé d'une médaille. */
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - 7px) 25%, 100% 50%, calc(100% - 7px) 75%, 100% 100%,
    0 100%,
    7px 75%, 0 50%, 7px 25%);
  font-family: var(--edito); font-size: 9px; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase;
  /* Le contour rose suit la découpe : quatre ombres portées sans flou tracent
     la silhouette dentelée, ce qu'un box-shadow ne saurait faire. */
  filter:
    drop-shadow(1.5px 0 0 var(--rose)) drop-shadow(-1.5px 0 0 var(--rose))
    drop-shadow(0 1.5px 0 var(--rose)) drop-shadow(0 -1.5px 0 var(--rose));
}
@media (max-width: 700px) {
  .sceau { top: -22px; right: -16px; gap: 5px; }
  .sceau em { width: 88px; height: 88px; font-size: 32px; box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--noir); }
  .sceau span { font-size: 8px; padding: 4px 13px; }
}

/* --------------------------------------------------------------------------
   7. Avant / après à glissement — LE moment singulier du site
   Deux images strictement superposées, révélation par découpe horizontale.
   La poignée cite la raclette : une lame fine + une prise moletée.
   Aucune animation pilotée par la position de scroll.
   -------------------------------------------------------------------------- */
.ba { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

@media (min-width: 900px) {
  .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.ba__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1390 / 1740;
  max-width: 540px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--verre-ombre);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;          /* le scroll vertical de la page reste libre */
  cursor: ew-resize;
}
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* L'« avant » est découpé par la droite ; sa largeur suit le curseur. */
.ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 55%)) 0 0);
  will-change: clip-path;
}

.ba__tag {
  position: absolute; bottom: 12px;
  font-family: var(--edito);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .6rem;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}
.ba__tag--avant { left: 12px; background: rgba(10, 10, 11, .78); color: var(--texte-clair); }
.ba__tag--apres { right: 12px; background: var(--rose); color: var(--noir); font-weight: 700; }

/* La poignée : lame + prise moletée. 44 px de cible, focus visible. */
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 55%);
  width: 48px;
  margin-left: -24px;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  cursor: ew-resize;
  touch-action: none;           /* la poignée seule capture le geste */
}
/* la lame */
.ba__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 255, 255, .95) 38%,
    var(--cyan) 50%,
    rgba(255, 255, 255, .95) 62%,
    rgba(255, 255, 255, .95) 100%);
  box-shadow: 0 0 10px rgba(10, 10, 11, .45);
}
/* la prise moletée : le monogramme MC en haut, la double flèche juste dessous,
   tous deux à l'intérieur de la prise. */
.ba__grip {
  position: relative;
  width: 32px; height: 62px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg,
      rgba(10, 10, 11, .13) 0 2px,
      transparent 2px 5px),
    #fff;
  border: 2px solid var(--rose);
  box-shadow: 0 4px 16px rgba(10, 10, 11, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
}
.ba__grip::before {
  content: "";
  width: 22px; height: 25px;
  background: url("../img/logo-mc-96.png") center / contain no-repeat;
}
.ba__grip::after {
  content: "↔";
  color: var(--rose-profond);
  font-family: var(--corps); font-weight: 800; font-size: 14px; line-height: 1;
}

.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__grip {
  outline: 3px solid var(--rose-vif);
  outline-offset: 3px;
}

.ba__hint {
  font-family: var(--edito);
  font-size: .72rem; letter-spacing: .08em;
  color: var(--texte-doux);
  margin-top: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.ba__hint::before { content: "↔"; font-size: 1.05rem; color: var(--rose-profond); }

/* Les deux paragraphes de la preuve reprennent le couplage du hero : le corps
   en Manrope semi-gras, la nuance détachée en Space Mono rose. */
.ba .lead { font-weight: 600; color: var(--texte); }
.accent-rose { color: var(--rose-profond); font-weight: inherit; }
/* Sur fond sombre, le rose profond tombe à 2,8:1 : on passe au rose vif,
   comme le font déjà les sur-titres. */
.bg-noir .accent-rose, .bg-tissu .accent-rose { color: var(--rose); }
/* Souligné fin sous l'invitation au geste : trait rose sous la ligne de base,
   qui s'interrompt proprement sous les jambages. */
.ba .lead b:not(.accent-rose),
.jerome__grid .lead b:not(.accent-rose),
.pure__pied .lead b:not(.accent-rose) {
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}
.preuve__note {
  font-family: var(--edito);
  font-size: .84rem; line-height: 1.65; letter-spacing: .04em;
  color: var(--rose-profond);
}

.ba__note {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--filet-clair);
  font-size: .93rem; color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   8. Eau pure — l'affiche : le titre en très grand, puis la photo entière
   sur toute la largeur, tenue entre deux filets roses comme dans un dormant.
   Aucun pixel de la scène n'est recouvert.
   -------------------------------------------------------------------------- */
#eau-pure { padding-block: clamp(2.5rem, 5.5vw, 4rem) 0; }
#eau-pure.bg-verre { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.pure__tete { padding-bottom: clamp(1.5rem, 3.5vw, 2.4rem); }
.pure__tete h2 { max-width: 26ch; }
.pure__tete h2 em { font-style: normal; color: var(--rose); }

.pure__ph { position: relative; }
.pure__ph img {
  width: 100%; aspect-ratio: 1230 / 638; object-fit: cover; object-position: 50% 50%;
  display: block;
}
.pure__ph::before, .pure__ph::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--rose);
}
.pure__ph::before { top: 0; }
.pure__ph::after { bottom: 0; }

.pure__pied {
  display: grid; gap: clamp(1.4rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.5rem, 5.5vw, 4rem);
}
@media (min-width: 900px) { .pure__pied { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.pure__pied .lead { margin: 0; font-weight: 600; color: var(--texte-clair); }
.pure__pied p + p { margin-top: .9rem; }

.pure__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.pure__points li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.pure__points b {
  font-family: var(--edito); font-size: .78rem; font-weight: 700;
  color: var(--rose); letter-spacing: .06em;
  padding-top: .18em;
}
.pure__points span {
  color: var(--texte-clair-doux);
  font-family: var(--edito);
  font-size: .84rem; line-height: 1.65; letter-spacing: .04em;
}
@media (max-width: 640px) { .pure__ph img { aspect-ratio: 4 / 3.2; } }

/* La page pros conserve la mise en colonnes héritée (photo à gauche, texte à
   droite) sur fond clair : ces règles ne s'appliquent que là. */
.pure__grid { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .pure__grid { grid-template-columns: .95fr 1.05fr; } }
.pure__media img {
  width: 100%; aspect-ratio: 1365 / 830; object-fit: cover;
  border-radius: var(--r);
}
.pure__grid .pure__points { margin-top: 1.9rem; }
.pure__grid .pure__points b { color: var(--rose-profond); }
.pure__grid .pure__points span { color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   9. Avis — ruban à défilement continu, piloté par le temps. Le ruban est
   déplacé en translate ; au survol il ralentit au quart au lieu de s'arrêter.
   -------------------------------------------------------------------------- */
.avis__top { margin-bottom: 2.25rem; }
/* Le rail ne se voit pas : il ne fait que masquer ce qui sort du cadre. Ce sont
   les cases qui défilent, pas une vitrine qui les contiendrait. */
.avis__rail { overflow: hidden; }
.avis__rail:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.avis__piste { display: flex; gap: 1rem; width: max-content; will-change: transform; }

/* Sans JavaScript d'animation (mouvement réduit demandé, ou un seul avis),
   le ruban redevient une simple bande que l'on fait défiler soi-même. */
.avis__rail--statique { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.avis__rail--statique::-webkit-scrollbar { display: none; }
.avis__rail--statique .avis__card { scroll-snap-align: center; }

.avis__card {
  flex: 0 0 auto;
  width: min(420px, 82vw);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1.2rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--filet-fonce);
  border-radius: var(--r);
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
/* La case survolée se détache le temps du survol : le filet passe au rose, le
   fond s'éclaircit, une ombre la décolle. Aucune transformation — un décalage
   ferait sauter la case pendant que le ruban défile. */
.avis__card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--rose);
  box-shadow: 0 6px 22px rgba(10, 10, 11, .35);
}

/* La parole du client se lit comme du texte, en Manrope ; c'est la signature
   qui porte l'accent. Les guillemets typographiques disparaissent : le nom
   manuscrit suffit à dire qu'on cite quelqu'un. */
.avis__card blockquote {
  margin: 0;
  font-family: var(--corps);
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--texte-clair);
}
/* Le nom en Yellowtail — troisième emploi du script sur la page, assumé :
   ici la main n'est plus celle de Jérôme mais celle du client. */
.avis__who {
  margin-top: auto;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.avis__who b {
  font-family: var(--script); font-weight: 400;
  font-size: 1.6rem; line-height: 1;
  color: var(--rose);
}
.avis__who .avis__lieu {
  font-family: var(--edito);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-clair-doux);
}

/* Les avis sont peuplés depuis le tableau JS : sans JavaScript, la section
   n'a rien à montrer et disparaît entièrement plutôt que de laisser un
   cadre vide sous son titre. */
html:not(.js) .avis-bloc { display: none; }

/* --------------------------------------------------------------------------
   10. Tarifs
   Presque aucun concurrent local n'affiche ses prix : les afficher est
   l'avantage le plus immédiat du site.
   -------------------------------------------------------------------------- */
.tarifs__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .tarifs__grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.grille { width: 100%; border-collapse: collapse; }
.grille caption {
  text-align: left;
  font-family: var(--edito);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-profond);
  padding-bottom: .9rem;
}
.grille th, .grille td {
  text-align: left;
  padding: .95rem .5rem;
  border-bottom: 1px solid var(--filet-clair);
  vertical-align: baseline;
}
.grille th { font-weight: 600; font-size: 1rem; }
.grille td {
  text-align: right;
  font-family: var(--edito);
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap;
}
.grille tr:last-child th, .grille tr:last-child td { border-bottom: 0; }
.grille .est-vitre th { color: var(--texte); }
/* « dès » : plus petit, en bas-de-casse et en gris, pour ne pas concurrencer
   le chiffre. L'espace vient du gap, pas d'un blanc dans le balisage. */
.grille td { display: flex; justify-content: flex-end; align-items: baseline; gap: .42em; }
.grille__des {
  font-weight: 400; font-size: .74em; letter-spacing: .04em;
  color: var(--texte-doux);
}
/* Seule la valeur passe en rose : l'unité (« / battant ») reste dans le gris du
   tableau, sinon la couleur ne désigne plus rien. */
.grille__prix { color: var(--rose-profond); font-weight: 700; }

.suppl {
  margin-top: 2.25rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--rose);
}
.suppl h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.suppl p { font-size: .9rem; color: var(--texte-doux); margin-bottom: 1.1rem; }
.suppl dl { margin: 0; display: grid; gap: .55rem; }
.suppl div {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .15rem 1rem; align-items: baseline;
}
.suppl dt { font-size: .92rem; color: var(--texte-doux); }
.suppl dd {
  margin: 0; font-family: var(--edito); font-weight: 700;
  font-size: .88rem; white-space: nowrap;
}

.encadre {
  background: var(--noir);
  color: var(--texte-clair);
  padding: clamp(1.6rem, 3.5vw, 2.3rem);
  border-radius: var(--r);
}
.encadre h3 { color: var(--texte-clair); margin-bottom: .9rem; }
.encadre p { color: var(--texte-clair-doux); font-size: .96rem; }
/* Space Mono : la précision chiffrée et le ton « message direct ». */
.encadre .encadre__cite {
  font-family: var(--edito);
  font-size: .96rem;
  line-height: 1.6;
  color: var(--rose);
  margin: 1.4rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--filet-fonce);
}
.encadre .btn-row { margin-top: 1.7rem; }

/* L'encadré comptable, à droite du chapeau. Il est posé sur la deuxième ligne
   de la grille et remonté d'un cran : son bord haut tombe ainsi dans l'écart
   entre la fin du titre et le début de la description, sans jamais dépendre de
   la hauteur exacte du titre — qui change avec la largeur de l'écran.
   Format resserré : c'est une note de marge, pas un bloc à égalité. */
/* L'encadré comptable se range dans le coin haut droit de la section, hors du
   flux : le chapeau garde donc exactement sa disposition d'origine. Le titre et
   la description sont bornés à 62 ch par .section-head, ce qui laisse la place
   libre à droite — le bloc ne les touche jamais. Sous 1040 px il revient dans
   le flux, sous le chapeau. */
.encadre--cote {
  padding: 1.5rem 1.6rem;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
}
.encadre--cote h3 { font-size: 1.06rem; margin-bottom: .75rem; }
.encadre--cote p { font-size: .93rem; }
.encadre--cote .encadre__cite { font-size: .8rem; margin-top: .85rem; padding-top: .85rem; }
.encadre--cote .btn-row { margin-top: .95rem; }
.encadre--cote .btn { padding: .62rem .9rem; font-size: .82rem; min-height: 44px; }

@media (min-width: 1040px) {
  .tarifs__wrap { position: relative; }
  .encadre--cote {
    position: absolute; top: 1.6rem; right: var(--pad);
    width: 21rem; margin: 0;
  }
  .encadre--cote .btn { width: 100%; justify-content: center; }
}

/* Les deux règles de prix, côte à côte : seules en colonne, elles laissaient
   la moitié droite de la page vide. */
.tarifs__regles { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 760px) { .tarifs__regles { grid-template-columns: 1fr 1fr; align-items: start; } }
.tarifs__regles .suppl { margin-top: 0; }

/* Aides financières — variante particuliers uniquement. */
.aides {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1.1rem;
}
@media (min-width: 760px) { .aides { grid-template-columns: 1fr 1fr; } }
/* Le CESU seul prend toute la largeur, titre et texte côte à côte : sur une
   colonne unique, un encart pleine largeur à texte centré flotterait. */
.aides--seul { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .aides--seul { grid-template-columns: 1fr; }
  .aides--seul .aide { display: grid; grid-template-columns: 15rem 1fr; gap: .5rem 1.6rem; align-items: start; }
  .aides--seul .aide h3 { margin-bottom: 0; }
}
.aide {
  border: 1px solid var(--filet-clair);
  border-top: 3px solid var(--rose);
  border-radius: var(--r);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--verre-clair);
}
.aide h3 { margin-bottom: .6rem; }
.aide p { font-size: .94rem; color: var(--texte-doux); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10 bis. L'avance immédiate — le seul argument de la page qui change le prix.
   Il passe donc avant la grille, avec un interrupteur qui recalcule les
   montants. Le bandeau emprunte au sceau du hero son vocabulaire (noir, gros
   chiffre rose) pour que l'avantage se lise comme la même promesse, tenue une
   seconde fois.
   -------------------------------------------------------------------------- */
.avance {
  background: var(--noir); color: var(--texte-clair);
  border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2.1rem);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
  display: grid; gap: 1.4rem; align-items: center;
}
@media (min-width: 820px) { .avance { grid-template-columns: auto 1fr auto; gap: 1.9rem; } }
.avance h3 { color: var(--texte-clair); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); margin-bottom: .5rem; }
.avance p { color: var(--texte-clair-doux); font-size: .94rem; margin: 0; max-width: 54ch; }
/* Ce sélecteur doit passer après « .avance p » et être au moins aussi spécifique :
   le chiffre est lui aussi un paragraphe. */
.avance .avance__chiffre {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); line-height: .88;
  color: var(--rose); letter-spacing: -.02em;
  max-width: none; white-space: nowrap;
}
.avance .avance__sap {
  margin-top: 1.1rem;
  gap: .5rem; min-height: 40px; padding: .5rem .9rem;
  font-size: .8rem;
}

/* L'interrupteur. Une vraie case à cocher, stylée : elle reste atteignable au
   clavier et l'état est porté par le DOM, pas par du JavaScript. */
.bascule {
  display: inline-flex; align-items: center; gap: .8rem;
  cursor: pointer; user-select: none;
  font-family: var(--edito); font-size: .76rem; line-height: 1.4;
  letter-spacing: .05em; color: var(--texte-clair);
  max-width: 15rem;
}
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule__piste {
  flex: none; position: relative; width: 52px; height: 30px;
  border-radius: 15px; background: rgba(255, 255, 255, .14);
  border: 1px solid var(--filet-fonce);
  transition: background-color var(--t), border-color var(--t);
}
.bascule__piste::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--texte-clair-doux);
  transition: transform var(--t), background-color var(--t);
}
.bascule input:checked + .bascule__piste { background: var(--rose); border-color: var(--rose); }
.bascule input:checked + .bascule__piste::after { transform: translateX(22px); background: var(--noir); }
.bascule input:focus-visible + .bascule__piste { outline: 3px solid var(--rose-vif); outline-offset: 3px; }

/* Les deux prix occupent la MÊME case d'une grille en ligne : ils se
   superposent, la case prend la largeur du plus large, et rien ne se décale
   pendant la bascule. « dès » voyage avec son montant, sinon l'écart de largeur
   entre les deux prix s'ouvrirait juste après lui.
   Le `:has` restreint la règle à la page particuliers : sur la page pros,
   `.grille__prix` ne contient qu'un montant. */
.grille__prix:has(.p-plein), .duo { display: inline-grid; justify-items: end; }
.grille__prix:has(.p-plein) > *, .duo > * { grid-area: 1 / 1; }
.grille__prix .p-plein, .grille__prix .p-net { display: flex; align-items: baseline; gap: .42em; }

/* Le trait de rature, tracé de gauche à droite. Dans le tableau il ne barre que
   le montant — « dès » est gris et petit, un trait rose en travers brouillerait
   les deux ; dans les suppléments il barre tout le bloc. */
.p-plein, .p-plein .p-val { position: relative; }
.p-plein::after, .p-plein .p-val::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; top: 53%;
  height: 2px; background: var(--rose); border-radius: 1px;
  transform: scaleX(0); transform-origin: left center;
}
.p-plein:has(.p-val)::after { content: none; }
.p-net { opacity: 0; visibility: hidden; }

/* La séquence : 0 → 0,30 s le trait barre le tarif plein ; 0,30 → 0,54 s il
   s'effface ; 0,42 → 0,74 s le montant net monte à sa place. « visibility » est
   dans les images-clés pour que le prix masqué sorte aussi de l'arbre
   d'accessibilité — sinon le lecteur d'écran annoncerait les deux. */
@keyframes rayer   { to { transform: scaleX(1); } }
@keyframes effacer { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes paraitre {
  from { opacity: 0; visibility: visible; transform: translateY(.34em); }
  to   { opacity: 1; visibility: visible; transform: none; }
}
#tarifs:has(#credit-avance:checked) .p-plein::after,
#tarifs:has(#credit-avance:checked) .p-plein .p-val::after { animation: rayer .3s cubic-bezier(.2, .7, .3, 1) forwards; }
#tarifs:has(#credit-avance:checked) .p-plein { animation: effacer .24s .3s ease-in forwards; }
#tarifs:has(#credit-avance:checked) .p-net { animation: paraitre .32s .42s cubic-bezier(.2, .7, .3, 1) forwards; }

.avis-credit {
  margin: .9rem 0 0;
  font-family: var(--edito); font-size: .76rem; line-height: 1.6; letter-spacing: .04em;
  color: var(--rose-profond);
  opacity: 0; visibility: hidden;
}
#tarifs:has(#credit-avance:checked) .avis-credit { animation: paraitre .32s .5s ease-out forwards; }

/* Mouvement réduit demandé : la bascule est instantanée, sans rature animée. */
@media (prefers-reduced-motion: reduce) {
  #tarifs:has(#credit-avance:checked) .p-plein::after,
  #tarifs:has(#credit-avance:checked) .p-plein .p-val::after { animation: none; }
  #tarifs:has(#credit-avance:checked) .p-plein { animation: none; opacity: 0; visibility: hidden; }
  #tarifs:has(#credit-avance:checked) .p-net,
  #tarifs:has(#credit-avance:checked) .avis-credit { animation: none; opacity: 1; visibility: visible; transform: none; }
}

/* --------------------------------------------------------------------------
   11. Le reste de la maison — liste à repères, une prestation par ligne.
   Le pictogramme se lit avant le titre, à la vitesse d'un coup d'œil, puis
   s'efface : même silhouette pleine, même rose pour les quatre. C'est un
   système de repérage, pas une collection d'icônes décoratives.
   -------------------------------------------------------------------------- */
/* Le chapeau reprend le couplage du hero : corps en Manrope semi-gras,
   énumération en rose, engagement sur le prix détaché en Space Mono. */
/* Sur fond clair, le rose profond : le rose vif tomberait à 2,2:1. */
#prestations h2 em { font-style: normal; color: var(--rose-profond); }
#prestations .section-head .lead { font-weight: 600; color: var(--texte); }
/* L'énumération prend le poids maximal : sur fond clair, le rose profond en 600
   passait presque inaperçu au milieu d'un corps déjà semi-gras. */
#prestations .section-head .lead .accent-rose { font-weight: 800; }.aussi__prix {
  display: block; margin-top: .85rem;
  font-family: var(--edito); font-weight: 400;
  font-size: .8rem; line-height: 1.6; letter-spacing: .04em;
  color: var(--rose-profond);
}
.aussi__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.aussi__list li {
  display: grid; gap: .35rem .95rem;
  grid-template-columns: 46px 1fr;
  padding: 1.5rem 0;
  border-top: 1px solid var(--filet-clair);
}
.aussi__list li:last-child { border-bottom: 1px solid var(--filet-clair); }
/* Sous 760 px, le repère tient la hauteur des deux lignes de texte. */
.aussi__list .ic { grid-row: span 2; }
@media (min-width: 760px) {
  .aussi__list li { grid-template-columns: 46px 14rem 1fr; column-gap: 1.25rem; align-items: start; }
  .aussi__list .ic { grid-row: auto; }
  /* Le titre prend la hauteur de la pastille et s'y centre : les deux démarrant
     en haut de rangée, leurs centres optiques coïncident. */
  .aussi__list h3 { display: flex; align-items: center; min-height: 46px; }
}
.aussi__list .ic {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--rose); color: #fff;
  box-shadow: 0 0 0 2px var(--noir), 0 3px 10px rgba(10, 10, 11, .22);
}
.aussi__list .ic svg { display: block; width: 26px; height: 26px; }
.aussi__list h3 { color: var(--texte); }
.aussi__list p { color: var(--texte-doux); font-size: .97rem; margin: 0; }
/* L'invitation à l'action, soulignée comme « Poussez le curseur ». */
#prestations .section-head .lead b {
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: all;
}

.aussi__preuve {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  display: grid; gap: 1rem;
}
@media (min-width: 760px) { .aussi__preuve { grid-template-columns: 1fr 1fr; } }
.aussi__preuve figure { margin: 0; }
.aussi__preuve img {
  width: 100%; aspect-ratio: 1760 / 1240; object-fit: cover;
  border-radius: var(--r);
}
.aussi__preuve figcaption {
  font-family: var(--edito);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: .6rem;
}
.aussi__preuve figcaption b { color: var(--rose-profond); }

/* Le portail reste une preuve d'appoint : il ne prend pas plus de place
   que la paire véranda au-dessus de lui. */
.aussi__solo { margin-top: 1rem; max-width: 680px; }
.aussi__solo img {
  width: 100%; aspect-ratio: 1660 / 1245; object-fit: cover;
  border-radius: var(--r);
}
.aussi__solo figcaption {
  font-family: var(--edito);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux); margin-top: .6rem;
}

/* Les chantiers avant/après. Une paire par ligne, pleine largeur : deux carrés
   de même taille collés par un filet rose, pour que l'œil compare sans avoir à
   chercher. Le diptyque reste à deux colonnes même sur mobile — empiler l'avant
   au-dessus de l'après casserait la comparaison. */
/* Sans intro au-dessus, la galerie prend elle-même sa marge haute. */
.chantiers {
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.chantier { margin: 0; }
.chantier__paire {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--rose);
  border: 1px solid var(--filet-clair); border-radius: var(--r);
  overflow: hidden;
}
.chantier__vue { position: relative; }
.chantier__vue img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.chantier__tag {
  position: absolute; left: 0; bottom: 0;
  padding: .2rem .38rem;
  font-family: var(--edito); font-size: .54rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--noir); color: #fff;
}
/* Le repère ne doit jamais manger la photo : sur les petites largeurs, où le
   carré descend à ~150 px, il se réduit au strict nécessaire. Il ne reprend sa
   taille normale que quand le carré a la place de l'accueillir. */
@media (min-width: 640px) {
  .chantier__tag {
    padding: .34rem .6rem;
    font-size: .64rem; letter-spacing: .14em;
  }
}
.chantier__tag--apres { background: var(--rose); color: var(--noir); }
.chantier figcaption {
  margin-top: .7rem;
  font-family: var(--edito);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   12. Jérôme
   -------------------------------------------------------------------------- */
.jerome__grid { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; }
.jerome__grid h2 + .lead { margin-top: 1.8rem; }

/* La question de Jérôme, posée seule : la fonte des titres, en rose, à un
   corps qui ponctue le texte sans rivaliser avec « Moi, c'est Jérôme » juste
   au-dessus. Écrit en p.classe — .bg-noir p l'emporterait sur une classe
   seule, et le rose retomberait en gris. */
p.jerome__pourquoi {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1; letter-spacing: -.005em; text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .85rem;
}
/* La raison porte le poids du chapeau ; la preuve qui suit reste en corps. */
p.jerome__raison { font-weight: 600; color: var(--texte-clair); }
.jerome__grid .lead { font-weight: 600; color: var(--texte-clair); }
/* Ici le paragraphe est déjà en 600 : l'accent doit passer au-dessus.
   (Dans la section preuve, .accent-rose hérite volontairement du 600 ambiant.) */
.jerome__grid .accent-rose { font-weight: 700; }
@media (min-width: 900px) { .jerome__grid { grid-template-columns: 1.05fr .95fr; } }
.jerome__media { padding-block: clamp(12px, 1.8vw, 20px); }
.jerome__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%;
  border-radius: 3px;
  /* Même sticker que la photo du hero, penché dans l'autre sens : les deux
     photos se répondent d'un bout à l'autre de la page. */
  transform: rotate(1.2deg);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 10px var(--noir),
    0 0 24px 7px rgba(254, 7, 124, .36),
    0 0 64px 22px rgba(254, 7, 124, .12);
}
/* La page pros garde la photo de matériel, au format paysage et sans sticker. */
.jerome__media img[src*="materiel"] {
  aspect-ratio: 1095 / 920; object-position: 50% 50%;
  border-radius: var(--r); transform: none; box-shadow: none;
}
.jerome__cite {
  font-family: var(--edito);
  font-size: clamp(.96rem, .92rem + .3vw, 1.08rem);
  line-height: 1.68;
  color: var(--texte-clair);
  margin: 1.9rem 0 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--rose);
}
/* Yellowtail : deuxième et dernière apparition du script sur la page. */
.jerome__sign {
  font-family: var(--script);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--rose);
  margin: 1.1rem 0 0;
  padding-left: 1.15rem;
}
.bg-noir .jerome__cite, .bg-noir .jerome__sign { color: var(--texte-clair); }
.bg-noir .jerome__sign { color: var(--rose); }

/* --------------------------------------------------------------------------
   13. Zone desservie — la réponse est le verdict, pas la carte.
   Le visiteur tape sa commune, le verdict s'écrit au corps d'un titre. Trois
   niveaux : « j'y passe » pour l'agglomération, « oui, sur appel » pour le
   reste du Morbihan et le sud Finistère, « appelez-moi » au-delà. Sans
   JavaScript, la liste de secours répond seule.
   -------------------------------------------------------------------------- */
.zone { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .zone { grid-template-columns: 1fr 1.05fr; } }

html.js .zone__secours { display: none; }
html:not(.js) .zone__champ,
html:not(.js) .zone__groupes,
html:not(.js) .zone__verdict { display: none; }

/* L'ancienne grille, conservée : la page pros l'utilise encore. */
.zone__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 860px) { .zone__grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
/* Les cadences se lisent comme une frise : un pictogramme de calendrier par
   fréquence, tous au même corps. Au repos les dessins sont sourds — aucune
   cadence n'est désignée d'avance, c'est le propos de la section — et le rose
   ne vient qu'au survol. Sous 760 px la frise passe à quatre colonnes, sinon
   les libellés se briseraient en trois lignes. */
.frise {
  list-style: none; margin: 0 0 clamp(2.25rem, 4.5vw, 3.25rem); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem .5rem;
}
@media (min-width: 760px) { .frise { grid-template-columns: repeat(8, 1fr); } }
.frise li {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--edito);
  font-size: .76rem; letter-spacing: .04em;
  color: var(--texte-doux);
  text-align: center;
  cursor: default;
  transition: color var(--t);
}
.frise svg {
  display: block; width: 27px; height: 27px;
  color: rgba(10, 10, 11, .42);
  transition: color var(--t), transform var(--t);
}
.frise li:hover { color: var(--texte); }
.frise li:hover svg { color: var(--rose-profond); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .frise li:hover svg { transform: none; }
}

/* « Sans engagement de durée » prend la typographie de « Chacune en récurrent
   ou en ponctuel » : même poids, même rose, dans un plomb déjà semi-gras — et
   le souligné rose du site, qui marque partout ce sur quoi il s'engage. */
#rythme .section-head .lead { font-weight: 600; color: var(--texte); }
#rythme .section-head .lead .accent-rose {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: all;
}

.communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.communes li {
  font-family: var(--edito);
  font-size: .8rem; letter-spacing: .04em;
  padding: .5rem .85rem;
  background: var(--verre-clair);
  border: 1px solid var(--filet-clair);
  border-radius: var(--r);
}
.zone__plus { margin-top: 1.4rem; font-size: .95rem; color: var(--texte-doux); }

/* Le champ : la saisie est traitée comme un titre, pas comme un formulaire. */
.zone__champ { position: relative; margin-top: clamp(1.6rem, 3.5vw, 2.2rem); }
.zone__champ label {
  display: block; margin-bottom: .6rem;
  font-family: var(--edito); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-profond);
}
.zone__champ input {
  width: 100%; min-height: 62px; padding: .6rem 0;
  background: transparent; border: 0; border-bottom: 2px solid var(--filet-clair);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 1.35rem + 1.8vw, 2.6rem); line-height: 1.05;
  color: var(--texte); text-transform: uppercase;
}
.zone__champ input::placeholder { color: rgba(20, 22, 26, .28); }
.zone__champ input:focus { outline: none; border-bottom-color: var(--rose); }
.zone__aide {
  margin: .85rem 0 0;
  font-family: var(--edito); font-size: .73rem; line-height: 1.6; letter-spacing: .05em;
  color: var(--texte-doux);
}

/* La liste de suggestions se superpose au contenu : elle doit être opaque. */
.zone__sugg {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: .3rem; list-style: none;
  background: #fff; border: 1px solid var(--filet-clair); border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(10, 10, 11, .18);
  max-height: 17rem; overflow-y: auto;
}
.zone__sugg[hidden] { display: none; }
.zone__sugg li[role="option"] {
  display: flex; align-items: baseline; justify-content: space-between; gap: .9rem;
  min-height: 42px; padding: .5rem .7rem; cursor: pointer;
  border-radius: 3px; white-space: nowrap;
  font-size: .95rem; color: var(--texte);
}
.zone__sugg li[role="option"]:hover,
.zone__sugg li[data-actif="true"] { background: var(--rose); color: var(--noir); }
.zone__sugg li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zone__sugg b { font-weight: 800; }
.zone__sugg em {
  flex: none; font-family: var(--edito); font-style: normal;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux);
}
.zone__sugg li[role="option"]:hover em,
.zone__sugg li[data-actif="true"] em { color: rgba(10, 10, 11, .72); }
.zone__sugg .vide {
  padding: .7rem; font-family: var(--edito); font-size: .76rem; letter-spacing: .04em;
  color: var(--texte-doux);
}

/* Le verdict, au corps d'un titre : c'est lui la réponse. Sur deux colonnes il
   s'aligne sur le champ de recherche plutôt que sur le sur-titre — la réponse se
   lit ainsi à la hauteur de la question qu'on vient de poser. */
.zone__verdict { min-height: 11rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 940px) { .zone__verdict { margin-top: clamp(3.5rem, 7vw, 5.5rem); } }
.zone__verdict strong {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.3rem, 1.7rem + 3vw, 4.2rem); line-height: .92;
  letter-spacing: -.015em; text-transform: uppercase;
  color: var(--rose-profond);
}
.zone__verdict p {
  margin: 1rem 0 0; max-width: 46ch;
  font-family: var(--edito); font-size: .82rem; line-height: 1.7; letter-spacing: .04em;
  color: var(--texte-doux);
}
.zone__verdict[data-etat="vide"] strong { color: rgba(20, 22, 26, .62); }
.zone__verdict[data-etat="appel"] strong { color: var(--texte); }
/* Un liseré signale le changement de réponse, sans animation bavarde. */
.zone__verdict[data-etat="coeur"],
.zone__verdict[data-etat="large"] { border-left: 3px solid var(--rose); padding-left: clamp(1rem, 2vw, 1.6rem); }
.zone__verdict[data-etat="appel"] { border-left: 3px solid var(--filet-clair); padding-left: clamp(1rem, 2vw, 1.6rem); }

/* Les raccourcis : ils font reconnaître le périmètre sans rien taper. Ils
   occupent toute la largeur, sous les deux colonnes — les trois groupes se
   lisent alors d'un seul balayage horizontal, chacun sur son tiers. */
.zone__groupes {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.2rem);
  border-top: 1px solid var(--filet-clair);
  display: grid; gap: 1.5rem clamp(1.4rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 700px) {
  .zone__groupes { grid-template-columns: repeat(3, 1fr); }
}
.zone__groupe h3 {
  margin: 0 0 .7rem;
  font-family: var(--edito); font-size: .68rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
  text-wrap: balance;
}
.zone__groupe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zone__groupe button {
  min-height: 40px; padding: .4rem .72rem; cursor: pointer;
  background: transparent; border: 1px solid var(--filet-clair); border-radius: var(--r);
  font-family: var(--edito); font-size: .74rem; letter-spacing: .03em; color: var(--texte);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.zone__groupe button:hover,
.zone__groupe button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--noir); }
.zone__groupe--coeur button { border-color: rgba(173, 11, 96, .45); }

/* --------------------------------------------------------------------------
   14. Passage à l'acte
   -------------------------------------------------------------------------- */
.acte__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.75rem); }
@media (min-width: 900px) { .acte__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Le titre de section vit dans la colonne de gauche : le formulaire démarre
   ainsi au niveau du sur-titre, et la section perd une hauteur de bloc.
   Le chapeau est borné pour ne pas venir tutoyer la colonne voisine. */
.acte__tete { margin-bottom: .6rem; }
/* Le titre reprend l'accent du hero : la promesse en rose, dans la m\u00eame fonte. */
.acte__tete h2 em { font-style: normal; color: var(--rose-profond); }
/* Le chapeau tenait sur 62 ch pleine largeur ; il tient désormais dans la
   colonne, soit deux fois moins large. Le borner plus court coûterait une ligne
   de plus, et la colonne de gauche est celle qui fixe la hauteur de section. */
.acte__tete .lead { max-width: 38ch; margin-top: 1.1rem; }
/* Les deux voies deviennent deux lignes de poids différent : l'appel reste la
   recommandation, le formulaire la solution de repli. */
.acte__tete .lead .l1 { display: block; font-weight: 600; color: var(--texte); }
.acte__tete .lead .l2 { display: block; margin-top: .55rem; font-weight: 400; color: var(--texte-doux); }
/* Le souligné désigne ce qu'on obtient ; le rose désigne le geste à faire.
   Deux fonctions distinctes, donc jamais sur le même mot. */
.acte__tete .lead b:not(.accent-rose) {
  /* `<b>` vaut « bolder » : relatif au 600 de la ligne, il grimpe à 900.
     On le fixe à 700 pour rester dans l'échelle de la page. */
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: all;
}
@media (min-width: 900px) {
  /* Le formulaire descend au niveau du titre, pas du sur-titre : coll\u00e9 tout en
     haut, il donnait l'impression d'un bloc rapport\u00e9. */
  .acte__grid .form { margin-top: 2.6rem; }
}

.acte__direct { display: grid; gap: 1rem; align-content: start; }
.acte__tel {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--noir);
  border-radius: var(--r);
  text-decoration: none;
  transition: transform var(--t);
}
.acte__tel:hover { transform: translateY(-3px); }
.acte__tel small {
  display: block;
  font-family: var(--edito);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .3rem;
}
.acte__tel strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
  color: var(--texte-clair);
  letter-spacing: 0;
}
.acte__insta {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.5rem;
  border: 1px solid var(--filet-clair);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--texte);
  font-weight: 600;
  transition: border-color var(--t), color var(--t);
}
.acte__insta:hover { border-color: var(--rose-profond); color: var(--rose-profond); }

.form { display: grid; gap: 1rem; }
/* `.form{display:grid}` est une règle auteur : elle l'emporte toujours sur
   la règle native du navigateur `[hidden]{display:none}`, quelle que soit
   la spécificité — sans cette ligne, masquer le formulaire par JS (attribut
   hidden) n'a aucun effet visuel. */
.form[hidden] { display: none; }
.form label {
  display: block;
  font-family: var(--edito);
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: .45rem;
}
.form input, .form textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--texte);
  background: var(--verre-clair);
  border: 1px solid var(--filet-clair);
  border-radius: var(--r);
  padding: .85rem 1rem;
  min-height: 52px;
  transition: border-color var(--t);
}
.form textarea { min-height: 118px; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--rose); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .85rem; color: var(--texte-doux); margin: 0; }

/* Envoi du formulaire : le cadre (form-hote) tient soit le formulaire, soit
   le message de remerciement — jamais les deux, pour ne pas casser la grille
   à deux colonnes de la section (un seul enfant occupe la cellule). */
.form-hote { display: grid; }

.form__erreur {
  margin: 0; padding: .85rem 1rem;
  border: 1px solid var(--rose-profond);
  border-radius: var(--r);
  background: rgba(245, 52, 141, .07);
  color: var(--rose-profond);
  font-size: .92rem; line-height: 1.5;
}

/* Le bouton annonce sa progression sans changer de taille : le texte change,
   pas le cadre — sinon le clic suivant tombe à un autre endroit. */
.btn[aria-busy="true"] { cursor: progress; opacity: .75; }

.form__succes {
  padding: clamp(2rem, 4vw, 2.75rem);
  border: 1px solid var(--filet-clair);
  border-radius: var(--r);
  background: var(--verre-clair);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.22, .61, .36, 1);
}
.form__succes.in { opacity: 1; transform: none; }
.form__succes h3 { margin-bottom: .6rem; }
.form__succes p { color: var(--texte-doux); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.foot { background: var(--noir); color: var(--texte-clair-doux); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.25rem; }
/* Deux blocs seulement depuis la suppression de « Bon à savoir » : la marque à
   gauche, les moyens de me joindre à la place qu'occupait la troisième colonne. */
@media (min-width: 760px) {
  .foot__grid { grid-template-columns: 1.2fr auto; }
  .foot__joindre { justify-self: end; }
}
.foot img { height: 54px; width: auto; margin-bottom: 1.1rem; }
/* La baseline sépare ce que fait Jérôme de là où il le fait : la prestation en
   Manrope semi-gras, la zone détachée en Space Mono rose — le couple employé
   partout ailleurs sur la page. */
.foot__base .l1 { display: block; font-weight: 600; color: var(--texte-clair); }
.foot__base .l2 {
  display: block; margin-top: .5rem;
  font-family: var(--edito); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rose);
}
.foot h3 {
  font-family: var(--edito); font-weight: 700;
  font-size: .7rem; letter-spacing: .16em;
  color: var(--rose); margin-bottom: .9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
.foot a { color: var(--texte-clair-doux); text-decoration: none; }
.foot a:hover { color: var(--rose); }
/* Les moyens de contact passent en Space Mono : c'est le registre que le site
   réserve aux données qu'on recopie — numéros, prix, mentions. L'icône garde sa
   colonne pour que les trois libellés s'alignent, quelle que soit sa largeur. */
.foot__joindre ul { gap: .75rem; }
.foot__joindre a {
  display: grid; grid-template-columns: 17px 1fr; align-items: center; gap: .7rem;
  min-height: 30px;
  font-family: var(--edito); font-size: .82rem; letter-spacing: .03em;
  transition: color var(--t);
}
.foot__joindre svg { color: var(--rose); transition: color var(--t); }
.foot__joindre a:hover svg { color: var(--texte-clair); }
.foot__bas {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--filet-fonce);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .8rem;
}
/* --------------------------------------------------------------------------
   16. Sélecteur de profil — superposé au hero, au premier chargement seulement.
   N'existe pas sans JavaScript : la page reste entière et lisible.
   -------------------------------------------------------------------------- */
.profil {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(10, 10, 11, .72);
  backdrop-filter: blur(4px);
}
.profil[hidden] { display: none; }
.profil__box {
  position: relative;
  width: min(100%, 520px);
  background: var(--verre-clair);
  border-top: 4px solid var(--rose);
  border-radius: var(--r);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  box-shadow: 0 24px 70px rgba(10, 10, 11, .45);
  animation: profil-in 300ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes profil-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.profil h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.95rem); margin-bottom: .7rem; }
.profil p { color: var(--texte-doux); font-size: .97rem; }
.profil__choix { display: grid; gap: .75rem; margin-top: 1.6rem; }
@media (min-width: 520px) { .profil__choix { grid-template-columns: 1fr 1fr; } }
.profil__choix .btn { width: 100%; }
.profil__close {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  color: var(--texte-doux);
  font-size: 1.35rem; line-height: 1;
  cursor: pointer; border-radius: var(--r);
}
.profil__close:hover { color: var(--texte); background: var(--verre); }
.profil__tel {
  display: block; margin-top: 1.35rem;
  font-family: var(--edito); font-size: .82rem;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   17. Apparitions — masquées seulement si le JS est présent.
   -------------------------------------------------------------------------- */
.js [data-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, .61, .36, 1);
}
.js [data-anim].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-anim] { opacity: 1; transform: none; }
  .btn:hover, .acte__tel:hover { transform: none; }
}


/* ==========================================================================
   17. Téléphone — les ajustements que la mise en page de bureau ne couvre pas.
   Tout est regroupé ici, en max-width, pour que la version ordi validée reste
   intacte : aucune de ces règles ne s'applique au-delà de 620 px.
   ========================================================================== */

/* Le bandeau, sur deux rangs. En un seul rang le contenu mesurait ~410 px pour
   351 px disponibles à 390 px : le bouton d'appel — l'action principale du
   site — se faisait rogner par l'overflow du corps de page. Rang 1 : la marque
   et l'appel. Rang 2 : le commutateur, en deux moitiés pleine largeur, donc
   deux cibles bien plus grandes qu'avant. */
@media (max-width: 620px) {
  .nav__in {
    display: grid;
    grid-template-columns: 1fr auto;
    /* Aucun écart de rang : c'est le commutateur qui porte le sien, sinon il
       resterait 9 px de vide au-dessus de rien une fois replié. */
    gap: 0 .8rem;
    padding: .5rem var(--pad) .6rem;
  }
  .nav__logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__logo img { height: 42px; }
  .nav__tel { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  .switch {
    grid-column: 1 / -1; grid-row: 2;
    margin-left: 0; margin-top: .55rem;
    max-height: 44px; overflow: hidden;
    transition: max-height var(--t), margin-top var(--t), opacity var(--t);
  }
  /* Dès que la page bouge, le commutateur rend son rang : le bandeau collant
     passe de ~107 à ~60 px et la photo du hero respire. Il revient dès le
     retour en haut de page. */
  .nav[data-defile="true"] .switch {
    max-height: 0; margin-top: 0; opacity: 0;
    pointer-events: none;
  }
  .switch a, .switch span { flex: 1; justify-content: center; padding: .5rem; }
}

/* Le sceau rentre dans le cadre. Il débordait de 16 px à droite, plus l'écart
   dû à la rotation et au ruban — plus large que le disque : il sortait de
   l'écran, donc se faisait tronquer. Ici il mord encore le noir du hero, mais
   il reste entier. */
@media (max-width: 480px) {
  .sceau { top: -18px; right: 2px; }
  .sceau em {
    width: 78px; height: 78px; font-size: 28px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--noir);
  }
  .sceau span { font-size: 7.5px; padding: 4px 11px; letter-spacing: .08em; }
}

/* Les deux appels à l'action du hero prennent toute la largeur : côte à côte
   ils totalisent ~400 px et se cassaient en deux rangs inégaux. */
@media (max-width: 480px) {
  .hero .btn-row { gap: .65rem; }
  .hero .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* La frise des cadences : « Trimestriel » occupait 80 px pour une colonne de
   80 px. Le corps baisse d'un cran, les mots tiennent sur une ligne. */
@media (max-width: 430px) {
  .frise { gap: 1.15rem .4rem; }
  .frise li { font-size: .7rem; letter-spacing: .02em; }
  .frise svg { width: 24px; height: 24px; }
}

/* La grille tarifaire : le prix est insécable, on rend donc au libellé les
   marges latérales des cellules plutôt que de le laisser se couper. */
@media (max-width: 430px) {
  .grille th, .grille td { padding: .85rem .15rem; }
  .grille th { font-size: .95rem; }
  .grille td { font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   Grille des tarifs, mobile. Le défaut n'était pas une affaire de corps : la
   colonne des prix est en « nowrap », donc incompressible (min-content =
   max-content). Avec width:100% et table-layout auto, le navigateur écrase le
   libellé pour lui faire de la place — « Baie vitrée complète » se repliait sur
   deux lignes alors que la somme des deux max-content tenait dans le tableau.
   L'insécable sur le libellé rend les deux colonnes également rigides : la
   répartition suit alors les contenus. Sous 345 px la somme dépasse vraiment la
   largeur utile — là seulement, les corps baissent d'un cran. La borne est à
   345 et non 340 : entre les deux, les deux colonnes rigides réclamaient 327 px
   pour 304 disponibles, et le document débordait de quatre pixels.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .grille th { white-space: nowrap; }
}
@media (max-width: 345px) {
  .grille th, .grille td { padding: .8rem .1rem; }
  .grille th { font-size: .88rem; }
  .grille td { font-size: .84rem; }
  .grille td, .grille__prix .p-plein, .grille__prix .p-net { gap: .3em; }
}

/* « nacelle en location, sur devis » ne peut pas rester insécable sur un
   téléphone : la valeur passe sous son intitulé au lieu de sortir du cadre. */
@media (max-width: 430px) {
  .suppl dd { white-space: normal; }
  .suppl div { gap: .1rem .6rem; }
}



/* Les moyens de contact du pied de page sont les affordances d'appel sur
   téléphone : ils passent aux 44 px réglementaires, cible étendue à la ligne
   plutôt qu'au seul libellé. */
@media (max-width: 620px) {
  .foot__joindre ul { gap: .35rem; }
  .foot__joindre a { padding: .35rem 0; }
}


/* --------------------------------------------------------------------------
   Les cinq commandes qui passaient sous les 44 px tactiles, et elles seules.
   Attention en y ajoutant une ligne : `min-height` ne se comporte pas comme un
   plancher — à spécificité égale, cette règle REMPLACE la valeur d'origine.
   Y lister une commande déjà plus haute la rabaisserait à 44 px (le champ du
   devis y avait perdu 38 % de sa hauteur). Pour une commande plus grande,
   écrire `min-height: max(44px, <sa valeur>)` à côté, jamais ici.
   Les valeurs de bureau — 40 px sur les pastilles de communes et sur Accès SAP,
   37 px sur le commutateur, 30 px sur les contacts du pied — sont conservées
   au-delà de 620 px.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .switch a, .switch span,
  .zone__sugg li[role="option"],
  .zone__groupe ul li button,
  .avance .avance__sap,
  .foot__joindre a { min-height: 44px; }
}


/* --------------------------------------------------------------------------
   Hero mobile : la photo s'intercale entre les deux registres du sous-titre.
   La photo est imbriquée dans une autre colonne que le sous-titre, et `order`
   ne classe que des frères : `display: contents` efface les deux boîtes
   intermédiaires pour que signature, titre, les deux lignes du sous-titre, la
   photo et les boutons deviennent tous enfants directs de .hero__grid — et donc
   ordonnables. L'héritage traverse `contents`, les corps de texte ne bougent
   pas ; seule la borne de 46 ch du sous-titre tombe, sans effet sur une colonne
   de 351 px. L'écart de grille passe à 0 : ce sont les marges d'origine de
   chaque élément qui font l'espacement, comme avant l'aplatissement.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__grid > div:not(.hero__media), .hero__sub { display: contents; }

  .hero__signature { order: 1; }
  .hero h1 { order: 2; }
  .hero__sub .s1 { order: 3; }
  .hero__media { order: 4; }
  .hero__sub .s2 { order: 5; }
  .hero .btn-row { order: 6; }

  /* Le sceau mord de 18 px vers le haut : la photo prend la marge qu'il faut
     pour ne pas venir sur la ligne de texte précédente. */
  .hero__media { margin-top: 1.9rem; }
  .hero__sub .s2 { margin-top: 1.5rem; }
}


/* --------------------------------------------------------------------------
   Preuve mobile : le curseur s'intercale entre le paragraphe et sa chute.
   Même procédé que le hero — les deux colonnes de .ba sont aplaties pour que
   sur-titre, titre, paragraphe, cadre, légende et chute deviennent frères et
   donc ordonnables. Ici les deux conteneurs sont anonymes et statiques, et
   .ba__frame porte son propre `position: relative` : aucun ancrage n'est
   perdu, la poignée reste calée sur le cadre. L'écart de grille passe à 0, les
   marges sont reposées explicitement.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .ba { gap: 0; }
  .ba > div { display: contents; }

  .ba .kicker { order: 1; }
  .ba h2 { order: 2; }
  .ba .lead { order: 3; }
  .ba__frame { order: 4; margin-top: 2rem; }
  .ba__hint { order: 5; }
  .ba .preuve__note { display: none; }
}


/* --------------------------------------------------------------------------
   Jérôme, mobile : le portrait s'intercale entre le chapeau et le « Pourquoi ? ».
   Comme dans le hero, .jerome__media est elle aussi un div enfant direct de la
   grille : elle est exclue de l'aplatissement, sinon sa boîte disparaîtrait et
   l'image perdrait son rang. Le paragraphe sans classe reçoit un ordre lui
   aussi — sans quoi il garderait `order: 0` et remonterait avant le sur-titre.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .jerome__grid { gap: 0; }
  .jerome__grid > div:not(.jerome__media) { display: contents; }

  .jerome__grid .kicker { order: 1; }
  .jerome__grid h2 { order: 2; }
  .jerome__grid .lead { order: 3; }
  .jerome__media { order: 4; margin: 2rem 0 1.9rem; }
  .jerome__grid .jerome__pourquoi { order: 5; }
  .jerome__grid .jerome__raison { order: 6; }
  .jerome__grid p:not([class]) { display: none; }
  .jerome__grid .jerome__cite { order: 8; }
  .jerome__grid .jerome__sign { order: 9; }
}


/* --------------------------------------------------------------------------
   Zone, mobile : les pastilles de communes tiennent sur deux lignes.
   Huit pastilles par groupe totalisaient ~790 px pour 646 px de capacité sur
   deux lignes : c'est la largeur qu'on reprend — corps, marges intérieures,
   interlettrage et écart — jamais la hauteur, qui reste à 44 px tactiles.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .zone__groupe ul { gap: 5px; }
  .zone__groupe ul li button {
    font-size: .64rem;
    letter-spacing: 0;
    padding: .35rem .38rem;
  }
}


/* --------------------------------------------------------------------------
   Avis, mobile : les cases étaient hautes de 362 px pour 295 de large, hauteur
   dictée par le plus long des deux avis — et la case courte, alignée sur elle,
   était vide aux deux tiers. On reprend la hauteur là où elle se fabrique : un
   corps de texte plus serré tient plus de signes par ligne, donc moins de
   lignes. La largeur ne change pas : la réduire allongerait la case.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .avis__card { padding: 1.1rem 1.15rem; gap: .9rem; }
  .avis__card blockquote { font-size: .94rem; line-height: 1.55; }
}


/* --------------------------------------------------------------------------
   Avance immédiate, mobile : le titre est l'argument, il prend le corps et
   toute la largeur de la colonne. Aucun plafond de caractères — c'était lui qui
   le laissait à 250 px dans un bloc de 323.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .avance h3 {
    font-size: 2rem; line-height: 1.02;
    margin-bottom: .8rem; max-width: none;
  }
}


/* --------------------------------------------------------------------------
   Suppléments de hauteur, mobile : « au-delà de 6 mètres » et son montant
   totalisaient 336 px pour 303 disponibles, la valeur passait donc à la ligne.
   Les deux corps baissent d'un cran et l'écart de colonne se resserre : les
   trois paliers tiennent chacun sur une ligne. Le montant reste sécable, pour
   qu'un libellé plus long à l'avenir passe à la ligne plutôt que de déborder.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .avis-credit { display: none; }
  /* Sortant de « display: none », l'élément ne joue pas l'animation d'apparition :
     il resterait invisible. L'état d'arrivée est donc posé en dur — le fondu ne
     manque pas, la mention apparaît sous la ligne de flottaison. */
  #tarifs:has(#credit-avance:checked) .avis-credit {
    display: block; animation: none;
    opacity: 1; visibility: visible; transform: none;
  }
  /* Le bloc « Vitres en hauteur » suit directement le dernier tarif : sur une
     colonne unique, les 2,25 rem d'écart du deux-colonnes ouvraient un trou. */
  .suppl { margin-top: 1.1rem; }
  .suppl div { gap: .1rem .5rem; }
  .suppl dt { font-size: .8rem; }
  .suppl dd { font-size: .78rem; }
}
/* Sous 345 px, la colonne descend à 263 px utiles alors que les paliers
   réclamaient 250, 283 et 261. Un dernier cran les ramène autour de 231, 252 et
   241 : une dizaine de pixels de marge, de quoi absorber une police système un
   peu plus large que la nôtre. Le montant reste sécable — si un libellé
   s'allonge un jour, il passe à la ligne au lieu de déborder. */
@media (max-width: 345px) {
  .suppl div { gap: .1rem .3rem; }
  .suppl dt { font-size: .72rem; }
  .suppl dd { font-size: .7rem; }
}


/* --------------------------------------------------------------------------
   Le chantier pro, vu des deux côtés. Deux images de même taille collées par
   le filet rose : la comparaison ne demande aucun effort de l'œil. Le diptyque
   reste à deux colonnes même sur mobile — empiler les deux vues casserait le
   rapprochement, comme pour les avant/après de la page particuliers.
   -------------------------------------------------------------------------- */
.chantier-pro { margin: clamp(2rem, 4.5vw, 3rem) 0 0; }
.chantier-pro__paire {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--rose);
  border: 1px solid var(--filet-clair); border-radius: var(--r);
  overflow: hidden;
}
.chantier-pro__vue { position: relative; }
.chantier-pro__vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Chaque vue garde son point de fuite : le cadrage appartient à la photo. */
.chantier-pro__vue--trottoir img { aspect-ratio: 1142 / 1500; object-position: 50% 22%; }
.chantier-pro__vue--verre img { aspect-ratio: 1179 / 1548; object-position: 50% 46%; }
.chantier-pro__tag {
  position: absolute; left: 0; bottom: 0;
  padding: .2rem .38rem;
  font-family: var(--edito); font-size: .54rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--noir); color: #fff;
}
.chantier-pro__tag--rose { background: var(--rose); color: var(--noir); }
/* Le repère ne reprend sa taille normale que quand la vue peut l'accueillir. */
@media (min-width: 640px) {
  .chantier-pro__tag { padding: .38rem .7rem; font-size: .64rem; letter-spacing: .14em; }
}
.chantier-pro figcaption {
  margin-top: .8rem;
  font-family: var(--edito); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   Le diptyque pro, sur téléphone : il sort de la colonne de texte et touche
   les deux bords de l'écran — chaque vue récupère les marges du wrap, soit
   12 % de largeur — et passe à un portrait 2:3, un tiers plus haut. Le filet
   rose ne subsiste qu'entre les deux vues, celui du pourtour n'ayant plus de
   bord à border. La légende, elle, reste alignée sur le texte.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .chantier-pro { margin-inline: calc(-1 * var(--pad)); }
  .chantier-pro__paire { border: 0; border-radius: 0; }
  .chantier-pro__vue--trottoir img,
  .chantier-pro__vue--verre img { aspect-ratio: 2 / 3; }
  .chantier-pro figcaption { padding-inline: var(--pad); }
}


/* --------------------------------------------------------------------------
   « La méthode », sur téléphone : le cadrage se décale légèrement pour laisser
   voir Jérôme derrière le verre. Sur une bande de 1230 × 638 réduite à 360 px
   de large, le centrage strict le repoussait au bord droit.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .pure__ph img { object-position: 58% 50%; }
}

/* --------------------------------------------------------------------------
   Pages légales — prose simple (mentions-legales.html, politique-confidentialite.html).
   Pas de kicker/section-head ici : juste assez de rythme vertical pour que les
   titres ne collent pas les uns aux autres.
   -------------------------------------------------------------------------- */
.legal { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 8vw, 6rem); }
.legal .wrap { max-width: 760px; }
.legal h1 { margin-bottom: 1.75rem; }
.legal h2 { margin-top: 2.75rem; margin-bottom: .9rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { margin: 0 0 1.05em; padding-left: 1.3em; }
.legal li { margin-bottom: .4em; color: var(--texte-doux); }