/* =========================================================
   HM PROJET MAISON — Hakima Mounji
   Feuille de style unique. Minimaliste, éditorial, sobre.
   ========================================================= */

:root{
  --noir:#1A1A18;
  --noir-doux:#2E2C29;
  --or:#B8925F;
  --or-clair:#C9A87C;
  --or-pale:#EFE3D2;
  --creme:#FAF6F1;
  --creme-fonce:#F3ECE3;
  --blanc:#FFFFFF;
  --gris:#6B6560;
  --gris-clair:#9A938B;
  --ligne:#E4DCD1;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;

  --max:1180px;
  --gut:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--blanc);
  color:var(--noir-doux);
  font-family:var(--sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--noir);
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.55rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1.15em}
strong{font-weight:500;color:var(--noir)}

/* ---------- utilitaires ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap-etroit{max-width:820px;margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(60px,8vw,110px)}
.section--creme{background:var(--creme);position:relative;overflow:hidden}
.section--creme::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(184,146,95,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(184,146,95,.08) 1px,transparent 1px);
  background-size:27px 27px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);
          mask-image:linear-gradient(to bottom,#000,transparent 62%);
}
.section--creme > *{position:relative;z-index:1}
.section--noir{background:var(--noir);color:#D8D2CA;position:relative;overflow:hidden}
.section--noir::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(201,168,124,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(201,168,124,.07) 1px,transparent 1px);
  background-size:27px 27px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 55%);
          mask-image:linear-gradient(to bottom,#000,transparent 55%);
}
.section--noir > *{position:relative;z-index:1}
.section--noir h2,.section--noir h3{color:var(--blanc)}
.centre{text-align:center}
.mb0{margin-bottom:0}

.surtitre{
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--or);
  font-weight:400;
  margin:0 0 1.1em;
  display:block;
}
.section--noir .surtitre{color:var(--or-clair)}

.chapo{
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:var(--gris);
  max-width:64ch;
}
.centre .chapo{margin-inline:auto}

.filet{
  width:54px;height:1px;background:var(--or);
  border:0;margin:0 0 1.9em;
}
.centre .filet{margin-inline:auto}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  padding:1.05em 2.3em;border:1px solid var(--noir);
  background:var(--noir);color:var(--blanc);
  cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--or);border-color:var(--or);color:var(--blanc)}
.btn--ligne{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn--ligne:hover{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.btn--clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.45)}
.btn--clair:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.btn--or{background:var(--or);border-color:var(--or)}
.btn--or:hover{background:var(--noir);border-color:var(--noir)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.centre .btns{justify-content:center}

/* ---------- lien fléché ---------- */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--noir);border-bottom:1px solid var(--or);
  padding-bottom:.35em;transition:gap .25s ease,color .25s ease;
}
.lien-fleche:hover{gap:1em;color:var(--or)}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.entete__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.logo img,.logo svg{height:46px;width:auto}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__nom{font-family:var(--serif);font-size:1.04rem;letter-spacing:.16em;color:var(--noir)}
.logo__sous{font-size:.53rem;letter-spacing:.3em;color:var(--or);text-transform:uppercase;margin-top:5px}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--noir-doux);position:relative;padding-block:6px;transition:color .2s;
  white-space:nowrap;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--or);transition:width .28s ease;
}
.nav a:hover{color:var(--or)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--or)}
.nav .btn{padding:.85em 1.6em;font-size:.72rem;color:var(--blanc)}
.nav .btn::after{display:none}
.nav .btn:hover{color:var(--blanc)}

.burger{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
  width:42px;height:42px;
}
.burger span{display:block;height:1px;background:var(--noir);margin:7px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:1060px){
  .burger{display:block}
  .nav{
    position:fixed;inset:82px 0 auto;background:var(--blanc);
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px var(--gut) 34px;border-bottom:1px solid var(--ligne);
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - 82px);overflow-y:auto;
  }
  .nav[data-ouvert="true"]{transform:translateY(0)}
  .nav a{padding:17px 0;border-bottom:1px solid var(--ligne);font-size:.85rem}
  .nav a::after{display:none}
  .nav .btn{margin-top:22px;border-bottom:0;justify-content:center;padding:1.1em}
}

/* =========================================================
   HÉROS
   ========================================================= */
.heros{
  position:relative;background:var(--creme);
  padding-block:clamp(72px,11vw,138px);
  overflow:hidden;
}
/* trame de plan d'architecte, très pâle */
.heros::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(184,146,95,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(184,146,95,.13) 1px,transparent 1px),
    linear-gradient(to right,rgba(184,146,95,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(184,146,95,.07) 1px,transparent 1px);
  background-size:216px 216px,216px 216px,27px 27px,27px 27px;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 22%,transparent 78%);
          mask-image:radial-gradient(120% 95% at 50% 0%,#000 22%,transparent 78%);
}
/* arc du logo */
.heros::after{
  content:'';position:absolute;right:-14%;top:-24%;
  width:min(660px,70vw);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--or-pale);pointer-events:none;
}
.heros .wrap{position:relative;z-index:2}

/* élévation de maison en filigrane — accueil uniquement.
   Le masque en dégradé l'efface vers la gauche : elle ne passe jamais
   derrière le texte de façon gênante. */
.heros--accueil .wrap::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:0;bottom:-7%;
  width:min(470px,44%);aspect-ratio:460/340;
  background:url(img/elevation.svg) no-repeat center/contain;
  opacity:.62;
  -webkit-mask-image:linear-gradient(to left,#000 48%,transparent 96%);
          mask-image:linear-gradient(to left,#000 48%,transparent 96%);
}
@media(max-width:1000px){
  .heros--accueil .wrap::after{width:min(380px,50%);opacity:.42;bottom:-4%}
}
@media(max-width:760px){
  .heros--accueil{padding-bottom:clamp(150px,40vw,210px)}
  .heros--accueil .wrap::after{
    width:min(330px,78%);right:auto;left:50%;transform:translateX(-50%);
    bottom:calc(-1 * clamp(120px,32vw,175px));opacity:.34;
    -webkit-mask-image:none;mask-image:none;
  }
}
.heros h1{max-width:17ch;margin-bottom:.4em}
.heros h1 em{font-style:italic;color:var(--or)}
.heros .chapo{max-width:56ch;margin-bottom:2.3em}

.heros--court{padding-block:clamp(56px,7vw,92px);text-align:center}
.heros--court h1{max-width:22ch;margin-inline:auto}
.heros--court .chapo{margin-inline:auto}

/* ---------- bandeau chiffres ---------- */
.chiffres{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ligne);
}
.chiffre{
  padding:clamp(34px,5vw,54px) clamp(16px,3vw,32px);
  text-align:center;border-right:1px solid var(--ligne);
}
.chiffre:last-child{border-right:0}
.chiffre__n{
  font-family:var(--serif);font-size:clamp(2rem,4.4vw,3rem);
  color:var(--or);line-height:1;display:block;margin-bottom:.34em;
}
.chiffre__l{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);line-height:1.7;
}
@media(max-width:700px){
  .chiffres{grid-template-columns:1fr}
  .chiffre{border-right:0;border-bottom:1px solid var(--ligne);padding-block:30px}
  .chiffre:last-child{border-bottom:0}
}

/* =========================================================
   GRILLES & CARTES
   ========================================================= */
.grille{display:grid;gap:clamp(22px,3vw,34px)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grille--3{grid-template-columns:1fr}}
@media(max-width:760px){.grille--2{grid-template-columns:1fr}}

.carte{
  background:var(--blanc);border:1px solid var(--ligne);
  padding:clamp(28px,3.4vw,42px);
  display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease;
}
.carte:hover{border-color:var(--or);transform:translateY(-3px)}
.carte__num{
  font-family:var(--serif);font-size:.95rem;color:var(--or);
  letter-spacing:.1em;margin-bottom:1.5em;display:block;
}
.carte h3{margin-bottom:.5em}
.carte p{color:var(--gris);font-size:.95rem}
.carte .lien-fleche{margin-top:auto;align-self:flex-start;padding-top:1.2em}

/* ---------- deux colonnes texte/média ---------- */
.duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,74px);align-items:center;
}
.duo--inverse .duo__media{order:-1}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:34px}
  .duo--inverse .duo__media{order:0}
}
.duo__media img{width:100%;object-fit:cover}
.cadre-or{position:relative}
.cadre-or::before{
  content:'';position:absolute;inset:-14px -14px 14px 14px;
  border:1px solid var(--or);pointer-events:none;z-index:-1;
}

/* ---------- liste à puces or ---------- */
.liste{list-style:none;margin:0 0 1.6em;padding:0}
.liste li{
  position:relative;padding-left:1.7em;margin-bottom:.85em;
  color:var(--gris);font-size:.96rem;
}
.liste li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--or);
}
.liste li strong{color:var(--noir)}
.section--noir .liste li{color:#C9C3BA}
.section--noir .liste li strong{color:var(--blanc)}

/* =========================================================
   OFFRES / TARIFS
   ========================================================= */
.offre{
  border:1px solid var(--ligne);background:var(--blanc);
  padding:clamp(30px,4vw,54px);position:relative;
  display:flex;flex-direction:column;height:100%;
}
.offre--phare{border-color:var(--or);box-shadow:0 18px 50px -34px rgba(184,146,95,.55)}
.etiquette{
  position:absolute;top:0;right:clamp(20px,4vw,40px);transform:translateY(-50%);
  background:var(--or);color:var(--blanc);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.62em 1.25em;
}
.offre__num{font-family:var(--serif);color:var(--or);font-size:.9rem;letter-spacing:.14em;display:block;margin-bottom:1.3em}
.offre h3{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:.35em}
.offre__sous{color:var(--gris);font-size:.95rem;font-style:italic;margin-bottom:1.8em}
.offre__prix{
  font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.4rem);
  color:var(--noir);line-height:1.1;margin-bottom:.15em;
}
.offre__prix small{font-family:var(--sans);font-size:.8rem;color:var(--gris);letter-spacing:.06em;display:block;margin-top:.7em;font-weight:300}
.offre__sep{height:1px;background:var(--ligne);margin:1.9em 0}
.offre .btn{margin-top:auto;width:100%}
.offre__pourqui{
  background:var(--creme);padding:1.1em 1.3em;margin-bottom:1.8em;
  font-size:.88rem;color:var(--gris);border-left:2px solid var(--or);
}
.offre__pourqui strong{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:.5em;font-weight:400}

/* ---------- tableau comparatif ---------- */
.tableau-zone{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.compare{
  width:100%;min-width:660px;border-collapse:collapse;
  font-size:.92rem;background:var(--blanc);
}
table.compare th,table.compare td{
  padding:1.05em 1.1em;border-bottom:1px solid var(--ligne);text-align:center;
}
table.compare thead th{
  font-family:var(--serif);font-weight:400;font-size:1.02rem;color:var(--noir);
  border-bottom:1px solid var(--noir);
}
table.compare thead th:first-child,
table.compare tbody td:first-child,
table.compare tbody th{text-align:left}
table.compare tbody th{
  font-weight:300;color:var(--gris);font-size:.92rem;text-align:left;
  border-bottom:1px solid var(--ligne);padding:1.05em 1.1em;
}
table.compare .oui{color:var(--or);font-size:1.05rem}
table.compare .non{color:#CFC8BF}
table.compare tfoot td,table.compare tfoot th{
  font-family:var(--serif);color:var(--noir);font-size:1rem;
  border-bottom:0;border-top:1px solid var(--noir);padding-top:1.3em;
}

/* =========================================================
   RÉALISATIONS
   ========================================================= */
.projet{
  border:1px solid var(--ligne);background:var(--blanc);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease;
}
.projet:hover{border-color:var(--or);transform:translateY(-3px)}
/* un chantier peut porter plusieurs vues : elles se partagent la largeur
   de la carte, et se remettent l'une sous l'autre sur petit écran */
.projet__images{display:grid;grid-template-columns:1fr;gap:2px;background:var(--ligne)}
.projet__images[data-n="2"]{grid-template-columns:1fr 1fr}
.projet__images[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.projet__img{
  aspect-ratio:4/3;background:var(--creme-fonce);
  display:flex;align-items:center;justify-content:center;
  color:var(--gris-clair);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;padding:20px;overflow:hidden;
}
.projet__images[data-n="2"] .projet__img{aspect-ratio:1/1}
.projet__images[data-n="3"] .projet__img{aspect-ratio:1/1}
.projet__img img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){
  .projet__images[data-n="2"],.projet__images[data-n="3"]{grid-template-columns:1fr}
  .projet__images[data-n="2"] .projet__img,
  .projet__images[data-n="3"] .projet__img{aspect-ratio:4/3}
}
.projet__corps{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.projet__meta{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:.9em;
}
.projet h3{font-size:1.18rem;margin-bottom:.5em}
.projet p{font-size:.92rem;color:var(--gris);margin-bottom:0}

.badge-chantier{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--or-pale);color:#8A6B3E;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.6em 1.2em;margin-bottom:1.8em;
}
.badge-chantier::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--or);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.fiche{list-style:none;margin:0 0 2em;padding:0;border-top:1px solid var(--ligne)}
.fiche li{
  display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:18px;
  padding:1.05em 0;border-bottom:1px solid var(--ligne);font-size:.94rem;
}
.fiche dt,.fiche .k{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);padding-top:.25em;
}
.fiche .v{color:var(--gris)}
.fiche .v strong{color:var(--noir)}
@media(max-width:620px){.fiche li{grid-template-columns:1fr;gap:5px}}

.communes{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:1.8em;
}
.commune{
  border:1px solid var(--ligne);padding:.6em 1.15em;
  font-size:.78rem;letter-spacing:.08em;color:var(--gris);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grille{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,70px);
  align-items:start;
}
@media(max-width:880px){.contact-grille{grid-template-columns:1fr}}

.coord{list-style:none;margin:0 0 2.4em;padding:0}
.coord li{
  display:flex;gap:16px;align-items:flex-start;
  padding:1.25em 0;border-bottom:1px solid var(--ligne);
}
.coord li:first-child{border-top:1px solid var(--ligne)}
.coord__k{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);min-width:96px;padding-top:.45em;
}
.coord__v{font-size:1.02rem;color:var(--noir)}
.coord__v a:hover{color:var(--or)}
.coord__v small{display:block;font-size:.82rem;color:var(--gris);margin-top:.25em;letter-spacing:0}

form{display:grid;gap:20px}
.champ{display:flex;flex-direction:column;gap:.55em}
.champ label{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--noir);
}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-size:.98rem;font-weight:300;color:var(--noir);
  border:1px solid var(--ligne);background:var(--blanc);
  padding:.95em 1.05em;border-radius:0;transition:border-color .2s;
  width:100%;
}
.champ textarea{resize:vertical;min-height:140px}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);
}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8925F' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1em center}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.duo-champs{grid-template-columns:1fr}}

.consent{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.82rem;color:var(--gris);line-height:1.6;
}
.consent input{
  width:16px;height:16px;margin-top:4px;flex-shrink:0;
  accent-color:var(--or);
}
.consent a{color:var(--or);text-decoration:underline;text-underline-offset:3px}

.form-note{font-size:.78rem;color:var(--gris-clair);margin:0}
.form-retour{
  padding:1.1em 1.3em;font-size:.9rem;display:none;
  border-left:2px solid var(--or);background:var(--creme);
}
.form-retour[data-etat="ok"]{display:block;color:var(--noir)}
.form-retour[data-etat="ko"]{display:block;border-left-color:#B4453C;color:#8C3931}

/* =========================================================
   BANDEAU CTA
   ========================================================= */
.cta-bande{
  background:var(--noir);color:var(--blanc);text-align:center;
  padding-block:clamp(56px,7.5vw,96px);
  position:relative;overflow:hidden;
}
.cta-bande::before{
  content:'';position:absolute;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,86%);aspect-ratio:460/340;
  background:url(img/elevation.svg) no-repeat center/contain;
  opacity:.09;filter:brightness(4.2);
}
.cta-bande .wrap{position:relative;z-index:1}
.cta-bande h2{color:var(--blanc);max-width:19ch;margin-inline:auto}
.cta-bande p{color:#B4AEA6;max-width:56ch;margin-inline:auto 2em;margin-bottom:2.2em}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.pied{background:var(--creme);border-top:1px solid var(--ligne);padding-block:clamp(48px,6vw,74px) 0}
.pied__grille{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);padding-bottom:clamp(38px,5vw,54px);
}
@media(max-width:800px){.pied__grille{grid-template-columns:1fr;gap:34px}}
.pied h4{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:1.5em;font-weight:400;
}
.pied p,.pied li{font-size:.9rem;color:var(--gris);margin-bottom:.6em}
.pied ul{list-style:none;margin:0;padding:0}
.pied a:hover{color:var(--or)}
.pied__logo{margin-bottom:1.5em}
.pied__bas{
  border-top:1px solid var(--ligne);padding-block:1.6em;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:.78rem;color:var(--gris-clair);
}
.pied__bas a{color:var(--gris-clair)}
.pied__bas a:hover{color:var(--or)}
.pied__legal{display:flex;flex-wrap:wrap;gap:12px 22px}

/* =========================================================
   PAGES LÉGALES
   ========================================================= */
.legal h2{font-size:clamp(1.25rem,2.2vw,1.55rem);margin-top:2.4em}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{color:var(--gris);font-size:.96rem}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.5em}
.legal strong{color:var(--noir)}
.legal a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.avertissement{
  background:#FFF8E8;border-left:3px solid #E0A93C;
  padding:1.1em 1.3em;font-size:.88rem;color:#7A5B18;margin-bottom:2em;
}

/* =========================================================
   APPARITION AU DÉFILEMENT
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .badge-chantier::before{animation:none}
}

/* accessibilité : passer au contenu */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--noir);color:#fff;
  padding:12px 20px;z-index:200;font-size:.8rem;letter-spacing:.1em;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* =========================================================
   HÉROS PLEIN ÉCRAN (accueil)
   Photo de fond + voile sombre + texte clair.
   Si la photo est absente, le dégradé et l'élévation au trait
   assurent un rendu correct : rien ne casse.
   ========================================================= */
.heros-plein{
  position:relative;
  min-height:min(92vh,880px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,18vh,200px);
  overflow:hidden;
  background:linear-gradient(145deg,#231E18 0%,#2E2821 42%,#1A1A18 100%);
  color:#fff;
  isolation:isolate;
}

/* couche photo — WebP servi aux navigateurs qui le gèrent, JPEG sinon.
   image-set() choisit tout seul ; la dernière valeur sert de repli. */
.heros-plein__fond{
  position:absolute;inset:0;z-index:-2;
  background-image:url(img/hero.jpg);
  background-image:-webkit-image-set(url(img/hero.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"));
  background-image:image-set(url(img/hero.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"));
  background-size:cover;background-position:68% 62%;
  background-repeat:no-repeat;
}
@media(max-width:820px){
  .heros-plein__fond{
    background-image:url(img/hero-mobile.jpg);
    background-image:-webkit-image-set(url(img/hero-mobile.webp) type("image/webp"),url(img/hero-mobile.jpg) type("image/jpeg"));
    background-image:image-set(url(img/hero-mobile.webp) type("image/webp"),url(img/hero-mobile.jpg) type("image/jpeg"));
  }
}
/* voile : assombrit en bas à gauche pour que le texte reste lisible */
.heros-plein::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* renfort local : une nappe douce centrée sur le bloc de texte.
       Elle porte la lisibilité là où il y en a besoin, sans noircir la photo. */
    radial-gradient(86% 60% at 28% 50%,rgba(14,11,8,.50) 0%,rgba(14,11,8,.32) 50%,rgba(14,11,8,0) 82%),
    /* voile bas : porte la bande de chiffres */
    linear-gradient(to top,rgba(22,17,12,.82) 0%,rgba(22,17,12,.34) 30%,rgba(22,17,12,0) 58%),
    /* voile gauche : porte le titre, laisse la maison respirer à droite */
    linear-gradient(to right,rgba(22,17,12,.8) 0%,rgba(22,17,12,.5) 30%,rgba(22,17,12,.12) 60%,rgba(22,17,12,0) 82%),
    /* léger assombrissement sous l'en-tête */
    linear-gradient(to bottom,rgba(22,17,12,.55) 0%,rgba(22,17,12,0) 20%);
}
/* liant colorimétrique : une nappe crème/dorée très légère, en mélange doux,
   pour que la photo appartienne à la même palette que le reste du site */
.heros-plein__teinte{display:none}
/* le mélange doux est indispensable ici : sans lui, la nappe dorée
   s'afficherait en aplat opaque. On ne l'active donc que s'il est géré. */
@supports (mix-blend-mode:soft-light){
  .heros-plein__teinte{
    display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(150deg,rgba(201,168,124,.30) 0%,rgba(184,146,95,.16) 46%,rgba(250,246,241,.10) 100%);
    mix-blend-mode:soft-light;
  }
}

/* élévation au trait, visible surtout tant qu'il n'y a pas de photo */
.heros-plein::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:2%;top:50%;transform:translateY(-52%);
  width:min(600px,48%);aspect-ratio:460/340;
  background:url(img/elevation.svg) no-repeat center/contain;
  opacity:.07;filter:brightness(4.2);
}

.heros-plein__in{position:relative;z-index:2;padding-bottom:clamp(38px,6vw,64px)}
.heros-plein__in h1,
.heros-plein__in .chapo,
.heros-plein__in .surtitre{text-shadow:0 2px 30px rgba(8,7,6,.85),0 2px 10px rgba(8,7,6,.55),0 1px 3px rgba(8,7,6,.5)}
.heros-plein .surtitre{color:#EBD3AA}
.heros-plein h1{
  color:#fff;max-width:15ch;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  line-height:1.06;margin-bottom:.42em;
  text-wrap:balance;
}
.heros-plein h1 em{font-style:italic;color:var(--or-clair)}
.heros-plein .chapo{
  color:#FFFFFF;max-width:50ch;
  margin-bottom:2.1em;font-size:clamp(1rem,1.5vw,1.13rem);
}

/* boutons arrondis, façon studio d'architecture */
.heros-plein .btn{border-radius:999px;padding:1.1em 2.4em}
.heros-plein .btn--clair{
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.55);color:#fff;
}
.heros-plein .btn--clair:hover{background:#fff;color:var(--noir);border-color:#fff}

/* bande basse : accroche + chiffres, intégrée dans l'image */
.heros-plein__bas{
  position:relative;z-index:2;
  border-top:1px solid rgba(201,168,124,.30);
  background:rgba(22,17,12,.34);backdrop-filter:blur(6px);
}
.heros-plein__bas .wrap{
  display:grid;grid-template-columns:1.25fr 1.6fr;
  gap:clamp(20px,4vw,52px);align-items:center;
  padding-block:clamp(22px,3vw,34px);
}
.heros-plein__accroche{
  color:rgba(255,255,255,.76);font-size:.94rem;line-height:1.65;margin:0;
}
.heros-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,30px)}
.heros-chiffres div{text-align:center}
.heros-chiffres b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;color:#fff;margin-bottom:.34em;
}
.heros-chiffres span{
  display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.5;
}
@media(max-width:860px){
  .heros-plein__bas .wrap{grid-template-columns:1fr;gap:22px}
  .heros-plein__accroche{text-align:center}
}
@media(max-width:560px){
  .heros-plein{min-height:auto;padding-top:clamp(108px,26vh,150px)}
  .heros-plein::after{width:78%;opacity:.13;right:-8%}
  .heros-chiffres{gap:8px}
  .heros-chiffres b{font-size:1.45rem}
  .heros-chiffres span{font-size:.58rem;letter-spacing:.12em}
}

/* ---------- en-tête transparent au-dessus du héros plein ---------- */
.page-index .entete{
  position:fixed;left:0;right:0;top:0;
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.page-index .entete .logo__nom{color:#fff;text-shadow:0 1px 12px rgba(8,7,6,.6)}
.page-index .entete .logo__sous{text-shadow:0 1px 10px rgba(8,7,6,.6)}
.page-index .entete .nav > a{text-shadow:0 1px 12px rgba(8,7,6,.55)}
.page-index .entete .nav > a{color:rgba(255,255,255,.88)}
.page-index .entete .nav > a:hover{color:var(--or-clair)}
.page-index .entete .burger span{background:#fff}
.page-index .entete .nav .btn{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);
  color:#fff;border-radius:999px;backdrop-filter:blur(8px);
}
.page-index .entete .nav .btn:hover{background:#fff;color:var(--noir);border-color:#fff}

/* état collé : l'en-tête redevient opaque dès qu'on défile */
.page-index .entete.entete--colle{
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom-color:var(--ligne);
}
.page-index .entete--colle .logo__nom,
.page-index .entete--colle .logo__sous,
.page-index .entete--colle .nav > a{text-shadow:none}
.page-index .entete--colle .logo__nom{color:var(--noir)}
.page-index .entete--colle .nav > a{color:var(--noir-doux)}
.page-index .entete--colle .burger span{background:var(--noir)}
.page-index .entete--colle .nav .btn{background:var(--noir);border-color:var(--noir);color:#fff}
.page-index .entete--colle .nav .btn:hover{background:var(--or);border-color:var(--or)}

/* menu mobile ouvert : fond blanc, donc texte foncé */
@media(max-width:1060px){
  .page-index .nav[data-ouvert="true"] > a{color:var(--noir-doux)}
  .page-index .nav[data-ouvert="true"] .btn{background:var(--noir);border-color:var(--noir);color:#fff}
}

/* sur petit écran le texte occupe toute la largeur : voile plus uniforme */
@media(max-width:820px){
  .heros-plein::before{
    background:
      radial-gradient(95% 52% at 50% 46%,rgba(14,11,8,.46) 0%,rgba(14,11,8,.26) 55%,rgba(14,11,8,0) 88%),
      linear-gradient(to top,rgba(22,17,12,.88) 0%,rgba(22,17,12,.52) 45%,rgba(22,17,12,.3) 100%),
      linear-gradient(to bottom,rgba(22,17,12,.62) 0%,rgba(22,17,12,0) 24%);
  }
}

/* =========================================================
   INTERACTIONS AU DÉFILEMENT
   ========================================================= */

/* --- apparition bidirectionnelle : l'élément vient du sens d'où l'on arrive --- */
.reveal{
  opacity:0;
  transform:translateY(var(--rev-y,22px));
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rev-d,0ms);
  will-change:opacity,transform;
}
.reveal.vu{opacity:1;transform:none}
/* on remonte : l'élément redescend légèrement au lieu de remonter */
body[data-sens="haut"] .reveal:not(.vu){--rev-y:-22px}

/* --- parallaxe de la photo du bandeau d'accueil --- */
.heros-plein__fond{
  inset:-7% 0;
  transform:translate3d(0,var(--par,0px),0) scale(var(--par-z,1));
  will-change:transform;
}
/* le contenu du bandeau s'estompe doucement quand on quitte l'accueil */
.heros-plein__in{
  opacity:var(--heros-op,1);
  transform:translate3d(0,var(--heros-y,0px),0);
  will-change:opacity,transform;
}

/* --- barre de progression de lecture --- */
.progression{
  position:fixed;top:0;left:0;height:2px;z-index:90;
  width:100%;transform:scaleX(var(--prog,0));transform-origin:0 50%;
  background:linear-gradient(to right,var(--or),var(--or-clair));
  pointer-events:none;transition:opacity .3s ease;
}

/* --- compteurs : évite que le texte saute pendant l'incrémentation --- */
.chiffre__n,.heros-chiffres b{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .heros-plein__fond,.heros-plein__in{transform:none;opacity:1}
  .progression{display:none}
}

/* --- photos de projets --- */
.projet__img picture,.projet__img img{width:100%;height:100%;object-fit:cover;display:block}

/* --- témoignage client --- */
.avis{max-width:62ch;margin:0 auto}
.avis__etoiles{color:var(--or);font-size:1.1rem;letter-spacing:.22em;margin-bottom:1em}
.avis blockquote{
  margin:0 0 1.2em;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.08rem,2vw,1.35rem);line-height:1.62;color:var(--noir);
}
.avis__auteur{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:1.6em}

/* --- monogramme HM : le logo d'origine, détouré --- */
.logo__mono{display:block;flex-shrink:0;line-height:0;position:relative}
.logo__mono img{height:46px;width:auto}
.pied .logo__mono img{height:54px}
.logo__mono--sombre{display:block}
.logo__mono--clair{display:none}
/* sur le bandeau d'accueil, tant que l'en-tête est transparent, on bascule
   sur la version claire du logo */
.page-index .entete:not(.entete--colle) .logo__mono--sombre{display:none}
.page-index .entete:not(.entete--colle) .logo__mono--clair{display:block}

/* =========================================================
   FILIGRANE DU MONOGRAMME — bandeaux des pages intérieures
   (l'accueil garde son bandeau photo, il n'est pas concerné)
   ========================================================= */
.heros--court{position:relative}
/* le monogramme contient déjà un cercle : l'arc décoratif ferait doublon */
.heros--court::after{display:none}

.heros--court .wrap::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;
  transform:translate(-50%,-52%);
  width:min(500px,74%);aspect-ratio:160/146;
  background:url(img/mono-hm-or.png) no-repeat center/contain;
  opacity:.30;
  /* estompé au centre : le filigrane encadre le texte au lieu de le traverser */
  -webkit-mask-image:radial-gradient(58% 46% at 50% 50%,transparent 32%,#000 78%);
          mask-image:radial-gradient(58% 46% at 50% 50%,transparent 32%,#000 78%);
}
@media(max-width:700px){
  .heros--court .wrap::after{width:min(360px,86%);opacity:.24}
}
@media(prefers-reduced-motion:no-preference){
  .heros--court .wrap::after{transition:opacity .6s ease}
}

/* le filigrane assombrit le fond : on fonce le texte du bandeau pour
   rester au-dessus du seuil de contraste (4,5:1) */
.heros--court .chapo{color:#565046}

/* --- cadre d'exercice d'un projet (mené chez un promoteur) --- */
.projet__cadre{
  display:block;margin-top:1.1em;padding-top:.9em;
  border-top:1px solid var(--ligne);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair);
}

/* =========================================================
   PHOTO EN GRAND (agrandissement au clic)
   Les photos sources font 880 à 1200 px de large : on plafonne
   l'agrandissement à 1100 px pour qu'elles restent nettes.
   ========================================================= */
.projet__img--zoom{cursor:zoom-in}
.projet__img--zoom:focus-visible{outline:2px solid var(--or);outline-offset:-2px}

.visio{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:#121010;   /* opaque : l'attention va à la photo */
}
.visio--ouvert{display:flex}
.visio__corps{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:1100px}
.visio__corps img{
  max-width:100%;max-height:74vh;width:auto;height:auto;
  object-fit:contain;background:var(--blanc);display:block;
}
.visio__corps figcaption{text-align:center;color:#E6E1DA;max-width:62ch}
.visio__meta{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:.6em;
}
.visio__titre{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:400}
.visio__cadre{
  display:block;margin-top:.8em;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-clair);
}
.visio__cadre[hidden]{display:none}
.visio button{
  position:absolute;background:none;border:0;color:#E6E1DA;cursor:pointer;
  line-height:1;padding:12px;transition:color .2s ease;
}
.visio button:hover,.visio button:focus-visible{color:var(--or)}
.visio__fermer{top:clamp(8px,2vw,22px);right:clamp(8px,2vw,22px);font-size:2.4rem}
.visio__nav{top:50%;transform:translateY(-50%);font-size:3rem}
.visio__nav--prec{left:clamp(4px,1.5vw,20px)}
.visio__nav--suiv{right:clamp(4px,1.5vw,20px)}
@media(max-width:560px){
  .visio__corps img{max-height:60vh}
  .visio__nav{font-size:2.2rem}
}