/* ============================================
   TLS DESIGN SYSTEM - UNIFORM LAYOUT
   Standardize main container and spacing
   ============================================ */

:root {
    /* Main Container — colonne centrale plus étroite (réf. maquette C-CAMPUS) */
    --container-max-width: 1201px; /* +10% vs 1092px */
    /* Marges horizontales supplémentaires quand la sidebar est visible (desktop) */
    --container-gutter-sidebar-expanded: 1rem;
    --container-gutter-sidebar-collapsed: 2.5rem;
    
    /* Spacing Scale (Standardized) */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Responsive Page Padding */
    --page-padding: 1rem; /* p-4 mobile */

    /* Fond global app (réf. parcours / cohérence) */
    --tls-bg-gradient: #ffffff;
}

body {
    background: var(--tls-bg-gradient) !important;
    background-attachment: scroll !important;
    min-height: 100vh;
}

/* Background Blobs */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: float 20s ease-in-out infinite;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: rgba(154, 0, 73, 0.08);
    top: -250px;
    left: -250px;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: rgba(255, 107, 154, 0.07);
    top: 50%;
    right: -200px;
    animation-delay: -7s;
}

.blob-3 {
    width: 450px;
    height: 450px;
    background: rgba(154, 0, 73, 0.05);
    bottom: -225px;
    left: 20%;
    animation-delay: -14s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Ensure main layout containers are transparent to show the global background */
.site,
.site-main,
.tls-app,
.tls-main {
    background: transparent !important;
}

@media (min-width: 640px) {
    :root {
        --page-padding: 1.5rem; /* p-6 sm */
    }
}

@media (min-width: 768px) {
    :root {
        --page-padding: 2rem; /* p-8 md */
    }
}

@media (min-width: 1024px) {
    :root {
        --page-padding: 2.5rem; /* p-10 lg */
    }
}

/* Base Layout Classes */
.tls-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent !important;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    margin-left: 288px;
    transition: margin-left 300ms ease-out;
}

@media (min-width: 1024px) {
    .tls-sidebar.collapsed ~ .tls-app-content .tls-main,
    .tls-app-content:has(.tls-sidebar.collapsed) .tls-main {
        margin-left: 80px;
    }
}

@media (max-width: 1023px) {
    .tls-main {
        margin-left: 0;
    }
}

.tls-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--page-padding);
}

/**
 * Desktop : marges latérales selon l’état de la sidebar.
 * Sidebar dépliée → zone principale déjà plus étroite : gouttières modérées.
 * Sidebar repliée → zone plus large : gouttières plus généreuses pour ne pas étirer le bloc central.
 */
@media (min-width: 1024px) {
    .tls-app-content:has(.sidebar:not(.collapsed)) .tls-container,
    .tls-app-content:has(.tls-sidebar:not(.collapsed)) .tls-container {
        max-width: min(var(--container-max-width), 100%);
        padding-left: calc(var(--page-padding) + var(--container-gutter-sidebar-expanded));
        padding-right: calc(var(--page-padding) + var(--container-gutter-sidebar-expanded));
    }

    .tls-app-content:has(.sidebar.collapsed) .tls-container,
    .tls-app-content:has(.tls-sidebar.collapsed) .tls-container {
        max-width: min(var(--container-max-width), 100%);
        padding-left: calc(var(--page-padding) + var(--container-gutter-sidebar-collapsed));
        padding-right: calc(var(--page-padding) + var(--container-gutter-sidebar-collapsed));
    }
}

/* Sections Spacing */
.section-gap {
    margin-bottom: var(--space-10);
}

@media (min-width: 1024px) {
    .section-gap {
        margin-bottom: var(--space-12);
    }
}

/* Grid Gap Standard */
.grid-gap {
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .grid-gap {
        gap: var(--space-8);
    }
}