/* ═══════════════════════════════════════════════════════════════════════
   MPB EXPERTISE — « le dossier d'expertise »
   Système défini par DESIGN.md. Palette extraite au pixel du logo :
   encre #00234B · ardoise #486685 · eau #009BBE. Un seul ornement : la
   ligne d'eau. Aucun dégradé, aucune ombre portée, angles quasi droits.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fontes auto-hébergées (zéro requête externe — voir Données personnelles) */
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('fonts/source-serif-4-var.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('fonts/public-sans-var.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ── Variables ─────────────────────────────────────────────────────────── */
:root{
  /* Fonds */
  --papier:#F7F5F1; --surface:#FFFFFF; --encre:#00234B; --encre-2:#062E5C;
  /* Texte */
  --texte:#00234B; --texte-2:#3E5573; --texte-3:#66788D;
  --texte-inverse:#F2F5F8; --texte-inverse-2:#B9C6D6;
  /* Identité (logo) */
  --ardoise:#486685; --eau:#009BBE; --eau-fonce:#007D9A;
  /* Accent du geste n°1 (barre fixe mobile) — seule exception à la retenue
     papier/encre du reste du site : un bouton qui reste sous le pouce sur
     TOUTE la visite doit se voir tout de suite. */
  --orange-doux:#E19468; --orange-doux-vif:#D9713F;
  /* Bordures */
  --filet:#DDD8CE; --filet-sombre:#1B3A63;
  /* Sémantique */
  --ok:#1E7F4F; --ok-fond:#EAF4EE; --erreur:#B3402A; --erreur-fond:#F9EEEA;
  --a-completer:#8A6D3B; --a-completer-fond:rgba(198,151,73,.08);
  /* Type */
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  /* Échelle fluide */
  --step--1:clamp(.83rem,.78rem + .29vw,1rem);
  --step-0:clamp(1rem,.95rem + .3vw,1.1rem);
  --step-1:clamp(1.05rem,1rem + .35vw,1.2rem);
  --step-2:clamp(1.5rem,1.28rem + 1.1vw,2.2rem);
  --step-3:clamp(2.15rem,1.55rem + 3vw,4.1rem);
  --step-lettre:clamp(4.5rem,14vw,8.5rem);
  --step-lettre-page:clamp(6rem,20vw,16rem);
  /* Espace */
  --esp-xs:clamp(.75rem,.68rem + .33vw,.94rem);
  --esp-s:clamp(1rem,.91rem + .43vw,1.25rem);
  --esp-m:clamp(1.5rem,1.37rem + .65vw,1.88rem);
  --esp-l:clamp(2rem,1.83rem + .87vw,2.5rem);
  --esp-xl:clamp(3rem,2.74rem + 1.3vw,3.75rem);
  --esp-2xl:clamp(4.5rem,3.9rem + 3vw,7rem);
  /* Divers */
  --rayon:2px; --colonne:72rem; --texte-mesure:44rem;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--papier); color:var(--texte);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--eau); color:#fff}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0 0 .5em; font-weight:600; line-height:1.2; text-wrap:balance}
h1,h2{font-family:var(--serif); letter-spacing:-.015em}
h1{font-size:var(--step-3); line-height:1.12}
h2{font-size:var(--step-2)}
h3{font-family:var(--sans); font-size:var(--step-1); line-height:1.35}
p{margin:0 0 1em; max-width:var(--texte-mesure)}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0 0 1em; padding-left:1.2em}
li{margin-bottom:.4em}
:focus-visible{outline:2px solid var(--eau); outline-offset:2px; border-radius:var(--rayon)}
[hidden]{display:none!important}

/* Surtitre mono — le parfum « rapport » */
.surtitre{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ardoise);
  margin:0 0 var(--esp-s); display:flex; align-items:center; gap:.75rem;
}
.surtitre::before{content:""; width:1.4rem; height:1.5px; background:var(--eau); flex:none}
.sur-encre .surtitre{color:var(--texte-inverse-2)}

/* ── La ligne d'eau (la signature — la vague du P) ─────────────────────── */
.ligne-eau{
  width:100%; height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 3 1, 6 4 T 12 4 T 18 4 T 24 4' fill='none' stroke='%23009BBE' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:24px 8px; background-position:0 50%;
}
@media (prefers-reduced-motion:no-preference){
  .ligne-eau-anim{animation:eau-defile 18s linear infinite}
  @keyframes eau-defile{to{background-position:240px 50%}}
}
.lien-eau{
  color:inherit; text-decoration:none; font-weight:500; padding-bottom:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q 3 0.6, 6 3 T 12 3 T 18 3 T 24 3' fill='none' stroke='%23009BBE' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 100%; background-size:24px 6px;
}
@media (hover:hover){
  .lien-eau{transition:background-position-x .35s ease}
  .lien-eau:hover{background-position-x:24px; color:var(--eau-fonce)}
}
.sur-encre .lien-eau:hover{color:#fff}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-block; font-family:var(--sans); font-size:var(--step--1);
  font-weight:600; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; border-radius:var(--rayon);
  padding:.9rem 1.75rem; text-align:center; transition:background .2s,color .2s,border-color .2s;
}
.btn-principal{background:var(--encre); color:var(--texte-inverse)}
.btn-principal:hover{background:var(--encre-2)}
.btn-principal:active{transform:translateY(1px)}
.btn-principal:disabled{opacity:.55; cursor:wait}
.sur-encre .btn-principal{background:var(--papier); color:var(--encre)}
.sur-encre .btn-principal:hover{background:#fff}
.btn-contour{background:transparent; color:var(--encre); border-color:var(--ardoise)}
.btn-contour:hover{border-color:var(--encre)}
.sur-encre .btn-contour{color:var(--texte-inverse); border-color:var(--filet-sombre)}
.sur-encre .btn-contour:hover{border-color:var(--texte-inverse-2)}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.entete{
  position:sticky; top:0; z-index:50; background:var(--papier);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.entete.reduite{border-bottom-color:var(--filet)}
.entete-int{
  max-width:var(--colonne); margin:0 auto; padding:.7rem var(--esp-s);
  display:flex; align-items:center; justify-content:space-between; gap:var(--esp-s);
}
.entete-logo{display:flex; align-items:center; text-decoration:none; flex:none}
.entete-logo img{width:64px; height:64px; transition:width .2s,height .2s}
.entete.reduite .entete-logo img{width:48px; height:48px}
.entete-nav{display:flex; align-items:center; gap:var(--esp-m)}
.entete-nav a:not(.btn){font-size:var(--step--1)}
/* Menu : pas de vague sous chaque lien (Romain 03/09 : « c'est sur tous les
   menus en haut ») — la ligne d'eau ne souligne QUE la page où l'on est, et
   arrive au survol sur les autres. Ailleurs dans le texte, .lien-eau garde
   sa vague : c'est un lien, elle dit « ceci se tape ». */
.entete-nav .lien-eau{background-size:24px 0; transition:background-size .3s ease, color .2s}
.entete-nav .lien-eau[aria-current="page"]{background-size:24px 6px}
@media (hover:hover){.entete-nav .lien-eau:hover{background-size:24px 6px; background-position-x:0}}
.menu-bouton{
  display:none; font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; background:none;
  border:1.5px solid var(--ardoise); border-radius:var(--rayon);
  color:var(--encre); padding:.55rem .9rem; cursor:pointer;
}
@media (max-width:47.9rem){
  .entete-nav{display:none}
  .menu-bouton{display:block}
}
/* Volet mobile — plein écran encre */
.volet{
  position:fixed; inset:0; z-index:100; background:var(--encre);
  color:var(--texte-inverse); display:flex; flex-direction:column;
  padding:var(--esp-m); transform:translateX(100%); transition:transform .28s ease;
  visibility:hidden;
}
.volet.ouvert{transform:none; visibility:visible}
@media (prefers-reduced-motion:reduce){.volet{transition:none}}
.volet-haut{display:flex; justify-content:space-between; align-items:center}
.volet-fermer{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; background:none; border:1.5px solid var(--filet-sombre);
  border-radius:var(--rayon); color:var(--texte-inverse); padding:.55rem .9rem; cursor:pointer;
}
.volet-logo{width:56px; height:56px; background:#fff; border-radius:var(--rayon); padding:4px}
.volet-liens{display:flex; flex-direction:column; margin-top:var(--esp-xl)}
.volet-liens a{
  display:flex; align-items:baseline; gap:1.1rem; padding:1.15rem 0;
  border-bottom:1px solid var(--filet-sombre);
  font-family:var(--serif); font-size:var(--step-2); font-weight:600;
  text-decoration:none; color:var(--texte-inverse);
}
.volet-liens a:first-child{border-top:1px solid var(--filet-sombre)}
.volet-liens a b{font-family:var(--serif); color:var(--eau); font-weight:700; min-width:1.1em}
.volet-cta{display:block; margin-top:var(--esp-l); background:var(--papier); color:var(--encre)}
.volet-cta:hover{background:#fff}
.volet-pied{margin-top:auto; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texte-inverse-2)}
.volet-pied b{color:var(--eau); font-weight:400}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section{padding:var(--esp-2xl) var(--esp-s)}
.section-int{max-width:var(--colonne); margin:0 auto}
.sur-encre{background:var(--encre); color:var(--texte-inverse)}
.sur-encre p{color:var(--texte-inverse-2)}
.sur-encre h2,.sur-encre h3,.sur-encre strong{color:var(--texte-inverse)}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{padding:var(--esp-2xl) var(--esp-s) var(--esp-xl)}
.hero-sombre{
  background:var(--encre); color:var(--texte-inverse);
  padding:clamp(2rem,4vw,4.5rem) var(--esp-s) var(--esp-xl);
}
.hero-sombre h1{color:#fff}
.hero-sombre .surtitre{color:var(--eau)}
.hero-sombre .hero-corps{color:var(--texte-inverse-2)}
.hero-sombre .hero-illu{color:#7E96B4}
.hero-devise{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--texte-inverse-2); margin-top:var(--esp-l);
}
.hero-devise b{color:var(--eau); font-weight:400}
.hero-grille{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--esp-xl); align-items:center}
.hero-illu{color:var(--ardoise); margin:0}
.hero-illu img{display:block; width:100%; height:auto; border-radius:var(--rayon)}
/* La phrase du cabinet sous la photo (elle était incrustée dans le visuel
   fourni ; ici elle est du vrai texte, dans la typographie du site). */
.hero-legende{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texte-inverse-2); margin-top:var(--esp-s)}
@media (max-width:63.9rem){.hero-grille{grid-template-columns:1fr}.hero-illu{display:none}}
.hero h1{max-width:22ch}
/* Titre de l'accueil (ordinateur) — décision Romain 03/09 : trois lignes
   posées à la main (« Votre expert MAISON / PISCINE – BÂTIMENT / 100 km autour
   de Béziers »), les trois métiers en capitales (les lettres de la marque). */
/* Trois lignes = un corps un cran plus sage que le h1 générique : mesuré,
   « 100 km autour de Béziers » (24 signes) et « PISCINE – BÂTIMENT » (en
   capitales) doivent tenir dans la colonne 7/12 (542px à 1024, 637px à 1280). */
@media (min-width:48rem){.hero h1.hero-titre-3l{max-width:none; font-size:clamp(2.1rem,.8rem + 3vw,3rem)}}
/* ⚠️ Bornée à l'ordinateur : sous 48rem c'est le titre court du téléphone qui
   vit (règle plus bas), et une règle plus spécifique ici lui volerait sa taille. */
.hero-titre-large{display:block}
.hero-mot{text-transform:uppercase; letter-spacing:.02em}
.hero-corps{font-size:var(--step-1); color:var(--texte-2); max-width:38rem; margin-top:var(--esp-s)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--esp-s); margin-top:var(--esp-m)}
.hero .ligne-eau{margin-top:var(--esp-xl)}

/* ── Hero sur TÉLÉPHONE — la réponse en deux secondes (décision Romain 02/09) ─
   L'ordinateur ne bouge pas d'un pixel : tout vit sous 48rem. Sur un S25
   (360px), le hero d'ordinateur = surtitre + 4 lignes de titre + 5 lignes de
   corps + 2 boutons + devise : un mur de texte. Ici : le DESSIN d'abord (il
   dit « maison + piscine + expert » sans un mot), un titre court qui NOMME le
   métier, la ligne d'eau. Le geste n°1 vit dans la barre fixe du bas — pas de
   bouton en double dans le hero. */
.hero-titre-poche{display:none}
@media (max-width:47.9rem){
  .hero-sombre{padding-top:var(--esp-xs); padding-bottom:var(--esp-l)}
  .hero .surtitre{font-size:.7rem; letter-spacing:.1em; gap:.6rem}
  .hero-grille{display:flex; flex-direction:column; gap:var(--esp-m)}
  /* La photo BORD À BORD, collée sous l'en-tête : sur un téléphone chaque
     pixel de large compte (S25 360 · iPhone 393 · Pro Max 430). Les marges
     négatives annulent la gouttière du hero (esp-s) et son air du haut
     (esp-xs) ; le triptyque 5:3 mesure donc 100vw × 60vw : 216px sur S25,
     236px sur iPhone, 258px sur Pro Max — le hero entier (photo + surtitre +
     titre + ligne d'eau) tient dans le premier écran de chacun (garde au banc). */
  .hero-illu{display:block; order:-1; width:auto;
    margin:calc(-1 * var(--esp-xs)) calc(-1 * var(--esp-s)) 0}
  .hero-illu img{border-radius:0; aspect-ratio:900/540; object-fit:cover}
  .hero-legende{display:none}
  .hero-titre-large{display:none}
  .hero-titre-poche{display:inline}
  .hero h1{font-size:clamp(1.9rem,1.2rem + 3.6vw,2.2rem); max-width:none; margin-bottom:0}
  /* ⚠️ BORNÉ AU HERO. Ces trois classes servent AUSSI dans des sections
     ordinaires (chapeau du blog, de Prestations, boutons du repli de la page
     Rendez-vous) : sans le préfixe .hero, elles y disparaissaient sur mobile —
     du contenu et des boutons perdus, invisibles sur ordinateur. */
  .hero .hero-corps,.hero .hero-actions,.hero .hero-devise{display:none}
  .hero .ligne-eau{margin-top:var(--esp-l)}
}

/* ── Triptyque M·P·B — les lettres-portes ──────────────────────────────── */
.portes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--esp-s)}
@media (max-width:47.9rem){.portes{grid-template-columns:1fr}}
.porte{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--filet); border-radius:var(--rayon);
  padding:var(--esp-m); text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color .2s;
}
@media (hover:hover){.porte:hover{border-color:var(--ardoise); transform:translateY(-2px)}
  .porte{transition:border-color .2s, transform .2s}
  .porte:hover .porte-lien{color:var(--eau-fonce)}}
.porte::after{
  content:attr(data-lettre); position:absolute; right:-.06em; top:-.22em;
  font-family:var(--serif); font-weight:700; font-size:9.5rem; line-height:1;
  color:var(--encre); opacity:.05; pointer-events:none;
}
.porte-lettre{
  position:relative; display:block; width:max-content;
  font-family:var(--serif); font-weight:700;
  font-size:var(--step-lettre); line-height:.9; letter-spacing:-.02em;
  color:var(--encre); margin-bottom:var(--esp-s);
}
.porte-lettre .vague-p{position:absolute; left:0; bottom:.08em; width:100%; height:auto; color:var(--eau); pointer-events:none}
.porte h3{font-family:var(--serif); font-size:var(--step-1); letter-spacing:-.01em}
.porte p{font-size:var(--step--1); color:var(--texte-2); flex:1}
.porte-lien{font-weight:600; font-size:var(--step--1); margin-top:var(--esp-s); align-self:flex-start}

/* ── Méthode — sommaire de rapport ─────────────────────────────────────── */
.etapes{list-style:none; margin:0; padding:0; counter-reset:etape;
  border-top:1px solid var(--filet)}
.etapes li{
  counter-increment:etape; display:grid; grid-template-columns:3.5rem 1fr;
  gap:var(--esp-s); padding:var(--esp-m) 0; border-bottom:1px solid var(--filet); margin:0;
}
.etapes li::before{
  content:counter(etape,decimal-leading-zero); font-family:var(--mono);
  font-size:1rem; color:var(--eau); padding-top:.2rem;
}
.etapes h3{margin-bottom:.25em}
.etapes p{font-size:var(--step--1); color:var(--texte-2)}

/* ── Preuve (fond encre) ───────────────────────────────────────────────── */
.fait-piscine{margin-bottom:var(--esp-xl)}
.fait-chiffre{
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.6rem,8vw,5rem); line-height:1.05; max-width:16ch;
}
.fait-pays{font-family:var(--mono); font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--eau); margin:var(--esp-s) 0}
.preuve-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--esp-l); margin-top:var(--esp-l)}
.preuve-grille:first-child{margin-top:0}
@media (max-width:63.9rem){.preuve-grille{grid-template-columns:1fr}}
.preuve-bloc{border-top:1px solid var(--filet-sombre); padding-top:var(--esp-s)}
.preuve-bloc h3{font-size:var(--step-0)}
.preuve-bloc p,.preuve-bloc li{font-size:var(--step--1); color:var(--texte-inverse-2)}
.preuve-bloc ol{margin:0; padding-left:1.4em}
.preuve-bloc ol li{margin-bottom:.35em}
.zone-villes{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.5rem 0 0; list-style:none}
.zone-villes li{
  font-size:var(--step--1); color:var(--texte-inverse-2); margin:0;
  border:1px solid var(--filet-sombre); border-radius:var(--rayon); padding:.25rem .6rem;
}

/* ── Tête de page expertise (M / P / B) ────────────────────────────────── */
.page-tete{display:grid; grid-template-columns:auto 1fr; gap:var(--esp-l); align-items:end}
/* Identité : les trois têtes de page (M/P/B) ont EXACTEMENT la même géométrie —
   titre sur deux lignes, coupure imposée (br.coupe), lettre au même corps. */
.page-tete h1{max-width:none; white-space:nowrap}
/* Le surtitre « M comme Maison » doit se lire en moins de deux secondes
   (Romain 03/09) : corps relevé, trait plus long, jamais le mono minuscule du
   reste du site. Cible la tête de page SEULE — les autres surtitres ne bougent
   pas. Placée APRÈS la media query du hero mobile pour gagner à poids égal. */
.page-tete .surtitre{
  font-size:clamp(.95rem,.85rem + .35vw,1.15rem); font-weight:600;
  letter-spacing:.16em; gap:1rem; margin-bottom:var(--esp-s);
}
.page-tete .surtitre::before{width:2.4rem; height:2px}
@media (max-width:47.9rem){
  .page-tete{grid-template-columns:1fr; gap:var(--esp-s)}
  .page-tete h1{white-space:normal}
  .page-tete h1 .coupe{display:none}
}
.page-lettre{
  position:relative; display:block; width:max-content;
  font-family:var(--serif); font-weight:700;
  font-size:var(--step-lettre-page); line-height:.85; letter-spacing:-.03em; color:var(--encre);
}
/* La lettre du logo est la star de la tête de page (retour Romain 03/09) :
   sur ordinateur elle monte à la hauteur du titre sur 3 lignes, jamais au-delà. */
.sur-encre .page-lettre{color:#fff}
.page-lettre .vague-p{position:absolute; left:0; bottom:.08em; width:100%; height:auto; color:var(--eau)}
.quand-liste{list-style:none; padding:0; margin:var(--esp-m) 0 0; display:grid; gap:.6rem}
@media (min-width:48rem){.quand-liste{grid-template-columns:1fr 1fr; gap:.6rem var(--esp-l)}}
.quand-liste li{
  margin:0; padding:.65rem 0 .65rem 1.4rem; position:relative;
  border-bottom:1px solid var(--filet); font-size:var(--step--1); color:var(--texte-2);
}
.quand-liste li::before{content:""; position:absolute; left:0; top:1.15rem;
  width:.55rem; height:.55rem; border-radius:50%; background:var(--eau)}

/* ── Illustrations au trait ────────────────────────────────────────────── */
.illustration{color:var(--ardoise); margin:var(--esp-m) 0}
.illustration .trait-eau{color:var(--eau)}

/* ── Prestations : fiches qui donnent le prix ET le geste ──────────────── */
.prestations{display:grid; gap:var(--esp-s); margin-top:var(--esp-m)}
.prestation{
  background:var(--surface); border:1px solid var(--filet); border-radius:var(--rayon);
  padding:var(--esp-m); transition:border-color .2s;
  display:flex; flex-direction:column; gap:var(--esp-s);
}
@media (hover:hover){.prestation:hover{border-color:var(--eau)}}
.prestation-corps{flex:1; min-width:0}
.prestation-corps h3{margin:0 0 .45rem; font-size:var(--step-1)}
.prestation-corps p{margin:0; font-size:var(--step--1); color:var(--texte-2)}
.prestation-cote{
  flex:none; display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:baseline; gap:.3rem .7rem;
  border-top:1px solid var(--filet); padding-top:var(--esp-s);
}
.prestation-prix-legende{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ardoise)}
.prestation-prix{font-family:var(--serif); font-weight:700; font-size:var(--step-2);
  color:var(--encre); line-height:1.05}
.prestation-prix--mot{font-size:var(--step-1)}
.prestation-note{font-size:.8rem; color:var(--texte-3)}
.prestation-cta{margin-left:auto; font-size:var(--step--1); font-weight:600;
  color:var(--eau-fonce); text-decoration:none; white-space:nowrap}
.prestation-cta:hover{text-decoration:underline}
@media (min-width:48rem){
  .prestation{flex-direction:row; align-items:stretch; gap:var(--esp-l); padding:var(--esp-m) var(--esp-l)}
  .prestation-cote{
    flex-direction:column; align-items:flex-start; gap:.2rem; min-width:12rem;
    border-top:0; border-left:1px solid var(--filet); padding:0 0 0 var(--esp-l); margin-left:auto;
  }
  .prestation-cta{margin-left:0; margin-top:auto; padding-top:.6rem}
}
/* ── La bascule sans / avec (décision Romain 03/09) ─────────────────────
   Le problème est nommé juste au-dessus (.quand-liste) ; ici on montre ce que
   l'expertise change. Deux colonnes, aucun encadré : c'est le filet du haut
   qui les sépare (gris pour « sans », eau pour « avec »). */
.bascule{display:grid; grid-template-columns:1fr 1fr; gap:var(--esp-l); margin-top:var(--esp-m)}
@media (max-width:47.9rem){.bascule{grid-template-columns:1fr; gap:var(--esp-m)}}
.bascule-bloc{border-top:2px solid var(--filet); padding-top:var(--esp-s)}
.bascule-avec{border-top-color:var(--eau)}
.bascule-bloc h3{font-size:var(--step-0); margin-bottom:.5rem}
.bascule-sans h3{color:var(--texte-2)}
.bascule-bloc ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.bascule-bloc li{margin:0; padding-left:1.4rem; position:relative;
  font-size:var(--step--1); color:var(--texte-2)}
.bascule-sans li::before{content:""; position:absolute; left:0; top:.62rem;
  width:.55rem; height:2px; background:var(--ardoise)}
.bascule-avec li::before{content:""; position:absolute; left:0; top:.45rem;
  width:.55rem; height:.55rem; border-radius:50%; background:var(--eau)}

.portes-suite{margin-top:var(--esp-m); font-size:var(--step--1); color:var(--texte-2)}
.sur-encre .portes-suite{color:var(--texte-inverse-2)}

/* ── Interventions / avis (cockpit) ────────────────────────────────────── */
.galerie{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:var(--esp-s); margin-top:var(--esp-m)}
.galerie figure{margin:0; background:var(--surface); border:1px solid var(--filet); border-radius:var(--rayon); overflow:hidden}
.galerie img{width:100%; aspect-ratio:4/3; object-fit:cover}
.galerie figcaption{padding:var(--esp-xs) var(--esp-s); font-size:var(--step--1); color:var(--texte-2)}
.avis-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:var(--esp-s); margin-top:var(--esp-m)}
.avis-carte{background:var(--surface); border:1px solid var(--filet); border-radius:var(--rayon); padding:var(--esp-m)}
.avis-etoiles{color:var(--eau); font-size:.9rem; letter-spacing:.15em; margin-bottom:.5rem}
.avis-carte blockquote{margin:0 0 .75rem; font-size:var(--step--1); color:var(--texte-2)}
.avis-carte cite{font-style:normal; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texte-3)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--filet); margin-top:var(--esp-m)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{
  cursor:pointer; padding:var(--esp-s) 0; font-weight:600; font-size:var(--step-0);
  list-style:none; display:flex; justify-content:space-between; gap:var(--esp-s);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--eau); flex:none}
.faq details[open] summary::after{content:"–"}
.faq details>p,.faq details>ul{padding-bottom:var(--esp-s); font-size:var(--step--1); color:var(--texte-2)}

/* ── Contact / formulaire ──────────────────────────────────────────────── */
.contact-grille{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:var(--esp-xl)}
@media (max-width:63.9rem){.contact-grille{grid-template-columns:1fr}}
.champ{margin-bottom:var(--esp-s)}
.champ label{display:block; font-weight:600; font-size:var(--step--1); margin-bottom:.35rem}
.champ .optionnel{font-weight:400; color:var(--texte-3)}
.champ input,.champ select,.champ textarea{
  width:100%; font:inherit; font-size:var(--step--1); color:var(--texte);
  background:var(--surface); border:1px solid var(--filet); border-radius:var(--rayon);
  padding:.8rem .9rem;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:2px solid var(--eau); outline-offset:0; border-color:var(--eau);
}
.champ textarea{min-height:9rem; resize:vertical}
.champ-erreur{display:none; color:var(--erreur); font-size:var(--step--1); margin-top:.3rem}
.champ.invalide input,.champ.invalide select,.champ.invalide textarea{border-color:var(--erreur)}
.champ.invalide .champ-erreur{display:block}
/* pot de miel — hors écran, jamais display:none (certains robots le détectent) */
.champ-website{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.encart{border-radius:var(--rayon); padding:var(--esp-s) var(--esp-m); margin-top:var(--esp-s); font-size:var(--step--1)}
.encart-ok{background:var(--ok-fond); border:1px solid var(--ok); color:#14532D}
.encart-erreur{background:var(--erreur-fond); border:1px solid var(--erreur); color:#7C2D12}
.encart .btn{margin-top:var(--esp-xs)}
.contact-infos h3{font-family:var(--serif); font-size:var(--step-1)}
.contact-infos p{font-size:var(--step--1); color:var(--texte-2)}
.contact-note{font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ardoise); margin-top:var(--esp-s)}

/* ── Réservation (terrain prêt — visible quand le module RDV répond) ───── */
.rdv-panneau{margin-top:var(--esp-m); border:1px solid var(--filet); border-radius:var(--rayon);
  background:var(--surface); padding:var(--esp-m)}
.rdv-types,.rdv-jours,.rdv-heures{display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 var(--esp-s)}
.rdv-puce{
  font:inherit; font-size:var(--step--1); cursor:pointer; color:var(--texte);
  background:var(--papier); border:1px solid var(--filet); border-radius:var(--rayon);
  padding:.5rem .9rem;
}
.rdv-puce[aria-pressed="true"]{background:var(--encre); color:var(--texte-inverse); border-color:var(--encre)}
.rdv-legende{font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ardoise); margin:var(--esp-s) 0 .25rem}

/* ── Barre mobile fixe — le geste n°1 sous le pouce ────────────────────── */
.barre-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:var(--encre); padding:.6rem var(--esp-s);
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.barre-mobile .btn{flex:1; padding:.85rem 1rem}
.barre-mobile .btn-principal{background:var(--orange-doux); color:var(--encre)}
.barre-mobile .btn-principal:hover{background:var(--orange-doux-vif)}
.barre-mobile .btn-contour{color:var(--texte-inverse); border-color:var(--filet-sombre)}
@media (max-width:47.9rem){
  .barre-mobile{display:flex}
  body{padding-bottom:4.5rem}
  .barre-mobile.masquee{display:none}
}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied{background:var(--encre); color:var(--texte-inverse); padding:var(--esp-xl) var(--esp-s)
  calc(var(--esp-xl) + 3.5rem)}
@media (min-width:48rem){.pied{padding-bottom:var(--esp-xl)}}
.pied-int{max-width:var(--colonne); margin:0 auto}
.pied-marque{display:flex; align-items:center; gap:var(--esp-s); margin-bottom:var(--esp-m)}
.pied-marque img{width:64px; height:64px; background:#fff; border-radius:var(--rayon); padding:4px}
.pied-devise{font-family:var(--mono); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase}
.pied-devise b{color:var(--eau); font-weight:400}
.pied-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--esp-l);
  border-top:1px solid var(--filet-sombre); padding-top:var(--esp-m)}
@media (max-width:47.9rem){.pied-grille{grid-template-columns:1fr}}
.pied h4{font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texte-inverse-2); margin-bottom:.75rem}
.pied ul{list-style:none; padding:0; margin:0}
.pied li{margin-bottom:.4rem; font-size:var(--step--1); color:var(--texte-inverse-2)}
.pied a{color:var(--texte-inverse-2); text-decoration:none}
.pied a:hover{color:var(--texte-inverse)}
.pied-mention{margin-top:var(--esp-m); font-size:.8rem; color:var(--texte-inverse-2); opacity:.7}
/* Zone d'intervention — une ligne pour les gens ET pour les moteurs (référencement local) */
.pied-zone{margin:var(--esp-l) 0 0; font-size:var(--step--1); line-height:1.6; color:var(--texte-inverse-2); max-width:none}
.pied-zone strong{color:var(--texte-inverse); font-weight:600}
.nobr{white-space:nowrap}

/* ── Pages légales ─────────────────────────────────────────────────────── */
.page-legale{max-width:var(--texte-mesure)}
.page-legale h2{font-size:var(--step-1); margin-top:var(--esp-l)}
.page-legale p,.page-legale li{font-size:var(--step--1); color:var(--texte-2)}
.a-completer{font-style:italic; color:var(--a-completer); background:var(--a-completer-fond); padding:0 4px}
.note-relecture{border:1px solid var(--filet); border-left:3px solid var(--eau);
  border-radius:var(--rayon); background:var(--surface); padding:var(--esp-s) var(--esp-m);
  font-size:var(--step--1); color:var(--texte-2); margin-top:var(--esp-l)}

/* ── Rythme des surfaces (Romain 03/09 : « le même fond, c'est terne ») ───────
   RÈGLE : jamais deux blocs consécutifs sur le même fond — footer compris.
   Trois surfaces, et seulement celles de la charte : papier (le défaut),
   blanc (.sur-blanc), encre (.sur-encre). Papier↔blanc est COUSU par un filet
   1px — c'est la transition, dans la langue du site (jamais un dégradé).
   Papier↔encre : l'arête franche, le contraste EST la transition.
   Sur blanc, les cartes s'inversent (papier sur blanc) pour rester lisibles ;
   sur encre, les filets passent en filet-sombre. Le banc vérifie la règle. */
.sur-blanc{background:var(--surface); border-top:1px solid var(--filet); border-bottom:1px solid var(--filet)}
.sur-blanc .porte,.sur-blanc .prestation,.sur-blanc .avis-carte,.sur-blanc .galerie figure{background:var(--papier)}
.sur-blanc .rdv-puce{background:var(--surface)}
.sur-encre .etapes,.sur-encre .etapes li,.sur-encre .quand-liste li,.sur-encre .faq,.sur-encre .faq details{border-color:var(--filet-sombre)}
.sur-encre .etapes p,.sur-encre .quand-liste li{color:var(--texte-inverse-2)}

/* ── Révélation au scroll ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .revele{opacity:0; transform:translateY(12px);
    transition:opacity .45s ease-out,transform .45s ease-out}
  .revele.visible{opacity:1; transform:none}
}

/* ── Impression ────────────────────────────────────────────────────────── */
@media print{
  .entete,.barre-mobile,.volet,.pied-grille{display:none}
  body{background:#fff}
}

/* ── Page Prestations : groupes M/P/B ─────────────────────────────────── */
.groupe-presta{margin-top:var(--esp-xl)}
.groupe-presta:first-of-type{margin-top:var(--esp-m)}
.groupe-tete{display:flex; align-items:baseline; gap:.9rem; border-bottom:2px solid var(--encre); padding-bottom:.5rem}
.groupe-tete .lettre-puce{
  font-family:var(--serif); font-weight:700; font-size:var(--step-2);
  color:var(--eau); line-height:1;
}
.groupe-tete h2{margin:0}
.groupe-note{font-size:var(--step--1); color:var(--texte-3); margin-top:.5rem}

/* ── Blog : liste d'articles ──────────────────────────────────────────── */
.articles{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:var(--esp-s); margin-top:var(--esp-m)}
.article-carte{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--filet); border-radius:var(--rayon); overflow:hidden;
  text-decoration:none; color:inherit; transition:border-color .2s;
}
@media (hover:hover){.article-carte:hover{border-color:var(--ardoise)}}
.article-carte img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article-carte-corps{padding:var(--esp-m); display:flex; flex-direction:column; gap:.55rem; flex:1}
.article-date{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-3)}
.article-carte h3{margin:0; font-size:var(--step-1); line-height:1.25}
.article-carte p{margin:0; font-size:var(--step--1); color:var(--texte-2)}
.article-carte .article-lire{margin-top:auto; padding-top:.5rem; font-size:var(--step--1); font-weight:600; color:var(--eau-fonce)}

/* ── Blog : lecture d'un article ──────────────────────────────────────── */
.article-lecture{max-width:46rem}
.article-lecture .article-cover{width:100%; border-radius:var(--rayon); margin:var(--esp-m) 0 0}
.article-corps{margin-top:var(--esp-m)}
.article-corps p{color:var(--texte-2)}
.article-corps h2,.article-corps h3{margin-top:var(--esp-l)}
.article-corps ul,.article-corps ol{color:var(--texte-2); padding-left:1.2rem}
.article-corps li{margin:.35rem 0}
.article-corps blockquote{
  margin:var(--esp-m) 0; padding:.2rem 0 .2rem var(--esp-m);
  border-left:3px solid var(--eau); color:var(--texte-2); font-style:italic;
}
.article-retour{display:inline-block; margin-bottom:var(--esp-m); font-size:var(--step--1); font-weight:600; color:var(--eau-fonce); text-decoration:none}
.article-retour:hover{text-decoration:underline}