/* ============================================================
   Labo Sciences & Tech — APP 0.6.5
   Deux ambiances :
   - visual-mode-immersive = FONCÉ · Cockpit science-fiction
   - visual-mode-sober     = CLAIR · Atelier lumineux

   Le thème foncé privilégie des îlots semi-transparents sur une
   toile sombre et une sensation multi-écrans / HUD scientifique.
   ============================================================ */

/* ---------- variables communes ---------- */
body.visual-mode-immersive{
  color-scheme:dark;
  --hud-accent:#63e6ff;
  --hud-accent-rgb:99,230,255;
  --hud-accent-2:#8896ff;
  --hud-accent-2-rgb:136,150,255;
  --hud-warm:#ffc46b;
  --hud-bg:#020713;
  --hud-bg-2:#06101e;
  --hud-panel:rgba(7,18,34,.72);
  --hud-panel-strong:rgba(8,22,40,.88);
  --hud-panel-soft:rgba(12,28,48,.56);
  --hud-border:rgba(var(--hud-accent-rgb),.24);
  --hud-border-soft:rgba(171,215,235,.13);
  --hud-text:#e9f7ff;
  --hud-muted:#9db6c8;
  --hud-shadow:0 22px 70px rgba(0,0,0,.32),0 0 28px rgba(var(--hud-accent-rgb),.045);

  --bs-body-color:var(--hud-text);
  --bs-body-bg:var(--hud-bg);
  --bs-secondary-color:var(--hud-muted);
  --bs-secondary-bg:#0a1627;
  --bs-tertiary-bg:#0e1b2c;
  --bs-border-color:rgba(155,204,225,.16);
  --bs-link-color:#79eaff;
  --bs-link-hover-color:#b8f4ff;
  --bs-emphasis-color:#fff;
}

/* ---------- accents par univers ---------- */
body.visual-mode-immersive.universe-science{
  --hud-accent:#59e7ff;
  --hud-accent-rgb:89,231,255;
  --hud-accent-2:#778cff;
  --hud-accent-2-rgb:119,140,255;
}
body.visual-mode-immersive.universe-bio{
  --hud-accent:#6ef0b0;
  --hud-accent-rgb:110,240,176;
  --hud-accent-2:#b9e875;
  --hud-accent-2-rgb:185,232,117;
}
body.visual-mode-immersive.universe-languages{
  --hud-accent:#d6a0ff;
  --hud-accent-rgb:214,160,255;
  --hud-accent-2:#ffaf7b;
  --hud-accent-2-rgb:255,175,123;
}
body.visual-mode-immersive.universe-human{
  --hud-accent:#74d9df;
  --hud-accent-rgb:116,217,223;
  --hud-accent-2:#e9b96f;
  --hud-accent-2-rgb:233,185,111;
}
body.visual-mode-immersive.universe-arts{
  --hud-accent:#ff7fc5;
  --hud-accent-rgb:255,127,197;
  --hud-accent-2:#aa8cff;
  --hud-accent-2-rgb:170,140,255;
}
body.visual-mode-immersive.universe-methods{
  --hud-accent:#64e0d3;
  --hud-accent-rgb:100,224,211;
  --hud-accent-2:#8fb7ff;
  --hud-accent-2-rgb:143,183,255;
}

/* ============================================================
   FONCÉ — COCKPIT SF
   ============================================================ */
body.visual-mode-immersive{
  min-height:100vh;
  background:
    radial-gradient(circle at 16% 8%,rgba(var(--hud-accent-rgb),.10),transparent 29rem),
    radial-gradient(circle at 88% 18%,rgba(var(--hud-accent-2-rgb),.09),transparent 34rem),
    linear-gradient(150deg,#01040b 0%,#030a15 46%,#020710 100%)!important;
  color:var(--hud-text);
}

/* Toile HUD fixe : grille + micro-points + halos. */
body.visual-mode-immersive .lab-ambient{
  position:fixed!important;
  inset:0!important;
  z-index:-2!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 10% 12%,rgba(var(--hud-accent-rgb),.14),transparent 26rem),
    radial-gradient(circle at 91% 18%,rgba(var(--hud-accent-2-rgb),.12),transparent 31rem),
    radial-gradient(circle at 72% 92%,rgba(var(--hud-accent-rgb),.055),transparent 28rem),
    linear-gradient(155deg,#020713 0%,#06101d 50%,#020711 100%)!important;
}
body.visual-mode-immersive .lab-ambient::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.30!important;
  filter:none!important;
  background-image:
    radial-gradient(circle,rgba(var(--hud-accent-rgb),.40) 0 1px,transparent 1.25px),
    radial-gradient(circle,rgba(255,255,255,.20) 0 1px,transparent 1.2px)!important;
  background-size:43px 43px,71px 71px!important;
  background-position:0 0,21px 29px!important;
}
body.visual-mode-immersive .lab-ambient::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.22!important;
  background-image:
    linear-gradient(rgba(var(--hud-accent-rgb),.115) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--hud-accent-rgb),.115) 1px,transparent 1px)!important;
  background-size:52px 52px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.18) 78%,transparent);
}

/* Une largeur plus "poste de contrôle" sur écrans larges. */
body.visual-mode-immersive main.container{
  width:calc(100% - 2rem)!important;
  max-width:1480px!important;
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  position:relative;
  z-index:1;
}

/* Navigation : barre de commande dense et légèrement vitrée. */
body.visual-mode-immersive .lab-navbar{
  background:rgba(2,8,18,.88)!important;
  border-bottom:1px solid rgba(var(--hud-accent-rgb),.16);
  box-shadow:0 12px 32px rgba(0,0,0,.28),0 1px 0 rgba(var(--hud-accent-rgb),.04)!important;
  backdrop-filter:blur(18px) saturate(145%);
}
body.visual-mode-immersive .navbar-brand{
  color:#f3fbff!important;
  text-shadow:0 0 22px rgba(var(--hud-accent-rgb),.18);
}
body.visual-mode-immersive .navbar .nav-link{
  color:#b7cddb!important;
}
body.visual-mode-immersive .navbar .nav-link:hover,
body.visual-mode-immersive .navbar .nav-link.active{
  color:#fff!important;
}

/* Bouton thème visible. */
.theme-quick-toggle{
  min-width:2.4rem;
  border-color:rgba(255,255,255,.24)!important;
}
body.visual-mode-immersive .theme-quick-toggle{
  border-color:rgba(var(--hud-accent-rgb),.32)!important;
  color:#dffaff!important;
  box-shadow:inset 0 0 18px rgba(var(--hud-accent-rgb),.035);
}

/* Îlots : véritables "écrans" semi-transparents. */
body.visual-mode-immersive .card,
body.visual-mode-immersive .hero,
body.visual-mode-immersive .media-frame,
body.visual-mode-immersive .accordion-item,
body.visual-mode-immersive .list-group-item,
body.visual-mode-immersive .theory-card{
  color:var(--hud-text)!important;
  background:
    linear-gradient(145deg,rgba(11,27,48,.78),rgba(5,16,31,.68))!important;
  border:1px solid var(--hud-border)!important;
  box-shadow:var(--hud-shadow)!important;
  backdrop-filter:blur(16px) saturate(135%);
}

/* Trait HUD subtil dans l'angle supérieur des écrans. */
body.visual-mode-immersive .card,
body.visual-mode-immersive .hero{
  position:relative;
  overflow:hidden;
}
body.visual-mode-immersive .card::after,
body.visual-mode-immersive .hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  top:0;
  right:0;
  width:5.5rem;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hud-accent));
  opacity:.62;
}
body.visual-mode-immersive .card::before,
body.visual-mode-immersive .hero::before{
  content:"";
  position:absolute;
  pointer-events:none;
  top:0;
  right:0;
  width:1px;
  height:2.8rem;
  background:linear-gradient(180deg,var(--hud-accent),transparent);
  opacity:.42;
}

/* Hero = écran principal. */
body.visual-mode-immersive .hero{
  background:
    radial-gradient(circle at 90% 12%,rgba(var(--hud-accent-rgb),.13),transparent 28%),
    radial-gradient(circle at 4% 100%,rgba(var(--hud-accent-2-rgb),.10),transparent 32%),
    linear-gradient(135deg,rgba(10,27,48,.88),rgba(4,14,28,.76))!important;
  border-color:rgba(var(--hud-accent-rgb),.30)!important;
}

/* Titres, aides, textes secondaires. */
body.visual-mode-immersive h1,
body.visual-mode-immersive h2,
body.visual-mode-immersive h3,
body.visual-mode-immersive h4,
body.visual-mode-immersive h5,
body.visual-mode-immersive h6,
body.visual-mode-immersive .lead,
body.visual-mode-immersive strong{
  color:#f2fbff;
}
body.visual-mode-immersive .text-secondary,
body.visual-mode-immersive .small.text-secondary,
body.visual-mode-immersive small{
  color:var(--hud-muted)!important;
}
body.visual-mode-immersive .small-caps,
body.visual-mode-immersive .kicker{
  color:var(--hud-accent)!important;
  letter-spacing:.075em;
}

/* Les anciennes surfaces pastel deviennent des écrans teintés, pas des blocs clairs. */
body.visual-mode-immersive .bg-light,
body.visual-mode-immersive .bg-soft-blue,
body.visual-mode-immersive .bg-soft-mint,
body.visual-mode-immersive .bg-soft-warm,
body.visual-mode-immersive .bg-soft-purple,
body.visual-mode-immersive .bg-soft-cyan{
  background:rgba(10,27,45,.62)!important;
  color:var(--hud-text)!important;
}
body.visual-mode-immersive .text-bg-light{
  background:rgba(var(--hud-accent-rgb),.10)!important;
  color:#dff9ff!important;
  border:1px solid rgba(var(--hud-accent-rgb),.18);
}

/* Rush : l'étape active ressemble à l'écran de travail principal. */
body.visual-mode-immersive .step-card{
  background:
    radial-gradient(circle at 100% 0,rgba(var(--hud-accent-rgb),.10),transparent 30%),
    linear-gradient(135deg,rgba(10,28,49,.84),rgba(4,15,29,.75))!important;
}
body.visual-mode-immersive .step-card.border-primary,
body.visual-mode-immersive .step-card.is-current{
  border-color:rgba(var(--hud-accent-rgb),.55)!important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(var(--hud-accent-rgb),.13),
    0 0 36px rgba(var(--hud-accent-rgb),.09)!important;
}
body.visual-mode-immersive .step-card.is-done{
  border-color:rgba(103,235,171,.28)!important;
}

/* Formulaires = consoles intégrées. */
body.visual-mode-immersive .form-control,
body.visual-mode-immersive .form-select,
body.visual-mode-immersive textarea,
body.visual-mode-immersive input[type="text"],
body.visual-mode-immersive input[type="search"],
body.visual-mode-immersive input[type="password"],
body.visual-mode-immersive input[type="email"]{
  color:#effbff!important;
  background:rgba(1,9,19,.70)!important;
  border-color:rgba(154,210,231,.20)!important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.14);
}
body.visual-mode-immersive .form-control:focus,
body.visual-mode-immersive .form-select:focus,
body.visual-mode-immersive textarea:focus{
  color:#fff!important;
  background:rgba(2,11,23,.86)!important;
  border-color:rgba(var(--hud-accent-rgb),.62)!important;
  box-shadow:0 0 0 .2rem rgba(var(--hud-accent-rgb),.10),0 0 24px rgba(var(--hud-accent-rgb),.07)!important;
}
body.visual-mode-immersive .form-control::placeholder,
body.visual-mode-immersive textarea::placeholder{
  color:#7190a5!important;
}

/* Tables = écrans de données. */
body.visual-mode-immersive .table{
  --bs-table-color:var(--hud-text);
  --bs-table-bg:transparent;
  --bs-table-border-color:rgba(153,204,225,.13);
  --bs-table-striped-bg:rgba(var(--hud-accent-rgb),.035);
  --bs-table-hover-bg:rgba(var(--hud-accent-rgb),.065);
  color:var(--hud-text)!important;
}
body.visual-mode-immersive .table-responsive{
  border-radius:.8rem;
}

/* Dropdowns, modales, accordéons. */
body.visual-mode-immersive .dropdown-menu,
body.visual-mode-immersive .modal-content,
body.visual-mode-immersive .offcanvas,
body.visual-mode-immersive .popover{
  background:rgba(5,16,30,.96)!important;
  color:var(--hud-text)!important;
  border:1px solid rgba(var(--hud-accent-rgb),.18)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(18px);
}
body.visual-mode-immersive .dropdown-item{
  color:#c9ddea!important;
}
body.visual-mode-immersive .dropdown-item:hover,
body.visual-mode-immersive .dropdown-item:focus{
  color:#fff!important;
  background:rgba(var(--hud-accent-rgb),.09)!important;
}
body.visual-mode-immersive .dropdown-item.active{
  color:#041019!important;
  background:var(--hud-accent)!important;
}
body.visual-mode-immersive .dropdown-divider{
  border-color:rgba(180,219,235,.12)!important;
}

/* Progression et boutons : accents lumineux, sans effet "jeu vidéo criard". */
body.visual-mode-immersive .progress{
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.055);
}
body.visual-mode-immersive .progress-bar{
  background:linear-gradient(90deg,var(--hud-accent),var(--hud-accent-2))!important;
  box-shadow:0 0 16px rgba(var(--hud-accent-rgb),.18);
}
body.visual-mode-immersive .btn-primary{
  --bs-btn-bg:#158da8;
  --bs-btn-border-color:#36bed7;
  --bs-btn-hover-bg:#1ba5c1;
  --bs-btn-hover-border-color:#67e6f7;
  --bs-btn-color:#f5fdff;
}
body.visual-mode-immersive .btn-outline-primary{
  --bs-btn-color:#7beaff;
  --bs-btn-border-color:rgba(var(--hud-accent-rgb),.50);
  --bs-btn-hover-bg:rgba(var(--hud-accent-rgb),.14);
  --bs-btn-hover-border-color:var(--hud-accent);
  --bs-btn-hover-color:#fff;
}
body.visual-mode-immersive .btn-light{
  --bs-btn-bg:rgba(255,255,255,.10);
  --bs-btn-border-color:rgba(255,255,255,.18);
  --bs-btn-color:#effaff;
  --bs-btn-hover-bg:rgba(var(--hud-accent-rgb),.12);
  --bs-btn-hover-color:#fff;
}

/* Alertes : intégrées au cockpit. */
body.visual-mode-immersive .alert{
  background:rgba(10,25,44,.80)!important;
  color:var(--hud-text)!important;
  border-color:rgba(166,210,228,.17)!important;
}
body.visual-mode-immersive .alert-success{
  border-color:rgba(83,225,156,.30)!important;
  box-shadow:inset 3px 0 0 rgba(83,225,156,.65);
}
body.visual-mode-immersive .alert-warning{
  border-color:rgba(255,192,92,.34)!important;
  box-shadow:inset 3px 0 0 rgba(255,192,92,.70);
}
body.visual-mode-immersive .alert-info{
  border-color:rgba(var(--hud-accent-rgb),.34)!important;
  box-shadow:inset 3px 0 0 rgba(var(--hud-accent-rgb),.70);
}

/* Bordures génériques Bootstrap : moins grises, plus "écran". */
body.visual-mode-immersive .border,
body.visual-mode-immersive .border-top,
body.visual-mode-immersive .border-bottom{
  border-color:rgba(158,207,226,.14)!important;
}

/* Footer discret. */
body.visual-mode-immersive footer{
  color:#718a9c!important;
  border-color:rgba(var(--hud-accent-rgb),.10)!important;
}

/* ============================================================
   CLAIR — ATELIER
   L'ancienne palette claire reste la base. On force seulement
   quelques paramètres pour que Bootstrap sache qu'il est en clair.
   ============================================================ */
body.visual-mode-sober{
  color-scheme:light;
  --bs-body-color:#243545;
  --bs-body-bg:#fffaf4;
  --bs-secondary-color:#687888;
  --bs-link-color:#176f86;
  --bs-link-hover-color:#0f586b;
}
body.visual-mode-sober main.container{
  background:transparent!important;
}
body.visual-mode-sober .lab-navbar{
  background:#173247!important;
}
body.visual-mode-sober .theme-quick-toggle{
  color:#fff!important;
}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  body.visual-mode-immersive main.container{
    width:100%!important;
  }
  body.visual-mode-immersive .card,
  body.visual-mode-immersive .hero{
    backdrop-filter:blur(12px) saturate(125%);
  }
}
@media (prefers-reduced-motion:reduce){
  body.visual-mode-immersive *{
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   APP 0.6.6.1 — FIX FOND COCKPIT
   Important : ce bloc est volontairement placé dans theme-0.6.5.css
   car ce fichier est confirmé comme chargé sur le site réel.
   ============================================================ */

/* Le vrai décor SF devient le fond du BODY lui-même.
   Cela évite qu'une ancienne couche claire masque la scène. */
body.visual-mode-immersive{
  background:
    linear-gradient(180deg,rgba(0,4,11,.16) 0%,rgba(0,5,13,.24) 46%,rgba(0,3,9,.60) 100%),
    url("../img/cockpit-scene-0.6.6.svg") center top / cover fixed no-repeat,
    #020713!important;
}

/* La couche historique pastel est la cause du fond gris/beige observé.
   On la retire entièrement en mode foncé. */
body.visual-mode-immersive > .lab-ambient{
  display:none!important;
}

/* Tous les grands conteneurs restent transparents :
   le décor doit être visible ENTRE les écrans. */
body.visual-mode-immersive main.container{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  backdrop-filter:none!important;
}

/* Les écrans deviennent réellement semi-transparents. */
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(8,22,39,.72),rgba(3,12,25,.60))!important;
  border:1px solid rgba(var(--hud-accent-rgb),.24)!important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(16px) saturate(125%);
}

/* Les anciennes classes pastel ne doivent plus rendre les cartes opaques. */
body.visual-mode-immersive .bg-soft-blue,
body.visual-mode-immersive .bg-soft-mint,
body.visual-mode-immersive .bg-soft-warm,
body.visual-mode-immersive .bg-soft-purple,
body.visual-mode-immersive .bg-soft-cyan{
  background:
    linear-gradient(145deg,rgba(8,22,39,.68),rgba(4,14,27,.55))!important;
}

/* ---------- Page Routes : vraie composition cockpit ---------- */
body.visual-mode-immersive.page-routes .routes-cockpit-header{
  position:relative;
  padding:1.2rem 1.35rem;
  margin-bottom:1.5rem!important;
  border:1px solid rgba(var(--hud-accent-rgb),.28);
  border-radius:1rem;
  background:
    radial-gradient(circle at 92% 10%,rgba(var(--hud-accent-rgb),.12),transparent 30%),
    linear-gradient(145deg,rgba(7,21,38,.73),rgba(3,12,24,.57));
  box-shadow:0 22px 62px rgba(0,0,0,.30);
  backdrop-filter:blur(15px) saturate(125%);
  overflow:hidden;
}
body.visual-mode-immersive.page-routes .routes-cockpit-header::after{
  content:"";
  position:absolute;
  right:1.2rem;
  top:0;
  width:10rem;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hud-accent),transparent);
  opacity:.70;
}
body.visual-mode-immersive.page-routes .routes-cockpit-header h1{
  color:#f4fbff!important;
  text-shadow:0 0 24px rgba(var(--hud-accent-rgb),.10);
}
body.visual-mode-immersive.page-routes .routes-cockpit-header .text-secondary{
  color:#a8bfd0!important;
}

body.visual-mode-immersive.page-routes .route-card{
  min-height:100%;
  background:
    radial-gradient(circle at 100% 0,rgba(var(--hud-accent-rgb),.075),transparent 28%),
    linear-gradient(145deg,rgba(8,22,40,.66),rgba(3,12,25,.54))!important;
  border-color:rgba(var(--hud-accent-rgb),.22)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body.visual-mode-immersive.page-routes .route-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--hud-accent-rgb),.42)!important;
  box-shadow:
    0 28px 74px rgba(0,0,0,.38),
    0 0 28px rgba(var(--hud-accent-rgb),.06)!important;
}
body.visual-mode-immersive.page-routes .route-card .icon-circle{
  background:rgba(5,17,31,.70)!important;
  border:1px solid rgba(var(--hud-accent-rgb),.28);
  box-shadow:inset 0 0 22px rgba(var(--hud-accent-rgb),.045);
}
body.visual-mode-immersive.page-routes .route-card h2{
  color:#f5fbff!important;
}
body.visual-mode-immersive.page-routes .route-card .fw-semibold{
  color:#e4f2f9!important;
}
body.visual-mode-immersive.page-routes .route-card .text-secondary{
  color:#9eb7c8!important;
}

/* Le mode clair reste strictement inchangé. */
body.visual-mode-sober > .lab-ambient{
  display:block;
}