/*!
 * ============================================================
 * VORTEX OS
 * VORTEX Sovereign Glass
 * File    : /assets/css/sovereign-glass/vsg-system-apps.css
 * Version : 1.0.0
 * Status  : System Applications Edition
 * Standard: VSG-008
 * Requires:
 *   - vsg-foundations.css
 *   - vsg-motion.css
 *   - vsg-components.css
 *   - vsg-navigation.css
 *   - vsg-scenes.css
 *   - vsg-continuity.css
 *   - vsg-atlas.css
 * ============================================================
 *
 * Mission
 * ------------------------------------------------------------
 * Appliquer progressivement le langage Sovereign Glass aux
 * applications opérationnelles de VORTEX OS.
 *
 * Applications couvertes :
 *
 * - login.html ;
 * - register.html ;
 * - activate.html ;
 * - vortex.html ;
 * - account.html ;
 * - profil.html ;
 * - viewer.html.
 *
 * Ce fichier définit :
 *
 * - le shell commun des System Apps ;
 * - les régions applicatives ;
 * - les Hero spécifiques ;
 * - les workflows d’accès et d’activation ;
 * - les centres de continuité et d’identité ;
 * - le Viewer immersif ;
 * - les états de chargement, erreur, vide et hors connexion ;
 * - la couche de compatibilité avec les interfaces existantes ;
 * - les adaptations responsive et accessibles.
 *
 * Doctrine
 * ------------------------------------------------------------
 * L’évolution visuelle de VORTEX ne doit jamais coûter la
 * réalité opérationnelle déjà acquise.
 *
 * Les moteurs, endpoints, formulaires, identifiants DOM et
 * workflows métier demeurent indépendants de cette couche.
 *
 * Les System Apps ne calculent aucune continuité.
 * Elles représentent les états fournis par les moteurs.
 * ============================================================
 */


/* ============================================================
 * 1. SYSTEM APP TOKENS
 * ============================================================
 */

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

    --vsg-system-apps-version: "1.0.0";


    /* --------------------------------------------------------
     * 1.2 Application Shell
     * --------------------------------------------------------
     */

    --vsg-app-shell-width-mobile:
        34rem;

    --vsg-app-shell-width-medium:
        52rem;

    --vsg-app-shell-width-wide:
        82rem;

    --vsg-app-shell-radius:
        var(--vsg-radius-3xl);

    --vsg-app-shell-border:
        var(--vsg-line-1);

    --vsg-app-shell-background:
        linear-gradient(
            180deg,
            rgba(10, 14, 23, 0.98),
            rgba(4, 7, 12, 0.995)
        );

    --vsg-app-shell-shadow:
        var(--vsg-shadow-xl);


    /* --------------------------------------------------------
     * 1.3 Regions
     * --------------------------------------------------------
     */

    --vsg-app-header-height:
        var(--vsg-toolbar-height);

    --vsg-app-footer-height:
        var(--vsg-bottom-bar-height);

    --vsg-app-content-padding:
        var(--vsg-space-4);

    --vsg-app-section-gap:
        var(--vsg-space-6);

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


    /* --------------------------------------------------------
     * 1.4 Access Apps
     * --------------------------------------------------------
     */

    --vsg-access-width:
        34rem;

    --vsg-access-hero-min-height:
        14rem;

    --vsg-access-panel-padding:
        var(--vsg-space-5);


    /* --------------------------------------------------------
     * 1.5 Workflow Apps
     * --------------------------------------------------------
     */

    --vsg-workflow-width:
        38rem;

    --vsg-workflow-step-gap:
        var(--vsg-space-5);


    /* --------------------------------------------------------
     * 1.6 Core Apps
     * --------------------------------------------------------
     */

    --vsg-home-width:
        76rem;

    --vsg-continuity-center-width:
        72rem;

    --vsg-identity-width:
        64rem;


    /* --------------------------------------------------------
     * 1.7 Viewer
     * --------------------------------------------------------
     */

    --vsg-viewer-toolbar-height:
        4rem;

    --vsg-viewer-controls-height:
        4.25rem;

    --vsg-viewer-sheet-width:
        28rem;

    --vsg-viewer-page-width:
        52rem;

    --vsg-viewer-page-background:
        #f6f3eb;

    --vsg-viewer-page-color:
        #17191d;


    /* --------------------------------------------------------
     * 1.8 Feedback
     * --------------------------------------------------------
     */

    --vsg-app-state-width:
        32rem;

    --vsg-app-state-icon-size:
        4rem;


    /* --------------------------------------------------------
     * 1.9 Compatibility
     * --------------------------------------------------------
     */

    --vsg-legacy-shell-width:
        33.75rem;

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


/* ============================================================
 * 2. SYSTEM APP ROOT
 * ============================================================
 */

.vsg-system-app {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 20rem;

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

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

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

    isolation: isolate;

    overflow-x: hidden;
}

.vsg-system-app[data-app-state="loading"] {
    cursor: progress;
}

.vsg-system-app[data-app-state="offline"] {
    --vsg-app-status-color:
        var(--vsg-warning);
}

.vsg-system-app[data-app-state="error"] {
    --vsg-app-status-color:
        var(--vsg-danger);
}

.vsg-system-app[data-app-state="ready"] {
    --vsg-app-status-color:
        var(--vsg-success);
}


/* ============================================================
 * 3. APPLICATION SHELL
 * ============================================================
 */

.vsg-app-shell {
    position: relative;

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

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

    margin-inline: auto;

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

    isolation: isolate;
}

.vsg-app-shell--contained {
    width:
        min(
            calc(
                100% -
                var(--vsg-space-4)
            ),
            var(--vsg-app-shell-width-mobile)
        );

    min-height:
        calc(
            100dvh -
            var(--vsg-space-4)
        );

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

    overflow: hidden;

    border:
        1px solid
        var(--vsg-app-shell-border);

    border-radius:
        var(--vsg-app-shell-radius);

    box-shadow:
        var(--vsg-app-shell-shadow);
}

.vsg-app-shell--medium {
    max-width:
        var(--vsg-app-shell-width-medium);
}

.vsg-app-shell--wide {
    max-width:
        var(--vsg-app-shell-width-wide);
}

.vsg-app-shell--fullscreen {
    max-width: none;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}

.vsg-app-shell--access {
    max-width:
        var(--vsg-access-width);
}

.vsg-app-shell--workflow {
    max-width:
        var(--vsg-workflow-width);
}

.vsg-app-shell--home {
    max-width:
        var(--vsg-home-width);
}

.vsg-app-shell--continuity {
    max-width:
        var(--vsg-continuity-center-width);
}

.vsg-app-shell--identity {
    max-width:
        var(--vsg-identity-width);
}


/* ============================================================
 * 4. APPLICATION REGIONS
 * ============================================================
 */

.vsg-app-header {
    position: sticky;

    top: 0;

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

    flex: 0 0 auto;

    width: 100%;
}

.vsg-app-main {
    position: relative;

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

    min-width: 0;
    min-height: 0;
}

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

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

    width: 100%;

    padding:
        var(--vsg-app-content-padding)
        max(
            var(--vsg-app-content-padding),
            var(--vsg-safe-right)
        )
        calc(
            var(--vsg-app-content-padding) +
            var(--vsg-safe-bottom)
        )
        max(
            var(--vsg-app-content-padding),
            var(--vsg-safe-left)
        );
}

.vsg-app-content--with-bottom-bar {
    padding-bottom:
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-bottom-bar-height) +
            var(--vsg-space-6)
        );
}

.vsg-app-content--compact {
    gap:
        var(--vsg-space-4);

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

.vsg-app-content--flush {
    padding-inline: 0;
}

.vsg-app-footer {
    flex: 0 0 auto;

    width: 100%;
}


/* ============================================================
 * 5. COMMON APPLICATION HERO
 * ============================================================
 */

.vsg-app-hero {
    position: relative;

    display: grid;

    align-content: end;

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

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

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

    overflow: hidden;

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

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

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 38%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(91, 109, 157, 0.07),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(18, 25, 39, 0.97),
            rgba(8, 12, 20, 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-app-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

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

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

    position: absolute;

    top: -8rem;
    right: -7rem;

    z-index: 0;

    width: 16rem;
    height: 16rem;

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

    pointer-events: none;

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

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

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

.vsg-app-hero--compact {
    min-height: 9rem;

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

.vsg-app-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-app-hero-kicker {
    margin: 0;

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

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

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

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

    text-transform: uppercase;
}

.vsg-app-hero-title {
    max-width: 18ch;

    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-app-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-app-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

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


/* ============================================================
 * 6. COMMON APP SECTION
 * ============================================================
 */

.vsg-app-section {
    display: grid;

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

    min-width: 0;
}

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

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

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

.vsg-app-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);

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

    text-transform: uppercase;
}

.vsg-app-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);
}

.vsg-app-section-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);
}

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

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

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

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


/* ============================================================
 * 7. APPLICATION GRID
 * ============================================================
 */

.vsg-app-grid {
    display: grid;

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

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

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

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

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


/* ============================================================
 * 8. ACCESS APPLICATIONS
 * ============================================================
 */

.vsg-access-app {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    justify-content: center;

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

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

.vsg-access-stack {
    display: grid;

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

    width: 100%;
    max-width:
        var(--vsg-access-width);

    margin-inline: auto;
}

.vsg-access-panel {
    display: grid;

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

    padding:
        var(--vsg-access-panel-padding);

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

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

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

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

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

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

.vsg-access-brand {
    display: flex;
    align-items: center;

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

.vsg-access-brand-mark {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 3rem;

    overflow: hidden;

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

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

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

    background:
        var(--vsg-gold-surface-1);

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

.vsg-access-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-access-form {
    display: grid;

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

.vsg-access-field {
    display: grid;

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

.vsg-access-actions {
    display: grid;

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

.vsg-access-secondary-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

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

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

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

.vsg-access-trust {
    display: grid;

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

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

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

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

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

    color:
        var(--vsg-info);

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

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


/* ============================================================
 * 9. LOGIN APP
 * ============================================================
 */

.vsg-login-app
.vsg-app-hero {
    min-height: 13rem;
}

.vsg-login-app
.vsg-access-panel {
    position: relative;
}

.vsg-login-status {
    min-height: 3rem;

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

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

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

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

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

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

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

.vsg-login-status:empty {
    display: none;
}

.vsg-login-status[data-state="success"] {
    color:
        var(--vsg-success);

    border-color:
        var(--vsg-success-line);

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

.vsg-login-status[data-state="error"] {
    color:
        var(--vsg-danger);

    border-color:
        var(--vsg-danger-line);

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

.vsg-login-status[data-state="loading"] {
    color:
        var(--vsg-info);

    border-color:
        var(--vsg-info-line);

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


/* ============================================================
 * 10. REGISTRATION APP
 * ============================================================
 */

.vsg-register-app {
    min-height: 100vh;
    min-height: 100dvh;
}

.vsg-register-layout {
    display: grid;

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

    width: 100%;
    max-width:
        var(--vsg-workflow-width);

    margin-inline: auto;
}

.vsg-register-progress {
    display: grid;

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

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

.vsg-register-progress-item {
    height: 0.3rem;

    overflow: hidden;

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

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

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

.vsg-register-progress-item[data-state="complete"] {
    background:
        var(--vsg-gold-400);
}

.vsg-register-progress-item[data-state="current"] {
    background:
        linear-gradient(
            90deg,
            var(--vsg-gold-200),
            var(--vsg-gold-500)
        );

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

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

.vsg-register-step[data-state="active"],
.vsg-register-step.is-active {
    display: grid;

    gap:
        var(--vsg-workflow-step-gap);
}

.vsg-register-step-header {
    display: grid;

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

.vsg-register-step-title {
    margin: 0;

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

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

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

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

.vsg-register-step-description {
    margin: 0;

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

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

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

.vsg-register-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

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


/* ============================================================
 * 11. ACTIVATION APP
 * ============================================================
 */

.vsg-activation-app
.vsg-app-hero {
    min-height: 13rem;
}

.vsg-activation-layout {
    display: grid;

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

.vsg-capacity-current {
    display: grid;

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

    align-items: center;

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

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

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

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

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 38%
        ),
        var(--vsg-glass-3);

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

.vsg-capacity-current-label {
    color:
        var(--vsg-text-tertiary);

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

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

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

    text-transform: uppercase;
}

.vsg-capacity-current-value {
    margin-top:
        var(--vsg-space-1);

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

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

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

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

    font-variant-numeric:
        tabular-nums;
}

.vsg-capacity-current-unit {
    margin-top:
        var(--vsg-space-1);

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

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

.vsg-activation-code-panel {
    display: grid;

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

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

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

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

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

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

.vsg-activation-code-input {
    font-family:
        var(--vsg-font-mono);

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

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.vsg-activation-result {
    display: none;

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

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

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

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

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

.vsg-activation-result[data-state="success"],
.vsg-activation-result[data-state="error"],
.vsg-activation-result[data-state="pending"] {
    display: grid;
}

.vsg-activation-result[data-state="success"] {
    color:
        var(--vsg-success);

    border-color:
        var(--vsg-success-line);

    background:
        linear-gradient(
            135deg,
            var(--vsg-success-surface),
            transparent 70%
        ),
        var(--vsg-glass-3);
}

.vsg-activation-result[data-state="error"] {
    color:
        var(--vsg-danger);

    border-color:
        var(--vsg-danger-line);

    background:
        linear-gradient(
            135deg,
            var(--vsg-danger-surface),
            transparent 70%
        ),
        var(--vsg-glass-3);
}


/* ============================================================
 * 12. VORTEX HOME APP
 * ============================================================
 */

.vsg-home-app {
    position: relative;
}

.vsg-home-layout {
    display: grid;

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

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

    width: 100%;
}

.vsg-home-main {
    min-width: 0;
}

.vsg-home-aside {
    display: none;

    min-width: 0;
}

.vsg-home-quick-actions {
    display: grid;

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

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

.vsg-home-quick-action {
    display: grid;

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

    align-items: center;

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

    min-height: 4.5rem;

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

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

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

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

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

    transition:
        var(--vsg-transition-control);
}

.vsg-home-quick-action-icon {
    display: grid;
    place-items: center;

    width: 2.75rem;
    height: 2.75rem;

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

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

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

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

.vsg-home-quick-action-title {
    font-size:
        var(--vsg-font-size-md);

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

.vsg-home-quick-action-detail {
    margin-top:
        var(--vsg-space-1);

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

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

.vsg-home-atlas-preview {
    display: grid;

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


/* ============================================================
 * 13. CONTINUITY CENTER APP
 * ============================================================
 */

.vsg-continuity-center-app {
    position: relative;
}

.vsg-continuity-center-layout {
    display: grid;

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

    align-items: start;

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

.vsg-continuity-center-main {
    display: grid;

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

    min-width: 0;
}

.vsg-continuity-center-aside {
    display: grid;

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

    min-width: 0;
}

.vsg-continuity-center-metrics {
    display: grid;

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

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

.vsg-continuity-center-status-note {
    padding:
        var(--vsg-space-3);

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

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

    color:
        var(--vsg-info);

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

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

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


/* ============================================================
 * 14. IDENTITY APP
 * ============================================================
 */

.vsg-identity-app {
    position: relative;
}

.vsg-identity-hero {
    display: grid;

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

    align-items: center;

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

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

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

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

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            var(--vsg-glass-3),
            var(--vsg-glass-4)
        );

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

.vsg-identity-hero-avatar {
    display: grid;
    place-items: center;

    width:
        var(--vsg-avatar-size-xl);

    height:
        var(--vsg-avatar-size-xl);

    overflow: hidden;

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

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

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

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

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

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

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

.vsg-identity-hero-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-identity-hero-name {
    margin: 0;

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

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

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

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

.vsg-identity-hero-id {
    margin-top:
        var(--vsg-space-2);

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

    font-family:
        var(--vsg-font-mono);

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

    overflow-wrap:
        anywhere;
}

.vsg-identity-hero-meta {
    display: flex;
    flex-wrap: wrap;

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

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

.vsg-identity-layout {
    display: grid;

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

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


/* ============================================================
 * 15. VIEWER APP
 * ============================================================
 */

.vsg-viewer-app {
    position: fixed;
    inset: 0;

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

    display: flex;
    flex-direction: column;

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

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

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

    overflow: hidden;
}

.vsg-viewer-toolbar {
    position: relative;

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

    display: grid;

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

    align-items: center;

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

    min-height:
        calc(
            var(--vsg-viewer-toolbar-height) +
            var(--vsg-safe-top)
        );

    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)
        );

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

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

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

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

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

.vsg-viewer-title {
    min-width: 0;

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

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

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

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.vsg-viewer-subtitle {
    margin-top:
        var(--vsg-space-1);

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

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

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.vsg-viewer-viewport {
    position: relative;

    display: flex;
    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;
}

.vsg-viewer-document-region {
    flex: 1 1 auto;

    min-width: 0;

    overflow: auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

.vsg-viewer-document-stage {
    display: grid;
    justify-items: center;

    min-height: 100%;

    padding:
        var(--vsg-space-5)
        var(--vsg-space-3)
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-viewer-controls-height) +
            var(--vsg-space-6)
        );
}

.vsg-viewer-page {
    width:
        min(
            100%,
            var(--vsg-viewer-page-width)
        );

    min-height: 60rem;

    padding:
        clamp(
            var(--vsg-space-5),
            6vw,
            var(--vsg-space-12)
        );

    color:
        var(--vsg-viewer-page-color);

    background:
        var(--vsg-viewer-page-background);

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

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.48);

    transform-origin:
        top center;
}

.vsg-viewer-controls {
    position: fixed;

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

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

    display: flex;
    align-items: center;

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

    min-height:
        var(--vsg-viewer-controls-height);

    max-width:
        calc(
            100% -
            var(--vsg-space-6)
        );

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

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

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

    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%);

    transform:
        translateX(-50%);
}

.vsg-viewer-progress {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    overflow: hidden;

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

.vsg-viewer-progress-value {
    width:
        calc(
            var(--vsg-viewer-progress, 0) * 1%
        );

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--vsg-gold-200),
            var(--vsg-gold-500)
        );

    transition:
        width
        var(--vsg-duration-normal)
        var(--vsg-ease-emphasized);
}

.vsg-viewer-side-panel {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

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

    width:
        min(
            100%,
            var(--vsg-viewer-sheet-width)
        );

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

    overflow: auto;

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

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

    box-shadow:
        -24px 0 60px rgba(0, 0, 0, 0.34);

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

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

.vsg-viewer-side-panel[hidden] {
    display: none;
}

.vsg-viewer-mode-tabs {
    display: flex;

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

    overflow-x: auto;

    padding-bottom:
        var(--vsg-space-1);

    scrollbar-width:
        none;
}

.vsg-viewer-mode-tabs::-webkit-scrollbar {
    display: none;
}


/* ============================================================
 * 16. SYSTEM APP STATUS BAR
 * ============================================================
 */

.vsg-app-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

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

    width: 100%;

    padding:
        var(--vsg-space-3)
        max(
            var(--vsg-space-4),
            var(--vsg-safe-right)
        )
        var(--vsg-space-3)
        max(
            var(--vsg-space-4),
            var(--vsg-safe-left)
        );

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

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

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

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

.vsg-app-status-bar[data-state="offline"] {
    color:
        var(--vsg-warning);

    border-color:
        var(--vsg-warning-line);

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

.vsg-app-status-bar[data-state="synchronizing"] {
    color:
        var(--vsg-info);

    border-color:
        var(--vsg-info-line);

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

.vsg-app-status-bar[data-state="error"] {
    color:
        var(--vsg-danger);

    border-color:
        var(--vsg-danger-line);

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


/* ============================================================
 * 17. SHARED APP STATES
 * ============================================================
 */

.vsg-app-state {
    display: grid;

    justify-items: center;

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

    width:
        min(
            100%,
            var(--vsg-app-state-width)
        );

    margin-inline: auto;

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

    text-align: center;
}

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

    width:
        var(--vsg-app-state-icon-size);

    height:
        var(--vsg-app-state-icon-size);

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

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

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

    background:
        var(--vsg-gold-surface-1);

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

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

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

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

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

.vsg-app-state-description {
    max-width: 34rem;

    margin: 0;

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

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

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

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

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

.vsg-app-state[data-state="error"]
.vsg-app-state-icon {
    color:
        var(--vsg-danger);

    border-color:
        var(--vsg-danger-line);

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

.vsg-app-state[data-state="offline"]
.vsg-app-state-icon {
    color:
        var(--vsg-warning);

    border-color:
        var(--vsg-warning-line);

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

.vsg-app-state[data-state="success"]
.vsg-app-state-icon {
    color:
        var(--vsg-success);

    border-color:
        var(--vsg-success-line);

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


/* ============================================================
 * 18. APPLICATION LOADING
 * ============================================================
 */

.vsg-app-loading {
    display: grid;

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

.vsg-app-loading-row {
    display: grid;

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

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

.vsg-app-loading-avatar {
    width: 3rem;
    height: 3rem;

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

.vsg-app-loading-content {
    display: grid;

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

.vsg-app-loading-line {
    height: 0.875rem;

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

.vsg-app-loading-line--short {
    width: 42%;
}

.vsg-app-loading-line--medium {
    width: 68%;
}

.vsg-app-loading-card {
    min-height: 10rem;

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


/* ============================================================
 * 19. OFFLINE EXPERIENCE
 * ============================================================
 */

.vsg-offline-panel {
    display: grid;

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

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

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

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

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

    color:
        var(--vsg-warning);

    background:
        linear-gradient(
            135deg,
            var(--vsg-warning-surface),
            transparent 70%
        ),
        var(--vsg-glass-2);
}

.vsg-offline-panel-icon {
    display: grid;
    place-items: center;

    width: 2.75rem;
    height: 2.75rem;

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

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

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

.vsg-offline-panel-title {
    margin: 0;

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

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

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

.vsg-offline-panel-description {
    margin:
        var(--vsg-space-1)
        0
        0;

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

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

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

.vsg-sync-queue {
    display: grid;

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

.vsg-sync-queue-item {
    display: grid;

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

    align-items: center;

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

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

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

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

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

.vsg-sync-queue-item[data-sync-state="failed"] {
    border-color:
        var(--vsg-danger-line);

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

.vsg-sync-queue-item[data-sync-state="synchronized"] {
    border-color:
        var(--vsg-success-line);

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


/* ============================================================
 * 20. APPLICATION SEARCH
 * ============================================================
 */

.vsg-system-search {
    display: grid;

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

.vsg-system-search-header {
    position: sticky;

    top:
        calc(
            var(--vsg-safe-top) +
            var(--vsg-toolbar-height) +
            var(--vsg-space-2)
        );

    z-index:
        var(--vsg-elevation-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-md);

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

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

.vsg-system-search-results {
    display: grid;

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

.vsg-system-search-group {
    display: grid;

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

.vsg-system-search-group-title {
    margin: 0;

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

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

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

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

    text-transform: uppercase;
}


/* ============================================================
 * 21. NOTIFICATION CENTER
 * ============================================================
 */

.vsg-notification-center {
    display: grid;

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

.vsg-notification-group {
    display: grid;

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

.vsg-notification-group-title {
    margin: 0;

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

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

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

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

    text-transform: uppercase;
}

.vsg-notification-item {
    display: grid;

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

    align-items: start;

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

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

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

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

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

.vsg-notification-item[data-read="false"] {
    border-color:
        var(--vsg-gold-line-2);

    background:
        linear-gradient(
            135deg,
            var(--vsg-gold-surface-1),
            transparent 72%
        ),
        var(--vsg-surface-1);
}

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

    width: 2.5rem;
    height: 2.5rem;

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

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

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

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

.vsg-notification-title {
    margin: 0;

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

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

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

.vsg-notification-description {
    margin:
        var(--vsg-space-1)
        0
        0;

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

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

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

.vsg-notification-date {
    color:
        var(--vsg-text-muted);

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

    white-space: nowrap;
}


/* ============================================================
 * 22. SETTINGS APP
 * ============================================================
 */

.vsg-settings-layout {
    display: grid;

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

.vsg-settings-group {
    display: grid;

    overflow: hidden;

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

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

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

.vsg-settings-row {
    display: grid;

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

    align-items: center;

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

    min-height: 4rem;

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

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

.vsg-settings-row:last-child {
    border-bottom: 0;
}

.vsg-settings-row-icon {
    display: grid;
    place-items: center;

    width: 2.25rem;
    height: 2.25rem;

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

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

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

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

.vsg-settings-row-title {
    color:
        var(--vsg-text-primary);

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

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

.vsg-settings-row-description {
    margin-top:
        var(--vsg-space-1);

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

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


/* ============================================================
 * 23. COMPATIBILITY LAYER
 * ============================================================
 *
 * Ces règles permettent d’appliquer progressivement VSG aux
 * classes déjà présentes dans les fichiers opérationnels.
 *
 * Elles doivent rester temporaires et être supprimées après
 * migration complète de chaque application.
 * ============================================================
 */

.vsg-compat .wrap,
.vsg-compat .shell {
    width: 100%;
    max-width:
        var(--vsg-legacy-shell-width);

    margin-inline: auto;

    padding:
        var(--vsg-space-3)
        var(--vsg-space-3)
        var(--vsg-legacy-bottom-offset);
}

.vsg-compat .appFrame {
    min-height:
        calc(
            100dvh -
            var(--vsg-safe-bottom) -
            var(--vsg-space-6)
        );

    overflow: hidden;

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

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

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

    box-shadow:
        var(--vsg-app-shell-shadow);
}

.vsg-compat .topbar,
.vsg-compat .header {
    border-color:
        var(--vsg-line-1);

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

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

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

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

.vsg-compat .hero,
.vsg-compat .heroCard {
    border-color:
        var(--vsg-gold-line-2);

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

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            var(--vsg-glass-3),
            var(--vsg-glass-4)
        );

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

.vsg-compat .card,
.vsg-compat .panel {
    border-color:
        var(--vsg-line-1);

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

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

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

.vsg-compat .primary,
.vsg-compat .btn-primary {
    min-height:
        var(--vsg-control-height-lg);

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

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

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

    background:
        linear-gradient(
            135deg,
            var(--vsg-gold-200),
            var(--vsg-gold-500)
        );

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

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

.vsg-compat input,
.vsg-compat textarea,
.vsg-compat select {
    min-height:
        var(--vsg-control-height-lg);

    border-color:
        var(--vsg-line-1);

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

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

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

.vsg-compat input:focus,
.vsg-compat textarea:focus,
.vsg-compat select:focus {
    border-color:
        var(--vsg-gold-line-3);

    box-shadow:
        var(--vsg-focus-ring);
}

.vsg-compat .bottom-nav,
.vsg-compat .bottomBar {
    border-color:
        var(--vsg-line-1);

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

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

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

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


/* ============================================================
 * 24. APPLICATION-SPECIFIC BODY SELECTORS
 * ============================================================
 */

body[data-vortex-app="login"] {
    --vsg-current-app-width:
        var(--vsg-access-width);
}

body[data-vortex-app="register"] {
    --vsg-current-app-width:
        var(--vsg-workflow-width);
}

body[data-vortex-app="activate"] {
    --vsg-current-app-width:
        var(--vsg-workflow-width);
}

body[data-vortex-app="home"],
body[data-vortex-app="vortex"] {
    --vsg-current-app-width:
        var(--vsg-home-width);
}

body[data-vortex-app="account"],
body[data-vortex-app="continuity"] {
    --vsg-current-app-width:
        var(--vsg-continuity-center-width);
}

body[data-vortex-app="profile"],
body[data-vortex-app="identity"] {
    --vsg-current-app-width:
        var(--vsg-identity-width);
}

body[data-vortex-app="viewer"] {
    overflow: hidden;
}


/* ============================================================
 * 25. MOBILE
 * ============================================================
 */

@media (max-width: 30rem) {
    .vsg-app-content {
        --vsg-app-content-padding:
            var(--vsg-space-3);
    }

    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-activation-code-panel,
    .vsg-capacity-current,
    .vsg-identity-hero {
        padding:
            var(--vsg-space-4);
    }

    .vsg-app-hero-title {
        max-width: none;
    }

    .vsg-home-quick-actions,
    .vsg-app-grid--metrics,
    .vsg-continuity-center-metrics {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .vsg-capacity-current {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .vsg-identity-hero {
        grid-template-columns:
            minmax(0, 1fr);

        justify-items: start;
    }

    .vsg-identity-hero-avatar {
        width:
            var(--vsg-avatar-size-lg);

        height:
            var(--vsg-avatar-size-lg);
    }

    .vsg-register-step-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .vsg-viewer-page {
        min-height: 48rem;

        border-radius: 0;
    }

    .vsg-viewer-side-panel {
        width: 100%;
    }

    .vsg-viewer-controls {
        max-width:
            calc(
                100% -
                var(--vsg-space-4)
            );
    }
}


/* ============================================================
 * 26. TABLET
 * ============================================================
 */

@media (min-width: 48rem) {
    :root {
        --vsg-app-content-padding:
            var(--vsg-space-6);

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

    .vsg-app-shell--contained {
        width:
            calc(
                100% -
                var(--vsg-space-8)
            );

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

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

    .vsg-home-quick-actions {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

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

    .vsg-identity-layout {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(16rem, 0.7fr);
    }

    .vsg-viewer-document-stage {
        padding-inline:
            var(--vsg-space-8);
    }
}


/* ============================================================
 * 27. DESKTOP
 * ============================================================
 */

@media (min-width: 64rem) {
    .vsg-app-shell--contained {
        min-height:
            calc(
                100dvh -
                var(--vsg-space-8)
            );
    }

    .vsg-home-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(18rem, 0.34fr);

        align-items: start;
    }

    .vsg-home-aside {
        position: sticky;

        top:
            calc(
                var(--vsg-toolbar-height) +
                var(--vsg-space-4)
            );

        display: grid;

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

    .vsg-continuity-center-layout {
        grid-template-columns:
            minmax(0, 1.7fr)
            minmax(18rem, 0.65fr);
    }

    .vsg-continuity-center-aside {
        position: sticky;

        top:
            calc(
                var(--vsg-toolbar-height) +
                var(--vsg-space-4)
            );
    }

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

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


/* ============================================================
 * 28. LANDSCAPE MOBILE
 * ============================================================
 */

@media (
    orientation: landscape
) and (
    max-height: 32rem
) {
    .vsg-access-app {
        justify-content: flex-start;
    }

    .vsg-app-hero {
        min-height: 8rem;

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

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

    .vsg-viewer-toolbar {
        min-height:
            calc(
                3.25rem +
                var(--vsg-safe-top)
            );
    }

    .vsg-viewer-document-stage {
        padding-top:
            var(--vsg-space-3);
    }
}


/* ============================================================
 * 29. KEYBOARD VISIBLE
 * ============================================================
 */

html.vui-env--keyboard-visible
.vsg-app-content--with-bottom-bar {
    padding-bottom:
        calc(
            var(--vsg-keyboard-height) +
            var(--vsg-space-4)
        );
}

html.vui-env--keyboard-visible
.vsg-access-app {
    justify-content: flex-start;
}

html.vui-env--keyboard-visible
.vsg-viewer-controls {
    display: none;
}


/* ============================================================
 * 30. GLASS FALLBACK
 * ============================================================
 */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    .vsg-access-panel,
    .vsg-activation-code-panel,
    .vsg-capacity-current,
    .vsg-identity-hero,
    .vsg-viewer-toolbar,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-system-search-header,
    .vsg-settings-group {
        background:
            var(--vsg-glass-solid);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 31. REDUCED TRANSPARENCY
 * ============================================================
 */

@media (prefers-reduced-transparency: reduce) {
    .vsg-app-shell,
    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-activation-code-panel,
    .vsg-capacity-current,
    .vsg-identity-hero,
    .vsg-viewer-toolbar,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-system-search-header,
    .vsg-settings-group {
        background:
            var(--vsg-glass-solid);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 32. REDUCED MOTION
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {
    .vsg-system-app,
    .vsg-app-shell,
    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-home-quick-action,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-viewer-progress-value {
        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;

        filter:
            none !important;
    }
}


/* ============================================================
 * 33. HIGH CONTRAST
 * ============================================================
 */

@media (prefers-contrast: more) {
    .vsg-app-shell--contained,
    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-capacity-current,
    .vsg-activation-code-panel,
    .vsg-identity-hero,
    .vsg-viewer-toolbar,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-home-quick-action,
    .vsg-notification-item,
    .vsg-settings-group {
        border-width: 2px;
    }
}


/* ============================================================
 * 34. FORCED COLORS
 * ============================================================
 */

@media (forced-colors: active) {
    .vsg-app-shell,
    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-capacity-current,
    .vsg-activation-code-panel,
    .vsg-activation-result,
    .vsg-home-quick-action,
    .vsg-identity-hero,
    .vsg-viewer-toolbar,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-app-state,
    .vsg-offline-panel,
    .vsg-notification-item,
    .vsg-settings-group,
    .vsg-settings-row {
        color:
            CanvasText;

        background:
            Canvas;

        border:
            1px solid
            CanvasText;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }

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

    .vsg-viewer-page {
        color:
            CanvasText;

        background:
            Canvas;
    }
}


/* ============================================================
 * 35. PRINT
 * ============================================================
 */

@media print {
    .vsg-system-app,
    .vsg-app-shell,
    .vsg-app-main,
    .vsg-app-content,
    .vsg-viewer-app,
    .vsg-viewer-viewport,
    .vsg-viewer-document-region,
    .vsg-viewer-document-stage {
        position: static;

        display: block;

        width: auto;
        height: auto;
        min-height: auto;

        margin: 0;
        padding: 0;

        color:
            #111111;

        background:
            #ffffff;

        overflow: visible;
    }

    .vsg-app-header,
    .vsg-app-footer,
    .vsg-viewer-toolbar,
    .vsg-viewer-controls,
    .vsg-viewer-side-panel,
    .vsg-home-quick-actions,
    .vsg-app-status-bar {
        display:
            none !important;
    }

    .vsg-app-hero,
    .vsg-access-panel,
    .vsg-capacity-current,
    .vsg-activation-code-panel,
    .vsg-identity-hero,
    .vsg-viewer-page,
    .vsg-notification-item,
    .vsg-settings-group {
        break-inside:
            avoid;

        color:
            #111111;

        background:
            #ffffff;

        border:
            1px solid
            #cccccc;

        box-shadow:
            none;
    }

    .vsg-viewer-page {
        width: 100%;
        min-height: auto;

        padding: 0;
    }
}


/* ============================================================
 * 36. GOVERNANCE
 * ============================================================
 *
 * Les classes suivantes peuvent être appliquées par le
 * UIEngine ou UIEnvironment.
 * ============================================================
 */

html[data-vsg-system-apps="disabled"]
.vsg-system-app {
    all: revert;
}

html[data-vsg-density="compact"] {
    --vsg-app-content-padding:
        var(--vsg-space-3);

    --vsg-app-section-gap:
        var(--vsg-space-5);

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

html[data-vsg-density="comfortable"] {
    --vsg-app-content-padding:
        var(--vsg-space-6);

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

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


/* ============================================================
 * 37. FINAL DOCTRINE
 * ============================================================
 *
 * Les applications VORTEX ne sont pas conçues pour donner
 * l’impression de naviguer entre des fichiers HTML isolés.
 *
 * Elles constituent les différentes expressions d’un seul
 * environnement : VORTEX OS.
 *
 * Login retrouve l’identité.
 *
 * Register fonde l’identité documentaire.
 *
 * Activate renforce la capacité documentaire.
 *
 * VORTEX Home donne le contexte général.
 *
 * Account permet de gouverner la continuité.
 *
 * Profil expose l’identité documentaire.
 *
 * Viewer permet de lire et de vérifier.
 *
 * Chacune conserve sa responsabilité opérationnelle.
 * Toutes partagent la même grammaire visuelle.
 *
 * L’interface ne doit jamais déclarer une protection, une
 * vérification ou une continuité sans fondement réel.
 *
 * La beauté sert la lisibilité.
 *
 * Le mouvement sert la compréhension.
 *
 * Le verre sert la hiérarchie.
 *
 * La continuité demeure la finalité.
 * ============================================================
 */