/*!
 * ============================================================
 * VORTEX OS
 * VORTEX Sovereign Glass
 * File    : /assets/css/sovereign-glass/vsg-foundations.css
 * Version : 1.0.0
 * Status  : Foundation Edition
 * Standard: VSG-001
 * ============================================================
 *
 * Mission
 * ------------------------------------------------------------
 * Constituer la source de vérité visuelle commune à toutes
 * les applications système de VORTEX.
 *
 * Ce fichier définit exclusivement :
 *
 * - les couleurs ;
 * - la typographie ;
 * - les espacements ;
 * - les rayons ;
 * - les niveaux de verre ;
 * - les ombres ;
 * - la profondeur ;
 * - la lumière ;
 * - les grilles ;
 * - les Safe Areas ;
 * - les dimensions tactiles ;
 * - les préférences d’accessibilité ;
 * - les fondations responsive.
 *
 * Il ne contient :
 *
 * - aucun composant métier ;
 * - aucune logique Atlas ;
 * - aucune logique SDS1-ID ;
 * - aucune logique Wallet ;
 * - aucune logique de continuité ;
 * - aucune animation complexe.
 *
 * Doctrine
 * ------------------------------------------------------------
 * Aucun composant VORTEX ne doit improviser librement ses
 * couleurs, espacements, rayons, ombres ou niveaux de verre.
 *
 * Toute valeur visuelle doit provenir des tokens définis ici.
 * ============================================================
 */


/* ============================================================
 * 1. ROOT TOKENS
 * ============================================================
 */

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

    --vsg-version: "1.0.0";


    /* --------------------------------------------------------
     * 1.2 Backgrounds
     * --------------------------------------------------------
     *
     * bg-0 : vide profond
     * bg-1 : fond principal
     * bg-2 : fond secondaire
     * bg-3 : surface élevée
     * bg-4 : surface dominante
     */

    --vsg-bg-0: #03050a;
    --vsg-bg-1: #06080d;
    --vsg-bg-2: #0a0e16;
    --vsg-bg-3: #0f1521;
    --vsg-bg-4: #151d2c;

    --vsg-bg-page: var(--vsg-bg-1);
    --vsg-bg-app: var(--vsg-bg-1);
    --vsg-bg-elevated: var(--vsg-bg-3);


    /* --------------------------------------------------------
     * 1.3 Surfaces
     * --------------------------------------------------------
     */

    --vsg-surface-0: rgba(255, 255, 255, 0.018);
    --vsg-surface-1: rgba(255, 255, 255, 0.028);
    --vsg-surface-2: rgba(255, 255, 255, 0.042);
    --vsg-surface-3: rgba(255, 255, 255, 0.060);
    --vsg-surface-4: rgba(255, 255, 255, 0.085);

    --vsg-surface-dark-1: rgba(7, 10, 17, 0.76);
    --vsg-surface-dark-2: rgba(9, 13, 21, 0.84);
    --vsg-surface-dark-3: rgba(12, 17, 27, 0.91);
    --vsg-surface-dark-4: rgba(15, 21, 33, 0.96);


    /* --------------------------------------------------------
     * 1.4 Glass
     * --------------------------------------------------------
     */

    --vsg-glass-0: rgba(12, 17, 27, 0.46);
    --vsg-glass-1: rgba(12, 17, 27, 0.62);
    --vsg-glass-2: rgba(13, 18, 29, 0.76);
    --vsg-glass-3: rgba(14, 20, 31, 0.86);
    --vsg-glass-4: rgba(15, 21, 33, 0.94);
    --vsg-glass-solid: #101621;

    --vsg-glass-light-1: rgba(255, 255, 255, 0.025);
    --vsg-glass-light-2: rgba(255, 255, 255, 0.045);
    --vsg-glass-light-3: rgba(255, 255, 255, 0.070);

    --vsg-glass-highlight:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.060) 0%,
            rgba(255, 255, 255, 0.015) 28%,
            rgba(255, 255, 255, 0.000) 58%
        );

    --vsg-glass-depth:
        linear-gradient(
            180deg,
            rgba(19, 26, 40, 0.96) 0%,
            rgba(10, 14, 23, 0.98) 100%
        );


    /* --------------------------------------------------------
     * 1.5 Sovereign Gold
     * --------------------------------------------------------
     *
     * L’or VORTEX guide, hiérarchise et confirme.
     * Il ne doit pas devenir une couleur de remplissage massive.
     */

    --vsg-gold-50: #fffaf0;
    --vsg-gold-100: #f8e9c1;
    --vsg-gold-200: #f0d89d;
    --vsg-gold-300: #e4c475;
    --vsg-gold-400: #d6b15e;
    --vsg-gold-500: #bd9141;
    --vsg-gold-600: #96702f;
    --vsg-gold-700: #6f5021;
    --vsg-gold-800: #493417;
    --vsg-gold-900: #2b1e0d;

    --vsg-gold: var(--vsg-gold-400);
    --vsg-gold-soft: var(--vsg-gold-200);
    --vsg-gold-strong: var(--vsg-gold-500);

    --vsg-gold-surface-1: rgba(214, 177, 94, 0.055);
    --vsg-gold-surface-2: rgba(214, 177, 94, 0.090);
    --vsg-gold-surface-3: rgba(214, 177, 94, 0.140);
    --vsg-gold-surface-4: rgba(214, 177, 94, 0.210);

    --vsg-gold-line-1: rgba(214, 177, 94, 0.120);
    --vsg-gold-line-2: rgba(214, 177, 94, 0.200);
    --vsg-gold-line-3: rgba(214, 177, 94, 0.300);
    --vsg-gold-line-4: rgba(214, 177, 94, 0.440);

    --vsg-gold-glow-sm:
        0 0 16px rgba(214, 177, 94, 0.08);

    --vsg-gold-glow-md:
        0 0 28px rgba(214, 177, 94, 0.12);

    --vsg-gold-glow-lg:
        0 0 48px rgba(214, 177, 94, 0.16);


    /* --------------------------------------------------------
     * 1.6 Text
     * --------------------------------------------------------
     */

    --vsg-text-primary: #f3f6fb;
    --vsg-text-secondary: #d7deea;
    --vsg-text-tertiary: #a8b2c4;
    --vsg-text-muted: #7f899c;
    --vsg-text-disabled: rgba(216, 223, 235, 0.38);
    --vsg-text-inverse: #11151d;

    --vsg-text-gold: var(--vsg-gold-200);
    --vsg-text-gold-strong: #f7e5ba;


    /* --------------------------------------------------------
     * 1.7 Semantic States
     * --------------------------------------------------------
     */

    --vsg-success: #bfe5c8;
    --vsg-success-strong: #79c98c;
    --vsg-success-surface: rgba(121, 201, 140, 0.090);
    --vsg-success-line: rgba(121, 201, 140, 0.220);

    --vsg-warning: #e6c57e;
    --vsg-warning-strong: #d4a84f;
    --vsg-warning-surface: rgba(230, 197, 126, 0.090);
    --vsg-warning-line: rgba(230, 197, 126, 0.220);

    --vsg-danger: #efb5b5;
    --vsg-danger-strong: #df7474;
    --vsg-danger-surface: rgba(223, 116, 116, 0.090);
    --vsg-danger-line: rgba(223, 116, 116, 0.220);

    --vsg-info: #b9c9f4;
    --vsg-info-strong: #819bdc;
    --vsg-info-surface: rgba(129, 155, 220, 0.090);
    --vsg-info-line: rgba(129, 155, 220, 0.220);

    --vsg-neutral: #bac2d0;
    --vsg-neutral-surface: rgba(186, 194, 208, 0.075);
    --vsg-neutral-line: rgba(186, 194, 208, 0.180);


    /* --------------------------------------------------------
     * 1.8 Lines
     * --------------------------------------------------------
     */

    --vsg-line-0: rgba(255, 255, 255, 0.035);
    --vsg-line-1: rgba(255, 255, 255, 0.060);
    --vsg-line-2: rgba(255, 255, 255, 0.090);
    --vsg-line-3: rgba(255, 255, 255, 0.130);
    --vsg-line-4: rgba(255, 255, 255, 0.190);

    --vsg-line-default: var(--vsg-line-1);
    --vsg-line-emphasis: var(--vsg-line-2);
    --vsg-line-focus: var(--vsg-gold-line-3);


    /* --------------------------------------------------------
     * 1.9 Typography Families
     * --------------------------------------------------------
     */

    --vsg-font-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --vsg-font-mono:
        "SFMono-Regular",
        "SF Mono",
        ui-monospace,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;


    /* --------------------------------------------------------
     * 1.10 Font Sizes
     * --------------------------------------------------------
     */

    --vsg-font-size-2xs: 0.625rem;
    --vsg-font-size-xs: 0.6875rem;
    --vsg-font-size-sm: 0.75rem;
    --vsg-font-size-md: 0.875rem;
    --vsg-font-size-base: 1rem;
    --vsg-font-size-lg: 1.125rem;
    --vsg-font-size-xl: 1.375rem;
    --vsg-font-size-2xl: 1.75rem;
    --vsg-font-size-3xl: 2.25rem;
    --vsg-font-size-4xl: 3rem;
    --vsg-font-size-5xl: 4rem;


    /* --------------------------------------------------------
     * 1.11 Line Heights
     * --------------------------------------------------------
     */

    --vsg-line-height-none: 1;
    --vsg-line-height-tight: 1.10;
    --vsg-line-height-compact: 1.25;
    --vsg-line-height-normal: 1.45;
    --vsg-line-height-relaxed: 1.62;
    --vsg-line-height-loose: 1.80;


    /* --------------------------------------------------------
     * 1.12 Font Weights
     * --------------------------------------------------------
     */

    --vsg-font-weight-regular: 400;
    --vsg-font-weight-medium: 500;
    --vsg-font-weight-semibold: 600;
    --vsg-font-weight-bold: 700;
    --vsg-font-weight-extrabold: 800;
    --vsg-font-weight-black: 900;


    /* --------------------------------------------------------
     * 1.13 Letter Spacing
     * --------------------------------------------------------
     */

    --vsg-tracking-tight: -0.035em;
    --vsg-tracking-normal: 0;
    --vsg-tracking-wide: 0.045em;
    --vsg-tracking-wider: 0.090em;
    --vsg-tracking-widest: 0.160em;


    /* --------------------------------------------------------
     * 1.14 Spacing Scale
     * --------------------------------------------------------
     */

    --vsg-space-0: 0;
    --vsg-space-1: 0.25rem;
    --vsg-space-2: 0.5rem;
    --vsg-space-3: 0.75rem;
    --vsg-space-4: 1rem;
    --vsg-space-5: 1.25rem;
    --vsg-space-6: 1.5rem;
    --vsg-space-7: 1.75rem;
    --vsg-space-8: 2rem;
    --vsg-space-10: 2.5rem;
    --vsg-space-12: 3rem;
    --vsg-space-14: 3.5rem;
    --vsg-space-16: 4rem;
    --vsg-space-20: 5rem;
    --vsg-space-24: 6rem;

    --vsg-gap-xs: var(--vsg-space-2);
    --vsg-gap-sm: var(--vsg-space-3);
    --vsg-gap-md: var(--vsg-space-4);
    --vsg-gap-lg: var(--vsg-space-6);
    --vsg-gap-xl: var(--vsg-space-8);


    /* --------------------------------------------------------
     * 1.15 Radius Scale
     * --------------------------------------------------------
     */

    --vsg-radius-none: 0;
    --vsg-radius-xs: 0.5rem;
    --vsg-radius-sm: 0.75rem;
    --vsg-radius-md: 1rem;
    --vsg-radius-lg: 1.25rem;
    --vsg-radius-xl: 1.5rem;
    --vsg-radius-2xl: 1.75rem;
    --vsg-radius-3xl: 2rem;
    --vsg-radius-pill: 999px;

    --vsg-radius-control: var(--vsg-radius-md);
    --vsg-radius-card: var(--vsg-radius-xl);
    --vsg-radius-panel: var(--vsg-radius-2xl);
    --vsg-radius-modal: var(--vsg-radius-3xl);


    /* --------------------------------------------------------
     * 1.16 Blur Scale
     * --------------------------------------------------------
     */

    --vsg-blur-xs: 4px;
    --vsg-blur-sm: 8px;
    --vsg-blur-md: 14px;
    --vsg-blur-lg: 20px;
    --vsg-blur-xl: 30px;
    --vsg-blur-2xl: 44px;


    /* --------------------------------------------------------
     * 1.17 Shadows
     * --------------------------------------------------------
     */

    --vsg-shadow-none: none;

    --vsg-shadow-xs:
        0 2px 8px rgba(0, 0, 0, 0.12);

    --vsg-shadow-sm:
        0 8px 20px rgba(0, 0, 0, 0.16);

    --vsg-shadow-md:
        0 16px 38px rgba(0, 0, 0, 0.24);

    --vsg-shadow-lg:
        0 24px 64px rgba(0, 0, 0, 0.34);

    --vsg-shadow-xl:
        0 36px 96px rgba(0, 0, 0, 0.44);

    --vsg-shadow-floating:
        0 18px 48px rgba(0, 0, 0, 0.38);

    --vsg-shadow-inset-top:
        inset 0 1px 0 rgba(255, 255, 255, 0.065);

    --vsg-shadow-inset-bottom:
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);

    --vsg-shadow-inset-gold:
        inset 0 0 0 1px rgba(214, 177, 94, 0.045);


    /* --------------------------------------------------------
     * 1.18 Elevation
     * --------------------------------------------------------
     */

    --vsg-elevation-0: 0;
    --vsg-elevation-1: 10;
    --vsg-elevation-2: 20;
    --vsg-elevation-3: 30;
    --vsg-elevation-4: 40;
    --vsg-elevation-5: 50;
    --vsg-elevation-overlay: 100;
    --vsg-elevation-modal: 200;
    --vsg-elevation-toast: 300;
    --vsg-elevation-system: 1000;


    /* --------------------------------------------------------
     * 1.19 Component Dimensions
     * --------------------------------------------------------
     */

    --vsg-control-height-sm: 2.25rem;
    --vsg-control-height-md: 2.75rem;
    --vsg-control-height-lg: 3.25rem;
    --vsg-control-height-xl: 3.75rem;

    --vsg-touch-target-min: 2.75rem;
    --vsg-touch-target-comfortable: 3rem;

    --vsg-icon-size-xs: 0.875rem;
    --vsg-icon-size-sm: 1rem;
    --vsg-icon-size-md: 1.25rem;
    --vsg-icon-size-lg: 1.5rem;
    --vsg-icon-size-xl: 2rem;

    --vsg-avatar-size-sm: 2rem;
    --vsg-avatar-size-md: 2.75rem;
    --vsg-avatar-size-lg: 4rem;
    --vsg-avatar-size-xl: 5.5rem;


    /* --------------------------------------------------------
     * 1.20 Layout Widths
     * --------------------------------------------------------
     */

    --vsg-content-xs: 30rem;
    --vsg-content-sm: 34rem;
    --vsg-content-md: 48rem;
    --vsg-content-lg: 64rem;
    --vsg-content-xl: 78rem;
    --vsg-content-2xl: 90rem;

    --vsg-content-mobile: var(--vsg-content-sm);
    --vsg-content-default: var(--vsg-content-lg);
    --vsg-content-wide: var(--vsg-content-xl);


    /* --------------------------------------------------------
     * 1.21 Responsive Gutters
     * --------------------------------------------------------
     */

    --vsg-gutter-mobile: 0.75rem;
    --vsg-gutter-tablet: 1.25rem;
    --vsg-gutter-desktop: 2rem;

    --vsg-page-gutter: var(--vsg-gutter-mobile);


    /* --------------------------------------------------------
     * 1.22 Grid
     * --------------------------------------------------------
     */

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


    /* --------------------------------------------------------
     * 1.23 Safe Areas
     * --------------------------------------------------------
     */

    --vsg-safe-top:
        env(safe-area-inset-top, 0px);

    --vsg-safe-right:
        env(safe-area-inset-right, 0px);

    --vsg-safe-bottom:
        env(safe-area-inset-bottom, 0px);

    --vsg-safe-left:
        env(safe-area-inset-left, 0px);

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

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


    /* --------------------------------------------------------
     * 1.24 Viewport
     * --------------------------------------------------------
     *
     * UIEnvironment peut remplacer ces valeurs dynamiquement.
     */

    --vsg-vh: 1vh;
    --vsg-vw: 1vw;

    --vsg-viewport-width: 100vw;
    --vsg-viewport-height: 100vh;

    --vsg-keyboard-height: 0px;
    --vsg-keyboard-visible: 0;


    /* --------------------------------------------------------
     * 1.25 Focus
     * --------------------------------------------------------
     */

    --vsg-focus-width: 3px;
    --vsg-focus-color: rgba(214, 177, 94, 0.22);

    --vsg-focus-ring:
        0 0 0 var(--vsg-focus-width)
        var(--vsg-focus-color);


    /* --------------------------------------------------------
     * 1.26 Opacity
     * --------------------------------------------------------
     */

    --vsg-opacity-disabled: 0.46;
    --vsg-opacity-muted: 0.68;
    --vsg-opacity-overlay: 0.72;
    --vsg-opacity-hidden: 0;


    /* --------------------------------------------------------
     * 1.27 Background Lighting
     * --------------------------------------------------------
     */

    --vsg-app-background:
        radial-gradient(
            circle at 16% 8%,
            rgba(214, 177, 94, 0.095),
            transparent 25%
        ),
        radial-gradient(
            circle at 84% 14%,
            rgba(214, 177, 94, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 118%,
            rgba(60, 78, 118, 0.060),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            var(--vsg-bg-1) 0%,
            var(--vsg-bg-2) 52%,
            var(--vsg-bg-0) 100%
        );

    --vsg-panel-background:
        radial-gradient(
            circle at 100% 0%,
            rgba(214, 177, 94, 0.080),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(18, 25, 39, 0.94),
            rgba(9, 13, 22, 0.98)
        );
}


/* ============================================================
 * 2. RESPONSIVE TOKENS
 * ============================================================
 */

@media (min-width: 48rem) {
    :root {
        --vsg-page-gutter:
            var(--vsg-gutter-tablet);

        --vsg-grid-columns: 8;
        --vsg-grid-gap: var(--vsg-space-5);
    }
}

@media (min-width: 64rem) {
    :root {
        --vsg-page-gutter:
            var(--vsg-gutter-desktop);

        --vsg-grid-columns: 12;
        --vsg-grid-gap: var(--vsg-space-6);
    }
}


/* ============================================================
 * 3. UNIVERSAL RESET
 * ============================================================
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    min-height: 100%;

    color-scheme: dark;

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

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

    font-size: 100%;

    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth;

    -webkit-tap-highlight-color:
        transparent;
}

body {
    margin: 0;
    padding: 0;

    min-width: 20rem;
    min-height: 100vh;
    min-height: 100dvh;

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

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

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

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

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

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

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    overflow-x: hidden;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

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

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
textarea,
select {
    margin: 0;

    color: inherit;

    font: inherit;
}

button {
    appearance: none;
    -webkit-appearance: none;
}

button,
[role="button"],
a {
    touch-action: manipulation;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden] {
    display: none !important;
}


/* ============================================================
 * 4. ACCESSIBILITY FOUNDATIONS
 * ============================================================
 */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;

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

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

    background:
        var(--vsg-gold-300);
}

[aria-disabled="true"],
:disabled {
    cursor: not-allowed;
    opacity:
        var(--vsg-opacity-disabled);
}

.vsg-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.vsg-focusable-sr-only:not(:focus):not(:focus-within) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
 * 5. TYPOGRAPHY CLASSES
 * ============================================================
 */

.vsg-display-xl {
    margin: 0;

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

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

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

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

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

.vsg-display-lg {
    margin: 0;

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

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

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

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

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

.vsg-heading {
    margin: 0;

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

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

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

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

    letter-spacing:
        -0.025em;
}

.vsg-title {
    margin: 0;

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

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

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

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

    letter-spacing:
        -0.015em;
}

.vsg-subtitle {
    margin: 0;

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

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

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

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

.vsg-body {
    margin: 0;

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

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

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

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

.vsg-body-sm {
    margin: 0;

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

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

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

.vsg-caption {
    margin: 0;

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

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

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

.vsg-label {
    margin: 0;

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

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

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

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

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

    text-transform:
        uppercase;
}

.vsg-kicker {
    margin: 0;

    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-mono {
    font-family:
        var(--vsg-font-mono);

    font-variant-numeric:
        tabular-nums;

    overflow-wrap:
        anywhere;
}

.vsg-text-primary {
    color:
        var(--vsg-text-primary);
}

.vsg-text-secondary {
    color:
        var(--vsg-text-secondary);
}

.vsg-text-tertiary {
    color:
        var(--vsg-text-tertiary);
}

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

.vsg-text-gold {
    color:
        var(--vsg-text-gold);
}


/* ============================================================
 * 6. BASE LAYOUT
 * ============================================================
 */

.vsg-app {
    position: relative;

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

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

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

    isolation: isolate;
}

.vsg-page {
    width: 100%;

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

    padding:
        var(--vsg-safe-top-padded)
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-right)
        )
        var(--vsg-safe-bottom-padded)
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-left)
        );
}

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

    margin-inline:
        auto;
}

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

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

.vsg-container--fluid {
    max-width: none;
}

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

    gap:
        var(--vsg-gap-md);
}

.vsg-stack--sm {
    gap:
        var(--vsg-gap-sm);
}

.vsg-stack--lg {
    gap:
        var(--vsg-gap-lg);
}

.vsg-stack--xl {
    gap:
        var(--vsg-gap-xl);
}

.vsg-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        var(--vsg-gap-sm);
}

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

    gap:
        var(--vsg-gap-md);
}

.vsg-center {
    display: grid;
    place-items: center;
}

.vsg-grid {
    display: grid;

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

    gap:
        var(--vsg-grid-gap);
}

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

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

.vsg-section {
    display: grid;

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

.vsg-section + .vsg-section {
    margin-top:
        var(--vsg-space-8);
}

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

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

.vsg-divider {
    width: 100%;
    height: 1px;

    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vsg-line-2),
            transparent
        );
}


/* ============================================================
 * 7. GLASS FOUNDATIONS
 * ============================================================
 */

.vsg-glass {
    position: relative;

    overflow: hidden;

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

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

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

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

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

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

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

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

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

.vsg-glass--light {
    background:
        var(--vsg-glass-1);

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

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

.vsg-glass--standard {
    background:
        var(--vsg-glass-2);
}

.vsg-glass--dense {
    background:
        var(--vsg-glass-3);

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

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

.vsg-glass--solid {
    background:
        var(--vsg-glass-solid);

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}

.vsg-glass--gold {
    border-color:
        var(--vsg-gold-line-2);

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

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


/* ============================================================
 * 8. ELEVATION FOUNDATIONS
 * ============================================================
 */

.vsg-elevation-0 {
    z-index:
        var(--vsg-elevation-0);

    box-shadow:
        var(--vsg-shadow-none);
}

.vsg-elevation-1 {
    z-index:
        var(--vsg-elevation-1);

    box-shadow:
        var(--vsg-shadow-xs);
}

.vsg-elevation-2 {
    z-index:
        var(--vsg-elevation-2);

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

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

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

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

    box-shadow:
        var(--vsg-shadow-lg);
}

.vsg-elevation-5 {
    z-index:
        var(--vsg-elevation-5);

    box-shadow:
        var(--vsg-shadow-xl);
}


/* ============================================================
 * 9. SURFACE FOUNDATIONS
 * ============================================================
 */

.vsg-surface {
    position: relative;

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

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

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

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

.vsg-surface--quiet {
    border-color:
        var(--vsg-line-0);

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

    box-shadow:
        none;
}

.vsg-surface--raised {
    border-color:
        var(--vsg-line-2);

    background:
        var(--vsg-surface-dark-4);

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

.vsg-surface--gold {
    border-color:
        var(--vsg-gold-line-2);

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


/* ============================================================
 * 10. SPACING UTILITIES
 * ============================================================
 */

.vsg-p-0 {
    padding: var(--vsg-space-0);
}

.vsg-p-2 {
    padding: var(--vsg-space-2);
}

.vsg-p-3 {
    padding: var(--vsg-space-3);
}

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

.vsg-p-5 {
    padding: var(--vsg-space-5);
}

.vsg-p-6 {
    padding: var(--vsg-space-6);
}

.vsg-p-8 {
    padding: var(--vsg-space-8);
}

.vsg-px-4 {
    padding-inline:
        var(--vsg-space-4);
}

.vsg-px-6 {
    padding-inline:
        var(--vsg-space-6);
}

.vsg-py-4 {
    padding-block:
        var(--vsg-space-4);
}

.vsg-py-6 {
    padding-block:
        var(--vsg-space-6);
}

.vsg-m-0 {
    margin: var(--vsg-space-0);
}

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

.vsg-mt-4 {
    margin-top:
        var(--vsg-space-4);
}

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

.vsg-mt-8 {
    margin-top:
        var(--vsg-space-8);
}

.vsg-mb-2 {
    margin-bottom:
        var(--vsg-space-2);
}

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

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

.vsg-mb-8 {
    margin-bottom:
        var(--vsg-space-8);
}


/* ============================================================
 * 11. RADIUS UTILITIES
 * ============================================================
 */

.vsg-radius-sm {
    border-radius:
        var(--vsg-radius-sm);
}

.vsg-radius-md {
    border-radius:
        var(--vsg-radius-md);
}

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

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

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

.vsg-radius-3xl {
    border-radius:
        var(--vsg-radius-3xl);
}

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


/* ============================================================
 * 12. SEMANTIC FOUNDATIONS
 * ============================================================
 */

.vsg-state-success {
    color:
        var(--vsg-success);

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

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

.vsg-state-warning {
    color:
        var(--vsg-warning);

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

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

.vsg-state-danger {
    color:
        var(--vsg-danger);

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

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

.vsg-state-info {
    color:
        var(--vsg-info);

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

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

.vsg-state-neutral {
    color:
        var(--vsg-neutral);

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

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


/* ============================================================
 * 13. SAFE AREA UTILITIES
 * ============================================================
 */

.vsg-safe-top {
    padding-top:
        var(--vsg-safe-top);
}

.vsg-safe-right {
    padding-right:
        var(--vsg-safe-right);
}

.vsg-safe-bottom {
    padding-bottom:
        var(--vsg-safe-bottom);
}

.vsg-safe-left {
    padding-left:
        var(--vsg-safe-left);
}

.vsg-safe-inline {
    padding-left:
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-left)
        );

    padding-right:
        max(
            var(--vsg-page-gutter),
            var(--vsg-safe-right)
        );
}

.vsg-safe-block {
    padding-top:
        var(--vsg-safe-top-padded);

    padding-bottom:
        var(--vsg-safe-bottom-padded);
}


/* ============================================================
 * 14. INTERACTION FOUNDATIONS
 * ============================================================
 */

.vsg-interactive {
    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    touch-action:
        manipulation;
}

.vsg-interactive[aria-disabled="true"],
.vsg-interactive:disabled {
    pointer-events: none;
}

.vsg-selectable {
    user-select: text;
    -webkit-user-select: text;
}

.vsg-no-select {
    user-select: none;
    -webkit-user-select: none;
}


/* ============================================================
 * 15. SCROLL FOUNDATIONS
 * ============================================================
 */

.vsg-scroll {
    overflow: auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--vsg-line-3)
        transparent;
}

.vsg-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.vsg-scroll::-webkit-scrollbar-track {
    background:
        transparent;
}

.vsg-scroll::-webkit-scrollbar-thumb {
    border:
        2px solid transparent;

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

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

    background-clip:
        padding-box;
}

.vsg-scroll-x {
    display: flex;

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

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x:
        contain;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}

.vsg-scroll-x::-webkit-scrollbar {
    display: none;
}

.vsg-scroll-x > * {
    flex: 0 0 auto;

    scroll-snap-align:
        start;
}


/* ============================================================
 * 16. TRUNCATION AND FLOW
 * ============================================================
 */

.vsg-truncate {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.vsg-clamp-2 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vsg-clamp-3 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vsg-break {
    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ============================================================
 * 17. VISIBILITY UTILITIES
 * ============================================================
 */

.vsg-hidden {
    display: none !important;
}

.vsg-invisible {
    visibility: hidden !important;
}

.vsg-mobile-only {
    display: initial;
}

.vsg-tablet-up {
    display: none;
}

.vsg-desktop-up {
    display: none;
}

@media (min-width: 48rem) {
    .vsg-mobile-only {
        display: none !important;
    }

    .vsg-tablet-up {
        display: initial;
    }
}

@media (min-width: 64rem) {
    .vsg-desktop-up {
        display: initial;
    }
}


/* ============================================================
 * 18. GLASS FALLBACK
 * ============================================================
 */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    .vsg-glass,
    .vsg-glass--light,
    .vsg-glass--standard,
    .vsg-glass--dense {
        background:
            var(--vsg-glass-solid);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 19. REDUCED TRANSPARENCY
 * ============================================================
 */

@media (prefers-reduced-transparency: reduce) {
    :root {
        --vsg-glass-0:
            rgba(12, 17, 27, 0.94);

        --vsg-glass-1:
            rgba(12, 17, 27, 0.96);

        --vsg-glass-2:
            rgba(13, 18, 29, 0.97);

        --vsg-glass-3:
            rgba(14, 20, 31, 0.98);

        --vsg-glass-4:
            rgba(15, 21, 33, 0.99);
    }

    .vsg-glass,
    .vsg-glass--light,
    .vsg-glass--standard,
    .vsg-glass--dense {
        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 20. REDUCED MOTION FOUNDATION
 * ============================================================
 *
 * VSG-002 définira les mouvements officiels.
 * Cette section impose déjà un comportement accessible.
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        transition-delay:
            0ms !important;
    }
}


/* ============================================================
 * 21. HIGH CONTRAST
 * ============================================================
 */

@media (prefers-contrast: more) {
    :root {
        --vsg-text-primary:
            #ffffff;

        --vsg-text-secondary:
            #eef2f8;

        --vsg-text-tertiary:
            #c8d0dd;

        --vsg-line-1:
            rgba(255, 255, 255, 0.16);

        --vsg-line-2:
            rgba(255, 255, 255, 0.24);

        --vsg-line-3:
            rgba(255, 255, 255, 0.34);

        --vsg-gold-line-2:
            rgba(240, 216, 157, 0.40);

        --vsg-focus-color:
            rgba(240, 216, 157, 0.48);
    }
}


/* ============================================================
 * 22. FORCED COLORS
 * ============================================================
 */

@media (forced-colors: active) {
    :root {
        --vsg-focus-ring:
            0 0 0 3px Highlight;
    }

    .vsg-glass,
    .vsg-surface {
        border:
            1px solid CanvasText;

        background:
            Canvas;

        color:
            CanvasText;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }

    .vsg-glass::before {
        display: none;
    }
}


/* ============================================================
 * 23. PRINT FOUNDATION
 * ============================================================
 */

@media print {
    :root {
        color-scheme:
            light;
    }

    html,
    body {
        color:
            #111111;

        background:
            #ffffff;
    }

    body::before {
        display: none;
    }

    .vsg-glass,
    .vsg-surface {
        color:
            #111111;

        background:
            #ffffff;

        border:
            1px solid #cccccc;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}