/* ══════════════════════════════════════════════════════════════════════
   SFG BÂTI CONCEPT — style-v3.css

   Direction : MATIÈRE ET PROFONDEUR.
   Une rénovation, c'est une surface qui change d'état et de la lumière qui
   revient dans une pièce. Donc : les choses sortent de l'ombre, une lumière
   les balaye, et la matière est toujours une vraie photo — jamais un motif
   inventé.

   Aucun quadrillage. Aucun séparateur à motif. Aucun filet d'accent posé
   en haut d'une carte. Voir references/liste-noire.md du 28 août 2026.

   Provenance de chaque couleur : PROJET.md.
   Mobile d'abord. Uniquement des min-width. 600 / 900 / 1200 / 1560.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. POLICES ──────────────────────────────────────────────────────── */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/fraunces-variable.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;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/fraunces-variable-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;
}
@font-face{
  font-family:'Satoshi';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/satoshi-variable.woff2') format('woff2');
}


/* ── 2. JETONS ───────────────────────────────────────────────────────── */

:root{
  /* Le cube du logo, échantillonné au pixel sur logo-hero.webp */
  --encre:#071726;
  --nuit:#0a1f3c;
  --profond:#0e4a75;
  --bleu:#1c6398;
  --arete:#3c7ea5;
  --lumiere:#68abc5;
  --ciel:#84cdeb;

  /* Le travail livré, échantillonné sur les photos de chantier */
  --noyer:#6b4a24;
  --chene:#b89878;
  --laiton:#c08a3e;
  --grege:#a09888;
  --papier:#f2efe9;
  --craie:#ffffff;

  /* Textes — ratios calculés, voir PROJET.md */
  --sur-sombre:#e9e4dd;      /* 14,3:1 sur encre */
  --sur-sombre-2:#93a7ba;    /*  7,3:1 sur encre */
  --sur-clair:#0a1f3c;       /* 15,8:1 sur papier */
  --sur-clair-2:#4d6070;     /*  5,2:1 sur papier */
  --sur-carte-2:#c3d0dc;     /*  5,0:1 sur une carte sombre posee sur du clair */

  /* L'accent change avec le fond : le bleu de marque ne survit pas sur
     l'encre (2,84:1). Piège nommé dans CLAUDE.md, ici mesuré. */
  --accent:#1c6398;
  --accent-hi:#84cdeb;

  --filet-clair:rgba(10,31,60,.13);
  --filet-sombre:rgba(132,205,235,.15);

  /* Rayons : deux familles, rien d'autre */
  --pilule:9999px;
  --r:1.375rem;

  /* Ombres : deux couches, nappe large teintée de la marque */
  --ombre:0 1px 2px rgba(7,23,38,.05),0 30px 60px -28px rgba(28,99,152,.38);
  --ombre-haute:0 2px 5px rgba(7,23,38,.07),0 52px 92px -34px rgba(28,99,152,.52);
  --ombre-nuit:0 1px 2px rgba(0,0,0,.45),0 44px 80px -30px rgba(0,0,0,.8);

  --pose:cubic-bezier(.19,.86,.28,1);
  --sortie:cubic-bezier(.4,0,.2,1);
  --duree:.4s;
  --lente:.85s;

  --conteneur:1400px;
  --gouttiere:clamp(1.25rem,5vw,4rem);
  --nav-h:70px;
  --barre-h:0px;
}


/* ── 3. RESET ────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Un display: pose sur une classe l'emporte sur le display:none de [hidden].
   Sans cette ligne, tout element cache par le JS reste a l'ecran : c'est ce
   qui bloquait les filtres de la galerie et laissait le bouton
   « Voir X photos de plus » sur un filtre qui n'en avait pas. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100svh;
  /* la barre d'action mobile est fixe : sans cette reserve elle recouvre
     la fin du pied de page */
  padding-bottom:var(--barre-h);
  font-family:'Satoshi','Segoe UI',system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6;font-weight:400;
  color:var(--sur-clair);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--ciel);outline-offset:3px}

.saut{
  position:absolute;top:-70px;left:1rem;z-index:2000;
  background:var(--bleu);color:#fff;padding:.75rem 1.4rem;
  border-radius:0 0 var(--r) var(--r);font-weight:700;
  transition:top var(--duree) var(--sortie);
}
.saut:focus{top:0}
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ── 4. CONTENANTS ET RYTHME ─────────────────────────────────────────── */

.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere)}
.etroit{width:100%;max-width:72ch;margin-inline:auto;padding-inline:var(--gouttiere)}
.tres-large{width:100%;max-width:1760px;margin-inline:auto;padding-inline:clamp(.75rem,2.5vw,1.75rem)}

.bande{padding-block:clamp(3.5rem,9vw,7rem);position:relative;isolation:isolate}
.bande-fine{padding-block:clamp(2.25rem,5vw,3.75rem);position:relative;isolation:isolate}
/* Deux bandes de meme valeur qui se suivent doublaient leur gouttiere :
   ca faisait un trou. La seconde n'ouvre plus sa reserve du haut. */
.bande-suite{padding-block-start:0}

.papier{background:var(--papier);color:var(--sur-clair)}
.craie{background:var(--craie);color:var(--sur-clair)}

/* L'encre est réservée aux moments qui comptent : la preuve, la personne,
   la conversion. Sa texture est une VRAIE photo de matière, très voilée,
   jamais un motif dessiné. */
.encre{
  background:var(--encre);
  color:var(--sur-sombre);
}
.encre-fond{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  opacity:.5;
}
.encre::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(78% 58% at 14% 8%,rgba(28,99,152,.42) 0%,transparent 68%),
    radial-gradient(62% 52% at 92% 96%,rgba(14,74,117,.5) 0%,transparent 62%),
    linear-gradient(172deg,rgba(9,29,48,.8) 0%,rgba(7,23,38,.9) 46%,rgba(4,11,20,.95) 100%);
}
.encre h2,.encre h3,.encre h4{color:#fff}
.encre .accent{color:var(--accent-hi)}
.encre p{color:var(--sur-sombre-2)}
.encre p strong{color:var(--sur-sombre)}


/* ── 5. TYPOGRAPHIE ──────────────────────────────────────────────────── */

h1,h2,h3,h4,.titre{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:640;line-height:1.04;letter-spacing:-.014em;
  font-variation-settings:'opsz' 96,'SOFT' 24,'WONK' 0;
  text-wrap:balance;color:var(--sur-clair);
}
.t1{
  font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:650;letter-spacing:-.02em;
  font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 0;
}
.t2{
  font-size:clamp(2rem,4.8vw,3.5rem);letter-spacing:-.018em;line-height:1.06;
  font-variation-settings:'opsz' 144,'SOFT' 28,'WONK' 0;
}
.t3{
  font-size:clamp(1.42rem,2.9vw,2.15rem);letter-spacing:-.012em;line-height:1.12;
  font-variation-settings:'opsz' 72,'SOFT' 22,'WONK' 0;
}
.t4{
  font-size:clamp(1.1rem,1.7vw,1.3rem);font-weight:640;letter-spacing:-.004em;line-height:1.24;
  font-variation-settings:'opsz' 30,'SOFT' 18,'WONK' 0;
}

.chapeau{
  font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.58;
  max-width:60ch;color:var(--sur-clair-2);
}
.encre .chapeau{color:var(--sur-sombre-2)}
.accent{color:var(--accent)}

/* Étiquette : capitales espacées, rien devant. Le marqueur ajouté se
   voyait comme un ornement rapporté. */
.etiquette{
  display:block;
  font-family:'Satoshi',sans-serif;font-size:.73rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.85rem;
}
.encre .etiquette{color:var(--accent-hi)}
.chiffres{font-variant-numeric:tabular-nums}


/* ── 6. BOUTONS ──────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.6rem;border-radius:var(--pilule);
  font-family:'Satoshi',sans-serif;font-weight:700;font-size:1rem;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--duree) var(--pose),box-shadow var(--duree) var(--sortie);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}

.btn-plein{
  background:linear-gradient(138deg,var(--arete) 0%,var(--bleu) 46%,var(--profond) 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),var(--ombre);
}
/* La lumière suit le curseur — micro-interaction, pas geste narratif */
.btn-plein::after{
  content:'';position:absolute;inset:-60%;z-index:-1;
  background:radial-gradient(closest-side,rgba(132,205,235,.62),transparent 70%);
  opacity:0;transform:translate(var(--sx,0),var(--sy,0));
  transition:opacity var(--duree) var(--sortie);
}
.btn-plein:hover::after,.btn-plein:focus-visible::after{opacity:1}
.btn-plein:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--ombre-haute)}

.btn-contour{
  color:var(--sur-clair);
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1.5px rgba(10,31,60,.22);
}
.btn-contour:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--bleu)}
.encre .btn-contour,.sur-photo .btn-contour{
  color:var(--sur-sombre);background:rgba(132,205,235,.08);
  box-shadow:inset 0 0 0 1.5px rgba(132,205,235,.34);
}
.encre .btn-contour:hover,.sur-photo .btn-contour:hover{
  background:rgba(132,205,235,.17);box-shadow:inset 0 0 0 1.5px var(--ciel);
}

.btn-tel{
  background:linear-gradient(138deg,#8a6231,var(--noyer));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(7,23,38,.1),0 30px 58px -28px rgba(107,74,36,.7);
}

.paire{display:flex;flex-wrap:wrap;gap:.7rem}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;color:var(--accent);
}
.encre .lien-fleche{color:var(--accent-hi)}
.lien-fleche svg{width:17px;height:17px;transition:transform var(--duree) var(--pose)}
.lien-fleche:hover svg{transform:translateX(5px)}


/* ── 7. BARRE DE NAVIGATION ──────────────────────────────────────────── */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;padding-inline:var(--gouttiere);
  transition:background var(--duree) var(--sortie),box-shadow var(--duree) var(--sortie);
}
/* Le verre a du sens ici : la barre flotte réellement au-dessus. */
.nav.posee{
  background:rgba(7,23,38,.66);
  backdrop-filter:blur(40px) saturate(2);
  -webkit-backdrop-filter:blur(40px) saturate(2);
  box-shadow:inset 0 -1px 0 rgba(132,205,235,.16),0 20px 44px -26px rgba(0,0,0,.85);
}
.nav-marque{display:flex;align-items:center;flex:none;margin-inline-end:auto}
.nav-logo{height:40px;width:auto;object-fit:contain}
.nav-liens{display:none}
.nav-tel{display:none}
.nav-actions{display:flex;align-items:center;gap:.55rem;flex:none}

.burger{
  width:46px;height:46px;flex:none;display:grid;place-content:center;gap:5px;
  border-radius:var(--pilule);background:rgba(132,205,235,.1);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.24);
}
.burger span{
  display:block;width:19px;height:2px;border-radius:var(--pilule);background:var(--sur-sombre);
  transition:transform var(--duree) var(--pose),opacity .16s linear;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:890;
  background:linear-gradient(168deg,#0b2439,var(--encre) 58%,#040d16);
  padding:clamp(1.25rem,5vw,2.25rem) var(--gouttiere) 2.5rem;
  overflow-y:auto;display:flex;flex-direction:column;
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity var(--duree) var(--sortie),transform var(--duree) var(--pose);
}
.menu.ouvert{opacity:1;transform:none;pointer-events:auto}
.menu-lien{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem .1rem;border-bottom:1px solid var(--filet-sombre);
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.42rem;color:#fff;
  transition:padding-inline-start var(--duree) var(--pose),color var(--duree) var(--sortie);
}
.menu-lien:hover{padding-inline-start:.6rem;color:var(--ciel)}
.menu-lien[aria-current="page"]{color:var(--ciel)}
.menu-index{font-family:'Satoshi',sans-serif;font-size:.7rem;letter-spacing:.16em;color:var(--arete);font-variant-numeric:tabular-nums}
.menu-sous{display:flex;flex-wrap:wrap;gap:.4rem;padding:.85rem 0 1.1rem;border-bottom:1px solid var(--filet-sombre)}
.menu-sous a{
  padding:.45rem .85rem;border-radius:var(--pilule);
  background:rgba(132,205,235,.09);box-shadow:inset 0 0 0 1px rgba(132,205,235,.18);
  font-size:.92rem;color:var(--sur-sombre);
}
.menu-sous a:hover{background:rgba(132,205,235,.2)}
.menu .btn{margin-top:1.5rem}
.menu-contact{
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--filet-sombre);
  display:grid;gap:.3rem;color:var(--sur-sombre-2);font-size:.94rem;
}
.menu-contact strong{
  display:block;font-family:'Fraunces',Georgia,serif;font-size:1.6rem;color:var(--ciel);
  letter-spacing:-.02em;font-weight:600;
}


/* ── 8. PREMIER ÉCRAN ────────────────────────────────────────────────── */
/* Il doit tenir dans l'écran. Vérifié à 1440×900 avant tout le reste. */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 1.75rem) 2.5rem;
  background:var(--encre);
}
.hero-photo{
  position:absolute;inset:0;z-index:-3;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.5s var(--sortie);
}
.hero-photo.active{opacity:1}
.hero-photo:nth-of-type(1){background-image:url('../images/hero/hero-1-mobile.webp')}

/* Voile oblique : dense d'un côté, la matière reste lisible de l'autre.
   Réglé pour que le bois garde sa chaleur — c'est tout l'intérêt. */
.hero-voile{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(103deg,rgba(5,16,28,.92) 0%,rgba(6,20,34,.8) 30%,rgba(7,23,38,.42) 58%,rgba(7,23,38,.14) 82%,rgba(7,23,38,.04) 100%),
    linear-gradient(to top,rgba(4,12,21,.82) 0%,rgba(5,16,28,.22) 32%,transparent 58%);
}
.hero-lueur{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 58% at 74% 46%,rgba(28,99,152,.42) 0%,transparent 72%),
    radial-gradient(58% 64% at 76% 48%,rgba(4,12,21,.5) 0%,rgba(4,12,21,.2) 46%,transparent 72%);
}
.hero-corps{position:relative;width:100%;display:grid;gap:clamp(2rem,4vw,3rem);align-items:center}
.sur-photo{color:var(--sur-sombre)}
.sur-photo h1{color:#fff}
.hero-titre{margin-bottom:.8rem}
.hero-phrase{
  font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.48;max-width:48ch;
  color:rgba(233,228,221,.88);margin-bottom:1.15rem;
}

/* Pastille de verre : les trois informations du métier, tout de suite */
.pastille{
  display:grid;border-radius:var(--r);overflow:hidden;margin-bottom:1.15rem;
  background:rgba(9,26,44,.5);
  backdrop-filter:blur(36px) saturate(2);
  -webkit-backdrop-filter:blur(36px) saturate(2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(132,205,235,.16),
             0 30px 60px -32px rgba(0,0,0,.9);
}
.pastille-item{padding:.65rem 1rem;border-bottom:1px solid rgba(132,205,235,.12);display:grid;gap:.05rem}
.pastille-item:last-child{border-bottom:0}
.pastille-cle{
  font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--lumiere);
}
.pastille-val{font-size:.96rem;color:var(--sur-sombre);line-height:1.32}
.pastille-val a{border-bottom:1px solid rgba(132,205,235,.4)}
.pastille-note{font-size:.83rem;color:var(--sur-sombre-2)}

/* L'araignée : le cube du logo au centre, les chantiers en orbite.
   Au survol d'un nœud, une ligne se trace et la photo de fond du premier
   écran bascule sur ce chantier. Le logo devient le sommaire du métier. */
.toile{display:none}


/* ── 9. BANDEAU D'ANNONCE ────────────────────────────────────────────── */
/* Réservé à la décennale. Reste hidden tant que l'assureur et le numéro
   de police ne sont pas fournis. On n'invente pas un document. */

.annonce{
  background:linear-gradient(100deg,var(--noyer) 0%,#8a6231 54%,#a2763c 100%);
  color:#fff;padding:.8rem var(--gouttiere);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1rem;text-align:center;font-size:.96rem;
}
.annonce-cle{
  font-weight:800;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.3rem .78rem;border-radius:var(--pilule);
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}


/* ── 10. BANDE DES TROIS INFORMATIONS ────────────────────────────────── */
/* Filets verticaux, étiquette en capitales, valeur en grand. Aucune icône :
   l'étiquette suffit et se lit mieux. */

.infos{background:var(--craie);border-bottom:1px solid var(--filet-clair)}
.infos-grille{display:grid}
.infos-item{padding:1.3rem 0;border-bottom:1px solid var(--filet-clair)}
.infos-item:last-child{border-bottom:0}
.infos-cle{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.3rem;
}
.infos-val{
  display:block;
  font-family:'Fraunces',Georgia,serif;font-weight:620;
  font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.022em;line-height:1.1;
  color:var(--sur-clair);
}
.infos-note{display:block;font-size:.93rem;color:var(--sur-clair-2);margin-top:.15rem}


/* ── 11. LES PRESTATIONS ─────────────────────────────────────────────── */
/* Quatre rangées éditoriales, pas quatre cartes. Chacune porte sa grande
   illustration et alterne de côté. */

.presta{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.presta-rang{display:grid;gap:1.6rem;align-items:center}
.presta-visuel{
  position:relative;isolation:isolate;
  display:grid;place-items:center;
  aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%;
}
.presta-visuel::before{
  content:'';position:absolute;inset:6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,var(--halo,rgba(28,99,152,.4)),transparent 72%);
  filter:blur(38px);
}
.presta-visuel img{width:100%;height:auto;object-fit:contain}
.presta-num{
  font-family:'Fraunces',Georgia,serif;font-weight:640;font-size:.8rem;
  letter-spacing:.16em;color:var(--lumiere);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.5rem;
}
.presta-corps h3{margin-bottom:.8rem}
.presta-corps p{color:var(--sur-sombre-2);margin-bottom:1rem;max-width:52ch}
.presta-liste{display:grid;gap:.55rem;margin-bottom:1.4rem}
.presta-liste li{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.99rem;color:var(--sur-sombre);
}
.presta-liste li::before{
  content:'';width:7px;height:7px;flex:none;margin-top:.55rem;
  background:var(--ciel);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}


/* ── 12. LE CHANTIER QUI AVANCE — scène épinglée ─────────────────────── */
/* La méthode n'est pas une liste de cartes : c'est une pièce qui passe du
   brut au fini pendant qu'on défile. C'est le geste du métier. */

.scene{position:relative}
.scene-colle{position:sticky;top:var(--nav-h);min-height:60svh;display:grid;align-content:center}
.scene-cadre{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:4/3;background:var(--nuit);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.14),var(--ombre-nuit);
}
.scene-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .7s var(--sortie),transform 1.4s var(--pose);
}
.scene-photo.active{opacity:1;transform:none}
.scene-jauge{
  position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;
  height:3px;border-radius:var(--pilule);background:rgba(132,205,235,.2);overflow:hidden;
}
.scene-jauge span{
  display:block;height:100%;width:0;border-radius:var(--pilule);
  background:linear-gradient(90deg,var(--arete),var(--ciel));
  transition:width .25s linear;
}
.scene-etapes{display:grid;gap:1rem;margin-top:2rem}
.scene-etape{
  padding:1.15rem 1.3rem;border-radius:var(--r);
  background:rgba(132,205,235,.05);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.1);
  transition:background var(--duree) var(--sortie),box-shadow var(--duree) var(--sortie);
}
.scene-etape{position:relative;opacity:.5;transition:opacity var(--duree) var(--sortie),
  background var(--duree) var(--sortie),box-shadow var(--duree) var(--sortie)}
.scene-etape[data-active="true"]{
  opacity:1;
  background:linear-gradient(120deg,rgba(28,99,152,.34),rgba(14,74,117,.22));
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.4),0 18px 40px -22px rgba(0,0,0,.8);
}
.scene-etape[data-active="true"]::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:3px;
  border-radius:var(--pilule);background:linear-gradient(var(--ciel),var(--arete));
}
.scene-etape h3{font-size:1.12rem;margin-bottom:.3rem;color:#fff}
.scene-etape p{font-size:.96rem;color:var(--sur-sombre-2);margin:0}
.scene-etape-cle{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lumiere);display:block;margin-bottom:.35rem;
}


/* ── 13. AVANT / APRÈS — LE DIPTYQUE À CHARNIÈRE ─────────────────────── */
/* Le comparateur à poignée a été retiré le 29 août 2026 sans avoir jamais
   servi. Farhad photographie au téléphone, jamais deux fois du même point :
   un volet qui balaie entre deux cadrages différents fait sauter le plafond
   et se lit comme un bug. Il cachait en plus la moitié du travail en
   permanence, et ne répondait qu'au pointeur.

   À la place : les deux photos entières, jointes par une charnière de
   lumière. Chacune garde SON ratio, et elles sont ramenées à la même hauteur
   par un flex-grow égal au rapport largeur/hauteur — la seule façon
   d'aligner deux photos de formats différents sans en recadrer une. Les
   classes de ratio sont écrites par _outils/chantiers.py d'après les
   dimensions natives : aucun attribut style dans le HTML (piège n°1). */

.diptyques{display:grid;gap:clamp(2.6rem,6vw,4.6rem)}

.dip-tete{margin-bottom:.9rem}
.dip-lieu{
  font-size:.73rem;font-weight:700;letter-spacing:.2em;line-height:1.5;
  text-transform:uppercase;color:var(--sur-clair-2);margin-top:.4rem;
}
.encre .dip-lieu{color:var(--sur-sombre-2)}

.diptyque{
  display:flex;flex-direction:column;
  border-radius:var(--r);overflow:hidden;
  background:var(--nuit);box-shadow:var(--ombre);
}
.dip-part{position:relative;min-width:0;flex:none}
.dip-part img{width:100%;height:auto}
/* La charnière : un filet de lumière, jamais une gouttière. Les deux photos
   se touchent, sinon l'œil lit deux cartes au lieu d'un seul endroit. */
.dip-apres{box-shadow:inset 0 2px 0 rgba(132,205,235,.5)}
/* Le verre est calcule pour le PIRE fond possible : une photo blanche.
   A .62 d'opacite, la pastille Apres tombait a 2,98:1 sur la faience blanche.
   A .8, le fond compose vaut #363c42 sur blanc : 8,35:1 pour le texte clair,
   7,0:1 pour le ciel. Mesure sur la composition reelle, pas sur les jetons. */
.dip-cle{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:var(--pilule);
  background:rgba(4,12,21,.8);color:var(--sur-sombre);
  backdrop-filter:blur(20px) saturate(1.9);-webkit-backdrop-filter:blur(20px) saturate(1.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Meme verre que la pastille Avant : seule la couleur du texte et le liseré
   changent. Le degrade bleu clair d'origine ne survivait pas sur du blanc. */
.dip-apres .dip-cle{
  color:#a8ddf3;
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.55);
}
.dip-mot{margin-top:.95rem;max-width:66ch;color:var(--sur-clair-2)}
.dip-mot strong{color:var(--sur-clair)}
.encre .dip-mot{color:var(--sur-sombre-2)}
.encre .dip-mot strong{color:var(--sur-sombre)}

/* Les classes de ratio (.rNNN) vivent dans la rupture 600 : sous 600px le
   diptyque est empilé et un flex-basis de 0% y écraserait les photos. */


/* ── 13 quater. LE COMPARATEUR À POIGNÉE ─────────────────────────────── */
/* KINONE tient au volet qui glisse, et c'est lui qui juge à l'œil : il est
   remis le 29 août 2026. Deux défauts de la version v3, qui n'avait jamais
   servi, sont corrigés :

   1. SANS JAVASCRIPT, LE DIPTYQUE RESTE. La classe .comparateur est posée
      par le JS ; l'état par défaut du CSS est le diptyque, complet et
      lisible. Règle d'or tenue : rien n'est masqué au repos.
   2. LA POIGNÉE EST UN input[type=range]. Glisser, cliquer, toucher, les
      flèches du clavier et le lecteur d'écran marchent nativement. L'ancien
      ne répondait qu'au pointeur.

   Réserve consignée : un volet impose un cadre commun aux deux photos, donc
   un recadrage. Farhad ne photographie pas deux fois du même point, et ses
   « avant » sont souvent plus étroits que ses « après ». Le cadre prend le
   ratio de l'APRÈS — le résultat livré reste entier — et l'avant est rogné
   au centre. C'est la seule exception assumée à la règle du ratio natif, et
   chaque paire a été regardée en capture après recadrage. */

.diptyque.comparateur{
  display:block;position:relative;width:100%;
  aspect-ratio:var(--ratio-cadre,.75);
  touch-action:pan-y;
}
.comparateur .dip-part{position:absolute;inset:0;flex:none}
.comparateur .dip-part img{width:100%;height:100%;object-fit:cover}
.comparateur .dip-apres{box-shadow:none;clip-path:inset(0 0 0 var(--coupe,50%))}
.comparateur .dip-apres .dip-cle{left:auto;right:.75rem}

.dip-trait{
  position:absolute;top:0;bottom:0;left:var(--coupe,50%);width:2px;z-index:3;
  transform:translateX(-1px);pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--ciel) 10%,var(--ciel) 90%,transparent);
}
.dip-bouton{
  position:absolute;top:50%;left:var(--coupe,50%);z-index:4;
  transform:translate(-50%,-50%);pointer-events:none;
  width:48px;height:48px;border-radius:var(--pilule);
  display:grid;place-content:center;
  background:rgba(6,18,31,.82);
  backdrop-filter:blur(22px) saturate(1.9);-webkit-backdrop-filter:blur(22px) saturate(1.9);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.5),0 12px 30px -12px rgba(0,0,0,.9);
}
.dip-bouton svg{width:20px;height:20px;stroke:var(--ciel)}

/* La poignée EST le curseur : piste et pouce transparents, le dessin visible
   est .dip-bouton, qui suit --coupe comme le trait. */
.dip-curseur{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;padding:0;background:transparent;cursor:ew-resize;
  appearance:none;-webkit-appearance:none;
}
.dip-curseur::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:48px;height:48px;border-radius:50%;background:transparent;cursor:ew-resize;
}
.dip-curseur::-moz-range-thumb{
  width:48px;height:48px;border:0;border-radius:50%;background:transparent;cursor:ew-resize;
}
.dip-curseur:focus-visible{outline:3px solid var(--ciel);outline-offset:4px}

/* Ratio du cadre = ratio de la photo d'après. Écrit par _outils/chantiers.py. */
.c750{--ratio-cadre:0.75}
.c1333{--ratio-cadre:1.3333}


/* ── 13 bis. LA LIGNE DE VITRIFICATION ───────────────────────────────── */
/* Trois photos où l'avant et l'après sont dans le même cadre : la limite du
   rouleau. Bento, jamais trois cartes identiques. */

.vitrif{display:grid;gap:clamp(.7rem,1.6vw,1rem)}
.vitrif figure{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--nuit);box-shadow:var(--ombre-nuit);
}
.vitrif img{width:100%;height:auto}
.vitrif figcaption{
  padding:.85rem clamp(.9rem,2vw,1.15rem) 1rem;
  font-size:.9rem;line-height:1.45;color:var(--sur-sombre-2);
  background:linear-gradient(160deg,rgba(20,50,78,.62),rgba(7,23,38,.9));
}
.vitrif figcaption strong{color:#fff;font-weight:700}


/* ── 13 ter. LES SIX ÉTAGES ──────────────────────────────────────────── */
/* La preuve n'est pas une photo, c'est la répétition : six niveaux
   rigoureusement identiques. Sous 900px, un rail poussé au doigt — rien ne
   bouge tout seul, le visiteur commande. */

.etages{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(45vw,1fr);
  gap:clamp(.7rem,1.6vw,1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.5rem;
  margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);
}
.etages::-webkit-scrollbar{display:none}
.etage{scroll-snap-align:start}
.etage-cadre{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--nuit);box-shadow:var(--ombre);
  transition:transform var(--duree) var(--pose),box-shadow var(--duree) var(--sortie);
}
.etage-cadre img{width:100%;height:auto;transition:transform 1s var(--pose)}
.etage-cadre:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute)}
.etage-cadre:hover img{transform:scale(1.04)}
.etage-niveau{
  padding:.55rem .15rem 0;font-size:.73rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.encre .etage-niveau{color:var(--accent-hi)}

.cage{display:grid;gap:clamp(.7rem,1.6vw,1rem);margin-top:clamp(1.7rem,3.5vw,2.5rem)}
/* Le mot de la fin n'est pas une legende de plus : il lui faut de l'air. */
.cage + .dip-mot{margin-top:clamp(1.6rem,3vw,2.3rem)}
/* Le rayon et l'ombre vont sur l'IMAGE, pas sur la figure : un overflow:hidden
   sur la figure rognait la legende posee dessous. Vu en capture le 29 aout. */
.cage .etage-cadre{border-radius:var(--r);box-shadow:var(--ombre)}
.cage img{width:100%;height:auto}
.cage figcaption{padding:.55rem .15rem 0;font-size:.9rem;line-height:1.4;color:var(--sur-clair-2)}
.encre .cage figcaption{color:var(--sur-sombre-2)}


/* ── 14. LES CHANTIERS — maçonnerie légendée ─────────────────────────── */

.filtres{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}
.filtre{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem 1rem;
  border-radius:var(--pilule);background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(10,31,60,.12);
  font-size:.94rem;font-weight:600;color:var(--sur-clair-2);
  transition:background var(--duree) var(--sortie),color var(--duree) var(--sortie),
             box-shadow var(--duree) var(--sortie);
}
.filtre:hover{background:#fff;color:var(--sur-clair)}
.filtre[aria-pressed="true"]{
  background:linear-gradient(138deg,var(--arete),var(--bleu) 58%,var(--profond));
  color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),var(--ombre);
}
.encre .filtre{
  background:rgba(132,205,235,.07);box-shadow:inset 0 0 0 1px rgba(132,205,235,.16);
  color:var(--sur-sombre-2);
}
.encre .filtre:hover{background:rgba(132,205,235,.16);color:#fff}
.filtre-n{font-variant-numeric:tabular-nums;opacity:.66;font-size:.84rem}

.maconnerie{columns:1;column-gap:clamp(.7rem,1.6vw,1rem)}
.chantier{break-inside:avoid;margin-bottom:clamp(.7rem,1.6vw,1rem)}
.chantier.masque{display:none}
.chantier-cadre{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--nuit);box-shadow:var(--ombre);
  transition:transform var(--duree) var(--pose),box-shadow var(--duree) var(--sortie);
}
.chantier-cadre img{width:100%;height:auto;transition:transform 1s var(--pose)}
.chantier-cadre::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(178deg,transparent 46%,rgba(4,12,21,.78) 100%);
  opacity:0;transition:opacity var(--duree) var(--sortie);
}
.chantier-cadre:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute)}
.chantier-cadre:hover img{transform:scale(1.045)}
.chantier-cadre:hover::after{opacity:1}
.chantier-loupe{
  position:absolute;right:.65rem;bottom:.65rem;z-index:2;
  width:38px;height:38px;border-radius:var(--pilule);display:grid;place-content:center;
  background:rgba(9,26,44,.66);
  backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.3);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--duree) var(--sortie),transform var(--duree) var(--pose);
}
.chantier-loupe svg{width:16px;height:16px;stroke:var(--ciel)}
.chantier-cadre:hover .chantier-loupe{opacity:1;transform:none}
/* La légende prouve la maîtrise, donne au client les mots pour demander la
   même chose, et nourrit le référencement. */
.chantier-legende{padding:.55rem .15rem 0;font-size:.9rem;line-height:1.4;color:var(--sur-clair-2)}
.encre .chantier-legende{color:var(--sur-sombre-2)}
.plus{display:flex;justify-content:center;margin-top:2rem}


/* ── 14 bis. LES CARTES DE CHANTIER ──────────────────────────────────── */
/* Le filtre « Par chantier » remplace la maçonnerie par une carte par
   chantier : on choisit un lieu, puis on voit tout ce qui s'y est fait.
   Les cartes sont bâties par le JS, jamais posées dans le HTML : un bouton
   inerte sans JavaScript n'a rien à faire dans la page. */

.chantiers-cartes{
  display:grid;grid-template-columns:1fr;
  gap:clamp(.7rem,1.6vw,1rem);
}
.carte-chantier{
  display:grid;grid-template-rows:auto auto auto auto;gap:.15rem;
  text-align:left;padding:0 0 1rem;border-radius:var(--r);
  background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(242,239,233,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,31,60,.07),var(--ombre);
  overflow:hidden;
  transition:transform var(--duree) var(--pose),box-shadow var(--duree) var(--sortie);
}
.carte-chantier:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute)}
.carte-chantier-cadre{display:block;overflow:hidden;background:var(--nuit);margin-bottom:1rem}
.carte-chantier-cadre img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1s var(--pose);
}
.carte-chantier:hover .carte-chantier-cadre img{transform:scale(1.045)}
.carte-chantier-nom{
  font-family:'Fraunces',Georgia,serif;font-weight:640;
  font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.24;letter-spacing:-.004em;
  color:var(--sur-clair);padding-inline:clamp(1rem,2.2vw,1.3rem);
}
.carte-chantier-quoi{
  font-size:.9rem;line-height:1.4;color:var(--sur-clair-2);
  padding-inline:clamp(1rem,2.2vw,1.3rem);margin-top:.2rem;
}
.carte-chantier-n{
  font-size:.73rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding-inline:clamp(1rem,2.2vw,1.3rem);margin-top:.7rem;
}

/* La zone d'un chantier ouvert : son nom, ce qui y a ete fait, le retour. */
.chantier-zone{
  display:grid;grid-template-columns:1fr;gap:.3rem;justify-items:start;
  margin-bottom:1.6rem;padding:1.1rem clamp(1rem,2.4vw,1.5rem) 1.25rem;
  border-radius:var(--r);
  background:linear-gradient(152deg,rgba(255,255,255,.94),rgba(242,239,233,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,31,60,.07),var(--ombre);
}
.chantier-zone-retour{
  min-height:44px;display:inline-flex;align-items:center;gap:.4rem;
  margin-bottom:.35rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  transition:color var(--duree) var(--sortie),transform var(--duree) var(--sortie);
}
.chantier-zone-retour:hover{color:var(--bleu);transform:translateX(-3px)}
.chantier-zone-nom{
  font-family:'Fraunces',Georgia,serif;font-weight:640;
  font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.18;letter-spacing:-.008em;
  color:var(--sur-clair);
}
.chantier-zone-quoi{font-size:.95rem;line-height:1.45;color:var(--sur-clair-2)}

/* Le renvoi vers la section avant / apres, dans la meme barre que les filtres. */
.filtre-vers{text-decoration:none}
.filtre-vers::after{content:"↓";opacity:.7;font-weight:700}

/* La pilule qui ramène aux cartes se distingue de celles qui filtrent. */
.filtre-chantier[aria-pressed="true"]{letter-spacing:.01em}

/* ── 15. VISIONNEUSE ─────────────────────────────────────────────────── */

.vision{
  position:fixed;inset:0;z-index:1000;display:none;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(3,10,18,.95);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.vision.ouverte{display:grid}
.vision img{max-width:min(100%,1080px);max-height:76svh;width:auto;border-radius:var(--r);box-shadow:var(--ombre-nuit)}
.vision-legende{margin-top:.9rem;text-align:center;color:var(--sur-sombre);max-width:60ch;font-size:.97rem}
.vision-fermer,.vision-prec,.vision-suiv{
  position:absolute;width:52px;height:52px;border-radius:var(--pilule);
  display:grid;place-content:center;background:rgba(132,205,235,.1);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.28);
  transition:background var(--duree) var(--sortie);
}
.vision-fermer:hover,.vision-prec:hover,.vision-suiv:hover{background:rgba(132,205,235,.24)}
.vision-fermer{top:1rem;right:1rem}
.vision-prec{left:1rem;top:50%;transform:translateY(-50%)}
.vision-suiv{right:1rem;top:50%;transform:translateY(-50%)}
.vision svg{width:20px;height:20px;stroke:var(--sur-sombre)}


/* ── 16. OBJECTIONS ──────────────────────────────────────────────────── */
/* La phrase que le visiteur se dit, entre guillemets, et la réponse
   calmement dessous. Vaut mieux qu'une FAQ. */

.objections{display:grid;gap:clamp(.9rem,2vw,1.2rem)}
.objection{
  padding:clamp(1.25rem,2.6vw,1.8rem);border-radius:var(--r);
  background:linear-gradient(154deg,rgba(255,255,255,.94),rgba(242,239,233,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,31,60,.06),var(--ombre);
}
.encre .objection{
  background:linear-gradient(154deg,rgba(20,50,78,.6),rgba(9,27,46,.72));
  box-shadow:inset 0 1px 0 rgba(132,205,235,.16),inset 0 0 0 1px rgba(132,205,235,.11),var(--ombre-nuit);
}
.objection-dit{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.26rem);line-height:1.24;letter-spacing:-.016em;
  color:var(--sur-clair);margin-bottom:.65rem;
}
.encre .objection-dit{color:#fff}
.objection p{color:var(--sur-clair-2);line-height:1.58;margin:0}
.objection p strong{color:var(--sur-clair)}
.encre .objection p{color:var(--sur-sombre-2)}
.encre .objection p strong{color:var(--sur-sombre)}


/* ── 17. LE MOT DU GÉRANT ────────────────────────────────────────────── */

.gerant{
  display:grid;gap:1.5rem;align-items:center;
  padding:clamp(1.5rem,3.5vw,2.6rem);border-radius:var(--r);
  background:linear-gradient(154deg,rgba(20,50,78,.86),rgba(9,27,46,.96));
  box-shadow:inset 0 1px 0 rgba(132,205,235,.18),inset 0 0 0 1px rgba(132,205,235,.12),var(--ombre-nuit);
}
.gerant-portrait{
  width:104px;height:104px;flex:none;border-radius:var(--pilule);object-fit:cover;
  box-shadow:0 0 0 3px rgba(132,205,235,.22),0 20px 38px -18px rgba(0,0,0,.9);
}
.gerant-mot{
  font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.06rem,2vw,1.36rem);line-height:1.4;letter-spacing:-.014em;color:#fff;
}
.gerant p.gerant-mot{color:#fff}            /* 8,90:1 sur la carte */
.gerant p.gerant-nom{
  font-family:'Fraunces',Georgia,serif;font-weight:620;font-size:1.1rem;
  color:#9ad8f0;margin-top:1rem;             /* 5,00:1 sur le coin le plus clair */
}
.gerant p.gerant-role{font-size:.93rem;color:var(--sur-sombre)}  /* 7,04:1 */


/* ── 18. CHIFFRES ────────────────────────────────────────────────────── */

.chiffres-grille{display:grid;gap:clamp(1.1rem,2.5vw,1.8rem)}
.chiffre-val{
  font-family:'Fraunces',Georgia,serif;font-weight:660;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:.96;letter-spacing:-.035em;
  color:var(--laiton);font-variant-numeric:tabular-nums;
}
.chiffre-leg{margin-top:.45rem;font-size:.96rem;color:var(--sur-sombre-2);max-width:26ch}


/* ── 19. COMMUNES ────────────────────────────────────────────────────── */

.communes{display:flex;flex-wrap:wrap;gap:.45rem}
.commune{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;
  border-radius:var(--pilule);background:rgba(132,205,235,.08);
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.18);
  color:var(--sur-sombre);font-size:.95rem;
  transition:background var(--duree) var(--sortie),transform var(--duree) var(--pose);
}
.commune:hover{background:rgba(132,205,235,.2);transform:translateY(-2px)}
.commune svg{width:14px;height:14px;flex:none;opacity:.68}
.commune-cp{font-size:.78rem;color:var(--lumiere);font-variant-numeric:tabular-nums}
.papier .commune,.craie .commune{
  background:rgba(28,99,152,.07);box-shadow:inset 0 0 0 1px rgba(28,99,152,.18);color:var(--sur-clair);
}
.papier .commune:hover,.craie .commune:hover{background:rgba(28,99,152,.14)}
.papier .commune-cp,.craie .commune-cp{color:var(--accent)}


/* ── 20. FORMULAIRE ──────────────────────────────────────────────────── */

.form{display:grid;gap:.9rem}
.champ{display:grid;gap:.35rem}
.champ-x2{display:grid;gap:.9rem}
.champ label{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--sur-clair-2)}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;border-radius:var(--r);
  background:#fff;border:1px solid rgba(10,31,60,.15);color:var(--sur-clair);
  transition:border-color var(--duree) var(--sortie),box-shadow var(--duree) var(--sortie);
}
.champ textarea{min-height:148px;resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(28,99,152,.15);
}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(77,96,112,.6)}
.champ-err{font-size:.85rem;color:#a3311f;display:none}
.champ.invalide .champ-err{display:block}
.champ.invalide input,.champ.invalide textarea,.champ.invalide select{
  border-color:#a3311f;box-shadow:0 0 0 4px rgba(163,49,31,.12);
}
.form-note{font-size:.87rem;color:var(--sur-clair-2)}
.form-piege{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.carte{
  padding:clamp(1.3rem,3vw,2.1rem);border-radius:var(--r);
  background:linear-gradient(154deg,rgba(255,255,255,.96),rgba(248,246,242,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,31,60,.06),var(--ombre);
}
.carte-nuit{
  padding:clamp(1.3rem,3vw,2.1rem);border-radius:var(--r);color:var(--sur-sombre);
  background:linear-gradient(154deg,rgba(20,50,78,.82),rgba(9,27,46,.94));
  box-shadow:inset 0 1px 0 rgba(132,205,235,.16),inset 0 0 0 1px rgba(132,205,235,.11),var(--ombre-nuit);
}
.carte-nuit h2,.carte-nuit h3{color:#fff}
/* La carte se compose sur une bande claire : elle remonte en luminance,
   et les gris de fond sombre n'y passent plus. Mesure : --sur-clair-2
   donnait 1,21:1, --sur-sombre-2 3,18:1. */
.carte-nuit p{color:var(--sur-carte-2)}
.carte-nuit p.form-note{color:var(--sur-carte-2)}
.carte-nuit .form-note{color:var(--sur-carte-2)}


/* ── 21. TÊTE DE PAGE ────────────────────────────────────────────────── */

.tete{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4rem)) clamp(2.25rem,5vw,3.5rem);
  background:var(--encre);color:var(--sur-sombre);
}
.tete-photo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:.4}
.tete::after{
  content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(64% 60% at 82% 20%,rgba(28,99,152,.4) 0%,transparent 68%),
    linear-gradient(101deg,rgba(5,16,28,.94) 0%,rgba(7,23,38,.8) 44%,rgba(7,23,38,.5) 100%);
}
.tete h1{color:#fff;margin-bottom:.8rem}
.tete .chapeau{color:rgba(233,228,221,.85)}
.tete .paire{margin-top:1.5rem}

.ariane{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.84rem;color:var(--sur-sombre-2);margin-bottom:1.2rem}
.ariane a{color:var(--lumiere)}
.ariane a:hover{color:var(--ciel);text-decoration:underline}
.ariane span[aria-current]{color:var(--sur-sombre)}
.ariane-sep{opacity:.45}


/* ── 22. PIED DE PAGE ────────────────────────────────────────────────── */

.pied{background:linear-gradient(178deg,#061420,#030b13);color:var(--sur-sombre-2);padding-block:clamp(2.6rem,6vw,4rem) 1.5rem}
.pied-grille{display:grid;gap:2rem}
.pied-logo{height:52px;width:auto;margin-bottom:.9rem}
.pied-texte{max-width:36ch;font-size:.95rem;line-height:1.58}
.pied-titre{font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--lumiere);margin-bottom:.8rem}
.pied-liens{display:grid;gap:.5rem}
.pied-liens a,.pied-liens li{font-size:.96rem}
.pied-liens a{transition:color var(--duree) var(--sortie)}
.pied-liens a:hover{color:var(--ciel)}
.pied-bas{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(132,205,235,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;justify-content:space-between;align-items:center;font-size:.86rem;
}
.pied-legal{display:flex;flex-wrap:wrap;gap:1rem}
.pied-legal a:hover{color:var(--ciel)}


/* ── 23. BARRE D'ACTION MOBILE ───────────────────────────────────────── */

.barre{
  position:fixed;inset:auto 0 0 0;z-index:880;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(132,205,235,.16);
  box-shadow:0 -20px 44px -26px rgba(0,0,0,.9);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:58px;padding:.6rem;font-weight:700;font-size:.95rem}
.barre svg{width:18px;height:18px;flex:none}
.barre-tel{background:linear-gradient(138deg,#8a6231,var(--noyer));color:#fff}
.barre-devis{background:linear-gradient(138deg,var(--arete),var(--bleu) 55%,var(--profond));color:#fff}


/* ── 24. LA LUMIÈRE QUI RÉVÈLE ───────────────────────────────────────── */
/* Rien n'apparaît en fondu. Une lumière balaye la surface dans l'axe de
   l'éclairage — le geste du rouleau. Pourquoi ce mouvement pour ce métier :
   ce métier passe sur une surface jusqu'à ce qu'elle soit couverte.

   RÈGLE D'OR : l'état par défaut est l'état final visible. La classe qui
   masque est posée par le JS. Sans JS, tout est là. */

.revele.va-reveler{
  opacity:0;
  transform:translate3d(0,26px,0);
  -webkit-mask-image:linear-gradient(103deg,#000 0 30%,rgba(0,0,0,.35) 48%,transparent 62%);
  mask-image:linear-gradient(103deg,#000 0 30%,rgba(0,0,0,.35) 48%,transparent 62%);
  -webkit-mask-size:340% 100%;mask-size:340% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* L'amplitude laterale est reservee au desktop : sous 900px elle
   provoquait un debordement horizontal. Voir rupture 900. */
.revele.revelee{
  opacity:1;transform:none;
  -webkit-mask-position:0 0;mask-position:0 0;
  transition:opacity .55s var(--sortie),
             transform var(--lente) var(--pose),
             -webkit-mask-position 1.15s var(--pose),
             mask-position 1.15s var(--pose);
}


/* ── 25. RUPTURE 600 ─────────────────────────────────────────────────── */

@media (min-width:600px){
  .chantiers-cartes{grid-template-columns:repeat(2,1fr)}

  /* Le diptyque passe en charniere verticale. Les classes de ratio ramenent
     les deux photos a la meme hauteur sans en recadrer aucune. */
  .diptyque{flex-direction:row}
  .dip-apres{box-shadow:inset 2px 0 0 rgba(132,205,235,.5)}
  .r570{flex:0.5699 1 0%}
  .r572{flex:0.5719 1 0%}
  .r750{flex:0.75 1 0%}
  .r1333{flex:1.3333 1 0%}
  .vitrif{grid-template-columns:repeat(2,1fr)}
  .etages{grid-auto-columns:minmax(30vw,1fr)}
  .cage{grid-template-columns:repeat(3,1fr)}

  body{font-size:1.125rem}
  .pastille{grid-template-columns:repeat(3,1fr)}
  .pastille-item{border-bottom:0;border-right:1px solid rgba(132,205,235,.12)}
  .pastille-item:last-child{border-right:0}
  .infos-grille{grid-template-columns:repeat(3,1fr)}
  .infos-item{border-bottom:0;border-right:1px solid var(--filet-clair);padding:1.5rem clamp(1rem,3vw,2rem)}
  .infos-item:first-child{padding-left:0}
  .infos-item:last-child{border-right:0;padding-right:0}
  .maconnerie{columns:2}
  .objections{grid-template-columns:repeat(2,1fr)}
  .champ-x2{grid-template-columns:1fr 1fr}
  .chiffres-grille{grid-template-columns:repeat(2,1fr)}
  .gerant{grid-template-columns:auto 1fr;gap:1.9rem}
  .pied-grille{grid-template-columns:repeat(2,1fr)}
  .scene-etapes{grid-template-columns:repeat(2,1fr)}
}


/* ── 26. RUPTURE 900 ─────────────────────────────────────────────────── */

@media (min-width:900px){
  .chantiers-cartes{grid-template-columns:repeat(3,1fr)}

  /* La colonne photo est dimensionnee PAR la photo (auto), pas l'inverse :
     un comparateur portrait ne doit pas flotter au milieu d'une colonne de
     830px. Le cadre est plafonne en hauteur — a 62% de 1400px un portrait
     ferait 1170px de haut et on ne verrait plus les deux etats d'un coup
     d'oeil. Les deux rangees 1fr de part et d'autre centrent le texte en
     regard de la photo sans wrapper supplementaire.
     Un bloc sur deux entre par l'autre cote : c'est ce qui donne le rythme
     a la suite de cinq. Sous 900px tout s'empile dans l'ordre naturel
     titre / photos / phrase, d'ou les zones nommees. */
  .dip{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". photo" "tete photo" "mot photo" ". photo";
    column-gap:clamp(2rem,4.5vw,3.8rem);
  }
  .dip-tete{grid-area:tete}
  /* Sans JavaScript le diptyque reste un flex de deux photos : dans une
     colonne 'auto', sa largeur max-content vaut la somme des largeurs
     natives (2482px) et la page debordait. Le plafond ferme la porte. */
  .dip .diptyque{grid-area:photo;align-self:center;max-width:min(64vw,940px)}
  .dip .diptyque.comparateur{height:min(70svh,700px);width:auto;max-width:100%}
  /* L'accroche de l'accueil n'a pas de colonne de texte a cote : sans
     plafond elle prenait 1400px de large et 1867px de haut. */
  .dip-accroche .diptyque.comparateur{height:min(58svh,520px);width:auto;margin-inline:auto}
  .dip .dip-mot{grid-area:mot;margin-top:1.15rem;max-width:46ch}
  .dip:nth-child(even){
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"photo ." "photo tete" "photo mot" "photo .";
  }


  /* Six etages cote a cote : c'est la repetition qui fait la preuve, pas la
     photo. Le rail glissant ne sert plus au-dela de 900px. */
  .etages{
    grid-auto-flow:row;grid-template-columns:repeat(6,1fr);
    overflow:visible;margin-inline:0;padding-inline:0;
    gap:clamp(.7rem,1.6vw,1rem);
  }
  /* Bento : la ligne de vitrification tient toute la colonne de gauche,
     les deux autres s'empilent a droite. */
  .vitrif{grid-template-columns:1.05fr 1fr;align-items:start}
  .vitrif-grande{grid-row:span 2}

  :root{--nav-h:86px}

  .revele.va-reveler[data-revele="gauche"]{transform:translate3d(-56px,12px,0)}
  .revele.va-reveler[data-revele="droite"]{transform:translate3d(56px,12px,0)}

  .nav-liens{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
  .nav-lien{
    position:relative;padding-block:.35rem;font-weight:600;font-size:.95rem;
    color:rgba(233,228,221,.82);transition:color var(--duree) var(--sortie);
  }
  .nav-lien::after{
    content:'';position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:var(--pilule);
    background:linear-gradient(90deg,var(--ciel),var(--arete));
    transition:width var(--duree) var(--pose);
  }
  .nav-lien:hover{color:#fff}
  .nav-lien:hover::after,.nav-lien[aria-current="page"]::after{width:100%}
  .nav-lien[aria-current="page"]{color:var(--ciel)}
  .nav-tel{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.04rem;letter-spacing:-.015em;
    color:var(--sur-sombre);padding:.45rem .85rem;border-radius:var(--pilule);
    margin-inline-end:.35rem;
    transition:background var(--duree) var(--sortie);
  }
  .nav-tel svg{width:16px;height:16px;stroke:var(--ciel)}
  .nav-tel:hover{background:rgba(132,205,235,.12)}
  .nav-logo{height:56px}
  .burger,.menu,.barre{display:none}

  .hero{min-height:100svh}
  .hero-corps{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,3.5rem)}
  .hero-photo:nth-of-type(1){background-image:url('../images/hero/hero-1.webp')}

  /* L'ARAIGNÉE — visible seulement ici : sous 900 px elle volerait la
     place du texte, et le survol n'existe pas au doigt. */
  .toile{
    display:block;position:relative;
    width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1;
  }
  .toile-lignes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
  .toile-lignes{filter:drop-shadow(0 1px 2px rgba(4,12,21,.9))}
  .toile-lignes line{
    stroke:var(--ciel);stroke-width:1.25;
    stroke-dasharray:var(--l,300);stroke-dashoffset:0;
    opacity:.5;
    transition:opacity .35s var(--sortie),stroke-width .35s var(--sortie);
  }
  .toile-lignes line.tracee{opacity:1;stroke-width:2}
  .toile-centre{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:34%;z-index:3;
  }
  .toile-centre img{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.6))}
  .toile-halo{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:78%;aspect-ratio:1;border-radius:50%;z-index:0;
    background:radial-gradient(closest-side,rgba(28,99,152,.55),transparent 72%);
    filter:blur(42px);
  }
  .toile-noeud{
    position:absolute;top:50%;left:50%;z-index:2;
    width:112px;height:112px;margin:-56px 0 0 -56px;
    border-radius:1.5rem;overflow:hidden;
    transform:translate(var(--nx),var(--ny)) scale(1);
    box-shadow:inset 0 0 0 2px rgba(132,205,235,.5),0 20px 40px -12px rgba(0,0,0,.95);
    transition:transform .5s var(--pose),box-shadow var(--duree) var(--sortie);
  }
  .toile-noeud img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--pose)}
  .toile-noeud::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(160deg,rgba(7,23,38,0),rgba(7,23,38,.34));
    transition:opacity var(--duree) var(--sortie);
  }
  .toile-noeud:hover,.toile-noeud:focus-visible{
    transform:translate(var(--nx),var(--ny)) scale(1.16);
    box-shadow:inset 0 0 0 2px var(--ciel),0 24px 48px -16px rgba(0,0,0,.9);
  }
  .toile-noeud:hover::after{opacity:0}
  .toile-noeud:hover img{transform:scale(1.08)}
  .toile-etiquette{
    position:absolute;left:50%;top:calc(100% + .5rem);transform:translateX(-50%) translateY(4px);
    white-space:nowrap;font-size:.75rem;font-weight:700;letter-spacing:.02em;
    color:#fff;padding:.3rem .7rem;border-radius:var(--pilule);
    background:rgba(6,20,34,.82);
    backdrop-filter:blur(16px) saturate(1.6);
    -webkit-backdrop-filter:blur(16px) saturate(1.6);
    box-shadow:inset 0 0 0 1px rgba(132,205,235,.3);
    opacity:0;pointer-events:none;
    transition:opacity var(--duree) var(--sortie),transform var(--duree) var(--pose);
  }
  .toile-noeud:hover .toile-etiquette,.toile-noeud:focus-visible .toile-etiquette{
    opacity:1;transform:translateX(-50%) translateY(0);
  }

  .presta-rang{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem)}
  .presta-rang:nth-child(even) .presta-visuel{order:2}

  .scene{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .scene-colle{min-height:auto}
  .scene-etapes{grid-template-columns:1fr;margin-top:0;gap:.8rem}

  .maconnerie{columns:3}
  .objections{grid-template-columns:repeat(3,1fr)}
  .objections-x2{grid-template-columns:repeat(2,1fr)}
  .chiffres-grille{grid-template-columns:repeat(4,1fr)}
  .pied-grille{grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:2.4rem}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  .duo-decale{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
}


/* ── 27. RUPTURE 1200 ────────────────────────────────────────────────── */

@media (min-width:1200px){
  .maconnerie{columns:4}
  .toile{max-width:560px}
  .toile-noeud{width:126px;height:126px;margin:-63px 0 0 -63px}
}


/* ── 28. RUPTURE 1560 ────────────────────────────────────────────────── */

@media (min-width:1560px){
  :root{--conteneur:1480px}
}


/* ── 29. RYTHME DE PROSE ─────────────────────────────────────────────── */

.etroit h2{margin-top:2.3rem;margin-bottom:.65rem}
.etroit h2:first-child{margin-top:0}
.etroit p{color:var(--sur-clair-2)}
.etroit p + p{margin-top:.85rem}
.etroit p strong{color:var(--sur-clair)}
.encre .etroit p{color:var(--sur-sombre-2)}
.encre .etroit p strong{color:var(--sur-sombre)}
.etroit a:not(.btn):not(.lien-fleche):not(.commune){color:var(--accent);border-bottom:1px solid rgba(28,99,152,.32)}
.encre .etroit a:not(.btn):not(.lien-fleche):not(.commune){color:var(--accent-hi);border-bottom-color:rgba(132,205,235,.38)}

h1 + .chapeau,h2 + .chapeau{margin-top:.9rem}
.chapeau + .paire,.chapeau + .objections,.chapeau + .maconnerie,.chapeau + .communes,
.chapeau + .chiffres-grille,.chapeau + .presta,.chapeau + .scene,.chapeau + .filtres,
.chapeau + .diptyques,.chapeau + .vitrif,.chapeau + .etages{margin-top:2rem}
h2 + .objections,h2 + .maconnerie,h2 + .communes,h2 + .chiffres-grille,
h2 + .presta,h2 + .scene,h2 + .filtres,h2 + .diptyques,h2 + .vitrif,h2 + .etages{margin-top:2rem}
.carte h2,.carte-nuit h2{margin-bottom:.5rem}
.carte .form,.carte-nuit .form{margin-top:1.3rem}
.carte p + .paire,.carte-nuit p + .paire{margin-top:1.1rem}


/* ── 30. MOUVEMENT RÉDUIT ────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .revele.va-reveler{opacity:1;transform:none;-webkit-mask-image:none;mask-image:none}
  .hero-photo{transition:none}
}


/* ── 31. IMPRESSION ──────────────────────────────────────────────────── */

@media print{
  .nav,.menu,.barre,.vision,.hero-photo,.hero-lueur,.toile{display:none}
  body{background:#fff;color:#000}
  .encre{background:#fff;color:#000}
}


/* ── 32. HALOS DES ILLUSTRATIONS ─────────────────────────────────────── */
/* Chaque illustration pose derrière elle une lueur prise dans sa propre
   dominante — le bleu du cube pour les volumes, le bois pour les sols. */

.halo-renovation-complete{--halo:rgba(28,99,152,.44)}
.halo-salle-de-bain{--halo:rgba(60,126,165,.44)}
.halo-sols{--halo:rgba(184,152,120,.42)}
.halo-cloison{--halo:rgba(160,152,136,.4)}


/* ── 33. FOND DU PREMIER ÉCRAN PILOTÉ PAR L'ARAIGNÉE ─────────────────── */

.hero-photo-perso{
  background-size:cover;background-position:center;
  z-index:-3;
}


/* ── 34. AJUSTEMENTS DE COLONNE ──────────────────────────────────────── */

.duo .presta-visuel{max-width:460px;margin-inline:auto}
.duo-decale .bande-fine{padding-block:1.75rem 0}
.duo-decale .objections{grid-template-columns:1fr}
.carte-nuit + .bande-fine{margin-top:0}
.tete .etroit,.tete .conteneur{position:relative;z-index:1}
.plus .btn svg{width:17px;height:17px}

@media (max-width:899px){
  .duo,.duo-decale{display:grid;gap:2.25rem}
  .presta-visuel{max-width:400px;margin-inline:auto}
}


/* ── 35. VIGNETTES DES BLOCS DE DÉTAIL ───────────────────────────────── */
/* Une illustration par prestation détaillée, posée au-dessus du titre.
   Elles portent leur propre transparence : aucun fond, aucun cadre. */

.detail-vignette{
  width:clamp(84px,9vw,112px);height:auto;
  margin-bottom:.9rem;
  filter:drop-shadow(0 14px 22px rgba(4,12,21,.45));
}
.objection:has(.detail-vignette){padding-top:clamp(1.1rem,2.2vw,1.5rem)}


/* ── 36. LES HUIT DÉPARTEMENTS ───────────────────────────────────────── */
/* Ces pastilles-là portent une information, pas une liste d'exemples :
   elles se distinguent des communes citées à titre indicatif. */

.commune-fort{
  padding:.7rem 1.15rem;font-weight:700;
  background:linear-gradient(138deg,rgba(60,126,165,.28),rgba(14,74,117,.24));
  box-shadow:inset 0 1px 0 rgba(132,205,235,.2),inset 0 0 0 1px rgba(132,205,235,.3);
  color:#fff;
}
.commune-fort:hover{background:linear-gradient(138deg,rgba(60,126,165,.42),rgba(14,74,117,.34))}
.commune-fort .commune-cp{color:var(--ciel);font-weight:600}

/* La liste des communes vient après, en second rang */
.communes + .etiquette{margin-top:clamp(2.25rem,5vw,3.25rem)}

/* Les listes dans une carte sombre */
.carte-nuit .presta-liste li{color:var(--sur-carte-2)}
.carte-nuit .presta-liste li strong{color:#fff}
.carte-nuit .presta-liste{margin-block:1.1rem 1.2rem}

/* Un libellé en gras suivi de son texte sur la même ligne cassait mal :
   le deux-points restait seul en bout de ligne. Le libellé passe en bloc. */
.carte-nuit .presta-liste li{display:block;padding-inline-start:1.15rem;position:relative}
.carte-nuit .presta-liste li::before{position:absolute;left:0;top:.62rem;margin-top:0}
.carte-nuit .presta-liste li strong{display:block;margin-bottom:.05rem}


/* ── 37. LARGEURS INTERMÉDIAIRES ─────────────────────────────────────── */
/* Entre 900 et 1200 px, la barre de navigation cassait ses libellés sur
   deux lignes et la pastille du premier écran se retrouvait écrasée dans
   une demi-colonne. Contrôlé à 1024, 1150, 1280, 1440 et 1680. */

@media (min-width:900px){
  .nav-lien{white-space:nowrap}
  .nav-tel{white-space:nowrap}
  .nav .btn{white-space:nowrap}
}

@media (min-width:900px) and (max-width:1149px){
  .nav-liens{gap:1rem}
  .nav-lien{font-size:.9rem}
  .nav-tel{font-size:.95rem;padding-inline:.6rem}
  .nav .btn{padding-inline:1.15rem;font-size:.94rem}
  .nav-logo{height:48px}
  /* la pastille reprend toute la colonne plutôt que trois colonnes de 150 px */
  .pastille{grid-template-columns:1fr}
  .pastille-item{border-right:0;border-bottom:1px solid rgba(132,205,235,.12)}
  .pastille-item:last-child{border-bottom:0}
}

@media (min-width:1150px) and (max-width:1339px){
  .nav-liens{gap:1.3rem}
  .nav-lien{font-size:.92rem}
}


/* ── 38. SCÈNE : ILLUSTRATIONS D'ÉTAPE ───────────────────────────────── */
/* Les photos de chantier ne disaient pas l'étape : on voyait un mur, pas
   « la visite et l'étude ». Elles seront remplacées par quatre
   illustrations de la même famille, qui se posent entières dans le cadre
   au lieu de le remplir. */

.scene-illu{object-fit:contain;padding:clamp(1.25rem,4vw,3rem)}


/* ══════════════════════════════════════════════════════════════════════
   39. REPRISE MOBILE ET BARRE DE NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */

/* ── La marque : le cube ne dit que SFG, le nom complet s'écrit ──────── */

.nav-marque{gap:.6rem}
.nav-nom{
  font-family:'Fraunces',Georgia,serif;
  font-weight:640;font-size:.98rem;line-height:1.02;letter-spacing:-.01em;
  font-variation-settings:'opsz' 30,'SOFT' 20,'WONK' 0;
  color:#fff;white-space:nowrap;
}
.pied-marque{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.pied-marque .nav-nom{font-size:1.25rem}

/* ── La signature KINONE ─────────────────────────────────────────────── */

.pied-kinone{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;color:rgba(147,167,186,.7);
  transition:color var(--duree) var(--sortie);
}
.pied-kinone img{
  height:15px;width:auto;
  opacity:.62;transition:opacity var(--duree) var(--sortie);
}
.pied-kinone:hover{color:var(--sur-sombre)}
.pied-kinone:hover img{opacity:1}

/* ── Le rail glissant des aperçus de chantiers ───────────────────────── */
/* Empilées à la verticale, huit photos font défiler pendant dix secondes
   sur téléphone. Le rail se pousse au doigt : rien ne bouge tout seul. */

@media (max-width:599px){
  .maconnerie-rail{
    columns:auto;display:flex;gap:.7rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gouttiere) * -1);
    padding-inline:var(--gouttiere);
    padding-bottom:.5rem;
  }
  .maconnerie-rail::-webkit-scrollbar{display:none}
  .maconnerie-rail .chantier{
    flex:0 0 74%;margin-bottom:0;scroll-snap-align:start;
  }
  .maconnerie-rail .chantier-cadre img{aspect-ratio:3/4;object-fit:cover}
  .maconnerie-rail .chantier-legende{min-height:3.4em}
}

/* ── Le premier écran sur téléphone ──────────────────────────────────── */
/* La pastille en trois lignes couvrait la photo. Deux colonnes compactes,
   sans les notes, et le téléphone disparaît : il est en permanence dans la
   barre du bas, ce qui le rend plus atteignable que sur ordinateur. */

@media (max-width:599px){
  .pastille{grid-template-columns:1fr 1fr}
  .pastille-item{padding:.6rem .8rem;border-bottom:0;border-right:1px solid rgba(132,205,235,.12)}
  .pastille-item:last-child{border-right:0}
  .pastille-tel{display:none}
  .pastille-note{display:none}
  .pastille-cle{font-size:.6rem;letter-spacing:.14em}
  .pastille-val{font-size:.9rem;line-height:1.28}
  .hero{padding-block:calc(var(--nav-h) + 1.25rem) 2rem}
  .hero-phrase{margin-bottom:1rem;font-size:1rem;line-height:1.45}
  .hero-titre{margin-bottom:.65rem}
  /* « Demander un devis » est déjà en fixe dans la barre du bas */
  .hero .paire .btn-plein{display:none}
  .hero .paire .btn{width:100%}
}

/* La barre mobile porte déjà Appeler et Devis : la pilule de la barre du
   haut faisait doublon dans un espace déjà serré. */
@media (max-width:899px){
  .nav .btn{display:none}
  .nav-actions{gap:0}
}

/* ── Les quatre étapes sur téléphone ─────────────────────────────────── */
/* Plus de scène épinglée : chaque étape porte son illustration, et le
   texte est juste dessous. Le JS déplace les images, ce sont les mêmes. */

.scene-deroulee .scene-colle{display:none}
.scene-deroulee .scene-etape{opacity:1}
.scene-deroulee .scene-etape .scene-photo{
  position:static;width:100%;height:auto;opacity:1;transform:none;
  aspect-ratio:1;object-fit:contain;
  padding:0 0 .5rem;margin-bottom:.35rem;
}
.scene-deroulee .scene-etape{
  padding-top:1.35rem;
  background:linear-gradient(160deg,rgba(28,99,152,.16),rgba(14,74,117,.1));
  box-shadow:inset 0 0 0 1px rgba(132,205,235,.16);
}
.scene-deroulee .scene-etape::before{display:none}

/* Le pied de page portait l'ancien logo complet : à 52 px son lettrage
   était illisible. Même traitement que la barre de navigation. */
.pied-logo{height:46px;width:auto;margin-bottom:0}
.pied-marque .nav-nom{color:#fff}

/* Le premier écran mobile avait perdu sa présence : la photo n'occupait
   plus assez de hauteur pour qu'on reconnaisse le lieu. */
@media (max-width:899px){
  .hero{min-height:72svh}
}

/* « Demander un devis » cassait sur deux lignes dans la barre du bas à
   360 px. Contrôlé jusqu'à 320 px. */
.barre a{white-space:nowrap;font-size:.9rem;gap:.4rem;letter-spacing:-.01em}
.barre svg{width:17px;height:17px}
@media (max-width:359px){
  .barre a{font-size:.84rem;gap:.3rem}
  .barre svg{width:15px;height:15px}
}


/* ══════════════════════════════════════════════════════════════════════
   40. LE LOGO SUR TÉLÉPHONE, ET LE BLOC DES LOCAUX
   ══════════════════════════════════════════════════════════════════════ */

/* Sur ordinateur, l'araignée porte le cube en grand. Sous 900 px elle
   disparaît et il ne restait que la vignette de la barre : la marque
   n'existait plus à l'écran d'ouverture. */
.hero-cube{display:none}

@media (max-width:899px){
  .hero-cube{
    display:block;
    width:clamp(112px,30vw,158px);height:auto;
    margin-bottom:1.1rem;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));
  }
  .nav-logo{height:46px}
  .nav-nom{font-size:1.05rem}
}

/* Les coordonnées : une liste de définitions, pour que l'étiquette et sa
   valeur ne soient plus deux paragraphes collés l'un à l'autre. */
.coordonnees{margin-block:1.4rem 1.8rem;display:grid;gap:1.1rem}
.coordonnees dt{
  font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.3rem;
}
.coordonnees dd{
  font-size:1.06rem;line-height:1.5;color:var(--sur-clair);
}
.encre .coordonnees dt{color:var(--accent-hi)}
.encre .coordonnees dd{color:var(--sur-sombre)}
.bloc-locaux .paire{margin-bottom:1.1rem}
.bloc-locaux .form-note{max-width:52ch}

/* Sur l'accueil mobile, le cube apparaissait deux fois : dans la barre, et
   juste en dessous, en grand, dans le premier écran. Il ne gêne que tant
   qu'on est en haut. Il se retire donc de la barre au repos et y glisse
   au défilement, quand celui du héros a quitté l'écran.
   :has() n'est pas compris par les très vieux navigateurs : ils voient
   simplement les deux, ce qui n'est pas cassé. */
@media (max-width:899px){
  body:has(.hero) .nav-marque{gap:0}
  body:has(.hero) .nav-nom{
    font-size:1.14rem;line-height:1.06;white-space:normal;max-width:9ch;
    font-variation-settings:'opsz' 48,'SOFT' 22,'WONK' 0;
  }
  /* En haut : « SFG Bâti Concept » en toutes lettres, le cube est juste
     en dessous dans le héros. Au défilement : le cube prend la place du
     « SFG », qui se replie. L'un remplace l'autre, ils ne coexistent pas. */
  body:has(.hero) .nav-logo{
    width:0;opacity:0;
    transition:width .4s var(--pose),opacity .28s var(--sortie),
               margin-inline-end .4s var(--pose);
  }
  body:has(.hero) .nav.posee .nav-logo{width:46px;opacity:1;margin-inline-end:.6rem}
  /* L'espace apres « SFG » se faisait rogner par le repli : c'est une
     marge, pas un caractere, pour qu'elle disparaisse avec le mot. */
  body:has(.hero) .nav-nom-sfg{
    display:inline-block;overflow:hidden;vertical-align:bottom;
    white-space:nowrap;max-width:4em;padding-inline-end:.28em;opacity:1;
    transition:max-width .4s var(--pose),padding-inline-end .4s var(--pose),
               opacity .24s var(--sortie);
  }
  body:has(.hero) .nav.posee .nav-nom-sfg{max-width:0;padding-inline-end:0;opacity:0}
}
.nav-nom-sfg{display:none}
@media (min-width:900px){.nav-nom{max-width:7ch;white-space:normal}}