/* ============================================================
   BORD DE MEUSE , design system partagé (3 funnels)
   DA : Branche A , extraction marque. Éditorial Architectural Premium.
   Inter ultra-light monumental · taupe/espresso · zéro gras brutaliste · zéro ombre dure.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Inter';font-weight:200;font-style:normal;font-display:swap;src:url('../fonts/inter-200.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/inter-300.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}

/* Palette alignée sur le thème officiel borddemeuse.com
   (dist/css/main.css :root) — --color-primary:#4f200f · --color-blue:#bfd2df
   --color-body:#bcb9b7 · --color-grey-dark:#b5aca6 · --color-grey:#ededeb
   Le site officiel écrit tout son texte en brun : body{color:var(--color-primary)} */
:root{
  --espresso:#4F200F;      /* = --color-primary officiel */
  --espresso-dk:#3A1709;
  --espresso-deep:#27130A;
  --ink:#4F200F;           /* texte = brun, comme le site officiel */
  --ink-2:#86685C;         /* brun désaturé : texte secondaire lisible */
  --ink-3:#B5ACA6;         /* = --color-grey-dark officiel */
  --paper:#EDEDEB;         /* = --color-grey officiel */
  --paper-2:#EDEDEB;       /* = --color-grey officiel : les sections claires sont toutes en #EDEDEB */
  --taupe:#BCB9B7;         /* = --color-body officiel (canvas du site) */
  --taupe-2:#B5ACA6;       /* = --color-grey-dark officiel */
  --powder:#BFD2DF;        /* = --color-blue officiel */
  --powder-dk:#7FA3B8;
  --line:rgba(181,172,166,.85);   /* = --color-grey-dark officiel */
  --line-2:rgba(181,172,166,.45);
  --white:#FFFFFF;        /* réservé aux CONTRÔLES d'interface (champs de saisie,
                             onglet actif, infobulles). Les surfaces de page, elles,
                             sont en --paper #EDEDEB : voir .card / .quiz / .review. */
  --maxw:1200px;
  --r:2px;
  --shadow-soft:0 24px 60px -28px rgba(42,28,18,.34);
  --shadow-card:0 18px 44px -26px rgba(42,28,18,.30);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:56px;}
body{
  margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:300;color:var(--ink);background:var(--paper);
  line-height:1.6;font-size:17px;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--espresso);color:var(--paper);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
@media(max-width:640px){.wrap{padding:0 20px;}}
.section{padding:96px 0;position:relative;}
.section--tight{padding:64px 0;}
@media(max-width:768px){.section{padding:64px 0;}.section--tight{padding:48px 0;}}
.center{text-align:center;}

/* ---------- Typo signature ---------- */
.eyebrow{
  font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--espresso);opacity:.6;display:inline-block;}
.eyebrow--center::after{content:"";width:26px;height:1px;background:var(--espresso);opacity:.6;display:inline-block;}
.eyebrow--light{color:rgba(245,242,236,.72);}
.eyebrow--light::before,.eyebrow--light--center::after{background:var(--paper);opacity:.5;}

.h-display{font-weight:200;text-transform:uppercase;line-height:.98;letter-spacing:-.022em;font-size:clamp(2.6rem,7.4vw,6rem);}
.h-hero{font-weight:300;text-transform:uppercase;line-height:1;letter-spacing:-.02em;font-size:clamp(2.3rem,5.7vw,4.5rem);}
.h-section{font-weight:200;text-transform:uppercase;color:var(--espresso);line-height:1.07;letter-spacing:-.018em;font-size:clamp(1.7rem,3.9vw,2.9rem);}
.h-sub{font-weight:300;line-height:1.1;letter-spacing:-.01em;font-size:clamp(1.3rem,2.4vw,1.9rem);}
.thin{font-weight:400;}
.med{font-weight:400;}
.strong{font-weight:500;color:var(--espresso);}
.lead{font-weight:300;font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-2);line-height:1.62;}
.kicker{font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--espresso);}
.nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- Boutons (pill, registre sobre premium) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;border:1px solid transparent;
  transition:padding .35s var(--ease),background .25s,color .25s,border-color .25s,transform .2s;
  cursor:pointer;line-height:1;white-space:nowrap;
}
.btn .arr{transition:transform .35s var(--ease);display:inline-block;}
.btn:hover .arr{transform:translateX(4px);}
/* Bouton d'étape en attente de réponse. Aucun style :disabled n'existait : le bouton
   était identique à un bouton actif, on cliquait donc dans le vide. Depuis le passage
   à une question par étape, cet état se rencontre sur 3 étapes au lieu de 2. */
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{padding:16px 30px;background:var(--espresso);}
.btn--solid{background:var(--espresso);color:var(--paper);}
.btn--solid:hover{background:var(--espresso-dk);padding-right:38px;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--espresso);padding-right:38px;}
.btn--light{background:var(--paper);color:var(--espresso);}
.btn--light:hover{background:var(--white);padding-right:38px;}
.btn--outline-light{background:transparent;color:var(--paper);border-color:rgba(245,242,236,.4);}
.btn--outline-light:hover{border-color:var(--paper);padding-right:38px;}
.btn--wa{background:#1f7a52;color:#fff;}
.btn--wa:hover{background:#1a6a47;padding-right:38px;}
.btn--lg{padding:19px 36px;font-size:15.5px;}
.btn--block{width:100%;}

/* ---------- Header + switcher ---------- */
/* brun officiel #4F200F (= --color-primary du site) et pas --espresso-deep :
   ce dernier reste réservé aux fonds de remplacement derrière les médias. */
.topbar{position:sticky;top:0;z-index:300;background:var(--espresso);color:rgba(245,242,236,.86);font-size:12.5px;letter-spacing:.04em;}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:26px;padding:9px 28px;flex-wrap:wrap;}
.topbar b{font-weight:500;color:var(--paper);}
.topbar .dot{width:4px;height:4px;border-radius:50%;background:var(--taupe);display:inline-block;}
@media(max-width:680px){.topbar .tb-hide{display:none;}}

.nav{position:relative;z-index:200;background:rgba(245,242,236,.86);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .3s;}
.nav.scrolled{box-shadow:none;}
.nav .wrap{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px;}
.nav .wrap > a{flex:none;line-height:0;}
.nav__logo{height:34px;width:auto;flex:none;}
.nav__spacer{flex:1;}
.nav__links{display:flex;align-items:center;gap:26px;}
.nav__links a{font-size:13.5px;font-weight:400;color:var(--ink-2);transition:color .2s;}
.nav__links a:hover{color:var(--espresso);}
@media(max-width:1080px){.nav__links{display:none;}}

.switcher{display:inline-flex;background:rgba(42,28,18,.06);border:1px solid var(--line-2);border-radius:2px;padding:4px;gap:2px;}
.switcher a{
  font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink-2);
  padding:9px 17px;border-radius:2px;transition:all .25s var(--ease);white-space:nowrap;
}
.switcher a:hover{color:var(--espresso);}
.switcher a.is-active{background:var(--white);color:var(--espresso);font-weight:600;box-shadow:0 2px 9px -3px rgba(42,28,18,.28);}
@media(max-width:1080px){.nav .switcher{display:none;}}
/* switcher mobile (sous la nav) */
.switcher-mobile{display:none;}
@media(max-width:1080px){
  .switcher-mobile{display:block;position:relative;z-index:190;background:var(--paper);border-bottom:1px solid var(--line-2);}
  .switcher-mobile .wrap{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;}
  .switcher-mobile a{flex:1;text-align:center;font-size:12.5px;font-weight:500;color:var(--ink-2);padding:9px 8px;border-radius:2px;border:1px solid var(--line-2);white-space:nowrap;}
  .switcher-mobile a.is-active{background:var(--white);color:var(--espresso);border-color:var(--espresso);font-weight:600;}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--espresso-deep);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(102deg,rgba(20,12,6,.36) 0%,rgba(20,12,6,.15) 44%,rgba(20,12,6,0) 68%),
    linear-gradient(to top,rgba(20,12,6,.5) 0%,rgba(28,16,8,.24) 40%,rgba(20,12,6,.06) 68%,rgba(20,12,6,.1) 100%);}
.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:74px;padding-top:120px;color:var(--paper);}
.hero__watermark{position:absolute;z-index:2;right:2%;bottom:-2%;font-weight:200;font-size:clamp(8rem,26vw,26rem);line-height:.8;color:rgba(245,242,236,.05);letter-spacing:-.04em;pointer-events:none;user-select:none;}
.hero h1{color:var(--paper);max-width:26ch;margin:.3em 0 .5em;text-shadow:0 1px 34px rgba(18,10,4,.42),0 1px 3px rgba(18,10,4,.3);}
.hero__price{margin:.55em 0 0;font-weight:400;font-size:clamp(1.05rem,1.7vw,1.4rem);color:#fff;max-width:40ch;text-shadow:0 1px 18px rgba(18,10,4,.6),0 1px 2px rgba(18,10,4,.5);}
.hero__price strong{font-weight:500;color:var(--paper);}
.hero__lead{color:rgba(245,242,236,.82);max-width:46ch;font-weight:300;font-size:clamp(1.02rem,1.45vw,1.18rem);margin-top:.7em;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero__micro{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;list-style:none;}
.hero__micro li{font-size:13px;color:rgba(245,242,236,.92);letter-spacing:.01em;display:inline-flex;align-items:center;gap:7px;text-shadow:0 1px 10px rgba(18,10,4,.55);}
.hero__slots{margin:13px 0 0;font-size:12.5px;font-weight:300;letter-spacing:.02em;color:rgba(245,242,236,.72);text-shadow:0 1px 8px rgba(18,10,4,.55);}
.hero__slots strong{font-weight:500;color:var(--paper);}
.hero__micro li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--powder);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;}
.hero__strip{margin-top:54px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,242,236,.16);border:1px solid rgba(245,242,236,.16);border-radius:2px;overflow:hidden;}
.hero__strip .cell{background:rgba(28,16,8,.34);backdrop-filter:blur(4px);padding:20px 22px;}
.hero__strip .n{font-weight:200;font-size:clamp(1.7rem,2.6vw,2.5rem);color:var(--paper);line-height:1;}
.hero__strip .l{font-size:12px;letter-spacing:.04em;color:rgba(245,242,236,.66);margin-top:7px;}
@media(max-width:760px){.hero__strip{grid-template-columns:repeat(2,1fr);} .hero{min-height:88vh;}}
/* ---------- Hero mobile : optimisé CRO (contenu remonté, CTA pleine largeur, preuve plus tôt) ---------- */
@media(max-width:600px){
  .hero{min-height:84vh;}
  .hero__inner{padding-top:80px;padding-bottom:40px;}
  .hero .eyebrow--light{font-size:10px;letter-spacing:.09em;white-space:normal;line-height:1.5;}
  /* titre plus compact sur mobile : chaque segment du <br/> tient sur une ligne (2 lignes au lieu de 4) */
  .hero h1{font-size:1.8rem;line-height:1.12;letter-spacing:-.01em;margin:.26em 0 .42em;}
  .hero__price{font-size:1.02rem;line-height:1.42;margin-top:.5em;}
  .hero__cta{flex-direction:column;align-items:stretch;gap:11px;margin-top:24px;}
  .hero__cta .btn{width:100%;justify-content:center;}
  .hero__cta .btn--lg{padding:17px 24px;}
  .hero__micro{gap:7px 16px;margin-top:18px;}
  .hero__slots{margin-top:11px;}
  .hero__strip{margin-top:28px;}
  .hero__strip .cell{padding:15px 16px;}
  .hero__strip .l{font-size:11.5px;}
  /* titres de section : lisibles sur mobile (interligne aéré, pas tassé) */
  .h-section{font-size:1.55rem;line-height:1.26;}
  /* eyebrow : moins d'espacement + interligne aéré quand elle passe sur 2 lignes */
  .eyebrow{font-size:11px;letter-spacing:.14em;line-height:1.7;}
  /* plus d'air entre l'eyebrow et le titre de section */
  .shead .eyebrow{margin-bottom:.15em;}
  .shead .h-section{margin-top:.6em;}
}

/* ---------- Hero variante « vidéo intégrée » (page bureaux) — headline au-dessus, VSL dans la hero ---------- */
/* fond greige (le « grège canvas » du site borddemeuse.com, #BCB9B7) à la place de la photo */
.hero--video{align-items:center;min-height:auto;color:var(--ink);
  background:linear-gradient(180deg,rgba(237,237,235,.88) 0%,rgba(237,237,235,.52) 38%,rgba(237,237,235,.72) 66%,#EDEDEB 88%,#EDEDEB 100%),url('../photos/hero/hero-bg-bureaux.webp') 20% 46%/150% no-repeat;
}
.hero--video .hero__media,.hero--video .hero__scrim{display:none;}
.hero--video .hero__watermark{color:rgba(42,28,18,.055);}
.hero--video .hero__inner{color:var(--ink);padding-top:30px;padding-bottom:76px;}
.hero--video .hero__center{max-width:880px;margin:0 auto;text-align:center;}
.hero--video .eyebrow{color:var(--ink-2);justify-content:center;}
/* texte foncé, ombres portées retirées (plus de fond photo à percer) */
/* poids 300 + line-height 1 = valeurs relevées sur borddemeuse.com (h1 : Inter 300, lh 1.000) */
.hero--video h1{color:var(--espresso);text-shadow:none;text-transform:uppercase;font-weight:300;letter-spacing:-.015em;line-height:1;font-size:clamp(1.75rem,4.4vw,3.3rem);max-width:26ch;margin-left:auto;margin-right:auto;}
.hero--video .hero__price{color:var(--ink);text-shadow:none;margin-left:auto;margin-right:auto;}
.hero--video .hero__price strong{color:var(--espresso);font-weight:400;}
.maplink{display:inline-block;margin-left:16px;font-size:13.5px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid rgba(79,32,15,.25);padding-bottom:1px;transition:color .2s,border-color .2s;}
.maplink:hover{color:var(--espresso);border-color:var(--espresso);}
@media(max-width:600px){.maplink{display:block;margin:14px 0 0;}}
.hero--video .hero__micro li{color:var(--ink);text-shadow:none;}
.hero--video .hero__micro li::before{background:var(--espresso);}
.hero--video .hero__slots{color:var(--ink);text-shadow:none;text-align:center;}
.hero--video .hero__slots strong{color:var(--espresso);}
/* la vidéo, intégrée dans la hero */
.hero--video .hero__video{max-width:820px;margin:34px auto 6px;box-shadow:0 34px 80px -30px rgba(42,28,18,.5),0 0 0 1px rgba(42,28,18,.10);}
/* carrousel de photos (page Salles de réunion) : même cadre que la vidéo */
.heroslides{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--taupe);border-radius:2px;}
.heroslides .heroslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease);}
.heroslides .heroslide.is-active{opacity:1;}
.heroslides__cap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;z-index:2;background:linear-gradient(to top,rgba(18,11,5,.5),rgba(18,11,5,0));pointer-events:none;}
.heroslides__name{color:var(--paper);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.45);}
.heroslides__dots{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:7px;}
.heroslides__dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(245,242,236,.55);cursor:pointer;transition:background .3s,transform .3s;}
.heroslides__dots button.is-active{background:var(--paper);transform:scale(1.3);}
.hero--video .hero__cta{justify-content:center;margin-top:26px;}
.hero--video .hero__micro{justify-content:center;}
/* strip stats en cartes claires */
.hero--video .hero__strip{margin-top:40px;max-width:820px;margin-left:auto;margin-right:auto;text-align:left;background:var(--line);border-color:var(--line);}
.hero--video .hero__strip .cell{background:rgba(237,237,235,.72);backdrop-filter:blur(6px);}
.hero--video .hero__strip .n{color:var(--espresso);}
.hero--video .hero__strip .l{color:var(--ink-2);}
@media(max-width:600px){
  .hero--video{background:linear-gradient(180deg,rgba(237,237,235,.90) 0%,rgba(237,237,235,.55) 34%,rgba(237,237,235,.74) 62%,#EDEDEB 86%,#EDEDEB 100%),url('../photos/hero/hero-bg-bureaux.webp') center 44%/cover no-repeat;}
  .hero--video .hero__inner{padding-top:26px;padding-bottom:40px;}
  .hero--video .eyebrow{font-size:10px;letter-spacing:.06em;gap:7px;white-space:nowrap;}
  .hero--video .eyebrow::before,.hero--video .eyebrow::after{width:16px;}
  .hero--video h1{font-size:1.5rem;line-height:1;letter-spacing:-.01em;}
  .hero--video .hero__video{margin:24px auto 4px;}
  .hero--video .hero__strip{margin-top:26px;}

/* ---------- Mobile , ordre imposé dans le hero ----------
   titre → vidéo (ou carrousel) → sous-titre → CTA.
   Réordonné en flex-order : le HTML garde son ordre sémantique (titre, sous-titre,
   média) et le desktop n'est pas touché. Le carrousel de /reunions porte la même
   classe .hero__video, il suit donc la même règle.
   -------------------------------------------------------- */
@media(max-width:900px){
  .hero--video .hero__center{display:flex;flex-direction:column;}
  .hero--video .hero__center > .eyebrow{order:1;}
  .hero--video .hero__center > h1{order:2;}
  /* width:100% obligatoire : en flex-column, un margin auto horizontal réduirait
     l'élément à la largeur de son contenu , or le carrousel n'a que des images
     en position absolue, il s'effondrerait à 0. */
  .hero--video .hero__center > .hero__video{order:3;width:100%;margin:20px auto 0;}
  .hero--video .hero__center > .hero__price{order:4;margin:20px 0 0;}
  .hero--video .hero__center > .hero__cta{order:5;margin-top:22px;}
  .hero--video .hero__center > .hero__micro{order:6;}
  .hero--video .hero__center > .hero__slots{order:7;}
  .hero--video .hero__center > .hero__strip{order:8;}
}

}

/* ---------- Bande presse ("ils en ont parlé") ---------- */
.presswall{background:var(--paper);border-bottom:1px solid var(--line);}
.presswall .wrap{padding:30px 28px 32px;text-align:center;}
.presswall .lab{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#8A8682;font-weight:600;margin:0 0 20px;}
.presswall .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 52px;}
.presswall .row img{height:26px;width:auto;object-fit:contain;opacity:.72;transition:opacity .28s var(--ease),transform .28s var(--ease);}
.presswall .row img:hover{opacity:1;transform:translateY(-1px);}
/* équilibrage optique par logo (poids visuel différent) */
.presswall .row img[alt="Le Soir"]{height:24px;}
.presswall .row img[alt="RTBF"]{height:21px;}
.presswall .row img[alt="QU4TRE"]{height:20px;}
.presswall .row img[alt="Sudinfo"]{height:18px;}
@media(max-width:600px){
  .presswall .wrap{padding:24px 16px 26px;}
  .presswall .lab{margin-bottom:16px;font-size:10px;letter-spacing:.2em;}
  /* 2×2 sur mobile : plus lisible que 4 logos serrés sur une ligne */
  .presswall .row{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;gap:20px 26px;max-width:300px;margin:0 auto;}
  .presswall .row img{height:19px;}
  .presswall .row img[alt="Le Soir"]{height:19px;}
  .presswall .row img[alt="RTBF"]{height:15px;}
  .presswall .row img[alt="QU4TRE"]{height:15px;}
  .presswall .row img[alt="Sudinfo"]{height:14px;}
}

/* ---------- Lieu stratégique (carte bannière) ---------- */
.lochead{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:end;margin-bottom:34px;}
.lochead .lead{margin:.5em 0 0;}
.lochead__side{padding-bottom:2px;}
.locfacts{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}
.locfacts li{border-top:1px solid var(--line);padding-top:12px;}
.locfacts .t{display:block;font-weight:300;font-size:1.7rem;line-height:1;letter-spacing:-.015em;color:var(--espresso);}
.locfacts .s{display:block;margin-top:5px;font-size:13px;color:#8A8682;}
.locaddr{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);margin:0 0 18px;}
.locaddr svg{flex:none;color:var(--espresso);}
.locmap{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card);}
.locmap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(42,28,18,.08);border-radius:var(--r);}
/* Carte interactive, toujours en niveaux de gris (ne change pas de couleur au clic) */
.locmap iframe{display:block;width:100%;height:430px;border:0;filter:grayscale(1) contrast(1.06) brightness(1.03);}
@media(max-width:860px){
  .lochead{grid-template-columns:1fr;gap:22px;margin-bottom:26px;}
  .locmap iframe{height:330px;}
  .locfacts{gap:14px 22px;}
  .locfacts .t{font-size:1.5rem;}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--paper);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 28px;}
.trust .item{display:flex;align-items:flex-start;gap:13px;padding:4px 26px;}
.trust .item svg{margin-top:1px;}
.trust .item + .item{border-left:1px solid var(--line);}
.trust .item svg{flex:none;color:var(--espresso);}
.trust .item .tx{display:flex;flex-direction:column;line-height:1.25;}
.trust .item b{font-weight:500;font-size:14px;color:var(--ink);}
.trust .item .sub{font-size:12.5px;color:var(--ink-2);margin-top:3px;}
@media(max-width:860px){
  .trust .wrap{grid-template-columns:1fr 1fr;gap:24px 0;}
  .trust .item{padding:4px 22px;}
  .trust .item + .item{border-left:0;}
  .trust .item:nth-child(even){border-left:1px solid var(--line);}
}
@media(max-width:520px){
  .trust .wrap{grid-template-columns:1fr 1fr;gap:22px 12px;padding:24px 18px;}
  .trust .item{padding:0 8px;gap:10px;}
  .trust .item + .item{border-left:0;}
  .trust .item:nth-child(even){border-left:1px solid var(--line);}
}

/* ---------- Sections génériques ---------- */
.section--paper{background:var(--paper);}
.section--paper2{background:var(--paper-2);}
.section--taupe{background:var(--taupe);}
/* Textes secondaires sur le gris #BCB9B7 : --ink-2 (#86685C) n'y tient qu'à 2,59:1,
   très en dessous du seuil AA de 4,5:1. On repasse au brun officiel #4F200F (6,96:1).
   La hiérarchie reste portée par la graisse et la taille, pas par la couleur. */
.section--taupe .lead,
.section--taupe .shead p,
.section--taupe .flist .ld,
.section--taupe .step p,
.section--taupe .eyebrow:not(.eyebrow--light),
.section--taupe .locfacts .s,
.section--taupe .locaddr,
.section--taupe .maplink,
.section--taupe .review .mt,
.section--taupe .quiz__qn{color:var(--espresso);}
/* ce paragraphe porte sa couleur en style inline, d'où le !important */
.section--taupe p.center[style*="--ink-2"]{color:var(--espresso)!important;}
.section--taupe .maplink{border-bottom-color:rgba(79,32,15,.4);}

.shead{max-width:740px;}
.shead.center{margin:0 auto;}
.shead .h-section{margin:.34em 0 0;}
.shead p{margin:.7em 0 0;}

/* lettrage filigrane derrière une section */
.ghost{position:absolute;font-weight:200;color:rgba(79,32,15,.045);line-height:.8;letter-spacing:-.04em;pointer-events:none;user-select:none;z-index:0;}

/* ---------- Cards ---------- */
.grid{display:grid;gap:24px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}

.card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;}
.card .btn{margin-top:auto;align-self:flex-start;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line);}
.card .ic{width:25px;height:25px;color:var(--espresso);margin-bottom:18px;stroke-width:1;opacity:.9;}
.card--photo{padding-top:0;overflow:hidden;}
.card__media{margin:0 -30px 22px;aspect-ratio:16/10;background:var(--taupe);overflow:hidden;}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.card--photo:hover .card__media img{transform:scale(1.04);}
.card h3{font-weight:400;font-size:1.18rem;margin:0 0 8px;letter-spacing:-.01em;}
.card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;}
.card .price{font-weight:200;font-size:1.9rem;color:var(--espresso);letter-spacing:-.02em;}
.card .price small{font-size:.5em;font-weight:400;color:var(--ink-2);letter-spacing:0;}

/* media card (photo + overlay label) */
.mediacard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--espresso-deep);}
.mediacard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.mediacard:hover img{transform:scale(1.06);}
.mediacard .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,6,.86),rgba(20,12,6,.05) 62%);}
.mediacard .meta{position:absolute;left:0;right:0;bottom:0;padding:24px;color:var(--paper);z-index:2;}
.mediacard .meta .t{font-weight:400;font-size:1.22rem;letter-spacing:-.01em;}
.mediacard .meta .s{font-size:13px;color:rgba(245,242,236,.74);margin-top:5px;}
.mediacard .tag{position:absolute;top:16px;left:16px;z-index:2;background:rgba(245,242,236,.92);color:var(--espresso);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:2px;}

/* ---------- Mosaïque immersive (galerie « en images », sans labels) ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px;}
.mosaic .m{position:relative;overflow:hidden;border-radius:var(--r);background:var(--espresso-deep);}
.mosaic .m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);}
.mosaic .m:hover img{transform:scale(1.05);}
.mosaic .m1{grid-column:span 2;grid-row:span 2;}
.mosaic .m2{grid-column:span 2;grid-row:span 1;}
.mosaic .m3{grid-column:span 1;grid-row:span 1;}
.mosaic .m4{grid-column:span 1;grid-row:span 1;}
@media(max-width:760px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px;}
  .mosaic .m1{grid-column:span 2;grid-row:span 2;}
  .mosaic .m2{grid-column:span 2;grid-row:span 1;}
  .mosaic .m3,.mosaic .m4{grid-column:span 1;grid-row:span 1;}
}

/* carrousel des salles (page Réunion) : une ligne qui défile */
.carousel{position:relative;margin-top:44px;}
.roomrow{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;-webkit-overflow-scrolling:touch;}
.roomrow::-webkit-scrollbar{height:6px;}
.roomrow::-webkit-scrollbar-track{background:transparent;}
.roomrow::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}
.roomrow .mediacard{flex:0 0 clamp(280px,32%,384px);scroll-snap-align:start;aspect-ratio:4/3;}
.carousel__nav{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:2px;border:1px solid var(--line);background:rgba(245,242,236,.94);color:var(--espresso);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),background .2s;}
.carousel__nav:hover{transform:translateY(-50%) scale(1.07);background:var(--paper);}
.carousel__nav--prev{left:-14px;}
.carousel__nav--next{right:-14px;}
@media(max-width:900px){.carousel__nav--prev{left:-6px;}.carousel__nav--next{right:-6px;}}
@media(max-width:600px){.carousel__nav{display:none;}.roomrow .mediacard{flex-basis:80%;}}

/* split éditorial (image qui déborde) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.split--rev .split__media{order:2;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px;}.split--rev .split__media{order:0;}
  /* #lieu (page Bureaux) : sur mobile, texte d'abord puis image — évite d'enchaîner la vidéo et une image collées */
  #lieu .split__media{order:2;}}
.split__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-soft);}
.split__media img{width:100%;height:100%;object-fit:cover;}
.split__media .float{position:absolute;left:18px;bottom:18px;background:rgba(245,242,236,.94);backdrop-filter:blur(6px);border-radius:2px;padding:14px 18px;}
.split__media .float .n{font-weight:200;font-size:1.7rem;color:var(--espresso);line-height:1;}
.split__media .float .l{font-size:11.5px;letter-spacing:.05em;color:var(--ink-2);text-transform:uppercase;margin-top:4px;}

/* liste à filet (éditorial, pas de chips ronds) */
.flist{list-style:none;margin:26px 0 0;padding:0;}
.flist li{padding:13px 0 13px 26px;position:relative;}
.flist li::before{content:"";position:absolute;left:0;top:26px;width:10px;height:1px;background:var(--espresso);}
.flist--cross li::before,.flist--check li::before{top:19px;width:15px;height:15px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
.flist--check li::before{background:var(--espresso);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E");}
.flist--cross li::before{background:var(--ink-2);opacity:.65;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");}
.flist .lt{font-weight:400;font-size:1.05rem;}
.flist .ld{color:var(--ink-2);font-size:14.5px;margin-top:3px;}

/* ---------- Icônes locfacts (lecture facilitée) ---------- */
.locfacts li{display:flex;gap:13px;align-items:flex-start;}
.locfacts .lic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:rgba(79,32,15,.08);color:var(--espresso);display:flex;align-items:center;justify-content:center;margin-top:3px;}
.locfacts .lic svg{width:19px;height:19px;}
.locfacts .lf{display:block;}

/* ---------- Comparatif bail : icône par ligne ---------- */
.flist--ico{margin-top:20px;}
.flist--ico li{padding:12px 0;display:flex;gap:15px;align-items:flex-start;}
.flist--ico li::before{display:none;}
.flist--ico .ic{flex:0 0 auto;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;}
.flist--ico .ic svg{width:23px;height:23px;}
.flist--ico .ic--neg{background:rgba(110,100,91,.13);color:var(--ink-2);}
.flist--ico .ic--pos{background:rgba(79,32,15,.10);color:var(--espresso);}
.flist--ico .tx{flex:1;}

/* ---------- Mini-carte schématique (remplace l'iframe Google Maps) ---------- */
.locschema{position:relative;width:100%;height:430px;background:#EDEDEB;}
.locschema svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
@media(max-width:768px){.locschema{height:340px;}}

/* ---------- Quiz : label question + option sélectionnée ---------- */
.quiz__qn{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;}
.quiz__opt.sel{border-color:var(--espresso);background:rgba(79,32,15,.06);}

/* ---------- Galerie collage (mosaïque + voir plus) ---------- */
.bdmgal__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:128px;gap:8px;grid-auto-flow:dense;margin-top:42px;}
.bdmgal__item{position:relative;overflow:hidden;background:var(--espresso-deep);border-radius:var(--r);}
.bdmgal__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.bdmgal__item:hover img{transform:scale(1.05);}
.bdmgal__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,0) 62%,rgba(20,14,10,.26) 100%);pointer-events:none;}
.bdmgal__item--xl{grid-column:span 6;grid-row:span 3;}
.bdmgal__item--v{grid-column:span 3;grid-row:span 3;}
.bdmgal__item--wide{grid-column:span 6;grid-row:span 2;}
.bdmgal__item--sm{grid-column:span 3;grid-row:span 2;}
.bdmgal__more{display:none;}
.bdmgal.is-open .bdmgal__more{display:block;}
.bdmgal__btn-wrap{text-align:center;margin-top:28px;}
@media(max-width:980px){
  .bdmgal__grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;}
  .bdmgal__item--xl,.bdmgal__item--wide{grid-column:span 6;grid-row:span 3;}
  .bdmgal__item--v{grid-column:span 3;grid-row:span 3;}
  .bdmgal__item--sm{grid-column:span 3;grid-row:span 2;}
}
@media(max-width:600px){
  .bdmgal__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:6px;}
  .bdmgal__item{grid-column:span 1 !important;grid-row:auto !important;aspect-ratio:4/3;}
  .bdmgal__item--xl{grid-column:span 2 !important;}
}

/* ---------- Sélecteur de salle (étape 4, formulaire réunions) ---------- */
.rp-hint{margin-top:12px;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.rp-hint svg{width:17px;height:17px;flex:none;}
.roompick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.roompick__item{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--white);transition:border-color .15s,box-shadow .15s;}
.roompick__item input{position:absolute;opacity:0;pointer-events:none;}
/* pastille radio (affordance : "c'est cliquable / sélectionnable") */
.roompick__item::after{content:"";position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(30,20,14,.30);box-shadow:0 1px 5px rgba(0,0,0,.35);z-index:2;transition:background .15s,transform .15s;}
.roompick__item:hover{border-color:var(--taupe-2);}
.roompick__item:hover::after{transform:scale(1.08);}
.roompick__item.sel::after{background:var(--espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:#fff;}
.roompick__item img{width:100%;height:82px;object-fit:cover;display:block;}
.roompick__item .rp-name{font-weight:400;font-size:14px;line-height:1.15;color:var(--espresso);padding:9px 11px 0;}
.roompick__item .rp-cap{font-size:12px;color:var(--ink-2);padding:1px 11px 10px;}
.roompick__item.sel{border-color:var(--espresso);box-shadow:inset 0 0 0 1px var(--espresso);}
.roompick__item--none{justify-content:flex-start;}
.roompick__item .rp-ph{height:82px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:var(--ink-2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}

/* étapes (gros numéros typo, pas de ronds) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s;}
@media(max-width:840px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:18px;border-top:1px solid var(--line);}
.step .sn{font-weight:200;font-size:3rem;color:var(--espresso);line-height:1;letter-spacing:-.03em;opacity:.85;}
.step h3{font-weight:400;font-size:1.15rem;margin:14px 0 6px;}
.step p{color:var(--ink-2);font-size:14.5px;margin:0;}

/* bande chiffres */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;}
@media(max-width:760px){.statband{grid-template-columns:repeat(2,1fr);}}
.statband .s{background:var(--paper);padding:30px 24px;text-align:center;}
.statband .n{font-weight:200;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--espresso);line-height:1;letter-spacing:-.02em;}
.statband .l{font-size:13px;color:var(--ink-2);margin-top:8px;}

/* ---------- Bande photo plein cadre (cinématique) ---------- */
.fullbleed{position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;background:var(--espresso-deep);}
.fullbleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fullbleed .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,6,.82) 0%,rgba(20,12,6,.2) 52%,rgba(20,12,6,.34) 100%);}
.fullbleed .c{position:relative;z-index:2;color:var(--paper);padding:60px 0;max-width:24ch;}
.fullbleed .c .h-sub{color:var(--paper);font-weight:200;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.015em;line-height:1.06;}
@media(max-width:768px){.fullbleed{min-height:400px;}}

/* ---------- Section brune (.brown-rich) ----------
   Brun officiel, relevé sur borddemeuse.com : section.bg-primary = #4F200F,
   APLAT strict , background-image:none, box-shadow:none, aucun ::before/::after.
   Ni dégradé, ni trame de points, ni vignette : le site n'en a aucun.
   -------------------------------------------------- */
.brown-rich{position:relative;color:var(--paper);overflow:hidden;background:var(--espresso);}
.brown-rich .h-section,.brown-rich h2,.brown-rich h3{color:var(--paper);}
.brown-rich .muted{color:rgba(245,242,236,.74);}
.brown-rich .card{background:rgba(245,242,236,.05);border-color:rgba(245,242,236,.12);}
.brown-rich .card:hover{border-color:rgba(245,242,236,.28);box-shadow:none;}
.brown-rich .card h3{color:var(--paper);}
.brown-rich .card p{color:rgba(245,242,236,.72);}

/* Composants clairs replacés sur le brun , permet de basculer n'importe quelle
   section en .brown-rich sans avoir à réécrire son markup. */
.brown-rich .eyebrow{color:rgba(245,242,236,.72);}
.brown-rich .eyebrow::before,.brown-rich .eyebrow--center::after{background:var(--paper);opacity:.5;}
.brown-rich .lead,.brown-rich .shead p{color:rgba(245,242,236,.74);}
.brown-rich .lead strong,.brown-rich .strong,.brown-rich .kicker{color:var(--paper);}
/* étapes numérotées */
.brown-rich .step{border-top-color:rgba(245,242,236,.20);}
.brown-rich .step .sn{color:var(--paper);opacity:.8;}
.brown-rich .step p{color:rgba(245,242,236,.72);}
/* listes à puces et à icônes */
.brown-rich .flist li::before,.brown-rich .flist--check li::before{background:var(--paper);}
.brown-rich .flist--cross li::before{background:rgba(245,242,236,.7);opacity:1;}
.brown-rich .flist .ld{color:rgba(245,242,236,.72);}
.brown-rich .flist--ico .ic--pos{background:rgba(245,242,236,.14);color:var(--paper);}
.brown-rich .flist--ico .ic--neg{background:rgba(245,242,236,.07);color:rgba(245,242,236,.66);}
/* bloc accès / chiffres-clés */
.brown-rich .locfacts li{border-top-color:rgba(245,242,236,.20);}
.brown-rich .locfacts .t{color:var(--paper);}
.brown-rich .locfacts .s{color:rgba(245,242,236,.62);}
.brown-rich .locfacts .lic{background:rgba(245,242,236,.12);color:var(--paper);}
.brown-rich .locaddr{color:rgba(245,242,236,.86);}
.brown-rich .locaddr svg{color:var(--paper);}
.brown-rich .maplink{color:rgba(245,242,236,.72);border-bottom-color:rgba(245,242,236,.3);}
.brown-rich .maplink:hover{color:var(--paper);border-color:var(--paper);}
/* avis */
.brown-rich .review{background:rgba(245,242,236,.05);border-color:rgba(245,242,236,.14);box-shadow:none;}
.brown-rich .review .stars,.brown-rich .review .nm{color:var(--paper);}
.brown-rich .review .mt{color:rgba(245,242,236,.66);}
.brown-rich .revhead .gpill{background:rgba(245,242,236,.06);border-color:rgba(245,242,236,.16);color:var(--paper);}
/* bouton fantôme */
.brown-rich .btn--ghost{color:var(--paper);border-color:rgba(245,242,236,.34);}
.brown-rich .btn--ghost:hover{border-color:var(--paper);}
/* comparatif 2 cartes sur brun : l'option subie est sourde, l'option BDM ressort */
.brown-rich .card--off{background:rgba(245,242,236,.035);border-color:rgba(245,242,236,.10);}
.brown-rich .card--off .kicker{color:rgba(245,242,236,.60);}
.brown-rich .card--off .flist .lt{color:rgba(245,242,236,.88);}
.brown-rich .card--hi{background:rgba(245,242,236,.10);border-color:rgba(245,242,236,.44);}
.brown-rich .card--hi:hover{border-color:var(--paper);}

/* ---------- Quiz (section signature) ---------- */
.quiz{background:var(--paper);border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:var(--shadow-soft);}
.quiz__grid{display:grid;grid-template-columns:1fr 1.1fr;}
@media(max-width:860px){.quiz__grid{grid-template-columns:1fr;}}
.quiz__media{position:relative;min-height:100%;background:var(--espresso-deep);}
.quiz__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;}
.quiz__media .ov{position:absolute;inset:0;background:linear-gradient(120deg,rgba(39,19,10,.5),rgba(39,19,10,.1));}
.quiz__media .cap{position:absolute;left:26px;bottom:24px;color:var(--paper);z-index:2;}
.quiz__body{padding:40px;}
@media(max-width:560px){.quiz__body{padding:26px;}}
.quiz__q{font-weight:300;font-size:1.5rem;letter-spacing:-.01em;margin:6px 0 22px;}
.quiz__opts{display:grid;gap:10px;}
.quiz__opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:16px 18px;font-size:15px;font-weight:400;color:var(--ink);transition:all .22s;}
.quiz__opt:hover{border-color:var(--espresso);background:var(--white);transform:translateX(3px);}
.quiz__opt .k{font-weight:500;color:var(--ink-3);font-size:13px;}
.quiz__prog{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.quiz__prog i{display:block;height:100%;background:var(--espresso);transition:width .4s var(--ease);}
.quiz__res{display:none;}
.quiz__res.on{display:block;animation:fade .5s var(--ease);}

/* ---------- Vidéo ---------- */
.videowrap{position:relative;max-width:940px;margin:44px auto 0;border-radius:var(--r);overflow:hidden;background:var(--espresso-deep);box-shadow:var(--shadow-soft);aspect-ratio:16/9;}
.videowrap video{width:100%;height:100%;display:block;object-fit:cover;background:#000;}
.videowrap .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to top,rgba(20,12,6,.42),rgba(20,12,6,.12));border:none;cursor:pointer;transition:opacity .35s;}
.videowrap .vplay .disc{width:80px;height:80px;border-radius:50%;background:rgba(245,242,236,.94);color:var(--espresso);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);transition:transform .25s,background .25s;}
.videowrap .vplay:hover .disc{transform:scale(1.08);background:var(--paper);}
.videowrap .vplay .lbl{position:absolute;bottom:22px;left:24px;color:var(--paper);font-size:13px;letter-spacing:.02em;}
.videowrap.playing .vplay{opacity:0;pointer-events:none;}
@media(max-width:600px){.videowrap .vplay .disc{width:64px;height:64px;}}

/* ---------- Lecteur Plyr (pattern EasyHome, cf. funnel-playbook/VIDEO-HOSTING.md) ----------
   Remplace les contrôles natifs du navigateur : barre grise hors charte, rendu différent
   sur chaque navigateur, et menu "..." qui propose de télécharger la vidéo du client.
   Thème calé sur la palette officielle : bleu poudre (--color-blue) pour la progression,
   lisible sur la barre sombre ; disque papier + icône espresso pour le bouton central,
   identique à .vplay pour ne pas avoir deux langages ; angles nets (--r) comme le reste. */
:root{
  --plyr-color-main:var(--powder);
  --plyr-video-control-color:var(--paper);
  --plyr-video-control-color-hover:var(--espresso);
  --plyr-video-control-background-hover:var(--powder);
  --plyr-range-fill-background:var(--powder);
  --plyr-range-thumb-background:var(--paper);
  /* Piste non lue volontairement discrète : le bleu poudre est clair, sans ça on ne
     distingue pas la portion lue du reste de la barre. */
  --plyr-video-progress-buffered-background:rgba(237,237,235,.22);
  --plyr-video-controls-background:linear-gradient(rgba(39,19,10,0),rgba(39,19,10,.9));
  --plyr-control-radius:var(--r);
  --plyr-font-family:'Inter',system-ui,-apple-system,sans-serif;
  --plyr-font-size-small:12px;
  --plyr-font-size-base:13px;
}
/* Plyr s'insère entre .videowrap et le <video> : on le fait remplir le cadre 16/9 déjà
   posé par .videowrap, au lieu de laisser Plyr imposer sa propre boîte. */
.videowrap .plyr{position:absolute;inset:0;width:100%;height:100%;border-radius:0;}
.videowrap .plyr__video-wrapper{height:100%;background:var(--espresso-deep);}
.videowrap .plyr video{width:100%;height:100%;object-fit:cover;}
/* L'overlay "Cliquez pour activer le son" reste au-dessus du lecteur tant qu'il est visible. */
.videowrap .vplay{z-index:3;}
/* Tant que la vidéo est un aperçu muet en boucle, l'overlay est la seule affordance :
   les contrôles n'apparaissent qu'une fois le son activé. */
.videowrap:not(.playing) .plyr__controls,
.videowrap:not(.playing) .plyr__control--overlaid{opacity:0;pointer-events:none;}
/* Bouton central : le disque papier de .vplay. Plyr le centre en translate(-50%,-50%),
   le hover DOIT reconduire cette translation sinon le bouton saute en bas à droite. */
.videowrap .plyr__control--overlaid{background:rgba(245,242,236,.94);color:var(--espresso);padding:22px;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);transition:transform .25s,background .25s;}
.videowrap .plyr__control--overlaid:hover,.videowrap .plyr__control--overlaid:focus{background:var(--paper);color:var(--espresso);transform:translate(-50%,-50%) scale(1.08);}
@media(max-width:600px){
  .videowrap .plyr__control--overlaid{padding:15px;}
  .videowrap .plyr__controls{padding:6px 6px 4px;gap:2px;}
  .videowrap .plyr__controls .plyr__control{padding:5px;}
  .videowrap .plyr__time{font-size:11px;}
  /* Le slider de volume est inutile au doigt (le volume se règle aux boutons du
     téléphone, et iOS ignore volume) et il volait la moitié de la barre de
     progression. On garde le bouton couper/remettre le son, on jette le slider. */
  .videowrap .plyr__volume input[type=range]{display:none;}
  .videowrap .plyr__volume{min-width:0;}
  .videowrap .plyr__progress__container{flex:1 1 auto;min-width:60px;}
}

/* ---------- Témoignages ---------- */
.revhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.revhead .gpill{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:9px 16px;font-size:14px;}
.revhead .stars{color:var(--espresso);letter-spacing:2px;}
.review{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;box-shadow:0 12px 34px -22px rgba(42,28,18,.28);}
.review .stars{color:var(--espresso);letter-spacing:2px;font-size:14px;}
.review blockquote{margin:14px 0 0;font-size:15px;line-height:1.62;color:var(--ink);font-weight:300;}
.review figcaption{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:12px;}
.review .nm{font-weight:500;font-size:14px;}
.review .mt{font-size:12.5px;color:var(--ink-2);}
.review .lg{margin-left:auto;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:4px 9px;}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.faq__side{position:sticky;top:96px;}
@media(max-width:900px){.faq{grid-template-columns:1fr;gap:28px;}.faq__side{position:static;top:auto;}}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{width:100%;text-align:left;background:none;border:none;padding:22px 40px 22px 0;font-size:1.06rem;font-weight:400;color:var(--ink);position:relative;letter-spacing:-.005em;}
.faq__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:200;font-size:1.6rem;color:var(--espresso);transition:transform .3s;}
.faq__item.open .faq__q::after{transform:translateY(-50%) rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq__a p{margin:0 0 22px;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:60ch;}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden;}
.cta-final .h-display{color:var(--paper);max-width:20ch;font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.08;}
@media(max-width:600px){.cta-final .h-display{font-size:1.85rem;line-height:1.1;}}
.cta-final .ghost{color:rgba(245,242,236,.05);}

/* ---------- Footer , calqué 1:1 sur borddemeuse.com (.c-site-footer) ----------
   Valeurs relevées en computed styles sur /bureaux-prives-coworking-a-liege/ :
   fond #EDEDEB · tout le texte #B5ACA6 (= --color-grey-dark officiel)
   titres de colonne  Inter 300 / 14px / lh 1.5 / uppercase / margin-bottom 24px
   liens & valeurs    Inter 300 / 22px / lh 1.25 / uppercase / lien padding 4px 0
   grille 12 colonnes, column-gap 16px, row-gap 48px → 12/12/12/12 puis
   12/4/4/4 dès 768px puis 6/2/2/2 dès 1280px ; corps centré < 768px, à gauche au-delà
   wordmark centré, 160px → 240px (768) → 360px (1280), padding 80px 0 48px
   doormat 12px, padding 48px 0
   ---------------------------------------------------------------------------- */
/* padding-bottom : dégagement pour les éléments fixes que le site officiel n'a pas
   (FAB WhatsApp 58px, et la barre CTA .mbar de 92px en mobile) , sans quoi ils
   recouvrent le doormat une fois la page scrollée en bas */
.footer{background:#EDEDEB;color:#B5ACA6;padding:0 0 56px;}
@media(max-width:767px){.footer{padding-bottom:120px;}}
.footer__container{padding:0 20px;}
@media(min-width:1024px){.footer__container{padding:0 48px;}}

.footer__logo{display:flex;align-items:center;justify-content:center;padding:80px 0 48px;}
.footer__logo img{display:block;width:160px;height:auto;aspect-ratio:317/228;}
@media(min-width:768px){.footer__logo img{width:240px;}}
@media(min-width:1280px){.footer__logo img{width:360px;}}

.footer__body{padding:32px 0;text-align:center;}
@media(min-width:768px){.footer__body{text-align:left;}}
.footer__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:48px;}
.footer__col{grid-column:span 12;}
@media(min-width:768px){.footer__col{grid-column:span 4;}}
@media(min-width:1280px){.footer__col{grid-column:span 2;}}
.footer__col--contact{grid-column:span 12;}
@media(min-width:1280px){.footer__col--contact{grid-column:span 6;}}

.footer__title{display:block;font-weight:300;font-size:14px;line-height:1.5;letter-spacing:normal;text-transform:uppercase;color:#B5ACA6;margin:0 0 24px;}

/* taille fluide relevée sur le site : 20.79px @390 → 22px @1440 */
.footer__list a,.footer__dl dd{font-weight:300;font-size:clamp(20.33px,calc(20.33px + .1157vw),22px);line-height:1.25;letter-spacing:normal;text-transform:uppercase;color:#B5ACA6;}
.footer__list{list-style:none;margin:0;padding:0;}
.footer__list li+li{margin-top:8px;}
.footer .footer__list a{display:inline-block;padding:4px 0;text-decoration:none;transition:color .2s;}
.footer__dl{margin:0;}
/* les intitulés (dt) existent pour l'accessibilité mais sont masqués, comme sur le site */
.footer__dl dt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.footer__dl dd{margin:0 0 8px;}
.footer__dl dd:last-of-type{margin-bottom:0;}
.footer .footer__dl a{display:inline;color:inherit;font:inherit;text-decoration:none;transition:color .2s;}
.footer .footer__list a:hover,.footer .footer__dl a:hover,.footer__doormat a:hover{color:var(--espresso);}

.footer__doormat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:48px 0;font-weight:300;font-size:12px;line-height:1.5;letter-spacing:normal;text-transform:uppercase;color:#B5ACA6;}
.footer__doormat-left{display:flex;flex-wrap:wrap;gap:16px;}
.footer .footer__doormat a{display:inline;color:#B5ACA6;font-size:12px;text-decoration:none;transition:color .2s;}
@media(max-width:767px){
  .footer__doormat{flex-direction:column;justify-content:center;text-align:center;}
  .footer__doormat-left{flex-direction:column;align-items:center;gap:8px;}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}.hero__media img{animation:none;}}

/* ---------- Modal form ---------- */
#modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;}
#modal.open{display:flex;}
#modal .bg{position:absolute;inset:0;background:rgba(27,15,8,.72);backdrop-filter:blur(7px);animation:fade .25s ease;}
#modal .panel{position:relative;width:100%;max-width:560px;max-height:94vh;overflow-y:auto;background:var(--paper);border-radius:2px;box-shadow:0 40px 100px -20px rgba(0,0,0,.6);animation:slideup .4s var(--ease);}
@keyframes slideup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.m-head{padding:24px 28px 14px;}
.m-head .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.m-head .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500;}
.m-x{background:none;border:none;font-size:22px;color:var(--ink-3);line-height:1;padding:4px;}
.m-prog{display:flex;align-items:center;gap:10px;}
.m-dot{width:26px;height:26px;border-radius:50%;background:rgba(42,28,18,.08);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--ink-3);flex:none;}
.m-dot.active{background:var(--espresso);color:var(--paper);}
.m-dot.done{background:var(--espresso-dk);color:var(--paper);}
.m-dot.done span{display:none;}.m-dot.done::after{content:"✓";}
.m-line{flex:1;height:2px;background:rgba(42,28,18,.1);border-radius:2px;overflow:hidden;}
.m-line i{display:block;height:100%;background:var(--espresso);transition:width .5s var(--ease);width:0;}
.m-body{padding:6px 28px 28px;}
.m-step{animation:fade .35s ease;}
.m-step.hide{display:none;}
.m-reward{display:flex;align-items:center;gap:12px;border-radius:2px;padding:14px 16px;margin-bottom:18px;font-size:13px;}
.m-reward.lock{background:var(--paper-2);border:1px solid var(--line);}
.m-reward.unlock{background:#eef4ef;border:1px solid #cfe2d4;color:#2f5e41;}
.m-reward .e{font-size:20px;}
.field{margin-bottom:15px;}
.field>label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:7px;}
.field input,.field select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:2px;background:var(--white);font-family:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s;}
.field input:focus,.field select:focus{outline:none;border-color:var(--espresso);}
.field input.err,.field select.err{border-color:#c1121f;background:#fdf3f3;}
.field .msg{display:none;color:#c1121f;font-size:12px;margin-top:6px;}
.field .msg.on{display:block;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:2px;padding:13px 15px;font-size:14px;cursor:pointer;transition:all .2s;background:var(--white);}
.chip:hover{border-color:var(--espresso);}
.chip input{accent-color:var(--espresso);width:16px;height:16px;}
.chip.sel{border-color:var(--espresso);background:#f7f0ec;}
/* Question "Vous cherchez" (page bureaux) : une seule colonne + une ligne de précision.
   En 2 colonnes, un type d'espace n'occupait qu'un demi-cadran et les trois se lisaient
   comme des options interchangeables ; empilés, les bureaux tiennent les deux premières
   lignes et chacun dit ce qu'il est. */
.chips--stack{grid-template-columns:1fr;}
.chip--rich{align-items:flex-start;padding:14px 16px;}
.chip--rich input{margin-top:2px;}
.chip--rich .chip__txt{display:flex;flex-direction:column;gap:2px;line-height:1.3;}
.chip--rich .chip__sub{font-size:12px;opacity:.62;}
.consent{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:2px;padding:13px 15px;margin-top:4px;}
.consent.err{border-color:#c1121f;background:#fdf3f3;}
.consent input{accent-color:var(--espresso);width:17px;height:17px;margin-top:2px;flex:none;}
.consent label{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.m-nav{display:flex;gap:12px;margin-top:8px;}
.m-nav .btn{min-width:0;}
/* Mobile : on empile les boutons du modal en pleine largeur (le libellé long ne peut pas rétrécir → débordait) */
@media(max-width:560px){
  .m-nav{flex-direction:column-reverse;}
  .m-nav .btn{width:100%;}
  .m-nav .btn--solid{font-size:15px;letter-spacing:.02em;padding-left:14px;padding-right:14px;}
}
.m-success{padding:38px 28px 34px;text-align:center;}
.m-success .big{font-size:46px;margin-bottom:8px;}
.m-success h3{font-weight:300;font-size:1.7rem;margin:0 0 6px;}
.m-success p{color:var(--ink-2);margin:0 auto 22px;max-width:38ch;}
.m-next{background:var(--white);border:1px solid var(--line);border-radius:2px;padding:22px;text-align:left;margin-bottom:18px;}
.m-next ol{margin:12px 0 0;padding-left:18px;color:var(--ink-2);font-size:14px;}
.m-next ol li{margin:5px 0;}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden;}

/* ---------- WhatsApp + sticky mobile ---------- */
#wa{position:fixed;bottom:24px;right:24px;z-index:90;}
@media(max-width:768px){#wa{bottom:88px;right:14px;}}
#wa .b{width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px -8px rgba(37,211,102,.6);animation:wapulse 2.6s ease-in-out infinite;}
#wa .b:hover{transform:scale(1.07);}
@keyframes wapulse{0%,100%{box-shadow:0 12px 34px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.4)}50%{box-shadow:0 12px 34px -8px rgba(37,211,102,.6),0 0 0 14px rgba(37,211,102,0)}}
#wa .tip{position:absolute;right:70px;bottom:12px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:9px 13px;white-space:nowrap;font-size:12.5px;font-weight:400;color:var(--ink);box-shadow:var(--shadow-card);opacity:0;transform:translateX(8px);transition:.25s;pointer-events:none;}
#wa:hover .tip{opacity:1;transform:none;}
@media(max-width:520px){#wa .tip{display:none;}}

.mbar{display:none;}
@media(max-width:768px){
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);border-top:1px solid var(--line);padding:9px 14px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -14px 34px -10px rgba(42,28,18,.26);}
  .mbar .hk{text-align:center;font-size:11.5px;color:var(--ink-2);margin-bottom:7px;}
  .mbar .hk b{color:var(--espresso);font-weight:500;}
  /* la barre ne s'affiche qu'une fois le scroll amorcé : classe .is-on posée par bdm.js */
  .mbar{transform:translateY(115%);opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .25s linear;}
  .mbar.is-on{transform:none;opacity:1;pointer-events:auto;}
  @media(prefers-reduced-motion:reduce){.mbar{transition:none;}}
}

/* ---------- Cookie consent (modale centrée + fond flouté, accept mis en avant) ---------- */
#cookie{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(28,17,9,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#cookie .ckin{max-width:420px;width:100%;margin:0;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 40px 110px -30px rgba(20,10,4,.7);padding:32px 28px;display:flex;flex-direction:column;align-items:stretch;gap:18px;}
#cookie .cktxt{font-size:14px;color:var(--ink-2);line-height:1.55;flex:none;}
#cookie .cktxt b{color:var(--ink);font-weight:500;}
#cookie .ckbtns{display:flex;flex-direction:column;align-items:center;gap:12px;}
/* Accepter : plein, large, prioritaire */
#cookie #ck-yes{width:100%;padding:15px 22px;font-size:14px;}
/* Refuser : volontairement discret (petit lien texte, jamais en bouton) */
#cookie #ck-no{order:2;background:none;border:0;box-shadow:none;padding:2px 6px;color:var(--ink-3);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;text-decoration:none;transition:color .2s;}
#cookie #ck-no:hover{color:var(--ink-2);}