/* ============================================================
   DMR·03·MAQ·SITE·P3 · v0.7 — MAQUETTE INTERNE · STAGING
   Base visuelle : démo TheGem Construction & Building 01
   ADN DOMROC : roc remplace le noir · latérite remplace
   l'orange chantier · mono cadastral · copywriting plateforme v2
   ============================================================ */
:root{
  --roc:#0F1E2A;
  --roc-800:#0B161F;
  --roc-700:#162C3C;
  --laterite:#9E4A2B;
  --laterite-bright:#C05A33;
  --laiton:#B08A4A;
  --laiton-soft:#C29A57;
  --blanc:#FFFFFF;
  --gris-bg:#F4F4F2;
  --gris:#6E7378;
  --gris-sombre:#8A95A0;
  --ligne:#E4E3DE;
  --ligne-sombre:rgba(255,255,255,.12);

  --sans:'Funnel Display',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;

  --mx:clamp(20px,5vw,72px);
  --maxw:1280px;
  --hover:.3s ease;           /* durée/easing hover démo (.3s ease) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--blanc);color:var(--roc);
  font-family:var(--sans);font-size:20px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--laiton);color:var(--blanc)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--mx)}

/* ---------- utilities ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--laterite);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"+";font-weight:500}
.staging{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--gris-sombre);text-transform:uppercase;
}
h1,h2,h3{font-weight:500;line-height:1.1;letter-spacing:0}
.lead{color:var(--gris);font-size:clamp(17px,1.8vw,20px);line-height:1.5;font-weight:400}

/* boutons — pilule TheGem : radius 40px, 19px w500, puce 7px avant le texte, hover flat (le fond se vide) */
.btn{
  display:inline-flex;align-items:center;
  font-weight:500;font-size:19px;letter-spacing:0;
  padding:11px 30px 10px 20px;border:0;border-radius:40px;cursor:pointer;
  white-space:nowrap;transition:all var(--hover);
}
.btn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:17px;flex:none}
.btn-laterite{background:var(--laterite);color:var(--blanc);box-shadow:inset 0 0 0 2px var(--laterite)}
.btn-laterite:hover{background:transparent;color:var(--laterite)}
header.site .btn-laterite:hover,.cta-final .btn-laterite:hover,.hero .btn-laterite:hover{color:var(--laterite-bright);box-shadow:inset 0 0 0 2px var(--laterite-bright)}
.btn-ghost-dark{background:transparent;color:var(--roc);box-shadow:inset 0 0 0 2px var(--roc)}
.btn-ghost-dark:hover{background:var(--roc);color:var(--blanc)}
.btn-ghost-light{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:var(--blanc);color:var(--roc)}

/* croix cadastrales — signature DOMROC conservée */
.corner-marks{position:absolute;inset:0;pointer-events:none;z-index:3}
.corner-marks span{position:absolute;width:14px;height:14px}
.corner-marks span::before,.corner-marks span::after{content:"";position:absolute;background:var(--laterite-bright)}
.corner-marks span::before{width:14px;height:1px;top:0;left:0}
.corner-marks span::after{width:1px;height:14px;top:0;left:0}
.cm-tl{top:10px;left:10px}
.cm-tr{top:10px;right:10px;transform:scaleX(-1)}
.cm-bl{bottom:10px;left:10px;transform:scaleY(-1)}
.cm-br{bottom:10px;right:10px;transform:scale(-1)}

/* image fallback */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--roc-700),var(--roc-800))}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- ruban staging ---------- */
.ribbon{
  position:fixed;z-index:200;left:0;right:0;bottom:0;
  background:var(--roc-800);color:var(--gris-sombre);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;padding:7px 12px;border-top:1px solid var(--ligne-sombre);
}
.ribbon b{color:var(--laiton-soft);font-weight:500}

/* ---------- double header (mécanique démo) ----------
   header principal : ABSOLU, transparent, défile avec la page.
   barre sticky : FIXE, cachée translateY(-100%), révélée en remontée. */
header.site{
  position:absolute;top:0;left:0;right:0;z-index:100;
  background:transparent;color:var(--blanc);
  border-bottom:1px solid var(--ligne-sombre);
}
header.site.sticky-bar{
  position:fixed;z-index:110;visibility:hidden;opacity:0;transform:translateY(-100%);
  transition:opacity .1s ease,visibility .1s ease,transform .3s ease;
  background:rgba(15,30,42,.8);        /* alpha .8 démo — sans blur, sans ombre */
}
header.site.sticky-bar.sticked{visibility:visible;opacity:1}
header.site.sticky-bar.scroll-up{transform:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:98px;max-width:var(--maxw);margin:0 auto;padding:0 var(--mx)}
.sticky-bar .nav{height:58px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;--lg-lat:var(--laterite-bright)}
.brand .logo,.pre-logo{height:30px;width:auto;display:block}
.sticky-bar .brand .logo{height:25px}
.brand .tag{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--gris-sombre);text-transform:uppercase}
/* header : pas de tag AFRICA (retiré sur demande client 20.07.2026 — il reste au footer/panneau) */
.menu-panel .brand .logo{height:26px}
.pre-logo{height:38px;color:#EFEEE9;--lg-lat:var(--laterite-bright)}
/* groupe droit du header — Espace privé · FR/EN · CTA loupe */
.hd-right{display:flex;align-items:center;gap:18px}
.priv-link{display:none;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#C7CFD6;white-space:nowrap}
.priv-link:hover{color:#fff}
.priv-link svg{flex:none}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gris-sombre)}
.lang button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:2px}
.lang button.on{color:#fff;font-weight:700}
.lang button:hover{color:#fff}
@media(min-width:980px){.lang{display:inline-flex}}
@media(min-width:1213px){.priv-link{display:inline-flex}}
.nav-cta::before{display:none}
.nav-cta svg{margin-right:8px;flex:none}
.nav-links{display:none;align-items:center;gap:4px;list-style:none}
.nav-links a{font-size:20px;font-weight:500;color:#fff;padding:2px 16px;display:inline-block;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--laiton-soft)}
.nav-cta{padding:9px 22px 8px 16px;font-size:16px}
.burger{display:inline-flex;flex-direction:column;background:none;border:0;cursor:pointer;padding:8px;gap:3px}
.burger span{width:18px;height:2px;background:var(--blanc)}
@media(min-width:980px){
  .nav-links{display:flex}
  .burger{display:none}
}
@media(max-width:1212px){
  .nav-links a{font-size:16px;padding:2px 10px}
}
@media(max-width:599px){
  .nav-cta{display:none}
  .brand{flex-wrap:wrap;row-gap:2px}
  .brand .tag{flex-basis:100%}
  .nav{height:76px}
}

/* mega-menu Services — décalque template 26986/27012 : in .3s linear, out .1s linear délai .5s */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:120;
  background:var(--blanc);color:var(--roc);border-bottom:1px solid var(--ligne);
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:transform .1s linear .5s,opacity .1s linear .5s,visibility .1s linear .5s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{
  opacity:1;visibility:visible;transform:none;
  transition:transform .3s linear,opacity .3s linear,visibility .3s linear;
}
/* survol d'un item voisin de la nav : fermeture .1s SANS délai (démo) */
.nav-links:hover .has-mega:not(:hover):not(:focus-within) .mega{transition:transform .1s linear,opacity .1s linear,visibility .1s linear}

/* v0.7 — sous-menu déroulant « La méthode » (dropdown simple TheGem, mêmes timings que le mega) */
.has-sub{position:relative}
.has-sub .caret{margin-left:6px;vertical-align:middle}
.dd{
  position:absolute;left:16px;top:100%;z-index:120;min-width:250px;
  background:var(--blanc);color:var(--roc);border:1px solid var(--ligne);
  box-shadow:0 18px 44px rgba(15,30,42,.10);padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:transform .1s linear .5s,opacity .1s linear .5s,visibility .1s linear .5s;
}
.has-sub:hover .dd,.has-sub:focus-within .dd{
  opacity:1;visibility:visible;transform:none;
  transition:transform .3s linear,opacity .3s linear,visibility .3s linear;
}
.nav-links:hover .has-sub:not(:hover):not(:focus-within) .dd{transition:transform .1s linear,opacity .1s linear,visibility .1s linear}
.dd a{display:block;font-size:17px;font-weight:500;padding:10px 22px;white-space:nowrap;color:var(--roc)}
.dd a:hover{color:var(--laiton)}
@media(max-width:979px){.dd{display:none}}
.mega-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:40px var(--mx) 44px;max-width:var(--maxw);margin:0 auto}
.mega-col h6{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:14px;font-weight:500}
.mega-col ul{list-style:none;columns:2;column-gap:36px}
.mega-col li{break-inside:avoid}
.mega-col a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ligne);font-size:18px;font-weight:500;color:var(--roc);white-space:normal}
.mega-col a i{font-style:normal;font-size:15px;transition:color var(--hover)}
.mega-col a:hover{color:var(--laiton)}
.mega-col a:hover i{color:var(--laiton)}   /* variante mega démo (26986) : couleur seule, SANS rotation */
.mega-col a.mega-card{display:block;padding:0;border-bottom:0}
.mega-card{position:relative;display:block;min-height:220px;overflow:hidden}
.mega-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mega-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 100%)}
.mega-card .mc-body{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;color:var(--blanc)}
.mega-card .mc-body .staging{color:rgba(255,255,255,.6)}
.mega-card h4{font-size:24px;font-weight:500;transition:color var(--hover)}
.mega-card:hover h4{color:var(--laiton-soft)}
@media(max-width:979px){.mega{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;   /* héros plein écran (dvh = pas de saut barre mobile) */
  display:flex;align-items:flex-end;
  color:var(--blanc);overflow:hidden;background:var(--roc);
  padding:0;   /* neutralise le padding générique section — 140px/50px portés par .wrap (démo) */
}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img,.hero .bg video{position:absolute;top:0;left:0;width:100%;height:120%;object-fit:cover;opacity:.55;will-change:transform}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,42,.35) 0%,rgba(15,30,42,.72) 68%,rgba(11,22,31,.95) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:140px;padding-bottom:clamp(48px,7vw,88px)}
.hero h1{
  font-size:clamp(36px,7.8vw,100px);
  letter-spacing:0;line-height:1;font-weight:500;
}
.hero h1 .em{color:var(--laterite-bright)}
.hero-grid{display:grid;gap:36px;align-items:end}
@media(min-width:960px){.hero-grid{grid-template-columns:1fr 380px}}
.hero-sub{margin-top:26px;max-width:560px;color:#C7CFD6;font-size:clamp(17px,2vw,20px);line-height:1.5;font-weight:400}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-stat{
  position:relative;background:rgba(11,22,31,.72);
  border:1px solid var(--ligne-sombre);padding:30px 28px 26px;
}
.hero-stat .n{font-size:clamp(48px,6vw,72px);font-weight:500;letter-spacing:0;line-height:1}
.hero-stat .n sup{font-size:.45em;color:var(--laiton-soft);vertical-align:super}
.hero-stat .l{margin-top:8px;color:#C7CFD6;font-size:15px;font-weight:500;line-height:1.5}
.hero-stat .p{margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne-sombre);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris-sombre);line-height:1.7}
.hero-foot{
  margin-top:clamp(36px,5vw,56px);padding-top:22px;
  border-top:1px solid var(--ligne-sombre);
  display:flex;gap:36px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gris-sombre);text-transform:uppercase;
}
.hero-foot b{color:var(--blanc);font-weight:500}
.scroll-down{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(38px,4.5vw,60px);z-index:3;
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  display:none;align-items:center;justify-content:center;font-size:20px;color:var(--blanc);
  transition:background var(--hover),border-color var(--hover);
}
.scroll-down:hover{background:var(--laiton);border-color:var(--laiton)}
@media(min-width:960px){.scroll-down{display:inline-flex}}

/* entrée héros — fondu pur, mécanique démo (fade-simple 1s / animated 1.25s ease, délais courts) */
.js .hero .eyebrow,.js .hero-sub,.js .hero-actions,.js .hero-stat,.js .hero-foot,.js .scroll-down{opacity:0}
body.loaded .hero .eyebrow{animation:fadeIn 1s ease both}
body.loaded .hero-sub{animation:fadeIn 1s ease both}
body.loaded .hero-actions{animation:fadeIn .75s ease both}
body.loaded .hero-stat{animation:fadeIn 1.25s ease both .2s}
body.loaded .hero-foot{animation:fadeIn 1s ease both}
body.loaded .scroll-down{animation:fadeIn 1s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* typewriter H1 — 30 ms/lettre, pop sec sans fondu (thegemHeadingTypewriter) */
.hero h1 .lt{opacity:0}
body.loaded .hero h1 .lt{animation:tw 0s linear forwards;animation-delay:calc(var(--i)*30ms)}
@keyframes tw{to{opacity:1}}

/* ---------- bande signal : vidéo (placeholder) + méga-stat ---------- */
.signal{position:relative;background:var(--roc-800);color:var(--blanc);overflow:hidden;padding:0;border-bottom:1px solid var(--ligne-sombre)}
.signal-media{position:relative;min-height:min(64vh,560px)}
.signal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.signal-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,31,.25) 0%,rgba(11,22,31,.9) 100%)}
.signal .wrap{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:clamp(28px,4vw,48px)}
.signal-stat .n{font-size:clamp(80px,14vw,170px);font-weight:500;line-height:.82;letter-spacing:0}
.signal-stat .n sup{font-size:.35em;color:var(--laiton-soft)}
.signal-stat .l{margin-top:10px;font-size:18px;font-weight:500;color:#C7CFD6;max-width:34ch}
.signal-note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne-sombre);padding:10px 14px}

/* ---------- strip typographique (typewriter au scroll) ---------- */
.strip{padding:clamp(56px,8vw,110px) 0;border-bottom:1px solid var(--ligne)}
.strip-line{font-size:clamp(50px,10vw,100px);font-weight:500;line-height:1.05;letter-spacing:0}
.strip-line .em{color:var(--laterite)}
.strip .lt{opacity:0}
.strip.in .lt{animation:tw 0s linear forwards;animation-delay:calc(var(--i)*30ms)}

/* ---------- sections communes ---------- */
section{padding:clamp(64px,9vw,120px) 0;scroll-margin-top:64px}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(36px,5vw,60px)}
@media(min-width:860px){.sec-head{grid-template-columns:1.15fr .85fr;align-items:end}}
.sec-head h2{font-size:clamp(36px,4vw,50px);line-height:1.2;letter-spacing:0;max-width:18ch}
.sec-head .right{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media(min-width:860px){.sec-head .right{align-items:flex-end;text-align:right}}
/* lines-slide-up — .35s cubic-bezier(.3,1.7,.4,1) démo, déclenché par .in sur l'ancêtre observé */
.tw-line{display:inline-block;overflow:hidden;vertical-align:bottom}
.tl{display:inline-block}
.js .tl{transform:translateY(110%);transition:transform .35s cubic-bezier(.3,1.7,.4,1) .1s}
.in .tl{transform:none}

/* ---------- mission ---------- */
.mission{border-bottom:1px solid var(--ligne)}
.mission-grid{display:grid;gap:40px}
@media(min-width:960px){.mission-grid{grid-template-columns:.9fr 1.1fr}}
.mission h2{font-size:clamp(32px,4.4vw,50px);letter-spacing:0;line-height:1.2}
.mission .lead strong{color:var(--roc);font-weight:500}
.mission-claim{
  margin-top:26px;padding:22px 24px;background:var(--gris-bg);
  border-left:3px solid var(--laterite);
  font-weight:500;font-size:clamp(18px,2.2vw,22px);letter-spacing:0;line-height:1.4;
}
.mission-claim small{display:block;margin-top:8px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--gris);text-transform:uppercase}

/* ---------- services (grille démo) ---------- */
.services{background:var(--roc);color:var(--blanc)}
.services .sec-head h2{color:var(--blanc)}
.services .lead{color:#9FB0BE}
.svc-grid{display:grid;border-top:1px solid var(--ligne-sombre);border-left:1px solid var(--ligne-sombre)}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1020px){.svc-grid.g4{grid-template-columns:repeat(2,1fr)}}
.svc{
  position:relative;padding:34px 30px 30px;min-height:250px;
  border-right:1px solid var(--ligne-sombre);border-bottom:1px solid var(--ligne-sombre);
  display:flex;flex-direction:column;gap:14px;
}
.svc .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gris-sombre)}
.svc h3{font-size:clamp(21px,2.4vw,26px);letter-spacing:0;line-height:1.2;font-weight:500}
.svc p{color:#9FB0BE;font-size:16px;line-height:1.55;flex:1}
.svc .go{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--ligne-sombre);border-radius:50%;
  color:var(--blanc);font-size:18px;
  transition:transform var(--hover),color var(--hover),border-color var(--hover);
}
.svc:hover .go{transform:rotate(45deg);color:var(--laiton-soft);border-color:var(--laiton-soft)}
.svc:hover h3{color:var(--laiton-soft)}
.svc h3{transition:color var(--hover)}
.svc .phase{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--gris-sombre);text-transform:uppercase}

/* ---------- about + compare ---------- */
.about{border-bottom:1px solid var(--ligne)}
.about-grid{display:grid;gap:48px}
@media(min-width:1000px){.about-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.about-media{position:relative}
.about-count{
  position:absolute;left:-14px;top:-24px;z-index:4;
  background:var(--laterite);color:var(--blanc);padding:20px 24px 16px;
}
.about-count .n{font-size:clamp(38px,4.6vw,54px);font-weight:500;letter-spacing:0;line-height:1}
.about-count .l{font-size:13px;font-weight:500;margin-top:4px}
.about-count .staging{color:rgba(255,255,255,.65)}
/* image-compare draggable — offset initial 40 % (data-offset 0.4 démo) */
.compare{position:relative;aspect-ratio:4/3;overflow:hidden;--pos:40%;touch-action:none;cursor:ew-resize}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-b-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--blanc);z-index:3;transform:translateX(-1px)}
.cmp-handle{
  position:absolute;top:50%;left:var(--pos);z-index:4;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid var(--blanc);
  background:var(--laterite);color:var(--blanc);cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.05em;
}
.cmp-tag{position:absolute;bottom:12px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(11,22,31,.75);color:var(--blanc);padding:5px 10px}
.cmp-tag.a{left:12px}.cmp-tag.b{right:12px}
.values{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--ligne)}
@media(min-width:640px){.values{grid-template-columns:1fr 1fr}}
.value{padding:26px 26px 26px 0;border-bottom:1px solid var(--ligne)}
@media(min-width:640px){.value:nth-child(odd){padding-right:34px}.value:nth-child(even){padding-left:34px;border-left:1px solid var(--ligne)}}
.value h4{font-size:19px;font-weight:500;letter-spacing:0;display:flex;align-items:center;gap:10px}
.value h4::before{content:"";width:8px;height:8px;background:var(--laiton);flex:none}
.value p{margin-top:8px;color:var(--gris);font-size:16px;line-height:1.55}

/* ---------- marquee — bande unique démo : 50s linear, w500, lh .5, mot détouré text-shadow ---------- */
.marquee-band{background:var(--blanc);overflow:hidden;padding:40px 0}
.marquee{display:flex;width:max-content;animation:scroll 50s linear infinite}
.mq-item{display:flex;white-space:nowrap}
.marquee span.mq-t{
  font-weight:500;font-size:clamp(64px,12vw,200px);letter-spacing:0;line-height:.5;color:var(--roc);
  padding-right:.35em;white-space:nowrap;
}
.mq-outline{color:var(--blanc);text-shadow:-2px -2px 0 var(--laiton),2px -2px 0 var(--laiton),-2px 2px 0 var(--laiton),2px 2px 0 var(--laiton)}
.mq-star{vertical-align:sub;color:var(--roc)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- témoignages — carrousel (1 slide visible, flèches, snap) ---------- */
.testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.testi-track::-webkit-scrollbar{display:none}
.testi{
  position:relative;background:var(--blanc);border:1px solid var(--ligne);
  padding:44px 40px 30px;flex:0 0 100%;scroll-snap-align:start;
}
@media(min-width:900px){.testi{padding:52px 56px 36px}}
.testi::before{content:"\00AB";position:absolute;top:6px;left:20px;font-size:78px;line-height:1;color:var(--laiton);opacity:.35;font-weight:500}
.testi q{quotes:"\00AB\202F" "\202F\00BB";font-size:clamp(18px,2.2vw,24px);font-weight:500;line-height:1.5;letter-spacing:0;display:block;max-width:56ch}
.testi q::before,.testi q::after{color:var(--laiton)}
.testi .who{margin-top:24px;padding-top:18px;border-top:1px solid var(--ligne);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.testi .who .avatar{width:44px;height:44px;border-radius:50%;background:var(--roc);color:var(--blanc);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex:none}
.testi .who b{font-size:16px;font-weight:500}
.testi .who div span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gris)}
.testi-nav{display:flex;gap:10px;margin-top:22px}
.testi-nav button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--ligne);background:var(--blanc);
  cursor:pointer;font-size:17px;color:var(--roc);transition:all var(--hover);
}
.testi-nav button:hover{background:var(--laiton);border-color:var(--laiton);color:var(--blanc)}

/* ---------- opérations (projects démo) ---------- */
.projects{background:var(--gris-bg);border-top:1px solid var(--ligne)}
.proj-grid{display:grid;gap:42px}
@media(min-width:760px){.proj-grid{grid-template-columns:1fr 1fr}}
.proj{position:relative;background:var(--blanc);border:1px solid var(--ligne);overflow:hidden}
.proj .ph{aspect-ratio:16/10}
.proj .cat{
  position:absolute;top:16px;left:16px;z-index:4;
  background:var(--roc);color:var(--blanc);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;
}
.proj-body{padding:26px 26px 24px}
.proj-body h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:0;font-weight:500;transition:color var(--hover)}
.proj:hover .proj-body h3{color:var(--laiton)}
.proj-body p{margin-top:10px;color:var(--gris);font-size:16px;line-height:1.55}
.proj-meta{margin-top:16px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris)}
.proj-meta b{color:var(--roc);font-weight:500}

/* ---------- réseau ---------- */
.network{border-bottom:1px solid var(--ligne)}
.net-strip{display:flex;gap:14px;flex-wrap:wrap}
.net-chip{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  border:1px solid var(--ligne);padding:12px 18px;color:var(--roc);
  background:var(--blanc);
}
.net-chip small{display:block;font-size:10px;color:var(--gris);letter-spacing:.06em;margin-top:2px}

/* ---------- journal ---------- */
.journal .art{
  display:grid;gap:14px;padding:26px 0;border-top:1px solid var(--ligne);
  align-items:center;transition:background var(--hover);
}
@media(min-width:820px){.journal .art{grid-template-columns:140px 1fr 180px 44px}}
.journal .art:last-of-type{border-bottom:1px solid var(--ligne)}
.journal .art:hover{background:var(--gris-bg)}
.journal .date{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gris)}
.journal h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:0;font-weight:500;transition:color var(--hover)}
.journal .art:hover h3{color:var(--laiton)}
.journal .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton)}
.journal .go{display:none;width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;align-items:center;justify-content:center;font-size:18px;transition:transform var(--hover),color var(--hover),border-color var(--hover)}
@media(min-width:820px){.journal .go{display:inline-flex}}
.journal .art:hover .go{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}
/* accueil : quadrillage clair sous la section journal (lignes encre discrètes, fondu vers les bords) */
.journal.gridded{position:relative;overflow:hidden}
.journal.gridded .grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(15,30,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,30,42,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 100% 86% at 50% 0%,#000 26%,transparent 76%);mask-image:radial-gradient(ellipse 100% 86% at 50% 0%,#000 26%,transparent 76%);pointer-events:none}
.journal.gridded .wrap{position:relative;z-index:1}

/* ---------- CTA final ---------- */
.cta-final{background:var(--roc);color:var(--blanc);position:relative;overflow:hidden}
.cta-final .grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 90% at 65% 40%,#000 25%,transparent 75%);
}
.cta-final .wrap{position:relative;z-index:2;display:grid;gap:34px}
@media(min-width:900px){.cta-final .wrap{grid-template-columns:1.2fr .8fr;align-items:center}}
.cta-final h2{font-size:clamp(38px,6vw,72px);letter-spacing:0;line-height:1.05;font-weight:500}
.cta-final h2 .em{color:var(--laterite-bright)}
/* typewriter du titre CTA — 3e typewriter de la page démo */
.cta-final h2 .lt{opacity:0}
.cta-final .in .lt{animation:tw 0s linear forwards;animation-delay:calc(var(--i)*30ms)}
.cta-final p{margin-top:18px;color:#9FB0BE;font-size:clamp(16px,1.9vw,19px);max-width:52ch}
.cta-final .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start}
@media(min-width:900px){.cta-final .actions{justify-content:flex-end}}

/* ---------- footer ---------- */
/* bande pré-footer « La règle » — décalque du bloc « Let's build your vision together » de la démo */
.rule-band{position:relative;min-height:min(64vh,460px);display:flex;align-items:center;overflow:hidden;background:var(--roc-800)}
.rule-band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.7}
.rule-band .grid-bg{z-index:1}
.rule-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,42,.55) 0%,rgba(15,30,42,.25) 55%,rgba(15,30,42,.05) 100%);z-index:1}
.rule-band .wrap{position:relative;z-index:2;width:100%;padding-top:70px;padding-bottom:70px}
.rb-in{max-width:58ch}
.rule-band h2{color:var(--blanc);font-size:clamp(34px,4.6vw,56px);font-weight:500;line-height:1.12;letter-spacing:0}
.rule-band h2 .em{color:var(--laterite-bright)}
.rule-band p{margin-top:18px;color:rgba(255,255,255,.85);font-size:clamp(16px,1.9vw,19px);line-height:1.6;max-width:46ch}
.rule-band p strong{color:var(--blanc)}
.rule-band .btn-roc{margin-top:28px}
.btn-roc{background:var(--roc-800);color:var(--blanc);border:1px solid rgba(255,255,255,.22)}
.btn-roc:hover{background:transparent;border-color:var(--blanc)}
/* footer — trame démo : statement + nav horizontale + méta, filigrane géant */
footer{position:relative;background:var(--roc-800);color:#9FB0BE;padding:64px 0 clamp(90px,13vw,190px);border-top:1px solid var(--ligne-sombre);font-size:16px;overflow:hidden}
.foot-grid2{display:grid;gap:40px;position:relative;z-index:2}
@media(min-width:900px){.foot-grid2{grid-template-columns:1.15fr 1fr;gap:60px}}
.foot-left .brand{color:var(--blanc)}
.foot-left .brand .logo{height:34px}
.foot-big{margin-top:24px;color:var(--blanc);font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.32;letter-spacing:0;max-width:26ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15.5px;font-weight:500}
.foot-nav a{color:var(--blanc);transition:color var(--hover)}
.foot-nav a:hover{color:var(--laiton-soft)}
.foot-cols{margin-top:28px;display:grid;gap:22px}
@media(min-width:640px){.foot-cols{grid-template-columns:1fr 1fr;gap:40px}}
.foot-meta2{display:flex;flex-direction:column;gap:9px;font-size:15px}
.foot-meta2 a{color:#C7CFD6;text-decoration:underline;text-underline-offset:3px}
.foot-meta2 a:hover{color:var(--blanc)}
.foot-soc{display:flex;gap:12px;margin-top:12px}
.foot-soc a{width:38px;height:38px;border-radius:50%;background:var(--blanc);color:var(--roc-800);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background var(--hover),color var(--hover)}
.foot-soc a svg{width:17px;height:17px;display:block}
.foot-soc a:hover{background:var(--laiton-soft);color:var(--blanc)}
.foot-legal{position:relative;z-index:2;margin-top:44px;padding-top:22px;border-top:1px solid var(--ligne-sombre);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.foot-word{position:absolute;left:0;right:0;bottom:-.32em;z-index:1;font-weight:500;font-size:clamp(110px,21vw,290px);line-height:1;letter-spacing:-.02em;color:rgba(255,255,255,.04);text-align:center;white-space:nowrap;pointer-events:none;user-select:none}

/* ---------- preloader — conservé (écart assumé : absent démo), timings TheGem ---------- */
.preloader{position:fixed;inset:0;z-index:400;background:var(--roc);opacity:.98;display:none;flex-direction:column;gap:22px;align-items:center;justify-content:center;transition:opacity .3s ease-out,visibility .3s ease-out}
.js .preloader{display:flex}
.preloader.done{opacity:0;visibility:hidden}
.pre-mark{color:var(--blanc);font-weight:700;font-size:30px;letter-spacing:-.01em}
.pre-mark span{color:var(--laiton-soft)}
.pre-bar{width:180px;height:2px;background:var(--ligne-sombre);overflow:hidden}
.pre-bar i{display:block;height:100%;width:40%;background:var(--laiton-soft);animation:preload 1s ease-out infinite}
@keyframes preload{from{transform:translateX(-100%)}to{transform:translateX(300%)}}

/* ---------- reveal au scroll — 1s ease, 40px, file sérielle 200 ms (JS) ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
/* fondu pur avec délais 100/200 ms — bande signal (fade-simple démo) */
.js .fade-io{opacity:0}
.fade-io.in{animation:fadeIn 1s ease both}
.signal-stat.in{animation-delay:.1s}
.signal-note.in{animation-delay:.2s}

/* filtres d'opérations — style DOMROC (écart assumé : angles droits, actif roc) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;align-items:center}
.f-btn{font-family:var(--sans);font-weight:500;font-size:15px;padding:10px 20px;border:1px solid var(--ligne);background:var(--blanc);cursor:pointer;transition:all var(--hover)}
.f-btn:hover{border-color:var(--roc)}
.f-btn.active{background:var(--roc);color:var(--blanc);border-color:var(--roc)}
.f-clear{margin-left:auto;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.f-clear:hover{color:var(--laiton)}

/* rejeu move-up au filtrage — 1s ease + stagger 200 ms (JS) */
.proj.hide{display:none}
.proj.f-enter{opacity:0;transform:translateY(40px);transition:none!important}
.proj.f-enter-active{opacity:1;transform:none;transition:opacity 1s ease,transform 1s ease!important}

/* ---------- menu mobile — panneau coulissant démo (mobMenuSliding) ---------- */
.menu-back{position:fixed;inset:0;background:#000;z-index:998;opacity:0;visibility:hidden;transition:opacity .3s ease-out 0s,visibility 0s linear .3s}
.menu-back.active{opacity:.7;visibility:visible;transition:opacity .3s ease-in 0s,visibility 0s linear 0s}
.menu-panel{
  position:fixed;left:0;top:0;height:100vh;width:calc(100vw - 45px);max-width:500px;z-index:999;
  background:var(--blanc);color:var(--roc);transform:translateX(-100%);
}
.menu-panel.animation{transition:transform .2s ease-out}
.menu-panel.opened{transform:translateX(0)}
.panel-scroll{height:100%;overflow-y:auto;padding:0}
.panel-close{
  position:absolute;top:10px;right:-35px;width:25px;height:25px;background:none;border:0;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .2s ease-out;
}
.menu-panel.opened .panel-close{opacity:1;visibility:visible}
.panel-close::before,.panel-close::after{content:"";position:absolute;left:3px;right:3px;top:13px;height:1px;background:var(--blanc)}
.panel-close::before{transform:rotate(45deg)}
.panel-close::after{transform:rotate(-45deg)}
/* recherche TheGem : hairline + loupe */
.panel-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ligne);padding:20px 22px}
.panel-search input{flex:1;background:transparent;border:0;color:var(--roc);font-family:var(--sans);font-size:17px;outline:none}
.panel-search input::placeholder{color:var(--gris)}
.panel-search button{background:none;border:0;color:var(--roc);cursor:pointer;display:inline-flex;padding:4px}
/* entrées 24px filetées pleine largeur, actif en accent (Home rouge TheGem) */
.om-nav{display:flex;flex-direction:column}
.om-nav a{
  font-weight:500;font-size:24px;letter-spacing:0;line-height:1.2;color:var(--roc);
  padding:28px 22px;border-bottom:1px solid var(--ligne);transition:color var(--hover);
}
.om-nav a:hover,.om-nav a.active{color:var(--laiton)}
/* bannière image + rangées de services sombres + contact (structure TheGem) */
.pm-banner{position:relative;min-height:190px;overflow:hidden;background:var(--roc)}
.pm-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.pm-banner-txt{position:relative;z-index:2;color:var(--blanc);font-size:24px;font-weight:500;line-height:1.3;padding:26px 22px}
.pm-banner-txt .em{color:var(--laterite-bright)}
.pm-svc a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--roc);color:var(--blanc);font-size:17px;font-weight:500;padding:17px 22px;border-bottom:1px solid rgba(255,255,255,.09);transition:color var(--hover)}
.pm-svc a:hover{color:var(--laiton-soft)}
.pm-svc i{font-style:normal}
.pm-contact{padding:26px 22px 44px;color:var(--gris);font-size:16px;line-height:1.7}
.pm-contact a{color:var(--laiton)}
body.menu-open{overflow:hidden}
@media(min-width:980px){.menu-panel,.menu-back{display:none}}   /* hors tab-order en desktop (démo .desktop-view) */

/* ---------- compteurs odomètre — rouleaux, transition 2s ease (odometer.js) ---------- */
.count{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.odo-d{height:1em}
.odo-r{display:flex;flex-direction:column;transition:transform 2s ease}
.count.run .odo-r{transform:translateY(calc(-100% + 1em))}
.odo-r i{font-style:normal;height:1em;line-height:1;display:block}

/* ---------- totop — 50px, fade pur .3s linear, seuil 0, opacité .5 (démo) ---------- */
.totop{
  position:fixed;right:40px;bottom:56px;z-index:300;width:50px;height:50px;border:0;
  background:var(--laiton);color:var(--blanc);font-size:24px;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .3s linear,visibility .3s linear;
}
.totop.show{opacity:.5;visibility:visible}
.totop.show:hover{opacity:1;background:var(--laiton-soft)}
@media(max-width:768px){.totop{right:0}}

/* ---------- v0.6 : curseur réticule V0 (domroc.css l.241-244, verbatim) ---------- */
.dom-cursor{ --reticule: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20stroke='%230F1E2A'%20stroke-width='2'%3E%3Cline%20x1='12'%20y1='1'%20x2='12'%20y2='8'/%3E%3Cline%20x1='12'%20y1='16'%20x2='12'%20y2='23'/%3E%3Cline%20x1='1'%20y1='12'%20x2='8'%20y2='12'/%3E%3Cline%20x1='16'%20y1='12'%20x2='23'%20y2='12'/%3E%3C/g%3E%3Crect%20x='9.5'%20y='9.5'%20width='5'%20height='5'%20fill='%239E4A2B'%20stroke='%230F1E2A'%20stroke-width='1'/%3E%3C/svg%3E") 12 12, crosshair; --reticule-hover: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='4.5'%20y='4.5'%20width='15'%20height='15'%20fill='none'%20stroke='%230F1E2A'%20stroke-width='1.5'/%3E%3Cg%20stroke='%230F1E2A'%20stroke-width='2'%3E%3Cline%20x1='12'%20y1='1'%20x2='12'%20y2='6'/%3E%3Cline%20x1='12'%20y1='18'%20x2='12'%20y2='23'/%3E%3Cline%20x1='1'%20y1='12'%20x2='6'%20y2='12'/%3E%3Cline%20x1='18'%20y1='12'%20x2='23'%20y2='12'/%3E%3C/g%3E%3Crect%20x='9'%20y='9'%20width='6'%20height='6'%20fill='%239E4A2B'%20stroke='%230F1E2A'%20stroke-width='1'/%3E%3C/svg%3E") 12 12, pointer; }
.dom-cursor,.dom-cursor *{cursor:var(--reticule)}
.dom-cursor a,.dom-cursor button,.dom-cursor [role="button"],.dom-cursor .btn,.dom-cursor label,.dom-cursor summary{cursor:var(--reticule-hover)}
.dom-cursor input,.dom-cursor textarea,.dom-cursor select,.dom-cursor [contenteditable="true"]{cursor:text}

/* ---------- v0.5 : Awa — typo Funnel + dégagement ruban/totop.
   Spécificité doublée : la feuille injectée par le widget arrive APRÈS celle-ci dans le head. ---------- */
#awa-root#awa-root{--sans:'Funnel Display',system-ui,sans-serif;--serif:'Funnel Display',Georgia,serif}
#awa-root .awa-launch.awa-launch{bottom:116px;right:18px}
#awa-root .awa-panel.awa-panel{bottom:56px;right:18px;max-height:calc(100vh - 76px)}
body.menu-open #awa-root{display:none}   /* le lanceur ne flotte pas au-dessus du panneau menu ouvert */

/* ============ v0.8 : composants pages intérieures ============ */
/* héros de page intérieure — bande roc compacte, ariane mono, H1 typewriter */
.page-hero{position:relative;background:var(--roc);color:var(--blanc);padding:150px 0 60px;overflow:hidden}
.page-hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 100% at 30% 0%,#000 25%,transparent 75%)}
.page-hero .wrap{position:relative;z-index:2}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-sombre);margin-bottom:22px}
.crumb a:hover{color:var(--blanc)}
.page-hero .eyebrow{color:var(--laterite-bright)}
.page-hero h1{font-size:clamp(34px,5.6vw,72px);line-height:1.05;max-width:24ch;margin-top:14px}
.page-hero h1 .em{color:var(--laterite-bright)}
.page-hero .sub{margin-top:22px;max-width:62ch;color:#C7CFD6;font-size:clamp(17px,1.9vw,20px);line-height:1.55}
.page-hero .sub strong{color:var(--blanc);font-weight:500}
.page-hero .principe{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--laterite-bright);border:1px dashed var(--ligne-sombre);padding:10px 14px}
.page-hero .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.js .page-hero .eyebrow,.js .page-hero .sub,.js .page-hero .crumb,.js .page-hero .principe,.js .page-hero .actions{opacity:0}
body.loaded .page-hero .crumb,body.loaded .page-hero .eyebrow,body.loaded .page-hero .sub{animation:fadeIn 1s ease both}
body.loaded .page-hero .principe{animation:fadeIn 1.25s ease both .2s}
body.loaded .page-hero .actions{animation:fadeIn .75s ease both .2s}
.page-hero h1 .lt{opacity:0}
body.loaded .page-hero h1 .lt{animation:tw 0s linear forwards;animation-delay:calc(var(--i)*30ms)}

/* accordéons — liste filetée, index mono, corps à labels mono */
.acc{border-top:1px solid var(--ligne)}
.acc-item{border-bottom:1px solid var(--ligne)}
.acc-head{display:flex;align-items:baseline;gap:18px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:22px 0;font-family:var(--sans);color:var(--roc)}
.acc-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gris);flex:none;min-width:44px}
.acc-head h3{font-size:clamp(19px,2.3vw,24px);font-weight:500;flex:1;transition:color var(--hover)}
.acc-head .tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton);flex:none}
.acc-head .chev{flex:none;width:34px;height:34px;border:1px solid var(--ligne);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:transform var(--hover),color var(--hover),border-color var(--hover)}
.acc-item.open .acc-head .chev{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}
.acc-head:hover h3{color:var(--laiton)}
.acc-body{display:none;padding:0 0 26px;color:var(--gris);font-size:16.5px;line-height:1.6;max-width:75ch}
.acc-item.open .acc-body{display:block}
.acc-body .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin:16px 0 4px}
.acc-body .lbl:first-child{margin-top:0}
.acc-body .refs{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gris-sombre);line-height:1.8}
.acc-body .gab{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne);padding:6px 10px}
.acc-foot{margin-top:22px}
.acc-foot a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--laiton)}
.acc-foot a:hover{color:var(--laiton-soft)}

/* grille de formules — escalier V0 porté au gabarit TheGem */
.fm{border-top:1px solid var(--ligne)}
.fm-row{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ligne)}
.fm-row .lt2{font-family:var(--mono);font-size:15px;color:var(--laiton);font-weight:500}
.fm-row h3{font-size:clamp(18px,2.1vw,22px);font-weight:500}
.fm-row .fm-p{margin-top:4px;color:var(--gris);font-size:15.5px;line-height:1.55;max-width:64ch}
.fm-row .prix{font-family:var(--mono);font-size:13.5px;color:var(--roc);white-space:nowrap;text-align:right}
.fm-row .prix .ok2{color:var(--ok);font-weight:500}
.fm-row .badge{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne);padding:3px 7px}
.fm-row.hot{background:var(--gris-bg);outline:1px solid var(--ligne);padding-left:18px;padding-right:18px}
.fm-foot{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris);line-height:1.9}
.fm-foot b{color:var(--laiton);font-weight:500}
@media(max-width:640px){.fm-row{grid-template-columns:40px 1fr}.fm-row .prix{grid-column:2;text-align:left;margin-top:8px}}

/* intertitre de phase (mono, filet) */
.ph-int{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:46px 0 6px;padding-bottom:10px;border-bottom:1px solid var(--ligne)}
.ph-int:first-of-type{margin-top:0}

/* rangées statiques (escalier séquestre, déroulé, frise parcours) */
.rows{border-top:1px solid var(--ligne)}
.rows .r{display:grid;gap:6px 18px;padding:20px 0;border-bottom:1px solid var(--ligne);align-items:baseline}
@media(min-width:820px){.rows .r{grid-template-columns:70px 1fr auto}}
.rows .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gris)}
.rows h3{font-size:clamp(18px,2.2vw,23px);font-weight:500}
.rows .r .rp{color:var(--gris);font-size:15.5px;line-height:1.55;max-width:70ch;margin-top:2px}
@media(min-width:820px){.rows .r .rp{grid-column:2}}
.rows .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gris);text-align:right;white-space:nowrap}
.rows .meta b{color:var(--laiton);font-weight:500}
.rows .r.on h3{color:var(--laiton)}
.rows-head{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-sombre);margin-bottom:12px}

/* bande credo / citation du garant */
.credo{background:var(--roc-800);color:var(--blanc);border-top:1px solid var(--ligne-sombre);border-bottom:1px solid var(--ligne-sombre)}
.credo q{display:block;font-size:clamp(22px,3vw,34px);font-weight:500;line-height:1.4;max-width:38ch;quotes:"\00AB\202F" "\202F\00BB"}
.credo q::before,.credo q::after{color:var(--laiton-soft)}
.credo .sig{margin-top:22px;padding-top:16px;border-top:1px solid var(--ligne-sombre);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sombre)}
.credo .fine{margin-top:18px;color:#9FB0BE;font-size:16.5px;line-height:1.6;max-width:72ch}

/* clauses — 3 cellules bordées */
.clauses{display:grid;gap:0;border:1px solid var(--ligne);margin-top:34px}
@media(min-width:760px){.clauses{grid-template-columns:repeat(3,1fr)}}
.clause{padding:22px;border-bottom:1px solid var(--ligne)}
.clause:last-child{border-bottom:0}
@media(min-width:760px){.clause{border-bottom:0;border-right:1px solid var(--ligne)}.clause:last-child{border-right:0}}
.clause b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin-bottom:8px;font-weight:500}
.clause p{color:var(--gris);font-size:15px;line-height:1.55}

/* chips réseau — variantes ×2 et institutionnel */
.net-chip small b{color:var(--laiton);font-weight:500}
.net-chip.inst{background:var(--gris-bg)}

/* le garant — portrait + frise */
.garant-grid{display:grid;gap:40px;margin-top:8px}
@media(min-width:960px){.garant-grid{grid-template-columns:1.15fr .85fr;align-items:start}}
.garant-pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.garant-pic .cap{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.pivot{font-size:clamp(19px,2.3vw,25px);font-weight:500;line-height:1.4;color:var(--roc);max-width:52ch;margin:18px 0 26px}
.pivot .em{color:var(--laterite)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--ligne);padding:6px 10px;color:var(--gris)}
.honnete{margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris);line-height:1.8;border-left:3px solid var(--laiton);padding-left:16px;max-width:85ch}

/* note gabarit générique */
.note-gab{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne);padding:10px 14px;display:inline-block}

@media(prefers-reduced-motion:reduce){
  .js .page-hero .eyebrow,.js .page-hero .sub,.js .page-hero .crumb,.js .page-hero .principe,.js .page-hero .actions{opacity:1}
  .page-hero h1 .lt{opacity:1}
}

/* sélecteur de devise — natif de la page vérifier-un-terrain en V0 (domroc-currency.js) */
.curswitch{display:inline-flex;gap:2px;background:#EDEAE2;border-radius:20px;padding:3px}
.curswitch button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:none;background:none;color:var(--gris);padding:6px 12px;border-radius:16px;cursor:pointer}
.curswitch button.on{background:#fff;color:var(--roc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.usd-note{font-family:var(--mono);font-size:10.5px;color:var(--gris)}
.cur-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* bande compteurs catalogue (operations) */
.stats4{background:var(--roc);color:var(--blanc);border-top:1px solid var(--ligne-sombre);padding:34px 0 46px}
.stats4 .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(min-width:860px){.stats4 .wrap{grid-template-columns:repeat(4,1fr)}}
.stats4 .n{font-size:clamp(40px,5vw,64px);font-weight:500;line-height:1}
.stats4 .l{margin-top:8px;color:#C7CFD6;font-size:14px;line-height:1.45}
/* cartes catalogue : localisation, badge statut, compteur de filtres */
.proj .loc{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gris);margin-top:4px}
.proj .statut{position:absolute;top:16px;right:16px;z-index:4;background:var(--blanc);color:var(--roc);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--ligne)}
.proj .statut.avenir{background:var(--laiton);color:var(--blanc);border-color:var(--laiton)}
.fcount{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gris);margin-left:12px}
/* rangées journal : teaser + méta lecture */
.journal .art .artbody{display:block}
.journal .art .teaser{color:var(--gris);font-size:15px;line-height:1.5;max-width:70ch;margin-top:6px}
.journal .art .rmeta{font-family:var(--mono);font-size:10.5px;color:var(--gris-sombre);letter-spacing:.06em;display:block;margin-top:4px}
/* fond photo optionnel du héros intérieur */
.page-hero .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.14}
/* carte placeholder contact */
.mapph{position:relative;border:1px solid var(--ligne);background:var(--gris-bg);overflow:hidden}
.mapph svg{display:block;width:100%;height:auto}
.mapph .maptag{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);background:rgba(255,255,255,.85);padding:5px 9px}

/* ============ v0.9 : listing immobilier (operations — gabarit Real Estate Listing 02) ============ */
/* panneau de recherche sur héros */
.srch{margin-top:38px;background:var(--blanc);color:var(--roc);padding:22px 22px 20px;box-shadow:0 30px 70px rgba(11,22,31,.45)}
.srch-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--laterite);margin-bottom:14px}
.srch-row{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.srch-row{grid-template-columns:1fr 1fr 1fr auto}}
.srch-row+.srch-row{margin-top:12px}
@media(min-width:760px){.srch-row.adv{grid-template-columns:1fr 1fr 1fr auto}}
.q{display:flex;flex-direction:column;gap:5px}
.q>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.q select{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--roc);border:1px solid var(--ligne);background:var(--blanc);padding:12px 12px;outline:none;cursor:pointer}
.q select:focus-visible{outline:2px solid var(--laterite);outline-offset:2px}
.srch .btn{align-self:end;justify-content:center}
.srch-reset{align-self:end;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:14px 4px}
.srch-reset:hover{color:var(--laiton)}
.srch-note{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-sombre)}
/* cartes listing */
.lp-grid{display:grid;gap:24px}
@media(min-width:640px){.lp-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.lp-grid{grid-template-columns:1fr 1fr 1fr}}
.lp{position:relative;background:var(--blanc);border:1px solid var(--ligne);overflow:hidden}
.lp .ph{aspect-ratio:16/11}
.lp-badge{position:absolute;top:14px;left:14px;z-index:4;background:var(--laterite);color:var(--blanc);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}
.lp-badge.avenir{background:var(--roc)}
.lp-badge.gest{background:var(--roc-700)}
.lp-cat{position:absolute;top:14px;right:14px;z-index:4;background:rgba(11,22,31,.82);color:var(--blanc);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}
.lp-body{padding:20px 22px 18px}
.lp-price{font-size:23px;font-weight:500;letter-spacing:0;line-height:1.2;color:var(--roc)}
.lp-price small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gris);font-weight:400;margin-left:6px}
.lp-body h3{font-size:17px;font-weight:500;letter-spacing:0;margin-top:6px;transition:color var(--hover)}
.lp:hover .lp-body h3{color:var(--laiton)}
.lp-loc{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gris);margin-top:6px}
.lp-loc svg{flex:none}
.lp-feats{display:flex;margin-top:16px;border-top:1px solid var(--ligne);padding-top:12px}
.lp-feats span{flex:1;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--gris);line-height:1.5;border-left:1px solid var(--ligne);padding:0 8px}
.lp-feats span:first-child{border-left:0;padding-left:0}
.lp-feats b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:0;color:var(--roc)}
.lp-feats span svg{display:block;width:15px;height:15px;margin:0 auto 7px;color:var(--laiton)}
.lp .staging{font-size:8.5px}
.results-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}

/* ============ v0.10 : trames About & Blog (Construction 01) ============ */
/* eyebrow crocheté [ … ] du héros intérieur démo */
.bkt{font-family:var(--mono);font-size:12px;letter-spacing:.55em;text-transform:uppercase;color:var(--laiton-soft)}
.bkt::before{content:none}
/* feuille de route — 5 groupes à puces (About) */
.road{display:grid;gap:0;border:1px solid var(--ligne);background:var(--blanc)}
@media(min-width:700px){.road{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.road{grid-template-columns:repeat(5,1fr)}}
.road-g{padding:24px 22px 26px;border-bottom:1px solid var(--ligne)}
@media(min-width:1100px){.road-g{border-bottom:0;border-right:1px solid var(--ligne)}.road-g:last-child{border-right:0}}
.road-g .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--laterite)}
.road-g h3{font-size:19px;font-weight:500;margin-top:8px}
.road-g p{margin-top:6px;color:var(--gris);font-size:13.5px;line-height:1.5}
.road-g ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.road-g li{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--gris);line-height:1.5;padding-left:14px;position:relative}
.road-g li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--laterite)}
/* deux compteurs côte à côte (About) */
.cnt2{display:grid;gap:34px;grid-template-columns:1fr 1fr;max-width:520px}
.cnt2 .n{font-size:clamp(56px,7vw,96px);font-weight:500;line-height:1}
.cnt2 .n sup{font-size:.4em;color:var(--laiton)}
.cnt2 .l{margin-top:8px;color:var(--gris);font-size:15px;line-height:1.45}
/* marquee double bande (About) */
.marquee.rev{animation-direction:reverse;margin-top:12px}
.marquee.rev span.mq-t{color:var(--gris-sombre)}
/* chips recherches fréquentes (Blog) */
.tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid var(--ligne)}
.tagrow .lbl2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.tagchip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1px solid var(--ligne);background:var(--blanc);padding:8px 14px;color:var(--roc);cursor:pointer;transition:all var(--hover)}
.tagchip:hover{border-color:var(--laiton);color:var(--laiton)}
.tagchip.on{background:var(--roc);color:var(--blanc);border-color:var(--roc)}

/* ============ v0.11 : trame Contact (Construction 01) ============ */
/* héros contact 3 colonnes : [ Contact ] · question · note */
.c3{display:grid;gap:28px;align-items:start;margin-top:10px}
@media(min-width:900px){.c3{grid-template-columns:1.15fr 1.15fr .7fr}}
.c3 .bt{font-size:clamp(48px,7vw,92px);font-weight:500;line-height:1;letter-spacing:0}
.c3 .bt .br{color:var(--laiton-soft)}
.c3 .qq{font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.35;color:var(--blanc);max-width:22ch}
.c3 .nt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.8;color:var(--gris-sombre)}
/* bande carte pleine largeur */
.mapband{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);position:relative;background:var(--gris-bg)}
.mapband svg{display:block;width:100%;height:auto}
.mapband .maptag{position:absolute;right:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);background:rgba(255,255,255,.88);padding:5px 9px;pointer-events:none}
.mapband .map-embed{position:relative;width:100%;height:clamp(320px,44vw,470px)}
.mapband .map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.dom-cursor .mapband iframe{cursor:auto}
/* déclaration get-in-touch */
.git{font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.3;max-width:34ch}
/* grille tuiles 2×2 + colonne Calendly */
.ct-grid{display:grid;border:1px solid var(--ligne);background:var(--blanc)}
@media(min-width:980px){.ct-grid{grid-template-columns:1fr 1fr 1.4fr}}
.tiles{display:grid;grid-template-columns:1fr;grid-column:span 1}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr;grid-column:span 2}}
.tile{padding:30px 28px 26px;border-bottom:1px solid var(--ligne)}
@media(min-width:640px){.tile:nth-child(odd){border-right:1px solid var(--ligne)}}
.tile .ic{width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--laiton);margin-bottom:16px}
.tile h3{font-size:19px;font-weight:500}
.tile p{margin-top:8px;color:var(--gris);font-size:15px;line-height:1.6}
.tile .mn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.8;color:var(--gris)}
.tile a{color:var(--laiton)}
.awa-seeds{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.awa-seeds button{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--roc);background:none;border:1px dashed var(--ligne);padding:9px 12px;cursor:pointer;transition:all var(--hover)}
.awa-seeds button:hover{border-color:var(--laiton);color:var(--laiton)}
.cal-col{padding:30px 28px;border-top:1px solid var(--ligne)}
@media(min-width:980px){.cal-col{border-top:0;border-left:1px solid var(--ligne)}}
.cal-col h3{font-size:clamp(21px,2.4vw,26px);font-weight:500}
.cal-col .lead2{margin-top:10px;color:var(--gris);font-size:15.5px;line-height:1.6}
.calendly-inline-widget{margin-top:18px;background:var(--gris-bg)}
.dom-cursor .calendly-inline-widget,.dom-cursor .calendly-inline-widget *{cursor:auto}
.cal-fallback{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--gris);border:1px dashed var(--ligne);padding:12px 14px}
.c3 .bt{white-space:nowrap}

/* ============ v0.12 : héros CLAIR de page intérieure (trame démo) ============ */
.ph-light{background:var(--blanc);color:var(--roc);padding:140px 0 46px}
.ph-light .crumb{color:var(--gris)}
.ph-light .crumb a:hover{color:var(--roc)}
.ph-light-grid{display:grid;gap:24px;align-items:start}
@media(min-width:900px){.ph-light-grid{grid-template-columns:1.7fr .6fr}}
.ph-light .bt{font-size:clamp(38px,6.2vw,84px);font-weight:500;line-height:1.05;white-space:nowrap}
.ph-light .bt .br{color:var(--laiton)}
.ph-light .nt{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.8;color:var(--gris);padding-top:16px}
.ph-light .statement{font-size:clamp(24px,3.2vw,40px);font-weight:500;line-height:1.25;max-width:32ch;margin-top:28px}
.ph-light .statement .em{color:var(--laterite)}
.ph-light .sub2{margin-top:16px;color:var(--gris);font-size:clamp(16px,1.8vw,19px);line-height:1.6;max-width:62ch}
.ph-light .sub2 strong{color:var(--roc);font-weight:500}
.ph-light .principe2{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--laterite);border:1px dashed var(--ligne);padding:10px 14px}
.ph-img{border-top:1px solid var(--ligne)}
.ph-img img,.ph-img video{display:block;width:100%;height:min(46vh,430px);object-fit:cover}
/* section à quadrillage clair, générique (fond blanc, lignes encre discrètes, fondu haut/bas) */
.grid-sec{position:relative;overflow:hidden}
.grid-sec > .grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(15,30,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,30,42,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);pointer-events:none}
.grid-sec > .wrap{position:relative;z-index:1}
/* héros légal : image d'arrière-plan DERRIÈRE le titre (section claire, texte lisible) */
.ph-light.ph-light--media{position:relative;overflow:hidden}
.ph-light.ph-light--media .ph-lbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.17;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.ph-light.ph-light--media .wrap{position:relative;z-index:1}
/* header encre sur héros clair */
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar){color:var(--roc);border-bottom:1px solid var(--ligne)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .nav-links a{color:var(--roc)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .nav-links a:hover,body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .nav-links a.active{color:var(--laiton)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .brand{color:var(--roc);--lg-lat:var(--laterite)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .burger span{background:var(--roc)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .priv-link{color:var(--gris)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .priv-link:hover{color:var(--roc)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .lang{color:var(--gris)}
body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .lang button.on,body:has(.ph-light) header.site:not(.sticky-bar),body:has(.e404) header.site:not(.sticky-bar) .lang button:hover{color:var(--roc)}
/* entrées du héros clair */
.js .ph-light .crumb,.js .ph-light .nt,.js .ph-light .statement,.js .ph-light .sub2,.js .ph-light .principe2{opacity:0}
body.loaded .ph-light .crumb,body.loaded .ph-light .nt,body.loaded .ph-light .statement,body.loaded .ph-light .sub2{animation:fadeIn 1s ease both}
body.loaded .ph-light .principe2{animation:fadeIn 1.25s ease both .2s}
.ph-light h1 .lt{opacity:0}
body.loaded .ph-light h1 .lt{animation:tw 0s linear forwards;animation-delay:calc(var(--i)*30ms)}
@media(prefers-reduced-motion:reduce){
  .js .ph-light .crumb,.js .ph-light .nt,.js .ph-light .statement,.js .ph-light .sub2,.js .ph-light .principe2{opacity:1}
  .ph-light h1 .lt{opacity:1}
}

/* ============ v0.13 : cartes services image (trame /services/ démo) ============ */
.svcards{display:grid;border:1px solid var(--ligne);background:var(--blanc)}
@media(min-width:760px){.svcards{grid-template-columns:1fr 1fr}}
.svcard{display:block;padding:26px 26px 24px;border-bottom:1px solid var(--ligne)}
@media(min-width:760px){.svcard:nth-child(odd){border-right:1px solid var(--ligne)}}
.svcard .ph{aspect-ratio:16/9}
.svcard-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.svcard h3{font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:0;transition:color var(--hover)}
.svcard .go2{flex:none;width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--roc);transition:transform var(--hover),color var(--hover),border-color var(--hover)}
.svcard:hover h3{color:var(--laiton)}
.svcard:hover .go2{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}
.svcard .mn2{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
@media(min-width:860px){.pb-row.novis{grid-template-columns:86px 1fr auto}}

/* ============ bandes-liens « trois portes » (pb-*) — bloc manquant depuis la généralisation ============ */
.portes{border-bottom:1px solid var(--ligne)}
.pb-rows{border-top:1px solid var(--ligne)}
.pb-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--ligne);position:relative}
@media(min-width:860px){.pb-row{grid-template-columns:86px 190px 1fr auto}}
@media(min-width:860px){.pb-row.novis{grid-template-columns:86px 1fr auto}}
.pb-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gris);text-transform:uppercase}
.pb-num b{display:block;font-family:var(--sans);font-size:18px;font-weight:500;letter-spacing:0;color:var(--roc);margin-top:2px;text-transform:none}
.pb-vis{display:none;width:190px;aspect-ratio:8/5;overflow:hidden;position:relative}
@media(min-width:860px){.pb-vis{display:block}}
.pb-vis img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s ease}
.pb-vis::after{content:"";position:absolute;inset:0;background:rgba(15,30,42,.35);transition:opacity .3s ease}
.pb-row:hover .pb-vis img{filter:none}
.pb-row:hover .pb-vis::after{opacity:0}
.pb-body h3{font-size:clamp(19px,2.2vw,24px);font-weight:500;transition:color var(--hover)}
.pb-row:hover .pb-body h3{color:var(--laiton)}
.pb-body p{margin-top:6px;color:var(--gris);font-size:16px;line-height:1.55;max-width:60ch}
.pb-body .cap{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-sombre)}
.pb-go{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;font-size:18px;transition:transform var(--hover),color var(--hover),border-color var(--hover)}
.pb-row:hover .pb-go{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}
.pb-row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--laiton);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.pb-row:hover::after{transform:scaleX(1)}

/* ============ v0.14 : fiches opération (trame project detail TheGem — Cityscape Residences) ============ */
/* héros clair fiche : colonne méta droite (Date/Client/Budget démo → Statut/Localisation/Prix/Surface) */
.pd-meta{display:flex;flex-direction:column;gap:13px;padding-top:18px}
@media(min-width:900px){.pd-meta{border-left:1px solid var(--ligne);padding-left:28px}}
.pd-mi{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.pd-mi svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--laterite)}
.pd-mi b{font-weight:600;color:var(--roc);white-space:nowrap}
.pd-mi span{color:var(--gris)}
.js .pd-meta{opacity:0}
body.loaded .pd-meta{animation:fadeIn 1s ease both .15s}
.ph-light .bt.pd-bt{white-space:normal;font-size:clamp(34px,5.4vw,70px);line-height:1.07}

/* galerie fiche : 3 col ratio 3/2, gap 42 bureau (démo), lightbox maison zéro lib */
.pd-gal{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:860px){.pd-gal{grid-template-columns:repeat(3,1fr);gap:42px}}
.pd-gal a{display:block;overflow:hidden;cursor:zoom-in}
.pd-gal img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.15);transition:filter .3s ease}
.pd-gal a:hover img{filter:none}
.pd-gal .cap{display:block;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.pd-lb{position:fixed;inset:0;z-index:400;margin:0;background:rgba(12,13,15,.93);display:none;align-items:center;justify-content:center;padding:4vh 4vw 7vh;cursor:zoom-out}
.pd-lb.on{display:flex}
.pd-lb img{max-width:100%;max-height:100%;display:block}
.pd-lb figcaption{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* opérations similaires : tuiles pleine largeur 2-up (section « Recent projects » démo, 50 % × ~480px) */
.pd-rel{overflow:hidden}
.pd-rel-grid{display:grid;grid-template-columns:1fr}
@media(min-width:800px){.pd-rel-grid{grid-template-columns:1fr 1fr}}
.pd-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(62vh,480px);padding:42px clamp(22px,4.5vw,60px) 44px;color:var(--blanc);overflow:hidden}
.pd-tile .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pd-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,19,.14) 22%,rgba(15,16,19,.8) 100%);z-index:1}
.pd-tile .in{position:relative;z-index:2;max-width:60ch}
.pd-tile .chip{display:inline-block;background:var(--laterite);color:var(--blanc);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;margin-bottom:14px}
.pd-tile .chip.avenir{background:var(--roc)}
.pd-tile h3{font-size:clamp(26px,3.4vw,44px);font-weight:500;line-height:1.12;letter-spacing:0;transition:color var(--hover)}
.pd-tile p{margin-top:10px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.55;max-width:52ch}
.pd-tile .mn{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.pd-tile .go2{position:absolute;top:26px;right:26px;z-index:2;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--blanc);transition:transform var(--hover),color var(--hover),border-color var(--hover)}
.pd-tile:hover h3{color:var(--laiton-soft)}
.pd-tile:hover .go2{transform:rotate(45deg);color:var(--laiton-soft);border-color:var(--laiton-soft)}
@media(prefers-reduced-motion:reduce){
  .js .pd-meta{opacity:1}
}
/* mobile : un libellé de bouton long ne doit jamais élargir la colonne du CTA */
@media(max-width:560px){
  .cta-final .actions .btn,.ph-light .actions .btn{white-space:normal;text-align:left;line-height:1.4}
}

/* ============ v0.15 : timeline échéancier séquestre (section Modalités des fiches) ============ */
.pd-tl{margin-top:34px;border-top:1px solid var(--ligne);padding-top:28px}
.pd-tl ol{list-style:none;margin:0;padding:0;position:relative}
.pd-tl ol::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--ligne)}
.pd-tl li{position:relative;padding:0 0 26px 30px}
.pd-tl li:last-child{padding-bottom:4px}
.pd-tl li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--laterite);border:2px solid var(--laterite);box-shadow:0 0 0 3px var(--blanc)}
.pd-tl li.wait::before{background:var(--blanc);border-color:var(--gris)}
.pd-tl h4{font-size:17.5px;font-weight:500;letter-spacing:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pd-tl h4 .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gris);flex:none}
.pd-tl h4 .st{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--laterite);border:1px solid currentColor;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pd-tl li.wait h4 .st{color:var(--gris)}
.pd-tl p{margin-top:5px;color:var(--gris);font-size:15.5px;line-height:1.55;max-width:58ch}
.pd-tl .tl-note{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne);padding:6px 10px}

/* ============ v0.16 : fiches — prix en évidence + barre d'icônes + carte garant (trame property detail démo) ============ */
.pd-price{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 13px}
.pd-price .pd-from{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.pd-price .pd-amt{font-family:var(--sans);font-size:clamp(34px,4.8vw,58px);font-weight:600;letter-spacing:-.01em;color:var(--roc);line-height:1.02}
.pd-price .pd-amt .price-cur{color:var(--laiton);font-weight:500;font-size:.82em}
.pd-price small{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.05em;color:var(--gris);line-height:1.5}
.pd-cur{margin-top:16px}
.pd-bar{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:var(--blanc)}
.pd-bar .wrap{display:grid;grid-template-columns:repeat(2,1fr);padding-top:0;padding-bottom:0}
@media(min-width:860px){.pd-bar .wrap{grid-template-columns:repeat(5,1fr)}}
.pd-bi{display:flex;align-items:center;gap:12px;padding:18px 16px;border-left:1px solid var(--ligne);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.pd-bi svg{flex:none;width:20px;height:20px;color:var(--laterite)}
.pd-bi b{display:block;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--roc);letter-spacing:0;text-transform:none;margin-bottom:2px}
@media(max-width:859px){.pd-bi:nth-child(odd){border-left:0}}
@media(min-width:860px){.pd-bi:first-child{border-left:0}}
.agent-band{border-bottom:1px solid var(--ligne-sombre);background:var(--roc-800);color:var(--blanc)}
.agent-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;padding-top:26px;padding-bottom:26px}
.agent-band .pic{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:top;flex:none}
.agent-id h3{font-size:19px;font-weight:500;letter-spacing:0}
.agent-id .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9FB0BE;margin-top:4px}
.agent-id a{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--laiton-soft);border-bottom:1px solid currentColor;padding-bottom:2px}
.agent-meta{display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:#9FB0BE;margin-left:auto}
.agent-meta b{color:var(--blanc);font-weight:500}
.agent-cta{display:flex;gap:12px;flex-wrap:wrap}
.agent-band .btn-ghost-dark{color:var(--blanc);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.agent-band .btn-ghost-dark:hover{background:var(--blanc);color:var(--roc)}
@media(max-width:760px){.agent-meta{margin-left:0}}

/* ============ v0.28 : grille/quadrillage sur les sections à fond sombre (uniformisation) — les héros/.cta-final/.pv-gate ont déjà leur .grid-bg ============ */
.agent-band,.stats4{position:relative;overflow:hidden}
.agent-band::before,.stats4::before,footer::before,.signal::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px}
.agent-band::before,.stats4::before,footer::before{z-index:0}
.signal::before{z-index:1}
.agent-band .wrap,.stats4 .wrap,footer .wrap{position:relative;z-index:1}

/* ============ v0.16 : organigramme réseau (section « Un réseau qui répond en son nom » V0) ============ */
.org{margin-top:10px;text-align:center}
.org-hub{display:inline-flex;flex-direction:column;align-items:center;gap:12px}
.org-hub svg{width:60px;height:60px;display:block}
.org-hub .wm{font-weight:600;font-size:19px;letter-spacing:.16em}
.org-hub .wm b{color:var(--laiton);font-weight:600}
.org-line{width:1px;height:34px;background:var(--ligne);margin:14px auto 24px}
.org-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:0 auto}
.org-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--roc);border:1px solid var(--ligne);background:var(--blanc);padding:9px 13px}
.org-chip::before{content:"";width:8px;height:8px;flex:none;background:var(--gris)}
.org-chip.se{border-color:rgba(158,74,43,.55)}
.org-chip.se::before{background:var(--laiton)}
.org-chip.in::before{background:var(--roc)}
.org-chip.am::before{background:transparent;box-shadow:inset 0 0 0 1px var(--gris)}
.org-chip .x2{font-size:9px;border:1px solid var(--laiton);color:var(--laiton);padding:1px 5px;margin-left:2px}
.org-legend{margin-top:28px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.org-legend span{display:inline-flex;align-items:center;gap:8px}
.org-legend i{width:9px;height:9px;font-style:normal;display:inline-block}
.org-legend .l1 i{background:var(--laiton)}
.org-legend .l2 i{background:var(--roc)}
.org-legend .l3 i{box-shadow:inset 0 0 0 1px var(--gris)}
.org-note{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.7;color:var(--gris);max-width:66ch;margin-left:auto;margin-right:auto}
.org-note b{color:var(--roc)}

/* ============ v0.17 : sceau réticule cadastral à côté des titres (strips + bande règle) ============ */
.seal-ic{width:.5em;height:.5em;flex:none;display:inline-block;vertical-align:.04em;margin-right:.26em}
/* strips : l'icône vit dans une gouttière — les lignes restent alignées entre elles */
.strip-grid{display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,24px)}
.strip-grid .seal-ic{width:clamp(24px,3.4vw,46px);height:auto;margin:clamp(8px,1.3vw,17px) 0 0;vertical-align:baseline}
/* bande règle : même gouttière — le retour de ligne du h2 reste aligné */
.rb-in{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,22px)}
.rb-in .seal-ic{width:clamp(20px,2.2vw,30px);height:auto;margin:clamp(9px,1.2vw,16px) 0 0}

/* ============ v0.21 : bande pré-footer « La règle » = strip fond blanc ============ */
.rule-strip{border-top:1px solid var(--ligne)}

/* ============ v0.24 : page 404 (trame TheGem — gros 404 centré) ============ */
.e404{min-height:64vh;display:flex;align-items:center;text-align:center;padding:90px 0 70px;position:relative;overflow:hidden}
.e404 .wrap{position:relative;z-index:2}
.e404 .big{font-weight:600;font-size:clamp(120px,26vw,320px);line-height:.9;letter-spacing:-.02em;background:linear-gradient(120deg,var(--roc) 0%,var(--laiton) 60%,var(--laiton-soft) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 auto}
.e404 .eyebrow{justify-content:center;color:var(--laterite);margin-bottom:18px}
.e404 h1{font-size:clamp(26px,3.6vw,44px);font-weight:500;letter-spacing:0;line-height:1.12;margin-top:6px}
.e404 h1 .em{color:var(--laterite)}
.e404 p{margin:18px auto 0;max-width:62ch;color:var(--gris);font-size:clamp(16px,1.8vw,19px);line-height:1.6}
.e404 .actions{justify-content:center;margin-top:30px}
.e404 .qlinks{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.e404 .qlinks a{color:var(--gris);border-bottom:1px solid var(--ligne);padding-bottom:2px;transition:color var(--hover),border-color var(--hover)}
.e404 .qlinks a:hover{color:var(--laiton);border-color:var(--laiton)}

/* ============ v0.23 : suivre une opération — étages d'accès + journal de chantier ============ */
/* étages d'accès (Vitrine / Découverte / Client) */
.etg{display:grid;gap:0;border-top:1px solid var(--ligne);margin-top:12px}
@media(min-width:900px){.etg{grid-template-columns:repeat(3,1fr)}}
.etg-card{padding:26px 26px 26px 0;border-bottom:1px solid var(--ligne);position:relative}
@media(min-width:900px){.etg-card{padding:30px 30px 30px 0}.etg-card:not(:last-child){border-right:1px solid var(--ligne);padding-right:30px}}
.etg-card .lv{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.etg-card.now{border-top:2px solid var(--laterite);margin-top:-1px}
.etg-card.now .lv{color:var(--laterite)}
.etg-card h3{font-size:19px;font-weight:500;letter-spacing:0;margin-top:8px}
.etg-card .st{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--laterite);border:1px solid currentColor;padding:3px 9px;border-radius:20px}
.etg-card p{margin-top:12px;color:var(--gris);font-size:15px;line-height:1.6}
/* journal de chantier — timeline datée, typée, géolocalisée */
.jc{border-top:1px solid var(--ligne);margin-top:16px}
.jc-e{display:grid;gap:6px 22px;padding:24px 0;border-bottom:1px solid var(--ligne);position:relative}
@media(min-width:820px){.jc-e{grid-template-columns:130px 1fr auto;align-items:start}}
.jc-e .d{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gris)}
.jc-e .d .ty{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.jc-e.jalon .d .ty{color:var(--laterite)}
.jc-e.meteo .d .ty{color:#9A7B3E}
.jc-e .d .ty{color:var(--gris-sombre)}
.jc-e .bd h3{font-size:clamp(18px,2.1vw,22px);font-weight:500;letter-spacing:0;line-height:1.25}
.jc-e .bd p{margin-top:7px;color:var(--gris);font-size:15.5px;line-height:1.6;max-width:70ch}
.jc-e .geo{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--gris);display:inline-flex;align-items:center;gap:7px}
.jc-e .geo svg{flex:none;width:12px;height:12px;color:var(--laterite)}
.jc-e .pc{align-self:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--laterite);white-space:nowrap;border:1px solid var(--ligne);padding:8px 12px;transition:border-color var(--hover),color var(--hover)}
.jc-e .pc:hover{border-color:var(--laterite);color:var(--laterite-bright)}
/* viabilisation — barres d'avancement */
/* v0.29 : viabilisation en barres « boxed » (trame diagrammes TheGem) */
.vrd{border:1px solid var(--ligne);background:#FAF9F5;padding:4px 22px;margin-top:12px}
.vrd .b{padding:16px 0;border-bottom:1px solid var(--ligne)}
.vrd .b:last-child{border-bottom:0}
.vrd .bh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:500;color:var(--roc)}
.vrd .bh .p{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--laterite);white-space:nowrap}
.vrd .bh .p.z{color:var(--gris-sombre)}
.vrd .tr{height:13px;border-radius:20px;background:var(--pierre-2);margin-top:10px;overflow:hidden}
.vrd .tr.empty{background:repeating-linear-gradient(90deg,var(--pierre) 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px var(--pierre-2)}
.vrd .fl{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--laterite),var(--laterite-bright))}
.vrd .pc{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--laterite);border-bottom:1px solid currentColor;padding-bottom:1px;transition:color var(--hover)}
.vrd .pc:hover{color:var(--laterite-bright)}
/* donut de composition de la dataroom (round-chart TheGem) */
/* cercles-compteurs (round-chart TheGem) — arc décoratif + compteur au centre ; le nombre est un COMPTE, pas un % */
.stat-ring{display:flex;flex-direction:column;align-items:center;text-align:center}
.stat-ring .ring{position:relative;width:clamp(116px,13vw,150px);aspect-ratio:1}
.stat-ring .ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.stat-ring .ring circle{fill:none;stroke-width:3.4}
.stat-ring .ring .bg{stroke:var(--ligne)}
.stat-ring .ring .arc{stroke:var(--laiton);stroke-linecap:round;stroke-dasharray:76 100}
.stat-ring.zero .ring .arc{stroke-dasharray:0 100}
.stat-ring .ctr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.stat-ring .ctr .n{font-size:clamp(34px,4.4vw,50px)!important;font-weight:600;line-height:1}
.stat-ring .ctr .n sup{font-size:.42em;color:var(--laiton);vertical-align:super}
.stat-ring .l{margin-top:16px;max-width:24ch}
.stats4 .stat-ring .ring .bg{stroke:rgba(255,255,255,.15)}
.stats4 .stat-ring .ring .arc{stroke:var(--laiton-soft)}
.stats4 .stat-ring.zero .ring .arc{stroke:rgba(255,255,255,.25)}
.dr-donut{display:flex;align-items:center;gap:24px;border:1px solid var(--ligne);background:#FAF9F5;padding:18px 22px;margin-bottom:8px}
.dr-donut .donut{width:108px;height:108px;flex:none}
.dr-donut .dbg{stroke:var(--pierre-2)}
.dr-donut .seg.s1{stroke:var(--laiton)}
.dr-donut .seg.s2{stroke:var(--laiton)}
.dr-donut .seg.s3{stroke:var(--roc-700)}
.dr-donut .dn{text-anchor:middle;font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--roc)}
.dr-leg{flex:1;min-width:150px}
.dr-leg>.eyebrow{display:block;margin-bottom:10px}
.dr-leg .row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px;color:var(--roc)}
.dr-leg .row b{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--gris);font-weight:500}
.dr-leg .row i{width:11px;height:11px;border-radius:2px;flex:none}
.dr-leg .row i.s1{background:var(--laiton)}
.dr-leg .row i.s2{background:var(--laiton)}
.dr-leg .row i.s3{background:var(--roc-700)}
.dr-donut .seg.charges{stroke:var(--gris-sombre)}
.dr-donut .dn.sm{font-size:7.5px}
.dr-donut .dsub{text-anchor:middle;font-family:var(--mono);font-size:2.7px;letter-spacing:.08em;fill:var(--gris);text-transform:uppercase}
.dr-leg .row i.charges{background:var(--gris-sombre)}
.dr-leg .cap{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;line-height:1.6;color:var(--gris)}
.art-body .dr-donut{margin:26px 0}
@media(max-width:460px){.dr-donut{flex-direction:column;align-items:flex-start}}
/* dataroom — groupes de pièces */
.dr-group{border-top:1px solid var(--ligne);padding:16px 0}
.dr-group>.g{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.dr-group a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:15px;color:var(--roc);border-bottom:1px dashed var(--ligne);transition:color var(--hover)}
.dr-group a:last-child{border-bottom:0}
.dr-group a:hover{color:var(--laiton)}
.dr-group a .o{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--laiton);flex:none}

/* ============ v0.22 : journal — articles à la une (trame Blog démo, cartes image) ============ */
.jf-grid{display:grid;gap:34px;margin-top:6px}
@media(min-width:760px){.jf-grid{grid-template-columns:1fr 1fr;gap:42px}}
.jf-card{display:block}
.jf-card .im{aspect-ratio:16/10;overflow:hidden;background:var(--gris-bg)}
.jf-card .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12);transition:filter .45s ease,transform .45s ease;display:block}
.jf-card:hover .im img{filter:none;transform:scale(1.03)}
.jf-card .meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris)}
.jf-card .rr{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:8px}
.jf-card h3{font-size:clamp(20px,2.3vw,27px);font-weight:500;letter-spacing:0;line-height:1.2;transition:color var(--hover)}
.jf-card:hover h3{color:var(--laiton)}
.jf-card .go2{flex:none;width:42px;height:42px;border:1px solid var(--ligne);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--roc);transition:transform var(--hover),color var(--hover),border-color var(--hover)}
.jf-card:hover .go2{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}
.jf-card .cat{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton)}
.jf-hero{margin-top:42px}

/* ============ v0.20 : frise horizontale « Le déroulé » (stepper — trame ancien site) ============ */
.pr-flow{display:grid;gap:26px 0;margin-top:14px}
@media(min-width:860px){.pr-flow{grid-template-columns:repeat(7,1fr);gap:0}}
.pr-step{position:relative;padding:0 8px}
.pr-node{position:relative;display:flex;justify-content:flex-start;padding:16px 0;height:72px}
@media(min-width:860px){.pr-node{justify-content:center}}
.pr-num{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ligne);background:var(--blanc);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--gris);position:relative;z-index:2;flex:none}
.pr-step.key .pr-num{border-color:var(--laterite);color:var(--laterite)}
/* rail : connecteur horizontal entre pastilles (bureau) */
@media(min-width:860px){
  .pr-step:not(:first-child) .pr-node::before{content:"";position:absolute;top:50%;right:50%;width:100%;height:1.5px;background:var(--ligne);z-index:1;transform:translateY(-.75px)}
  .pr-step.key:not(:first-child) .pr-node::before{background:var(--laterite);opacity:.5}
}
.pr-step h4{font-size:17px;font-weight:500;letter-spacing:0;line-height:1.2}
@media(min-width:860px){.pr-step h4{text-align:center}}
.pr-step .m{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:5px}
@media(min-width:860px){.pr-step .m{text-align:center}}
.pr-step .m b{color:var(--laterite)}
.pr-step .d{margin-top:12px;padding-top:12px;border-top:1px solid var(--ligne);font-size:13.5px;line-height:1.5;color:var(--gris)}
@media(min-width:860px){.pr-step .d{text-align:center}}
/* mobile : rangée pastille-gauche + texte, filet vertical de liaison */
@media(max-width:859px){
  .pr-step{padding:0 0 0 56px}
  .pr-node{position:absolute;left:0;top:0;height:auto;padding:0}
  .pr-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:-26px;width:1.5px;background:var(--ligne)}
}

/* ============ v0.19 : guides quartier (carte V0 conservée + trame TheGem) ============ */
.qmap{border-bottom:1px solid var(--ligne);background:var(--gris-bg)}
.qmap-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--ligne);background:var(--blanc);overflow:hidden}
.qmap-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.qmap-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--gris);margin:10px 0 0}
.q-facts{display:grid;gap:0;border-top:1px solid var(--ligne);margin-top:30px}
@media(min-width:760px){.q-facts{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.q-facts{grid-template-columns:repeat(4,1fr)}}
.q-fact{padding:20px 22px 20px 0;border-bottom:1px solid var(--ligne)}
.q-fact .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.q-fact .v{margin-top:6px;font-size:17px;font-weight:500;line-height:1.35;color:var(--roc)}
.q-tier{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton);border:1px solid currentColor;padding:5px 11px;border-radius:20px}
/* chips de statut honnête (V0) : vérifié / indicatif / à confirmer */
.qz-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0}
.qz-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border:1px solid;border-radius:20px;line-height:1.4}
.qz-tag::before{content:"";width:7px;height:7px;flex:none;background:currentColor;border-radius:50%}
.qz-real{color:#9A7B3E}
.qz-ind{color:var(--gris)}
.qz-tbc{color:var(--laiton);border-style:dashed}
.qz-src{color:var(--gris);border-style:dashed}
.qz-soon{color:var(--laiton)}
.qz-domroc{border-left:3px solid #9A7B3E;background:var(--gris-bg);padding:18px 22px;margin:26px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.qz-domroc .t{font-size:17px;font-weight:500;color:var(--roc)}
.qz-domroc .d{flex:1 1 100%;color:var(--gris);font-size:15.5px;line-height:1.6}
.qz-risk{display:grid;gap:0;border-top:1px solid var(--ligne);margin:22px 0}
@media(min-width:900px){.qz-risk{grid-template-columns:repeat(3,1fr);column-gap:36px}}
.qz-risk .it{padding:18px 0;border-bottom:1px solid var(--ligne)}
.qz-risk .rk{display:flex;align-items:baseline;gap:10px;font-size:17.5px;font-weight:500;color:var(--roc);letter-spacing:0}
.qz-risk .rk .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--laiton);flex:none}
.qz-risk .dt{margin-top:8px;color:var(--gris);font-size:15.5px;line-height:1.6}
.qz-risk .dt b{color:var(--roc);font-weight:500}

/* ============ v0.18 : pages leçons (article de blog trame TheGem) ============ */
.art-wrap{max-width:840px;margin:0 auto}
.art-body h2{font-size:clamp(24px,2.8vw,34px);font-weight:500;letter-spacing:0;line-height:1.2;margin:46px 0 14px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:0;margin:32px 0 10px}
.art-body p{margin:14px 0;font-size:17px;line-height:1.7}
.art-body ul,.art-body ol{margin:14px 0;padding:0;list-style:none;counter-reset:artli}
.art-body ul li,.art-body ol li{padding:7px 0 7px 24px;position:relative;font-size:16.5px;line-height:1.6}
.art-body ul li::before{content:"—";position:absolute;left:0;color:var(--laiton)}
.art-body ol li::before{counter-increment:artli;content:counter(artli,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--laiton);top:11px}
.art-body .callout{margin:26px 0;background:#F6F4EE;border-left:3px solid var(--laiton);padding:18px 22px;font-size:16.5px;line-height:1.65}
.art-body .callout b,.art-body .callout strong{font-weight:600}
.art-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px;line-height:1.5}
.art-body th,.art-body td{border:1px solid var(--ligne);padding:10px 13px;text-align:left;vertical-align:top}
.art-body th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);background:#FAF9F5;font-weight:500}
@media(max-width:700px){.art-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.art-body .refs2{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gris-sombre);line-height:1.8}
.art-next{border-top:1px solid var(--ligne)}
/* rangées « Continuer à apprendre » / guides : même grille que .journal .art (hors scope .journal) */
.art-next .art{display:grid;gap:14px;padding:26px 0;border-top:1px solid var(--ligne);align-items:center;transition:background var(--hover)}
@media(min-width:820px){.art-next .art{grid-template-columns:140px 1fr 180px 44px}}
.art-next .art:last-of-type{border-bottom:1px solid var(--ligne)}
.art-next .art:hover{background:var(--gris-bg)}
.art-next .date{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gris)}
.art-next .date .rmeta{font-family:var(--mono);font-size:10.5px;color:var(--gris-sombre);letter-spacing:.06em;display:block;margin-top:4px}
.art-next h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:0;font-weight:500;transition:color var(--hover)}
.art-next .art:hover h3{color:var(--laiton)}
.art-next .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton)}
.art-next .go{display:none;width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;align-items:center;justify-content:center;font-size:18px;transition:transform var(--hover),color var(--hover),border-color var(--hover)}
@media(min-width:820px){.art-next .go{display:inline-flex}}
.art-next .art:hover .go{transform:rotate(45deg);color:var(--laiton);border-color:var(--laiton)}

/* ============ v0.16 : pont de variables V0 (requis par ../www/domroc-lotissement.css sur les fiches lotissement) ============ */
:root{--pierre:#E2E0D8;--pierre-2:#D3D0C4;--ivoire:#F4F2EC;--laterite-soft:#B5673F;--laiton:#B08A4A;--laiton-soft:#C29A57;--serif:var(--sans);--gris-fin:#615E54}

/* ============ v0.16 : plan de villa + checklist prestations (Amenities démo → postes V0) ============ */
.plan-fig{margin-top:30px;border:1px solid var(--ligne);background:#fff;padding:12px 12px 6px}
.plan-fig img{display:block;width:100%;height:auto}
.plan-fig .label{display:block;margin:10px 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-align:center}
.prest{display:grid;border-top:1px solid var(--ligne);margin-top:30px}
@media(min-width:760px){.prest{grid-template-columns:1fr 1fr;column-gap:42px}}
@media(min-width:1100px){.prest{grid-template-columns:repeat(3,1fr)}}
/* regroupement par statut : 3 colonnes titrées Contrôlé / Standard / Option */
.prest-cols{display:grid;gap:30px;margin-top:30px}
@media(min-width:900px){.prest-cols{grid-template-columns:repeat(3,1fr);gap:42px}}
.prest-col{border-top:2px solid var(--ligne)}
.prest-col.ctl{border-top-color:var(--laterite)}
.prest-col>h4{display:flex;align-items:center;gap:9px;padding:14px 0 2px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:500}
.prest-col.ctl>h4{color:var(--laterite)}
.prest-col>h4 svg{width:15px;height:15px;flex:none}
.prest-col .prest{grid-template-columns:1fr;margin-top:0;border-top:0;column-gap:0}
.prest-col .pi b{font-size:15.5px}
@media(min-width:960px){.values.v3{grid-template-columns:repeat(3,1fr);column-gap:42px}}
.prest .pi{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--ligne)}
.prest .pi svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--laiton)}
.prest .pi.std svg{color:var(--gris)}
.prest .pi.opt svg{color:var(--gris-sombre)}
.prest .pi div{flex:1}
.prest .pi b{font-weight:500;color:var(--roc)}
.prest .pi span{display:block;color:var(--gris);font-size:14.5px;line-height:1.5;margin-top:2px}
.prest .pi .st2{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--laiton);border:1px solid currentColor;padding:2px 7px;align-self:center;white-space:nowrap}
.prest .pi.std .st2{color:var(--gris)}
.prest .pi.opt .st2{color:var(--gris-sombre);border-style:dashed}

/* ============ v0.16 : porte espace privé (adaptation charte de ../www/espace-prive/connexion.html) ============ */
.pv-gate{background:var(--roc-800);color:var(--blanc);position:relative;overflow:hidden}
.pv-gate .pv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:0}
.pv-grid{display:grid;gap:44px;align-items:center;position:relative;z-index:2}
@media(min-width:900px){.pv-grid{grid-template-columns:1.05fr .95fr}}
.pv-intro h1{font-size:clamp(30px,4.4vw,46px);font-weight:500;line-height:1.12;letter-spacing:0}
.pv-intro h1 .em{color:var(--laterite-bright)}
.pv-sub{margin-top:18px;font-size:16px;line-height:1.6;color:#C2CAD1;max-width:44ch}
.pv-list{list-style:none;margin:20px 0 0;padding:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:#AEB7BF}
.pv-list li{padding:5px 0 5px 18px;position:relative}
.pv-list li::before{content:"—";position:absolute;left:0;color:var(--laiton-soft)}
.pv-card{background:var(--blanc);color:var(--roc);position:relative;box-shadow:0 24px 60px rgba(0,0,0,.28);opacity:.7}
.pv-card::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-top:34px solid var(--laiton);border-right:34px solid transparent}
.pv-card-in{padding:26px 28px 24px}
.pv-hd{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ligne);padding-bottom:14px}
.pv-hd .r{color:var(--gris)}
.pv-lock{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:18px;font-weight:500}
.pv-lock svg{width:22px;height:22px;color:var(--laiton);flex:none}
.pv-fld{margin-top:18px}
.pv-fld label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton);margin-bottom:8px}
.pv-fld label b{color:var(--gris);font-weight:400}
.pv-fld input{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:15px;letter-spacing:.04em;padding:13px 14px;border:1px solid var(--ligne);background:#fff;color:var(--roc);border-radius:0;outline:none}
.pv-fld input:focus{border-color:var(--laterite);box-shadow:0 0 0 3px rgba(158,74,43,.12)}
.pv-key{position:relative}
.pv-key svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--gris);pointer-events:none}
.pv-key input{padding-left:36px}
.pv-btn{width:100%;margin-top:22px;padding:15px;background:var(--laterite);color:var(--blanc);font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer;transition:background .2s}
.pv-btn:hover{background:var(--laterite-bright)}
.pv-awa{margin-top:16px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;border:1px solid var(--ligne);color:var(--roc);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:12px;cursor:pointer;transition:border-color .2s}
.pv-awa:hover{border-color:var(--laiton)}
.pv-awa i{width:1em;height:1em;background:var(--laterite);border-radius:2px;flex:none}
.pv-help{margin-top:14px;font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--gris);text-align:center}

/* ============ v0.25 : cartes de formules (trame pricing-table démo → escalier V0) ============ */
:root{--ok:#3E7C59}   /* couleur « Gratuit » / GO — corrige aussi .fm-row .prix .ok2 (var jusque-là indéfinie) */
.pgrid{display:grid;gap:20px;margin-top:44px}
@media(min-width:520px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1160px){.pgrid{grid-template-columns:repeat(5,1fr);gap:16px}}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ligne);padding-top:50px}
.pcard-badge{position:absolute;top:-6px;left:22px;width:90px;height:90px;border-radius:50%;background:var(--roc-800);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(15,30,42,.24),0 0 0 4px #fff,0 0 0 5.5px var(--ligne);z-index:2}
.pcard-badge .code{font-family:var(--mono);font-size:32px;font-weight:500;line-height:1;color:var(--laterite-bright)}
.pcard-badge .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#8A95A0;margin-top:5px}
.pcard.hot .pcard-badge{background:var(--laterite)}
.pcard.hot .pcard-badge .code{color:#fff}
.pcard.hot .pcard-badge .lbl{color:rgba(255,255,255,.72)}
.pcard-head{background:var(--roc-800);color:var(--blanc);padding:24px 20px 20px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end}
.pcard.hot .pcard-head{background:var(--laterite)}
.pcard-head h3{font-size:clamp(16px,1.4vw,19px);font-weight:600;letter-spacing:.01em;line-height:1.14}
.pcard-head .tar{margin-top:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.pcard-price{padding:16px 20px;border-bottom:1px solid var(--ligne)}
.pcard-price .amt{font-size:clamp(16px,1.4vw,19px);font-weight:500;color:var(--roc)}
.pcard-price .amt .ok2{color:var(--ok)}
.pcard-price .price-cur{font-family:var(--mono);font-size:.68em;color:var(--gris);letter-spacing:.02em}
.pcard-price .tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.pcard-price .badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sombre);border:1px dashed var(--ligne);padding:3px 7px}
.pcard-list{list-style:none;margin:0;padding:16px 20px 6px;display:flex;flex-direction:column;gap:11px;flex:1}
.pcard-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--roc)}
.pcard-list li svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--laterite)}
.pcard.hot .pcard-list li svg{color:var(--laterite-bright)}
.pcard-note{padding:0 20px 6px;font-size:12px;line-height:1.45;color:var(--gris)}
.pcard-note::before{content:"— "}
.pcard-cta{padding:14px 20px 22px;margin-top:auto}
.pcard-cta .btn{display:flex;width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.25}

/* ============ v0.26 : pages légales (mentions / confidentialité) — trame article ============ */
.art-body p a,.art-body li a{color:var(--laterite);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-body p a:hover,.art-body li a:hover{color:var(--laterite-bright)}
.art-body .phl{background:rgba(158,74,43,.09);color:var(--laterite);font-family:var(--mono);font-size:.86em;padding:1px 7px;border-radius:2px;letter-spacing:.01em}
.art-body h2 .ln{font-family:var(--mono);font-size:.44em;font-weight:400;color:var(--laiton);letter-spacing:.08em;vertical-align:middle;margin-right:14px}
.legal-toc{margin:28px 0 12px;border:1px solid var(--ligne);padding:22px 26px}
.legal-toc .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:14px}
.legal-toc .toc-links{display:grid;gap:9px 34px}
@media(min-width:620px){.legal-toc .toc-links{grid-template-columns:1fr 1fr}}
.legal-toc a{font-size:15px;color:var(--roc);display:block}
.legal-toc a b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--laiton);margin-right:10px;letter-spacing:.06em}
.legal-toc a:hover{color:var(--laiton)}
.art-body .legal-upd{margin-top:36px;padding-top:16px;border-top:1px solid var(--ligne);font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--gris);line-height:1.7}
/* groupe « Légal » au pied — la barre légale passe en colonne */
.foot-legal{flex-direction:column;align-items:stretch;gap:16px}
.foot-legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px}
.foot-legal-nav .lgl-k{color:var(--laiton);letter-spacing:.14em;text-transform:uppercase}
.foot-legal-nav a{color:#9FB0BE;transition:color var(--hover)}
.foot-legal-nav a:hover{color:var(--blanc)}
.foot-legal-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ v0.31 : espace prive client — en-tete dossier + KPIs + rail d'avancement ============ */
.cl-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-soft);border:1px solid var(--ligne-sombre);padding:6px 12px;border-radius:20px}
.cl-badge svg{width:12px;height:12px;flex:none}
.cl-meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:26px;padding-top:20px;border-top:1px solid var(--ligne-sombre)}
.cl-meta .m{display:flex;flex-direction:column;gap:3px}
.cl-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-sombre)}
.cl-meta .v{font-size:16px;font-weight:500;color:var(--blanc)}
.cl-kpis{margin-top:30px;display:grid;gap:14px}
@media(min-width:760px){.cl-kpis{grid-template-columns:repeat(3,1fr)}}
.cl-kpi{position:relative;background:rgba(11,22,31,.6);border:1px solid var(--ligne-sombre);padding:20px 22px}
.cl-kpi .kk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-sombre)}
.cl-kpi .kv{margin-top:9px;font-size:clamp(20px,2.3vw,25px);font-weight:500;color:var(--blanc);line-height:1.15}
.cl-kpi .km{margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#9FB0BE;line-height:1.6}
.cl-kpi .chip{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px;border:1px solid}
.cl-kpi .chip.ok{color:#7FB48E;border-color:rgba(127,180,142,.6)}
.cl-kpi .chip.run{color:var(--laiton-soft);border-color:var(--laiton-soft)}
.cl-kpi .chip.wait{color:var(--gris-sombre);border-color:var(--gris-sombre)}
/* rail d'avancement global (jalons) */
.cl-rail{margin-top:16px;background:rgba(11,22,31,.5);border:1px solid var(--ligne-sombre);padding:18px 22px}
.cl-rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:13px}
.cl-rail-head .lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-sombre)}
.cl-rail-head .pct{font-size:14px;font-weight:500;color:var(--blanc)}
.cl-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.cl-steps .s{height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.cl-steps .s.done{background:var(--laiton)}
.cl-steps .s.now{background:var(--laiton-soft)}
.cl-rail-cap{margin-top:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#9FB0BE;line-height:1.6}
.cl-rail-cap b{color:var(--blanc);font-weight:500}
/* bandeau bienvenue au-dessus des sections claires */
.cl-hello{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--laiton)}

/* ============ v0.32 : héros légal — image d'arrière-plan MARQUÉE (0.7) + texte CLAIR (héros sombre) ============ */
/* s'ajoute à .ph-light--media (garde position/.ph-lbg/.wrap z-index) ; passe le héros en sombre */
.ph-light.ph-light--dark{background:var(--roc);color:var(--blanc)}
.ph-light.ph-light--dark .ph-lbg{opacity:.7;-webkit-mask-image:none;mask-image:none}
.ph-light.ph-light--dark .crumb{color:#C7CFD6}
.ph-light.ph-light--dark .crumb a:hover{color:#fff}
.ph-light.ph-light--dark .eyebrow{color:var(--laterite-bright)}
.ph-light.ph-light--dark .bt{color:var(--blanc)}
.ph-light.ph-light--dark .bt .br{color:var(--laiton-soft)}
.ph-light.ph-light--dark .nt{color:#C7CFD6}
.ph-light.ph-light--dark .sub2{color:#C7CFD6}
.ph-light.ph-light--dark .sub2 strong{color:var(--blanc)}
.ph-light.ph-light--dark .principe2{color:var(--laterite-bright);border-color:var(--ligne-sombre)}
/* header en BLANC sur ces pages (annule le mode encre déclenché par .ph-light ; surcharge par ordre-source) */
body:has(.ph-light--dark) header.site:not(.sticky-bar){color:var(--blanc);border-bottom-color:var(--ligne-sombre)}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .nav-links a{color:#fff}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .nav-links a:hover,body:has(.ph-light--dark) header.site:not(.sticky-bar) .nav-links a.active{color:var(--laiton-soft)}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .brand{color:#fff;--lg-lat:var(--laterite-bright)}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .burger span{background:#fff}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .priv-link{color:#C7CFD6}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .priv-link:hover{color:#fff}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .lang{color:var(--gris-sombre)}
body:has(.ph-light--dark) header.site:not(.sticky-bar) .lang button.on,body:has(.ph-light--dark) header.site:not(.sticky-bar) .lang button:hover{color:#fff}

/* accessibilité & motion */
:focus-visible{outline:2px solid var(--laterite);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero .eyebrow,.hero-sub,.hero-actions,.hero-stat,.hero-foot,.scroll-down{opacity:1}
  .hero h1 .lt,.strip .lt,.cta-final h2 .lt{opacity:1}
  .fade-io{opacity:1}
  .tl{transform:none}
}