/* =========================================================================
   E.C.C.B. : Cédric Nguyen · Charpente · Couverture · Zinguerie
   Direction artistique « L'Atelier Noir » : palette extraite du logo client
   Site réalisé par Simply On : https://simply-on.fr
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  /* Noirs (73 % du logo) */
  --noir:#0B0B0C;
  --noir-2:#0F0F11;
  --noir-3:#151517;
  --noir-4:#1D1D20;
  /* Chrome (lettrage ECCB) */
  --chrome:#C7CBD0;
  --chrome-2:#8A9096;
  --chrome-3:#5A5F65;
  /* Cuivre / bois (le « C » et la poutre du logo) */
  --cuivre:#C08A52;
  --cuivre-clair:#E3B07A;
  --cuivre-sombre:#8A5F33;
  /* Vert « ZINGUERIE » : micro-accent uniquement */
  --vert:#7FA65C;

  --blanc:#F4F5F6;
  --texte:#B9BEC4;
  --texte-doux:#8A9096;
  --ligne:rgba(199,203,208,.13);
  --ligne-forte:rgba(199,203,208,.24);

  --grad-metal:linear-gradient(135deg,#E8EAEC 0%,#9AA0A6 28%,#C08A52 62%,#8A5F33 100%);
  --grad-cuivre:linear-gradient(135deg,var(--cuivre-clair),var(--cuivre-sombre));

  --f-titre:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-texte:"Inter","Helvetica Neue",Arial,sans-serif;

  /* Hauteur du bandeau « Urgence fuite » : l'en-tête fixe s'y adosse, et
     tout ce qui est calé sur le haut de l'écran s'en sert comme décalage. */
  --h-urgence:38px;

  --max:1140px;
  --max-large:1280px;
  --gout:clamp(1.5rem,6vw,5rem);         /* gouttière horizontale : marge latérale franche */
  --section:clamp(3.25rem,6.5vw,5.75rem);/* rythme vertical resserré */
  --r:4px;                                /* rayon : quasi nul = registre bâtiment */
  --ombre:0 24px 60px -20px rgba(0,0,0,.85);
  --transition:.45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip et non hidden : le menu mobile hors-écran est en
   position:fixed, qu'un overflow:hidden sur body ne rogne pas (9 px de
   défilement horizontal parasite mesurés en 320 px). clip rogne sans
   créer de conteneur de défilement, donc sans casser position:sticky. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--noir);color:var(--texte);
  font-family:var(--f-texte);font-size:clamp(.9375rem,.9rem + .18vw,1rem);
  line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.menu-ouvert{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--cuivre-clair);text-decoration-color:rgba(224,174,120,.4);text-underline-offset:.22em}
a:hover{color:var(--blanc)}
h1,h2,h3,h4{font-family:var(--f-titre);color:var(--blanc);font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0 0 .6em}
h1{font-size:clamp(1.95rem,1.2rem + 3.3vw,3.5rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.55rem,1.1rem + 2vw,2.45rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem)}
h4{font-size:.95rem;letter-spacing:.01em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong,b{color:var(--blanc);font-weight:600}
::selection{background:var(--cuivre);color:var(--noir)}
:focus-visible{outline:2px solid var(--cuivre-clair);outline-offset:3px;border-radius:2px}

/* ---------- 3. Structure ---------- */
.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gout)}
.conteneur--large{max-width:var(--max-large)}
.conteneur--etroit{max-width:720px}
.section{padding-block:var(--section);position:relative}
.section--sombre{background:var(--noir-2)}
.section--carte{background:var(--noir-3)}
.section--filet{border-top:1px solid var(--ligne)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut-contenu{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cuivre);color:var(--noir);padding:.75rem 1.25rem;font-weight:700}
.saut-contenu:focus{left:1rem;top:1rem}

/* Surtitre : repris du registre « ABOUT / EXPERTISE » des références Awwwards */
.surtitre{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-titre);font-size:.65rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cuivre);
  margin:0 0 1.15rem;
}
.surtitre::before{content:"";width:clamp(24px,4vw,44px);height:1px;background:var(--grad-cuivre);flex:none}
.surtitre--centre{justify-content:center}
.entete-section{max-width:52rem;margin-bottom:clamp(1.9rem,3.6vw,3rem)}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .surtitre{justify-content:center}
.chapo{font-size:clamp(.97rem,.94rem + .22vw,1.1rem);color:var(--texte);max-width:58ch}
.entete-section--centre .chapo{margin-inline:auto}

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-titre);font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.55rem;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;
  min-width:0;line-height:1.15;text-align:center;
}
.btn svg{flex:none;width:1.05em;height:1.05em}
.btn--primaire{background:var(--grad-cuivre);color:#140D06;box-shadow:0 8px 30px -12px rgba(192,138,82,.8)}
.btn--primaire:hover{color:#140D06;transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(224,174,120,.9)}
.btn--secondaire{background:transparent;color:var(--blanc);border-color:var(--ligne-forte)}
.btn--secondaire:hover{color:var(--noir);background:var(--chrome);border-color:var(--chrome)}
.btn--fantome{background:rgba(244,245,246,.05);color:var(--blanc);border-color:var(--ligne)}
.btn--fantome:hover{background:rgba(244,245,246,.12);color:var(--blanc)}
.btn--large{padding:1rem 1.95rem;font-size:.8rem}
.btn--bloc{width:100%}
.groupe-btn{display:flex;flex-wrap:wrap;gap:.9rem}
.groupe-btn--centre{justify-content:center}

/* Lien fléché */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--f-titre);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cuivre-clair);transition:var(--transition);
}
.lien-fleche svg{transition:transform var(--transition);width:1.15em;height:1.15em}
.lien-fleche:hover{color:var(--blanc)}
.lien-fleche:hover svg{transform:translateX(5px)}

/* ---------- 5. Cadre photo « touches du logo » ----------
   Demande explicite du brief : contours de photos travaillés avec les
   codes du logo (équerres de charpentier + filet chrome→cuivre).      */
.cadre{position:relative;display:block;isolation:isolate}
.cadre__media{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--noir-3);
}
.cadre__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.cadre__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 55%);
}
.cadre::before,.cadre::after{
  content:"";position:absolute;width:clamp(28px,4vw,54px);height:clamp(28px,4vw,54px);
  pointer-events:none;z-index:2;transition:var(--transition);
}
.cadre::before{top:-1px;left:-1px;border-top:2px solid var(--cuivre);border-left:2px solid var(--cuivre)}
.cadre::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--chrome-2);border-right:2px solid var(--chrome-2)}
.cadre:hover::before,.cadre:hover::after{width:clamp(40px,6vw,80px);height:clamp(40px,6vw,80px)}
.cadre:hover .cadre__media img{transform:scale(1.05)}
.cadre--filet .cadre__media{border:1px solid transparent;background-image:linear-gradient(var(--noir-3),var(--noir-3)),var(--grad-metal);background-origin:border-box;background-clip:padding-box,border-box}

/* ---------- 6. En-tête ---------- */
.entete{
  position:fixed;inset-block-start:var(--h-urgence);inset-inline:0;z-index:120;
  transition:background .4s ease,border-color .4s ease,padding .4s ease;
  border-bottom:1px solid transparent;padding-block:1.1rem;
}
.entete.est-collee{background:rgba(11,11,12,.92);border-bottom-color:var(--ligne);padding-block:.65rem}
@supports (backdrop-filter:blur(1px)){
  .entete.est-collee{background:rgba(11,11,12,.78);backdrop-filter:blur(18px) saturate(140%)}
}
/* Piège connu : backdrop-filter crée un bloc de confinement pour les enfants
   position:fixed → on le neutralise dès que le menu mobile est ouvert. */
body.menu-ouvert .entete{backdrop-filter:none!important;background:var(--noir)!important}
.entete .btn{white-space:nowrap}
.entete__interieur{
  max-width:var(--max-large);margin-inline:auto;padding-inline:var(--gout);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.marque{display:flex;align-items:center;gap:.75rem;flex:none;text-decoration:none;white-space:nowrap}
.marque img{height:clamp(38px,4vw,52px);width:auto;transition:height .4s ease}
.entete.est-collee .marque img{height:clamp(34px,3.4vw,42px)}
.marque__texte{display:none}

.nav{display:flex;align-items:center;gap:clamp(.4rem,1.1vw,1.4rem)}
.nav__liste{display:flex;align-items:center;gap:clamp(.2rem,.9vw,1rem);list-style:none;margin:0;padding:0}
.nav__liste li{display:block}
.nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel){
  display:inline-block;text-decoration:none;white-space:nowrap;
  font-family:var(--f-titre);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--chrome);padding:.55rem .55rem;position:relative;
  transition:color .3s ease;
}
.nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel)::after{
  content:"";position:absolute;left:.55rem;right:.55rem;bottom:.18rem;height:1px;
  background:var(--grad-cuivre);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel):hover{color:var(--blanc)}
.nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel):hover::after,
.nav [aria-current="page"]::after{transform:scaleX(1)}
.nav [aria-current="page"]{color:var(--blanc)}

/* Méga-menu prestations : pas d'écart réel entre déclencheur et panneau */
.nav__item--deroulant{position:relative}
.nav__bascule{
  background:none;border:0;cursor:pointer;font:inherit;color:var(--chrome);
  font-family:var(--f-titre);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:.55rem;display:inline-flex;align-items:center;gap:.35rem;
  white-space:nowrap;transition:color .3s ease;
}
.nav__bascule:hover,.nav__bascule[aria-expanded="true"]{color:var(--blanc)}
.nav__bascule svg{width:.7em;height:.7em;transition:transform .3s ease}
.nav__bascule[aria-expanded="true"] svg{transform:rotate(180deg)}
.sous-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  width:min(640px,86vw);background:var(--noir-3);
  border:1px solid var(--ligne);border-top:14px solid transparent;
  background-clip:padding-box;border-radius:var(--r);box-shadow:var(--ombre);
  padding:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s;
  z-index:60;
}
.nav__item--deroulant.est-ouvert .sous-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.sous-menu__lien{
  display:block;padding:.7rem .85rem;border-radius:var(--r);text-decoration:none;
  transition:background .25s ease;min-width:0;
}
.sous-menu__lien:hover{background:var(--noir-4)}
.sous-menu__titre{display:block;font-family:var(--f-titre);font-size:.9rem;font-weight:700;color:var(--blanc);letter-spacing:-.01em;line-height:1.3}
.sous-menu__desc{display:block;font-size:.78rem;color:var(--texte-doux);line-height:1.5;margin-top:.15rem}
.sous-menu__lien:hover .sous-menu__titre{color:var(--cuivre-clair)}

.entete__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;white-space:nowrap;font-family:var(--f-titre);font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--blanc);transition:color .3s ease}
.entete__tel:hover{color:var(--cuivre-clair)}
.entete__tel svg{width:1em;height:1em;color:var(--cuivre)}

/* Burger */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:transparent;
  border:1px solid var(--ligne-forte);border-radius:var(--r);cursor:pointer;flex:none;
}
.burger span{display:block;width:100%;height:1.5px;background:var(--chrome);transition:transform .35s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Bascule burger : au point où la nav complète ne tient physiquement plus */
@media (max-width:1180px){
  .burger{display:flex}
  .entete__tel span{display:none}
  .nav{
    position:fixed;inset:0;top:0;background:var(--noir);
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;padding:6.5rem var(--gout) 2.5rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .5s cubic-bezier(.65,0,.35,1);
    z-index:110;
  }
  body.menu-ouvert .nav{transform:translateX(0)}
  .nav__liste{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__liste>li{border-bottom:1px solid var(--ligne)}
  .nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel),.nav__bascule{
    display:flex;width:100%;justify-content:space-between;align-items:center;
    padding:1.15rem .25rem;font-size:1rem;letter-spacing:.06em;white-space:normal;
  }
  .nav a:not(.btn):not(.sous-menu__lien):not(.entete__tel)::after{display:none}
  .sous-menu{
    position:static;transform:none;width:100%;opacity:1;visibility:visible;pointer-events:auto;
    display:none;grid-template-columns:1fr;background:transparent;border:0;box-shadow:none;
    padding:0 0 1rem;
  }
  .nav__item--deroulant.est-ouvert .sous-menu{display:grid;transform:none}
  .sous-menu__lien{padding:.65rem .9rem;background:var(--noir-3);margin-bottom:.35rem}
  .nav .btn{margin-top:1.75rem;width:100%}
  .nav__tel-mobile{margin-top:.75rem}
}
@media (min-width:1181px){.nav__tel-mobile{display:none}}

/* ---------- 7. Héros ---------- */
.heros{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:9rem 0 clamp(7rem,13vh,10rem);isolation:isolate;
}
.heros__fond{position:absolute;inset:0;z-index:-2}
.heros__fond img{width:100%;height:100%;object-fit:cover}
.heros__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 62% 55% at 50% 46%,rgba(11,11,12,.9) 0%,rgba(11,11,12,.62) 45%,rgba(11,11,12,.32) 72%,transparent 100%),
    linear-gradient(to bottom,rgba(11,11,12,.86) 0%,rgba(11,11,12,.3) 28%,rgba(11,11,12,.45) 62%,rgba(11,11,12,.95) 100%);
}
/* Le logo au centre de la photo pleine page : demande explicite du brief */
.heros__logo{width:clamp(165px,21vw,270px);margin:0 auto clamp(1.35rem,3vw,2.1rem);filter:drop-shadow(0 18px 45px rgba(0,0,0,.9))}
.heros__contenu{position:relative;z-index:2;max-width:64rem;margin-inline:auto;padding-inline:var(--gout)}
.heros h1{margin-bottom:.5em;text-wrap:balance}
.heros__accroche{
  font-size:clamp(.97rem,.93rem + .35vw,1.14rem);color:var(--chrome);
  max-width:46rem;margin:0 auto 2.4rem;text-wrap:pretty;
}
.heros__accroche strong{color:var(--cuivre-clair);font-weight:600}
.heros .groupe-btn{justify-content:center}
.heros__zone{
  margin-top:2.6rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte-doux);font-family:var(--f-titre);font-weight:600;
}
.heros__zone b{color:var(--chrome);font-weight:600}
.heros__defiler{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-doux);
  text-decoration:none;font-family:var(--f-titre);font-weight:600;
}
.heros__defiler i{display:block;width:1px;height:42px;background:linear-gradient(to bottom,var(--cuivre),transparent);animation:filet 2.4s ease-in-out infinite}
@keyframes filet{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:640px){.heros{min-height:92svh}.heros__defiler{display:none}}

/* ---------- 8. Bandeau de confiance ---------- */
.confiance{border-block:1px solid var(--ligne);background:var(--noir-2);padding-block:1.35rem;overflow:hidden}
.confiance__piste{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);white-space:nowrap;font-family:var(--f-titre);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);animation:glisse 38s linear infinite;width:max-content}
.confiance:hover .confiance__piste{animation-play-state:paused}
.confiance__piste b{color:var(--cuivre);font-weight:700}
.confiance__piste span{display:inline-flex;align-items:center;gap:.6rem}
.confiance__piste span::before{content:"◆";color:var(--cuivre-sombre);font-size:.55em}
@keyframes glisse{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.confiance__piste{animation:none}}

/* ---------- 9. Chiffres clés ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.chiffre{background:var(--noir);padding:clamp(1.35rem,2.6vw,2rem) clamp(.85rem,1.6vw,1.35rem);text-align:center;min-width:0;transition:background .4s ease}
.chiffre:hover{background:var(--noir-3)}
.chiffre__valeur{display:block;font-family:var(--f-titre);font-size:clamp(1.8rem,1.2rem + 1.9vw,2.7rem);font-weight:800;line-height:1;letter-spacing:-.04em;background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.chiffre__legende{display:block;margin-top:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);font-family:var(--f-titre);line-height:1.5}
@media (max-width:760px){.chiffres{grid-template-columns:repeat(2,1fr)}}

/* ---------- 10. Split texte / image ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.split__texte{display:flex;flex-direction:column;justify-content:center;min-width:0}
.split__media{min-width:0;display:flex}
.split__media .cadre{width:100%;display:flex}
.split__media .cadre__media{width:100%;height:100%;min-height:400px}
.split--inverse .split__texte{order:2}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:2.25rem}
  .split--inverse .split__texte{order:0}
  .split__media .cadre__media{min-height:0;aspect-ratio:4/3}
}

/* Listes à puces : jamais de flex sur un <li> qui contient du texte mixte */
.liste-check{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem}
.liste-check li{display:block;position:relative;padding-left:2.1rem;line-height:1.65;min-width:0}
.liste-check li::before{
  content:"";position:absolute;left:0;top:.52em;width:1.05rem;height:.55rem;
  border-left:2px solid var(--cuivre);border-bottom:2px solid var(--cuivre);
  transform:rotate(-45deg);
}
.liste-check--2col{grid-template-columns:1fr 1fr;gap:.85rem 2rem}
@media (max-width:620px){.liste-check--2col{grid-template-columns:1fr}}
.liste-puce{list-style:none;margin:1.25rem 0;padding:0;display:grid;gap:.7rem}
.liste-puce li{display:block;position:relative;padding-left:1.5rem;min-width:0}
.liste-puce li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--cuivre);transform:rotate(45deg)}

/* ---------- 11. Cartes prestations ---------- */
/* Grille sur 12 colonnes : 10 prestations réparties en 4 / 4 / 2.
   Chaque rangée occupe toute la largeur, aucune carte esseulée. */
.grille-services{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.75rem)}
.grille-services>*{grid-column:span 3}                    /* 4 par rangée */
.grille-services>*:nth-child(n+9){grid-column:span 6}     /* les 2 dernières, pleine largeur */
/* La dernière rangée n'ayant que 2 cartes, on élargit leur visuel pour
   éviter deux vignettes démesurément hautes. */
.grille-services>*:nth-child(n+9) .carte-service__media{aspect-ratio:21/9}
@media (max-width:1100px){
  .grille-services{grid-template-columns:repeat(6,1fr)}
  /* 2 par rangée : toutes les cartes reprennent la même portée, y compris
     les deux dernières qui portaient span 6 en grand format. */
  .grille-services>*,
  .grille-services>*:nth-child(-n+4),
  .grille-services>*:nth-child(n+9){grid-column:span 3}
  .grille-services>*:nth-child(n+9) .carte-service__media{aspect-ratio:4/3}
}
@media (max-width:600px){
  .grille-services{grid-template-columns:1fr}
  .grille-services>*,
  .grille-services>*:nth-child(-n+4),
  .grille-services>*:nth-child(n+9){grid-column:auto}
  .grille-services>*:nth-child(n+9) .carte-service__media{aspect-ratio:4/3}
}
/* Les grilles réutilisant cette classe hors des 10 prestations
   (404, plan du site) reprennent un rythme simple de 3 colonnes. */
.grille-services--simple{grid-template-columns:repeat(3,1fr)}
.grille-services--simple>*,
.grille-services--simple>*:nth-child(-n+4),
.grille-services--simple>*:nth-child(n+9){grid-column:auto}
.grille-services--simple>*:nth-child(n+9) .carte-service__media{aspect-ratio:4/3}
@media (max-width:900px){.grille-services--simple{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grille-services--simple{grid-template-columns:1fr}}
.carte-service{
  display:block;position:relative;background:var(--noir-3);border:1px solid var(--ligne);
  border-radius:var(--r);overflow:hidden;text-decoration:none;min-width:0;
  transition:border-color var(--transition),transform var(--transition),background var(--transition);
}
.carte-service:hover{border-color:rgba(192,138,82,.55);transform:translateY(-5px);background:var(--noir-4)}
.carte-service__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--noir-4)}
.carte-service__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.carte-service:hover .carte-service__media img{transform:scale(1.06)}
.carte-service__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.9),rgba(11,11,12,.05) 62%)}
.carte-service__corps{padding:clamp(1.1rem,1.9vw,1.45rem);min-width:0}
.carte-service__titre{font-family:var(--f-titre);font-size:1.05rem;font-weight:700;color:var(--blanc);margin:0 0 .55rem;letter-spacing:-.015em;line-height:1.25}
.carte-service:hover .carte-service__titre{color:var(--cuivre-clair)}
.carte-service__desc{font-size:.86rem;color:var(--texte-doux);line-height:1.65;margin:0 0 1.1rem}
.carte-service .lien-fleche{font-size:.72rem}

/* ---------- 12. Avant / Après ---------- */
.grille-av-ap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
@media (max-width:1000px){.grille-av-ap{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
.av-ap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--noir-3);border:1px solid var(--ligne);touch-action:pan-y;user-select:none;cursor:ew-resize}
.av-ap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.av-ap__apres{clip-path:inset(0 0 0 50%);will-change:clip-path}
.av-ap__poignee{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--cuivre);transform:translateX(-50%);pointer-events:none;z-index:3;box-shadow:0 0 22px rgba(192,138,82,.85)}
.av-ap__bouton{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--noir);border:2px solid var(--cuivre);
  display:flex;align-items:center;justify-content:center;gap:3px;color:var(--cuivre);
  box-shadow:0 6px 24px rgba(0,0,0,.7);
}
.av-ap__bouton svg{width:20px;height:20px}
.av-ap__etiq{
  position:absolute;bottom:.85rem;z-index:4;font-family:var(--f-titre);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;border-radius:2px;
  background:rgba(11,11,12,.82);color:var(--chrome);border:1px solid var(--ligne);pointer-events:none;
}
.av-ap__etiq--av{left:.85rem}
.av-ap__etiq--ap{right:.85rem;color:var(--cuivre-clair);border-color:rgba(192,138,82,.45)}
.av-ap-bloc{min-width:0}
.av-ap-bloc__titre{margin:1rem 0 .3rem;font-family:var(--f-titre);font-size:1.05rem;font-weight:700;color:var(--blanc)}
.av-ap-bloc__lieu{font-size:.8rem;color:var(--texte-doux);letter-spacing:.06em}
.av-ap input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:5}

/* ---------- 13. Avis Google défilants ---------- */
.avis{position:relative;overflow:hidden}
.avis__piste{display:flex;gap:1.25rem;width:max-content;animation:glisse 62s linear infinite}
.avis:hover .avis__piste,.avis__piste:focus-within{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.avis__piste{animation:none;overflow-x:auto;width:auto;padding-bottom:1rem}}
.avis-carte{
  width:min(390px,82vw);flex:none;background:var(--noir-3);border:1px solid var(--ligne);
  border-radius:var(--r);padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;white-space:normal;
}
.avis-carte__etoiles{display:flex;gap:.14rem;color:#F5B544;font-size:.95rem;letter-spacing:.05em}
.avis-carte__texte{font-size:.96rem;line-height:1.7;color:var(--texte);margin:0;flex:1}
.avis-carte__pied{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--ligne);padding-top:.95rem}
.avis-carte__initiale{width:38px;height:38px;flex:none;border-radius:50%;background:var(--grad-cuivre);color:#140D06;display:flex;align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:800;font-size:.95rem}
.avis-carte__nom{display:block;font-family:var(--f-titre);font-weight:700;color:var(--blanc);font-size:.92rem;line-height:1.3}
.avis-carte__meta{display:block;font-size:.74rem;color:var(--texte-doux)}
.avis-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.75rem;margin-bottom:2.5rem}
.avis-note__bloc{display:flex;align-items:center;gap:.85rem}
.avis-note__chiffre{font-family:var(--f-titre);font-size:3rem;font-weight:800;line-height:1;background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.avis-note__detail{font-size:.84rem;color:var(--texte-doux);line-height:1.5}
.avis-note__detail b{display:block;color:var(--blanc);font-size:.95rem}

.encart-attente{
  border:1px dashed rgba(245,181,68,.55);background:rgba(245,181,68,.07);color:#F5D08A;
  padding:1rem 1.25rem;border-radius:var(--r);font-size:.88rem;line-height:1.6;margin-bottom:2rem;
}
.encart-attente b{color:#F5B544}

/* ---------- 14. Réalisations ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.5rem}
.filtre{
  background:transparent;border:1px solid var(--ligne);color:var(--texte-doux);
  font-family:var(--f-titre);font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:.6rem 1.1rem;border-radius:var(--r);cursor:pointer;transition:var(--transition);
}
.filtre:hover{color:var(--blanc);border-color:var(--ligne-forte)}
.filtre[aria-pressed="true"]{background:var(--cuivre);border-color:var(--cuivre);color:#140D06}
.grille-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.6vw,1.25rem)}
@media (max-width:900px){.grille-galerie{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grille-galerie{grid-template-columns:1fr}}
.galerie-item{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--noir-3);border:1px solid var(--ligne);aspect-ratio:4/3;min-width:0}
.galerie-item.est-masque{display:none}
.galerie-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.galerie-item:hover img{transform:scale(1.06)}
.galerie-item__legende{
  position:absolute;inset-inline:0;bottom:0;padding:2.5rem 1.15rem 1.05rem;
  background:linear-gradient(to top,rgba(11,11,12,.94),transparent);
}
.galerie-item__titre{display:block;font-family:var(--f-titre);font-weight:700;color:var(--blanc);font-size:.98rem;line-height:1.3}
.galerie-item__lieu{display:block;font-size:.76rem;color:var(--cuivre-clair);letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem}

/* ---------- 15. Étapes ---------- */
/* Ni numéros 01/02/03, ni cartes collées par un filet d'un pixel : les
   étapes se lisent dans l'ordre, séparées par de vraies gouttières. */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
@media (max-width:900px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.etapes{grid-template-columns:1fr}}
.etape{min-width:0;transition:transform .35s ease}
.etape::before{content:"";display:block;width:100%;height:2px;background:var(--grad-cuivre);margin-bottom:1.15rem}
.etape:hover{transform:translateY(-4px)}
.etape__titre{font-family:var(--f-titre);font-size:1.08rem;font-weight:700;color:var(--blanc);margin:0 0 .55rem;line-height:1.3}
.etape p{font-size:.92rem;color:var(--texte-doux);line-height:1.65;margin:0}

/* ---------- 16. FAQ ---------- */
.faq{max-width:920px;margin-inline:auto;border-top:1px solid var(--ligne)}
.faq__item{border-bottom:1px solid var(--ligne)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:1.5rem .5rem 1.5rem 0;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  font-family:var(--f-titre);font-size:clamp(.94rem,.91rem + .2vw,1.05rem);font-weight:700;
  color:var(--blanc);line-height:1.4;transition:color .3s ease;
}
.faq__q:hover{color:var(--cuivre-clair)}
.faq__icone{flex:none;width:22px;height:22px;position:relative;margin-top:.28em}
.faq__icone::before,.faq__icone::after{content:"";position:absolute;background:var(--cuivre);transition:transform .35s ease}
.faq__icone::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq__icone::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.faq__q[aria-expanded="true"] .faq__icone::after{transform:translateX(-50%) scaleY(0)}
.faq__r{overflow:hidden;height:0;transition:height .4s cubic-bezier(.22,.61,.36,1)}
.faq__r-interieur{padding:0 3rem 1.6rem 0;color:var(--texte);font-size:.98rem;line-height:1.75}
.faq__r-interieur p:last-child{margin-bottom:0}

/* ---------- 17. Zones d'intervention ---------- */
.grille-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:860px){.grille-zones{grid-template-columns:1fr}}
.carte-zone{
  display:block;background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.2rem);text-decoration:none;min-width:0;transition:var(--transition);position:relative;overflow:hidden;
}
.carte-zone::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad-cuivre);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.carte-zone:hover{border-color:rgba(192,138,82,.5);background:var(--noir-4);transform:translateY(-4px)}
.carte-zone:hover::before{transform:scaleX(1)}
.carte-zone__ville{font-family:var(--f-titre);font-size:1.35rem;font-weight:800;color:var(--blanc);margin:0 0 .3rem;letter-spacing:-.02em}
.carte-zone__cp{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre);font-family:var(--f-titre);font-weight:600}
.carte-zone p{font-size:.92rem;color:var(--texte-doux);margin:.9rem 0 1.1rem;line-height:1.65}
.communes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;list-style:none;padding:0}
.communes li{display:block;font-size:.78rem;color:var(--texte-doux);border:1px solid var(--ligne);padding:.35rem .8rem;border-radius:2px;background:var(--noir-3)}

/* ---------- 18. Bandeau appel ---------- */
.bandeau-cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(4.5rem,9vw,7.5rem)}
.bandeau-cta__fond{position:absolute;inset:0;z-index:-2}
.bandeau-cta__fond img{width:100%;height:100%;object-fit:cover}
.bandeau-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(11,11,12,.95),rgba(11,11,12,.72))}
.bandeau-cta h2{max-width:22ch;margin-inline:auto}
.bandeau-cta .chapo{margin-inline:auto;margin-bottom:2.2rem}
.bandeau-cta__tel{
  display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;margin-top:2rem;
  font-family:var(--f-titre);font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);font-weight:800;
  letter-spacing:-.02em;color:var(--blanc);transition:color .3s ease;
}
.bandeau-cta__tel:hover{color:var(--cuivre-clair)}
.bandeau-cta__tel svg{width:.85em;height:.85em;color:var(--cuivre)}

/* ---------- 19. Formulaire ---------- */
.form{display:grid;gap:1.15rem}
.form__ligne{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:640px){.form__ligne{grid-template-columns:1fr}}
.champ{display:block;min-width:0}
.champ__label{display:block;font-family:var(--f-titre);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--chrome-2);margin-bottom:.5rem}
.champ__label .oblig{color:var(--cuivre)}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);
  color:var(--blanc);font-family:var(--f-texte);font-size:.94rem;padding:.8rem .95rem;
  transition:border-color .3s ease,background .3s ease;
}
.champ textarea{min-height:150px;resize:vertical;line-height:1.65}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem;padding-right:2.8rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--cuivre);background:var(--noir-4)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--chrome-3)}
.champ--rgpd{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.85rem;color:var(--texte-doux);line-height:1.6}
.champ--rgpd input{width:18px;height:18px;margin-top:.28em;accent-color:var(--cuivre);flex:none}
.form__pot{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.form__retour{padding:1rem 1.25rem;border-radius:var(--r);font-size:.92rem;line-height:1.6;display:none}
.form__retour.est-visible{display:block}
.form__retour--ok{background:rgba(127,166,92,.12);border:1px solid rgba(127,166,92,.45);color:#B8DCA0}
.form__retour--ko{background:rgba(220,90,70,.1);border:1px solid rgba(220,90,70,.45);color:#F0A99C}
.form__note{font-size:.8rem;color:var(--chrome-3);line-height:1.6}

/* ---------- 20. Contact ---------- */
.grille-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:920px){.grille-contact{grid-template-columns:1fr}}
.bloc-info{background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.25rem)}
.bloc-info+.bloc-info{margin-top:1.25rem}
.info-liste{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.info-liste li{display:block;position:relative;padding-left:2.9rem;min-width:0}
.info-liste li>svg{position:absolute;left:0;top:.1rem;width:20px;height:20px;color:var(--cuivre)}
.info-liste__label{display:block;font-family:var(--f-titre);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:.2rem}
.info-liste__valeur{display:block;color:var(--blanc);font-size:1.02rem;line-height:1.5;font-weight:500}
.info-liste a{color:var(--blanc);text-decoration:none}
.info-liste a:hover{color:var(--cuivre-clair)}
.horaires{list-style:none;margin:0;padding:0}
.horaires li{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ligne);font-size:.92rem}
.horaires li:last-child{border-bottom:0}
.horaires__jour{color:var(--texte)}
.horaires__h{color:var(--blanc);font-weight:600;white-space:nowrap}
.horaires__h--ferme{color:var(--chrome-3);font-weight:400}
.carte-maps{border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;background:var(--noir-3)}
.carte-maps iframe{display:block;width:100%;height:380px;border:0;filter:grayscale(1) invert(.92) contrast(.86)}

/* ---------- 21. Partenaires ---------- */
/* Les fichiers fournis sont des lettrages sombres sur fond transparent :
   posés tels quels sur le noir du site, trois des quatre étaient illisibles.
   Ils sont recomposés sur une plaque claire par _tools/logos-part.mjs, ce qui
   règle du même coup l'écart de taille apparente signalé sur Gedimat. */
.partenaires{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);align-items:stretch;
}
@media (max-width:820px){.partenaires{grid-template-columns:repeat(2,1fr)}}
/* La plaque est faite ici, pas cuite dans l'image : un logo recomposé sur une
   plaque bitmap puis redimensionné subit deux rééchantillonnages et ressort
   flou. Servi à sa taille native, le navigateur ne le redimensionne qu'une fois. */
.partenaires__plaque{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:7/4;padding:clamp(.9rem,2vw,1.5rem);
  background:#F4F5F6;border-radius:var(--r);border:1px solid var(--ligne);
  opacity:.94;transition:opacity .4s ease,transform .4s ease,border-color .4s ease;
}
.partenaires__plaque:hover{opacity:1;transform:translateY(-4px);border-color:var(--cuivre)}
/* Calage sur la largeur : les quatre lettrages paraissent ainsi de la même
   taille, quelle que soit leur hauteur d'encre. */
.partenaires__plaque img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block}

/* ---------- 22. Blog ---------- */
.grille-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.4vw,2rem)}
@media (max-width:960px){.grille-blog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grille-blog{grid-template-columns:1fr}}
.carte-article{display:flex;flex-direction:column;background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;text-decoration:none;min-width:0;transition:var(--transition)}
.carte-article:hover{border-color:rgba(192,138,82,.5);transform:translateY(-5px)}
.carte-article__media{aspect-ratio:16/10;overflow:hidden;background:var(--noir-4)}
.carte-article__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.carte-article:hover .carte-article__media img{transform:scale(1.06)}
.carte-article__corps{padding:1.2rem;display:flex;flex-direction:column;gap:.65rem;flex:1;min-width:0}
.carte-article__meta{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cuivre);font-family:var(--f-titre);font-weight:600}
.carte-article__titre{font-family:var(--f-titre);font-size:1rem;font-weight:700;color:var(--blanc);line-height:1.3;margin:0;letter-spacing:-.015em}
.carte-article:hover .carte-article__titre{color:var(--cuivre-clair)}
.carte-article__extrait{font-size:.83rem;color:var(--texte-doux);line-height:1.65;margin:0;flex:1}

.article{max-width:680px;margin-inline:auto}
.article__entete{margin-bottom:2.5rem}
.article__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-doux);font-family:var(--f-titre);font-weight:600;margin-bottom:1.25rem}
.article__meta b{color:var(--cuivre);font-weight:700}
.article__corps{font-size:.97rem;line-height:1.8}
.article__corps h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);margin-top:2.75rem}
.article__corps h3{font-size:1.22rem;margin-top:2rem;color:var(--cuivre-clair)}
.article__corps ul,.article__corps ol{padding-left:0;list-style:none;margin:1.35rem 0}
.article__corps ul li{display:block;position:relative;padding-left:1.6rem;margin-bottom:.65rem}
.article__corps ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--cuivre);transform:rotate(45deg)}
.article__corps ol{counter-reset:n}
.article__corps ol li{display:block;position:relative;padding-left:2.2rem;margin-bottom:.65rem;counter-increment:n}
.article__corps ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--f-titre);font-weight:700;font-size:.85rem;color:var(--cuivre)}
.encadre{background:var(--noir-3);border-left:2px solid var(--cuivre);border-radius:0 var(--r) var(--r) 0;padding:1.5rem 1.75rem;margin:2rem 0;font-size:.98rem}
.encadre__titre{font-family:var(--f-titre);font-weight:700;color:var(--blanc);margin:0 0 .5rem;font-size:1.02rem}
.tableau-enveloppe{overflow-x:auto;margin:2rem 0;border:1px solid var(--ligne);border-radius:var(--r)}
.tableau{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tableau th,.tableau td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--ligne)}
.tableau th{font-family:var(--f-titre);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cuivre);background:var(--noir-3);white-space:nowrap}
.tableau td{color:var(--texte)}
.tableau tr:last-child td{border-bottom:0}

/* ---------- 23. Fil d'Ariane ---------- */
.ariane{padding-top:clamp(7.5rem,12vw,9.5rem);padding-bottom:0}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-size:.76rem;letter-spacing:.08em;color:var(--texte-doux)}
.ariane li{display:flex;align-items:center;gap:.5rem}
.ariane li+li::before{content:"/";color:var(--chrome-3)}
.ariane a{color:var(--texte-doux);text-decoration:none}
.ariane a:hover{color:var(--cuivre-clair)}
.ariane [aria-current="page"]{color:var(--chrome)}

/* En-tête de page intérieure */
.entete-page{padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.entete-page h1{max-width:20ch;margin-bottom:.35em}
.entete-page .chapo{max-width:60ch}

/* ---------- 24. Pied de page ---------- */
.pied{background:var(--noir-2);border-top:1px solid var(--ligne);padding-block:clamp(3.5rem,7vw,5.5rem) 0}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:3.5rem}
@media (max-width:980px){.pied__haut{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pied__haut{grid-template-columns:1fr;gap:2.25rem}}
.pied__col{min-width:0}
.pied__logo{width:clamp(140px,16vw,180px);margin-bottom:1.25rem}
.pied__desc{font-size:.9rem;color:var(--texte-doux);line-height:1.7;max-width:34ch}
.pied__titre{font-family:var(--f-titre);font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--cuivre);margin:0 0 1.35rem}
.pied__liste{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pied__liste li{display:block;min-width:0}
.pied__liste a{color:var(--texte-doux);text-decoration:none;font-size:.9rem;transition:color .3s ease}
.pied__liste a:hover{color:var(--cuivre-clair)}
.pied__contact{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;font-size:.9rem}
.pied__contact li{display:block;position:relative;padding-left:1.85rem;min-width:0;line-height:1.6}
.pied__contact li>svg{position:absolute;left:0;top:.18rem;width:16px;height:16px;color:var(--cuivre)}
.pied__contact a{color:var(--texte-doux);text-decoration:none}
.pied__contact a:hover{color:var(--cuivre-clair)}
.pied__reseaux{display:flex;gap:.6rem;margin-top:1.5rem}
.pied__reseaux a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ligne);border-radius:var(--r);color:var(--chrome-2);transition:var(--transition)}
.pied__reseaux a:hover{color:var(--noir);background:var(--cuivre);border-color:var(--cuivre)}
.pied__reseaux svg{width:17px;height:17px}
.pied__bas{border-top:1px solid var(--ligne);padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--chrome-3)}
.pied__bas a{color:var(--chrome-3);text-decoration:none}
.pied__bas a:hover{color:var(--cuivre-clair)}
.pied__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;margin:0;padding:0}
.pied__legal li{display:block}

/* ---------- 25. Actions flottantes ---------- */
.actions-flottantes{position:fixed;right:1.15rem;bottom:1.15rem;z-index:100;display:flex;flex-direction:column;gap:.7rem}
.action-ronde{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:transform .3s ease;
}
.action-ronde:hover{transform:scale(1.08);color:#fff}
.action-ronde svg{width:26px;height:26px}
.action-ronde--wa{background:#25D366}
.action-ronde--tel{background:var(--grad-cuivre);color:#140D06;display:none}
.action-ronde--tel:hover{color:#140D06}
.haut-page{
  position:fixed;left:1.15rem;bottom:1.15rem;z-index:100;width:46px;height:46px;border-radius:50%;
  background:var(--noir-3);border:1px solid var(--ligne-forte);color:var(--chrome);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:var(--transition);
}
.haut-page.est-visible{opacity:1;visibility:visible;transform:translateY(0)}
.haut-page:hover{border-color:var(--cuivre);color:var(--cuivre-clair)}
.haut-page svg{width:19px;height:19px}
@media (max-width:760px){
  .action-ronde--tel{display:flex}
  .actions-flottantes{right:1rem;bottom:1rem}
}

/* ---------- 26. Bandeau cookies ---------- */
.cookies{
  position:fixed;left:50%;transform:translate(-50%,140%);bottom:1.15rem;z-index:140;
  width:min(680px,calc(100vw - 2rem));background:var(--noir-3);border:1px solid var(--ligne-forte);
  border-radius:var(--r);padding:1.5rem;box-shadow:var(--ombre);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cookies.est-visible{transform:translate(-50%,0)}
.cookies p{font-size:.88rem;color:var(--texte-doux);line-height:1.65;margin:0 0 1.15rem}
.cookies__actions{display:flex;flex-wrap:wrap;gap:.65rem}
.cookies .btn{padding:.8rem 1.4rem;font-size:.74rem}

/* ---------- 27. Animations d'apparition ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
[data-reveal].est-visible{opacity:1;transform:none}
.sans-js [data-reveal],[data-reveal].sans-anim{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}

/* ---------- 29. Impression ---------- */
@media print{
  .entete,.urgence,.actions-flottantes,.haut-page,.cookies,.heros__defiler,.bandeau-cta{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3,strong{color:#000}
  a{color:#000}
}

/* =========================================================================
   31. MÉCANIQUES REPRISES DES RÉFÉRENCES
   Réimplémentation originale des effets analysés sur :
   · hayswoodworking.com  (rideau d'intro clip-path, zoom héros, grille de
     filets, accordéon à image survolée, grille projets décalée, collage CTA)
   · thomasmaybespoke.co.uk (fond scindé, colonnes à hauteur égale, zoomIn)
   · yoshiharawoodworks.com (catalogue par savoir-faire : appliqué à l'IA)
   ========================================================================= */

/* ---- 31.1 Rideau d'intro ------------------------------------------------
   Hays : un panneau plein écran couleur de marque, logo centré, qui remonte
   après 1 s en se découpant par le bas (top:0→-100vh + clip-path inset).
   Ici en noir #0B0B0C avec les filets de la grille qui se tracent d'abord. */
@keyframes rideau-remonte{
  0%  {transform:translateY(0);   clip-path:inset(0 0 0 0)}
  100%{transform:translateY(-100vh); clip-path:inset(100% 0 0 0)}
}
@keyframes filet-vertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes filet-horizontal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes logo-apparait{
  from{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes zoom-sortant{from{transform:scale(1.18)}to{transform:scale(1)}}

.rideau{
  position:fixed;inset:0;height:100svh;width:100%;
  background:var(--noir);z-index:900;overflow:hidden;
  animation:rideau-remonte .95s cubic-bezier(.76,0,.24,1) forwards;
  animation-delay:1.15s;will-change:transform,clip-path;
}
.rideau__filet{position:absolute;background:var(--ligne-forte);transform-origin:top left}
.rideau__filet--v{top:0;bottom:0;width:1px;animation:filet-vertical .7s cubic-bezier(.76,0,.24,1) forwards}
.rideau__filet--h{left:0;right:0;height:1px;animation:filet-horizontal .7s cubic-bezier(.76,0,.24,1) forwards}
.rideau__logo{
  position:absolute;top:50%;left:50%;width:min(26vw,300px);
  transform:translate(-50%,-50%);opacity:0;
  animation:logo-apparait .8s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:.3s;
}
body.rideau-actif{overflow:hidden}
/* Le héros ne zoome que si le rideau a joué (sinon : image nette d'emblée) */
body.intro-jouee .heros__fond img{
  animation:zoom-sortant 2.6s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:1.05s;
}

/* ---- 31.2 Colonne de gauche + logo persistant ---------------------------
   Hays réserve les 4 premières colonnes de sa grille 28 à un logo collant,
   séparé du contenu par un filet vertical. Version allégée ici. */
.filet-colonne{
  position:fixed;top:0;bottom:0;left:clamp(3.5rem,7vw,7.5rem);width:1px;
  background:var(--ligne);z-index:1;pointer-events:none;
}
@media (max-width:1180px){.filet-colonne{display:none}}
.marque-collante{
  position:fixed;top:clamp(6.5rem,9vh,8.5rem);left:0;z-index:90;
  width:clamp(3.5rem,7vw,7.5rem);display:flex;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;
  pointer-events:none;
}
.marque-collante.est-visible{opacity:.85;visibility:visible;pointer-events:auto}
.marque-collante img{width:clamp(30px,3.4vw,44px);height:auto}
@media (max-width:1180px){.marque-collante{display:none}}

/* ---- 31.3 Lien souligné à retard asymétrique ---------------------------
   Hays : border-bottom transparent → couleur, transition .5s, avec un
   transition-delay de .1 s à l'entrée et 0 s à la sortie. Le retard fait
   toute la qualité perçue du survol. */
.lien-souligne{
  display:inline-block;text-decoration:none;color:var(--chrome);
  font-family:var(--f-titre);font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
}
.lien-souligne span{
  display:inline-block;padding-bottom:.18rem;
  border-bottom:1px solid transparent;
  transition:border-bottom-color .5s ease,color .4s ease;transition-delay:0s;
}
.lien-souligne:hover{color:var(--cuivre-clair)}
.lien-souligne:hover span{transition-delay:.1s;border-bottom-color:var(--cuivre-clair)}

/* ---- 31.4 Accordéon prestations à image survolée -----------------------
   L'effet signature de Hays : au survol la ligne s'inverse (fond plein,
   texte clair) ET une image du chantier apparaît à droite dans la ligne. */
.liste-savoir{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.savoir{border-bottom:1px solid var(--ligne);position:relative}
.savoir:last-child{border-bottom:0}
.savoir__lien{
  position:relative;display:flex;align-items:center;gap:1.5rem;width:100%;
  padding:clamp(.9rem,1.8vw,1.4rem) clamp(3rem,5vw,4.25rem) clamp(.9rem,1.8vw,1.4rem) clamp(.65rem,1.6vw,1.2rem);
  text-decoration:none;color:var(--blanc);background:transparent;
  font-family:var(--f-titre);font-size:clamp(1.05rem,.95rem + 1vw,1.65rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;
  transition:background .45s ease,color .45s ease,padding-left .45s ease;
  min-width:0;
}
.savoir__nom{flex:1;min-width:0}
.savoir__note{
  display:block;font-family:var(--f-texte);font-size:.86rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--texte-doux);margin-top:.3rem;line-height:1.5;
  transition:color .45s ease;
}
.savoir__fleche{
  position:absolute;right:clamp(.9rem,2vw,1.75rem);top:50%;transform:translateY(-50%);
  width:clamp(24px,3vw,42px);height:auto;color:var(--chrome-2);transition:color .45s ease,transform .45s ease;
}
.savoir__vignette{
  position:absolute;right:8%;top:50%;transform:translateY(-50%) scale(.94);
  width:min(26rem,32vw);aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);
  opacity:0;visibility:hidden;pointer-events:none;z-index:3;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.9);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,.61,.36,1),visibility .45s;
}
.savoir__vignette img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .savoir__lien:hover{background:var(--chrome);color:var(--noir);padding-left:clamp(1.5rem,3vw,2.5rem)}
  .savoir__lien:hover .savoir__note{color:rgba(11,11,12,.62)}
  .savoir__lien:hover .savoir__fleche{color:var(--noir);transform:translateY(-50%) translateX(6px)}
  .savoir__lien:hover .savoir__vignette{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
}
@media (max-width:899px){.savoir__vignette{display:none}}

/* ---- 31.5 Grille de projets décalée ------------------------------------
   Hays décale verticalement les colonnes (18 % / 9 % / 0) pour casser
   l'alignement et donner un rythme éditorial. */
/* align-items:start est indispensable : par défaut une grille étire ses
   items sur toute la hauteur de la rangée, ce qui annule le margin-top. */
@media (min-width:768px){
  .grille-decalee{align-items:start}
  .grille-decalee>*:nth-child(3n+1){margin-top:14%}
  .grille-decalee>*:nth-child(3n+2){margin-top:7%}
  .grille-decalee>*:nth-child(3n+3){margin-top:0}
}
.grille-decalee .galerie-item img,
.grille-decalee .carte-service__media img{
  backface-visibility:hidden;perspective:1000px;
  transition:transform .7s ease-in-out,filter 1s ease-in-out;
}

/* ---- 31.6 Bloc citation pleine largeur ---------------------------------
   Repris de leur « testimonial-block dark-bg » : image plein cadre, citation
   ancrée en bas à gauche, gros guillemet en pseudo-élément, cite préfixé -. */
.citation-bloc{position:relative;isolation:isolate;min-height:min(78svh,640px);display:flex;align-items:flex-end;overflow:hidden}
.citation-bloc__fond{position:absolute;inset:0;z-index:-2}
.citation-bloc__fond img{width:100%;height:100%;object-fit:cover;object-position:center}
.citation-bloc::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,transparent 38%,rgba(11,11,12,.9) 86%),
    linear-gradient(0deg,rgba(11,11,12,.1),rgba(11,11,12,.1)),
    linear-gradient(180deg,rgba(11,11,12,.4),rgba(11,11,12,.02) 28%);
}
.citation-bloc__texte{width:100%;padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem)}
.citation{
  position:relative;margin:0 0 1.5rem;max-width:34ch;
  font-family:var(--f-titre);font-weight:600;letter-spacing:-.02em;line-height:1.28;
  font-size:clamp(1.15rem,1rem + 1.1vw,1.85rem);color:var(--blanc);
}
.citation::before{
  content:"";position:absolute;top:clamp(-3.4rem,-5vw,-2.4rem);left:0;
  width:clamp(2.1rem,3.4vw,3.25rem);aspect-ratio:52/47;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 47'%3E%3Cpath fill='%23C08A52' d='M52 0v8c-2.6.5-4.7 1.6-6.3 3.5-1.5 1.7-2.7 3.9-3.5 6.6-.7 2.7-1 5.6-1 8.7h9.3V47H31V28.7c0-6.7 1-12 3-16 2.1-3.9 4.7-6.9 7.9-8.9C45.1 1.9 48.5.6 52 0zM21 0v8c-2.6.5-4.7 1.6-6.3 3.5-1.5 1.7-2.7 3.9-3.5 6.6-.7 2.7-1 5.6-1 8.7h9.3V47H0V28.7c0-6.7 1-12 3-16C5.1 8.8 7.7 5.8 10.9 3.8 14.1 1.9 17.5.6 21 0z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.citation-pied{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline;justify-content:space-between}
.citation-pied cite{font-style:normal;font-size:clamp(.8rem,2vw,1rem);color:var(--chrome);font-weight:400}

/* ---- 31.7 Collage éditorial d'appel ------------------------------------
   Leur « cta-block » : deux images décalées, un bloc de texte centré remonté
   en marge négative par-dessus, puis deux images de nouveau en dessous. */
.collage{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,6rem)}
.collage__rangee{display:grid;grid-template-columns:repeat(24,1fr);gap:clamp(.5rem,1.4vw,1.25rem);align-items:end}
.collage__img{margin:0;overflow:hidden;border-radius:var(--r);min-width:0}
.collage__img img{width:100%;height:100%;object-fit:cover;display:block}
.collage__img--a{grid-column:1/16;aspect-ratio:3/2;padding-bottom:0;margin-bottom:clamp(2.5rem,6vw,6.25rem)}
.collage__img--b{grid-column:18/24;aspect-ratio:2/3}
.collage__img--c{grid-column:1/7;aspect-ratio:2/3}
.collage__img--d{grid-column:9/25;aspect-ratio:16/9}
.collage__texte{position:relative;z-index:2;text-align:center;max-width:38rem;margin-inline:auto;padding-inline:var(--gout)}
@media (min-width:768px){.collage__texte{margin-top:clamp(-9rem,-11%,-4rem)}}
.collage__texte h2{max-width:20ch;margin-inline:auto}
.collage__texte .chapo{margin-inline:auto;margin-bottom:2rem}
.collage__rangee--bas{margin-top:clamp(2.5rem,6vw,5rem)}
@media (max-width:767px){
  .collage__rangee{grid-template-columns:1fr 1fr;gap:.75rem}
  .collage__img--a,.collage__img--b,.collage__img--c,.collage__img--d{grid-column:auto;aspect-ratio:1/1;margin-bottom:0}
  .collage__texte{margin-top:2.5rem}
}

/* ---- 31.8 Fond scindé (Thomas May, « bg-divide ») ----------------------
   Le fond de la section change à mi-hauteur, le média chevauche la limite. */
.fond-scinde{position:relative;isolation:isolate}
.fond-scinde::before{
  content:"";position:absolute;inset-inline:0;top:0;height:52%;
  background:var(--noir-2);z-index:-1;
}

/* ---- 31.9 Apparitions : variante zoomIn (Thomas May / WOW.js) ---------- */
[data-reveal="zoom"]{opacity:0;transform:scale(.955)}
[data-reveal="zoom"].est-visible{opacity:1;transform:none}
[data-reveal="gauche"]{opacity:0;transform:translateX(-28px)}
[data-reveal="gauche"].est-visible{opacity:1;transform:none}
[data-reveal="masque"]{clip-path:inset(0 0 100% 0);opacity:1;transform:none;transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
[data-reveal="masque"].est-visible{clip-path:inset(0 0 0 0)}
.sans-js [data-reveal],[data-reveal].sans-anim{clip-path:none!important;transform:none!important;opacity:1!important}

/* ---- 31.10 Voile de héros : recette de dégradés de Hays ----------------
   Trois dégradés superposés plutôt qu'un seul : la lisibilité du texte est
   assurée en bas sans écraser le ciel en haut. */
/* Le voile doit rendre le titre lisible SANS effacer la photo : les quatre
   couches se multiplient, une valeur trop forte sur chacune donne un écran
   quasi noir. Densité mesurée au centre : environ 0,68 au lieu de 0,90. */
.heros__voile{
  background:
    radial-gradient(ellipse 58% 50% at 50% 46%,rgba(11,11,12,.62) 0%,rgba(11,11,12,.38) 48%,rgba(11,11,12,.14) 76%,transparent 100%),
    linear-gradient(180deg,transparent 46%,rgba(11,11,12,.5) 86%),
    linear-gradient(180deg,rgba(11,11,12,.34),rgba(11,11,12,.02) 26%);
}

/* ---- 31.11 Héros : art direction et typographie mobile -----------------
   Hays sert une image portrait sous 768 px via <picture> plutôt que de
   recadrer une image paysage. Même principe ici, avec une typo resserrée. */
.heros__fond picture{display:block;width:100%;height:100%}
@media (max-width:640px){
  .heros h1{font-size:clamp(2.05rem,1.2rem + 4.2vw,2.9rem);letter-spacing:-.03em}
  .heros__accroche{font-size:1rem;line-height:1.65;margin-bottom:1.9rem}
  .heros__logo{width:clamp(160px,44vw,220px);margin-bottom:1.5rem}
  .heros .groupe-btn{flex-direction:column;width:100%}
  .heros .btn{width:100%}
  .heros__zone{margin-top:1.9rem;font-size:.68rem;letter-spacing:.1em}
}

/* =========================================================================
   32. PARALLAXE ET APPARITIONS SÉQUENCÉES
   ========================================================================= */

/* ---- 32.1 Parallaxe ----------------------------------------------------
   Toute image parallaxée est sur-dimensionnée dans un cadre en overflow
   hidden : GSAP la translate verticalement, le débord évite les bandes
   vides en haut et en bas. Sans JS (ou en mouvement réduit) l'image reste
   simplement cadrée normalement : aucun risque d'image tronquée. */
[data-parallaxe]{overflow:hidden}
[data-parallaxe]>img,[data-parallaxe]>picture>img{
  width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform;
}
.js-parallaxe>img,.js-parallaxe>picture>img{height:118%;transform:translateY(-9%);transition:none!important}
/* Le survol des cartes parallaxées joue sur le cadre, plus sur l'image :
   GSAP écrit déjà transform en style inline à chaque image de la boucle. */
.carte-service:hover .js-parallaxe,.galerie-item:hover .js-parallaxe,
.carte-article:hover .js-parallaxe,.cadre:hover .js-parallaxe{filter:brightness(1.08) saturate(1.06)}
.js-parallaxe{transition:filter .7s ease}

/* ---- 32.2 Apparitions accentuées ---------------------------------------
   Course plus longue, courbe plus lente et légère mise à l'échelle : le
   mouvement se remarque sans jamais gêner la lecture. */
[data-reveal]{
  opacity:0;transform:translate3d(0,42px,0) scale(.985);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
[data-reveal].est-visible{opacity:1;transform:none;will-change:auto}
[data-reveal="zoom"]{opacity:0;transform:scale(.93)}
[data-reveal="gauche"]{opacity:0;transform:translate3d(-42px,0,0)}
[data-reveal="masque"]{
  opacity:1;transform:none;clip-path:inset(0 0 102% 0);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1);
}
[data-reveal="masque"].est-visible{clip-path:inset(0 0 0 0)}

/* ---- 32.3 Arrivée une par une ------------------------------------------
   Les enfants d'un conteneur [data-serie] montent l'un après l'autre.
   Le retard est posé en variable par le JS (--i) : pas de règle par rang. */
[data-serie]>*{
  opacity:0;transform:translate3d(0,54px,0) scale(.975);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 110ms);
  will-change:opacity,transform;
}
[data-serie].est-visible>*{opacity:1;transform:none;will-change:auto}

/* Variante « ligne » pour l'accordéon : glissement latéral + volet */
[data-serie="ligne"]>*{transform:translate3d(-34px,0,0);clip-path:inset(0 100% 0 0)}
[data-serie="ligne"].est-visible>*{transform:none;clip-path:inset(0 0 0 0)}
[data-serie="ligne"]>*{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),clip-path .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 85ms)}

/* Filets de la liste : ils se tracent eux aussi, de gauche à droite */
[data-serie="ligne"]>*{border-bottom-color:transparent;transition-property:opacity,transform,clip-path,border-color}
[data-serie="ligne"].est-visible>*{border-bottom-color:var(--ligne)}

/* Sécurités : sans JS, en mouvement réduit, ou en repli : tout est visible */
.sans-js [data-reveal],.sans-js [data-serie]>*,
[data-reveal].sans-anim,[data-serie].sans-anim>*{
  opacity:1!important;transform:none!important;clip-path:none!important;
  transition:none!important;transition-delay:0s!important;
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-serie]>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .js-parallaxe>img,.js-parallaxe>picture>img{height:100%;transform:none}
}

/* =========================================================================
   33. TITRE DE HÉROS À DEUX NIVEAUX
   Le mot-clé porte le H1 (référencement), l'accroche porte le regard.
   Les deux sont dans la même balise : rien n'est caché au moteur.
   ========================================================================= */
.heros__titre{display:block;margin-bottom:.55em}
.heros__mc{
  display:block;font-family:var(--f-titre);font-size:clamp(.72rem,.68rem + .22vw,.86rem);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cuivre-clair);margin-bottom:1.15rem;line-height:1.4;
}
.heros__hook{display:block;line-height:1.05;letter-spacing:-.035em}
@media (max-width:640px){
  .heros__mc{letter-spacing:.14em;margin-bottom:.85rem}
}

/* =========================================================================
   34. ENTRÉE DE PAGE
   ========================================================================= */

/* ---- 34.1 Découpe en mots ----------------------------------------------
   Chaque mot est enfermé dans un masque : le mot monte depuis sous la
   ligne. Posé par le JS, donc sans JS le titre reste un titre normal. */
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.mot>i{display:inline-block;font-style:normal;transform:translateY(105%);will-change:transform}
.titre-pret .mot>i{transform:none}

/* ---- 34.2 Volet de transition entre pages ------------------------------
   Version courte du rideau : à chaque chargement, un voile remonte en se
   découpant. Donne la continuité d'une navigation applicative. */
.volet{
  position:fixed;inset:0;height:100svh;z-index:880;background:var(--noir);
  pointer-events:none;transform-origin:top;
  animation:volet-remonte .72s cubic-bezier(.76,0,.24,1) forwards;
  animation-delay:.12s;
}
@keyframes volet-remonte{
  0%  {transform:translateY(0);   clip-path:inset(0 0 0 0)}
  100%{transform:translateY(-100svh); clip-path:inset(100% 0 0 0)}
}
.volet__marque{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(90px,11vw,140px);opacity:0;
  animation:volet-marque .6s ease forwards;
}
@keyframes volet-marque{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}

/* ---- 34.3 Entrée du contenu -------------------------------------------- */
[data-entree]{opacity:0;transform:translate3d(0,26px,0)}
.entree-prete [data-entree]{
  opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--e,0) * 90ms + 160ms);
}
.sans-js [data-entree],.sans-anim[data-entree]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  [data-entree]{opacity:1!important;transform:none!important}
  .mot>i{transform:none!important}
  .volet{display:none}
}


/* =========================================================================
   35. CURSEUR MARTEAU DE CHARPENTIER
   Un SVG en data-URI, donc aucune requête réseau. Le point actif est placé
   sur la table de frappe (8 8). Désactivé au tactile et pour les champs de
   saisie, où le curseur système porte une information utile.
   ========================================================================= */
@media (hover:hover) and (pointer:fine) {
  body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20transform=%22rotate(-38%2016%2016)%22%3E%3Crect%20x=%2214.6%22%20y=%229%22%20width=%222.8%22%20height=%2218%22%20rx=%221.2%22%20fill=%22%23E3B07A%22%20stroke=%22%232A1B0C%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M9%205.4h14a1.6%201.6%200%200%201%201.6%201.6v2.2A1.6%201.6%200%200%201%2023%2010.8h-2.6v1.9a1%201%200%200%201-1%201h-6.8a1%201%200%200%201-1-1v-1.9H9A1.6%201.6%200%200%201%207.4%209.2V7A1.6%201.6%200%200%201%209%205.4Z%22%20fill=%22%23E3B07A%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M7.4%207.6%204.6%206.2v4.4l2.8-1.4Z%22%20fill=%22%23E3B07A%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") 8 8, auto; }
  a, button, summary, .filtre, [role="button"], .av-ap, .savoir__lien, label {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20transform=%22rotate(-38%2016%2016)%22%3E%3Crect%20x=%2214.6%22%20y=%229%22%20width=%222.8%22%20height=%2218%22%20rx=%221.2%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M9%205.4h14a1.6%201.6%200%200%201%201.6%201.6v2.2A1.6%201.6%200%200%201%2023%2010.8h-2.6v1.9a1%201%200%200%201-1%201h-6.8a1%201%200%200%201-1-1v-1.9H9A1.6%201.6%200%200%201%207.4%209.2V7A1.6%201.6%200%200%201%209%205.4Z%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M7.4%207.6%204.6%206.2v4.4l2.8-1.4Z%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") 8 8, pointer;
  }
  input, textarea, select { cursor: auto; }
  input[type="range"] { cursor: ew-resize; }
  .av-ap { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20transform=%22rotate(-38%2016%2016)%22%3E%3Crect%20x=%2214.6%22%20y=%229%22%20width=%222.8%22%20height=%2218%22%20rx=%221.2%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M9%205.4h14a1.6%201.6%200%200%201%201.6%201.6v2.2A1.6%201.6%200%200%201%2023%2010.8h-2.6v1.9a1%201%200%200%201-1%201h-6.8a1%201%200%200%201-1-1v-1.9H9A1.6%201.6%200%200%201%207.4%209.2V7A1.6%201.6%200%200%201%209%205.4Z%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M7.4%207.6%204.6%206.2v4.4l2.8-1.4Z%22%20fill=%22%23F4F5F6%22%20stroke=%22%232A1B0C%22%20stroke-width=%221.1%22%20stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") 8 8, ew-resize; }
}

/* =========================================================================
   36. BADGE D'AVIS SUR LE HÉROS
   Logo + note Google, ancré en haut à gauche de la photo pleine page.
   ========================================================================= */
.heros__badge{
  position:absolute;top:calc(clamp(4.5rem,9vh,6.5rem) + 1rem);left:var(--gout);z-index:4;
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .85rem .55rem .6rem;border-radius:44px;
  background:rgba(11,11,12,.62);border:1px solid var(--ligne-forte);
  text-decoration:none;transition:var(--transition);
}
@supports (backdrop-filter:blur(1px)){.heros__badge{backdrop-filter:blur(14px) saturate(140%)}}
.heros__badge:hover{border-color:rgba(192,138,82,.6);background:rgba(11,11,12,.8)}
.heros__badge__logo{width:32px;height:auto;flex:none}
.heros__badge__bloc{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.heros__badge__note{display:flex;align-items:center;gap:.3rem;font-family:var(--f-titre);font-weight:800;font-size:.92rem;color:var(--blanc)}
.heros__badge__note em{font-style:normal;font-weight:600;font-size:.74rem;color:var(--texte-doux)}
.heros__badge__etoiles{color:#F5B544;font-size:.66rem;letter-spacing:.06em}
.heros__badge__src{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);font-family:var(--f-titre);font-weight:600;margin-top:.1rem}
@media (max-width:640px){
  .heros__badge{top:calc(clamp(4rem,8vh,5.5rem) + .6rem);left:1rem;right:1rem;justify-content:center;padding:.5rem .75rem}
}

/* =========================================================================
   37. ZONE D'INTERVENTION AVEC MINI-CARTE
   Carte OpenStreetMap centrée sur le siège, cercle de rayon dessiné en SVG
   par-dessus, et la liste cliquable des communes desservies.
   ========================================================================= */
.zone-carte{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.25rem);align-items:center}
@media (max-width:900px){.zone-carte{grid-template-columns:1fr}}
.zone-carte__media{position:relative;border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;background:var(--noir-3);min-width:0}
.zone-carte__media iframe{display:block;width:100%;height:clamp(300px,42vh,430px);border:0;filter:grayscale(1) invert(.92) contrast(.84) brightness(1.05)}
/* Le rayon est un vrai cercle CSS (aspect-ratio) plutôt qu'un SVG étiré :
   un viewBox non uniforme donnerait une ellipse sur un cadre non carré. */
.zone-carte__rayon{
  position:absolute;left:49.8%;top:46.4%;width:58%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(192,138,82,.14) 0%,rgba(192,138,82,.05) 70%,transparent 100%);
  border:1.5px dashed rgba(192,138,82,.75);
}
.zone-carte__point{
  position:absolute;left:49.8%;top:46.4%;width:14px;height:14px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--cuivre-clair);border:2px solid var(--noir);z-index:2;pointer-events:none;
  box-shadow:0 0 0 4px rgba(192,138,82,.28);
}
.zone-carte__point::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--cuivre);
  animation:pulse-zone 2.8s ease-out infinite;
}
@keyframes pulse-zone{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.zone-carte__point::after{animation:none}}
.zone-carte__etiq{
  position:absolute;left:.85rem;bottom:.85rem;z-index:2;
  background:rgba(11,11,12,.85);border:1px solid var(--ligne);border-radius:var(--r);
  padding:.5rem .8rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--f-titre);font-weight:600;color:var(--chrome);
}
.zone-carte__etiq b{color:var(--cuivre-clair)}
.zone-carte__texte{min-width:0}
.zone-villes{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.zone-villes li{display:block;min-width:0}
.zone-villes a,.zone-villes span{
  display:block;font-size:.8rem;color:var(--texte-doux);text-decoration:none;
  border:1px solid var(--ligne);padding:.4rem .85rem;border-radius:2px;background:var(--noir-3);
  transition:var(--transition);
}
.zone-villes a:hover{color:var(--noir);background:var(--cuivre);border-color:var(--cuivre)}

/* =========================================================================
   38. CIBLES TACTILES
   Sur un appareil tactile, toute commande doit offrir au moins 44 px de
   hauteur (recommandation Apple et Google). Les filtres de la galerie
   tombaient à 34 px, certains boutons à 43 px.
   ========================================================================= */
@media (hover:none), (pointer:coarse) {
  .btn, .filtre, .faq__q, .nav a, .nav__bascule, .pied__liste a,
  .pied__contact a, .info-liste a, .zone-villes a, .lien-fleche, .lien-souligne {
    min-height: 44px;
  }
  .filtre { display:inline-flex; align-items:center; padding-block:.7rem }
  .btn { padding-block:.95rem }
  .lien-fleche, .lien-souligne { display:inline-flex; align-items:center }
  .pied__liste a, .pied__contact a, .zone-villes a { display:inline-flex; align-items:center }
}
/* Le pointeur fin bénéficie aussi d'un minimum, sans excès. */
.filtre { min-height: 38px; display:inline-flex; align-items:center }

/* =========================================================================
   39. AJUSTEMENTS MOBILES
   ========================================================================= */
@media (max-width:640px){
  /* Le bandeau cookies occupait près d'un tiers de l'écran et recouvrait
     le bouton d'appel du héros au premier chargement. Version compacte,
     boutons sur une seule ligne. */
  .cookies{padding:1rem;bottom:.75rem;width:calc(100vw - 1.5rem)}
  .cookies p{font-size:.8rem;line-height:1.55;margin-bottom:.85rem}
  .cookies__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .cookies .btn{padding:.75rem .5rem;font-size:.7rem;letter-spacing:.06em;min-height:44px}

  /* Carte de la zone d'intervention : la légende repasse sous l'image. */
  .zone-carte__legende{position:static;margin-top:.7rem}
  .zone-villes a,.zone-villes span{font-size:.76rem;padding:.45rem .7rem}

  /* Avis : la carte prend presque toute la largeur pour rester lisible. */
  .avis-carte{width:min(300px,86vw);padding:1.35rem}
  .avis-note{gap:.85rem 1.25rem}
  .avis-note__chiffre{font-size:2.3rem}

  /* Collage : les quatre visuels en deux colonnes régulières. */
  .collage{padding-block:2.5rem}
  .collage__texte{margin-top:2rem}
}

/* ===================================================================== */
/* 30. Révision client du 31/08 et 01/09 (retours transmis par Simply On) */
/* ===================================================================== */

/* ---------- Bandeau « Urgence fuite » ---------- */
/* Demandé tout en haut du site, sur toutes les pages, en appel direct.
   Il reste fixe : une fuite se déclare pendant la lecture, pas avant. */
.urgence{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:130;
  height:var(--h-urgence);
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  padding-inline:1rem;text-decoration:none;
  background:var(--grad-cuivre);color:#140D06;
  font-family:var(--f-titre);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  transition:filter .3s ease;
}
.urgence:hover{color:#140D06;filter:brightness(1.08)}
.urgence svg{width:14px;height:14px;flex:none}
.urgence__titre{font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.urgence__sep{width:1px;height:14px;background:rgba(20,13,6,.32);flex:none}
.urgence__num{font-weight:700;font-size:.82rem;letter-spacing:.03em;white-space:nowrap}
.urgence__cta{
  border:1px solid rgba(20,13,6,.38);border-radius:40px;
  padding:.12rem .6rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
}
@media (max-width:760px){
  .urgence__cta{display:none}
  .urgence__titre{letter-spacing:.06em}
}
@media (max-width:420px){
  .urgence{gap:.5rem;font-size:.68rem}
  .urgence__titre::after{content:""}
}
/* Menu mobile ouvert : le bandeau passe derrière le voile plein écran. */
body.menu-ouvert .urgence{z-index:70}
/* Impression : ni bandeau, ni décalage. */
@media print{.urgence{display:none!important}:root{--h-urgence:0px}}

/* Tout ce qui est calé sur le haut de l'écran suit le bandeau. */
.marque-collante{inset-block-start:calc(clamp(6.5rem,9vh,8.5rem) + var(--h-urgence))}
.heros{padding-top:calc(9rem + var(--h-urgence))}
/* La pastille d'avis passait 8 px sous le logo de l'en-tête : elle est
   recalée franchement en dessous de la barre de navigation. */
.heros__badge{inset-block-start:calc(var(--h-urgence) + clamp(6.25rem,9vh,7.5rem))}
.entete-page{padding-top:calc(var(--h-urgence) / 2)}

/* ---------- Sceau « Garantie décennale » ---------- */
/* Demandé en bas à droite de la photo pleine page. Il répond en diagonale
   au badge d'avis posé en haut à gauche : les deux se lisent d'un coup d'œil
   sans empiéter sur le logo centré. */
.heros__sceau{
  position:absolute;z-index:3;
  inset-block-end:clamp(1.5rem,4vh,2.75rem);
  /* Décalé de la largeur de la colonne de boutons flottants (WhatsApp,
     retour en haut) : sans ça le sceau passe dessous en bas d'écran. */
  inset-inline-end:calc(clamp(1rem,3vw,2.5rem) + 4.5rem);
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .95rem .6rem .7rem;border-radius:var(--r);
  border:1px solid rgba(192,138,82,.36);background:rgba(11,11,12,.66);
  text-align:left;pointer-events:none;
}
@supports (backdrop-filter:blur(1px)){.heros__sceau{backdrop-filter:blur(14px) saturate(140%)}}
.heros__sceau svg{width:38px;height:38px;flex:none;color:var(--cuivre-clair)}
.heros__sceau__bloc{display:flex;flex-direction:column;line-height:1.25}
.heros__sceau__bloc b{
  font-family:var(--f-titre);font-size:.8rem;font-weight:700;
  letter-spacing:.05em;color:var(--blanc);
}
.heros__sceau__bloc span{font-size:.66rem;color:var(--texte-doux);letter-spacing:.02em}
/* Sous 900 px, le sceau croiserait les boutons flottants de droite : il se
   recentre en bas du héros. Attention, .heros est un conteneur flex : repassé
   en position:static, le sceau devient un frère du contenu et part se coller
   à sa droite, hors cadre. Il reste donc absolu, simplement recentré. */
@media (max-width:900px){
  .heros__sceau{
    inset-inline:0;inset-block-end:1.5rem;
    margin-inline:auto;width:fit-content;max-width:calc(100% - 2rem);
    background:rgba(11,11,12,.72);
  }
  .heros__sceau__bloc span{display:none}
}

/* ---------- Section « bois » : casser le tout-noir ---------- */
/* Retour client : « apporter davantage de luminosité, intégrer de légères
   nuances de bois ». Section claire, chaude, cohérente avec la poutre du
   logo — et non un simple gris, qui aurait juste délavé la charte. */
.section--bois{
  background:
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0)),
    #E3D4BF;
  color:#3A2C1C;isolation:isolate;
}
/* La texture se multiplie SUR le fond de la section. En z-index:-1 elle
   passait derrière un fond opaque : invisible quoi qu'on règle. */
.section--bois::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/img/texture-bois.webp") center/cover no-repeat;
  opacity:.09;mix-blend-mode:multiply;filter:blur(1px) saturate(.75);
}
.section--bois>*{position:relative;z-index:1}
.section--bois::after{
  content:"";position:absolute;inset-inline:0;block-size:1px;inset-block-start:0;
  background:var(--grad-cuivre);opacity:.5;
}
.section--bois h2,.section--bois h3{color:#231A0E}
.section--bois p,.section--bois li,.section--bois .chapo{color:#473623}
.section--bois strong{color:#231A0E}
.section--bois .surtitre{color:#7A5427}
.section--bois .surtitre svg{color:#7A5427}
.section--bois .btn--secondaire{color:#231A0E;border-color:rgba(58,44,28,.3)}
.section--bois .btn--secondaire:hover{background:#231A0E;color:#EFE6DA;border-color:#231A0E}
.section--bois .cadre--filet .cadre__media{
  background-image:linear-gradient(#D6C4AC,#D6C4AC),var(--grad-cuivre);
}
.section--bois .cadre::before,.section--bois .cadre::after{border-color:#9A7B55}

/* ---------- Avis : extrait renvoyant à la fiche Google ---------- */
.avis-carte__suite{
  color:var(--cuivre-clair);text-decoration:none;
  border-bottom:1px solid rgba(227,176,122,.45);white-space:nowrap;
}
.avis-carte__suite:hover{color:var(--blanc);border-bottom-color:var(--blanc)}

/* ---------- Mini-carte du secteur ---------- */
/* L'iframe OpenStreetMap a été remplacée par une carte SVG générée sur les
   contours communaux de l'IGN : plus de domaine tiers dans la CSP, et la
   distinction desservi / hors secteur demandée par le client. */
.zone-carte__media img{
  display:block;width:100%;height:auto;border-radius:var(--r);
  background:#DEE0E3;
}
.zone-carte__legende{
  position:absolute;inset-block-end:.85rem;inset-inline-start:.85rem;
  display:flex;flex-direction:column;gap:.3rem;
  padding:.65rem .9rem;border-radius:var(--r);
  background:rgba(11,11,12,.82);border:1px solid var(--ligne-forte);
  font-size:.72rem;line-height:1.35;
}
@supports (backdrop-filter:blur(1px)){.zone-carte__legende{backdrop-filter:blur(10px)}}
.zone-carte__legende b{color:var(--blanc);font-weight:600}
.zone-carte__legende span{color:var(--texte-doux)}
.zone-carte__legende b,.zone-carte__legende>span{display:flex;align-items:center;gap:.5rem}
.pastille{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.pastille--zone{background:#C08A52}
.pastille--hors{background:#DEE0E3}
.zone-carte__source{font-size:.76rem;color:var(--texte-doux);margin-top:.9rem}
@media (max-width:520px){.zone-carte__legende{position:static;margin-top:.75rem}}

/* ---------- Champ pièce jointe ---------- */
.champ--fichier{display:flex;flex-direction:column;gap:.45rem}
.champ__aide{
  font-family:var(--f-texte);font-size:.72rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--texte-doux);margin-left:.4rem;
}
.champ--fichier input[type=file]{
  width:100%;font-family:var(--f-texte);font-size:.86rem;color:var(--texte);
  padding:.8rem;border:1px dashed var(--ligne-forte);border-radius:var(--r);
  background:var(--noir-3);cursor:pointer;transition:border-color .3s ease,background .3s ease;
}
.champ--fichier input[type=file]:hover,
.champ--fichier input[type=file]:focus-visible{border-color:var(--cuivre);background:var(--noir-4)}
.champ--fichier input[type=file]::file-selector-button{
  margin-right:.9rem;padding:.45rem .9rem;border:0;border-radius:40px;cursor:pointer;
  background:var(--grad-cuivre);color:#140D06;
  font-family:var(--f-titre);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.champ__note{font-size:.76rem;color:var(--texte-doux);line-height:1.5}
.champ__note--ko{color:#E3746A}

/* ---------- Correctifs du bloc Instagram ---------- */
/* Une icône inline dans un surtitre n'a pas de dimension propre : sans
   contrainte, le SVG prend toute la largeur du conteneur flex. */
.surtitre svg{width:1.05em;height:1.05em;flex:none}

/* La colonne média de .split s'étire sur la hauteur de la rangée et recadre
   la photo en portrait. Le texte de ce bloc est court : on garde le cadrage
   4/3 d'origine plutôt que de couper le sujet, et les deux colonnes se
   centrent l'une sur l'autre au lieu de laisser un vide en haut. */
.split--cadrage{align-items:center}
.split--cadrage .split__media .cadre__media{height:auto;min-height:0;aspect-ratio:4/3}
.zone-carte + .zone-villes{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.zone-carte__source a{color:var(--texte);text-decoration:underline;text-underline-offset:.2em}
.zone-carte__source a:hover{color:var(--cuivre-clair)}