/* ===========================================================
   APP 0.6.6 — Intégration cockpit SF
   - vrai fond local sans fausse interface
   - îlots lisibles
   - mission / progression / rush comme écrans distincts
   - mode clair préservé
   =========================================================== */

/* ---------- Fond panoramique réel ---------- */
body.visual-mode-immersive .lab-ambient{
  position:fixed!important;
  inset:0!important;
  z-index:-3!important;
  opacity:1!important;
  background:
    linear-gradient(180deg,rgba(0,4,10,.16) 0%,rgba(0,5,13,.18) 42%,rgba(0,4,10,.50) 100%),
    url("../img/cockpit-scene-0.6.6.svg") center center / cover no-repeat!important;
}
body.visual-mode-immersive .lab-ambient::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.32!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 1px)!important;
  background-size:100% 4px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.18));
}
body.visual-mode-immersive .lab-ambient::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 42%,transparent 0 42%,rgba(0,3,9,.12) 72%,rgba(0,2,7,.48) 100%)!important;
}

/* La scène reste visible entre les écrans. */
body.visual-mode-immersive main.container{
  width:calc(100% - 1.25rem)!important;
  max-width:1580px!important;
  padding-left:.75rem!important;
  padding-right:.75rem!important;
}

/* Barre de commande un peu plus légère pour laisser respirer le fond. */
body.visual-mode-immersive .lab-navbar{
  background:linear-gradient(180deg,rgba(1,6,14,.92),rgba(2,9,19,.82))!important;
  box-shadow:0 14px 40px rgba(0,0,0,.38),0 1px 0 rgba(var(--hud-accent-rgb),.12)!important;
}

/* ---------- Écrans / îlots ---------- */
body.visual-mode-immersive .card,
body.visual-mode-immersive .hero,
body.visual-mode-immersive .media-frame,
body.visual-mode-immersive .accordion-item{
  background:
    linear-gradient(145deg,rgba(7,20,37,.79),rgba(3,12,25,.68))!important;
  border-color:rgba(var(--hud-accent-rgb),.24)!important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 1px rgba(2,10,20,.18)!important;
  backdrop-filter:blur(18px) saturate(130%);
}

body.visual-mode-immersive .card:hover{
  border-color:rgba(var(--hud-accent-rgb),.31)!important;
}

/* Mission = écran principal supérieur. */
body.visual-mode-immersive .cockpit-mission-screen{
  position:relative;
  padding:1.25rem 1.4rem;
  border:1px solid rgba(var(--hud-accent-rgb),.31);
  border-radius:1rem;
  background:
    radial-gradient(circle at 92% 5%,rgba(var(--hud-accent-rgb),.13),transparent 28%),
    linear-gradient(135deg,rgba(8,24,43,.88),rgba(2,12,25,.70));
  box-shadow:
    0 24px 70px rgba(0,0,0,.32),
    0 0 34px rgba(var(--hud-accent-rgb),.045);
  backdrop-filter:blur(18px) saturate(130%);
  overflow:hidden;
}
body.visual-mode-immersive .cockpit-mission-screen::before{
  content:"";
  position:absolute;
  top:0;right:1.3rem;
  width:11rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--hud-accent),transparent);
  opacity:.72;
}
body.visual-mode-immersive .cockpit-mission-screen::after{
  content:"";
  position:absolute;
  top:.8rem;right:0;
  width:1px;height:4.8rem;
  background:linear-gradient(180deg,transparent,var(--hud-accent),transparent);
  opacity:.48;
}

/* ---------- Projet / rush : vraie composition multi-écrans ---------- */
body.visual-mode-immersive.page-project .cockpit-workspace{
  align-items:start;
}
body.visual-mode-immersive.page-project .cockpit-main{
  min-width:0;
}
body.visual-mode-immersive.page-project .cockpit-side{
  min-width:0;
}
@media (min-width:1200px){
  body.visual-mode-immersive.page-project .cockpit-side{
    position:sticky;
    top:5.75rem;
  }
}

/* En-tête du parcours comme écran de navigation. */
body.visual-mode-immersive.page-project #steps{
  padding:1rem 1rem .9rem;
  border:1px solid rgba(var(--hud-accent-rgb),.20);
  border-radius:.9rem;
  background:linear-gradient(145deg,rgba(5,17,32,.68),rgba(3,11,23,.52));
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}
body.visual-mode-immersive.page-project .guided-step-nav{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.55rem!important;
}
body.visual-mode-immersive.page-project .cockpit-step-chip{
  display:flex!important;
  justify-content:center;
  align-items:center;
  min-height:2.5rem;
  border:1px solid rgba(154,209,231,.13);
  border-radius:.7rem!important;
  white-space:normal;
  text-align:center;
  line-height:1.15;
  box-shadow:inset 0 0 18px rgba(0,0,0,.10);
}
body.visual-mode-immersive.page-project .cockpit-step-chip.text-bg-primary{
  border-color:rgba(var(--hud-accent-rgb),.66)!important;
  box-shadow:0 0 24px rgba(var(--hud-accent-rgb),.11),inset 0 0 20px rgba(var(--hud-accent-rgb),.07);
}
@media (max-width:900px){
  body.visual-mode-immersive.page-project .guided-step-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Étape active = écran de travail principal. */
body.visual-mode-immersive.page-project .step-card{
  border-radius:1rem!important;
}
body.visual-mode-immersive.page-project .step-card.border-primary{
  background:
    radial-gradient(circle at 100% 0,rgba(var(--hud-accent-rgb),.13),transparent 31%),
    linear-gradient(140deg,rgba(8,26,47,.90),rgba(3,13,27,.77))!important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.40),
    0 0 0 1px rgba(var(--hud-accent-rgb),.16),
    0 0 42px rgba(var(--hud-accent-rgb),.075)!important;
}
body.visual-mode-immersive.page-project .step-card .border-top{
  border-color:rgba(var(--hud-accent-rgb),.12)!important;
}

/* Les champs deviennent vraiment des consoles. */
body.visual-mode-immersive.page-project textarea.form-control{
  min-height:9.5rem;
  background:
    linear-gradient(180deg,rgba(0,8,18,.80),rgba(2,12,24,.72))!important;
}
body.visual-mode-immersive.page-project details{
  border-top:1px solid rgba(var(--hud-accent-rgb),.10);
  padding-top:.65rem;
}

/* ---------- Écran de progression ---------- */
.cockpit-progress-ring{
  --cockpit-progress:0%;
  width:7.5rem;
  aspect-ratio:1;
  margin:.35rem auto .8rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:conic-gradient(var(--hud-accent) var(--cockpit-progress),rgba(255,255,255,.08) 0);
  box-shadow:0 0 30px rgba(var(--hud-accent-rgb),.10);
}
.cockpit-progress-ring::before{
  content:"";
  position:absolute;
  inset:.72rem;
  border-radius:50%;
  background:rgba(3,12,25,.94);
  border:1px solid rgba(var(--hud-accent-rgb),.12);
}
.cockpit-progress-ring > div{
  position:relative;
  z-index:1;
  text-align:center;
}
.cockpit-progress-ring strong{
  display:block;
  font-size:1.65rem;
  line-height:1;
  color:var(--hud-accent)!important;
}
.cockpit-progress-ring span{
  font-size:.7rem;
  color:var(--hud-muted);
}
.cockpit-stat{
  padding:.6rem .4rem;
  text-align:center;
  border-left:1px solid rgba(var(--hud-accent-rgb),.10);
}
.cockpit-stat:first-child{border-left:0}
.cockpit-stat strong{
  display:block;
  color:var(--hud-accent)!important;
  font-size:1.2rem;
}
.cockpit-stat span{
  display:block;
  font-size:.72rem;
  color:var(--hud-muted);
}

/* Écrans satellites à droite : légère variation pour la lecture. */
body.visual-mode-immersive.page-project .cockpit-side > .card{
  background:
    linear-gradient(145deg,rgba(6,19,35,.82),rgba(3,12,24,.72))!important;
}
body.visual-mode-immersive.page-project .cockpit-side h2{
  color:var(--hud-accent)!important;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.055em;
}

/* ---------- Mode clair : conserver l'atelier ---------- */
body.visual-mode-sober .cockpit-mission-screen{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
body.visual-mode-sober .cockpit-progress-ring{
  --hud-accent:#159fb2;
  --hud-accent-rgb:21,159,178;
  --hud-muted:#6a7b88;
  background:conic-gradient(#159fb2 var(--cockpit-progress),#e8eff2 0);
}
body.visual-mode-sober .cockpit-progress-ring::before{
  background:#fff;
  border-color:#e3ecef;
}
body.visual-mode-sober .cockpit-stat{
  border-color:#e4ecef;
}

/* ---------- Petits écrans ---------- */
@media (max-width:1199.98px){
  body.visual-mode-immersive .lab-ambient{
    background-position:42% center!important;
  }
}
@media (max-width:767.98px){
  body.visual-mode-immersive .cockpit-mission-screen{
    padding:1rem;
  }
  .cockpit-progress-ring{
    width:6.25rem;
  }
}