/* ==========================================================================
   Menuiserie Lefèvre — homepage, V2 « rigueur architecturale »

   SYSTÈME DE CONSTRUCTION
   - Une seule grille : 12 colonnes, gouttière constante, marges constantes.
   - Deux lignes directrices communes à toute la page :
       · colonne 1 → métadonnées (numéro, label, coordonnées, légendes)
       · colonne 4 → contenu (titres, textes, navigation, filtres)
     Lignes secondaires : colonnes 7 et 9 (demi et tiers de la zone de contenu).
   - Trois formats photo seulement : 3:2 · 4:5 · 21:9.
   - Une seule unité d'espacement vertical entre blocs (--s-block),
     une seule entre sections (--s-section).
   ========================================================================== */

:root {
  /* Couleurs */
  --chaux: #F4F0E8;
  --chaux-2: #ECE6DB;
  --pierre: #E2D9CB;
  --line: rgba(43, 39, 36, .14);
  --line-2: rgba(43, 39, 36, .34);
  --ink: #2B2724;
  --ink-2: #5D5650;
  --ink-3: #8C837A;
  --framboise: #B0215A;
  --framboise-2: #921A4A;
  --nuit: #2A2622;
  --nuit-ink: #EEE8DE;
  --nuit-2: rgba(238, 232, 222, .62);
  --nuit-3: rgba(238, 232, 222, .42);
  --nuit-line: rgba(238, 232, 222, .18);
  --rose: #E7789F;

  /* Typographie */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --t-hero: clamp(2.3rem, 0.7rem + 3.9vw, 5rem);
  --t-h2: clamp(1.85rem, 1.1rem + 2.3vw, 3.4rem);
  --t-h3: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  --t-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --t-small: .9rem;
  --t-mono: .7rem;

  /* Grille & espacements */
  --max: 1440px;
  --gut: clamp(20px, 4vw, 56px);      /* marge latérale, identique partout */
  --gap: clamp(16px, 1.7vw, 24px);    /* gouttière, identique partout */
  --s-section: clamp(96px, 10vw, 152px);
  --s-block: clamp(48px, 5vw, 72px);
  --s-rule: 20px;                      /* distance filet → contenu */
  --s-cap: 12px;                       /* distance photo → légende */

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--chaux); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.6;
  -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: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, dl, dd { margin: 0; }
::selection { background: var(--framboise); color: #fff; }
:focus-visible { outline: 2px solid var(--framboise); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { left: 16px; top: 16px; }

/* ---------- Grille ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.c1-3 { grid-column: 1 / 4; }   .c4-12 { grid-column: 4 / 13; }
.c4-8 { grid-column: 4 / 9; }   .c9-12 { grid-column: 9 / 13; }
.c1-8 { grid-column: 1 / 9; }   .c5-12 { grid-column: 5 / 13; }
.c1-6 { grid-column: 1 / 7; }   .c7-12 { grid-column: 7 / 13; }
.c1-4 { grid-column: 1 / 5; }   .c5-8 { grid-column: 5 / 9; }
.c4-6 { grid-column: 4 / 7; }   .c7-9 { grid-column: 7 / 10; }   .c10-12 { grid-column: 10 / 13; }

/* Formats photo */
.r-32 { aspect-ratio: 3 / 2; }
.r-45 { aspect-ratio: 4 / 5; }
.r-219 { aspect-ratio: 21 / 9; }

/* ---------- Éléments typographiques récurrents ---------- */
.mono, .label, .cap__n, .cap__c {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.label { color: var(--ink-2); margin: 0; }
.idx { color: var(--framboise); margin-right: 12px; font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .08em; }
.sq { display: inline-block; width: 7px; height: 7px; background: var(--framboise); margin-right: 10px; vertical-align: 1px; }
.pt { font-style: normal; color: var(--framboise); }
.mute { color: var(--ink-3); }

/* Légende photo — identique partout */
.cap { display: flex; align-items: baseline; gap: 14px; margin: 0; padding-top: var(--s-cap); font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; }
.cap__n { color: var(--framboise); flex: none; }
.cap__c { color: var(--ink-3); margin-left: auto; text-align: right; flex: none; }

/* Photo */
.ph__img { display: block; position: relative; overflow: hidden; background: var(--pierre); }
.ph__img img, .pf__btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 52px; padding: 0 22px;
  font-size: .95rem; font-weight: 550; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}
.btn--sm { height: 42px; padding: 0 16px; font-size: .88rem; }
.btn--primary { background: var(--framboise); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--chaux); }
.arr { display: inline-block; width: 16px; height: 1px; background: currentColor; position: relative; transition: transform .35s var(--ease); }
.arr::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arr, .more:hover .arr { transform: translateX(4px); }
.more { display: inline-flex; align-items: center; gap: 12px; font-size: var(--t-small); font-weight: 550; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); transition: color .25s, border-color .25s; }
.more:hover { color: var(--framboise); border-color: var(--framboise); }

/* ==========================================================================
   BANDEAU & HEADER
   ========================================================================== */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--chaux) 95%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform .5s var(--ease);
}
.hd__in { height: 80px; align-items: center; }
.hd__logo { justify-self: start; }
.hd__logo img { height: 56px; width: auto; }

.nav__list { display: flex; gap: clamp(20px, 2.3vw, 34px); }
.nav__list > li > a { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; font-weight: 500; padding: 28px 0; }
.nav__list > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--framboise); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__list > li > a:hover::after, .nav__list > li > a.is-current::after { transform: scaleX(1); }
.chev { width: 6px; height: 6px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.hd__actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.hd__tel { font-weight: 550; font-size: .94rem; white-space: nowrap; }
.hd__tel:hover { color: var(--framboise); }

/* Méga-menu — posé sur la même grille */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--chaux); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.nav__has-mega:hover .mega, .nav__has-mega:focus-within .mega { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega__in { padding-top: 32px; padding-bottom: 40px; align-items: start; }
.mega__main .mono { color: var(--ink); margin-bottom: 14px; }
.mega__main li a, .mega__fam a { display: block; padding: 9px 0; border-top: 1px solid var(--line); font-size: .94rem; transition: color .2s; }
.mega__main li a { color: var(--ink-2); }
.mega__main li a:hover, .mega__fam a:hover { color: var(--framboise); }
.mega__fam { border-bottom: 1px solid var(--line); }
.mega__fam .mono { color: var(--ink-3); margin-bottom: 14px; }
.mega__fam a { padding: 14px 0; font-size: 1.05rem; font-weight: 500; display: flex; align-items: baseline; }
.mega__ph img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.mm { position: fixed; inset: 0; z-index: 45; background: var(--chaux); padding-top: 120px; overflow-y: auto; }
.mm[hidden] { display: none; }
.mm__in { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 32px; }
.mm__list > li { border-top: 1px solid var(--line); }
.mm__list > li > a { display: flex; align-items: baseline; gap: 16px; font-size: 1.9rem; letter-spacing: -.03em; padding: 14px 0; font-weight: 500; }
.mm__list .mono { color: var(--framboise); width: 22px; }
.mm__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 0 16px 38px; }
.mm__sub a { font-size: .9rem; color: var(--ink-2); padding: 6px 0; display: block; }
.mm__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.mm__foot .mono { color: var(--ink-3); margin-top: 8px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(32px, 3.4vw, 48px); }


/* Titre + CTA : posés sur la même ligne de pied */
.hero__head { align-items: end; margin-bottom: clamp(24px, 2.4vw, 34px); }
.hero__title { font-size: var(--t-hero); line-height: 1; letter-spacing: -.04em; font-weight: 500; font-stretch: 88%; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: inline-block; }
.hero__ctas { display: grid; gap: 8px; }
.hero__ctas .btn { width: 100%; height: 49px; }

/* Photographie : 21:9, pleine largeur de grille */
.slides { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--pierre); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-io); }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.04); transition: transform 7s linear; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide.is-active img { transform: scale(1); }

/* Pied : légende / texte / téléphone */
.hero__foot { padding-top: var(--s-rule); align-items: start; }
.hero__cap .cap { padding-top: 0; margin-bottom: 14px; }
.slides__txt { transition: opacity .35s; }
.slides__prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 200px; }
.slides__prog button { height: 16px; position: relative; }
.slides__prog button::before, .slides__prog i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--line-2); }
.slides__prog i { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.slides__prog [aria-selected="true"] i { animation: prog var(--dur, 6s) linear forwards; }
.is-paused .slides__prog [aria-selected="true"] i { animation-play-state: paused; }
@keyframes prog { to { transform: scaleX(1); } }
.hero__lead { margin: 0; font-size: 1.02rem; color: var(--ink-2); }

/* Chiffres clés : filet + repères carrés posés sur les lignes de colonnes */
.facts { margin-top: var(--s-block); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.facts li { position: relative; padding: var(--s-rule) 0 24px; display: flex; flex-direction: column; gap: 8px; }
.facts li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--ink); }
.facts .mono { color: var(--ink-3); }
.facts b { font-weight: 500; font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.15; }
.facts__rge { display: flex; align-items: center; gap: 12px; }
.facts__rge img { height: 36px; width: auto; }

/* ==========================================================================
   SECTIONS — gabarit commun
   ========================================================================== */
.sec { padding: var(--s-section) 0; }
.sec--tint { background: var(--chaux-2); }
.sec--dark { background: var(--nuit); color: var(--nuit-ink); --cover: var(--nuit); }

/* En-tête de section : filet, numéro en colonne 1, titre en colonne 4 */
.sh { border-top: 1px solid var(--line-2); padding-top: var(--s-rule); margin-bottom: var(--s-block); align-items: baseline; row-gap: 28px; }
.sh__t { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em; font-weight: 450; text-wrap: balance; max-width: 22em; }
.sh__p { margin: 0; color: var(--ink-2); max-width: 36em; }
.sh__aside { justify-self: start; }

/* ---------- 01 L'entreprise ---------- */
.about { align-items: stretch; }
.about__text { display: flex; flex-direction: column; color: var(--ink-2); }
.about__who { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: var(--t-h3); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; margin-bottom: 24px; }
.about__who .mono { color: var(--framboise); }

/* Liste clé / valeur — réutilisée (entreprise, contact) */
.kv { margin-top: auto; border-top: 1px solid var(--line-2); }
.kv > div { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.kv dt { color: var(--ink-3); padding-top: .2em; }
.kv dd { color: var(--ink); }

/* ---------- 02 Prestations : rang de 2 (3:2) + rang de 3 (4:5) ---------- */
.sv { row-gap: var(--s-block); }
.sv__it { display: flex; flex-direction: column; }
.sv__it .ph__img img { transition: transform 1.1s var(--ease); }
.sv__it:hover .ph__img img { transform: scale(1.03); }
.sv__body { padding-top: var(--s-rule); }
.sv__t { font-size: var(--t-h3); letter-spacing: -.022em; line-height: 1.15; margin-bottom: 12px; display: flex; align-items: baseline; }
.sv__t a { transition: color .25s; }
.sv__it:hover .sv__t a { color: var(--framboise); }
.sv__body p { color: var(--ink-2); max-width: 34em; margin-bottom: 18px; }
.sv__sub { display: flex; flex-wrap: wrap; gap: 6px; }
.sv__sub a { display: inline-block; border: 1px solid var(--line-2); padding: 6px 11px; font-size: .84rem; transition: background .25s, color .25s, border-color .25s; }
.sv__sub a:hover { background: var(--ink); border-color: var(--ink); color: var(--chaux); }
.tag-illu { position: absolute; left: 0; bottom: 0; background: var(--chaux-2); padding: 7px 10px; font-size: .62rem; color: var(--ink-2); }

/* ---------- 03 Savoir-faire ---------- */
.sec--dark .sh { border-top-color: var(--nuit-line); }
.sec--dark .label { color: var(--nuit-2); }
.sec--dark .idx, .sec--dark .cap__n { color: var(--rose); }
.sec--dark .mute { color: var(--nuit-3); }
.sec--dark .cap { color: var(--nuit-2); }
.sec--dark .ph__img { background: #3a3530; }

.know { align-items: start; }
.know__big { border-top: 1px solid var(--nuit-line); padding-top: var(--s-rule); }
.know__num { font-size: clamp(7rem, 3rem + 9vw, 12.5rem); line-height: .78; letter-spacing: -.06em; font-weight: 450; font-stretch: 86%; margin: 0 0 18px -.05em; }
.know__lbl { font-size: var(--t-h3); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; margin-bottom: 12px; display: flex; align-items: baseline; }
.know__cap { color: var(--nuit-2); font-size: var(--t-small); max-width: 24em; margin: 0; }

/* Fiche technique : sous-grille de 9 colonnes = colonnes 4 à 12 de la page */
.spec { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--nuit-line); }
.spec li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--s-rule) 0 26px; border-bottom: 1px solid var(--nuit-line); }
.spec li .idx { grid-column: 1 / 2; margin: 0; }
.spec h3 { grid-column: 2 / 6; font-size: var(--t-h3); letter-spacing: -.022em; line-height: 1.15; font-weight: 500; transition: color .25s; }
.spec p { grid-column: 6 / 10; margin: 0; color: var(--nuit-2); font-size: var(--t-small); }
.spec li:hover h3 { color: #fff; }

.know__ph { margin-top: var(--s-block); }

/* ---------- 04 Réalisations : rangs 8+4 / 4+4+4 / 4+8 ---------- */
.filters-row { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: var(--s-block); align-items: baseline; }
.filters__lbl { color: var(--ink-3); margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.filters button { font-size: .95rem; color: var(--ink-3); padding: 4px 0; position: relative; transition: color .25s; }
.filters button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--framboise); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.filters button:hover, .filters button.is-on { color: var(--ink); }
.filters button.is-on::after { transform: scaleX(1); }

.pf { row-gap: var(--s-block); align-items: stretch; }
.pf__it { display: flex; flex-direction: column; transition: opacity .5s var(--ease), filter .5s var(--ease); }
.pf__btn { display: block; width: 100%; position: relative; overflow: hidden; background: var(--pierre); cursor: zoom-in; }
.pf__btn img { transition: transform 1.1s var(--ease); }
.pf__it.is-fill .pf__btn { flex: 1 1 auto; min-height: 260px; }
.pf__it.is-fill .pf__btn img { position: absolute; inset: 0; }
.pf__btn::after { content: "Agrandir +"; position: absolute; right: 0; bottom: 0; background: var(--chaux); padding: 8px 12px; font: 500 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.pf__it:hover .pf__btn img { transform: scale(1.03); }
.pf__it:hover .pf__btn::after, .pf__btn:focus-visible::after { opacity: 1; }
.pf__it[hidden] { display: none; }
/* Vue filtrée : rangs réguliers de 3 colonnes × 4, format 4:5 */
.pf.is-filtered .pf__it { grid-column: span 4 !important; }
.pf.is-filtered .pf__btn { aspect-ratio: 4 / 5; flex: none; min-height: 0; }
.pf.is-filtered .pf__btn img { position: static; }

/* ---------- 05 Secteur ---------- */
.zone { align-items: start; }
.zone__list { border-top: 1px solid var(--line-2); padding-top: var(--s-rule); }
.zone__lead { font-size: var(--t-small); color: var(--ink-2); }
.towns { border-top: 1px solid var(--line); }
.towns li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.zone__svg { border-top: 1px solid var(--line-2); background: var(--chaux); }
.zone__svg svg { display: block; width: 100%; height: auto; }
.m-grid path { stroke: var(--line); stroke-width: 1; fill: none; }
.m-ring circle { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 5; }
.m-ring text { font: 500 10px var(--mono); letter-spacing: .08em; fill: var(--ink-3); }
.m-river path { fill: none; stroke: #A9BCBE; stroke-width: 2.2; stroke-linecap: round; }
.m-river text { font: italic 400 12px var(--sans); fill: #6E8689; }
.m-dept text { font: 500 10px var(--mono); letter-spacing: .22em; fill: var(--ink-3); }
.m-town circle { fill: var(--ink); }
.m-town text { font: 500 12px var(--sans); fill: var(--ink); }
.m-home rect { fill: var(--framboise); }
.m-home text { font: 600 14px var(--sans); fill: var(--framboise); }

/* ---------- 06 Contact : coordonnées / formulaire / photo, même ligne de tête ---------- */
.contact { align-items: stretch; }
.kv--contact { margin-top: 0; align-self: start; }
.kv--contact > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0 16px; }
.kv--contact a { display: block; transition: color .2s; }
.kv--contact a:hover { color: var(--framboise); }
.kv--contact .big { font-size: var(--t-h3); letter-spacing: -.02em; font-weight: 500; line-height: 1.2; }

.form { border-top: 1px solid var(--line-2); padding-top: var(--s-rule); }
.form__title { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-h3); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; margin-bottom: 24px; }
.form__title .mono { color: var(--framboise); }
.form__chips { border: 0; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.form__chips legend { font-size: .84rem; color: var(--ink-2); margin-bottom: 10px; padding: 0; }
.form__chips label { cursor: pointer; }
.form__chips input { position: absolute; opacity: 0; pointer-events: none; }
.form__chips span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line-2); font-size: .86rem; transition: background .2s, color .2s, border-color .2s; }
.form__chips input:checked + span { background: var(--framboise); border-color: var(--framboise); color: #fff; }
.form__chips input:focus-visible + span { outline: 2px solid var(--framboise); outline-offset: 2px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: .82rem; color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 8px 0 10px; }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--framboise); }
.field.is-err input { border-bottom-color: var(--framboise); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); margin: 6px 0 24px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--framboise); margin: 2px 0 0; flex: none; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__ok { margin: 0; font-size: .88rem; color: var(--framboise); }

.contact__ph { display: flex; flex-direction: column; }
.contact__ph .ph__img { flex: 1 1 auto; min-height: 320px; }
.contact__ph img { position: absolute; inset: 0; object-position: 60% 50%; }

/* ---------- Footer ---------- */
.ft { padding: var(--s-section) 0 28px; border-top: 1px solid var(--line-2); }
.ft__top { align-items: end; padding-bottom: var(--s-block); }
.ft__logo { height: 104px; width: auto; }
.ft__claim { margin: 0; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em; font-weight: 450; }
.ft__cta { justify-self: stretch; }
.ft__cta .btn { width: 100%; }
.ft__cols { border-top: 1px solid var(--line-2); padding: var(--s-rule) 0 var(--s-block); row-gap: 32px; }
.ft__cols .mono { color: var(--ink-3); margin-bottom: 12px; }
.ft__cols li a, .ft address a { display: inline-block; padding: 3px 0; transition: color .2s; }
.ft__cols li a:hover, .ft address a:hover { color: var(--framboise); }
.ft address { font-style: normal; line-height: 1.75; }
.ft__bottom { border-top: 1px solid var(--line); padding-top: 18px; font-size: .84rem; color: var(--ink-3); }
.ft__bottom p { margin: 0; }
.ft__bottom ul { display: flex; flex-wrap: wrap; gap: 28px; }
.ft__bottom a:hover { color: var(--ink); }

.mbar { display: none; }

/* ---------- Visionneuse ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(36, 32, 29, .97); display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; padding: 64px 0 28px; opacity: 0; transition: opacity .35s; }
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
.lb__fig { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.lb__fig img { max-height: calc(100vh - 150px); max-width: 100%; width: auto; object-fit: contain; }
.lb__fig figcaption { color: var(--nuit-ink); margin-top: 14px; font-size: .92rem; }
.lb__nav { color: var(--nuit-ink); font-size: 1.5rem; height: 72px; }
.lb__nav:hover { color: var(--rose); }
.lb__close { position: absolute; top: 18px; right: 24px; color: var(--nuit-ink); font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.lb__close span { font-size: 1.4rem; font-family: var(--sans); }

/* ==========================================================================
   ANIMATIONS — sobres : fondu + léger glissement, volet sur les grandes photos
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .img-reveal::after { content: ""; position: absolute; inset: 0; background: var(--cover, var(--chaux)); transform-origin: 50% 0; transition: transform 1.2s var(--ease-io) .1s; z-index: 2; }
.js .in .img-reveal::after { transform: scaleY(0); }
.js .img-reveal img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.js .in .img-reveal img { transform: none; }
.js .hero__title .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero__title .ln:nth-child(2) > span { transition-delay: .1s; }
.js.loaded .hero__title .ln > span { transform: none; }
.js .hero__visual { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io) .15s; }
.js.loaded .hero__visual { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js .hero__visual { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .img-reveal::after { display: none; }
  .js .hero__title .ln > span, .slide img, .js .img-reveal img { transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .hd__tel { display: none; }
  .nav__list { gap: 20px; }
  .nav__list > li > a { font-size: .9rem; }
}

/* Tablette & mobile : grille de 4 colonnes, mêmes marges, mêmes règles */
@media (max-width: 960px) {
  .g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g > [class*="c1-"], .g > [class*="c4-"], .g > [class*="c5-"], .g > [class*="c7-"], .g > [class*="c9-"], .g > [class*="c10-"] { grid-column: 1 / -1; }

  .hd__in { height: 68px; }
  .hd__logo { grid-column: 1 / 3 !important; }
  .hd__logo img { height: 46px; }
  .nav { display: none; }
  .hd__actions { grid-column: 3 / 5 !important; }
  .hd__actions .btn { display: none; }
  .burger { display: block; margin-right: -10px; }

  .slides { aspect-ratio: 4 / 5; }
  .hero__head { row-gap: 24px; margin-bottom: 24px; }
  .hero__ctas .btn { height: 50px; }
  .slide img { object-position: 45% 60%; }
  .hero__foot { row-gap: 24px; }
  .facts li { grid-column: span 2 !important; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .facts b { font-size: 1.15rem; }

  .sh { row-gap: 16px; }
  .about { row-gap: 32px; }
  .sv__it .ph__img { aspect-ratio: 3 / 2; }

  .know { row-gap: 40px; }
  .spec { grid-template-columns: 40px 1fr; }
  .spec li { row-gap: 8px; }
  .spec li .idx { grid-column: 1; grid-row: 1; }
  .spec h3 { grid-column: 2; grid-row: 1; }
  .spec p { grid-column: 2; grid-row: 2; }
  .know__ph .ph__img { aspect-ratio: 3 / 2; }

  .filters-row { row-gap: 10px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .pf { row-gap: 40px; }
  .pf .pf__it { grid-column: span 2 !important; }
  .pf .pf__it.is-wide, .pf .pf__it.is-wide-m { grid-column: 1 / -1 !important; }
  .pf .pf__it .pf__btn { aspect-ratio: 4 / 5; min-height: 0; flex: none; }
  .pf .pf__it.is-wide .pf__btn, .pf .pf__it.is-wide-m .pf__btn { aspect-ratio: 3 / 2; }
  .pf .pf__it.is-fill .pf__btn img { position: static; }
  .pf.is-filtered .pf__it { grid-column: span 2 !important; }
  .pf.is-filtered .pf__btn { aspect-ratio: 4 / 5 !important; }
  .pf .cap { flex-wrap: wrap; row-gap: 2px; }
  .pf .cap__c { margin-left: 0; width: 100%; text-align: left; }

  .zone { row-gap: 40px; }
  .zone__map { order: -1; }
  .towns { columns: 2; column-gap: var(--gap); }
  .towns li { break-inside: avoid; }
  .zone__svg { overflow: hidden; }
  .zone__svg svg { width: 136%; margin-left: -18%; }
  .m-town text { font-size: 18px; }
  .m-home text { font-size: 21px; }
  .m-dept text, .m-ring text { font-size: 14px; }

  .contact { row-gap: 40px; }
  .contact__ph { display: none; }

  .ft__top { row-gap: 28px; }
  .ft__logo { height: 84px; }
  .ft__cols > div { grid-column: span 2 !important; }

  .mbar {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--chaux); border-top: 1px solid var(--line-2);
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .45s var(--ease);
  }
  .mbar.is-on { transform: none; }
  .mbar a { height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .94rem; }
  .mbar__tel { border: 1px solid var(--line-2); }
  .mbar__devis { background: var(--framboise); color: #fff; transition: background .3s; }
  .mbar__devis:hover { background: var(--ink); }
  .ft { padding-bottom: 96px; }
  .lb { grid-template-columns: 44px 1fr 44px; }
}

@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
  .ft__cols > div { grid-column: 1 / -1 !important; }
  .facts b { font-size: 1.05rem; }
}

/* ==========================================================================
   ALIGNEMENT OPTIQUE — labels calés sur le haut des capitales des titres
   text-box rogne l'interlignage au-dessus de la hauteur de capitale :
   tous les éléments d'une même ligne partent alors du même trait.
   ========================================================================== */
.sh { align-items: start; }
.sh > .label, .sh__t, .sh__p, .sh__aside,
.hero__title .ln, .spec li .idx, .spec h3, .spec p,
.sv__t > *, .know__lbl > *,
.facts .mono, .facts b,
.hero__cap .cap, .hero__lead,
.zone__lead, .form__title, .about__who, .know__num {
  text-box: trim-both cap alphabetic;
}
.spec li, .sv__t, .know__lbl { align-items: start; }
.sv__t, .know__lbl { gap: 0; }
.sv__t .idx, .know__lbl .idx { margin-right: 12px; }
/* Marge de sécurité autour des lignes du titre : l'animation masque sans rogner les lettres */
.hero__title .ln { padding: .14em 0 .2em; margin: -.14em 0 -.2em; }
.hero__title .ln + .ln { margin-top: 0; }

/* Hero desktop : la photo descend jusqu'au bas du premier écran.
   --hero-top est mesuré en JS (distance entre le haut de la page et la photo). */
@media (min-width: 961px) {
  .slides { aspect-ratio: auto; height: clamp(420px, calc(100svh - var(--hero-top, 270px)), 900px); }
}