/* ==============================================================
   APP 0.6.7 — MOTEUR DE THEMES GLOBAL
   Trois ambiances appliquées unilatéralement à toute la plateforme :
   🌌 immersive = Cockpit SF
   ☀️ sober      = Atelier clair
   🌈 colorful   = Spectrum
   ============================================================== */

/* ---------- Variables ---------- */
body.visual-mode-immersive{
  --ui-bg:#020713;--ui-surface:rgba(6,18,34,.70);--ui-surface-strong:rgba(5,16,31,.88);
  --ui-surface-soft:rgba(9,25,43,.58);--ui-text:#edf9ff;--ui-muted:#9fb7c8;
  --ui-border:rgba(99,230,255,.22);--ui-shadow:0 20px 62px rgba(0,0,0,.34);
  --ui-accent:#63e6ff;--ui-accent-rgb:99,230,255;--ui-accent-2:#8a83ff;--ui-accent-2-rgb:138,131,255;
  --ui-radius:1rem;
}
body.visual-mode-sober{
  --ui-bg:#fffaf4;--ui-surface:rgba(255,255,255,.97);--ui-surface-strong:#fff;
  --ui-surface-soft:#f7fafb;--ui-text:#253746;--ui-muted:#687b8a;
  --ui-border:rgba(42,79,103,.12);--ui-shadow:0 .45rem 1.35rem rgba(42,70,91,.075);
  --ui-accent:#1689a0;--ui-accent-rgb:22,137,160;--ui-accent-2:#526dd5;--ui-accent-2-rgb:82,109,213;
  --ui-radius:1rem;
}
body.visual-mode-colorful{
  --ui-bg:#fff8fb;--ui-surface:rgba(255,255,255,.86);--ui-surface-strong:rgba(255,255,255,.96);
  --ui-surface-soft:rgba(255,255,255,.67);--ui-text:#273446;--ui-muted:#667388;
  --ui-border:rgba(111,79,191,.16);--ui-shadow:0 1rem 2.8rem rgba(79,73,136,.12);
  --ui-accent:#7057d9;--ui-accent-rgb:112,87,217;--ui-accent-2:#f05b94;--ui-accent-2-rgb:240,91,148;
  --ui-radius:1.15rem;
}

/* Accents Spectrum par univers */
body.visual-mode-colorful.universe-science{--ui-accent:#078eb9;--ui-accent-rgb:7,142,185;--ui-accent-2:#6959d7;--ui-accent-2-rgb:105,89,215}
body.visual-mode-colorful.universe-bio{--ui-accent:#169b63;--ui-accent-rgb:22,155,99;--ui-accent-2:#a0b72e;--ui-accent-2-rgb:160,183,46}
body.visual-mode-colorful.universe-languages{--ui-accent:#c44786;--ui-accent-rgb:196,71,134;--ui-accent-2:#7856cf;--ui-accent-2-rgb:120,86,207}
body.visual-mode-colorful.universe-human{--ui-accent:#b66d1c;--ui-accent-rgb:182,109,28;--ui-accent-2:#168a8e;--ui-accent-2-rgb:22,138,142}
body.visual-mode-colorful.universe-arts{--ui-accent:#d23f8f;--ui-accent-rgb:210,63,143;--ui-accent-2:#784fe0;--ui-accent-2-rgb:120,79,224}
body.visual-mode-colorful.universe-methods{--ui-accent:#118e91;--ui-accent-rgb:17,142,145;--ui-accent-2:#e08035;--ui-accent-2-rgb:224,128,53}

/* ---------- Fonds globaux ---------- */
body.visual-mode-immersive{
  min-height:100vh;color:var(--ui-text)!important;
  background:linear-gradient(180deg,rgba(0,4,11,.16),rgba(0,5,13,.27) 48%,rgba(0,3,9,.61)),url("../img/cockpit-scene-0.6.6.svg") center top/cover fixed no-repeat,#020713!important;
}
body.visual-mode-immersive > .lab-ambient{display:none!important}

body.visual-mode-sober{min-height:100vh;color:var(--ui-text)!important;background:linear-gradient(145deg,#fffaf3 0%,#ffffff 48%,#f5fbfa 100%) fixed!important}
body.visual-mode-sober > .lab-ambient{display:block!important;position:fixed!important;inset:0!important;z-index:-2!important;opacity:1!important;background:radial-gradient(circle at 8% 8%,rgba(247,181,106,.10),transparent 28%),radial-gradient(circle at 91% 12%,rgba(64,180,184,.09),transparent 30%)!important}
body.visual-mode-sober > .lab-ambient::before,body.visual-mode-sober > .lab-ambient::after{display:none!important}

body.visual-mode-colorful{min-height:100vh;color:var(--ui-text)!important;background:#fff9fb!important}
body.visual-mode-colorful > .lab-ambient{display:block!important;position:fixed!important;inset:0!important;z-index:-2!important;opacity:1!important;background:radial-gradient(circle at 9% 10%,rgba(255,132,102,.25),transparent 28%),radial-gradient(circle at 89% 12%,rgba(80,203,220,.24),transparent 29%),radial-gradient(circle at 76% 88%,rgba(122,90,222,.18),transparent 34%),radial-gradient(circle at 22% 82%,rgba(255,202,77,.17),transparent 31%),linear-gradient(145deg,#fff7f4 0%,#fffaff 47%,#f5fffb 100%)!important}
body.visual-mode-colorful > .lab-ambient::before{content:""!important;position:absolute!important;inset:0!important;opacity:.28!important;background-image:radial-gradient(circle,rgba(var(--ui-accent-rgb),.22) 0 1px,transparent 1.2px)!important;background-size:34px 34px!important;mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 88%)}
body.visual-mode-colorful > .lab-ambient::after{content:""!important;position:absolute!important;inset:0!important;opacity:.22!important;background:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.72) 50%,transparent 54%)!important}

/* ---------- Conteneur : jamais de grand panneau global ---------- */
body[class*="visual-mode-"] main.container{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}
body.visual-mode-immersive main.container{max-width:1580px!important;width:calc(100% - 1.25rem)!important}

/* ---------- Navigation ---------- */
body.visual-mode-immersive .lab-navbar{background:linear-gradient(180deg,rgba(1,6,14,.94),rgba(3,11,22,.85))!important;border-bottom:1px solid rgba(var(--ui-accent-rgb),.16)!important;backdrop-filter:blur(18px) saturate(140%)}
body.visual-mode-sober .lab-navbar{background:linear-gradient(100deg,#14364a,#1c5260)!important}
body.visual-mode-colorful .lab-navbar{background:linear-gradient(105deg,#3d356f 0%,#235f72 48%,#5d3c78 100%)!important;border-bottom:1px solid rgba(255,255,255,.17)!important;box-shadow:0 12px 32px rgba(45,40,86,.18)!important}
.theme-picker-menu{min-width:15rem}
.theme-picker .dropdown-item{display:flex;align-items:center;gap:.25rem}

/* ---------- Surfaces universelles ---------- */
body[class*="visual-mode-"] .card,
body[class*="visual-mode-"] .hero,
body[class*="visual-mode-"] .media-frame,
body[class*="visual-mode-"] .theory-card,
body[class*="visual-mode-"] .accordion-item,
body[class*="visual-mode-"] .modal-content,
body[class*="visual-mode-"] .offcanvas,
body[class*="visual-mode-"] .toast{
  color:var(--ui-text)!important;background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
body.visual-mode-immersive .card,body.visual-mode-immersive .hero,body.visual-mode-immersive .media-frame,body.visual-mode-immersive .theory-card,body.visual-mode-immersive .accordion-item,body.visual-mode-immersive .modal-content,body.visual-mode-immersive .offcanvas{backdrop-filter:blur(16px) saturate(128%)}
body.visual-mode-colorful .card,body.visual-mode-colorful .hero,body.visual-mode-colorful .media-frame,body.visual-mode-colorful .theory-card,body.visual-mode-colorful .accordion-item{backdrop-filter:blur(12px) saturate(112%)}

/* Surface forte pour les en-têtes / héros */
body[class*="visual-mode-"] .hero{background:linear-gradient(135deg,var(--ui-surface-strong),var(--ui-surface))!important}
body.visual-mode-colorful .hero{background:radial-gradient(circle at 92% 10%,rgba(var(--ui-accent-rgb),.16),transparent 30%),radial-gradient(circle at 5% 100%,rgba(var(--ui-accent-2-rgb),.11),transparent 35%),var(--ui-surface-strong)!important}

/* Pseudo accent discret sur tous les îlots */
body.visual-mode-immersive .card,body.visual-mode-colorful .card,body.visual-mode-immersive .hero,body.visual-mode-colorful .hero{position:relative;overflow:hidden}
body.visual-mode-immersive .card::after,body.visual-mode-colorful .card::after,body.visual-mode-immersive .hero::after,body.visual-mode-colorful .hero::after{content:"";position:absolute;pointer-events:none;top:0;right:1rem;width:7rem;height:2px;background:linear-gradient(90deg,transparent,var(--ui-accent),transparent);opacity:.55}

/* ---------- Typographie ---------- */
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 strong{color:#f3fbff!important}
body.visual-mode-sober h1,body.visual-mode-sober h2,body.visual-mode-sober h3,body.visual-mode-sober h4,body.visual-mode-sober h5,body.visual-mode-sober h6{color:#203647!important}
body.visual-mode-colorful h1,body.visual-mode-colorful h2,body.visual-mode-colorful h3,body.visual-mode-colorful h4,body.visual-mode-colorful h5,body.visual-mode-colorful h6{color:#2d3150!important}
body[class*="visual-mode-"] .text-secondary,body[class*="visual-mode-"] .small.text-secondary,body[class*="visual-mode-"] small{color:var(--ui-muted)!important}
body[class*="visual-mode-"] .kicker,body[class*="visual-mode-"] .small-caps{color:var(--ui-accent)!important}
body.visual-mode-immersive a{color:#7beaff}
body.visual-mode-colorful a{color:var(--ui-accent)}

/* ---------- Listes, accordéons, détails ---------- */
body[class*="visual-mode-"] .list-group-item{color:var(--ui-text)!important;background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important}
body[class*="visual-mode-"] .accordion-button{color:var(--ui-text)!important;background:var(--ui-surface-strong)!important}
body[class*="visual-mode-"] .accordion-button:not(.collapsed){color:var(--ui-accent)!important;box-shadow:inset 0 -1px 0 var(--ui-border)!important}
body.visual-mode-immersive .accordion-button::after{filter:invert(1) grayscale(1)}
body[class*="visual-mode-"] details{border-color:var(--ui-border)!important}
body[class*="visual-mode-"] summary{color:var(--ui-accent)!important}

/* ---------- Formulaires ---------- */
body.visual-mode-immersive .form-control,body.visual-mode-immersive .form-select,body.visual-mode-immersive .form-check-input,body.visual-mode-immersive textarea{color:#effbff!important;background:rgba(1,9,19,.72)!important;border-color:rgba(153,210,232,.20)!important}
body.visual-mode-sober .form-control,body.visual-mode-sober .form-select,body.visual-mode-sober textarea{color:#263846!important;background:#fff!important;border-color:#dbe5ea!important}
body.visual-mode-colorful .form-control,body.visual-mode-colorful .form-select,body.visual-mode-colorful textarea{color:#2a3347!important;background:rgba(255,255,255,.88)!important;border-color:rgba(var(--ui-accent-rgb),.20)!important}
body[class*="visual-mode-"] .form-control:focus,body[class*="visual-mode-"] .form-select:focus,body[class*="visual-mode-"] textarea:focus{border-color:rgba(var(--ui-accent-rgb),.62)!important;box-shadow:0 0 0 .2rem rgba(var(--ui-accent-rgb),.11)!important}

/* ---------- Tables / données ---------- */
body.visual-mode-immersive .table{--bs-table-color:var(--ui-text);--bs-table-bg:transparent;--bs-table-border-color:var(--ui-border);--bs-table-striped-bg:rgba(var(--ui-accent-rgb),.035);--bs-table-hover-bg:rgba(var(--ui-accent-rgb),.065)}
body.visual-mode-sober .table,body.visual-mode-colorful .table{--bs-table-color:var(--ui-text);--bs-table-bg:transparent;--bs-table-border-color:var(--ui-border);--bs-table-striped-bg:rgba(var(--ui-accent-rgb),.035);--bs-table-hover-bg:rgba(var(--ui-accent-rgb),.06)}
body[class*="visual-mode-"] .table-responsive{border-radius:.85rem;border:1px solid var(--ui-border);background:var(--ui-surface-soft);box-shadow:0 .4rem 1rem rgba(50,70,90,.035)}

/* ---------- Menus / popups ---------- */
body.visual-mode-immersive .dropdown-menu,body.visual-mode-immersive .popover{background:rgba(4,15,29,.97)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;backdrop-filter:blur(18px)}
body.visual-mode-sober .dropdown-menu,body.visual-mode-sober .popover{background:#fff!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important}
body.visual-mode-colorful .dropdown-menu,body.visual-mode-colorful .popover{background:rgba(255,255,255,.96)!important;color:var(--ui-text)!important;border:1px solid rgba(var(--ui-accent-rgb),.16)!important;box-shadow:0 1rem 2.6rem rgba(59,54,105,.15)!important}
body[class*="visual-mode-"] .dropdown-item{color:var(--ui-text)!important}
body[class*="visual-mode-"] .dropdown-item:hover,body[class*="visual-mode-"] .dropdown-item:focus{background:rgba(var(--ui-accent-rgb),.09)!important;color:var(--ui-accent)!important}
body[class*="visual-mode-"] .dropdown-item.active{background:var(--ui-accent)!important;color:#fff!important}

/* ---------- Onglets / navigation secondaire ---------- */
body[class*="visual-mode-"] .nav-tabs{border-color:var(--ui-border)!important}
body[class*="visual-mode-"] .nav-tabs .nav-link,body[class*="visual-mode-"] .nav-pills .nav-link{color:var(--ui-muted)}
body[class*="visual-mode-"] .nav-tabs .nav-link.active,body[class*="visual-mode-"] .nav-pills .nav-link.active{color:#fff!important;background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
body[class*="visual-mode-"] .pagination{--bs-pagination-color:var(--ui-accent);--bs-pagination-bg:var(--ui-surface);--bs-pagination-border-color:var(--ui-border);--bs-pagination-hover-bg:rgba(var(--ui-accent-rgb),.08);--bs-pagination-active-bg:var(--ui-accent);--bs-pagination-active-border-color:var(--ui-accent)}
body[class*="visual-mode-"] .breadcrumb-item,body[class*="visual-mode-"] .breadcrumb-item a{color:var(--ui-muted)!important}
body[class*="visual-mode-"] .breadcrumb-item.active{color:var(--ui-text)!important}

/* ---------- Alertes ---------- */
body[class*="visual-mode-"] .alert{color:var(--ui-text)!important;background:var(--ui-surface-strong)!important;border-color:var(--ui-border)!important}
body.visual-mode-immersive .alert-success{box-shadow:inset 3px 0 0 #53df9c}
body.visual-mode-immersive .alert-warning{box-shadow:inset 3px 0 0 #ffc05c}
body.visual-mode-immersive .alert-info{box-shadow:inset 3px 0 0 var(--ui-accent)}
body.visual-mode-colorful .alert-success{background:rgba(230,251,239,.88)!important;border-color:rgba(37,162,98,.18)!important}
body.visual-mode-colorful .alert-warning{background:rgba(255,247,222,.91)!important;border-color:rgba(219,157,39,.20)!important}
body.visual-mode-colorful .alert-info{background:rgba(234,248,255,.91)!important;border-color:rgba(39,148,193,.20)!important}

/* ---------- Badges / surfaces soft ---------- */
body.visual-mode-immersive .bg-light,body.visual-mode-immersive .text-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,.61)!important;color:var(--ui-text)!important}
body.visual-mode-sober .bg-light{background:#f8fafb!important}
body.visual-mode-colorful .bg-light{background:rgba(255,255,255,.62)!important}
body.visual-mode-colorful .bg-soft-blue{background:rgba(224,244,255,.78)!important}
body.visual-mode-colorful .bg-soft-mint{background:rgba(227,250,239,.80)!important}
body.visual-mode-colorful .bg-soft-warm{background:rgba(255,241,224,.82)!important}
body.visual-mode-colorful .bg-soft-purple{background:rgba(241,232,255,.82)!important}
body.visual-mode-colorful .bg-soft-cyan{background:rgba(225,249,249,.82)!important}
body[class*="visual-mode-"] .text-bg-light{color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;background:var(--ui-surface-soft)!important}

/* ---------- Boutons ---------- */
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-sober .btn-primary{--bs-btn-bg:#167f96;--bs-btn-border-color:#167f96;--bs-btn-hover-bg:#126b7f;--bs-btn-hover-border-color:#126b7f}
body.visual-mode-colorful .btn-primary{--bs-btn-bg:var(--ui-accent);--bs-btn-border-color:var(--ui-accent);--bs-btn-hover-bg:color-mix(in srgb,var(--ui-accent) 86%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--ui-accent) 86%,#000)}
body[class*="visual-mode-"] .btn-outline-primary{--bs-btn-color:var(--ui-accent);--bs-btn-border-color:rgba(var(--ui-accent-rgb),.48);--bs-btn-hover-bg:var(--ui-accent);--bs-btn-hover-border-color:var(--ui-accent);--bs-btn-hover-color:#fff}

/* ---------- Progression ---------- */
body[class*="visual-mode-"] .progress{background:rgba(var(--ui-accent-rgb),.08)!important;border:1px solid var(--ui-border)}
body[class*="visual-mode-"] .progress-bar{background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2))!important}

/* ---------- Markdown / code / ressources ---------- */
body[class*="visual-mode-"] .guide-markdown,body[class*="visual-mode-"] .markdown-body{color:var(--ui-text)}
body[class*="visual-mode-"] blockquote{border-left:3px solid var(--ui-accent);padding-left:1rem;color:var(--ui-muted)}
body.visual-mode-immersive pre,body.visual-mode-immersive code{background:rgba(0,7,16,.72)!important;color:#bcf6ff!important;border-color:var(--ui-border)!important}
body.visual-mode-sober pre,body.visual-mode-sober code{background:#f4f7f9!important;color:#29445a!important}
body.visual-mode-colorful pre,body.visual-mode-colorful code{background:rgba(244,240,255,.83)!important;color:#55408d!important;border-color:rgba(var(--ui-accent-rgb),.13)!important}

/* ---------- Rush / étapes ---------- */
body.visual-mode-colorful .step-card{background:linear-gradient(100deg,var(--step-tint,#eef6ff) -18%,rgba(255,255,255,.91) 18%,rgba(255,255,255,.83) 100%)!important}
body.visual-mode-sober .step-card{background:linear-gradient(100deg,var(--step-tint,#eef6ff) -16%,#fff 18%,#fff 100%)!important}
body[class*="visual-mode-"] .step-card.border-primary,body[class*="visual-mode-"] .step-card.is-current{border-color:rgba(var(--ui-accent-rgb),.52)!important}

/* ---------- Route cards / project cards / notion cards ---------- */
body.visual-mode-colorful .route-card,body.visual-mode-colorful .project-card,body.visual-mode-colorful .notion-card{background:radial-gradient(circle at 100% 0,rgba(var(--ui-accent-rgb),.11),transparent 30%),var(--ui-surface)!important}
body.visual-mode-colorful .route-card:hover,body.visual-mode-colorful .project-card:hover,body.visual-mode-colorful .notion-card:hover{transform:translateY(-2px);border-color:rgba(var(--ui-accent-rgb),.32)!important;box-shadow:0 1.2rem 3rem rgba(var(--ui-accent-rgb),.10)!important}

/* ---------- Footer ---------- */
body.visual-mode-immersive footer{color:#7e96a8!important;border-color:rgba(var(--ui-accent-rgb),.10)!important}
body.visual-mode-sober footer,body.visual-mode-colorful footer{color:var(--ui-muted)!important;border-color:var(--ui-border)!important}

/* ---------- Accessibilité / responsive ---------- */
@media(max-width:991.98px){body.visual-mode-immersive main.container{width:100%!important}.theme-picker-label{display:none!important}}
@media(prefers-reduced-motion:reduce){body[class*="visual-mode-"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ==============================================================
   APP 0.6.7.1 — STABILISATION DU MOTEUR DE THÈMES
   Les anciens fichiers surface-0.6.4.x ne sont plus chargés.
   Ce bloc neutralise également les classes Bootstrap historiques
   encore présentes dans le contenu PHP.
   ============================================================== */

/* ---------- Classes historiques : respect du thème ---------- */
body.visual-mode-immersive .bg-white,
body.visual-mode-immersive .table.bg-white,
body.visual-mode-immersive .text-bg-white,
body.visual-mode-immersive .bg-body,
body.visual-mode-immersive .bg-body-secondary,
body.visual-mode-immersive .bg-body-tertiary{
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

body.visual-mode-sober .bg-white,
body.visual-mode-sober .table.bg-white,
body.visual-mode-sober .text-bg-white,
body.visual-mode-sober .bg-body,
body.visual-mode-sober .bg-body-secondary,
body.visual-mode-sober .bg-body-tertiary{
  background:var(--ui-surface-strong)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

body.visual-mode-colorful .bg-white,
body.visual-mode-colorful .table.bg-white,
body.visual-mode-colorful .text-bg-white,
body.visual-mode-colorful .bg-body,
body.visual-mode-colorful .bg-body-secondary,
body.visual-mode-colorful .bg-body-tertiary{
  background:var(--ui-surface-strong)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

/* Les tableaux ne doivent jamais recréer une grande plaque blanche. */
body.visual-mode-immersive .table-responsive{
  background:rgba(3,12,24,.46);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  overflow:hidden;
  backdrop-filter:blur(12px);
}
body.visual-mode-colorful .table-responsive{
  background:rgba(255,255,255,.48);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  overflow:hidden;
}
body.visual-mode-sober .table-responsive{
  background:#fff;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  overflow:hidden;
}

/* ---------- Accueil : véritable îlot d'entrée ---------- */
body.visual-mode-immersive.page-home .home-hero{
  color:var(--ui-text)!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(var(--ui-accent-rgb),.14),transparent 31%),
    radial-gradient(circle at 4% 100%,rgba(var(--ui-accent-2-rgb),.10),transparent 34%),
    linear-gradient(140deg,rgba(7,21,39,.78),rgba(3,12,25,.64))!important;
  border-color:rgba(var(--ui-accent-rgb),.28)!important;
  box-shadow:
    0 26px 78px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(18px) saturate(130%);
}

body.visual-mode-immersive.page-home .home-hero h1{
  color:#f3fbff!important;
  text-shadow:0 0 28px rgba(var(--ui-accent-rgb),.12);
}
body.visual-mode-immersive.page-home .home-hero .lead{
  color:#b8cfdd!important;
}
body.visual-mode-immersive.page-home .home-method-card{
  background:
    linear-gradient(145deg,rgba(9,25,44,.70),rgba(3,13,27,.58))!important;
  border-color:rgba(var(--ui-accent-rgb),.23)!important;
  box-shadow:inset 0 0 28px rgba(var(--ui-accent-rgb),.025)!important;
}

/* Les cinq étapes deviennent une petite console, pas des pastilles blanches. */
body.visual-mode-immersive.page-home .step-legend span{
  background:rgba(4,15,29,.66)!important;
  border:1px solid rgba(var(--ui-accent-rgb),.14);
  box-shadow:0 .3rem 1rem rgba(0,0,0,.16);
}
body.visual-mode-immersive.page-home .step-legend .discover{color:#6fb8ff!important}
body.visual-mode-immersive.page-home .step-legend .understand{color:#64e6ef!important}
body.visual-mode-immersive.page-home .step-legend .do{color:#ffad62!important}
body.visual-mode-immersive.page-home .step-legend .verify{color:#69e49d!important}
body.visual-mode-immersive.page-home .step-legend .finish{color:#be91ff!important}

/* CTA : le bouton outline doit rester lisible sur la scène SF. */
body.visual-mode-immersive.page-home .btn-outline-primary{
  background:rgba(2,13,26,.46);
  color:#83efff!important;
}
body.visual-mode-immersive.page-home .btn-outline-primary:hover{
  background:var(--ui-accent);
  color:#021018!important;
}

/* Dimensions de l'écran d'accueil : moins de masse verticale blanche. */
body.page-home .home-hero .display-5{
  font-size:clamp(2.35rem,4.15vw,4.15rem);
  line-height:1.07;
}
body.page-home .home-hero{
  min-height:auto;
}
@media (min-width:1200px){
  body.page-home .home-hero{
    padding-top:3.1rem!important;
    padding-bottom:3.1rem!important;
  }
}

/* ---------- Accueil clair ---------- */
body.visual-mode-sober.page-home .home-hero{
  background:
    radial-gradient(circle at 92% 10%,rgba(49,169,174,.10),transparent 31%),
    radial-gradient(circle at 5% 100%,rgba(240,171,91,.09),transparent 34%),
    rgba(255,255,255,.96)!important;
}
body.visual-mode-sober.page-home .home-method-card{
  background:#fbfdfd!important;
}

/* ---------- Accueil Spectrum ---------- */
body.visual-mode-colorful.page-home .home-hero{
  background:
    radial-gradient(circle at 88% 10%,rgba(var(--ui-accent-rgb),.18),transparent 31%),
    radial-gradient(circle at 7% 100%,rgba(var(--ui-accent-2-rgb),.14),transparent 36%),
    linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.73))!important;
}
body.visual-mode-colorful.page-home .home-method-card{
  background:rgba(255,255,255,.70)!important;
}

/* ---------- Protection globale des textes dans les cartes ---------- */
body.visual-mode-immersive .card .lead,
body.visual-mode-immersive .hero .lead,
body.visual-mode-immersive .card p,
body.visual-mode-immersive .hero p{
  color:#b8cddd;
}
body.visual-mode-immersive .card h1,
body.visual-mode-immersive .card h2,
body.visual-mode-immersive .card h3,
body.visual-mode-immersive .hero h1,
body.visual-mode-immersive .hero h2,
body.visual-mode-immersive .hero h3{
  color:#f3fbff!important;
}

/* Tables Bootstrap : couleurs compatibles avec les trois modes. */
body.visual-mode-immersive .table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--ui-text);
  --bs-table-border-color:rgba(153,205,225,.13);
  --bs-table-striped-bg:rgba(var(--ui-accent-rgb),.035);
  --bs-table-striped-color:var(--ui-text);
  --bs-table-hover-bg:rgba(var(--ui-accent-rgb),.07);
  --bs-table-hover-color:#fff;
}
body.visual-mode-colorful .table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--ui-text);
  --bs-table-border-color:var(--ui-border);
  --bs-table-striped-bg:rgba(var(--ui-accent-rgb),.035);
  --bs-table-striped-color:var(--ui-text);
  --bs-table-hover-bg:rgba(var(--ui-accent-rgb),.07);
  --bs-table-hover-color:var(--ui-text);
}