/*!
 * ============================================================
 * VORTEX OS
 * VORTEX Sovereign Glass
 * File    : /assets/css/sovereign-glass/vsg-scenes.css
 * Version : 1.0.0
 * Status  : Scene Composition Edition
 * Standard: VSG-005
 * Requires:
 *   - vsg-foundations.css
 *   - vsg-motion.css
 * ============================================================
 *
 * Mission
 * ------------------------------------------------------------
 * Définir le modèle officiel de composition des écrans
 * VORTEX sous forme de Scenes.
 *
 * Ce fichier gouverne :
 *
 * - GlassScreen ;
 * - Scene Shell ;
 * - Scene Header ;
 * - Scene Hero ;
 * - Scene Content ;
 * - Scene Sections ;
 * - Scene States ;
 * - familles de Scenes ;
 * - scènes immersives ;
 * - scènes de workflow ;
 * - scènes de collection ;
 * - scènes de détail ;
 * - scènes de dialogue ;
 * - responsive mobile, tablette et desktop ;
 * - espace réservé aux navigations système.
 *
 * Doctrine
 * ------------------------------------------------------------
 * Une Scene n’est pas une page.
 *
 * Une Scene est un moment cohérent dans la relation entre
 * l’utilisateur et son patrimoine documentaire.
 *
 * Chaque Scene doit posséder :
 *
 * - une mission unique ;
 * - une hiérarchie claire ;
 * - un contexte identifiable ;
 * - un état observable ;
 * - une navigation prévisible ;
 * - une mémoire restaurable.
 *
 * Ce fichier ne contient aucune logique métier.
 * ============================================================
 */


/* ============================================================
 * 1. SCENE TOKENS
 * ============================================================
 */

:root {
    /* --------------------------------------------------------
     * 1.1 Identification
     * --------------------------------------------------------
     */

    --vsg-scenes-version: "1.0.0";


    /* --------------------------------------------------------
     * 1.2 Scene Dimensions
     * --------------------------------------------------------
     */

    --vsg-scene-min-width: 20rem;

    --vsg-scene-max-width-mobile:
        var(--vsg-content-sm);

    --vsg-scene-max-width-tablet:
        var(--vsg-content-md);

    --vsg-scene-max-width-desktop:
        var(--vsg-content-xl);

    --vsg-scene-max-width-wide:
        var(--vsg-content-2xl);


    /* --------------------------------------------------------
     * 1.3 Scene Gutters
     * --------------------------------------------------------
     */

    --vsg-scene-gutter-inline:
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-left)
        );

    --vsg-scene-gutter-inline-end:
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-right)
        );

    --vsg-scene-gutter-top:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-space-3)
        );

    --vsg-scene-gutter-bottom:
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-space-4)
        );


    /* --------------------------------------------------------
     * 1.4 System Regions
     * --------------------------------------------------------
     */

    --vsg-toolbar-height:
        4.5rem;

    --vsg-toolbar-height-compact:
        3.75rem;

    --vsg-continuity-bar-height:
        3rem;

    --vsg-bottom-bar-height:
        4.75rem;

    --vsg-tab-bar-height:
        3.25rem;

    --vsg-sidebar-width:
        17.5rem;

    --vsg-sidebar-width-compact:
        5rem;


    /* --------------------------------------------------------
     * 1.5 Scene Offsets
     * --------------------------------------------------------
     */

    --vsg-scene-top-offset:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-toolbar-height)
        );

    --vsg-scene-bottom-offset:
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-bottom-bar-height) +
            var(--vsg-space-4)
        );

    --vsg-scene-top-offset-with-continuity:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-toolbar-height) +
            var(--vsg-continuity-bar-height)
        );


    /* --------------------------------------------------------
     * 1.6 Scene Spacing
     * --------------------------------------------------------
     */

    --vsg-scene-gap:
        var(--vsg-space-6);

    --vsg-scene-section-gap:
        var(--vsg-space-8);

    --vsg-scene-card-gap:
        var(--vsg-space-4);

    --vsg-scene-header-gap:
        var(--vsg-space-3);


    /* --------------------------------------------------------
     * 1.7 Hero
     * --------------------------------------------------------
     */

    --vsg-scene-hero-min-height:
        12rem;

    --vsg-scene-hero-min-height-compact:
        8rem;

    --vsg-scene-hero-padding:
        var(--vsg-space-6);

    --vsg-scene-hero-padding-large:
        var(--vsg-space-8);

    --vsg-scene-hero-radius:
        var(--vsg-radius-2xl);


    /* --------------------------------------------------------
     * 1.8 Content
     * --------------------------------------------------------
     */

    --vsg-scene-content-width:
        var(--vsg-content-default);

    --vsg-scene-content-width-mobile:
        var(--vsg-content-mobile);

    --vsg-scene-content-width-wide:
        var(--vsg-content-wide);


    /* --------------------------------------------------------
     * 1.9 Backgrounds
     * --------------------------------------------------------
     */

    --vsg-scene-background:
        var(--vsg-app-background);

    --vsg-scene-background-quiet:
        linear-gradient(
            180deg,
            var(--vsg-bg-1),
            var(--vsg-bg-0)
        );

    --vsg-scene-background-immersive:
        radial-gradient(
            circle at 50% 15%,
            rgba(214, 177, 94, 0.065),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #05070c 0%,
            #090d15 54%,
            #03050a 100%
        );

    --vsg-scene-background-workflow:
        radial-gradient(
            circle at 80% 5%,
            rgba(214, 177, 94, 0.085),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--vsg-bg-1),
            var(--vsg-bg-2)
        );


    /* --------------------------------------------------------
     * 1.10 State Layer
     * --------------------------------------------------------
     */

    --vsg-scene-state-layer:
        rgba(4, 7, 12, 0.78);

    --vsg-scene-state-layer-dense:
        rgba(4, 7, 12, 0.92);
}


/* ============================================================
 * 2. GLASS SCREEN
 * ============================================================
 */

.vsg-screen {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width:
        var(--vsg-scene-min-width);

    min-height: 100vh;
    min-height: 100dvh;

    color:
        var(--vsg-text-primary);

    background:
        var(--vsg-scene-background);

    isolation: isolate;

    overflow-x: hidden;
}

.vsg-screen::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        var(--vsg-scene-background);
}

.vsg-screen::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.016),
            transparent 26%
        );
}

.vsg-screen--quiet {
    background:
        var(--vsg-scene-background-quiet);
}

.vsg-screen--immersive {
    background:
        var(--vsg-scene-background-immersive);
}

.vsg-screen--workflow {
    background:
        var(--vsg-scene-background-workflow);
}

.vsg-screen--fixed {
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
}

.vsg-screen--scroll {
    overflow-y: auto;

    overscroll-behavior-y:
        contain;

    -webkit-overflow-scrolling:
        touch;
}


/* ============================================================
 * 3. SCENE ROOT
 * ============================================================
 */

.vsg-scene {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
    min-height: 100%;

    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    isolation: isolate;
}

.vsg-scene[aria-hidden="true"] {
    visibility: hidden;

    pointer-events: none;
}

.vsg-scene.is-inactive,
.vsg-scene[data-scene-state="inactive"] {
    display: none;
}

.vsg-scene.is-entering,
.vsg-scene[data-scene-state="entering"],
.vsg-scene.is-active,
.vsg-scene[data-scene-state="active"],
.vsg-scene.is-leaving,
.vsg-scene[data-scene-state="leaving"] {
    display: flex;
}


/* ============================================================
 * 4. SCENE SHELL
 * ============================================================
 */

.vsg-scene-shell {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.vsg-scene-shell--with-toolbar {
    padding-top:
        var(--vsg-scene-top-offset);
}

.vsg-scene-shell--with-continuity-bar {
    padding-top:
        var(
            --vsg-scene-top-offset-with-continuity
        );
}

.vsg-scene-shell--with-bottom-bar {
    padding-bottom:
        var(--vsg-scene-bottom-offset);
}

.vsg-scene-shell--with-sidebar {
    padding-left:
        var(--vsg-sidebar-width);
}

[dir="rtl"]
.vsg-scene-shell--with-sidebar {
    padding-left: 0;

    padding-right:
        var(--vsg-sidebar-width);
}


/* ============================================================
 * 5. SCENE CANVAS
 * ============================================================
 */

.vsg-scene-canvas {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;

    padding:
        var(--vsg-space-4)
        var(--vsg-scene-gutter-inline-end)
        var(--vsg-space-8)
        var(--vsg-scene-gutter-inline);
}

.vsg-scene-canvas--flush {
    padding-inline: 0;
}

.vsg-scene-canvas--compact {
    padding-top:
        var(--vsg-space-2);

    padding-bottom:
        var(--vsg-space-5);
}

.vsg-scene-canvas--centered {
    justify-content: center;
}

.vsg-scene-canvas--full-height {
    min-height:
        calc(
            100vh -
            var(--vsg-scene-top-offset) -
            var(--vsg-scene-bottom-offset)
        );

    min-height:
        calc(
            100dvh -
            var(--vsg-scene-top-offset) -
            var(--vsg-scene-bottom-offset)
        );
}


/* ============================================================
 * 6. SCENE CONTAINER
 * ============================================================
 */

.vsg-scene-container {
    width: 100%;
    max-width:
        var(--vsg-scene-content-width);

    margin-inline: auto;
}

.vsg-scene-container--mobile {
    max-width:
        var(--vsg-scene-content-width-mobile);
}

.vsg-scene-container--wide {
    max-width:
        var(--vsg-scene-content-width-wide);
}

.vsg-scene-container--full {
    max-width: none;
}

.vsg-scene-container--reading {
    max-width: 46rem;
}

.vsg-scene-container--form {
    max-width: 34rem;
}

.vsg-scene-container--dialog {
    max-width: 30rem;
}


/* ============================================================
 * 7. SCENE HEADER
 * ============================================================
 */

.vsg-scene-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap:
        var(--vsg-scene-header-gap);

    width: 100%;

    margin-bottom:
        var(--vsg-space-5);
}

.vsg-scene-header-main {
    min-width: 0;
}

.vsg-scene-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap:
        var(--vsg-space-2);
}

.vsg-scene-header-kicker {
    margin: 0 0 var(--vsg-space-2);

    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    line-height:
        var(--vsg-line-height-compact);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-scene-header-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        clamp(
            var(--vsg-font-size-xl),
            5vw,
            var(--vsg-font-size-3xl)
        );

    font-weight:
        var(--vsg-font-weight-black);

    line-height:
        var(--vsg-line-height-tight);

    letter-spacing:
        var(--vsg-tracking-tight);
}

.vsg-scene-header-description {
    max-width: 46rem;

    margin:
        var(--vsg-space-2)
        0
        0;

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}


/* ============================================================
 * 8. SCENE HERO
 * ============================================================
 */

.vsg-scene-hero {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height:
        var(--vsg-scene-hero-min-height);

    padding:
        var(--vsg-scene-hero-padding);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-scene-hero-radius);

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(19, 26, 40, 0.96),
            rgba(9, 13, 22, 0.99)
        );

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-inset-gold),
        var(--vsg-shadow-lg),
        var(--vsg-gold-glow-sm);

    isolation: isolate;
}

.vsg-scene-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        var(--vsg-glass-highlight);
}

.vsg-scene-hero::after {
    content: "";

    position: absolute;

    width: 18rem;
    height: 18rem;

    top: -10rem;
    right: -7rem;

    z-index: 0;

    border-radius:
        var(--vsg-radius-pill);

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(240, 216, 157, 0.09),
            transparent 68%
        );

    filter:
        blur(var(--vsg-blur-lg));
}

.vsg-scene-hero > * {
    position: relative;
    z-index: 1;
}

.vsg-scene-hero--compact {
    min-height:
        var(--vsg-scene-hero-min-height-compact);

    padding:
        var(--vsg-space-5);
}

.vsg-scene-hero--large {
    min-height: 18rem;

    padding:
        var(--vsg-scene-hero-padding-large);
}

.vsg-scene-hero--quiet {
    border-color:
        var(--vsg-line-1);

    background:
        linear-gradient(
            180deg,
            var(--vsg-glass-2),
            var(--vsg-glass-4)
        );

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-md);
}

.vsg-scene-hero--transparent {
    border-color: transparent;

    background: transparent;

    box-shadow: none;
}

.vsg-scene-hero-content {
    display: grid;

    gap:
        var(--vsg-space-3);

    max-width: 48rem;
}

.vsg-scene-hero-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        clamp(
            var(--vsg-font-size-2xl),
            8vw,
            var(--vsg-font-size-4xl)
        );

    font-weight:
        var(--vsg-font-weight-black);

    line-height:
        var(--vsg-line-height-none);

    letter-spacing:
        var(--vsg-tracking-tight);
}

.vsg-scene-hero-description {
    max-width: 42rem;

    margin: 0;

    color:
        var(--vsg-text-secondary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-scene-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    margin-top:
        var(--vsg-space-2);
}

.vsg-scene-hero-aside {
    display: grid;

    gap:
        var(--vsg-space-3);

    margin-top:
        var(--vsg-space-6);
}


/* ============================================================
 * 9. SCENE CONTENT
 * ============================================================
 */

.vsg-scene-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    gap:
        var(--vsg-scene-section-gap);

    width: 100%;

    margin-top:
        var(--vsg-scene-gap);
}

.vsg-scene-content--compact {
    gap:
        var(--vsg-space-5);
}

.vsg-scene-content--dense {
    gap:
        var(--vsg-space-4);
}

.vsg-scene-content--no-hero {
    margin-top: 0;
}

.vsg-scene-content--two-column {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    align-items: start;
}


/* ============================================================
 * 10. SCENE SECTION
 * ============================================================
 */

.vsg-scene-section {
    display: grid;

    gap:
        var(--vsg-space-4);

    min-width: 0;
}

.vsg-scene-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap:
        var(--vsg-space-3);
}

.vsg-scene-section-heading {
    min-width: 0;
}

.vsg-scene-section-kicker {
    margin: 0 0 var(--vsg-space-1);

    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    line-height:
        var(--vsg-line-height-compact);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-scene-section-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-extrabold);

    line-height:
        var(--vsg-line-height-tight);

    letter-spacing:
        -0.018em;
}

.vsg-scene-section-description {
    max-width: 44rem;

    margin:
        var(--vsg-space-2)
        0
        0;

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-scene-section-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;

    gap:
        var(--vsg-space-2);
}

.vsg-scene-section-body {
    min-width: 0;
}

.vsg-scene-section--separated {
    padding-top:
        var(--vsg-space-6);

    border-top:
        1px solid
        var(--vsg-line-1);
}

.vsg-scene-section--quiet {
    gap:
        var(--vsg-space-3);
}


/* ============================================================
 * 11. SCENE GRID
 * ============================================================
 */

.vsg-scene-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        var(--vsg-scene-card-gap);
}

.vsg-scene-grid--compact {
    gap:
        var(--vsg-space-3);
}

.vsg-scene-grid--metrics {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.vsg-scene-grid--auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 16rem),
                1fr
            )
        );
}

.vsg-scene-grid--wide {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 20rem),
                1fr
            )
        );
}


/* ============================================================
 * 12. SCENE STACK
 * ============================================================
 */

.vsg-scene-stack {
    display: flex;
    flex-direction: column;

    gap:
        var(--vsg-scene-card-gap);
}

.vsg-scene-stack--compact {
    gap:
        var(--vsg-space-3);
}

.vsg-scene-stack--loose {
    gap:
        var(--vsg-space-6);
}


/* ============================================================
 * 13. SCENE ASIDE
 * ============================================================
 */

.vsg-scene-aside {
    display: grid;

    gap:
        var(--vsg-space-4);

    align-self: start;

    min-width: 0;
}

.vsg-scene-aside--sticky {
    position: sticky;

    top:
        calc(
            var(--vsg-scene-top-offset) +
            var(--vsg-space-4)
        );
}


/* ============================================================
 * 14. SCENE FOOTER
 * ============================================================
 */

.vsg-scene-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    width: 100%;

    margin-top:
        var(--vsg-space-8);

    padding-top:
        var(--vsg-space-5);

    border-top:
        1px solid
        var(--vsg-line-1);

    color:
        var(--vsg-text-muted);

    font-size:
        var(--vsg-font-size-sm);
}

.vsg-scene-footer--center {
    justify-content: center;

    text-align: center;
}


/* ============================================================
 * 15. DASHBOARD SCENE
 * ============================================================
 */

.vsg-scene--dashboard
.vsg-scene-content {
    gap:
        var(--vsg-space-6);
}

.vsg-scene--dashboard
.vsg-scene-hero {
    min-height: 14rem;
}

.vsg-scene--dashboard
.vsg-scene-grid--metrics {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


/* ============================================================
 * 16. COLLECTION SCENE
 * ============================================================
 */

.vsg-scene--collection
.vsg-scene-content {
    gap:
        var(--vsg-space-5);
}

.vsg-scene-collection-tools {
    position: sticky;

    top:
        calc(
            var(--vsg-scene-top-offset) +
            var(--vsg-space-2)
        );

    z-index:
        var(--vsg-elevation-3);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-glass-3);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-md);

    backdrop-filter:
        blur(var(--vsg-blur-lg))
        saturate(125%);

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-lg))
        saturate(125%);
}


/* ============================================================
 * 17. DETAIL SCENE
 * ============================================================
 */

.vsg-scene--detail
.vsg-scene-container {
    max-width:
        var(--vsg-content-md);
}

.vsg-scene-detail-summary {
    display: grid;

    gap:
        var(--vsg-space-4);

    margin-bottom:
        var(--vsg-space-6);
}

.vsg-scene-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2);
}


/* ============================================================
 * 18. CREATION SCENE
 * ============================================================
 */

.vsg-scene--creation
.vsg-scene-container {
    max-width:
        var(--vsg-content-md);
}

.vsg-scene--creation
.vsg-scene-content {
    gap:
        var(--vsg-space-5);
}

.vsg-scene-form {
    display: grid;

    gap:
        var(--vsg-space-5);
}

.vsg-scene-form-actions {
    position: sticky;

    bottom:
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-space-3)
        );

    z-index:
        var(--vsg-elevation-3);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-glass-4);

    box-shadow:
        var(--vsg-shadow-floating);

    backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);
}


/* ============================================================
 * 19. WORKFLOW SCENE
 * ============================================================
 */

.vsg-scene--workflow
.vsg-scene-container {
    max-width:
        var(--vsg-content-sm);
}

.vsg-scene--workflow
.vsg-scene-canvas {
    justify-content: center;

    padding-top:
        var(--vsg-space-6);

    padding-bottom:
        var(--vsg-space-10);
}

.vsg-workflow-progress {
    display: grid;

    grid-template-columns:
        repeat(
            var(--vsg-workflow-steps, 4),
            minmax(0, 1fr)
        );

    gap:
        var(--vsg-space-2);

    margin-bottom:
        var(--vsg-space-5);
}

.vsg-workflow-progress-step {
    height: 0.25rem;

    overflow: hidden;

    border-radius:
        var(--vsg-radius-pill);

    background:
        var(--vsg-surface-3);
}

.vsg-workflow-progress-step.is-complete,
.vsg-workflow-progress-step[
    data-state="complete"
] {
    background:
        var(--vsg-gold-400);
}

.vsg-workflow-progress-step.is-current,
.vsg-workflow-progress-step[
    data-state="current"
] {
    background:
        linear-gradient(
            90deg,
            var(--vsg-gold-300),
            var(--vsg-gold-500)
        );

    box-shadow:
        var(--vsg-gold-glow-sm);
}

.vsg-workflow-step {
    display: none;
}

.vsg-workflow-step.is-active,
.vsg-workflow-step[
    data-step-state="active"
] {
    display: block;
}


/* ============================================================
 * 20. DIALOG SCENE
 * ============================================================
 */

.vsg-scene--dialog {
    position: fixed;
    inset: 0;

    z-index:
        var(--vsg-elevation-modal);

    display: grid;
    place-items: center;

    padding:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-space-4)
        )
        max(
            var(--vsg-space-4),
            var(--vsg-safe-right)
        )
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-space-4)
        )
        max(
            var(--vsg-space-4),
            var(--vsg-safe-left)
        );

    background:
        var(--vsg-scene-state-layer);

    backdrop-filter:
        blur(var(--vsg-blur-md))
        saturate(90%);

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-md))
        saturate(90%);
}

.vsg-dialog-surface {
    width: 100%;
    max-width:
        var(--vsg-content-xs);

    max-height:
        calc(
            100dvh -
            var(--vsg-safe-top) -
            var(--vsg-safe-bottom) -
            var(--vsg-space-8)
        );

    overflow: auto;

    padding:
        var(--vsg-space-6);

    border:
        1px solid
        var(--vsg-line-2);

    border-radius:
        var(--vsg-radius-modal);

    background:
        var(--vsg-glass-4);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-xl);

    backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);
}

.vsg-dialog-header {
    display: grid;

    gap:
        var(--vsg-space-2);

    margin-bottom:
        var(--vsg-space-4);
}

.vsg-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    margin-top:
        var(--vsg-space-6);
}


/* ============================================================
 * 21. IMMERSIVE SCENE
 * ============================================================
 */

.vsg-scene--immersive {
    position: fixed;
    inset: 0;

    z-index:
        var(--vsg-elevation-overlay);

    width: 100%;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background:
        var(--vsg-scene-background-immersive);
}

.vsg-scene--immersive
.vsg-scene-canvas {
    height: 100%;

    padding: 0;
}

.vsg-immersive-viewport {
    position: relative;

    flex: 1 1 auto;

    width: 100%;
    min-height: 0;

    overflow: hidden;
}

.vsg-immersive-content {
    width: 100%;
    height: 100%;

    overflow: auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

.vsg-immersive-controls {
    position: fixed;
    inset-inline: 0;
    top: 0;

    z-index:
        var(--vsg-elevation-4);

    padding:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-space-2)
        )
        max(
            var(--vsg-space-3),
            var(--vsg-safe-right)
        )
        var(--vsg-space-2)
        max(
            var(--vsg-space-3),
            var(--vsg-safe-left)
        );
}

.vsg-immersive-controls--bottom {
    top: auto;
    bottom: 0;

    padding:
        var(--vsg-space-2)
        max(
            var(--vsg-space-3),
            var(--vsg-safe-right)
        )
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-space-2)
        )
        max(
            var(--vsg-space-3),
            var(--vsg-safe-left)
        );
}


/* ============================================================
 * 22. SPLIT SCENE
 * ============================================================
 */

.vsg-scene--split
.vsg-scene-canvas {
    padding-inline: 0;
}

.vsg-scene-split {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    min-height: 100%;

    overflow: hidden;
}

.vsg-scene-split-master {
    min-width: 0;

    border-right:
        1px solid
        var(--vsg-line-1);
}

.vsg-scene-split-detail {
    min-width: 0;
}


/* ============================================================
 * 23. SCENE STATE LAYER
 * ============================================================
 */

.vsg-scene-state {
    position: absolute;
    inset: 0;

    z-index:
        var(--vsg-elevation-overlay);

    display: grid;
    place-items: center;

    padding:
        var(--vsg-space-6);

    background:
        var(--vsg-scene-state-layer);

    backdrop-filter:
        blur(var(--vsg-blur-md));

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-md));
}

.vsg-scene-state--dense {
    background:
        var(--vsg-scene-state-layer-dense);
}

.vsg-scene-state-card {
    display: grid;

    justify-items: center;

    gap:
        var(--vsg-space-4);

    width: min(100%, 30rem);

    padding:
        var(--vsg-space-6);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        var(--vsg-glass-4);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-lg);

    text-align: center;
}

.vsg-scene-state-icon {
    display: grid;
    place-items: center;

    width: 3.5rem;
    height: 3.5rem;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-xl);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-2);
}

.vsg-scene-state-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-extrabold);

    line-height:
        var(--vsg-line-height-tight);
}

.vsg-scene-state-description {
    max-width: 32rem;

    margin: 0;

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-scene-state-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);
}


/* ============================================================
 * 24. LOADING STATE
 * ============================================================
 */

.vsg-scene.is-loading
.vsg-scene-content,
.vsg-scene[
    data-scene-state="loading"
]
.vsg-scene-content {
    pointer-events: none;
}

.vsg-scene-loading {
    display: grid;

    gap:
        var(--vsg-space-4);
}

.vsg-scene-loading-line {
    height: 1rem;

    border-radius:
        var(--vsg-radius-pill);
}

.vsg-scene-loading-block {
    min-height: 8rem;

    border-radius:
        var(--vsg-radius-xl);
}


/* ============================================================
 * 25. EMPTY STATE
 * ============================================================
 */

.vsg-scene-empty {
    display: grid;

    justify-items: center;

    gap:
        var(--vsg-space-4);

    width: 100%;

    padding:
        var(--vsg-space-10)
        var(--vsg-space-5);

    text-align: center;
}

.vsg-scene-empty-icon {
    display: grid;
    place-items: center;

    width: 4rem;
    height: 4rem;

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-2xl);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-surface-2);
}

.vsg-scene-empty-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-scene-empty-description {
    max-width: 34rem;

    margin: 0;

    color:
        var(--vsg-text-tertiary);

    line-height:
        var(--vsg-line-height-relaxed);
}


/* ============================================================
 * 26. OFFLINE STATE
 * ============================================================
 */

.vsg-scene-offline-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    width: 100%;

    padding:
        var(--vsg-space-3)
        var(--vsg-space-4);

    border:
        1px solid
        var(--vsg-warning-line);

    border-radius:
        var(--vsg-radius-lg);

    color:
        var(--vsg-warning);

    background:
        var(--vsg-warning-surface);
}

.vsg-scene-offline-banner-title {
    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-scene-offline-banner-description {
    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);
}


/* ============================================================
 * 27. ERROR STATE
 * ============================================================
 */

.vsg-scene-error {
    display: grid;

    justify-items: center;

    gap:
        var(--vsg-space-4);

    padding:
        var(--vsg-space-8)
        var(--vsg-space-5);

    border:
        1px solid
        var(--vsg-danger-line);

    border-radius:
        var(--vsg-radius-2xl);

    color:
        var(--vsg-danger);

    background:
        var(--vsg-danger-surface);

    text-align: center;
}

.vsg-scene-error-description {
    max-width: 34rem;

    margin: 0;

    color:
        var(--vsg-text-secondary);

    line-height:
        var(--vsg-line-height-relaxed);
}


/* ============================================================
 * 28. SCENE MEMORY MARKERS
 * ============================================================
 *
 * Ces classes ne mémorisent rien seules.
 * Elles offrent des points d’ancrage aux contrôleurs JS.
 * ============================================================
 */

.vsg-scene-scroll-region {
    overflow: auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

.vsg-scene-memory-anchor {
    scroll-margin-top:
        calc(
            var(--vsg-scene-top-offset) +
            var(--vsg-space-4)
        );
}

.vsg-scene-focus-target {
    scroll-margin-block:
        var(--vsg-space-6);
}


/* ============================================================
 * 29. SCENE RESPONSIVE — TABLET
 * ============================================================
 */

@media (min-width: 48rem) {
    :root {
        --vsg-scene-hero-padding:
            var(--vsg-space-8);

        --vsg-scene-gap:
            var(--vsg-space-8);

        --vsg-scene-section-gap:
            var(--vsg-space-10);
    }

    .vsg-scene-canvas {
        padding-top:
            var(--vsg-space-6);

        padding-bottom:
            var(--vsg-space-10);
    }

    .vsg-scene-content--two-column {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(16rem, 0.75fr);

        gap:
            var(--vsg-space-6);
    }

    .vsg-scene-grid--metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .vsg-scene-grid--two {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .vsg-scene--dashboard
    .vsg-scene-grid--metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .vsg-scene-hero--large {
        min-height: 22rem;
    }

    .vsg-scene-split {
        grid-template-columns:
            minmax(18rem, 0.8fr)
            minmax(0, 1.6fr);
    }
}


/* ============================================================
 * 30. SCENE RESPONSIVE — DESKTOP
 * ============================================================
 */

@media (min-width: 64rem) {
    .vsg-scene-shell--with-bottom-bar {
        padding-bottom:
            var(--vsg-space-8);
    }

    .vsg-scene-shell--desktop-sidebar {
        padding-left:
            var(--vsg-sidebar-width);
    }

    [dir="rtl"]
    .vsg-scene-shell--desktop-sidebar {
        padding-left: 0;

        padding-right:
            var(--vsg-sidebar-width);
    }

    .vsg-scene-content--two-column {
        grid-template-columns:
            minmax(0, 1.8fr)
            minmax(18rem, 0.7fr);

        gap:
            var(--vsg-space-8);
    }

    .vsg-scene-grid--metrics {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .vsg-scene-grid--three {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .vsg-scene--dashboard
    .vsg-scene-grid--metrics {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .vsg-scene-hero {
        min-height: 16rem;
    }

    .vsg-scene-hero--large {
        min-height: 26rem;
    }

    .vsg-scene-collection-tools {
        top:
            calc(
                var(--vsg-scene-top-offset) +
                var(--vsg-space-4)
            );
    }
}


/* ============================================================
 * 31. COMPACT DESKTOP SIDEBAR
 * ============================================================
 */

html[
    data-vsg-sidebar="compact"
]
.vsg-scene-shell--with-sidebar,
html[
    data-vsg-sidebar="compact"
]
.vsg-scene-shell--desktop-sidebar {
    padding-left:
        var(--vsg-sidebar-width-compact);
}

[dir="rtl"]
html[
    data-vsg-sidebar="compact"
]
.vsg-scene-shell--with-sidebar,
[dir="rtl"]
html[
    data-vsg-sidebar="compact"
]
.vsg-scene-shell--desktop-sidebar {
    padding-left: 0;

    padding-right:
        var(--vsg-sidebar-width-compact);
}


/* ============================================================
 * 32. KEYBOARD VISIBLE
 * ============================================================
 */

html.vui-env--keyboard-visible
.vsg-scene-shell--with-bottom-bar {
    padding-bottom:
        calc(
            var(--vsg-space-4) +
            var(--vsg-safe-bottom)
        );
}

html.vui-env--keyboard-visible
.vsg-scene-form-actions {
    bottom:
        calc(
            var(--vsg-keyboard-height) +
            var(--vsg-space-2)
        );
}


/* ============================================================
 * 33. LANDSCAPE MOBILE
 * ============================================================
 */

@media (
    orientation: landscape
) and (
    max-height: 32rem
) {
    :root {
        --vsg-scene-hero-min-height:
            8rem;

        --vsg-scene-hero-min-height-compact:
            6rem;
    }

    .vsg-scene-hero {
        padding:
            var(--vsg-space-4);
    }

    .vsg-scene-hero-title {
        font-size:
            var(--vsg-font-size-2xl);
    }

    .vsg-scene--workflow
    .vsg-scene-canvas {
        justify-content: flex-start;
    }
}


/* ============================================================
 * 34. GLASS FALLBACK
 * ============================================================
 */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface,
    .vsg-scene-state,
    .vsg-scene--dialog {
        backdrop-filter: none;

        -webkit-backdrop-filter: none;
    }

    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface {
        background:
            var(--vsg-glass-solid);
    }

    .vsg-scene-state,
    .vsg-scene--dialog {
        background:
            rgba(4, 7, 12, 0.94);
    }
}


/* ============================================================
 * 35. REDUCED TRANSPARENCY
 * ============================================================
 */

@media (
    prefers-reduced-transparency: reduce
) {
    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface,
    .vsg-scene-state,
    .vsg-scene--dialog {
        backdrop-filter: none;

        -webkit-backdrop-filter: none;
    }

    .vsg-scene-hero,
    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface {
        background:
            var(--vsg-glass-solid);
    }
}


/* ============================================================
 * 36. REDUCED MOTION
 * ============================================================
 */

@media (
    prefers-reduced-motion: reduce
) {
    .vsg-scene,
    .vsg-scene-hero,
    .vsg-scene-state-card,
    .vsg-dialog-surface {
        animation: none !important;

        transition: none !important;

        transform: none !important;

        filter: none !important;
    }
}


/* ============================================================
 * 37. HIGH CONTRAST
 * ============================================================
 */

@media (
    prefers-contrast: more
) {
    .vsg-scene-hero,
    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface,
    .vsg-scene-state-card {
        border-width: 2px;
    }
}


/* ============================================================
 * 38. FORCED COLORS
 * ============================================================
 */

@media (
    forced-colors: active
) {
    .vsg-screen,
    .vsg-scene-hero,
    .vsg-scene-collection-tools,
    .vsg-scene-form-actions,
    .vsg-dialog-surface,
    .vsg-scene-state-card,
    .vsg-scene-offline-banner,
    .vsg-scene-error {
        color:
            CanvasText;

        background:
            Canvas;

        border:
            1px solid
            CanvasText;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }

    .vsg-scene-hero::before,
    .vsg-scene-hero::after {
        display: none;
    }
}


/* ============================================================
 * 39. PRINT
 * ============================================================
 */

@media print {
    .vsg-screen,
    .vsg-scene,
    .vsg-scene-shell,
    .vsg-scene-canvas {
        display: block;

        min-height: auto;

        padding: 0;

        overflow: visible;

        color: #111111;

        background: #ffffff;
    }

    .vsg-scene-hero,
    .vsg-scene-section,
    .vsg-dialog-surface {
        break-inside: avoid;

        color: #111111;

        background: #ffffff;

        border:
            1px solid #cccccc;

        box-shadow: none;
    }

    .vsg-scene--dialog,
    .vsg-scene-state,
    .vsg-scene-form-actions,
    .vsg-scene-collection-tools,
    .vsg-immersive-controls {
        position: static;

        display: block;

        padding: 0;

        color: #111111;

        background: transparent;

        backdrop-filter: none;

        -webkit-backdrop-filter: none;
    }
}