/* =========================================================
   EZO FRANCE — "Du terrain nu au bâtiment livré"
   Section pilotée par le défilement : chaque élément du dessin
   reçoit --k (0 → 1) selon sa plage data-r, en étapes.
   ========================================================= */
.bc{position:relative}
.bc-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.bc-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(700px 420px at 72% 48%,color-mix(in srgb,var(--bc-c,var(--orange)) 16%,transparent),transparent 70%),
  linear-gradient(180deg,rgba(11,17,34,.55),rgba(11,17,34,.82));transition:background .8s}
.bc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;padding-top:64px}

/* ---- colonne texte ---- */
.bc-text h2{font-size:clamp(1.9rem,3.6vw,3rem);margin:14px 0 26px;line-height:1.05}
.bc-meter{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.bc-num{font-size:.8rem;letter-spacing:.2em;color:var(--muted-2);white-space:nowrap}
.bc-num b{font-family:var(--serif);font-size:1.6rem;letter-spacing:0;color:var(--text);margin-right:2px}
.bc-bar{flex:1;height:3px;border-radius:3px;background:var(--line-strong);overflow:hidden;max-width:260px}
.bc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--bc-c,var(--orange)));transition:background .6s}
.bc-steps{position:relative;min-height:440px}
.bc-step{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(26px);pointer-events:none;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.bc-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.08s}
.bc-tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.bc-tag::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--c)}
.bc-step h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:10px 0 12px}
.bc-step p{color:var(--muted);max-width:46ch}
.bc-photo{margin-top:22px;max-width:440px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 26px 60px -28px #000;position:relative}
.bc-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:inherit;background:linear-gradient(180deg,transparent 60%,rgba(8,12,24,.35))}
.bc-photo img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0);transform:scale(1.15);transition:clip-path .7s cubic-bezier(.77,0,.18,1),transform 1.4s var(--ease)}
.bc-step.on .bc-photo img{clip-path:inset(0);transform:none;transition-delay:.05s}
.bc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---- colonne dessin ---- */
.bc-visual{position:relative}
.bc-svg{width:100%;height:auto;max-height:calc(100vh - 160px);display:block;overflow:visible}
.bc-list{list-style:none;display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.bc-list button{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:999px;padding:6px 10px;color:var(--muted-2);font:inherit;font-size:.74rem;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.bc-list b{font-family:var(--serif);font-size:.9rem;color:inherit}
.bc-list span{display:none}
.bc-list li.done button{color:var(--muted)}
.bc-list li.on button{color:var(--text);border-color:color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent)}
.bc-list li.on span{display:inline}
.bc-list button:hover{color:var(--text)}

/* ---- moteur d'animation (--k : 0 → 1) ---- */
.bc-svg [data-r]{transform-box:fill-box}
.k-in{opacity:var(--k,0)}
.k-out{opacity:calc(1 - var(--k,0))}
.k-grow{transform-origin:50% 100%;transform:scaleY(var(--k,0))}
.k-drop{transform-origin:50% 0;transform:scaleY(var(--k,0))}
.k-growx{transform-origin:0 50%;transform:scaleX(var(--k,0))}
.k-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,0))}
.k-sink{transform:translateY(calc(var(--k,0) * 40px));opacity:calc(1 - var(--k,0))}
.k-scan{transform:translateX(calc(var(--k,0) * 340px))}
.k-lay{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0)) * -14px))}
.k-slide{opacity:var(--k,0);transform:translateX(calc((1 - var(--k,0)) * 90px))}
.k-leave{transform:translateX(calc(var(--k,0) * 260px));opacity:calc(1 - var(--k,0))}
.k-rise{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0)) * 50px))}

/* boucles discrètes */
.bc-fan{transform-box:fill-box;transform-origin:center;animation:bcSpin 1.6s linear infinite}
.bc-waves path{animation:bcWave 2.2s ease-in-out infinite}
.bc-waves path:nth-child(2){animation-delay:.35s}
.bc-waves path:nth-child(3){animation-delay:.7s}
@keyframes bcSpin{to{transform:rotate(360deg)}}
@keyframes bcWave{0%{transform:translateY(6px);opacity:0}40%{opacity:1}100%{transform:translateY(-14px);opacity:0}}

/* ---- tablette & mobile ---- */
@media(max-width:960px){
  .bc-grid{grid-template-columns:1fr;gap:6px;padding-top:70px;align-content:start;height:100vh}
  .bc-visual{order:-1}
  .bc-svg{max-height:38vh;margin:0 auto}
  .bc-list{display:none}
  .bc-text h2{display:none}
  .bc-text .eyebrow{display:none}
  .bc-meter{margin:6px 0 12px}
  .bc-steps{min-height:330px}
  .bc-step p{font-size:.94rem}
  .bc-photo{max-width:none;aspect-ratio:16/8;margin-top:14px}
  .bc-cta .btn-ghost{display:none}
}
@media(max-height:700px) and (min-width:961px){.bc-photo{aspect-ratio:16/8}}
@media(prefers-reduced-motion:reduce){
  .bc-fan,.bc-waves path{animation:none}
  .bc-step,.bc-photo img{transition:opacity .2s!important;transform:none!important;clip-path:none!important}
}

/* ---- Version 3D (remplace l'illustration quand WebGL est disponible) ---- */
.bc-3d{position:relative;width:100%;height:calc(100vh - 150px);max-height:760px;opacity:0;transition:opacity .9s ease}
.bc-3d.ready{opacity:1}
.bc-3d canvas{display:block;width:100%!important;height:100%!important}
.bc-3d::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;pointer-events:none;background:linear-gradient(transparent,rgba(11,17,34,.55))}
.bc.is-3d .bc-svg{display:none}
.bc.is-3d .bc-grid{grid-template-columns:.72fr 1.28fr}
@media(max-width:960px){.bc-3d{height:42vh}.bc.is-3d .bc-grid{grid-template-columns:1fr}}
.bc-3d{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 58%,transparent 100%)}
.bc-3d::after{display:none}

/* ---- Film photoréaliste du chantier (remplace le dessin) ---- */
.bc-film{position:relative;width:100%;aspect-ratio:1024/572;border-radius:18px;overflow:hidden;background:#0b1122;
  border:1px solid var(--line-strong);box-shadow:0 40px 90px -40px #000,0 0 0 1px rgba(255,255,255,.03) inset}
.bc-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.09);will-change:opacity,transform;transform-origin:55% 60%}
.bc-frame:first-child{opacity:1}
.bc-film-shade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(8,12,24,.45) 100%),
  linear-gradient(180deg,rgba(8,12,24,.15),transparent 25%,transparent 75%,rgba(8,12,24,.35))}
.bc-film-tag{position:absolute;right:12px;bottom:10px;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);
  padding:4px 9px;border-radius:999px;background:rgba(8,12,24,.45);backdrop-filter:blur(4px)}
.bc-grid{grid-template-columns:.75fr 1.25fr}
@media(max-width:960px){.bc-grid{grid-template-columns:1fr}.bc-film{border-radius:14px}}
@media(prefers-reduced-motion:reduce){.bc-frame{transform:none!important}}
.bc-grid{grid-template-columns:.68fr 1.32fr}
@media(min-width:961px){.bc-photo{max-width:360px;aspect-ratio:16/8}}
.bc-photo::before{content:"Chantier EZO";position:absolute;left:10px;top:10px;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:4px 9px;border-radius:999px;background:rgba(238,106,31,.9)}
@media(max-width:960px){.bc-grid{grid-template-columns:1fr}}
.bc-text h2{font-size:clamp(1.8rem,2.7vw,2.5rem)}