/* ===================================================================
   1. VARIABLES DE MARQUE
   -------------------------------------------------------------------
   >>> C'EST ICI ET NULLE PART AILLEURS QUE TU CHANGES LES COULEURS <<<
   Remplace les valeurs HEX par les codes exacts de ton logo.
   Tout le site (boutons, traits, survols, formulaire, footer) suit
   automatiquement ces variables.
   =================================================================== */
:root{

  /* --- COULEUR PRINCIPALE : le noir de la marque (textes, sections contrastées) --- */
  --c-principal:        #0E0E0E;   /* noir profond */
  --c-principal-soft:   #1C1C1C;   /* noir légèrement éclairci (survols sur fond noir) */

  /* --- COULEUR D'ACCENTUATION : le rouge OGB (boutons, traits, chiffres) --- */
  --c-accent:           #B50000;   /* rouge OGB : valeur relevée au pixel sur le logo (ancien : #9D1F13) */
  --c-accent-dark:      #880000;   /* même rouge assombri : états survol */
  --c-accent-soft:      rgba(181, 0, 0, .10); /* même rouge à 10% : fonds de badges */

  /* --- COULEURS DE FOND --- */
  --c-fond:             #FFFFFF;   /* BLANC : fond général, dominante du site */
  --c-fond-alt:         #F7F6F4;   /* blanc cassé : cartes et blocs en léger relief */
  --c-fond-contraste:   #0E0E0E;   /* NOIR : la seule grande section sombre (services) + pied de page */
  --c-photo:            #EFEDEA;   /* gris très clair : fond derrière les photos en cours de chargement */

  /* --- TEXTES ET LIGNES (dérivés, à ajuster seulement si besoin) --- */
  --c-texte:            #0E0E0E;
  --c-texte-doux:       #6B6660;   /* paragraphes secondaires */
  --c-texte-contraste:  #FFFFFF;   /* texte posé sur les sections noires */
  --c-texte-doux-contraste: rgba(255,255,255,.64); /* paragraphes sur fond noir */
  --c-ligne:            #E6E3DE;   /* filets et bordures */
  --c-ligne-contraste:  rgba(255,255,255,.16);

  /* --- TYPOGRAPHIE --- */
  --font-titre: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-texte: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* --- RYTHME ET FORMES --- */
  --max-largeur: 1280px;
  --gouttiere: clamp(20px, 5vw, 72px);
  --radius: 2px;                    /* lignes épurées : quasi aucun arrondi */
  --transition: cubic-bezier(.22,1,.36,1);
}

/* ===================================================================
   2. BASE
   =================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--c-fond);
  color:var(--c-texte);
  font-family:var(--font-texte);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
/* Sans cette règle, un élément masqué par l'attribut hidden reste visible dès
   qu'une classe lui donne un display (les boutons, par exemple). */
[hidden]{display:none!important;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-titre);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
}
p{margin:0;}
::selection{background:var(--c-accent);color:#fff;}

.wrap{max-width:var(--max-largeur);margin:0 auto;padding:0 var(--gouttiere);}
.section{padding:clamp(92px,12.5vw,190px) 0;position:relative;}
.section--nude{background:var(--c-fond-contraste);color:var(--c-texte-contraste);}
.section--nude h2,.section--nude h3{color:var(--c-texte-contraste);}

/* Titre de section : petit label + gros titre + filet qui se dessine */
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-accent);margin-bottom:24px;
}
.label::before{content:"";width:28px;height:2px;background:var(--c-accent);display:block;flex:none;}
.titre-section{
  font-size:clamp(2.2rem,5.5vw,4.4rem);
  max-width:16ch;
}
.chapeau{
  margin-top:22px;max-width:56ch;color:var(--c-texte-doux);font-size:1.05rem;
}
.section--nude .chapeau{color:var(--c-texte-doux-contraste);}

/* Filet horizontal qui se dessine au scroll */
.filet{height:1px;background:var(--c-ligne);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--transition);}
.section--nude .filet{background:var(--c-ligne-contraste);}
.is-visible .filet,.filet.is-visible{transform:scaleX(1);}

/* ===================================================================
   3. ANIMATIONS D'APPARITION AU DÉFILEMENT
   =================================================================== */
.js .reveal{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--transition),transform .9s var(--transition);
  transition-delay:var(--delai,0ms);}
.reveal.is-visible{opacity:1;transform:none;}

.reveal-masque{overflow:hidden;display:block;}
.js .reveal-masque > span{display:block;transform:translateY(105%);
  transition:transform 1s var(--transition);transition-delay:var(--delai,0ms);}
.is-visible .reveal-masque > span,.reveal-masque.is-visible > span{transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;}
  .reveal,.reveal-masque>span{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ===================================================================
   4. BOUTONS ET MICRO-INTERACTIONS
   =================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:18px 34px;border:1px solid transparent;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s var(--transition),border-color .45s var(--transition),transform .45s var(--transition);
}
.btn span{position:relative;z-index:2;}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .5s var(--transition);
}
.btn:hover::after{transform:translateY(0);}
.btn:active{transform:translateY(1px);}

.btn--plein{background:var(--c-accent);color:#fff;}
.btn--plein::after{background:var(--c-principal);}
.btn--ligne{background:transparent;border-color:var(--c-principal);color:var(--c-principal);}
.btn--ligne::after{background:var(--c-principal);}
.btn--ligne:hover{color:#fff;}
.btn--ligne-claire{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;}
.btn--ligne-claire::after{background:#fff;}
.btn--ligne-claire:hover{color:var(--c-principal);border-color:#fff;}

.fleche{width:16px;height:16px;flex:none;transition:transform .45s var(--transition);}
.btn:hover .fleche{transform:translateX(5px);}

/* Lien souligné animé */
.lien-anim{position:relative;font-weight:600;display:inline-block;padding-bottom:3px;}
.lien-anim::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--transition);}
.lien-anim:hover::after{transform:scaleX(1);transform-origin:left;}

/* ===================================================================
   5. EN-TÊTE
   =================================================================== */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .5s var(--transition),background .4s ease,border-color .4s ease,padding .4s ease;
  border-bottom:1px solid transparent;padding:18px 0;
  color:#fff;                                /* en haut de page : texte blanc sur la photo du hero */
}
.entete.est-pose{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--c-ligne);padding:10px 0;
  color:var(--c-texte);}                   /* après défilement : texte foncé sur fond crème */
.entete.est-cachee{transform:translateY(-105%);}
body.menu-ouvert .entete{color:var(--c-texte);background:transparent;
  border-bottom-color:transparent;backdrop-filter:none;}
.entete__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}

/* LOGO : voir la taille conseillée dans le commentaire HTML de la balise <img> */
.logo{display:block;position:relative;}
.logo img{height:62px;width:auto;transition:height .4s var(--transition),opacity .35s ease;}
.entete.est-pose .logo img{height:48px;}
/* Le logo reste invisible tant qu'on est en haut de page : l'enseigne OGB du
   visuel de fond fait déjà le travail. Il apparaît en fondu dès que l'en-tête
   passe en blanc au défilement, et dans le menu mobile ouvert. */
.js .logo{opacity:0;pointer-events:none;transition:opacity .45s var(--transition);}
.entete.est-pose .logo,
body.menu-ouvert .logo{opacity:1;pointer-events:auto;}

.nav{display:flex;align-items:center;gap:34px;}
.nav a{font-size:14px;font-weight:500;letter-spacing:.02em;position:relative;padding:4px 0;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--c-accent);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--transition);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.entete .btn{padding:13px 24px;font-size:12.5px;}

.burger{display:none;width:46px;height:46px;background:transparent;
  border:1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius:var(--radius);cursor:pointer;position:relative;color:inherit;}
.burger i{position:absolute;left:13px;width:20px;height:1.5px;background:currentColor;
  transition:transform .4s var(--transition),opacity .3s ease;}
.burger i:nth-child(1){top:17px;}
.burger i:nth-child(2){top:23px;}
.burger i:nth-child(3){top:29px;}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-ouvert .burger i:nth-child(2){opacity:0;}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Le menu occupe tout l'écran SOUS l'en-tête : la réserve du haut doit rester
   supérieure à la hauteur de l'en-tête (logo 62 px + 2 x 18 px de marge),
   sinon le premier lien passe derrière le logo. env(safe-area-inset-top)
   ajoute l'encoche des iPhone. */
.menu-mobile{
  position:fixed;inset:0;z-index:99;background:var(--c-fond);color:var(--c-texte);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(112px + env(safe-area-inset-top,0px)) var(--gouttiere)
          calc(30px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--transition);
  pointer-events:none;
}
body.menu-ouvert .menu-mobile{clip-path:inset(0 0 0 0);pointer-events:auto;}
.menu-mobile a{font-size:clamp(1.3rem,5.4vw,1.85rem);font-weight:800;letter-spacing:-.025em;
  padding:11px 0;opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--transition),transform .5s var(--transition);}
body.menu-ouvert .menu-mobile a{opacity:1;transform:none;}
body.menu-ouvert .menu-mobile a:nth-child(1){transition-delay:.16s;}
body.menu-ouvert .menu-mobile a:nth-child(2){transition-delay:.21s;}
body.menu-ouvert .menu-mobile a:nth-child(3){transition-delay:.26s;}
body.menu-ouvert .menu-mobile a:nth-child(4){transition-delay:.31s;}
body.menu-ouvert .menu-mobile a:nth-child(5){transition-delay:.36s;}
body.menu-ouvert .menu-mobile a:nth-child(6){transition-delay:.41s;}
.menu-mobile__pied{margin-top:34px;color:var(--c-texte-doux);font-size:14px;line-height:2;}

/* Écrans courts (iPhone SE, navigateur avec barres épaisses) : on resserre
   pour que les six entrées et les coordonnées tiennent sans défilement. */
@media (max-height:760px){
  .menu-mobile a{font-size:clamp(1.15rem,4.8vw,1.55rem);padding:8px 0;}
  .menu-mobile__pied{margin-top:22px;font-size:13.5px;line-height:1.85;}
}

/* ===================================================================
   6. HERO (photo de chantier en fond, plein écran)
   =================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:clamp(140px,16vw,190px);padding-bottom:clamp(52px,7vw,80px);
  overflow:hidden;background:var(--c-principal);}

.hero__fond{position:absolute;inset:0;z-index:0;}
.hero__fond picture{display:block;width:100%;height:100%;}
.hero__fond img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.1);opacity:0;animation:heroZoom 2.4s var(--transition) forwards;}
@keyframes heroZoom{to{transform:scale(1);opacity:1;}}

/* Voile dégradé : assez sombre en bas à gauche pour que le texte reste lisible,
   quasi transparent en haut pour ne pas écraser la photo. */
.hero__voile{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(14,14,14,.30) 0%, rgba(14,14,14,.05) 32%, rgba(14,14,14,.62) 100%),
    linear-gradient(90deg, rgba(14,14,14,.68) 0%, rgba(14,14,14,.22) 44%, rgba(14,14,14,0) 70%);}

.hero .wrap{position:relative;z-index:2;width:100%;}
.hero__accroche{color:#fff;font-size:clamp(2.7rem,6.6vw,5.4rem);max-width:12ch;line-height:1.03;}
.hero__accroche em{font-style:normal;color:#fff;
  -webkit-text-decoration:underline 4px var(--c-accent);text-decoration:underline 4px var(--c-accent);
  text-underline-offset:.14em;}
.hero__sous{margin-top:28px;max-width:50ch;color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.5vw,1.14rem);}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;margin-bottom:8px;}
/* coordonnées directement sous les boutons : sur mobile, un appel vaut dix formulaires */
.hero__contact{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  font-size:14.5px;color:rgba(255,255,255,.78);}
.hero__contact a{display:inline-flex;align-items:center;gap:9px;font-weight:600;
  transition:color .3s ease;}
.hero__contact a:hover{color:#fff;}
.hero__contact svg{width:16px;height:16px;flex:none;stroke:var(--c-accent);}

.hero__scroll{position:absolute;right:var(--gouttiere);bottom:52px;z-index:2;
  writing-mode:vertical-rl;color:rgba(255,255,255,.6);font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;display:flex;align-items:center;gap:14px;}
.hero__scroll::after{content:"";width:1px;height:56px;background:rgba(255,255,255,.4);
  animation:scrollLine 2.2s ease-in-out infinite;transform-origin:top;}
@keyframes scrollLine{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}

/* ===================================================================
   7. BANDEAU CHIFFRES CLÉS
   =================================================================== */
.chiffres{background:var(--c-fond-alt);border-bottom:1px solid var(--c-ligne);}
.chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);}
.chiffre{padding:clamp(40px,5vw,64px) clamp(18px,3vw,40px);border-right:1px solid var(--c-ligne);}
.chiffre:last-child{border-right:none;}
.chiffre__val{font-family:var(--font-titre);font-size:clamp(2.6rem,5vw,4rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;display:flex;align-items:baseline;gap:2px;}
.chiffre__val small{font-size:.42em;font-weight:700;color:var(--c-accent);letter-spacing:0;}
.chiffre__lib{margin-top:14px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-texte-doux);font-weight:500;}

/* ===================================================================
   8. RÉALISATIONS  (grille régulière + galerie plein écran)
   =================================================================== */
.entete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px);}

/* ---------------------------------------------------------------
   COMPARATEUR AVANT / APRÈS
   Les deux photos sont recalées au pixel près (même échelle, même
   cadrage), sinon l'effet de glissement ne veut rien dire.
   --------------------------------------------------------------- */
.avant-apres{display:grid;grid-template-columns:1fr minmax(0,470px);
  gap:clamp(30px,5vw,80px);align-items:center;
  margin-bottom:clamp(58px,7.5vw,100px);}
.avant-apres__tit{font-size:clamp(1.55rem,2.6vw,2.15rem);letter-spacing:-.03em;}
.avant-apres__txt p{margin-top:16px;color:var(--c-texte-doux);font-size:15.5px;line-height:1.65;}
.avant-apres__aide{margin-top:24px;display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-accent);}
.avant-apres__aide svg{width:16px;height:16px;}

.compare{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);
  background:var(--c-photo);cursor:ew-resize;user-select:none;touch-action:pan-y;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;}
.compare__apres{clip-path:inset(0 0 0 50%);}
.compare__poignee{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  z-index:3;transform:translateX(-1px);box-shadow:0 0 16px rgba(0,0,0,.35);}
.compare__poignee::after{content:"";position:absolute;top:50%;left:50%;
  width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.3);}
.compare__poignee::before{content:"‹ ›";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:2;color:var(--c-principal);
  font-size:19px;font-weight:700;letter-spacing:2px;white-space:nowrap;line-height:1;}
.compare__tag{position:absolute;bottom:16px;z-index:2;
  background:rgba(14,14,14,.74);color:#fff;backdrop-filter:blur(6px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:8px 14px;border-radius:var(--radius);}
.compare__tag--g{left:16px;}
.compare__tag--d{right:16px;background:var(--c-accent);}

/* Une seule règle de grille : trois colonnes égales, un seul format d'image.
   C'est la régularité qui fait l'effet « portfolio », pas la variété des tailles. */
.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.8vw,38px);}

.projet{display:flex;flex-direction:column;text-align:left;
  background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;}
.projet:focus-visible{outline:2px solid var(--c-accent);outline-offset:8px;}

.projet__media{position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);background:var(--c-photo);}
.projet__media img{width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,center);
  transition:transform 1s var(--transition);}
.projet:hover .projet__media img,
.projet:focus-visible .projet__media img{transform:scale(1.045);}

/* voile + libellé qui n'apparaissent qu'au survol : au repos, la photo est seule */
.projet__voile{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:rgba(14,14,14,.34);opacity:0;transition:opacity .4s var(--transition);}
.projet:hover .projet__voile,
.projet:focus-visible .projet__voile{opacity:1;}
.projet__voile span{background:#fff;color:var(--c-principal);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--radius);}

/* pastille « 4 photos », ajoutée automatiquement quand le chantier en compte plusieurs */
.projet__compte{position:absolute;top:12px;right:12px;z-index:2;
  display:flex;align-items:center;gap:6px;
  background:rgba(14,14,14,.7);color:#fff;backdrop-filter:blur(6px);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:7px 11px;border-radius:var(--radius);}
.projet__compte svg{width:13px;height:13px;flex:none;}

/* le texte passe SOUS l'image : plus lisible qu'en surimpression, et hiérarchie nette */
.projet__cat{margin-top:20px;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-accent);}
.projet__tit{margin-top:11px;font-size:clamp(1.12rem,1.4vw,1.3rem);letter-spacing:-.02em;}
.projet__det{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--c-texte-doux);}

/* ---------------------------------------------------------------
   GALERIE PLEIN ÉCRAN (lightbox)
   Clavier : ← → pour naviguer, Échap pour fermer.
   Tactile : balayage gauche/droite.
   --------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.985);
  backdrop-filter:blur(3px);
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s;}
/* la barre d'action mobile s'efface pendant la consultation de la galerie */
body.galerie-ouverte .barre-mobile{display:none;}
.lb.est-ouverte{visibility:visible;opacity:1;}
.lb__scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:clamp(76px,11vh,110px) 18px;touch-action:pan-y;}
.lb__img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:var(--radius);
  opacity:0;transform:scale(.99);
  transition:opacity .3s var(--transition),transform .3s var(--transition);}
.lb__img.est-chargee{opacity:1;transform:none;}

.lb__haut{position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:18px 18px 0;color:#fff;}
.lb__cat{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-accent);}
.lb__titre{margin-top:5px;font-size:15px;font-weight:600;}
.lb__fermer,.lb__nav{border:none;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  transition:background .3s ease,transform .3s var(--transition);}
.lb__fermer{width:48px;height:48px;flex:none;}
.lb__fermer:hover,.lb__nav:hover{background:var(--c-accent);}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;z-index:4;}
.lb__nav--prec{left:16px;}
.lb__nav--suiv{right:16px;}
.lb__nav[hidden]{display:none;}

/* pointer-events:none, sinon ce bloc pleine largeur capte les clics destinés
   aux flèches, qui passent en bas de l'écran sur mobile */
.lb__bas{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 18px 24px;color:rgba(255,255,255,.65);}
.lb__points{pointer-events:auto;}
.lb__compte{font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums;}
.lb__points{display:flex;gap:9px;}
.lb__point{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .3s ease,transform .3s var(--transition);}
.lb__point.est-active{background:var(--c-accent);transform:scale(1.35);}

/* ===================================================================
   8 bis. BANDEAU VIDÉO INSTAGRAM
   =================================================================== */
.videos{background:var(--c-fond-alt);border-top:1px solid var(--c-ligne);
  border-bottom:1px solid var(--c-ligne);overflow:hidden;}
.videos__entete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,54px);}

/* le logo Instagram accompagne le titre : on dit d'où viennent ces vidéos
   avant même d'avoir lu la phrase */
.titre-insta{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);}
.marque-insta{display:grid;place-items:center;flex:none;
  width:clamp(44px,4.4vw,62px);height:clamp(44px,4.4vw,62px);
  border-radius:14px;background:var(--c-accent);color:#fff;}
.marque-insta svg{width:58%;height:58%;}

.lien-insta{margin-top:20px;display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--c-texte);
  transition:color .3s ease;}
.lien-insta svg{width:19px;height:19px;flex:none;color:var(--c-accent);}
.lien-insta:hover{color:var(--c-accent);}

.insta-btn{display:grid;place-items:center;width:18px;height:18px;flex:none;}
.insta-btn svg{width:100%;height:100%;}

/* Grille de reels. Chaque carte contient l'intégration officielle Instagram,
   chargée seulement quand elle approche de l'écran (loading="lazy").
   Dessous, un lien de secours reste visible si l'intégration est bloquée. */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);}
.reel{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius);
  background:var(--c-principal);}
/* fond transparent : si l'intégration est bloquée (bloqueur de pub, réseau),
   l'iframe reste vide et laisse voir le lien de secours placé dessous */
.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;
  background:transparent;}
/* couche de secours, sous l'iframe : elle n'apparaît que si l'intégration ne charge pas */
.reel__secours{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.5;}
.reel__secours svg{width:30px;height:30px;color:var(--c-accent);}
.reel__secours span{text-decoration:underline;text-underline-offset:4px;}


/* ===================================================================
   9. CHRONOLOGIE DE CHANTIER
   Une ligne verticale, six jalons qui alternent de part et d'autre.
   Chaque jalon tient en trois éléments : un titre, deux phrases,
   trois mots-clés. C'est la contrainte qui rend la section lisible.
   =================================================================== */
.chrono{position:relative;display:grid;gap:clamp(34px,4vw,54px);padding:8px 0;}

/* la ligne se dessine de haut en bas quand la section entre à l'écran */
.chrono__ligne{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,var(--c-accent) 0%,rgba(181,0,0,.25) 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.8s var(--transition);}
.chrono__ligne.is-visible{transform:scaleY(1);}

.jalon{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;}

/* la pastille numérotée, posée sur la ligne */
.jalon__point{grid-column:2;justify-self:center;position:relative;z-index:2;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-fond-contraste);border:2px solid var(--c-accent);
  font-family:var(--font-titre);font-weight:800;font-size:15px;letter-spacing:-.02em;
  color:var(--c-accent);
  transition:background .5s var(--transition),color .5s var(--transition);}
.jalon:hover .jalon__point{background:var(--c-accent);color:#fff;}

.jalon__corps{grid-column:1;grid-row:1;text-align:right;}
.jalon:nth-of-type(even) .jalon__corps{grid-column:3;text-align:left;}

.jalon__tit{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.03em;}
.jalon__txt{margin-top:12px;font-size:15.5px;line-height:1.7;
  color:var(--c-texte-doux-contraste);max-width:42ch;margin-left:auto;}
.jalon:nth-of-type(even) .jalon__txt{margin-left:0;margin-right:auto;}

/* les mots-clés remplacent les listes à puces : même information, trois fois moins dense */
.jalon__cles{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.jalon:nth-of-type(even) .jalon__cles{justify-content:flex-start;}
/* Par défaut la chronologie est posée sur un fond clair (article Actualités).
   La variante claire sur fond noir est juste en dessous. */
.jalon__cles span{font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:7px 13px;border-radius:var(--radius);
  border:1px solid var(--c-ligne);color:var(--c-texte-doux);}
.section--nude .jalon__cles span{border-color:var(--c-ligne-contraste);
  color:rgba(255,255,255,.78);}

/* ===================================================================
   10. TÉMOIGNAGES
   =================================================================== */
.temoignages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.temoignage{background:var(--c-fond-alt);border:1px solid var(--c-ligne);
  padding:clamp(28px,3.4vw,42px);border-radius:var(--radius);
  transition:transform .5s var(--transition),box-shadow .5s var(--transition),border-color .5s ease;}
.temoignage:hover{transform:translateY(-6px);border-color:var(--c-accent);
  box-shadow:0 22px 50px -30px rgba(14,14,14,.4);}
.etoiles{color:var(--c-accent);letter-spacing:3px;font-size:14px;}
.temoignage blockquote{margin:20px 0 0;font-size:1.02rem;line-height:1.7;}
.temoignage figcaption{margin-top:26px;padding-top:18px;border-top:1px solid var(--c-ligne);
  font-size:13.5px;color:var(--c-texte-doux);}
.temoignage figcaption b{display:block;color:var(--c-texte);font-size:15px;font-weight:700;}

/* Bandeau logos / labels */
.labels{margin-top:clamp(50px,7vw,90px);padding-top:36px;border-top:1px solid var(--c-ligne);
  display:flex;align-items:center;gap:clamp(28px,5vw,70px);flex-wrap:wrap;}
.labels img{height:44px;width:auto;opacity:.45;filter:grayscale(1);
  transition:opacity .4s ease,filter .4s ease;}
.labels img:hover{opacity:1;filter:none;}

/* ===================================================================
   10 bis. GARANTIES · ZONE D'INTERVENTION · QUESTIONS FRÉQUENTES
   =================================================================== */
.garanties{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--c-ligne);border:1px solid var(--c-ligne);
  border-radius:var(--radius);overflow:hidden;}
.garantie{background:var(--c-fond);padding:clamp(26px,2.8vw,38px);
  transition:background .4s var(--transition);}
.garantie:hover{background:var(--c-fond-alt);}
.garantie__cle{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-texte-doux);}
.garantie__val{margin-top:12px;font-family:var(--font-titre);font-weight:800;
  font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.03em;color:var(--c-accent);}
.garantie__txt{margin-top:14px;font-size:14.5px;line-height:1.65;color:var(--c-texte-doux);}

/* Zone d'intervention : bande claire, pas une section pleine.
   L'information est utile mais ne doit pas peser autant qu'un chantier. */
.zone{background:var(--c-fond-alt);border-top:1px solid var(--c-ligne);
  border-bottom:1px solid var(--c-ligne);padding:clamp(60px,7vw,96px) 0;}
.zone__grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);}
.zone__liste{margin:0;padding:0;list-style:none;display:grid;gap:20px;}
.zone__liste li{display:grid;grid-template-columns:170px 1fr;gap:18px;
  padding-bottom:20px;border-bottom:1px solid var(--c-ligne);}
.zone__liste li:last-child{border-bottom:none;padding-bottom:0;}
.zone__liste b{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-accent);padding-top:3px;}
.zone__liste span{font-size:15px;line-height:1.7;color:var(--c-texte-doux);}

/* Questions fréquentes : <details> natifs, ils fonctionnent sans JavaScript */
.faq{border-top:1px solid var(--c-ligne);}
.faq__item{border-bottom:1px solid var(--c-ligne);}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding:clamp(22px,2.4vw,30px) 0;
  font-family:var(--font-titre);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  transition:color .3s ease;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"";margin-left:auto;flex:none;width:14px;height:14px;
  border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .35s var(--transition);}
.faq__item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.faq__item summary:hover{color:var(--c-accent);}
.faq__item summary:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;}
.faq__txt{padding:0 0 clamp(24px,2.6vw,32px);max-width:72ch;}
.faq__txt p{color:var(--c-texte-doux);font-size:15.5px;line-height:1.75;}

.faq__apres{margin-top:clamp(36px,4.5vw,56px);display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;}
.faq__apres p{font-size:16px;font-weight:600;max-width:34ch;}
.faq__apres__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ===================================================================
   11. CONTACT / DEVIS
   =================================================================== */
/* ---------------------------------------------------------------
   SECTION DEVIS : c'est elle qui transforme un visiteur en client.
   Elle était en blanc entre deux sections blanches, donc invisible.
   Trois changements : un fond légèrement teinté qui la détache, un filet
   rouge en haut de section, et le formulaire posé sur une carte blanche
   en relief. Pour la rendre plus discrète, il suffit de supprimer ce bloc.
   --------------------------------------------------------------- */
.section--devis{background:var(--c-fond-alt);border-bottom:1px solid var(--c-ligne);}
.section--devis::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--c-accent);}
/* Le mot mis en rouge dans le titre de section */
.titre-accent{color:var(--c-accent);}

/* Trois blocs : le texte, les coordonnées, le simulateur. Sur grand écran
   le formulaire occupe toute la colonne de droite. Sur mobile l'ordre change :
   texte, puis SIMULATEUR, puis coordonnées, pour que le formulaire arrive
   avant le numéro de téléphone et ne soit pas repoussé en bas de page. */
.contact__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:clamp(40px,6vw,90px);row-gap:44px;align-items:start;}
.contact__infos{grid-column:1;grid-row:1;}
.coord{grid-column:1;grid-row:2;}
.contact__grille .simu{grid-column:2;grid-row:1 / span 2;}
.contact__infos p{color:var(--c-texte-doux);}

/* Les trois arguments qui lèvent les freins, juste sous le chapeau */
.atouts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px;}
.atouts li{display:inline-flex;align-items:center;gap:8px;background:var(--c-fond);
  border:1px solid rgba(181,0,0,.3);border-radius:100px;padding:8px 15px;
  font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--c-accent);}
.atouts li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--c-accent);flex:none;}
.coord{margin-top:0;display:grid;gap:26px;align-content:start;}
.coord__item{display:flex;gap:18px;align-items:flex-start;}
.coord__item svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--c-accent);}
.coord__item b{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-texte-doux);font-weight:600;margin-bottom:5px;}
.coord__item a,.coord__item span{font-size:1.02rem;}
.coord__item a:hover{color:var(--c-accent);}

.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.champ{position:relative;display:flex;flex-direction:column;min-width:0;}
.champ--large{grid-column:span 2;}
.champ label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--c-texte-doux);margin-bottom:10px;}
.champ input,.champ select,.champ textarea{
  background:transparent;border:none;border-bottom:1px solid var(--c-ligne);
  padding:12px 0;color:var(--c-texte);font-size:16px;border-radius:0;
  transition:border-color .4s ease;
  width:100%;min-width:0;          /* sinon la plus longue option élargit la grille */
  text-overflow:ellipsis;
}
.champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(14,14,14,.6) 50%),
                   linear-gradient(135deg,rgba(14,14,14,.6) 50%,transparent 50%);
  background-position:calc(100% - 12px) 22px,calc(100% - 6px) 22px;
  background-size:6px 6px;background-repeat:no-repeat;}
.champ select option{background:#fff;color:var(--c-texte);}
.champ textarea{resize:vertical;min-height:110px;}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-bottom-color:var(--c-accent);}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(14,14,14,.32);}

.rgpd{grid-column:span 2;display:flex;gap:12px;align-items:flex-start;
  font-size:13px;color:var(--c-texte-doux);line-height:1.5;}
.rgpd input{accent-color:var(--c-accent);width:17px;height:17px;margin-top:2px;flex:none;}
.form__pied{grid-column:span 2;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.form__msg{font-size:14px;color:var(--c-accent);font-weight:600;opacity:0;
  transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--transition);}
.form__msg.est-visible{opacity:1;transform:none;}

/* ---------------------------------------------------------------
   SIMULATEUR DE PROJET
   --------------------------------------------------------------- */
/* Le formulaire est posé sur une carte blanche : sur le fond teinté de la
   section, il se détache nettement et donne envie d'être rempli. */
.simu{background:var(--c-fond);border:1px solid var(--c-ligne);
  border-top:4px solid var(--c-accent);border-radius:var(--radius);
  padding:clamp(22px,3.2vw,44px);box-shadow:0 30px 64px -38px rgba(14,14,14,.5);}

.simu__tete{margin-bottom:clamp(26px,3vw,36px);}
.simu__barre{height:3px;background:var(--c-ligne);border-radius:2px;overflow:hidden;}
.simu__barre span{display:block;height:100%;width:0;background:var(--c-accent);
  transition:width .5s var(--transition);}
.simu__compte{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-accent);}

.simu__etape{border:none;margin:0;padding:0;min-width:0;}
.simu__q{padding:0;margin:0 0 clamp(20px,2.4vw,28px);
  font-family:var(--font-titre);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.35rem,2.4vw,1.9rem);}

/* Les réponses sont de vraies cases à cocher : le clavier et les lecteurs
   d'écran les comprennent, et elles fonctionnent sans JavaScript. */
/* Couleurs des réponses cliquables : trois aplats unis, sans dégradé.
   Repos et survol en ivoire, réponse choisie en rouge plein.
   Pour changer la teinte, ces trois valeurs sont les seules à toucher :
   #F7F6F4 (repos), #EEEBE6 (survol), var(--c-accent) (choisie). */
.choix{display:grid;gap:12px;}
.choix__opt{position:relative;display:block;cursor:pointer;
  padding:18px 22px 18px 54px;background:#F7F6F4;
  border:1px solid #E6E3DE;border-radius:var(--radius);
  transition:border-color .25s ease,background .25s ease,color .25s ease;}
.choix__opt:hover{background:#EEEBE6;border-color:var(--c-accent);}
/* Masquage accessible : l'input reste focusable au clavier et lisible par les
   lecteurs d'écran, mais ne peint plus rien (un input de 0 x 0 en opacity:0
   laissait apparaître une pastille dans certains navigateurs). */
.choix__opt input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.choix__opt::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:1.5px solid #CFCAC3;background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease;}
/* La réponse choisie devient un aplat rouge plein : impossible de se tromper
   sur ce qui est sélectionné, même d'un coup d'œil rapide. */
.choix__opt:has(input:checked){border-color:var(--c-accent);background:var(--c-accent);}
.choix__opt:has(input:checked) .choix__tit{color:#fff;}
.choix__opt:has(input:checked) .choix__sous{color:rgba(255,255,255,.82);}
.choix__opt:has(input:checked)::before{border-color:#fff;background:var(--c-accent);
  box-shadow:inset 0 0 0 5px #fff;}
.choix__opt:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:3px;}
.choix__tit{display:block;font-weight:700;font-size:16px;letter-spacing:-.01em;}
.choix__sous{display:block;margin-top:3px;font-size:14px;color:var(--c-texte-doux);}

/* Synthèse affichée avant les coordonnées */
.synthese{margin-bottom:clamp(26px,3vw,34px);padding:clamp(22px,2.6vw,30px);
  background:var(--c-fond-alt);border-left:3px solid var(--c-accent);border-radius:var(--radius);}
.synthese h4{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-accent);margin-bottom:14px;}
.synthese__recap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.synthese__puce{background:var(--c-fond);border:1px solid var(--c-ligne);
  border-radius:var(--radius);padding:6px 12px;font-size:13px;font-weight:600;}
.synthese p{font-size:15px;line-height:1.7;color:var(--c-texte-doux);}
.synthese p + p{margin-top:10px;}
.synthese b{color:var(--c-texte);}
.synthese__modif{margin-top:16px;background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--c-accent);
  text-decoration:underline;text-underline-offset:3px;}

/* Le pot de miel doit être invisible sans être display:none, que certains
   robots savent détecter. Sorti de l'écran, il reste dans le formulaire. */
.pot-de-miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.simu__pied{margin-top:clamp(26px,3vw,34px);display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;}
.simu .form{margin:0;}

/* ===================================================================
   12. PIED DE PAGE
   =================================================================== */
.pied{background:var(--c-fond-contraste);color:var(--c-texte-doux-contraste);padding:60px 0 34px;
  font-size:14px;}
.pied__haut{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--c-ligne-contraste);}
.pied__logo img{height:54px;width:auto;}
.pied__coord{display:flex;flex-wrap:wrap;gap:14px 36px;padding:26px 0;
  border-bottom:1px solid var(--c-ligne-contraste);font-size:14.5px;}
.pied__coord a,.pied__coord span{display:inline-flex;align-items:center;gap:10px;}
.pied__coord a{color:var(--c-texte-contraste);font-weight:600;transition:color .3s ease;}
.pied__coord a:hover{color:var(--c-accent);}
.pied__coord svg{width:16px;height:16px;flex:none;stroke:var(--c-accent);}
.pied__nav{display:flex;gap:26px;flex-wrap:wrap;}
.pied__nav a:hover{color:var(--c-accent);}
.pied__bas{padding-top:26px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.42);}

/* Barre d'action fixe, uniquement sur mobile : appeler ou demander un devis
   sans avoir à remonter la page. */
.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  /* Pas de bordure sur toute la barre : elle traçait un trait clair en travers
     du bouton rouge. Le décollement vient d'une ombre douce, et le filet ne
     court que sur la moitié blanche, là où il sert vraiment. */
  box-shadow:0 -10px 26px rgba(14,14,14,.13);
  padding-bottom:env(safe-area-inset-bottom,0px);}
.barre-mobile a{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:60px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.barre-mobile svg{width:17px;height:17px;flex:none;}
.barre-mobile__tel{color:var(--c-principal);box-shadow:inset 0 1px 0 var(--c-ligne);}
.barre-mobile__devis{background:var(--c-accent);color:#fff;}
.barre-mobile__devis:active{background:var(--c-accent-dark);}

/* Bouton retour haut */
.haut{position:fixed;right:22px;bottom:22px;z-index:90;width:50px;height:50px;
  background:var(--c-accent);color:#fff;border:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s var(--transition),background .3s ease;}
.haut.est-visible{opacity:1;pointer-events:auto;transform:none;}
.haut:hover{background:var(--c-principal);}

/* ===================================================================
   13. RESPONSIVE
   Trois paliers : tablette (2 colonnes), mobile large (1 colonne),
   petit mobile (typographie et espacements resserrés).
   =================================================================== */
@media (max-width:1080px){
  .chiffres__grille{grid-template-columns:repeat(2,1fr);}
  .chiffre:nth-child(2n){border-right:none;}
  .chiffre:nth-child(-n+2){border-bottom:1px solid var(--c-ligne);}
  .projets{grid-template-columns:repeat(2,1fr);}
  .reels{grid-template-columns:repeat(2,1fr);}
  .avant-apres{grid-template-columns:1fr;gap:30px;}
  .compare{max-width:520px;}
  .zone__grille{grid-template-columns:1fr;gap:30px;}
  .chrono{gap:30px;}
  .chrono__ligne{left:29px;}
  .jalon{grid-template-columns:58px 1fr;gap:22px;align-items:start;}
  .jalon__point{grid-column:1;width:58px;height:58px;}
  .jalon__corps,.jalon:nth-of-type(even) .jalon__corps{grid-column:2;text-align:left;}
  .jalon__txt,.jalon:nth-of-type(even) .jalon__txt{margin-left:0;margin-right:0;max-width:none;}
  .jalon__cles,.jalon:nth-of-type(even) .jalon__cles{justify-content:flex-start;}
  /* Une seule colonne : le simulateur passe juste après le titre,
     les coordonnées descendent en dessous. */
  .contact__grille{grid-template-columns:1fr;row-gap:32px;}
  .contact__infos{grid-column:1;grid-row:1;}
  .contact__grille .simu{grid-column:1;grid-row:2;}
  .coord{grid-column:1;grid-row:3;padding-top:8px;border-top:1px solid var(--c-ligne);}
}

@media (max-width:820px){
  body{font-size:16px;padding-bottom:62px;}   /* place pour la barre d'action fixe */
  .section{padding:clamp(70px,11vw,100px) 0;}
  .titre-section{font-size:clamp(2rem,7.5vw,2.6rem);max-width:none;}
  .chapeau{font-size:1rem;}

  .nav,.entete .btn{display:none;}
  .burger{display:block;}

  .hero{min-height:94svh;}
  /* L'écran est deux fois plus haut que large : même sur la version portrait du
     visuel, le navigateur rogne les côtés. On vise la droite pour garder
     l'enseigne OGB entière. */
  .hero__fond img{object-position:84% center;}
  /* voile allégé en haut pour que l'enseigne ressorte, dense en bas sous le texte */
  .hero__voile{background:linear-gradient(180deg,rgba(14,14,14,.34) 0%,rgba(14,14,14,.30) 26%,rgba(14,14,14,.64) 52%,rgba(14,14,14,.86) 100%);}
  .hero__scroll{display:none;}

  .projets{grid-template-columns:1fr;gap:36px;}
  .reels{grid-template-columns:1fr 1fr;gap:12px;}
  .zone__liste li{grid-template-columns:1fr;gap:6px;}
  .faq__item summary{gap:16px;}
  .compare{max-width:none;}
  .projet__det{font-size:15px;}
  .form{grid-template-columns:1fr;}
  .champ--large,.rgpd,.form__pied{grid-column:span 1;}
  .entete-section{flex-direction:column;align-items:flex-start;gap:16px;}

  /* zones tactiles : 54 px mini partout où l'on clique */
  .btn{min-height:54px;padding:16px 28px;}
  .champ input,.champ select,.champ textarea{padding:14px 0;font-size:16px;}
  .rgpd input{width:22px;height:22px;}

  /* galerie : les flèches descendent au niveau du pouce */
  .lb__scene{padding:142px 12px;}   /* symétrique : la photo reste centrée */
  .lb__nav{top:auto;bottom:24px;transform:none;width:52px;height:52px;}
  .lb__nav--prec{left:calc(50% - 98px);}
  .lb__nav--suiv{right:calc(50% - 98px);}
  .lb__bas{padding-bottom:92px;}
  .lb__titre{font-size:14px;}

  .barre-mobile{display:grid;}
  .haut{display:none;}
}

@media (max-width:520px){
  .chiffre{padding:30px 20px;}
  .chiffre__val{font-size:2.35rem;}
  .chiffre__lib{font-size:12px;margin-top:10px;}
  .btn{width:100%;justify-content:center;}
  .hero__actions{flex-direction:column;}
  .hero__contact{flex-direction:column;align-items:flex-start;gap:12px;}
  .chrono__ligne{left:25px;}
  .jalon{grid-template-columns:50px 1fr;gap:16px;}
  .jalon__point{width:50px;height:50px;font-size:14px;}
  .jalon__cles span{font-size:12px;padding:6px 11px;}
  .pied__coord{flex-direction:column;gap:14px;}
}

/* ===================================================================
   13. PAGES INTÉRIEURES
   Réalisations, Actualités, Devis : pas de photo plein écran derrière
   l'en-tête. Celui-ci est donc blanc dès le chargement, le logo visible,
   et un bandeau de titre remplace le héro.
   =================================================================== */
body.page-interieure .entete{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--c-ligne);color:var(--c-texte);}
body.page-interieure .logo{opacity:1;pointer-events:auto;}

.bandeau{padding:clamp(128px,15vw,186px) 0 clamp(40px,5vw,64px);
  background:var(--c-fond-alt);border-bottom:1px solid var(--c-ligne);}
.bandeau .wrap{display:grid;gap:clamp(18px,2.4vw,26px);}
.bandeau h1{font-family:var(--font-titre);font-weight:800;letter-spacing:-.04em;
  line-height:1.02;font-size:clamp(2.4rem,6.4vw,4.4rem);margin:0;max-width:16ch;}
.bandeau .chapeau{margin:0;max-width:56ch;}
.fil{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-texte-doux);}
.fil a{text-decoration:none;}
.fil a:hover{color:var(--c-accent);}
.fil svg{width:12px;height:12px;stroke:currentColor;opacity:.5;}
.fil b{color:var(--c-accent);font-weight:700;}

/* Lien de la page en cours, dans l'en-tête et le menu mobile */
.nav a[aria-current="page"]{color:var(--c-accent);}
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.menu-mobile a[aria-current="page"]{color:var(--c-accent);}

/* Bande d'appel à l'action, reprise en bas de chaque page intérieure */
.bande-cta{background:var(--c-fond-contraste);color:var(--c-texte-contraste);
  padding:clamp(56px,7vw,86px) 0;}
.bande-cta .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);flex-wrap:wrap;}
.bande-cta h2{font-family:var(--font-titre);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0;max-width:20ch;
  color:var(--c-texte-contraste);}
.bande-cta p{margin:10px 0 0;color:var(--c-texte-doux-contraste);max-width:44ch;}
.bande-cta__actions{display:flex;gap:14px;flex-wrap:wrap;}

/* Bouton « voir toutes les réalisations » sous l'aperçu de l'accueil */
.apres-grille{margin-top:clamp(36px,4.6vw,56px);display:flex;justify-content:center;}

/* Le bandeau de titre apporte déjà une respiration : la première section
   qui le suit n'a pas besoin de son grand espace du haut. */
.bandeau + .section{padding-top:clamp(52px,6.5vw,86px);}
.bandeau + .section.videos{padding-top:clamp(40px,5vw,64px);background:var(--c-fond);}
/* Page Actualités : l'en-tête de la section vidéo n'a plus de titre,
   le chapeau et le lien Instagram passent donc sur toute la largeur. */
.videos__entete--seul{display:block;}
.videos__entete--seul > div{max-width:64ch !important;}

/* Page Devis : le bandeau porte déjà le titre, la colonne de gauche
   commence donc directement par les trois arguments. */
.bandeau + .section--devis .atouts{margin-top:0;}

/* ===================================================================
   14. NAVIGATION À SEPT ENTRÉES
   Le menu compte maintenant autant de liens que celui d'un site d'agence.
   On resserre l'espacement et on réduit la taille pour que tout tienne
   sur une ligne, et on bascule plus tôt sur le menu plein écran.
   =================================================================== */
.nav{gap:clamp(16px,1.7vw,26px);}
.nav a{font-size:13.5px;white-space:nowrap;}
.entete__inner{gap:clamp(16px,2vw,30px);}

@media (max-width:1240px){
  .nav a{font-size:12.8px;}
  .entete .btn{padding:12px 18px;font-size:11.5px;}
}
@media (max-width:1100px){
  .nav,.entete .btn{display:none;}
  .burger{display:block;}
}

/* Le menu mobile porte huit entrées : on resserre encore. */
.menu-mobile a{font-size:clamp(1.15rem,4.6vw,1.6rem);padding:8px 0;}
@media (max-height:820px){
  .menu-mobile a{font-size:clamp(1rem,4vw,1.35rem);padding:6px 0;}
  .menu-mobile__pied{margin-top:18px;}
}

/* ===================================================================
   15. BLOCS DES PAGES INTÉRIEURES
   =================================================================== */

/* Liste de prestations, page Nos métiers */
.metiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,30px);}
.metier{background:var(--c-fond-alt);border:1px solid var(--c-ligne);
  border-top:3px solid var(--c-accent);border-radius:var(--radius);
  padding:clamp(26px,3vw,38px);}
.metier__num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--c-accent);
  display:block;margin-bottom:14px;}
.metier h3{font-family:var(--font-titre);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.9vw,1.4rem);margin:0 0 12px;line-height:1.2;}
.metier p{margin:0;color:var(--c-texte-doux);font-size:15.5px;}
.metier ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:7px;}
.metier li{position:relative;padding-left:18px;font-size:14.5px;}
.metier li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--c-accent);}

/* Texte long sur deux colonnes, pages Qui sommes-nous et Nous rejoindre */
.recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,80px);align-items:start;}
.recit p{color:var(--c-texte-doux);}
.recit p + p{margin-top:16px;}
.recit h3{font-family:var(--font-titre);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 14px;line-height:1.15;}

/* Encadrés de garanties et d'engagements */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2vw,24px);}
.carte{border:1px solid var(--c-ligne);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);background:var(--c-fond);}
.carte svg{width:26px;height:26px;stroke:var(--c-accent);margin-bottom:16px;}
.carte h3{font-size:1.02rem;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;}
.carte p{margin:0;font-size:14.5px;color:var(--c-texte-doux);}

/* Coordonnées et horaires, page Nous contacter */
.contact-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,44px);}
.horaires{margin:0;display:grid;gap:0;}
.horaires div{display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--c-ligne);}
.horaires dt{font-weight:600;margin:0;}
.horaires dd{margin:0;color:var(--c-texte-doux);}

@media (max-width:820px){
  .recit{grid-template-columns:1fr;}
}

/* Les encadrés blancs posés sur une section noire : le titre doit redevenir
   foncé, sinon il reste blanc sur blanc et disparaît. */
.section--nude .carte{background:var(--c-fond);border-color:transparent;}
.section--nude .carte h3{color:var(--c-principal);}
.section--nude .carte p{color:var(--c-texte-doux);}

/* ===================================================================
   16. PAGE NOS MÉTIERS · LES TROIS FAMILLES
   Chaque famille (gros œuvre, second œuvre, menuiserie et agencement)
   est une section, et chaque métier une case avec son pictogramme.
   Pour ajouter un métier, duplique un bloc <article class="tache">.
   =================================================================== */
.section--clair{background:var(--c-fond-alt);}

.famille__tete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,60px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,46px);}
.famille__num{font-family:var(--font-titre);font-weight:800;line-height:1;
  font-size:clamp(2.6rem,6vw,4.6rem);color:var(--c-accent);opacity:.16;
  letter-spacing:-.05em;display:block;margin-bottom:-6px;}
.famille__tete h2{font-family:var(--font-titre);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;font-size:clamp(1.9rem,4vw,3rem);margin:0;}
.famille__tete p{margin:0;max-width:40ch;color:var(--c-texte-doux);}

.taches{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:clamp(12px,1.4vw,18px);}
.tache{background:var(--c-fond);border:1px solid var(--c-ligne);
  border-radius:var(--radius);padding:clamp(20px,2.2vw,26px);
  transition:border-color .3s ease,transform .45s var(--transition),box-shadow .45s var(--transition);}
.section--clair .tache{background:var(--c-fond);}
.tache:hover{border-color:var(--c-accent);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(14,14,14,.45);}
.tache__icone{width:44px;height:44px;border-radius:var(--radius);
  background:var(--c-accent-soft);display:grid;place-items:center;margin-bottom:16px;}
.tache__icone svg{width:23px;height:23px;stroke:var(--c-accent);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tache h3{font-size:1rem;font-weight:700;letter-spacing:-.015em;margin:0 0 6px;
  line-height:1.25;}
.tache p{margin:0;font-size:13.8px;line-height:1.55;color:var(--c-texte-doux);}

@media (max-width:520px){
  .taches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .tache{padding:18px 16px;}
  .tache__icone{width:38px;height:38px;margin-bottom:12px;}
  .tache h3{font-size:.94rem;}
  .tache p{font-size:13px;}
}

/* ===================================================================
   17. ARTICLE DE FOND, PAGE ACTUALITÉS
   Mise en page type lettre d'information : une colonne étroite, un
   chapeau plus gros que le corps, et une signature en bas.
   =================================================================== */
.article{max-width:880px;margin:0 auto;}
.article__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-texte-doux);}
.article__chip{background:var(--c-accent);color:#fff;border-radius:100px;
  padding:6px 14px;letter-spacing:.14em;}
.article__meta span{display:inline-flex;align-items:center;gap:8px;}
.article__meta span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--c-ligne);}
.article h2{font-family:var(--font-titre);font-weight:800;letter-spacing:-.038em;
  line-height:1.05;font-size:clamp(1.9rem,4.4vw,3rem);margin:0 0 20px;}
.article__chapeau{font-size:clamp(1.05rem,1.8vw,1.22rem);line-height:1.65;
  color:var(--c-texte);margin:0 0 26px;font-weight:500;}
.article p{color:var(--c-texte-doux);margin:0 0 16px;}
.article h3{font-family:var(--font-titre);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.2rem,2.2vw,1.5rem);margin:36px 0 12px;line-height:1.2;}
.article__filet{height:1px;background:var(--c-ligne);margin:clamp(34px,4vw,48px) 0;}
.article__signature{display:flex;align-items:center;gap:16px;
  padding-top:26px;border-top:1px solid var(--c-ligne);margin-top:clamp(30px,4vw,44px);}
.article__signature img{width:52px;height:auto;flex:none;}
.article__signature p{margin:0;font-size:14px;}
.article__signature b{display:block;color:var(--c-texte);font-size:14.5px;}

/* La chronologie tient dans la colonne de l'article */
.article .chrono{margin-top:30px;}

/* Dans un article, la chronologie est plus resserrée : la colonne est
   deux fois moins large que dans une section pleine largeur. */
.article .chrono{gap:clamp(20px,2.4vw,30px);}
.article .jalon{grid-template-columns:1fr 76px 1fr;}
.article .jalon__point{width:50px;height:50px;font-size:14px;}
.article .jalon__tit{font-size:clamp(1.1rem,1.7vw,1.3rem);}
.article .jalon__txt{font-size:15px;margin-top:9px;}
.article .jalon__cles{margin-top:13px;}

/* Le comparateur et la grille des réalisations forment un seul bloc visuel
   sur l'accueil : on supprime l'espace qui les séparait. */
#avant-apres{padding-bottom:0;}
#avant-apres + .section{padding-top:clamp(26px,3.2vw,46px);}

/* ===================================================================
   18. BLOC AVANT / APRÈS, ACCUEIL
   L'ancienne mise en page côte à côte laissait une colonne vide à
   gauche de la photo verticale. On centre désormais le comparateur et
   on aligne dessous les trois faits du chantier, qui tiennent la largeur.
   =================================================================== */
.compare-bloc{display:grid;justify-items:center;gap:clamp(22px,2.8vw,36px);}
.compare-bloc .compare{width:100%;max-width:560px;}

.compare-faits{list-style:none;margin:0;padding:clamp(22px,2.6vw,30px) 0 0;
  width:100%;max-width:980px;border-top:1px solid var(--c-ligne);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);}
.compare-faits li{font-size:15px;line-height:1.6;color:var(--c-texte-doux);
  position:relative;padding-left:16px;}
.compare-faits li::before{content:"";position:absolute;left:0;top:7px;
  width:5px;height:5px;border-radius:50%;background:var(--c-accent);}
.compare-faits b{display:block;color:var(--c-texte);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px;}

@media (max-width:820px){
  .compare-faits{grid-template-columns:1fr;gap:18px;}
}