/* ============================================
   GRAPHISCANN - LAYOUT CONTAINERS
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Conteneurs et système de layout global.
   ============================================ */

/* ========================================
   1. CONTENEUR PRINCIPAL
   ======================================== */

.container,
.gs-container {
    width: 100%;
    max-width: var(--gs-container-max, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Variantes de taille */
.gs-container-narrow {
    max-width: var(--gs-container-narrow, 900px);
}

.gs-container-wide {
    max-width: var(--gs-container-wide, 1400px);
}

.gs-container-full {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

/* ========================================
   2. BREAKPOINTS RESPONSIVE
   ======================================== */

@media (max-width: 1400px) {
    .container,
    .gs-container {
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .container,
    .gs-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container,
    .gs-container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .container,
    .gs-container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .container,
    .gs-container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .gs-container-full {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   3. CONTENEUR PRINCIPAL DE PAGE
   ======================================== */

#conteneurprincipal,
.gs-main-content {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--gs-bg-white);
    position: relative;
    z-index: var(--z-content, 1);
}

/* Reset box-sizing pour tout le contenu */
#conteneurprincipal *,
.gs-main-content * {
    box-sizing: border-box;
}

/* ========================================
   4. LAYOUTS DEUX COLONNES
   ======================================== */

.gs-layout-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

.gs-layout-sidebar-right {
    grid-template-columns: 1fr 280px;
}

.gs-layout-sidebar-wide {
    grid-template-columns: 320px 1fr;
}

/* Sidebar sticky */
.gs-sidebar-sticky {
    position: sticky;
    top: 100px;
}

/* ========================================
   5. LAYOUT SPLIT (50/50)
   ======================================== */

.gs-layout-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.gs-layout-split-reverse {
    direction: rtl;
}

.gs-layout-split-reverse > * {
    direction: ltr;
}

/* ========================================
   6. PAGE WRAPPER
   ======================================== */

.gs-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.gs-page-wrapper main,
.gs-page-wrapper .gs-main-content {
    flex: 1;
}

/* ========================================
   7. HEADER SPACER
   Pour compenser le header sticky
   ======================================== */

.gs-header-spacer {
    height: 0;
    transition: height 0.3s ease;
}

/* Activé via JS quand le header est sticky */
.gs-header-spacer.active {
    height: var(--gs-header-height, 80px);
}

/* ========================================
   8. RESPONSIVE LAYOUTS
   ======================================== */

@media (max-width: 992px) {
    .gs-layout-sidebar,
    .gs-layout-sidebar-right,
    .gs-layout-sidebar-wide {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .gs-sidebar-sticky {
        position: static;
    }
    
    .gs-layout-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .gs-layout-split-reverse {
        direction: ltr;
    }
}

/* ========================================
   9. WRAPPER POUR PAGES SPÉCIFIQUES
   ======================================== */

/* Contact, Devis */
.gs-form-page-wrapper {
    display: block;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gs-text);
    background: var(--gs-bg-white);
}

/* Éviter que FontAwesome hérite de Roboto */
.gs-form-page-wrapper *:not(i):not(.fas):not(.far):not(.fab):not(.fal) {
    font-family: 'Roboto', Arial, sans-serif;
}

/* Product page */
.gs-product-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ========================================
   10. STRUCTURE GRID RESPONSIVE
   ======================================== */

/* Grid pour les pages produits (image + formulaire) */
.gs-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Grid 2 colonnes avec ratio 1:1.5 (info + formulaire) */
.gs-grid-sidebar-form {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 992px) {
    .gs-product-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .gs-grid-sidebar-form {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Inverser l'ordre sur mobile : formulaire en premier */
    .gs-grid-sidebar-form > *:last-child {
        order: -1;
    }
}

/* ========================================
   11. OVERLAY GLOBAL
   ======================================== */

.gs-overlay {
    position: fixed;
    inset: 0;
    background: var(--gs-bg-overlay);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: var(--gs-transition);
}

.gs-overlay.active {
    opacity: 1;
    visibility: visible;
}