/* @generated fetch_fonts.py : debut */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* @generated fetch_fonts.py : fin */

/* Police de repli calee sur les metriques de Manrope.
   ATTENTION : a garder HORS du bloc ci-dessus, que fetch_fonts.py reecrit
   entierement a chaque lancement.

   Le probleme qu'elle resout : en font-display:swap, le texte s'affiche
   d'abord dans la police systeme, puis bascule sur Manrope. Manrope est
   3,2 % plus large qu'Arial, ce qui suffit a faire passer le paragraphe
   d'accroche de la home de 4 a 5 lignes : tout ce qui suit descend de 30 px
   sous les yeux du visiteur, au moment ou il commence a lire. Mesure du
   11/08/2026 en 4G lente : CLS 0,127, la ou Google demande moins de 0,1.

   size-adjust ramene le repli a la largeur de Manrope, donc au meme nombre
   de lignes, donc a un CLS nul. Aucune requete reseau : local() ne fait que
   piocher une police deja installee. Les line-height du site sont sans unite,
   la hauteur de ligne ne depend donc que de font-size et les overrides
   verticaux sont inutiles ici.

   Le ratio se remesure en comparant la largeur d'un meme texte a 100 px dans
   les deux polices. A refaire si on change de police de corps. */
@font-face {
  font-family: 'Manrope repli';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 103.18%;
  font-display: swap;
}

/* =====================================================================
   Lemeunier Rénovation — Direction artisan moderne (réf. BM Rénov)
   Bricolage Grotesque (titres) + Manrope (corps)
   Orange #C4531A · Charbon chaud #1E1B16 · Crème #F6F2EA
   ===================================================================== */

:root{
  --brand:#C4531A; --brand-hover:#A6440F; --brand-light:#EF7F1A;
  --ink:#23201B; --charcoal:#1E1B16;
  --soft:#5B544A; --soft-2:#6D6658;
  --paper:#F6F2EA; --paper-alt:#ECE4D6; --paper-line:#DBD2C3;
  --white:#FFFFFF;
  --num:#A37C4F;                       /* numéros / accents bois */
  --num-text:#7F613E;                  /* même bois, en petit corps */

  /* Deux variantes sombres des couleurs d'accent, réservées au TEXTE posé sur
     fond clair. L'orange de marque (#C4531A) plafonne à 4,09 sur le crème et
     3,62 sur le crème foncé : sous les 4,5 exigés pour du petit corps, donc
     illisible pour un œil qui baisse. Les aplats, filets et fonds gardent
     --brand : sur un aplat c'est le blanc posé dessus qui compte, et il passe.
     Mesuré le 11/08/2026, teinte et saturation inchangées, seule la
     luminosité descend. */
  --brand-text:#AB4817;                /* 5,12 sur crème · 4,53 sur crème foncé */
  --light-1:#F4EFE6; --light-2:#CFC6B7; --light-3:#A69C8B;
  --line-light:rgba(244,239,230,.16);

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --sans:"Manrope", "Manrope repli", system-ui, -apple-system, sans-serif;
  --site:1400px;
  --pad:clamp(1.25rem, 4vw, 3.25rem);
  --sec:clamp(4rem, 7.5vw, 5.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
::selection{ background:var(--brand); color:#fff; }

.container{ width:100%; max-width:var(--site); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); }
.section--white{ background:var(--white); }
.section--paper{ background:var(--paper); }
.section--alt{ background:var(--paper-alt); }
.section--dark{ background:var(--charcoal); color:var(--light-1); }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.7rem 1rem; }
.skip-link:focus{ left:0; }

/* -------- Titres & eyebrows -------- */
h1,h2,h3{ font-family:var(--display); margin:0; font-weight:700; line-height:1.04; letter-spacing:-.012em; text-transform:uppercase; }
.eyebrow, .sec-eyebrow{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-text);
}
.eyebrow-line{ width:2rem; height:1px; background:var(--brand); }
.sec-eyebrow--light{ color:var(--brand-light); }
/* numéro de section : donne un ordre de lecture à la page */
.sec-no{ color:var(--num-text); padding-right:.7rem; border-right:1px solid var(--paper-line); font-variant-numeric:tabular-nums; }
.section--dark .sec-no{ color:var(--light-3); border-right-color:var(--line-light); }

/* coup de rouleau sous un mot-clé de titre — la signature du métier.
   isolation:isolate crée le contexte d'empilement : sans lui, le z-index:-1
   ferait passer la bande derrière le fond de la section, donc invisible. */
.stroke{ position:relative; display:inline-block; isolation:isolate; }
.stroke::after{
  content:""; position:absolute; z-index:-1; left:-.08em; right:-.08em;
  bottom:.02em; height:.46em;          /* ~moitié dans le vide, ~moitié derrière les lettres */
  background:var(--brand); opacity:.38; transform:skewX(-12deg); border-radius:1px;
}
.stroke--light::after{ background:var(--brand-light); opacity:.55; }   /* sur fond charbon, il faut plus de matière */

.sec-head{ margin-bottom:clamp(2.2rem,4vw,3rem); }
.sec-title{ font-size:clamp(1.85rem,3.6vw,2.75rem); color:var(--ink); margin-top:1rem; }
.section--dark .sec-title{ color:#fff; }
.sec-intro{ margin-top:1.1rem; color:var(--soft); font-size:1.05rem; max-width:60ch; line-height:1.7; }
.sec-intro em{ color:var(--soft-2); font-style:italic; }
.sec-head--row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--paper-line); padding-bottom:1.8rem; }
.sec-head--row .sec-title{ margin-top:.9rem; }
.sec-head-aside{ max-width:26rem; color:var(--soft); font-size:.98rem; }
.sec-head--border{ border-bottom:1px solid var(--paper-line); padding-bottom:1.8rem; }

/* -------- Boutons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 2rem; border-radius:3px; border:1.5px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn span{ transition:transform .2s ease; }
.btn:hover span{ transform:translateX(3px); }
.btn{ transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.btn--primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn--primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(196,83,26,.9); }
.btn--outline{ background:transparent; color:var(--ink); border-color:rgba(35,32,27,.25); }
.btn--outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.btn--sm{ padding:.7rem 1.2rem; font-size:.72rem; }
.btn--block{ width:100%; }

/* -------- Header -------- */
.hdr{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--paper-line); transition:box-shadow .3s ease; }
.hdr.scrolled{ box-shadow:0 6px 24px rgba(35,32,27,.09); }
.hdr-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.2rem; padding-block:.55rem; }
.brand{ grid-column:2; grid-row:1; }
.brand img{ height:clamp(56px,5.2vw,74px); width:auto; transition:height .3s ease; }
.hdr.scrolled .brand img{ height:56px; }
.nav{ grid-column:1; grid-row:1; justify-self:start; display:flex; align-items:center; gap:clamp(1.1rem,1.6vw,1.9rem); }
.nav a{ position:relative; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); padding-block:.4rem; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--brand); transition:width .3s ease; }
.nav a:hover{ color:var(--brand-text); }
.nav a:hover::after{ width:100%; }
.hdr-actions{ grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:1rem; }
.hdr-actions .btn{ white-space:nowrap; }
.tel{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.92rem; color:var(--ink); white-space:nowrap; }
.tel svg{ color:var(--brand); }
.tel:hover{ color:var(--brand-text); }

/* socials */
.socials{ display:flex; align-items:center; gap:.6rem; }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid; border-radius:3px; transition:background .2s, color .2s, border-color .2s; }
.socials--dark a{ border-color:rgba(35,32,27,.16); color:var(--ink); }
.socials--dark a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.socials--light a{ border-color:var(--line-light); color:var(--light-1); }
.socials--light a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

.burger{ display:none; grid-column:1; grid-row:1; justify-self:start; flex-direction:column; gap:5px; width:44px; height:40px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--paper-line); border-radius:3px; cursor:pointer; }
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; }

/* Menu mobile */
.mobile-menu{ position:fixed; inset:0; z-index:130; pointer-events:none; }
.mm-overlay{ position:absolute; inset:0; background:rgba(30,27,22,.5); opacity:0; transition:opacity .3s; }
.mm-panel{ position:absolute; top:0; left:0; height:100%; width:min(82vw,320px); background:var(--white); box-shadow:20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(-100%); transition:transform .3s ease; padding:2rem 1.6rem; overflow-y:auto; }
.mobile-menu.open{ pointer-events:auto; }
.mobile-menu.open .mm-overlay{ opacity:1; }
.mobile-menu.open .mm-panel{ transform:translateX(0); }
.mm-close{ position:absolute; top:1rem; right:1.2rem; width:38px; height:38px; font-size:1.8rem; line-height:1; background:transparent; border:1px solid var(--paper-line); border-radius:3px; color:var(--ink); cursor:pointer; }
.mm-logo{ height:56px; width:auto; margin-bottom:1.5rem; }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{ padding:1rem 0; border-bottom:1px solid var(--paper-line); font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.mobile-menu nav a:hover{ color:var(--brand-text); }
.mm-cta{ margin-top:1.5rem; }
body.nav-open{ overflow:hidden; }

/* -------- Hero -------- */
.hero{ background:var(--paper); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(2rem,4vw,4rem); align-items:center; padding-block:clamp(3rem,6vw,6.5rem); }
.hero .eyebrow{ margin-bottom:1.6rem; }
.hero h1{ font-size:clamp(2.15rem,4.4vw,3.35rem); font-weight:800; line-height:1.03; letter-spacing:-.02em; color:var(--ink); }
.lead{ margin-top:1.5rem; color:var(--soft); font-size:1.1rem; line-height:1.7; max-width:36em; }
.lead strong{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin-top:2.2rem; font-size:.82rem; font-weight:600; color:var(--soft-2); }
.hero-trust .sep{ width:1px; height:15px; background:var(--paper-line); }
.hero-media{ position:relative; }
/* aspect-ratio plutôt qu'une hauteur fixe : le cadre suit le format de la photo
   (4/3 paysage aujourd'hui) au lieu de la recadrer sauvagement */
.hero-media img{ position:relative; z-index:1; width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; border-radius:4px; }
/* cadre décalé : de la profondeur sans surcharger */
.hero-media::after{ content:""; position:absolute; z-index:0; inset:24px -24px -24px 24px; border:1.5px solid rgba(196,83,26,.5); border-radius:4px; pointer-events:none; }

/* -------- Placeholders (photos à venir) -------- */
.ph{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 20px, rgba(35,32,27,.022) 20px 21px),
    var(--paper-alt);
  border:1px solid var(--paper-line); color:var(--soft); }
.ph--alt{ background:
    repeating-linear-gradient(135deg, transparent 0 20px, rgba(35,32,27,.028) 20px 21px),
    #E4DAC9; }
.ph-tag{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:.92rem; letter-spacing:.01em; color:var(--ink); padding-inline:1rem; }
.ph-note{ font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--num); }

/* -------- Avant / Après -------- */
.ba{ max-width:900px; margin:0 auto clamp(2.4rem,4.5vw,3.4rem); }
.ba-frame{ position:relative; width:100%; aspect-ratio:4/3; border-radius:4px; overflow:hidden; border:1px solid var(--paper-line); user-select:none; touch-action:pan-y; background:var(--paper-alt); }
.ba-side{ position:absolute; inset:0; }
.ba-before{ z-index:2; border-right:3px solid #fff; overflow:hidden; }
.ba-side img{ width:100%; height:100%; object-fit:cover; }
/* le volet « avant » est rogné en largeur : son image garde la largeur du cadre
   (fixée en JS) pour rester alignée avec l'image « après » dessous */
.ba-before .ba-inner{ position:absolute; top:0; left:0; height:100%; }
.ba-before .ba-inner img{ height:100%; }
.ba-tag{ position:absolute; top:1rem; z-index:5; padding:.42rem .8rem; border-radius:2px; background:rgba(30,27,22,.82); color:#fff;
  font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(3px); }
.ba-before .ba-tag{ left:1rem; }
.ba-after .ba-tag{ right:1rem; background:rgba(196,83,26,.9); }
.ba-side .ph-tag{ top:calc(50% - .9rem); }
.ba-side .ph-note{ top:calc(50% + .7rem); }
.ba-range{ position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-handle{ position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--brand); border:3px solid #fff; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.3); pointer-events:none; }
.ba-caption{ margin-top:.9rem; font-size:.9rem; color:var(--soft-2); }
.ba-caption strong{ color:var(--brand-text); font-weight:700; }

/* -------- Galerie (grille régulière, 2 lignes de 4) -------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.4vw,1rem); }
.gallery-item{ position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:var(--paper-alt); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.gallery-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2rem .9rem .85rem; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:.82rem; line-height:1.25; letter-spacing:.01em; color:#fff; background:linear-gradient(transparent, rgba(20,18,14,.45) 42%, rgba(20,18,14,.92)); pointer-events:none; }
/* filet + catégorie : la vignette annonce la prestation avant même le clic */
.gi-cat{ display:block; font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.16em; color:var(--brand-light); margin-bottom:.3rem; }
.gi-cat::before{ content:""; display:inline-block; width:.85rem; height:1px; background:var(--brand-light); vertical-align:middle; margin-right:.45rem; }
.gallery-item.ph{ display:flex; }

/* bouton d'ouverture de la lightbox : couvre toute la vignette */
.gallery-btn{ position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-btn::after{ content:""; position:absolute; inset:0; background:rgba(196,83,26,0); transition:background .3s ease; }
.gallery-item:hover .gallery-btn::after{ background:rgba(196,83,26,.14); }
/* pastille « + » : indique que la photo s'agrandit */
.gallery-btn::before{ content:"+"; position:absolute; z-index:1; top:.6rem; right:.6rem; display:grid; place-items:center;
  width:30px; height:30px; border-radius:2px; background:rgba(20,18,14,.55); backdrop-filter:blur(3px);
  font-family:var(--sans); font-size:1.25rem; font-weight:400; line-height:1; color:#fff;
  opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease, background .25s ease; }
.gallery-item:hover .gallery-btn::before,
.gallery-btn:focus-visible::before{ opacity:1; transform:none; background:var(--brand); }
.gallery-btn:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }
/* en dessous de 900px, 4 colonnes deviennent illisibles : on passe à 2 (pas de 3,
   qui laisserait une dernière ligne dépareillée avec 8 photos) */
@media (max-width:900px){ .gallery{ grid-template-columns:1fr 1fr; } }

/* -------- Lightbox -------- */
.lb{ position:fixed; inset:0; z-index:150; display:none; place-items:center; background:rgba(20,18,14,.94); padding:clamp(1rem,4vw,3rem); }
.lb.open{ display:grid; }
.lb-fig{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:.9rem; }
.lb-fig img{ max-width:100%; max-height:calc(100vh - 9rem); width:auto; height:auto; margin-inline:auto; object-fit:contain; border-radius:3px; }
.lb-cap{ text-align:center; font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--light-2); }
.lb-btn{ position:absolute; display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(244,239,230,.28); background:rgba(30,27,22,.6); color:var(--light-1); cursor:pointer; border-radius:3px; transition:background .2s, border-color .2s; }
.lb-btn:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.lb-close{ top:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem); }
.lb-prev{ left:clamp(.5rem,2vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(.5rem,2vw,1.6rem); top:50%; transform:translateY(-50%); }
body.lb-open{ overflow:hidden; }

/* -------- Prestations (service rows) -------- */
.services{ margin-top:.5rem; }
.srv-row{ display:grid; grid-template-columns:70px 1.15fr 1.85fr auto; gap:1rem 2rem; align-items:center; padding-block:1.7rem; border-bottom:1px solid var(--paper-line); transition:padding-left .25s ease; }
.srv-row:hover{ padding-left:.8rem; }
.srv-num{ font-family:var(--display); font-weight:700; font-size:1.7rem; color:var(--num); transition:color .2s; }
.srv-row:hover .srv-num{ color:var(--brand); }
.srv-name{ font-size:clamp(1.2rem,2.2vw,1.65rem); color:var(--ink); transition:color .2s; }
.srv-row:hover .srv-name{ color:var(--brand-text); }
.srv-desc{ color:var(--soft); font-size:.98rem; line-height:1.6; }
.srv-arrow{ font-size:1.3rem; color:var(--brand-text); opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s; }
.srv-row:hover .srv-arrow{ opacity:1; transform:translateX(0); }

/* -------- Atelier -------- */
.about-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,4.5vw,4rem); align-items:center; }
/* variante inversée : la photo passe à droite (utilisée sur L'atelier) */
.about-grid--rev{ grid-template-columns:1.18fr .82fr; }
.about-media .ph--portrait{ aspect-ratio:4/5; border-radius:4px; }
.about-photo{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 35%; border-radius:4px; }
/* une photo paysage recadrée en 4/5 perdrait ses bords : le camion floqué y perdrait son texte */
.about-photo--wide{ aspect-ratio:4/3; object-position:50% 50%; }
.about-sign{ display:flex; align-items:center; gap:1rem; margin-top:1.3rem; }
.about-sign-line{ width:2rem; height:1px; background:var(--brand); flex-shrink:0; }
.about-sign strong{ display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.05rem; color:var(--ink); line-height:1.2; }
.about-sign small{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft-2); margin-top:.25rem; }
.about-body > p{ color:var(--soft); font-size:1.03rem; line-height:1.75; margin-top:1rem; }
.about-body > p strong{ color:var(--ink); font-weight:600; }
.about-body .sec-title{ margin-top:1rem; }
.stats{ display:flex; border-top:1px solid var(--paper-line); margin:2rem 0; }
.stat{ flex:1; padding:1.5rem 0; }
.stat + .stat{ border-left:1px solid var(--paper-line); padding-left:1.4rem; }
.stat{ position:relative; }
.stat::before{ content:""; position:absolute; top:-1px; left:0; width:26px; height:2px; background:var(--brand); }
.stat + .stat::before{ left:1.4rem; }
.stat-num{ font-family:var(--display); font-weight:800; font-size:2.3rem; line-height:1; color:var(--ink); }
.stat-unit{ font-size:1.3rem; color:var(--brand-text); }
.stat-lbl{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--soft-2); margin-top:.6rem; }
.sec-more{ margin-top:1.6rem; }
.text-link{ display:inline-flex; align-items:center; gap:.5rem; color:var(--brand-text); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.text-link span{ transition:transform .2s; }
.text-link:hover span{ transform:translateX(4px); }

/* -------- Zone -------- */
.zone-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.zone-copy .sec-title{ margin-top:1rem; }
.zone-copy > p{ color:var(--soft); margin:1.1rem 0 1.8rem; max-width:32em; line-height:1.7; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ background:var(--white); border:1px solid var(--paper-line); padding:.7rem 1rem; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.chip--base{ border-color:var(--brand-text); color:var(--brand-text); }
/* chip cliquable : sert de sommaire d'ancres en haut des pages internes */
a.chip{ transition:background .2s, color .2s, border-color .2s; }
a.chip:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.chips--nav{ margin-bottom:clamp(2rem,4vw,3rem); }
.zone-map-wrap{ width:100%; }
/* isolate : les panes Leaflet montent à z-index 400-1000 et passeraient devant le header */
#zone-map{ position:relative; z-index:0; isolation:isolate; width:100%; height:clamp(320px,40vw,480px); border:1px solid var(--paper-line); background:var(--paper); }
.zone-map-note{ display:flex; align-items:center; gap:.6rem; margin-top:.8rem; font-size:.8rem; color:var(--soft-2); }
.zone-map-note .dot{ width:13px; height:13px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.2); flex-shrink:0; }

/* -------- FAQ -------- */
.faq{ margin-top:.5rem; }
.qa{ border-bottom:1px solid var(--paper-line); padding-block:1.5rem; }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.05rem,1.7vw,1.3rem); letter-spacing:-.01em; color:var(--ink); }
.qa summary::-webkit-details-marker{ display:none; }
.qa .plus{ flex-shrink:0; font-family:var(--sans); font-weight:400; font-size:1.6rem; line-height:1; color:var(--brand); transition:transform .25s ease; }
.qa[open] .plus{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--brand-text); }
.qa p{ margin:1rem 0 0; color:var(--soft); line-height:1.7; max-width:70ch; }

/* -------- Devis (sombre) -------- */
.devis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); align-items:start; }
.devis-lead{ color:var(--light-2); margin-top:1.1rem; line-height:1.7; max-width:32em; }
.devis-contact{ margin-top:2rem; border-top:1px solid var(--line-light); }
.dc-line{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 0; border-bottom:1px solid var(--line-light); }
.dc-k{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--light-3); }
.dc-v{ font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--light-1); }
.dc-v--sm{ font-size:1.05rem; word-break:break-word; }
a.dc-line:hover .dc-v{ color:var(--brand-light); }
.dc-social{ padding-top:1.1rem; display:flex; flex-direction:column; gap:.8rem; }

/* Formulaire */
.form{ background:var(--paper); color:var(--ink); border-radius:4px; padding:clamp(1.5rem,3vw,2.3rem); }
.hp{ position:absolute; left:-9999px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; margin-bottom:1rem; }
.field label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--soft-2); margin-bottom:.5rem; }
.field .req{ color:var(--brand-text); }
.field input,.field select,.field textarea{ font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--white); border:1px solid #CFC7B8; border-radius:3px; padding:.85rem .9rem; width:100%; transition:border-color .18s; }
.field input::placeholder,.field textarea::placeholder{ color:#A69E90; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); }
.field textarea{ resize:vertical; min-height:100px; }
.form .btn{ margin-top:.4rem; }
.form-note{ font-size:.76rem; color:var(--soft-2); margin-top:.9rem; line-height:1.5; }
.form-note a{ color:var(--brand-text); text-decoration:underline; text-underline-offset:2px; }
.form-status{ margin-top:1rem; padding:.85rem 1rem; border-radius:3px; font-size:.9rem; font-weight:600; text-align:center; }
.form-status.ok{ background:var(--brand); color:#fff; }
.form-status.err{ background:#B4281B; color:#fff; }

/* -------- Footer -------- */
.footer{ background:var(--charcoal); color:var(--light-2); padding-top:clamp(3rem,5vw,4.5rem); }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.8rem; border-bottom:1px solid var(--line-light); }
.footer-logo{ height:60px; width:auto; margin-bottom:1.2rem; }
.footer-brand p{ font-size:.92rem; max-width:34ch; line-height:1.65; }
.footer-brand .socials{ margin-top:1.3rem; }
.footer-col h2{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--light-3); margin-bottom:1.1rem; }
.footer-col a{ display:block; color:var(--light-1); font-size:.92rem; padding:.32rem 0; transition:color .2s; }
.footer-col a:hover{ color:var(--brand-light); }
.footer-tel{ font-family:var(--display); font-weight:700; font-size:1.35rem; margin-bottom:.5rem; }
.footer-contact p{ margin-top:.8rem; font-size:.9rem; color:var(--light-2); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; padding-block:1.5rem; font-size:.8rem; color:var(--light-3); }
.footer-bottom a{ text-decoration:underline; text-underline-offset:2px; }
.footer-bottom a:hover{ color:var(--brand-light); }

/* -------- FAB -------- */
.fab{ position:fixed; right:16px; bottom:16px; z-index:90; display:none; width:56px; height:56px; border-radius:50%; background:var(--brand); color:#fff; place-items:center; box-shadow:0 12px 26px -8px rgba(196,83,26,.7); }

/* -------- Reveal -------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
/* la galerie se dévoile en cascade, colonne après colonne */
.gallery .reveal:nth-child(4n+2){ transition-delay:.07s; }
.gallery .reveal:nth-child(4n+3){ transition-delay:.14s; }
.gallery .reveal:nth-child(4n+4){ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } }

/* =====================================================================
   Effets (demande client du 10/08/2026 : « donner plus de vie »)
   Quatre effets, tous en dégradation propre : un navigateur qui ne sait
   pas les jouer affiche le site tel qu'avant, jamais cassé.
   Rappel : l'aperçu photo au survol des prestations a été testé et refusé
   en juillet 2026, ne pas le reproposer.
   ===================================================================== */

/* -------- 1. Le coup de rouleau se trace au scroll -------- */
/* La bande orange sous les mots clés était peinte d'avance. Elle se trace
   maintenant de gauche à droite quand le titre entre dans l'écran, ce qui
   imite le geste du métier. transform-origin:left, sinon elle s'ouvre par
   le milieu et ça ne ressemble plus à rien.
   La classe .js-anim est posée par main.js : sans JavaScript, la bande
   reste peinte comme avant plutôt que de rester invisible. */
.stroke::after{ transform-origin:left center; }
@media (prefers-reduced-motion: no-preference){
  .js-anim .stroke::after{ transform:skewX(-12deg) scaleX(0); transition:transform .8s cubic-bezier(.22,.61,.36,1) .1s; }
  .js-anim .stroke.drawn::after{ transform:skewX(-12deg) scaleX(1); }
}

/* -------- 2. Parallaxe douce sur les photos -------- */
/* Animations pilotées par le scroll (animation-timeline), donc jouées par
   le compositeur du navigateur : aucun écouteur de scroll, aucune saccade,
   et rien du tout sur les navigateurs qui ne connaissent pas, d'où le
   @supports. Deux techniques selon ce que le conteneur permet.

   a) .svc-media et .page-hero-media ne contiennent QUE l'image : on peut
      les rogner et déplacer l'image dedans. scale(1.09) fournit la marge
      que le déplacement consomme, sinon un bord blanc apparaît. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .svc-media, .page-hero-media{ overflow:hidden; border-radius:4px; }
    .svc-media img, .page-hero-media img{
      animation:parallaxe-photo linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes parallaxe-photo{
      from{ transform:translateY(-3.5%) scale(1.09); }
      to  { transform:translateY(3.5%) scale(1.09); }
    }

    /* b) .about-media porte aussi la légende sous la photo : la rogner
          couperait le texte. On déplace donc le cadrage de l'image dans son
          propre cadre (object-position), ce qui ne peut pas créer de vide
          puisque object-fit:cover remplit déjà. */
    .about-photo{ animation:parallaxe-cadrage linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes parallaxe-cadrage{ from{ object-position:50% 26%; } to{ object-position:50% 46%; } }
    /* le camion est en 4/3 et centré : il perdrait son flocage en dérivant */
    .about-photo--wide{ animation:none; }
  }
}

/* -------- 3. Fondu entre les pages -------- */
/* Le site est multipage et statique : sans ça, chaque clic fait un flash
   blanc. navigation:auto suffit pour les liens internes du même domaine. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:page-sortie .16s ease-out both; }
  ::view-transition-new(root){ animation:page-entree .26s ease-out both; }
}
@keyframes page-sortie{ to{ opacity:0; } }
@keyframes page-entree{ from{ opacity:0; transform:translateY(8px); } }

/* -------- 4. Bandeau défilant des communes -------- */
/* Il bouge, et il sert le référencement local au passage : les noms de
   communes sont du vrai texte, pas une image.
   La piste contient la liste DEUX fois et se déplace de -50 % : au moment
   où elle se remet à zéro, le deuxième exemplaire est exactement là où
   était le premier, la boucle est donc invisible. */
.marquee{ overflow:hidden; background:var(--charcoal); color:var(--light-1); padding-block:1.15rem; }
.marquee-track{ display:flex; width:max-content; animation:defile 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }   /* pour pouvoir lire une commune */
.marquee-item{ display:inline-flex; align-items:center; gap:1.6rem; padding-inline:.8rem;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(.95rem,1.9vw,1.25rem); white-space:nowrap; }
.marquee-item::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex-shrink:0; }
@keyframes defile{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  /* figée, la piste doublée déborderait : on la laisse défiler à la main */
  .marquee{ overflow-x:auto; }
}

/* -------- Carte Leaflet -------- */
#zone-map .leaflet-container{ font-family:var(--sans); background:var(--paper); }
#zone-map .leaflet-bar{ border:1px solid var(--paper-line); box-shadow:none; }
#zone-map .leaflet-bar a{ color:var(--ink); background:#fff; border-bottom-color:var(--paper-alt); }
#zone-map .leaflet-bar a:hover{ background:var(--paper); color:var(--brand-text); }
.leaflet-tooltip.lp-tip{ background:var(--ink); color:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.2); font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:3px; }
.leaflet-tooltip.lp-tip::before{ border-top-color:var(--ink); }
.leaflet-tooltip.lp-tip-base{ background:var(--brand); }
.leaflet-tooltip.lp-tip-base::before{ border-top-color:var(--brand); }
.leaflet-control-attribution{ font-size:10px; background:rgba(246,242,234,.82); }

/* -------- Page en construction (temporaire) -------- */
.wip{ min-height:calc(100vh - 84px); display:grid; place-items:center; padding-block:clamp(4rem,10vw,7rem); background:var(--paper); }
.wip-inner{ max-width:44rem; text-align:center; }
.wip-mark{ display:grid; place-items:center; width:74px; height:74px; margin:0 auto 2rem; border:1.5px solid var(--brand); color:var(--brand-text); background:var(--white); }
.wip-title{ font-size:clamp(1.85rem,4vw,2.9rem); color:var(--ink); margin-top:1rem; }
.wip-lead{ margin:1.4rem auto 0; max-width:46ch; color:var(--soft); font-size:1.05rem; line-height:1.7; }
.wip-cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.4rem; }
.wip-meta{ margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid var(--paper-line); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--soft-2); }
.wip-meta a{ color:var(--brand-text); }
.wip-meta a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* -------- Page active dans la nav -------- */
.nav a[aria-current="page"]{ color:var(--brand-text); }
.nav a[aria-current="page"]::after{ width:100%; }
.mobile-menu nav a[aria-current="page"]{ color:var(--brand-text); }

/* -------- Pages internes : hero + fil d'Ariane -------- */
.page-hero{ background:var(--paper); border-bottom:1px solid var(--paper-line); padding-block:clamp(1.6rem,3vw,2.4rem) clamp(2.6rem,5vw,4rem); }
.page-hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,4vw,3.6rem); align-items:center; }
.page-hero h1{ font-size:clamp(1.95rem,4vw,3rem); font-weight:800; line-height:1.04; color:var(--ink); margin-top:1.1rem; }
.page-hero .lead{ margin-top:1.3rem; }
.page-hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.page-hero-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.page-hero-media img.is-portrait{ aspect-ratio:4/5; }
/* variante sans photo : le contenu de la page est la vraie illustration */
.page-hero--plain .lead{ max-width:56ch; }
/* fil d'Ariane : sépare visuellement le header du titre de page */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:clamp(1.6rem,3vw,2.4rem);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--soft-2); }
.crumb a:hover{ color:var(--brand-text); }
.crumb span[aria-current]{ color:var(--brand-text); }
.crumb .sep{ color:var(--soft-2); }

/* -------- Blocs prestation (page Prestations) -------- */
.svc{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center;
  padding-block:clamp(2.4rem,4.5vw,3.8rem); border-bottom:1px solid var(--paper-line); scroll-margin-top:110px; }
.svc:last-child{ border-bottom:0; padding-bottom:0; }
/* alternance : une prestation sur deux a sa photo à droite */
.svc--flip .svc-media{ order:2; }
.svc-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; }
.svc-media img.is-wide{ aspect-ratio:4/3; }
.svc-no{ font-family:var(--display); font-weight:800; font-size:1.35rem; color:var(--num); line-height:1; }
.svc-body h2{ font-size:clamp(1.45rem,2.7vw,2rem); color:var(--ink); margin-top:.8rem; }
.svc-body > p{ color:var(--soft); font-size:1.02rem; line-height:1.75; margin-top:1.1rem; }
.svc-body > p strong{ color:var(--ink); font-weight:600; }
.svc-body .text-link{ margin-top:1.5rem; }

/* liste à puces carrées : sert dans les prestations, l'atelier et la zone */
.checks{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.checks li{ position:relative; padding-left:1.5rem; color:var(--soft); font-size:.97rem; line-height:1.6; }
.checks li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--brand); }
.checks--two{ grid-template-columns:1fr 1fr; gap:.6rem 1.6rem; }
.section--dark .checks li{ color:var(--light-2); }

/* lien dans un paragraphe : sans soulignement il serait invisible */
.lnk{ color:var(--brand-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lnk:hover{ color:var(--brand-hover); }
.section--dark .lnk{ color:var(--brand-light); }

/* deux colonnes de texte égales (à la différence de .about-grid, déséquilibrée) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.4rem); align-items:start; }

/* -------- Étapes (déroulé d'un chantier) -------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:clamp(2rem,3.5vw,2.8rem); }
.step{ background:var(--white); padding:1.7rem 1.4rem; }
.step-no{ display:inline-block; font-family:var(--display); font-weight:800; font-size:.95rem; letter-spacing:.02em; color:var(--brand-text); padding-bottom:.5rem; border-bottom:2px solid var(--brand); }
.step h3{ font-size:1.08rem; color:var(--ink); margin-top:1rem; }
.step p{ color:var(--soft); font-size:.93rem; line-height:1.65; margin:.7rem 0 0; }
.section--paper .step{ background:var(--white); }
.section--white .step{ background:var(--paper); }

/* -------- Grille de cartes (communes, engagements) -------- */
/* minmax 400px : donne 3 colonnes sur desktop, donc 2 lignes pleines avec 6 cartes.
   À 250px on obtenait 5 colonnes et une 6e carte orpheline sur la ligne suivante. */
/* min(100%,400px) : sans le min(), la piste reste à 400px sous un écran de 390px
   et la page déborde horizontalement */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:clamp(1.8rem,3vw,2.4rem); }
.card{ background:var(--white); padding:1.6rem 1.4rem; }
.section--white .card{ background:var(--paper); }
.card h3{ font-size:1.1rem; color:var(--ink); }
.card-eyebrow{ display:block; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.14em; color:var(--num-text); margin-bottom:.5rem; }
.card p{ color:var(--soft); font-size:.93rem; line-height:1.65; margin:.7rem 0 0; }

/* -------- Bande d'appel de fin de page -------- */
.cta-band{ background:var(--charcoal); color:var(--light-1); }
.cta-band-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.8rem; padding-block:clamp(2.4rem,4.5vw,3.6rem); }
.cta-band h2{ font-size:clamp(1.45rem,2.7vw,2.05rem); color:#fff; }
.cta-band p{ color:var(--light-2); margin:.9rem 0 0; max-width:46ch; line-height:1.7; }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn--light{ background:transparent; color:var(--light-1); border-color:rgba(244,239,230,.35); }
.btn--light:hover{ background:var(--light-1); color:var(--ink); border-color:var(--light-1); transform:translateY(-2px); }

/* -------- Avis Google (bandeau de réassurance) -------- */
.rating{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.3rem; margin-top:1.8rem; padding:1.1rem 1.3rem; background:var(--white); border:1px solid var(--paper-line); }
.rating-score{ font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--ink); }
.rating-stars{ color:var(--brand-text); font-size:1.05rem; letter-spacing:.12em; }
.rating-txt{ font-size:.88rem; color:var(--soft); line-height:1.5; }
.rating-txt strong{ color:var(--ink); font-weight:700; }
.section--paper .rating{ background:var(--white); }
.section--white .rating{ background:var(--paper); }

/* -------- Avis Google (les avis eux-mêmes) -------- */
/* Recopiés en dur depuis la fiche Google, relevé daté dans
   ressources/avis-google.md. Aucun script tiers : le site ne fait toujours
   aucune requête sortante, ce qui était tout l'intérêt d'auto-héberger les
   polices. Contrepartie assumée : c'est figé, à rafraîchir à la main. */
.reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:clamp(1.8rem,3vw,2.4rem); }
.review{ display:flex; flex-direction:column; gap:.9rem; background:var(--white); padding:1.7rem 1.5rem; }
.section--white .review{ background:var(--paper); }
.review-stars{ color:var(--brand-text); font-size:.95rem; letter-spacing:.14em; }
/* blockquote : c'est une citation, pas du texte d'agence. Les guillemets
   français sont dans le HTML, pas en ::before, pour rester copiables. */
.review blockquote{ margin:0; color:var(--soft); font-size:.95rem; line-height:1.7; }
.review-author{ margin-top:auto; padding-top:.4rem; font-size:.85rem; color:var(--ink); font-weight:700; }
.review-meta{ display:block; margin-top:.15rem; font-size:.75rem; font-weight:500; color:var(--soft-2); letter-spacing:.02em; }

/* en-tête : la note à gauche, le lien de vérification à droite */
.reviews-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; }
.reviews-score{ display:flex; align-items:center; gap:1rem; }
.reviews-score .rating-score{ font-size:clamp(2.4rem,5vw,3.2rem); }
.reviews-note{ margin-top:1.2rem; font-size:.83rem; color:var(--soft-2); line-height:1.6; }
.reviews-note a{ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }

/* -------- Avis : déploiement en cercle (grand écran) -------- */
/* Deuxième vie du MÊME balisage : la classe .is-ring est posée par main.js
   quand l'écran est assez grand et que l'animation est autorisée. Sans elle,
   tout ce qui suit dort et la grille ci-dessus s'affiche normalement. C'est
   pour ça qu'aucun avis n'est écrit deux fois dans le HTML.
   Règle de survie : les cartes sont pilotées par un transform inline, ne
   jamais poser de transform sur .is-ring .review depuis la feuille de style. */
.avis-stage{ display:contents; }
.avis-stick{ display:contents; }
/* Le cercle est centré sur le viewport, or le viewport commence sous un header
   collant de 76px : sans ce décalage vers le bas, les deux cartes du haut
   passent dessous. Moitié de la hauteur du header, pour retrouver autant de
   marge en haut qu'en bas. À revoir si le header change de gabarit. */
#avis{ --avis-shift:38px; }

/* pas de marge en haut : la scène doit commencer pile au bord du viewport,
   sinon on scrolle dans du vide avant que les cartes ne bougent. En bas, la
   note de bas de section garde l'air commun aux autres sections. */
#avis.is-ring{ padding-top:0; padding-bottom:var(--sec); }
.is-ring .avis-stage{ display:block; position:relative; height:270vh; }
.is-ring .avis-stick{ display:block; position:sticky; top:0; height:100vh; overflow:hidden; }
/* le cercle se cale sur le viewport, pas sur la colonne de texte : sinon les
   cartes latérales rentrent dans le titre au lieu de border l'écran */
.is-ring .avis-canvas{ position:relative; height:100%; max-width:none; padding-inline:0; }

/* en-tête : centrée en haut, elle s'efface quand les cartes se sont écartées.
   transform/transition remis à zéro : son opacité est pilotée image par image
   au scroll, la transition .6s du .reveal traînerait derrière le doigt. */
.is-ring .avis-head{ position:absolute; top:calc(8vh + var(--avis-shift)); left:50%; translate:-50% 0; z-index:4;
  width:min(92vw,42rem); padding-bottom:0; border-bottom:0; text-align:center;
  transform:none; transition:none; }
.is-ring .avis-head .reviews-head{ flex-direction:column; justify-content:center; gap:.9rem; }
.is-ring .avis-head .sec-title{ margin-top:.8rem; }
/* le lien vers la fiche est repris au centre : deux fois à l'écran, ça fait doublon */
.is-ring .avis-head .reviews-score{ display:none; }

/* les six cartes, absolues, empilées au départ */
.is-ring .reviews{ display:contents; }
/* Format fixe : un cercle de cartes inégales tourne au tas de papiers. 300x260
   est la mesure du plus long des six avis (Agence HOUZE) à cette taille de
   texte : aucun n'est coupé, personne ne lit « je recomm… » sur la page qui
   vend l'entreprise. Le line-clamp est un garde-fou pour un futur avis plus
   bavard, pas le régime normal. Si un avis arrive plus long, remesurer la
   hauteur plutôt que de le laisser tomber dans les points de suspension. */
.is-ring .review{
  position:absolute; left:50%; top:calc(50% + var(--avis-shift)); z-index:2;
  width:300px; height:260px; gap:.6rem;
  padding:1.3rem 1.25rem;
  background:var(--white); border:1px solid var(--paper-line);
  box-shadow:0 26px 50px -34px rgba(35,32,27,.55);
  will-change:transform;
}
.is-ring .review blockquote{
  font-size:.875rem; line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.is-ring .review-author{ font-size:.82rem; }

/* coeur du cercle : la note, la phrase, les deux appels à l'action */
.avis-core{ position:absolute; left:50%; top:calc(50% + var(--avis-shift)); z-index:5;
  width:min(92vw,19rem); text-align:center;
  translate:-50% -50%; opacity:0; will-change:opacity, transform; }
.avis-core-badge{ display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem 1rem; background:var(--white); border:1px solid var(--paper-line); }
.avis-core-badge .rating-score{ font-size:1.4rem; }
.avis-core-badge .rating-stars{ font-size:.9rem; }
.avis-core-count{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--soft-2); }
.avis-core-title{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.6rem,2.2vw,2.05rem); line-height:1.06; letter-spacing:-.012em;
  color:var(--ink); margin:1.2rem 0 0; }
.avis-core-txt{ margin:.9rem 0 0; font-size:.9rem; line-height:1.6; color:var(--soft); }
.avis-core-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.4rem; }
/* lien plutôt qu'un second bouton : à 19rem de large, deux boutons s'empilent
   et le bloc central prend l'allure d'un formulaire */
.avis-core-link{ display:inline-block; margin-top:1rem; font-size:.8rem; font-weight:600;
  color:var(--soft-2); text-decoration:underline; text-underline-offset:3px; }
.avis-core-link:hover{ color:var(--brand-text); }

/* -------- FAQ par thèmes -------- */
.faq-group{ margin-top:clamp(2.2rem,4vw,3rem); }
.faq-group:first-of-type{ margin-top:.5rem; }
.faq-group > h2{ font-size:1.15rem; color:var(--brand-text); padding-bottom:.9rem; border-bottom:2px solid var(--brand); }

/* -------- Avant / après côte à côte -------- */
/* le comparateur au curseur suppose deux photos prises du même point de vue ;
   quand ce n'est pas le cas, on montre les deux vues l'une à côté de l'autre */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.6vw,1.1rem); }
.duo figure{ position:relative; margin:0; overflow:hidden; border-radius:3px; background:var(--paper-alt); }
.duo img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.duo-tag{ position:absolute; top:1rem; left:1rem; z-index:2; padding:.42rem .8rem; border-radius:2px;
  background:rgba(30,27,22,.82); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; backdrop-filter:blur(3px); }
.duo figure:last-child .duo-tag{ background:rgba(196,83,26,.9); }
.duo-caption{ margin-top:.9rem; font-size:.9rem; color:var(--soft-2); }

/* -------- Pages légales (mentions, confidentialité) -------- */
/* texte long : la largeur de lecture prime, pas la largeur de l'écran.
   Bloc interne au .container, sinon la colonne se centre et décroche du titre. */
.legal{ max-width:78ch; }
.legal-block{ padding-block:clamp(1.9rem,3.2vw,2.6rem); border-top:1px solid var(--paper-line); }
.legal-block:first-child{ border-top:0; padding-top:0; }
.legal-block h2{ font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--ink); }
.legal-block h3{ font-size:.98rem; color:var(--brand-text); margin-top:1.7rem; }
.legal-block p{ color:var(--soft); line-height:1.75; margin:1rem 0 0; }
.legal-block p strong{ color:var(--ink); font-weight:600; }
.legal-block a:not(.btn){ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }
.legal-block a:not(.btn):hover{ color:var(--brand-hover); }
.legal-block .checks{ margin-top:1.1rem; }
/* fiche d'identité : libellé à gauche, valeur à droite */
.legal-id{ display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.8rem; margin:1.4rem 0 0; }
.legal-id dt{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--soft-2); padding-top:.3rem; }
.legal-id dd{ margin:0; color:var(--ink); font-weight:600; line-height:1.5; }
.legal-id dd a{ color:var(--brand-text); }
.legal-note{ margin-top:1.3rem; padding:1.1rem 1.3rem; background:var(--paper); border-left:3px solid var(--brand); font-size:.93rem; line-height:1.7; color:var(--soft); }
.section--paper .legal-note{ background:var(--white); }
.legal-date{ margin-top:clamp(2.2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--paper-line); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--soft-2); }

/* ================= RESPONSIVE ================= */
@media (max-width:1360px){
  .hdr .socials{ display:none; }
}
@media (max-width:1200px){
  .nav{ gap:1.05rem; }
  .nav a{ font-size:.7rem; letter-spacing:.1em; }
}
@media (max-width:1000px){
  .nav{ display:none; }
  .hdr .tel{ display:none; }
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  /* sur mobile la photo passe SOUS le titre et les boutons */
  .hero-media{ margin-top:2.6rem; }
  .hero-media::after{ display:none; }   /* le cadre décalé déborderait sur mobile */
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:440px; }
  .zone-grid{ grid-template-columns:1fr; }
  .devis-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-media{ max-width:560px; }
  .svc{ grid-template-columns:1fr; }
  /* en une colonne, l'alternance n'a plus de sens : la photo passe toujours en tête */
  .svc--flip .svc-media{ order:0; }
  .svc-media{ max-width:460px; }
  .steps{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .about-grid--rev{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .tel{ display:none; }
  .srv-row{ grid-template-columns:auto 1fr; gap:.3rem 1rem; }
  .srv-desc{ grid-column:1 / -1; padding-left:calc(70px - 40px); }
  .srv-arrow{ display:none; }
  .sec-head--row{ align-items:flex-start; }
  .gallery-item figcaption{ padding:1.5rem .7rem .7rem; font-size:.74rem; }
  /* la catégorie doit tenir sur une ligne dans une vignette de demi-écran */
  .gi-cat{ font-size:.55rem; letter-spacing:.1em; }
  .gi-cat::before{ display:none; }
  .lb-prev, .lb-next{ top:auto; bottom:1rem; transform:none; }
  .form-row{ grid-template-columns:1fr; }
  .stats{ flex-direction:column; }
  .stat + .stat{ border-left:0; border-top:1px solid var(--paper-line); padding-left:0; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .fab{ display:grid; }
  .ba-frame{ aspect-ratio:4/3; }
  .steps{ grid-template-columns:1fr; }
  .checks--two{ grid-template-columns:1fr; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .rating{ padding:1rem; }
  /* en deux colonnes, un libellé long écrase la valeur : on empile */
  .legal-id{ grid-template-columns:1fr; gap:.15rem; }
  .legal-id dd{ margin-bottom:.9rem; }
}