/* =====================================================================
   MAB ERP — UPGRADE LAYER (v3)
   Load AFTER style.css.
   • Real photos in assets/img/phases/ are now SHOWN (image-forward phases)
   • ~20% of the page is dark blue (lifecycle, page-heros, .dark-band, 4D)
   • Animated blueprint canvas in every interior page header
   • New 4D construction showcase styling
   • Richer "4D" scene motion helpers
   ===================================================================== */

:root{
  --d-bg-1:#040d22; --d-bg-2:#06183a; --d-bg-3:#0a285f;
  --d-ink:#eaf2ff; --d-soft:#acc4ee; --d-dim:#7f9bcb;
  --d-border:rgba(120,160,230,.18); --d-border-2:rgba(120,160,230,.34);
  --d-card:rgba(12,32,72,.55); --d-card-2:rgba(16,42,96,.55);
}

/* =====================================================================
   1. DARK SECTIONS  (dark-band is dark again → ~20% of every page)
   ===================================================================== */
.dark-band,
.section-dark,
.build4d,
.page-hero.is-dark,
.lifecycle.section-dark{
  background:
    radial-gradient(900px 520px at 84% -10%,rgba(21,101,216,.30),transparent 60%),
    radial-gradient(760px 480px at 6% 110%,rgba(255,184,28,.14),transparent 60%),
    linear-gradient(180deg,var(--d-bg-1),var(--d-bg-2) 55%,var(--d-bg-3));
  border-block:1px solid var(--d-border);
  color:var(--d-soft);
  position:relative;isolation:isolate;
}
/* faint blueprint grid inside dark bands */
.dark-band::before,
.section-dark::before,
.build4d::before,
.lifecycle.section-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,230,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,230,.10) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}

/* text + element inversions inside any dark section */
.dark-band h1,.dark-band h2,.dark-band h3,.dark-band h4,
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,
.build4d h1,.build4d h2,.build4d h3,.build4d h4,
.lifecycle.section-dark h2,.lifecycle.section-dark h3,
.page-hero.is-dark h1{color:#fff}

.dark-band .lead,.section-dark .lead,.build4d .lead,
.lifecycle.section-dark .lead,.page-hero.is-dark .lead{color:var(--d-soft)}

.dark-band p,.section-dark p,.build4d p{color:var(--d-soft)}
.dark-band .breadcrumb,.page-hero.is-dark .breadcrumb{color:var(--d-dim)}
.dark-band .breadcrumb a:hover,.page-hero.is-dark .breadcrumb a:hover{color:var(--amber-300)}

/* cards on dark → glassy */
.dark-band .card,.section-dark .card,.build4d .card{
  background:var(--d-card);border-color:var(--d-border);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7);backdrop-filter:blur(6px);
}
.dark-band .card:hover,.section-dark .card:hover{
  border-color:var(--d-border-2);background:var(--d-card-2);
}
.dark-band .card h4,.section-dark .card h4{color:#fff}
.dark-band .card p,.section-dark .card p{color:var(--d-soft)}

/* checks / ticks on dark */
.dark-band .checks li,.section-dark .checks li{color:var(--d-soft)}
.dark-band .checks li b,.section-dark .checks li b{color:#fff}
.dark-band .checks li svg{color:var(--amber-300)}
.dark-band .ticks li{color:var(--d-soft)}
.dark-band .ticks li b{color:#fff}

/* the data panel (compta télédéclaration) on dark */
.dark-band .panel{background:var(--d-card);border-color:var(--d-border);backdrop-filter:blur(8px)}
.dark-band .panel-head{background:rgba(8,20,44,.6);border-bottom-color:var(--d-border)}
.dark-band .file-row{color:var(--d-soft);border-bottom-color:var(--d-border)}
.dark-band .file-row b{color:#fff}
.dark-band .export-cta{background:rgba(21,101,216,.14);border-color:var(--d-border-2)}
.dark-band .export-cta span{color:var(--amber-300)}
.dark-band .export-cta em{color:var(--d-dim)}
.dark-band .kpi .v{color:#fff}
.dark-band .bar{background:rgba(120,160,230,.18)}

/* =====================================================================
   2. PAGE-HERO  → animated blueprint header on every interior page
   ===================================================================== */
.page-hero{overflow:hidden}
.page-hero.is-dark{padding-top:clamp(9rem,15vw,12rem)}
.page-hero .wrap{position:relative;z-index:2}
.ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-hero.is-dark::after{ /* legibility veil over canvas */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(4,13,34,.15),rgba(4,13,34,.6) 70%);
}
.page-hero.is-dark .eyebrow{color:var(--amber-300)}
.page-hero.is-dark .eyebrow::before{background:var(--amber-300)}

/* =====================================================================
   3. IMAGE-FORWARD PHASES  (assets/img/phases/*.png now visible)
   ===================================================================== */
.lifecycle.section-dark .phase{padding:clamp(2.4rem,5vw,4rem) 0}
.phase-inner{align-items:center}

.phase-media{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--d-border-2);
  background:linear-gradient(160deg,#0a285f,#06183a);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04) inset;
}
.phase-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.08) contrast(1.04);
  transform:scale(1.04);transition:transform 1.2s var(--ease);
}
.phase:hover .phase-photo{transform:scale(1.12)}
.phase-media::after{ /* blue → clear gradient so the inset blueprint reads */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(4,13,34,.78) 0%,rgba(6,24,58,.35) 42%,transparent 70%);
}
.phase:nth-child(even) .phase-media::after{
  background:linear-gradient(245deg,rgba(4,13,34,.78) 0%,rgba(6,24,58,.35) 42%,transparent 70%);
}

/* number badge on the photo */
.phase-badge{
  position:absolute;top:1rem;right:1rem;z-index:3;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;font-weight:700;
  color:#3a2600;background:linear-gradient(180deg,#ffd874,var(--amber-600));
  padding:.45rem .8rem;border-radius:var(--r-pill);box-shadow:var(--glow-amber);
}
.phase-media .tag{color:#cfe0fb;z-index:3}

/* animated blueprint inset (the SVG scene) sits as a glass card over the photo */
.phase-scene{
  position:absolute;
  inset:2%;                 /* 2% padding on all sides */
  margin:auto;             /* centers it */
  z-index:3;
  width:auto;              /* let inset define the size, not width */
  aspect-ratio:auto;       /* fill the box instead of forcing 4/3 */
  overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  /* background:linear-gradient(160deg,#ffffff,#eef5ff); */
}

.phase:nth-child(even) .phase-scene{
  right:auto;
  left:auto;
}

.phase-scene svg{width:100%;height:100%;display:block}

/* phase text inverted (sits on dark lifecycle band) */
.lifecycle.section-dark .phase-num{color:var(--amber-300)}
.lifecycle.section-dark .phase h3{color:#fff}
.lifecycle.section-dark .phase .fr{color:var(--d-dim)}
.lifecycle.section-dark .phase p{color:var(--d-soft)}
.lifecycle.section-dark .phase ul li{
  color:#cfe0fb;background:rgba(21,101,216,.16);border-color:var(--d-border-2);
}
.lifecycle.section-dark .eyebrow{color:var(--amber-300)}
.lifecycle.section-dark .eyebrow::before{background:var(--amber-300)}
.lifecycle.section-dark .lead{color:var(--d-soft)}

@media (max-width:680px){
  .phase-scene{inset:3%}
}

/* =====================================================================
   4. 4D CONSTRUCTION SHOWCASE  (#build4d on the homepage)
   ===================================================================== */
.build4d{padding:clamp(4rem,9vw,7rem) 0}
.build4d .wrap{position:relative;z-index:2}
.build4d .b4-head{text-align:center;max-width:62ch;margin:0 auto clamp(1.8rem,4vw,3rem)}
.build4d .eyebrow{color:var(--amber-300);justify-content:center}
.build4d .eyebrow::before{background:var(--amber-300)}
.b4-stage{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--d-border-2);
  background:radial-gradient(120% 120% at 50% 0%,rgba(21,101,216,.18),transparent 60%),linear-gradient(180deg,#06183a,#040d22);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.85);
  aspect-ratio:16/9;min-height:340px;
}
#build4d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.b4-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  padding:clamp(1rem,3vw,1.8rem);
  background:linear-gradient(0deg,rgba(4,13,34,.85),transparent);
}
.b4-phasecaption{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.7rem);color:#fff;line-height:1.1}
.b4-phasecaption span{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--amber-300);margin-bottom:.35rem}
.b4-progress{flex:none;width:min(42%,320px)}
.b4-progress .pbar{height:8px;border-radius:99px;background:rgba(120,160,230,.22);overflow:hidden}
.b4-progress .pbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue-400),var(--amber-500));transition:width .2s linear}
.b4-progress .plbl{display:flex;justify-content:space-between;margin-top:.5rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--d-dim)}
.b4-steps{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.b4-step{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--d-soft);
  padding:.4rem .85rem;border:1px solid var(--d-border);border-radius:var(--r-pill);background:rgba(12,32,72,.5);transition:.3s}
.b4-step.is-on{color:#3a2600;background:linear-gradient(180deg,#ffd874,var(--amber-600));border-color:transparent;font-weight:700}

/* =====================================================================
   5. TRUST bar nudged toward the dark accent (subtle, keeps balance)
   ===================================================================== */
.trust{background:linear-gradient(180deg,#06183a,#0a285f);border-block:1px solid var(--d-border)}
.trust p{color:var(--d-dim)}
.trust-logos b{color:#cfe0fb;opacity:.92}

/* =====================================================================
   6. "4D" SCENE MOTION (extra helpers; scenes.php uses these too)
   ===================================================================== */
@keyframes sceneRise{0%{transform:translateY(10px);opacity:.2}55%,100%{transform:translateY(0);opacity:1}}
@keyframes sceneSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes sceneSpin{to{transform:rotate(360deg)}}
@keyframes sceneGrow{0%{transform:scaleY(.05)}60%,100%{transform:scaleY(1)}}
@keyframes sceneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.scene svg .rise{animation:sceneRise 3.2s var(--ease) infinite}
.scene svg .swing{transform-box:fill-box;transform-origin:left center;animation:sceneSwing 5s ease-in-out infinite}
.scene svg .spin{transform-box:fill-box;transform-origin:center;animation:sceneSpin 4.5s linear infinite}
.scene svg .grow{transform-box:fill-box;transform-origin:bottom;animation:sceneGrow 3s var(--ease) infinite}
.scene svg .float{animation:sceneFloat 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.scene svg *{animation:none!important}}