/* ==========================================================================
   Construction G — VERSION B « Atelier d'architecte »
   Se charge APRÈS site.css (mêmes jetons, boutons, en-tête, pied de page).
   ========================================================================== */

.vb { --grid-line: rgba(17, 18, 20, .055); }

/* ---------- Indicateur de chapitre dans l'en-tête ---------- */
.chapter {
  display: inline-flex; align-items: baseline; gap: 10px; margin-left: clamp(16px, 3vw, 40px);
  height: 18px; overflow: hidden; white-space: nowrap; opacity: .75;
}
.chapter span { display: inline-block; transition: transform .5s var(--ease-out), opacity .5s; }
.chapter.is-swapping span { transform: translateY(-110%); opacity: 0; }
@media (max-width: 1180px) { .chapter { display: none; } }

/* ---------- Héros : du plan à la réalité ---------- */
.bhero { position: relative; height: 230vh; background: var(--bone); }
.bhero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background-color: var(--bone);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bhero-text {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(40px, 9vh, 96px); width: min(44vw, 640px);
  display: grid; gap: 26px;
  opacity: var(--txt-o, 1); transform: translateX(var(--txt-x, 0));
}
.bhero-text h1 {
  font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: .95; font-weight: 700; letter-spacing: -.035em;
}
.bhero-text h1 em { font-style: normal; color: var(--orange-deep); }
.bhero-text .t-lead { color: var(--muted); max-width: 32ch; }
.bhero-coords { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--header-h) + 28px); display: flex; gap: 28px; color: var(--muted); opacity: var(--txt-o, 1); }

/* La figure fait la taille de l'écran ; on la réduit en transform (aucun calcul de mise en page). */
.bp {
  position: absolute; z-index: 2; left: 0; top: 0; width: 100vw; height: 100vh; height: 100svh; margin: 0;
  transform-origin: 0 0;
  transform: translate(var(--fx, 52vw), var(--fy, 22vh)) scale(var(--fs, .44));
  overflow: hidden; border-radius: calc(var(--fr, 10px) / var(--fs, .44));
  color: var(--orange);
  background: transparent;
}
.bp img, .bp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp img { object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); }
.bp path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1 1; stroke-dashoffset: 1.001; }
.bp .bp-dim { stroke-width: .6; opacity: .75; }
.bp .bp-axis { stroke-width: .5; stroke-dasharray: 3 3; opacity: .55; }
.bp .bp-note { fill: currentColor; font: 500 5.2px/1 var(--f-mono); letter-spacing: .12em; opacity: 0; transition: opacity .6s; }
.bp .bp-bubble { fill: var(--bone); stroke: currentColor; stroke-width: .6; opacity: 0; transition: opacity .6s; }
.bp.is-drawing path { animation: bp-draw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
.bp.is-drawing .bp-note, .bp.is-drawing .bp-bubble { opacity: .9; transition-delay: 1.4s; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
.bp svg { transition: opacity 1.6s ease .2s, color 1.6s ease; }
.bp.is-photo img { opacity: 1; }
.bp.is-photo svg { opacity: var(--svg-o, .55); color: #fff; }
.bp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,20,0) 45%, rgba(17,18,20,.72) 100%); opacity: var(--shade, 0); pointer-events: none; }
.bp-final {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(36px, 8vh, 88px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; color: var(--bone);
  opacity: var(--final-o, 0); transform: translateY(calc((1 - var(--final-o, 0)) * 30px)); pointer-events: none;
}
.bp-final .t-display { font-size: clamp(2.4rem, 7.4vw, 7.6rem); }
.bp-final .t-mono { color: rgba(243, 241, 236, .82); }
.bhero.is-final .bp-final { pointer-events: auto; }
.bhero-cue { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(40px, 9vh, 96px); color: var(--muted); opacity: var(--txt-o, 1); }

/* Sans mouvement / sans JS / mobile : tout est posé, rien n'est épinglé */
.no-motion .bhero, .no-js .bhero { height: auto; }
.no-motion .bhero-stage, .no-js .bhero-stage { position: relative; height: auto; padding: calc(var(--header-h) + 64px) var(--gutter) 64px; display: grid; gap: 40px; }
.no-motion .bhero-text, .no-js .bhero-text, .no-motion .bhero-coords, .no-js .bhero-coords { position: static; width: auto; }
.no-motion .bp, .no-js .bp { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; transform: none; border-radius: var(--r-sm); }
.no-motion .bp img, .no-js .bp img { opacity: 1; }
.no-motion .bp path, .no-js .bp path { stroke-dashoffset: 0; animation: none; }
.no-motion .bp svg, .no-js .bp svg { opacity: .5; color: #fff; }
.no-motion .bp-final, .no-js .bp-final, .no-motion .bhero-cue, .no-js .bhero-cue { display: none; }
@media (max-width: 860px) {
  .bhero { height: auto; }
  .bhero-stage { position: relative; height: auto; padding: calc(var(--header-h) + 40px) var(--gutter) 56px; display: grid; gap: 36px; }
  .bhero-coords { position: static; }
  .bhero-text { position: static; width: auto; transform: none !important; opacity: 1 !important; }
  .bp { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; transform: none !important; border-radius: var(--r-sm); }
  .bp-final, .bhero-cue { display: none; }
}

/* ---------- Manifeste avec images dans le texte ---------- */
.bstate { font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.inl {
  display: inline-block; vertical-align: -.08em; height: .82em; width: 0; margin: 0 .06em;
  border-radius: 999px; overflow: hidden; background: var(--sand);
  transition: width 1.2s var(--ease-out) .35s;
}
.inl img { width: 2.2em; height: 100%; object-fit: cover; display: block; }
.is-in .inl, .no-js .inl, .no-motion .inl { width: 1.9em; }
.bstate-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; margin-top: clamp(40px, 6vw, 80px); }
.bstate-foot .t-lead { max-width: 44ch; }

/* ---------- Cartes empilées (services) ---------- */
.stack {
  --stack-top: calc(var(--header-h) + 20px);
  --stack-step: 18px;
  --stack-gap: 14vh;
  --stack-shrink: .06;
  padding-bottom: 18vh;
}
.stack__card {
  --p: 0;
  position: sticky; top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
  height: min(74vh, 680px); margin-bottom: var(--stack-gap);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: var(--ink); color: var(--bone);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--p) * var(--stack-shrink)));
  will-change: transform;
}
.stack__card:last-child { margin-bottom: 0; }
.stack__card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--p) * .5); pointer-events: none; z-index: 3; }
.stack__card--orange { background: var(--orange); color: var(--ink); }
.stack__card--sand { background: var(--sand); color: var(--ink); }
.stack__card--moss { background: var(--moss); color: var(--bone); }
.stack__text { padding: clamp(24px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.stack__top { display: flex; justify-content: space-between; gap: 16px; }
.stack__num { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; }
.stack__title { font-size: clamp(1.9rem, 3.9vw, 4.4rem); line-height: .92; font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 75; letter-spacing: -.01em; overflow-wrap: normal; }
.stack__desc { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 38ch; opacity: .88; }
.stack__links { display: flex; flex-wrap: wrap; gap: 10px; }
.stack__links a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid currentColor; font-weight: 600; font-size: .92rem; transition: background-color .3s, color .3s, border-color .3s;
}
.stack__links a .arr { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.stack__links a:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.stack__card--orange .stack__links a:hover, .stack__card--sand .stack__links a:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.stack__links a:hover .arr { transform: translateX(4px); }
.stack__media { position: relative; overflow: hidden; }
.stack__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--p) * .08)); }
.stack__media .figcap { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@media (max-width: 860px) {
  .stack { --stack-top: calc(var(--header-h) - 8px); --stack-step: 10px; --stack-gap: 8vh; }
  .stack__card { height: min(78svh, 640px); grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
  .stack__media { grid-row: 1; }
  .stack__text { grid-row: 2; padding: 22px; }
}
.no-motion .stack__card { transform: none; }
.no-motion .stack__card::after { opacity: 0; }

/* ---------- Chiffres à chasse variable ---------- */
.bstats { border-top: 1px solid var(--line-dark); }
.bstat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px; padding-block: clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line-dark); }
.bstat-num {
  font-size: clamp(6rem, 17vw, 17rem); line-height: .78; font-weight: 800; color: var(--orange);
  font-variation-settings: "wdth" var(--w, 62); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.bstat-lbl { font-size: clamp(1.2rem, 2.2vw, 2rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; max-width: 22ch; }
.no-motion .bstat-num { --w: 112; }
@media (max-width: 700px) { .bstat { grid-template-columns: 1fr; } }

/* ---------- Méthode en écran partagé ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.split-media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.split-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); background: var(--sand); }
.split-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease-out), transform 1.6s var(--ease-out); }
.split-frame img.is-current { opacity: 1; transform: none; }
.split-frame img:not(.is-current) { opacity: 0; }
.split-count { display: flex; justify-content: space-between; margin-top: 14px; }
.split-steps { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; }
.split-step { min-height: 72vh; display: grid; align-content: center; gap: 16px; border-top: 1px solid var(--line); padding-block: 48px; transition: opacity .5s; }
.js .split-step:not(.is-active) { opacity: .35; }
.split-step .big {
  font-size: clamp(4rem, 9vw, 9rem); line-height: .8; font-weight: 800; font-variation-settings: "wdth" 125;
  color: transparent; -webkit-text-stroke: 1.5px var(--orange-deep);
  transition: color .6s;
}
.split-step.is-active .big { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
.split-step p { color: var(--muted); max-width: 44ch; font-size: 1.1rem; }
.split-step .inline-ph { display: none; }
@media (max-width: 860px) {
  .split-media { display: none; }
  .split-steps { grid-column: 1 / -1; }
  .split-step { min-height: 0; }
  .js .split-step:not(.is-active) { opacity: 1; }
  .split-step .inline-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); }
  .split-step .inline-ph img { width: 100%; height: 100%; object-fit: cover; }
}
.no-motion .split-step:not(.is-active) { opacity: 1; }

/* ---------- Bento : verdissement + territoire ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: clamp(10px, 1.2vw, 16px); perspective: 1400px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 36px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out);
  transform-style: preserve-3d;
}
.tile.is-tilting { transition: transform .12s linear; }
.tile > * { position: relative; z-index: 2; }
.tile .bg { position: absolute; inset: 0; z-index: 0; }
.tile .bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tile:hover .bg img { transform: scale(1.04); }
.tile .bg::after { content: ""; position: absolute; inset: 0; }
.tile--green { grid-column: span 7; grid-row: span 2; background: var(--moss); color: var(--bone); min-height: 620px; }
.tile--green .bg::after { background: linear-gradient(180deg, rgba(30,42,28,.15) 0%, rgba(30,42,28,.92) 70%); }
.tile--green .label::before { background: var(--lichen); }
.tile--green h2 { font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: .98; letter-spacing: -.03em; }
.tile--green ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tile--green li { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border: 1px solid rgba(185, 204, 155, .6); border-radius: var(--r-pill); color: var(--lichen); }
.tile--region { grid-column: span 5; color: var(--bone); background: var(--ink); min-height: 300px; }
.tile--region .bg::after { background: linear-gradient(180deg, rgba(17,18,20,.1) 0%, rgba(17,18,20,.85) 100%); }
.tile--region h3 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
.tile--region .cities { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; color: rgba(243, 241, 236, .82); }
.tile--lang { grid-column: span 3; background: var(--sand); color: var(--ink); }
.tile--lang .big { font-size: clamp(3rem, 6vw, 6rem); line-height: .85; font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.03em; }
.tile--cta { grid-column: span 2; background: var(--orange); color: var(--ink); }
.tile--cta .go { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; transition: background-color .3s, color .3s, transform .6s var(--ease-out); }
.tile--cta .go svg { width: 20px; height: 20px; }
.tile--cta:hover .go { background: var(--ink); color: var(--orange); transform: rotate(-45deg); }
.tile--cta strong { font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 1000px) {
  .tile--green, .tile--region { grid-column: 1 / -1; grid-row: auto; }
  .tile--green { min-height: 560px; }
  .tile--lang, .tile--cta { grid-column: span 6; }
}

/* ---------- Appel final : emblème en particules ---------- */
.bcta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 40px; align-items: center; }
.bcta-text { grid-column: 1 / span 6; display: grid; gap: 28px; }
.bcta-text h2 { font-size: clamp(2.8rem, 6.6vw, 7rem); line-height: .92; font-weight: 800; letter-spacing: -.035em; }
.plogo { grid-column: 7 / -1; position: relative; height: clamp(320px, 42vw, 620px); }
.plogo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.plogo-hint { position: absolute; right: 0; bottom: -8px; color: var(--muted-dark); }
@media (max-width: 860px) { .bcta-text, .plogo { grid-column: 1 / -1; } .plogo { order: -1; height: 300px; } }

/* ---------- Pastille de comparaison A / B ---------- */
.ab-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 120; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r-pill); background: rgba(17, 18, 20, .88); color: var(--bone);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.ab-switch b { color: var(--orange); font-weight: 500; }
.ab-switch a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .ab-switch { bottom: 82px; left: 50%; transform: translateX(-50%); padding: 6px 12px; font-size: .62rem; white-space: nowrap; } }
@media (max-width: 600px) { .bhero-coords { display: none; } }
@media (hover: none) { .plogo-hint { display: none; } }
.nw { white-space: nowrap; }