/* ============================================
   GRAPHISCANN - CSS BUNDLE
   Généré automatiquement le 01/01/2026 15:57:44
   NE PAS MODIFIER - Fichier auto-généré
   ============================================ */

/* === fonts.css === */
/* ============================================
   GRAPHISCANN - FONTS
   
   Version : 1.0.0
   Date : 30 Décembre 2025
   
   Polices Roboto hébergées localement
   ============================================ */

/* Roboto Light (300) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto Light'), local('Roboto-Light'),
         url('/fonts/roboto-v30-latin-300.woff2') format('woff2');
}

/* Roboto Regular (400) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'),
         url('/fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

/* Roboto Medium (500) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Roboto Medium'), local('Roboto-Medium'),
         url('/fonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* Roboto Bold (700) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Roboto Bold'), local('Roboto-Bold'),
         url('/fonts/roboto-v30-latin-700.woff2') format('woff2');
}


/* === variables.css === */
/* ============================================
   GRAPHISCANN - VARIABLES CSS CENTRALISÉES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Ce fichier contient TOUTES les variables CSS du site.
   Il doit être chargé AVANT tous les autres fichiers CSS.
   
   TABLE DES MATIÈRES :
   1. Couleurs principales
   2. Couleurs de texte
   3. Couleurs de fond
   4. Couleurs spéciales (environnement, alertes)
   5. Bordures
   6. Espacements
   7. Rayons de bordure
   8. Ombres
   9. Transitions
   10. Z-Index hiérarchie
   ============================================ */

:root {
    /* ========================================
       1. COULEURS PRINCIPALES
       ======================================== */
    --gs-primary: #c41e3a;
    --gs-primary-dark: #a01829;
    --gs-primary-light: #e85670;
    --gs-secondary: #2c3e50;
    --gs-secondary-dark: #1a252f;
    --gs-secondary-light: #34495e;
    
    /* Couleur d'accent (pour CTA, liens hover) */
    --gs-accent: #3498db;
    --gs-accent-dark: #2980b9;
    
    /* ========================================
       2. COULEURS DE TEXTE
       ======================================== */
    --gs-text: #333333;
    --gs-text-dark: #1a1a2e;
    --gs-text-light: #666666;
    --gs-text-muted: #888888;
    --gs-text-inverse: #ffffff;
    
    /* ========================================
       3. COULEURS DE FOND
       ======================================== */
    --gs-bg-white: #ffffff;
    --gs-bg-light: #f8f9fa;
    --gs-bg-section: #fafafa;
    --gs-bg-alt: #f5f5f5;
    --gs-bg-dark: #2c2c2c;
    --gs-bg-darker: #1a1a1a;
    --gs-bg-overlay: rgba(0, 0, 0, 0.5);
    --gs-bg-overlay-light: rgba(255, 255, 255, 0.9);
    
    /* ========================================
       4. COULEURS SPÉCIALES
       ======================================== */
    
    /* Environnement / Écologie */
    --gs-eco-green: #4caf50;
    --gs-eco-green-dark: #2e7d32;
    --gs-eco-green-light: #81c784;
    --gs-eco-bg: #e8f5e9;
    
    /* Alertes et états */
    --gs-success: #28a745;
    --gs-success-bg: #d4edda;
    --gs-warning: #ffc107;
    --gs-warning-bg: #fff3cd;
    --gs-danger: #dc3545;
    --gs-danger-bg: #f8d7da;
    --gs-info: #17a2b8;
    --gs-info-bg: #d1ecf1;
    
    /* ========================================
       5. BORDURES
       ======================================== */
    --gs-border: #e0e0e0;
    --gs-border-light: #f0f0f0;
    --gs-border-dark: #cccccc;
    --gs-border-primary: var(--gs-primary);
    
    /* ========================================
       6. ESPACEMENTS
       ======================================== */
    --gs-spacing-xs: 4px;
    --gs-spacing-sm: 8px;
    --gs-spacing-md: 15px;
    --gs-spacing-lg: 30px;
    --gs-spacing-xl: 60px;
    --gs-spacing-xxl: 100px;
    
    /* Espacements de section */
    --gs-section-padding: 60px;
    --gs-section-padding-mobile: 40px;
    
    /* ========================================
       7. RAYONS DE BORDURE
       ======================================== */
    --gs-radius-xs: 2px;
    --gs-radius-sm: 4px;
    --gs-radius-md: 8px;
    --gs-radius-lg: 12px;
    --gs-radius-xl: 20px;
    --gs-radius-full: 50px;
    --gs-radius-circle: 50%;
    
    /* ========================================
       8. OMBRES
       ======================================== */
    --gs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --gs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --gs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --gs-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
    --gs-shadow-xl: 0 15px 50px rgba(0, 0, 0, 0.25);
    --gs-shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.15);
    --gs-shadow-card: 0 2px 15px rgba(0, 0, 0, 0.1);
    
    /* Ombre pour les éléments surélevés (header sticky, modals) */
    --gs-shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       9. TRANSITIONS
       ======================================== */
    --gs-transition-fast: all 0.15s ease;
    --gs-transition: all 0.3s ease;
    --gs-transition-slow: all 0.5s ease;
    --gs-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========================================
       10. Z-INDEX HIÉRARCHIE
       ======================================== */
    --z-content: 1;
    --z-sticky: 100;
    --z-footer: 10;
    --z-nav: 200;
    --z-header: 300;
    --z-search-results: 400;
    --z-dropdown: 600;
    --z-overlay: 800;
    --z-menu-mobile: 9000;
    --z-hamburger: 9500;
    --z-modal: 10000;
    --z-toast: 11000;
    
    /* ========================================
       DIMENSIONS FIXES
       ======================================== */
    
    /* Containers */
    --gs-container-max: 1320px;
    --gs-container-narrow: 900px;
    --gs-container-wide: 1400px;
    
    /* Header */
    --gs-header-height: 80px;
    --gs-header-height-mobile: 60px;
    --gs-topbar-height: 40px;
    
    /* ========================================
       BREAKPOINTS (pour référence)
       Ces valeurs sont utilisées dans les media queries
       ======================================== */
    /* 
    --bp-xs: 0;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    */
}

/* ============================================
   DARK MODE (préparation future)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --gs-text: #e0e0e0;
        --gs-text-dark: #ffffff;
        --gs-text-light: #b0b0b0;
        --gs-bg-white: #1a1a1a;
        --gs-bg-light: #2c2c2c;
        --gs-bg-section: #242424;
    }
}
*/


/* === reset.css === */
/* ============================================
   GRAPHISCANN - RESET & BASE STYLES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Reset CSS moderne + styles de base du site.
   Chargé APRÈS variables.css et typography-dynamic.php
   ============================================ */

/* ========================================
   1. BOX SIZING & RESET
   ======================================== */

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

/* ========================================
   2. DOCUMENT & BODY
   ======================================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, sans-serif;
    font-size: var(--gs-text-base, 0.9375rem);
    line-height: var(--gs-lh-normal, 1.6);
    color: var(--gs-text);
    background-color: var(--gs-bg-white);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   3. TYPOGRAPHIE DE BASE
   ======================================== */

/* Les tailles sont gérées par typography-dynamic.php */
/* Ici on définit uniquement les marges et comportements */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: var(--gs-fw-heading, 600);
    line-height: var(--gs-lh-heading, 1.25);
    color: var(--gs-text-dark);
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* ========================================
   4. LIENS
   ======================================== */

a {
    color: var(--gs-primary);
    text-decoration: none;
    transition: var(--gs-transition);
}

a:hover {
    color: var(--gs-primary-dark);
}

/* Focus visible uniquement au clavier, pas au clic souris */
a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--gs-primary);
    outline-offset: 2px;
}

/* ========================================
   5. LISTES
   ======================================== */

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Listes avec puces (contexte contenu) */
.gs-content ul,
.gs-section ul,
article ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.gs-content ol,
.gs-section ol,
article ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.gs-content li,
.gs-section li,
article li {
    margin-bottom: 0.5em;
}

/* ========================================
   6. IMAGES & MÉDIA
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

figure {
    margin: 0;
}

/* ========================================
   7. FORMULAIRES - BASE
   ======================================== */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

/* Placeholder styling */
::placeholder {
    color: var(--gs-text-muted);
    opacity: 1;
}

/* ========================================
   8. TABLEAUX
   ======================================== */

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: var(--gs-spacing-sm) var(--gs-spacing-md);
}

/* ========================================
   9. DIVERS
   ======================================== */

hr {
    border: 0;
    border-top: 1px solid var(--gs-border);
    margin: var(--gs-spacing-lg) 0;
}

/* Selection */
::selection {
    background-color: var(--gs-primary);
    color: var(--gs-text-inverse);
}

/* Focus visible pour accessibilité - uniquement au clavier */
:focus-visible {
    outline: 2px solid var(--gs-primary);
    outline-offset: 2px;
}

/* Supprimer outline au clic souris */
:focus:not(:focus-visible) {
    outline: none;
}

/* Hidden mais accessible */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   10. SCROLLBAR PERSONNALISÉE (optionnel)
   ======================================== */

/* Webkit browsers */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gs-bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--gs-border-dark);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gs-text-muted);
}


/* === utilities.css === */
/* ============================================
   GRAPHISCANN - CLASSES UTILITAIRES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Classes utilitaires pour un usage rapide dans le HTML.
   Inspiré de Bootstrap/Tailwind mais adapté à Graphiscann.
   ============================================ */

/* ========================================
   1. DISPLAY
   ======================================== */

.gs-hidden { display: none !important; }
.gs-block { display: block !important; }
.gs-inline { display: inline !important; }
.gs-inline-block { display: inline-block !important; }
.gs-flex { display: flex !important; }
.gs-inline-flex { display: inline-flex !important; }
.gs-grid { display: grid !important; }

/* Responsive display */
@media (max-width: 992px) {
    .gs-hidden-mobile { display: none !important; }
    .gs-show-mobile { display: block !important; }
}

@media (min-width: 993px) {
    .gs-hidden-desktop { display: none !important; }
    .gs-show-desktop { display: block !important; }
}

/* ========================================
   2. FLEXBOX
   ======================================== */

.gs-flex-row { flex-direction: row !important; }
.gs-flex-column { flex-direction: column !important; }
.gs-flex-wrap { flex-wrap: wrap !important; }
.gs-flex-nowrap { flex-wrap: nowrap !important; }

/* Justify content */
.gs-justify-start { justify-content: flex-start !important; }
.gs-justify-center { justify-content: center !important; }
.gs-justify-end { justify-content: flex-end !important; }
.gs-justify-between { justify-content: space-between !important; }
.gs-justify-around { justify-content: space-around !important; }

/* Align items */
.gs-align-start { align-items: flex-start !important; }
.gs-align-center { align-items: center !important; }
.gs-align-end { align-items: flex-end !important; }
.gs-align-stretch { align-items: stretch !important; }

/* Gap */
.gs-gap-xs { gap: var(--gs-spacing-xs) !important; }
.gs-gap-sm { gap: var(--gs-spacing-sm) !important; }
.gs-gap-md { gap: var(--gs-spacing-md) !important; }
.gs-gap-lg { gap: var(--gs-spacing-lg) !important; }
.gs-gap-xl { gap: var(--gs-spacing-xl) !important; }

/* ========================================
   3. TEXTE - ALIGNEMENT
   ======================================== */

.gs-text-left { text-align: left !important; }
.gs-text-center { text-align: center !important; }
.gs-text-right { text-align: right !important; }
.gs-text-justify { text-align: justify !important; }

/* ========================================
   4. TEXTE - TAILLES (utilise les variables typography)
   ======================================== */

.gs-text-xs { font-size: var(--gs-text-tiny) !important; }
.gs-text-sm { font-size: var(--gs-text-small) !important; }
.gs-text-base { font-size: var(--gs-text-base) !important; }
.gs-text-lg { font-size: var(--gs-text-lead) !important; }
.gs-text-xl { font-size: var(--gs-h3-size) !important; }
.gs-text-2xl { font-size: var(--gs-h2-size) !important; }
.gs-text-3xl { font-size: var(--gs-h1-size) !important; }

/* ========================================
   5. TEXTE - POIDS
   ======================================== */

.gs-font-light { font-weight: var(--gs-fw-light, 300) !important; }
.gs-font-normal { font-weight: var(--gs-fw-normal, 400) !important; }
.gs-font-medium { font-weight: var(--gs-fw-medium, 500) !important; }
.gs-font-semibold { font-weight: var(--gs-fw-semibold, 600) !important; }
.gs-font-bold { font-weight: var(--gs-fw-bold, 700) !important; }

/* ========================================
   6. TEXTE - COULEURS
   ======================================== */

.gs-text-primary { color: var(--gs-primary) !important; }
.gs-text-secondary { color: var(--gs-secondary) !important; }
.gs-text-dark { color: var(--gs-text-dark) !important; }
.gs-text-muted { color: var(--gs-text-muted) !important; }
.gs-text-light { color: var(--gs-text-light) !important; }
.gs-text-white { color: var(--gs-text-inverse) !important; }
.gs-text-success { color: var(--gs-success) !important; }
.gs-text-danger { color: var(--gs-danger) !important; }
.gs-text-warning { color: var(--gs-warning) !important; }

/* ========================================
   7. BACKGROUNDS
   ======================================== */

.gs-bg-white { background-color: var(--gs-bg-white) !important; }
.gs-bg-light { background-color: var(--gs-bg-light) !important; }
.gs-bg-section { background-color: var(--gs-bg-section) !important; }
.gs-bg-dark { background-color: var(--gs-bg-dark) !important; }
.gs-bg-primary { background-color: var(--gs-primary) !important; }
.gs-bg-secondary { background-color: var(--gs-secondary) !important; }
.gs-bg-success { background-color: var(--gs-success-bg) !important; }
.gs-bg-danger { background-color: var(--gs-danger-bg) !important; }
.gs-bg-warning { background-color: var(--gs-warning-bg) !important; }
.gs-bg-eco { background-color: var(--gs-eco-bg) !important; }

/* Gradient backgrounds */
.gs-bg-gradient-primary {
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%) !important;
}

.gs-bg-gradient-dark {
    background: linear-gradient(135deg, var(--gs-secondary) 0%, var(--gs-bg-darker) 100%) !important;
}

.gs-bg-gradient-eco {
    background: linear-gradient(135deg, var(--gs-eco-green-dark) 0%, var(--gs-eco-green) 100%) !important;
}

/* ========================================
   8. MARGES
   ======================================== */

/* Margin all */
.gs-m-0 { margin: 0 !important; }
.gs-m-xs { margin: var(--gs-spacing-xs) !important; }
.gs-m-sm { margin: var(--gs-spacing-sm) !important; }
.gs-m-md { margin: var(--gs-spacing-md) !important; }
.gs-m-lg { margin: var(--gs-spacing-lg) !important; }
.gs-m-xl { margin: var(--gs-spacing-xl) !important; }
.gs-m-auto { margin: auto !important; }

/* Margin top */
.gs-mt-0 { margin-top: 0 !important; }
.gs-mt-sm { margin-top: var(--gs-spacing-sm) !important; }
.gs-mt-md { margin-top: var(--gs-spacing-md) !important; }
.gs-mt-lg { margin-top: var(--gs-spacing-lg) !important; }
.gs-mt-xl { margin-top: var(--gs-spacing-xl) !important; }

/* Margin bottom */
.gs-mb-0 { margin-bottom: 0 !important; }
.gs-mb-sm { margin-bottom: var(--gs-spacing-sm) !important; }
.gs-mb-md { margin-bottom: var(--gs-spacing-md) !important; }
.gs-mb-lg { margin-bottom: var(--gs-spacing-lg) !important; }
.gs-mb-xl { margin-bottom: var(--gs-spacing-xl) !important; }

/* Margin horizontal */
.gs-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.gs-mx-sm { margin-left: var(--gs-spacing-sm) !important; margin-right: var(--gs-spacing-sm) !important; }
.gs-mx-md { margin-left: var(--gs-spacing-md) !important; margin-right: var(--gs-spacing-md) !important; }

/* Margin vertical */
.gs-my-sm { margin-top: var(--gs-spacing-sm) !important; margin-bottom: var(--gs-spacing-sm) !important; }
.gs-my-md { margin-top: var(--gs-spacing-md) !important; margin-bottom: var(--gs-spacing-md) !important; }
.gs-my-lg { margin-top: var(--gs-spacing-lg) !important; margin-bottom: var(--gs-spacing-lg) !important; }
.gs-my-xl { margin-top: var(--gs-spacing-xl) !important; margin-bottom: var(--gs-spacing-xl) !important; }

/* ========================================
   9. PADDINGS
   ======================================== */

/* Padding all */
.gs-p-0 { padding: 0 !important; }
.gs-p-xs { padding: var(--gs-spacing-xs) !important; }
.gs-p-sm { padding: var(--gs-spacing-sm) !important; }
.gs-p-md { padding: var(--gs-spacing-md) !important; }
.gs-p-lg { padding: var(--gs-spacing-lg) !important; }
.gs-p-xl { padding: var(--gs-spacing-xl) !important; }

/* Padding vertical */
.gs-py-sm { padding-top: var(--gs-spacing-sm) !important; padding-bottom: var(--gs-spacing-sm) !important; }
.gs-py-md { padding-top: var(--gs-spacing-md) !important; padding-bottom: var(--gs-spacing-md) !important; }
.gs-py-lg { padding-top: var(--gs-spacing-lg) !important; padding-bottom: var(--gs-spacing-lg) !important; }
.gs-py-xl { padding-top: var(--gs-spacing-xl) !important; padding-bottom: var(--gs-spacing-xl) !important; }
.gs-py-section { padding-top: var(--gs-section-padding) !important; padding-bottom: var(--gs-section-padding) !important; }

/* Padding horizontal */
.gs-px-sm { padding-left: var(--gs-spacing-sm) !important; padding-right: var(--gs-spacing-sm) !important; }
.gs-px-md { padding-left: var(--gs-spacing-md) !important; padding-right: var(--gs-spacing-md) !important; }
.gs-px-lg { padding-left: var(--gs-spacing-lg) !important; padding-right: var(--gs-spacing-lg) !important; }

/* ========================================
   10. BORDURES
   ======================================== */

.gs-border { border: 1px solid var(--gs-border) !important; }
.gs-border-0 { border: 0 !important; }
.gs-border-top { border-top: 1px solid var(--gs-border) !important; }
.gs-border-bottom { border-bottom: 1px solid var(--gs-border) !important; }
.gs-border-left { border-left: 1px solid var(--gs-border) !important; }
.gs-border-primary { border-color: var(--gs-primary) !important; }
.gs-border-left-primary { border-left: 4px solid var(--gs-primary) !important; }

/* Border radius */
.gs-rounded-0 { border-radius: 0 !important; }
.gs-rounded-sm { border-radius: var(--gs-radius-sm) !important; }
.gs-rounded { border-radius: var(--gs-radius-md) !important; }
.gs-rounded-lg { border-radius: var(--gs-radius-lg) !important; }
.gs-rounded-xl { border-radius: var(--gs-radius-xl) !important; }
.gs-rounded-full { border-radius: var(--gs-radius-full) !important; }
.gs-rounded-circle { border-radius: var(--gs-radius-circle) !important; }

/* ========================================
   11. OMBRES
   ======================================== */

.gs-shadow-none { box-shadow: none !important; }
.gs-shadow-sm { box-shadow: var(--gs-shadow-sm) !important; }
.gs-shadow { box-shadow: var(--gs-shadow-md) !important; }
.gs-shadow-lg { box-shadow: var(--gs-shadow-lg) !important; }
.gs-shadow-card { box-shadow: var(--gs-shadow-card) !important; }

/* ========================================
   12. DIMENSIONS
   ======================================== */

.gs-w-100 { width: 100% !important; }
.gs-w-auto { width: auto !important; }
.gs-h-100 { height: 100% !important; }
.gs-h-auto { height: auto !important; }
.gs-min-h-screen { min-height: 100vh !important; }

/* Max-width pour conteneurs de texte */
.gs-max-w-narrow { max-width: 600px !important; }
.gs-max-w-medium { max-width: 800px !important; }
.gs-max-w-wide { max-width: 1000px !important; }

/* ========================================
   13. POSITION
   ======================================== */

.gs-relative { position: relative !important; }
.gs-absolute { position: absolute !important; }
.gs-fixed { position: fixed !important; }
.gs-sticky { position: sticky !important; top: 0; }

/* ========================================
   14. OVERFLOW
   ======================================== */

.gs-overflow-hidden { overflow: hidden !important; }
.gs-overflow-auto { overflow: auto !important; }
.gs-overflow-visible { overflow: visible !important; }

/* ========================================
   15. TRANSITIONS & ANIMATIONS
   ======================================== */

.gs-transition { transition: var(--gs-transition) !important; }
.gs-transition-fast { transition: var(--gs-transition-fast) !important; }
.gs-no-transition { transition: none !important; }

/* Hover effects */
.gs-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--gs-shadow-hover);
}

.gs-hover-scale:hover {
    transform: scale(1.02);
}

.gs-hover-primary:hover {
    color: var(--gs-primary) !important;
}

.gs-hover-bg-light:hover {
    background-color: var(--gs-bg-light) !important;
}

/* ========================================
   16. CURSEURS
   ======================================== */

.gs-cursor-pointer { cursor: pointer !important; }
.gs-cursor-default { cursor: default !important; }
.gs-cursor-not-allowed { cursor: not-allowed !important; }

/* ========================================
   17. INTERACTIONS
   ======================================== */

.gs-pointer-events-none { pointer-events: none !important; }
.gs-user-select-none { user-select: none !important; }

/* ========================================
   18. CONTEXTES SOMBRES (Dark Contexts)
   Texte blanc automatique sur fonds sombres
   ======================================== */

/* Définir les sections à fond sombre */
.gs-hero-primary,
.gs-hero-dark,
.gs-section-dark,
.gs-section-primary,
.gs-about-hero,
.gs-about-timeline,
.gs-about-commitments,
.gs-cta-primary,
.gs-contact-box,
.gs-sf-hero,
.gs-sf-cta,
.gs-realisations-hero,
.gs-realisations-cta,
.gs-home-cta,
.gs-illustration-card .gs-caption,
.gs-illustration-card .caption {
    color: #fff;
}

/* Titres héritent de la couleur du parent */
.gs-hero-primary h1,
.gs-hero-primary h2,
.gs-hero-primary h3,
.gs-hero-primary h4,
.gs-hero-primary p,
.gs-hero-dark h1,
.gs-hero-dark h2,
.gs-hero-dark h3,
.gs-hero-dark h4,
.gs-hero-dark p,
.gs-section-dark h1,
.gs-section-dark h2,
.gs-section-dark h3,
.gs-section-dark h4,
.gs-section-dark p,
.gs-section-primary h1,
.gs-section-primary h2,
.gs-section-primary h3,
.gs-section-primary h4,
.gs-section-primary p,
.gs-about-hero h1,
.gs-about-hero h2,
.gs-about-hero h3,
.gs-about-hero h4,
.gs-about-hero p,
.gs-about-timeline h1,
.gs-about-timeline h2,
.gs-about-timeline h3,
.gs-about-timeline h4,
.gs-about-timeline p,
.gs-about-commitments h1,
.gs-about-commitments h2,
.gs-about-commitments h3,
.gs-about-commitments h4,
.gs-about-commitments p,
.gs-illustration-card .gs-caption h4,
.gs-illustration-card .gs-caption p,
.gs-illustration-card .caption h4,
.gs-illustration-card .caption p {
    color: inherit;
}

/* Liens dans contextes sombres */
.gs-hero-primary a:not(.gs-btn),
.gs-hero-dark a:not(.gs-btn),
.gs-section-dark a:not(.gs-btn),
.gs-section-primary a:not(.gs-btn) {
    color: #fff;
    text-decoration: underline;
}

.gs-hero-primary a:not(.gs-btn):hover,
.gs-hero-dark a:not(.gs-btn):hover,
.gs-section-dark a:not(.gs-btn):hover,
.gs-section-primary a:not(.gs-btn):hover {
    opacity: 0.85;
}

/* ========================================
   19. RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 576px) {
    .gs-text-center-mobile { text-align: center !important; }
    .gs-flex-column-mobile { flex-direction: column !important; }
    .gs-py-section { 
        padding-top: var(--gs-section-padding-mobile) !important; 
        padding-bottom: var(--gs-section-padding-mobile) !important; 
    }
}
/* ============================================
   GRAPHISCANN - UTILITIES COMPLÉMENTAIRES
   
   Version : 1.1.0
   Date : 1er Janvier 2026
   ============================================ */

/* ========================================
   20. GAP ZERO (manquant)
   ======================================== */

.gs-gap-0 { gap: 0 !important; }

/* ========================================
   21. ASPECT RATIOS
   ======================================== */

.gs-aspect-square { aspect-ratio: 1 / 1; }
.gs-aspect-video { aspect-ratio: 16 / 9; }
.gs-aspect-portrait { aspect-ratio: 3 / 4; }
.gs-aspect-photo { aspect-ratio: 4 / 3; }

/* ========================================
   22. OBJECT-FIT (pour images)
   ======================================== */

.gs-object-cover { object-fit: cover !important; }
.gs-object-contain { object-fit: contain !important; }
.gs-object-center { object-position: center !important; }
.gs-object-top { object-position: top !important; }

/* ========================================
   23. TRUNCATE / LINE CLAMP
   ======================================== */

.gs-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.gs-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.gs-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   24. Z-INDEX UTILITAIRES
   ======================================== */

.gs-z-0 { z-index: 0 !important; }
.gs-z-10 { z-index: 10 !important; }
.gs-z-20 { z-index: 20 !important; }
.gs-z-50 { z-index: 50 !important; }

/* ========================================
   25. OPACITY
   ======================================== */

.gs-opacity-0 { opacity: 0 !important; }
.gs-opacity-50 { opacity: 0.5 !important; }
.gs-opacity-75 { opacity: 0.75 !important; }
.gs-opacity-100 { opacity: 1 !important; }

/* ========================================
   26. BORDURES
   ======================================== */

.gs-border { border: 1px solid var(--gs-border) !important; }
.gs-border-0 { border: 0 !important; }
.gs-border-t { border-top: 1px solid var(--gs-border) !important; }
.gs-border-b { border-bottom: 1px solid var(--gs-border) !important; }
.gs-border-primary { border-color: var(--gs-primary) !important; }

/* ========================================
   27. FLEX GROW/SHRINK
   ======================================== */

.gs-flex-1 { flex: 1 1 0% !important; }
.gs-flex-auto { flex: 1 1 auto !important; }
.gs-flex-none { flex: none !important; }
.gs-grow { flex-grow: 1 !important; }
.gs-grow-0 { flex-grow: 0 !important; }
.gs-shrink-0 { flex-shrink: 0 !important; }

/* ========================================
   28. ORDER (flex)
   ======================================== */

.gs-order-first { order: -9999 !important; }
.gs-order-last { order: 9999 !important; }
.gs-order-1 { order: 1 !important; }
.gs-order-2 { order: 2 !important; }

/* ========================================
   29. GRID SPAN
   ======================================== */

.gs-col-span-2 { grid-column: span 2 / span 2 !important; }
.gs-col-span-3 { grid-column: span 3 / span 3 !important; }
.gs-col-span-full { grid-column: 1 / -1 !important; }

/* ========================================
   30. CENTRAGE RAPIDE
   ======================================== */

.gs-center-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   31. VISIBILITÉ RESPONSIVE ÉTENDUE
   ======================================== */

@media (max-width: 576px) {
    .gs-hidden-xs { display: none !important; }
}

@media (min-width: 577px) and (max-width: 768px) {
    .gs-hidden-sm { display: none !important; }
}

@media (min-width: 769px) and (max-width: 992px) {
    .gs-hidden-md { display: none !important; }
}

/* === print.css === */
/* ============================================
   GRAPHISCANN - STYLES D'IMPRESSION
   
   Version : 1.0.0
   Date : 1er Janvier 2026
   Chemin : /css/core/print.css
   ============================================ */

@media print {
    
    /* ========================================
       1. RESET IMPRESSION
       ======================================== */
    
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* ========================================
       2. ÉLÉMENTS À MASQUER
       ======================================== */
    
    .gs-header,
    .gs-top-bar,
    .gs-nav,
    .gs-nav-toggle,
    .gs-footer,
    .gs-breadcrumb,
    .breadcrumb,
    .gs-btn,
    .gs-cta-section,
    .gs-cta-btn,
    .gs-form,
    .gs-search,
    .gs-social-links,
    button,
    input[type="submit"],
    video,
    audio {
        display: none !important;
    }
    
    /* ========================================
       3. TYPOGRAPHIE
       ======================================== */
    
    html {
        font-size: 12pt;
    }
    
    body {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
        margin: 0;
        padding: 20px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #000 !important;
        page-break-after: avoid;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }
    
    h1 { font-size: 24pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    h4 { font-size: 12pt; }
    
    p {
        orphans: 3;
        widows: 3;
        margin-bottom: 1em;
    }
    
    /* ========================================
       4. LIENS
       ======================================== */
    
    a {
        color: #000 !important;
        text-decoration: underline;
    }
    
    /* Afficher l'URL après le lien externe */
    a[href^="http"]::after,
    a[href^="https"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666 !important;
    }
    
    /* Masquer pour certains liens */
    a[href^="#"]::after,
    a[href^="tel"]::after,
    a[href^="mailto"]::after {
        content: none;
    }
    
    /* ========================================
       5. IMAGES
       ======================================== */
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    .gs-thumbnail-gallery {
        display: none !important;
    }
    
    /* ========================================
       6. TABLEAUX
       ======================================== */
    
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr {
        page-break-inside: avoid;
    }
    
    /* ========================================
       7. SAUTS DE PAGE
       ======================================== */
    
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }
    
    .gs-card,
    .gs-product-info,
    blockquote,
    figure {
        page-break-inside: avoid;
    }
    
    .gs-print-break-before {
        page-break-before: always;
    }
    
    /* ========================================
       8. CONTENEURS
       ======================================== */
    
    .gs-container,
    .container,
    main,
    section {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* ========================================
       9. CLASSES UTILITAIRES IMPRESSION
       ======================================== */
    
    .gs-print-only {
        display: block !important;
    }
    
    .gs-no-print {
        display: none !important;
    }
    
    /* ========================================
       10. PAGE
       ======================================== */
    
    @page {
        margin: 2cm;
        size: A4;
    }
}

/* Masquer les éléments print-only à l'écran */
@media screen {
    .gs-print-only {
        display: none !important;
    }
}

/* === containers.css === */
/* ============================================
   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;
}


/* === header.css === */
/* ============================================
   GRAPHISCANN - LAYOUT HEADER
   CSS Modulaire Complet
   
   Version : 2.0.0
   Date : 30 Décembre 2025
   
   Styles complets du header adaptés de header-footer-v4.css
   avec préfixe .gs-* pour le nouveau système modulaire.
   ============================================ */

/* ========================================
   1. BANDEAU SUPÉRIEUR (TOP BAR)
   ======================================== */

.gs-top-bar {
    background: var(--gs-bg-light, #f8f9fa);
    padding: 10px 0;
    color: var(--gs-text-light, #666);
    border-bottom: 1px solid var(--gs-border, #e0e0e0);
}

.gs-top-bar,
.gs-top-bar span {
    font-size: var(--gs-text-small, 0.8125rem);
}

.gs-top-bar-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
}

.gs-top-bar i {
    color: var(--gs-primary, #c41e3a);
    margin-right: 10px;
    font-size: 16px;
}

.gs-top-bar a {
    color: var(--gs-text-light, #666);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gs-top-bar a:hover {
    color: var(--gs-primary, #c41e3a);
}

/* ========================================
   2. HEADER PRINCIPAL
   ======================================== */

.gs-header {
    background: #fff;
    padding: 20px 0;
    box-shadow: var(--gs-shadow-sm, 0 2px 4px rgba(0,0,0,0.08));
    transition: all 0.3s ease;
    position: relative;
    z-index: var(--z-header, 300);
}

.gs-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header, 300);
    padding: 15px 0;
    box-shadow: var(--gs-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}

.gs-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* ========================================
   3. LOGO
   ======================================== */

.gs-header-logo {
    flex-shrink: 0;
}

.gs-header-logo a {
    display: block;
}

.gs-header-logo img {
    height: 60px;
    width: auto;
    transition: height 0.3s;
}

.gs-header-sticky .gs-header-logo img {
    height: 50px;
}

/* ========================================
   4. COORDONNÉES HEADER
   ======================================== */

.gs-header-contact {
    display: flex;
    gap: 30px;
    align-items: center;
}

.gs-header-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-header-contact-item i {
    color: var(--gs-primary, #c41e3a);
    font-size: 22px;
}

.gs-header-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.gs-header-contact-text strong {
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-text, #333);
    font-weight: 600;
}

.gs-header-contact-text span {
    font-size: var(--gs-text-tiny, 0.75rem);
    color: var(--gs-text-light, #666);
}

.gs-header-contact-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gs-header-contact-text a:hover {
    color: var(--gs-primary, #c41e3a);
}

/* ========================================
   5. RECHERCHE HEADER
   ======================================== */

.gs-header-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.gs-search-form {
    display: flex;
    position: relative;
}

.gs-search-input {
    flex: 1;
    padding: 12px 50px 12px 20px;
    border: 2px solid var(--gs-border, #e0e0e0);
    border-radius: var(--gs-radius-full, 50px);
    font-size: var(--gs-text-base, 0.9375rem);
    font-family: 'Roboto', Arial, sans-serif;
    transition: all 0.3s ease;
    outline: none;
}

.gs-search-input:focus {
    border-color: var(--gs-primary, #c41e3a);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

.gs-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gs-primary, #c41e3a);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: var(--gs-radius-full, 50px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gs-search-btn:hover {
    background: var(--gs-primary-dark, #a01829);
}

/* Résultats de recherche */
.gs-search-results {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: var(--gs-radius-md, 8px);
    box-shadow: var(--gs-shadow-lg, 0 8px 30px rgba(0,0,0,0.2));
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-search-results, 400);
    min-width: 350px;
    max-width: 500px;
    display: none;
}

.gs-search-results.gs-visible {
    display: block;
    animation: gsSearchFadeIn 0.2s ease-out;
}

.gs-search-results a {
    display: block;
    padding: 12px 15px;
    color: var(--gs-text, #333);
    border-bottom: 1px solid var(--gs-border-light, #f0f0f0);
    transition: all 0.3s ease;
    font-size: var(--gs-text-base, 0.9375rem);
    text-decoration: none;
}

.gs-search-results a:hover {
    background: var(--gs-bg-light, #f8f9fa);
    color: var(--gs-primary, #c41e3a);
    padding-left: 20px;
}

.gs-search-results a:last-child {
    border-bottom: none;
}

.gs-search-error {
    padding: 15px;
    color: var(--gs-primary, #c41e3a);
    text-align: center;
}

@keyframes gsSearchFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

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

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

/* ========================================
   7. RESPONSIVE TABLETTE (max 1200px)
   ======================================== */

@media (max-width: 1200px) {
    .gs-header-contact {
        gap: 20px;
    }
    
    .gs-header-search {
        max-width: 300px;
    }
}

/* ========================================
   8. RESPONSIVE MOBILE (max 992px)
   ======================================== */

@media (max-width: 992px) {
    
    /* Bandeau masqué */
    .gs-top-bar {
        display: none !important;
    }
    
    /* Header mobile */
    .gs-header {
        padding: 15px 0 10px 0 !important;
        z-index: var(--z-header, 300) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .gs-header-sticky {
        z-index: var(--z-header, 300) !important;
        padding: 10px 0 8px 0 !important;
    }
    
    /* Masquer coordonnées */
    .gs-header-contact {
        display: none !important;
    }
    
    /* Header content en colonne */
    .gs-header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 15px !important;
    }
    
    /* Logo centré */
    .gs-header-logo {
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;
    }
    
    .gs-header-logo a {
        display: inline-block !important;
    }
    
    .gs-header-logo img {
        height: 45px !important;
        width: auto !important;
    }
    
    /* Recherche pleine largeur */
    .gs-header-search {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        position: relative !important;
    }
    
    .gs-search-form {
        width: 100% !important;
        display: flex !important;
    }
    
    .gs-search-input {
        flex: 1 !important;
        width: 100% !important;
        padding: 12px 50px 12px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
    }
    
    .gs-search-input:focus {
        background: #fff !important;
        border-color: var(--gs-primary, #c41e3a) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1) !important;
    }
    
    .gs-search-btn {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 8px 12px !important;
        background: var(--gs-primary, #c41e3a) !important;
        border: none !important;
        border-radius: 6px !important;
        color: white !important;
    }
    
    /* Résultats recherche mobile */
    .gs-search-results {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: var(--z-search-results, 400) !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    /* Masquer header quand menu ouvert */
    body.gs-menu-open .gs-header {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    body.gs-menu-open .gs-nav {
        background: transparent !important;
    }
    
    body.gs-menu-open .gs-search-results {
        display: none !important;
    }
}

/* ========================================
   9. TRÈS PETIT MOBILE (max 576px)
   ======================================== */

@media (max-width: 576px) {
    .gs-header {
        padding: 12px 0 8px 0 !important;
    }
    
    .gs-header-content {
        gap: 10px !important;
        padding: 0 12px !important;
    }
    
    .gs-header-logo img {
        height: 40px !important;
    }
    
    .gs-search-input {
        padding: 10px 45px 10px 12px !important;
    }
}


/* === navigation.css === */
/* ============================================
   GRAPHISCANN - LAYOUT NAVIGATION
   CSS Modulaire Complet
   
   Version : 2.0.0
   Date : 30 Décembre 2025
   
   Styles complets de la navigation adaptés de header-footer-v4.css
   avec préfixe .gs-* pour le nouveau système modulaire.
   ============================================ */

/* ========================================
   1. NAVIGATION PRINCIPALE
   ======================================== */

.gs-nav {
    background: var(--gs-primary, #c41e3a);
    position: relative;
    z-index: var(--z-nav, 200);
    transition: all 0.3s ease;
}

.gs-nav-sticky {
    position: fixed;
    top: 80px; /* Valeur par défaut, ajustée par JS */
    left: 0;
    right: 0;
    z-index: var(--z-nav, 200);
    box-shadow: var(--gs-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}

.gs-nav-container {
    display: flex;
    align-items: center;
    position: relative;
}

/* ========================================
   2. BOUTON HAMBURGER (Mobile)
   ======================================== */

.gs-nav-toggle {
    display: none;
    background: #fff;
    border: none;
    color: var(--gs-primary, #c41e3a);
    width: 50px;
    height: 50px;
    border-radius: var(--gs-radius-md, 8px);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: var(--gs-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
    z-index: var(--z-hamburger, 9500);
}

.gs-nav-toggle:hover {
    background: var(--gs-bg-light, #f8f9fa);
    transform: scale(1.05);
}

.gs-nav-toggle.gs-active {
    background: var(--gs-primary-dark, #a01829);
    color: #fff;
}

/* ========================================
   3. MENU PRINCIPAL
   ======================================== */

.gs-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.gs-nav-item {
    position: relative;
}

.gs-nav-link {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #fff !important;
    text-decoration: none;
    font-size: var(--gs-text-base, 0.9375rem);
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.gs-nav-link:hover,
.gs-nav-link:focus,
.gs-nav-item.gs-active > .gs-nav-link {
    background: var(--gs-primary-dark, #a01829);
    color: #fff !important;
}

/* Icônes dans le menu */
.gs-nav-link i {
    margin-right: 8px;
    transition: transform 0.2s ease;
}

.gs-nav-link i.fa-chevron-down {
    margin-right: 0;
    margin-left: 8px;
    font-size: 12px;
}

.gs-nav-item:hover .gs-nav-link i.fa-chevron-down {
    transform: rotate(180deg);
}

.gs-nav-link:hover i:not(.fa-chevron-down) {
    transform: scale(1.1);
}

/* ========================================
   4. MEGA MENU (Dropdown)
   ======================================== */

.gs-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 900px;
    max-height: calc(100vh - 150px); /* Hauteur max = viewport - header */
    overflow-y: auto; /* Scroll si contenu dépasse */
    padding: 25px;
    border-radius: 0 0 var(--gs-radius-lg, 12px) var(--gs-radius-lg, 12px);
    box-shadow: var(--gs-shadow-lg, 0 8px 30px rgba(0,0,0,0.2));
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 9999; /* Z-index très élevé pour passer au-dessus de tout */
}

/* Scrollbar stylisée pour le mega menu */
.gs-mega-menu::-webkit-scrollbar {
    width: 8px;
}

.gs-mega-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.gs-mega-menu::-webkit-scrollbar-thumb {
    background: var(--gs-primary, #c41e3a);
    border-radius: 4px;
}

.gs-mega-menu::-webkit-scrollbar-thumb:hover {
    background: var(--gs-primary-dark, #a01829);
}

.gs-nav-dropdown:hover .gs-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header du mega menu */
.gs-mega-menu-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--gs-border-light, #f0f0f0);
}

.gs-mega-menu-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gs-primary, #c41e3a);
    color: #fff !important;
    padding: 12px 25px;
    border-radius: var(--gs-radius-full, 50px);
    font-weight: 600;
    font-size: var(--gs-text-base, 0.9375rem);
    transition: all 0.3s ease;
    text-decoration: none;
}

.gs-mega-menu-all:hover {
    background: var(--gs-primary-dark, #a01829);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.3);
}

/* Colonnes du mega menu */
.gs-mega-menu-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.gs-mega-menu-column {
    min-width: 0;
}

/* Titre de catégorie */
.gs-mega-menu-category {
    font-size: var(--gs-text-base, 0.9375rem);
    font-weight: 700;
    color: var(--gs-secondary, #2c3e50);
    margin-bottom: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--gs-primary, #c41e3a);
    border-radius: var(--gs-radius-sm, 4px);
    transition: all 0.3s ease;
}

.gs-mega-menu-category:hover {
    border-left-width: 6px;
    padding-left: 14px;
}

/* Liste de produits */
.gs-mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.gs-mega-menu-list + .gs-mega-menu-category {
    margin-top: 25px;
}

.gs-mega-menu-list li {
    margin-bottom: 8px;
}

.gs-mega-menu-list a {
    display: block;
    padding: 9px 12px;
    color: #495057;
    font-size: var(--gs-text-small, 0.8125rem);
    border-radius: var(--gs-radius-sm, 4px);
    text-decoration: none;
    transition: all 0.3s ease;
}

.gs-mega-menu-list a:hover {
    background: var(--gs-bg-light, #f8f9fa);
    color: var(--gs-primary, #c41e3a);
    padding-left: 20px;
}

/* Lien "Voir tous" */
.gs-mega-menu-more a {
    font-weight: 600;
    color: var(--gs-primary, #c41e3a) !important;
    background: rgba(196, 30, 58, 0.05);
}

.gs-mega-menu-more a:hover {
    background: rgba(196, 30, 58, 0.1);
}

/* ========================================
   5. MENU MOBILE
   ======================================== */

/* État menu ouvert sur body */
body.gs-menu-open {
    overflow: hidden;
}

/* ========================================
   6. RESPONSIVE - TABLETTE
   ======================================== */

@media (max-width: 1200px) {
    .gs-mega-menu {
        min-width: 800px;
    }
    
    .gs-mega-menu-columns {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gs-nav-link {
        padding: 18px 18px;
    }
}

/* ========================================
   7. RESPONSIVE - MOBILE (≤992px)
   Style identique à V4
   ======================================== */

@media (max-width: 992px) {
    
    /* Navigation mobile */
    .gs-nav {
        z-index: var(--z-nav, 200) !important;
    }
    
    .gs-nav-sticky {
        z-index: var(--z-nav, 200) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Hamburger visible */
    .gs-nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        background: rgba(255,255,255,0.15) !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        border-radius: 8px !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: var(--z-hamburger, 9500) !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
    }
    
    .gs-nav-toggle:hover {
        background: rgba(255,255,255,0.25) !important;
        transform: none !important;
    }
    
    .gs-nav-toggle.gs-active {
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        z-index: var(--z-hamburger, 9500) !important;
        background: rgba(255,255,255,0.2) !important;
        border-color: rgba(255,255,255,0.4) !important;
    }
    
    /* Menu mobile fullscreen */
    .gs-nav-menu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: linear-gradient(180deg, #c41e3a 0%, #a01829 100%) !important;
        flex-direction: column !important;
        padding: 80px 20px 30px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: var(--z-menu-mobile, 9000) !important;
        opacity: 0;
        transform: translateX(-100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .gs-nav-menu.gs-active {
        display: flex !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    /* Scrollbar menu mobile */
    .gs-nav-menu::-webkit-scrollbar {
        width: 6px;
    }
    
    .gs-nav-menu::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
    }
    
    .gs-nav-menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
    }
    
    /* Items menu mobile */
    .gs-nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .gs-nav-item:last-child {
        border-bottom: none !important;
    }
    
    .gs-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 15px !important;
        color: white !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
    }
    
    .gs-nav-link:hover,
    .gs-nav-item.gs-active .gs-nav-link {
        background: rgba(255,255,255,0.15) !important;
        padding-left: 25px !important;
    }
    
    /* Dropdown mobile */
    .gs-mega-menu {
        position: static !important;
        display: none !important;
        background: rgba(0,0,0,0.15) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        max-height: 0 !important;
        min-width: auto !important;
        overflow: hidden !important;
        z-index: 9100 !important;
        transition: max-height 0.4s ease, opacity 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    .gs-nav-dropdown.gs-open .gs-mega-menu {
        display: block !important;
        max-height: 2000px !important;
        opacity: 1 !important;
    }
    
    /* Colonnes catégories mobile */
    .gs-mega-menu-columns {
        display: block !important;
        padding: 15px !important;
    }
    
    .gs-mega-menu-column {
        display: block !important;
        width: 100% !important;
    }
    
    /* Titres catégories mobile */
    .gs-mega-menu-category {
        display: block !important;
        color: white !important;
        font-weight: 700 !important;
        margin: 15px 0 10px 0 !important;
        padding: 12px 15px !important;
        background: rgba(255,255,255,0.1) !important;
        border-left: 4px solid white !important;
        border-radius: 6px !important;
    }
    
    .gs-mega-menu-category:first-child {
        margin-top: 0 !important;
    }
    
    /* Liens produits mobile */
    .gs-mega-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 15px 0 !important;
    }
    
    .gs-mega-menu-list li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
    
    .gs-mega-menu-list a {
        display: block !important;
        padding: 12px 15px 12px 30px !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    
    .gs-mega-menu-list a:hover {
        background: rgba(255,255,255,0.1) !important;
        color: white !important;
        padding-left: 35px !important;
    }
    
    /* Bouton voir tous mobile */
    .gs-mega-menu-header {
        background: rgba(255,255,255,0.1);
        margin: 15px;
        padding: 0;
        border-radius: 12px;
        border-bottom: none !important;
    }
    
    .gs-mega-menu-all {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        background: white !important;
        color: var(--gs-primary, #c41e3a) !important;
        width: calc(100% - 30px) !important;
        margin: 15px !important;
        padding: 18px 25px !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
        transition: all 0.3s ease !important;
    }
    
    .gs-mega-menu-all:hover {
        background: #f8f9fa !important;
        transform: scale(1.02) !important;
    }
    
    /* Voir tous lien */
    .gs-mega-menu-more a {
        color: white !important;
        font-weight: 600 !important;
        background: rgba(255,255,255,0.15) !important;
    }
    
    .gs-mega-menu-more a:hover {
        background: rgba(255,255,255,0.25) !important;
    }
    
    /* Barre nav devient conteneur pour hamburger */
    .gs-nav {
        padding: 15px 0;
        background: var(--gs-primary, #c41e3a);
        position: relative;
        width: 100%;
    }
    
    .gs-nav-container {
        justify-content: flex-start;
    }
}

/* ========================================
   8. RESPONSIVE - TRÈS PETIT MOBILE
   ======================================== */

@media (max-width: 576px) {
    
    /* Menu mobile */
    .gs-nav-menu {
        padding: 70px 15px 20px 15px !important;
    }
    
    .gs-nav-toggle {
        width: 45px !important;
        height: 45px !important;
    }
    
    .gs-nav-toggle.gs-active {
        top: 12px !important;
        left: 12px !important;
    }
    
    .gs-nav-link {
        padding: 16px 12px !important;
    }
    
    .gs-mega-menu-all {
        padding: 16px 20px !important;
    }
    
    .gs-mega-menu-category {
        padding: 10px 12px !important;
    }
    
    .gs-mega-menu-list a {
        padding: 10px 15px 10px 25px !important;
    }
}

/* ========================================
   9. ANIMATIONS
   ======================================== */

@keyframes gsMegaMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gsMobileMenuSlideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}


/* === footer.css === */
/* ============================================
   GRAPHISCANN - LAYOUT FOOTER
   CSS Modulaire Complet
   
   Version : 2.0.0
   Date : 30 Décembre 2025
   
   Styles complets du footer adaptés de header-footer-v4.css
   avec préfixe .gs-* pour le nouveau système modulaire.
   ============================================ */

/* ========================================
   1. FOOTER PRINCIPAL
   ======================================== */

.gs-footer {
    background-color: var(--gs-bg-dark, #2c2c2c);
    color: #b8b8b8;
    padding: 50px 0 0 0;
    margin-top: 60px;
    position: relative;
    z-index: var(--z-footer, 10);
}

/* ========================================
   2. CONTENU FOOTER (Grille)
   ======================================== */

.gs-footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #404040;
}

/* ========================================
   3. COLONNES FOOTER
   ======================================== */

.gs-footer-column {
    min-width: 0;
}

/* Logo footer */
.gs-footer-logo {
    margin-bottom: 20px;
}

.gs-footer-logo img {
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* À propos */
.gs-footer-about p {
    font-size: var(--gs-text-small, 0.8125rem);
    line-height: 1.7;
    margin-bottom: 15px;
    color: #b8b8b8;
}

/* Titres colonnes */
.gs-footer-title {
    color: #fff;
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.gs-footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--gs-primary, #c41e3a);
}

/* ========================================
   4. LISTES DE LIENS
   ======================================== */

.gs-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gs-footer-links li {
    margin-bottom: 10px;
}

.gs-footer-links a {
    color: #b8b8b8;
    text-decoration: none;
    font-size: var(--gs-text-small, 0.8125rem);
    transition: all 0.3s ease;
    display: inline-block;
}

.gs-footer-links a:hover {
    color: var(--gs-primary, #c41e3a);
    padding-left: 5px;
}

/* ========================================
   5. COORDONNÉES FOOTER
   ======================================== */

.gs-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: var(--gs-text-small, 0.8125rem);
}

.gs-footer-contact-item i {
    color: var(--gs-primary, #c41e3a);
    font-size: 16px;
    margin-top: 3px;
    min-width: 20px;
}

.gs-footer-contact-item strong {
    color: #fff;
    display: block;
    margin-bottom: 3px;
}

.gs-footer-contact-item a {
    color: #b8b8b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.gs-footer-contact-item a:hover {
    color: var(--gs-primary, #c41e3a);
}

/* ========================================
   6. RÉSEAUX SOCIAUX
   ======================================== */

.gs-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.gs-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #404040;
    color: #b8b8b8;
    border-radius: var(--gs-radius-sm, 4px);
    transition: all 0.3s ease;
    text-decoration: none;
}

.gs-footer-social a:hover {
    background-color: var(--gs-primary, #c41e3a);
    color: #fff;
    transform: translateY(-3px);
}

.gs-footer-social a i {
    font-size: 18px;
}

/* ========================================
   7. BAS DE FOOTER (Copyright)
   ======================================== */

.gs-footer-bottom {
    background: var(--gs-bg-darker, #1a1a1a);
    padding: 20px 0;
}

.gs-footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.gs-footer-copyright {
    font-size: var(--gs-text-small, 0.8125rem);
    color: #888;
}

.gs-footer-copyright a {
    color: var(--gs-primary, #c41e3a);
    text-decoration: none;
    transition: color 0.3s ease;
}

.gs-footer-copyright a:hover {
    color: #fff;
}

/* Liens légaux */
.gs-footer-legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.gs-footer-legal a {
    color: #888;
    text-decoration: none;
    font-size: var(--gs-text-small, 0.8125rem);
    transition: color 0.3s ease;
}

.gs-footer-legal a:hover {
    color: var(--gs-primary, #c41e3a);
}

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

@media (max-width: 1200px) {
    .gs-footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .gs-footer {
        padding: 40px 0 0 0;
        margin-top: 40px;
    }
    
    .gs-footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .gs-footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .gs-footer-links a:hover {
        padding-left: 0;
    }
    
    .gs-footer-contact-item {
        justify-content: center;
        text-align: left;
    }
    
    .gs-footer-social {
        justify-content: center;
    }
    
    .gs-footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .gs-footer-legal {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .gs-footer-content {
        gap: 25px;
    }
    
    .gs-footer-legal {
        gap: 15px;
    }
}

/* ========================================
   9. MAIN CONTENT WRAPPER
   ======================================== */

.gs-main {
    flex: 1;
    min-height: 0;
}


/* === buttons.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT BOUTONS
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Tous les styles de boutons du site, unifiés.
   ============================================ */

/* ========================================
   1. BOUTON DE BASE
   ======================================== */

.gs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: inherit;
    font-size: var(--gs-text-base, 0.9375rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--gs-radius-md);
    transition: var(--gs-transition);
}

.gs-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.25);
}

.gs-btn:disabled,
.gs-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Icônes dans les boutons */
.gs-btn i {
    font-size: 1em;
    transition: transform 0.3s ease;
}

.gs-btn:hover i {
    transform: translateX(3px);
}

/* ========================================
   2. VARIANTES DE COULEUR
   ======================================== */

/* Primary - Rouge Graphiscann */
.gs-btn-primary {
    background-color: var(--gs-primary);
    border-color: var(--gs-primary);
    color: var(--gs-text-inverse);
}

.gs-btn-primary:hover {
    background-color: var(--gs-primary-dark);
    border-color: var(--gs-primary-dark);
    color: var(--gs-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-md);
}

/* Primary Outline */
.gs-btn-primary-outline {
    background-color: transparent;
    border-color: var(--gs-primary);
    color: var(--gs-primary);
}

.gs-btn-primary-outline:hover {
    background-color: var(--gs-primary);
    border-color: var(--gs-primary);
    color: var(--gs-text-inverse);
}

/* Secondary - Bleu foncé */
.gs-btn-secondary {
    background-color: var(--gs-secondary);
    border-color: var(--gs-secondary);
    color: var(--gs-text-inverse);
}

.gs-btn-secondary:hover {
    background-color: var(--gs-secondary-dark);
    border-color: var(--gs-secondary-dark);
    color: var(--gs-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-md);
}

/* Secondary Outline */
.gs-btn-secondary-outline {
    background-color: transparent;
    border-color: var(--gs-secondary);
    color: var(--gs-secondary);
}

.gs-btn-secondary-outline:hover {
    background-color: var(--gs-secondary);
    border-color: var(--gs-secondary);
    color: var(--gs-text-inverse);
}

/* White (pour fonds colorés) */
.gs-btn-white {
    background-color: var(--gs-bg-white);
    border-color: var(--gs-bg-white);
    color: var(--gs-primary);
}

.gs-btn-white:hover {
    background-color: var(--gs-secondary);
    border-color: var(--gs-secondary);
    color: var(--gs-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-lg);
}

/* White Outline (pour fonds colorés) */
.gs-btn-white-outline {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--gs-text-inverse);
}

.gs-btn-white-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--gs-text-inverse);
    color: var(--gs-text-inverse);
}

/* Eco / Green */
.gs-btn-eco {
    background-color: var(--gs-eco-green);
    border-color: var(--gs-eco-green);
    color: var(--gs-text-inverse);
}

.gs-btn-eco:hover {
    background-color: var(--gs-eco-green-dark);
    border-color: var(--gs-eco-green-dark);
    color: var(--gs-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-md);
}

/* Light / Ghost */
.gs-btn-light {
    background-color: var(--gs-bg-light);
    border-color: var(--gs-border);
    color: var(--gs-text);
}

.gs-btn-light:hover {
    background-color: var(--gs-bg-section);
    border-color: var(--gs-border-dark);
    color: var(--gs-text-dark);
}

/* Link style */
.gs-btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--gs-primary);
    padding-left: 0;
    padding-right: 0;
}

.gs-btn-link:hover {
    color: var(--gs-primary-dark);
    text-decoration: underline;
}

/* ========================================
   3. TAILLES
   ======================================== */

/* Small */
.gs-btn-sm {
    padding: 8px 18px;
    font-size: var(--gs-text-small, 0.8125rem);
    border-radius: var(--gs-radius-sm);
}

/* Large */
.gs-btn-lg {
    padding: 16px 36px;
    font-size: var(--gs-text-lead, 1.125rem);
    border-radius: var(--gs-radius-lg);
}

/* Extra Large (pour CTA héros) */
.gs-btn-xl {
    padding: 18px 45px;
    font-size: var(--gs-text-lead, 1.125rem);
    border-radius: var(--gs-radius-full);
}

/* Full width */
.gs-btn-block {
    display: flex;
    width: 100%;
}

/* ========================================
   4. FORMES SPÉCIALES
   ======================================== */

/* Pill / Rounded */
.gs-btn-pill {
    border-radius: var(--gs-radius-full);
}

/* Icon only (carré) */
.gs-btn-icon {
    padding: 12px;
    width: 44px;
    height: 44px;
}

.gs-btn-icon.gs-btn-sm {
    padding: 8px;
    width: 34px;
    height: 34px;
}

.gs-btn-icon.gs-btn-lg {
    padding: 16px;
    width: 54px;
    height: 54px;
}

/* Circle */
.gs-btn-circle {
    border-radius: var(--gs-radius-circle);
    padding: 12px;
    width: 48px;
    height: 48px;
}

/* ========================================
   5. BOUTONS AVEC EFFETS SPÉCIAUX
   ======================================== */

/* Avec ombre portée forte */
.gs-btn-elevated {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gs-btn-elevated:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

/* Avec animation pulse */
.gs-btn-pulse {
    animation: gs-pulse 2s infinite;
}

@keyframes gs-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(196, 30, 58, 0);
    }
}

/* ========================================
   6. GROUPES DE BOUTONS
   ======================================== */

.gs-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gs-btn-group-vertical {
    flex-direction: column;
}

.gs-btn-group-center {
    justify-content: center;
}

/* ========================================
   7. BOUTONS CTA (Call-to-Action)
   Utilisés dans les sections de conversion
   ======================================== */

.gs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--gs-radius-full);
    font-size: var(--gs-text-base, 0.9375rem);
    font-weight: 600;
    text-decoration: none;
    transition: var(--gs-transition);
    border: 2px solid transparent;
}

.gs-cta-btn.primary {
    background: var(--gs-bg-white);
    color: var(--gs-primary);
}

.gs-cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.gs-cta-btn.secondary {
    background: transparent;
    color: var(--gs-text-inverse);
    border-color: rgba(255, 255, 255, 0.5);
}

.gs-cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gs-text-inverse);
}

/* ========================================
   8. BOUTON RETOUR EN HAUT
   ======================================== */

.gs-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gs-primary);
    color: var(--gs-text-inverse);
    border: none;
    border-radius: var(--gs-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--gs-transition);
    box-shadow: var(--gs-shadow-md);
    z-index: var(--z-sticky);
}

.gs-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gs-back-to-top:hover {
    background: var(--gs-primary-dark);
    transform: translateY(-5px);
    box-shadow: var(--gs-shadow-lg);
}

.gs-back-to-top i {
    font-size: 1.2rem;
}

/* ========================================
   9. RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .gs-btn {
        padding: 10px 20px;
        font-size: var(--gs-text-small, 0.875rem);
    }
    
    .gs-btn-lg {
        padding: 14px 28px;
        font-size: var(--gs-text-base, 0.9375rem);
    }
    
    .gs-btn-xl {
        padding: 14px 30px;
        font-size: var(--gs-text-base, 0.9375rem);
    }
    
    .gs-btn-block-mobile {
        display: flex;
        width: 100%;
    }
    
    .gs-btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .gs-btn-group .gs-btn {
        width: 100%;
    }
    
    .gs-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}


/* === cards.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT CARTES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Styles unifiés pour toutes les cartes du site :
   - Cartes produits
   - Cartes réalisations
   - Cartes services
   - Cartes info/features
   ============================================ */

/* ========================================
   1. CARTE DE BASE
   ======================================== */

.gs-card {
    background: var(--gs-bg-white);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    overflow: hidden;
    transition: var(--gs-transition);
}

.gs-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--gs-shadow-hover);
}

/* Carte cliquable (lien) */
a.gs-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ========================================
   2. STRUCTURE INTERNE
   ======================================== */

/* Image de la carte */
.gs-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.gs-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gs-card:hover .gs-card-image img {
    transform: scale(1.05);
}

/* Badge sur l'image */
.gs-card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gs-primary);
    color: var(--gs-text-inverse);
    padding: 6px 14px;
    border-radius: var(--gs-radius-full);
    font-size: var(--gs-text-small, 0.8125rem);
    font-weight: 600;
    z-index: 2;
}

.gs-card-badge.eco {
    background: var(--gs-eco-green);
}

.gs-card-badge.new {
    background: var(--gs-accent);
}

/* Corps de la carte */
.gs-card-body {
    padding: 20px;
}

/* Titre */
.gs-card-title {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin-bottom: 10px;
    line-height: var(--gs-lh-heading, 1.25);
}

.gs-card:hover .gs-card-title {
    color: var(--gs-primary);
}

/* Description */
.gs-card-text {
    font-size: var(--gs-text-base, 0.9375rem);
    color: var(--gs-text-light);
    line-height: var(--gs-lh-normal, 1.6);
    margin-bottom: 15px;
}

/* Pied de carte */
.gs-card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--gs-border-light);
    background: var(--gs-bg-light);
}

/* ========================================
   3. CARTE PRODUIT
   ======================================== */

.gs-card-product {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gs-card-product .gs-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gs-card-product .gs-card-text {
    flex: 1;
}

/* Prix */
.gs-card-price {
    font-size: var(--gs-text-lead, 1.125rem);
    font-weight: 700;
    color: var(--gs-primary);
    margin-top: auto;
}

.gs-card-price-old {
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-text-muted);
    text-decoration: line-through;
    margin-right: 8px;
}

/* Call to action dans carte produit */
.gs-card-product .gs-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--gs-bg-light);
    color: var(--gs-primary);
    font-weight: 600;
    font-size: var(--gs-text-small, 0.875rem);
    text-align: center;
    transition: var(--gs-transition);
}

.gs-card-product:hover .gs-card-cta {
    background: var(--gs-primary);
    color: var(--gs-text-inverse);
}

.gs-card-cta i {
    transition: transform 0.3s ease;
}

.gs-card-product:hover .gs-card-cta i {
    transform: translateX(5px);
}

/* ========================================
   4. CARTE RÉALISATION
   ======================================== */

.gs-card-realisation {
    position: relative;
    cursor: pointer;
}

.gs-card-realisation .gs-card-image {
    aspect-ratio: 1/1;
}

/* Overlay au hover */
.gs-card-realisation .gs-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: var(--gs-transition);
}

.gs-card-realisation:hover .gs-card-overlay {
    opacity: 1;
}

.gs-card-realisation .gs-card-title {
    color: var(--gs-text-inverse);
    margin-bottom: 5px;
}

.gs-card-realisation .gs-card-category {
    font-size: var(--gs-text-small, 0.8125rem);
    color: rgba(255, 255, 255, 0.8);
}

/* Icône zoom */
.gs-card-realisation .gs-card-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 60px;
    height: 60px;
    background: var(--gs-primary);
    border-radius: var(--gs-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gs-text-inverse);
    font-size: 1.5rem;
    opacity: 0;
    transition: var(--gs-transition);
}

.gs-card-realisation:hover .gs-card-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ========================================
   5. CARTE SERVICE / FEATURE
   ======================================== */

.gs-card-service {
    text-align: center;
    padding: 30px 20px;
}

.gs-card-service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
    border-radius: var(--gs-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gs-text-inverse);
    font-size: 2rem;
    transition: var(--gs-transition);
}

.gs-card-service:hover .gs-card-service-icon {
    transform: scale(1.1) rotate(5deg);
}

.gs-card-service .gs-card-title {
    margin-bottom: 15px;
}

/* Variante avec bordure gauche */
.gs-card-service-bordered {
    text-align: left;
    padding: 25px;
    border-left: 4px solid var(--gs-primary);
}

.gs-card-service-bordered .gs-card-service-icon {
    width: 50px;
    height: 50px;
    margin: 0 0 15px 0;
    font-size: 1.5rem;
}

/* ========================================
   6. CARTE INFO / FEATURE SIMPLE
   ======================================== */

.gs-card-info {
    padding: 25px;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-bg-section);
}

.gs-card-info-icon {
    width: 50px;
    height: 50px;
    background: var(--gs-primary);
    border-radius: var(--gs-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gs-text-inverse);
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.gs-card-info h3 {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin-bottom: 10px;
}

.gs-card-info p {
    font-size: var(--gs-text-base, 0.9375rem);
    color: var(--gs-text-light);
    line-height: var(--gs-lh-normal, 1.6);
    margin: 0;
}

/* ========================================
   6b. CARTE AVEC BORDURE GAUCHE (style devis)
   ======================================== */

.gs-card-bordered {
    background: var(--gs-bg-section, #f8f9fa);
    border-left: 5px solid var(--gs-primary);
    border-radius: var(--gs-radius-md);
    padding: 25px;
    margin-bottom: 20px;
}

.gs-card-bordered h3 {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-card-bordered h3 i {
    color: var(--gs-primary);
    font-size: 1.25rem;
}

.gs-card-bordered p {
    font-size: var(--gs-text-base, 0.9375rem);
    color: var(--gs-text-light);
    line-height: var(--gs-lh-normal, 1.6);
    margin: 0 0 10px 0;
}

.gs-card-bordered p:last-child {
    margin-bottom: 0;
}

.gs-card-bordered ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: var(--gs-text-light);
}

.gs-card-bordered ul li {
    margin-bottom: 8px;
    font-size: var(--gs-text-base, 0.9375rem);
    line-height: var(--gs-lh-normal, 1.6);
}

/* Variante mise en avant (fond coloré) */
.gs-card-highlight {
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
    border-left: none;
    color: var(--gs-text-inverse);
}

.gs-card-highlight h3,
.gs-card-highlight h3 i,
.gs-card-highlight p,
.gs-card-highlight ul,
.gs-card-highlight ul li {
    color: var(--gs-text-inverse) !important;
}

.gs-card-highlight a {
    color: var(--gs-text-inverse) !important;
    font-weight: 600;
}

.gs-card-highlight a:hover {
    opacity: 0.9;
}

/* Numéro de téléphone dans carte highlight */
.gs-card-highlight .gs-phone-big {
    font-size: var(--gs-h2-size, 1.5rem);
    font-weight: var(--gs-fw-heading, 700);
    margin: 15px 0;
}

.gs-card-highlight .gs-phone-big a {
    color: var(--gs-text-inverse) !important;
    text-decoration: none;
}

.gs-card-highlight .gs-phone-big a:hover {
    text-decoration: underline;
}

/* ========================================
   7. GRILLES DE CARTES
   ======================================== */

.gs-cards-grid {
    display: grid;
    gap: 30px;
}

/* 2 colonnes */
.gs-cards-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.gs-cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 colonnes */
.gs-cards-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit responsive */
.gs-cards-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

@media (max-width: 1200px) {
    .gs-cards-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .gs-cards-grid-3,
    .gs-cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gs-cards-grid {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .gs-cards-grid-2,
    .gs-cards-grid-3,
    .gs-cards-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .gs-cards-grid {
        gap: 15px;
    }
    
    .gs-card-body {
        padding: 15px;
    }
    
    .gs-card-service {
        padding: 20px 15px;
    }
    
    .gs-card-service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ========================================
   9. ÉTATS SPÉCIAUX
   ======================================== */

/* Carte désactivée */
.gs-card.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Carte en chargement */
.gs-card.loading {
    position: relative;
}

.gs-card.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carte featured/mise en avant */
.gs-card.featured {
    border: 2px solid var(--gs-primary);
}

.gs-card.featured .gs-card-badge {
    background: var(--gs-secondary);
}


/* === hero.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT HERO SECTIONS
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Styles unifiés pour toutes les sections hero du site.
   
   Variantes :
   - .gs-hero (base)
   - .gs-hero-primary (fond rouge)
   - .gs-hero-dark (fond sombre)
   - .gs-hero-image (avec image de fond)
   - .gs-hero-eco (fond vert environnement)
   ============================================ */

/* ========================================
   1. HERO DE BASE
   ======================================== */

.gs-hero {
    position: relative;
    padding: 60px 20px;
    text-align: center;
    color: var(--gs-text-inverse);
    overflow: hidden;
}

.gs-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

/* Titre principal */
.gs-hero h1,
.gs-hero-title {
    font-size: var(--gs-h1-size, 2rem);
    font-weight: var(--gs-fw-heading, 600);
    margin-bottom: 20px;
    color: inherit;
    line-height: var(--gs-lh-heading, 1.25);
}

/* Sous-titre */
.gs-hero p,
.gs-hero-subtitle {
    font-size: var(--gs-text-lead, 1.125rem);
    line-height: var(--gs-lh-normal, 1.6);
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto 25px auto;
}

/* Badge / Highlight dans le hero */
.gs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 25px;
    border-radius: var(--gs-radius-full);
    font-weight: 600;
    font-size: var(--gs-text-base, 0.9375rem);
    margin-top: 15px;
}

.gs-hero-badge i {
    font-size: 1.2rem;
}

/* Compteur (ex: nombre de réalisations) */
.gs-hero-counter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(196, 30, 58, 0.9);
    padding: 12px 25px;
    border-radius: var(--gs-radius-full);
    font-weight: 600;
    font-size: var(--gs-text-base, 0.9375rem);
}

.gs-hero-counter i {
    font-size: 1.2rem;
}

/* ========================================
   2. VARIANTE PRIMARY (Rouge)
   ======================================== */

.gs-hero-primary {
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
}

/* ========================================
   3. VARIANTE DARK (Sombre)
   ======================================== */

.gs-hero-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* ========================================
   4. VARIANTE AVEC IMAGE DE FOND
   ======================================== */

.gs-hero-image {
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Overlay gradient sur image */
.gs-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.85) 0%, rgba(44, 62, 80, 0.75) 100%);
    z-index: 1;
}

/* Alternative : overlay sombre */
.gs-hero-overlay-dark {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.85) 100%);
}

/* Titre avec ombre pour lisibilité sur image */
.gs-hero-image h1,
.gs-hero-image .gs-hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.gs-hero-image .gs-hero-subtitle {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========================================
   5. VARIANTE ECO (Vert)
   ======================================== */

.gs-hero-eco {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #4caf50 100%);
    padding: 100px 20px 80px;
}

.gs-hero-eco::before {
    content: '🌱';
    position: absolute;
    font-size: 400px;
    opacity: 0.05;
    right: -100px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    pointer-events: none;
}

.gs-hero-eco .gs-hero-badge {
    background: var(--gs-bg-white);
    color: var(--gs-eco-green-dark);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.gs-hero-eco .gs-hero-badge i {
    color: var(--gs-eco-green);
}

/* ========================================
   6. VARIANTE COMPACTE (pour pages simples)
   ======================================== */

.gs-hero-compact {
    padding: 40px 20px;
}

.gs-hero-compact h1 {
    margin-bottom: 10px;
}

.gs-hero-compact p {
    margin-bottom: 0;
}

/* ========================================
   7. HERO AVEC ACTIONS (boutons)
   ======================================== */

.gs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

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

@media (max-width: 992px) {
    .gs-hero {
        padding: 50px 20px;
    }
    
    .gs-hero-image {
        min-height: 380px;
    }
    
    .gs-hero-eco {
        padding: 80px 20px 60px;
    }
    
    .gs-hero-eco::before {
        font-size: 250px;
        right: -50px;
    }
}

@media (max-width: 576px) {
    .gs-hero {
        padding: 40px 15px;
    }
    
    .gs-hero-image {
        min-height: 320px;
    }
    
    .gs-hero-eco {
        padding: 60px 15px 50px;
    }
    
    .gs-hero-eco::before {
        display: none;
    }
    
    .gs-hero-badge,
    .gs-hero-counter {
        padding: 10px 20px;
        font-size: var(--gs-text-small, 0.875rem);
    }
    
    .gs-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .gs-hero-actions .gs-btn,
    .gs-hero-actions .gs-cta-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ========================================
   9. ANIMATION D'ENTRÉE (optionnel)
   ======================================== */

.gs-hero-animated .gs-hero-content {
    animation: heroFadeIn 0.8s ease-out;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* === cta.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT CTA SECTIONS
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Sections Call-to-Action unifiées pour tout le site.
   Utilisées en fin de page pour encourager la conversion.
   ============================================ */

/* ========================================
   1. CTA SECTION DE BASE
   ======================================== */

.gs-cta-section {
    padding: 60px 20px;
    text-align: center;
}

.gs-cta-section-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Titre */
.gs-cta-section h2,
.gs-cta-section-title {
    font-size: var(--gs-h2-size, 1.5rem);
    font-weight: var(--gs-fw-heading, 600);
    margin-bottom: 15px;
    line-height: var(--gs-lh-heading, 1.25);
}

/* Description */
.gs-cta-section p,
.gs-cta-section-text {
    font-size: var(--gs-text-lead, 1.125rem);
    line-height: var(--gs-lh-normal, 1.6);
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* Groupe de boutons */
.gs-cta-section-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   2. VARIANTE PRIMARY (Rouge/Dégradé)
   La plus utilisée
   ======================================== */

.gs-cta-primary {
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
    color: var(--gs-text-inverse);
}

.gs-cta-primary h2,
.gs-cta-primary p {
    color: var(--gs-text-inverse);
}

/* ========================================
   3. VARIANTE DARK (Sombre)
   ======================================== */

.gs-cta-dark {
    background: linear-gradient(135deg, var(--gs-secondary) 0%, var(--gs-bg-darker) 100%);
    color: var(--gs-text-inverse);
}

.gs-cta-dark h2,
.gs-cta-dark p {
    color: var(--gs-text-inverse);
}

/* ========================================
   4. VARIANTE LIGHT (Claire)
   ======================================== */

.gs-cta-light {
    background: var(--gs-bg-light);
    color: var(--gs-text);
}

.gs-cta-light h2 {
    color: var(--gs-text-dark);
}

.gs-cta-light p {
    color: var(--gs-text-light);
    opacity: 1;
}

/* ========================================
   5. VARIANTE ECO (Vert)
   ======================================== */

.gs-cta-eco {
    background: linear-gradient(135deg, var(--gs-eco-green-dark) 0%, var(--gs-eco-green) 100%);
    color: var(--gs-text-inverse);
}

.gs-cta-eco h2,
.gs-cta-eco p {
    color: var(--gs-text-inverse);
}

/* ========================================
   6. CTA COMPACTE (inline)
   Pour usage dans le contenu
   ======================================== */

.gs-cta-compact {
    padding: 40px 20px;
}

.gs-cta-compact h2 {
    font-size: var(--gs-h3-size, 1.25rem);
    margin-bottom: 10px;
}

.gs-cta-compact p {
    margin-bottom: 20px;
}

/* ========================================
   7. CTA AVEC ICÔNE
   ======================================== */

.gs-cta-with-icon {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}

.gs-cta-icon {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--gs-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.gs-cta-with-icon .gs-cta-section-content {
    flex: 1;
    text-align: left;
    margin: 0;
}

.gs-cta-with-icon p {
    margin-left: 0;
    margin-right: 0;
}

.gs-cta-with-icon .gs-cta-section-buttons {
    justify-content: flex-start;
}

/* ========================================
   8. CTA AVEC IMAGE DE FOND
   ======================================== */

.gs-cta-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gs-cta-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.9) 0%, rgba(160, 24, 41, 0.95) 100%);
}

.gs-cta-image .gs-cta-section-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   9. CTA DEUX COLONNES
   ======================================== */

.gs-cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.gs-cta-split-content {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gs-cta-split-content.left {
    background: var(--gs-primary);
    color: var(--gs-text-inverse);
    text-align: left;
}

.gs-cta-split-content.right {
    background: var(--gs-secondary);
    color: var(--gs-text-inverse);
    text-align: left;
}

.gs-cta-split h3 {
    font-size: var(--gs-h3-size, 1.25rem);
    font-weight: var(--gs-fw-heading, 600);
    margin-bottom: 15px;
    color: inherit;
}

.gs-cta-split p {
    margin-bottom: 20px;
    opacity: 0.9;
}

/* ========================================
   10. ANIMATION (optionnel)
   ======================================== */

.gs-cta-animated {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.gs-cta-animated.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   11. RESPONSIVE
   ======================================== */

@media (max-width: 992px) {
    .gs-cta-section {
        padding: 50px 20px;
    }
    
    .gs-cta-with-icon {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    
    .gs-cta-with-icon .gs-cta-section-content {
        text-align: center;
    }
    
    .gs-cta-with-icon .gs-cta-section-buttons {
        justify-content: center;
    }
    
    .gs-cta-icon {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
    
    .gs-cta-split {
        grid-template-columns: 1fr;
    }
    
    .gs-cta-split-content {
        padding: 40px 20px;
        text-align: center;
    }
    
    .gs-cta-split-content.left,
    .gs-cta-split-content.right {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .gs-cta-section {
        padding: 40px 15px;
    }
    
    .gs-cta-compact {
        padding: 30px 15px;
    }
    
    .gs-cta-section-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .gs-cta-section-buttons .gs-btn,
    .gs-cta-section-buttons .gs-cta-btn {
        width: 100%;
        max-width: 280px;
    }
    
    .gs-cta-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}


/* === forms.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT FORMULAIRES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Styles unifiés pour tous les formulaires :
   - Formulaire de contact
   - Formulaire de devis
   - Champs de recherche
   - Formulaires admin
   ============================================ */

/* ========================================
   1. CONTENEUR FORMULAIRE
   ======================================== */

.gs-form {
    width: 100%;
}

.gs-form-section {
    margin-bottom: 30px;
}

.gs-form-section h4,
.gs-form-section-title {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gs-border-light);
}

/* ========================================
   2. GROUPES DE CHAMPS
   ======================================== */

.gs-form-group {
    margin-bottom: 20px;
}

.gs-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gs-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ========================================
   3. LABELS
   ======================================== */

.gs-label {
    display: block;
    font-size: var(--gs-text-base, 0.9375rem);
    font-weight: 500;
    color: var(--gs-text-dark);
    margin-bottom: 8px;
}

.gs-label-required::after {
    content: ' *';
    color: var(--gs-danger);
}

.gs-label-hint {
    display: block;
    font-size: var(--gs-text-small, 0.8125rem);
    font-weight: 400;
    color: var(--gs-text-muted);
    margin-top: 4px;
}

/* ========================================
   4. INPUTS DE BASE
   ======================================== */

.gs-input,
.gs-select,
.gs-textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: var(--gs-text-base, 0.9375rem);
    line-height: 1.5;
    color: var(--gs-text);
    background-color: var(--gs-bg-white);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    transition: var(--gs-transition);
}

.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus {
    outline: none;
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15);
}

.gs-input::placeholder,
.gs-textarea::placeholder {
    color: var(--gs-text-muted);
}

/* Textarea */
.gs-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.gs-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ========================================
   5. VARIANTES DE TAILLE
   ======================================== */

/* Small */
.gs-input-sm,
.gs-select-sm {
    padding: 8px 12px;
    font-size: var(--gs-text-small, 0.8125rem);
}

/* Large */
.gs-input-lg,
.gs-select-lg {
    padding: 16px 20px;
    font-size: var(--gs-text-lead, 1.125rem);
}

/* ========================================
   6. ÉTATS
   ======================================== */

/* Disabled */
.gs-input:disabled,
.gs-select:disabled,
.gs-textarea:disabled {
    background-color: var(--gs-bg-light);
    color: var(--gs-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Readonly */
.gs-input:read-only {
    background-color: var(--gs-bg-section);
}

/* Error */
.gs-input-error,
.gs-select-error,
.gs-textarea-error {
    border-color: var(--gs-danger);
}

.gs-input-error:focus,
.gs-select-error:focus,
.gs-textarea-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Success */
.gs-input-success,
.gs-select-success {
    border-color: var(--gs-success);
}

.gs-input-success:focus,
.gs-select-success:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

/* ========================================
   7. MESSAGES D'ERREUR / AIDE
   ======================================== */

.gs-form-error {
    display: block;
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-danger);
    margin-top: 6px;
}

.gs-form-error i {
    margin-right: 5px;
}

.gs-form-help {
    display: block;
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-text-muted);
    margin-top: 6px;
}

/* ========================================
   8. CHECKBOXES & RADIOS
   ======================================== */

.gs-checkbox-group,
.gs-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gs-checkbox,
.gs-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.gs-checkbox input,
.gs-radio input {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--gs-primary);
}

.gs-checkbox-label,
.gs-radio-label {
    font-size: var(--gs-text-base, 0.9375rem);
    color: var(--gs-text);
    line-height: 1.4;
}

/* Inline */
.gs-checkbox-group-inline,
.gs-radio-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

/* ========================================
   9. INPUT AVEC ICÔNE
   ======================================== */

.gs-input-icon-wrapper {
    position: relative;
}

.gs-input-icon-wrapper .gs-input {
    padding-left: 45px;
}

.gs-input-icon-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gs-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

/* Icon à droite */
.gs-input-icon-right .gs-input {
    padding-left: 16px;
    padding-right: 45px;
}

.gs-input-icon-right i {
    left: auto;
    right: 16px;
}

/* ========================================
   10. INPUT AVEC ADDON
   ======================================== */

.gs-input-group {
    display: flex;
}

.gs-input-group .gs-input {
    flex: 1;
    border-radius: var(--gs-radius-md) 0 0 var(--gs-radius-md);
}

.gs-input-addon {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--gs-bg-light);
    border: 1px solid var(--gs-border);
    border-left: none;
    border-radius: 0 var(--gs-radius-md) var(--gs-radius-md) 0;
    font-size: var(--gs-text-base, 0.9375rem);
    color: var(--gs-text-light);
}

/* ========================================
   11. FILE INPUT
   ======================================== */

.gs-file-input {
    position: relative;
}

.gs-file-input input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gs-file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed var(--gs-border);
    border-radius: var(--gs-radius-lg);
    background: var(--gs-bg-light);
    text-align: center;
    transition: var(--gs-transition);
}

.gs-file-input:hover .gs-file-input-label {
    border-color: var(--gs-primary);
    background: rgba(196, 30, 58, 0.05);
}

.gs-file-input-label i {
    font-size: 1.5rem;
    color: var(--gs-primary);
}

/* ========================================
   12. CHAMP RECHERCHE
   ======================================== */

.gs-search-field {
    position: relative;
}

.gs-search-field .gs-input {
    padding-left: 45px;
    padding-right: 45px;
    border-radius: var(--gs-radius-full);
}

.gs-search-field .gs-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gs-text-muted);
}

.gs-search-field .gs-search-clear {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gs-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: var(--gs-transition);
}

.gs-search-field .gs-input:not(:placeholder-shown) + .gs-search-icon + .gs-search-clear {
    opacity: 1;
}

/* ========================================
   13. ALERTES FORMULAIRE
   ======================================== */

.gs-form-alert {
    padding: 15px 20px;
    border-radius: var(--gs-radius-md);
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gs-form-alert i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.gs-form-alert-success {
    background: var(--gs-success-bg);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.gs-form-alert-error {
    background: var(--gs-danger-bg);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.gs-form-alert-warning {
    background: var(--gs-warning-bg);
    color: #856404;
    border: 1px solid #ffeeba;
}

.gs-form-alert-info {
    background: var(--gs-info-bg);
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* ========================================
   14. HONEYPOT (anti-spam)
   ======================================== */

.gs-hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   15. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .gs-form-row,
    .gs-form-row-3 {
        grid-template-columns: 1fr;
    }
    
    .gs-checkbox-group-inline,
    .gs-radio-group-inline {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .gs-input,
    .gs-select,
    .gs-textarea {
        padding: 10px 14px;
    }
    
    .gs-form-group {
        margin-bottom: 15px;
    }
}


/* === breadcrumb.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT BREADCRUMB
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Fil d'Ariane unifié pour tout le site.
   ============================================ */

/* ========================================
   1. CONTENEUR BREADCRUMB
   ======================================== */

.gs-breadcrumb {
    background: var(--gs-bg-light);
    padding: 15px 0;
    margin: 0;
    border-bottom: 1px solid var(--gs-border);
}

.gs-breadcrumb-container {
    max-width: var(--gs-container-max, 1320px);
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   2. LISTE
   ======================================== */

.gs-breadcrumb ul,
.gs-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ========================================
   3. ITEMS
   ======================================== */

.gs-breadcrumb li,
.gs-breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-text-light);
}

/* Séparateur */
.gs-breadcrumb li:not(:last-child)::after,
.gs-breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin-left: 8px;
    color: var(--gs-text-muted);
    font-weight: 300;
}

/* Dernier item (page actuelle) */
.gs-breadcrumb li:last-child,
.gs-breadcrumb-item:last-child {
    color: var(--gs-text-dark);
    font-weight: 500;
}

/* ========================================
   4. LIENS
   ======================================== */

.gs-breadcrumb a {
    color: var(--gs-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gs-breadcrumb a:hover {
    color: var(--gs-primary-dark);
    text-decoration: underline;
}

/* Icône accueil */
.gs-breadcrumb-home {
    display: inline-flex;
    align-items: center;
}

.gs-breadcrumb-home i {
    margin-right: 5px;
    font-size: 0.9em;
}

/* ========================================
   5. VARIANTES
   ======================================== */

/* Sans fond */
.gs-breadcrumb-transparent {
    background: transparent;
    border-bottom: none;
    padding: 10px 0;
}

/* Sur fond sombre (dans hero) */
.gs-breadcrumb-dark {
    background: transparent;
    border-bottom: none;
}

.gs-breadcrumb-dark li,
.gs-breadcrumb-dark .gs-breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
}

.gs-breadcrumb-dark li:last-child {
    color: var(--gs-text-inverse);
}

.gs-breadcrumb-dark a {
    color: rgba(255, 255, 255, 0.9);
}

.gs-breadcrumb-dark a:hover {
    color: var(--gs-text-inverse);
}

.gs-breadcrumb-dark li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.5);
}

/* Centré */
.gs-breadcrumb-center .gs-breadcrumb-list,
.gs-breadcrumb-center ul {
    justify-content: center;
}

/* ========================================
   6. RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .gs-breadcrumb {
        padding: 12px 0;
    }
    
    .gs-breadcrumb-container {
        padding: 0 15px;
    }
    
    .gs-breadcrumb li,
    .gs-breadcrumb-item {
        font-size: 0.75rem;
    }
    
    /* Masquer les items intermédiaires sur mobile si trop long */
    .gs-breadcrumb-truncate li:not(:first-child):not(:last-child) {
        display: none;
    }
    
    .gs-breadcrumb-truncate li:first-child::after {
        content: '...';
        margin-left: 8px;
        margin-right: 8px;
    }
}


/* === sections.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT SECTIONS
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Styles pour les sections de contenu :
   - Sections avec bordure gauche
   - Sections alternées
   - Sections de texte institutionnel
   ============================================ */

/* ========================================
   1. SECTION DE BASE
   ======================================== */

.gs-section {
    padding: var(--gs-section-padding, 60px) 0;
}

.gs-section-content {
    max-width: var(--gs-container-max, 1320px);
    margin: 0 auto;
    padding: 0 20px;
}

/* Section étroite pour texte */
.gs-section-narrow {
    max-width: var(--gs-container-narrow, 900px);
}

/* ========================================
   2. EN-TÊTES DE SECTION
   ======================================== */

.gs-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.gs-section-title {
    font-size: var(--gs-h2-size, 1.5rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Trait décoratif sous le titre */
.gs-section-title-decorated::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gs-primary);
    border-radius: 2px;
}

.gs-section-subtitle {
    font-size: var(--gs-text-lead, 1.125rem);
    color: var(--gs-text-light);
    max-width: 700px;
    margin: 20px auto 0;
    line-height: var(--gs-lh-normal, 1.6);
}

/* Header aligné à gauche */
.gs-section-header-left {
    text-align: left;
}

.gs-section-header-left .gs-section-title-decorated::after {
    left: 0;
    transform: none;
}

.gs-section-header-left .gs-section-subtitle {
    margin-left: 0;
    margin-right: 0;
}

/* ========================================
   3. VARIANTES DE FOND
   ======================================== */

.gs-section-light {
    background: var(--gs-bg-light);
}

.gs-section-white {
    background: var(--gs-bg-white);
}

.gs-section-alt {
    background: var(--gs-bg-section);
}

.gs-section-dark {
    background: var(--gs-bg-dark);
    color: var(--gs-text-inverse);
}

.gs-section-dark .gs-section-title {
    color: var(--gs-text-inverse);
}

.gs-section-dark .gs-section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.gs-section-primary {
    background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
    color: var(--gs-text-inverse);
}

.gs-section-eco {
    background: var(--gs-eco-bg);
}

/* ========================================
   4. SECTION AVEC BORDURE GAUCHE
   Pour les blocs de contenu institutionnel
   ======================================== */

.gs-content-block {
    margin-bottom: 40px;
    padding: 30px;
    background: var(--gs-bg-section);
    border-radius: var(--gs-radius-lg);
    border-left: 4px solid var(--gs-primary);
}

.gs-content-block h2 {
    font-size: var(--gs-h3-size, 1.25rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gs-content-block h2 i {
    color: var(--gs-primary);
    font-size: 1.2rem;
}

.gs-content-block p {
    font-size: var(--gs-text-base, 0.9375rem);
    line-height: var(--gs-lh-normal, 1.6);
    color: var(--gs-text);
    margin-bottom: 15px;
}

.gs-content-block p:last-child {
    margin-bottom: 0;
}

.gs-content-block a {
    color: var(--gs-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gs-content-block a:hover {
    color: var(--gs-primary-dark);
    text-decoration: underline;
}

/* Listes dans les blocs */
.gs-content-block ul {
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

.gs-content-block ul li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--gs-text);
    line-height: var(--gs-lh-normal, 1.6);
    border-bottom: 1px solid var(--gs-border-light);
    font-size: var(--gs-text-base, 0.9375rem);
}

.gs-content-block ul li:last-child {
    border-bottom: none;
}

.gs-content-block ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gs-primary);
    font-weight: bold;
}

/* ========================================
   5. BLOC INFO STRUCTURÉ
   Pour les tableaux clé/valeur
   ======================================== */

.gs-info-block {
    background: var(--gs-bg-white);
    padding: 20px;
    border-radius: var(--gs-radius-md);
    margin-top: 15px;
}

.gs-info-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--gs-border-light);
}

.gs-info-item:last-child {
    border-bottom: none;
}

.gs-info-label {
    font-weight: 600;
    color: var(--gs-text-dark);
    min-width: 200px;
    flex-shrink: 0;
}

.gs-info-value {
    color: var(--gs-text-light);
}

.gs-info-value a {
    color: var(--gs-primary);
    text-decoration: none;
}

.gs-info-value a:hover {
    text-decoration: underline;
}

/* ========================================
   6. GRILLES DE CONTENU
   ======================================== */

.gs-grid {
    display: grid;
    gap: 30px;
}

.gs-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gs-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gs-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gs-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ========================================
   7. SÉPARATEURS
   ======================================== */

.gs-divider {
    border: 0;
    border-top: 1px solid var(--gs-border);
    margin: var(--gs-spacing-xl) 0;
}

.gs-divider-thick {
    border-top-width: 3px;
}

.gs-divider-primary {
    border-color: var(--gs-primary);
    width: 80px;
}

.gs-divider-center {
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   8. INTRO / LEAD TEXT
   ======================================== */

.gs-intro {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.gs-intro p {
    font-size: var(--gs-text-lead, 1.125rem);
    line-height: var(--gs-lh-normal, 1.6);
    color: var(--gs-text);
}

.gs-intro strong {
    color: var(--gs-primary);
}

.gs-intro-left {
    text-align: left;
    margin-left: 0;
}

/* ========================================
   9. SOMMAIRE / TABLE DES MATIÈRES
   ======================================== */

.gs-toc {
    background: var(--gs-bg-light, #f8f9fa);
    border-radius: var(--gs-radius-lg, 12px);
    padding: 25px 30px;
    margin-bottom: 40px;
}

.gs-toc h2 {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark, #1a1a2e);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-toc h2 i {
    color: var(--gs-primary, #c41e3a);
}

.gs-toc-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gs-toc-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--gs-text, #444);
    text-decoration: none;
    border-radius: var(--gs-radius-sm, 6px);
    transition: all 0.2s ease;
    font-size: var(--gs-text-base, 0.9375rem);
}

.gs-toc-list a:hover {
    background: var(--gs-bg-white, #fff);
    color: var(--gs-primary, #c41e3a);
    padding-left: 16px;
}

.gs-toc-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gs-primary, #c41e3a);
    color: #fff;
    border-radius: 50%;
    font-size: var(--gs-text-tiny, 0.75rem);
    font-weight: 700;
    flex-shrink: 0;
}

/* ========================================
   10. BOX DROITS / FEATURES (RGPD)
   ======================================== */

.gs-rights-box {
    background: var(--gs-bg-white, #fff);
    border: 2px solid var(--gs-primary, #c41e3a);
    border-radius: var(--gs-radius-lg, 10px);
    padding: 25px;
    margin-top: 20px;
}

.gs-rights-box h3 {
    color: var(--gs-primary, #c41e3a);
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gs-rights-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gs-rights-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gs-bg-light, #f8f9fa);
    border-radius: var(--gs-radius-sm, 6px);
    font-size: var(--gs-text-small, 0.8125rem);
    color: var(--gs-text, #444);
}

.gs-rights-list span i {
    color: var(--gs-primary, #c41e3a);
    font-size: 0.85rem;
}

/* ========================================
   11. BOX CONTACT (CTA dans section)
   ======================================== */

.gs-contact-box {
    background: linear-gradient(135deg, var(--gs-primary, #c41e3a) 0%, var(--gs-primary-dark, #a01830) 100%);
    color: #fff;
    padding: 30px;
    border-radius: var(--gs-radius-lg, 12px);
    text-align: center;
    margin-top: 30px;
}

.gs-contact-box h3 {
    font-size: var(--gs-h3-size, 1.25rem);
    font-weight: var(--gs-fw-heading, 600);
    margin: 0 0 15px 0;
    color: #fff;
}

.gs-contact-box p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 20px 0;
    font-size: var(--gs-text-base, 0.9375rem);
}

.gs-contact-box-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.gs-contact-box .gs-btn-white {
    background: #fff;
    color: var(--gs-primary, #c41e3a);
}

.gs-contact-box .gs-btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gs-contact-box .gs-btn-outline-white {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.gs-contact-box .gs-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   12. PAGE HEADER INSTITUTIONNELLE
   ======================================== */

.gs-page-header-institutional {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
}

.gs-page-header-institutional h1 {
    font-size: var(--gs-h1-size, 2rem);
    font-weight: var(--gs-fw-heading, 600);
    color: var(--gs-text-dark, #1a1a2e);
    margin: 0 0 15px 0;
}

.gs-page-header-institutional p {
    font-size: var(--gs-text-lead, 1.125rem);
    color: var(--gs-text-muted, #666);
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--gs-lh-normal, 1.6);
}

/* ========================================
   13. CONTENEUR PAGE INSTITUTIONNELLE
   ======================================== */

.gs-page-institutional {
    padding: 60px 0 80px 0;
    background: var(--gs-bg-white, #fff);
}

.gs-page-institutional .gs-container {
    max-width: 900px;
}

/* ========================================
   14. SECTION NUMÉROTÉE (pour CGV)
   ======================================== */

.gs-content-block-numbered {
    scroll-margin-top: 100px;
}

.gs-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gs-primary, #c41e3a);
    color: #fff;
    border-radius: 50%;
    font-size: var(--gs-text-small, 0.8125rem);
    font-weight: 700;
    flex-shrink: 0;
}

/* ========================================
   15. RESPONSIVE (compléments)
   ======================================== */

@media (max-width: 992px) {
    .gs-section {
        padding: var(--gs-section-padding-mobile, 40px) 0;
    }
    
    .gs-section-header {
        margin-bottom: 40px;
    }
    
    .gs-grid-3,
    .gs-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gs-info-item {
        flex-direction: column;
        gap: 5px;
    }
    
    .gs-info-label {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .gs-page-institutional {
        padding: 40px 0 60px 0;
    }
    
    .gs-toc {
        padding: 20px;
    }
    
    .gs-toc-list {
        grid-template-columns: 1fr;
    }
    
    .gs-contact-box-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .gs-rights-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .gs-section-content {
        padding: 0 15px;
    }
    
    .gs-content-block {
        padding: 20px 15px;
        border-radius: var(--gs-radius-md);
    }
    
    .gs-grid-2,
    .gs-grid-3,
    .gs-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .gs-grid {
        gap: 20px;
    }
    
    .gs-contact-box {
        padding: 20px;
    }
}


/* === timeline.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT TIMELINE
   
   Version : 1.0.0
   Date : 31 Décembre 2025
   
   Timeline verticale réutilisable pour :
   - Page "Qui sommes-nous" (histoire)
   - Page "Environnement" (engagements)
   - Toute chronologie
   ============================================ */

/* ========================================
   1. TIMELINE DE BASE
   ======================================== */

.gs-timeline {
    position: relative;
    padding-left: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Ligne verticale */
.gs-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--gs-primary, #c41e3a), var(--gs-primary-light, #e8304a));
    border-radius: 2px;
}

/* Item de timeline */
.gs-timeline-item {
    position: relative;
    margin-bottom: 50px;
    padding-left: 40px;
}

.gs-timeline-item:last-child {
    margin-bottom: 0;
}

/* Point sur la ligne */
.gs-timeline-item::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: var(--gs-primary, #c41e3a);
    border-radius: 50%;
    border: 4px solid var(--gs-secondary, #1a1a2e);
    box-shadow: 0 0 0 4px var(--gs-primary, #c41e3a);
}

/* Année / Date */
.gs-timeline-year,
.gs-timeline-item .year {
    font-size: var(--gs-h3-size, 1.25rem);
    font-weight: var(--gs-fw-heading, 700);
    color: var(--gs-primary, #c41e3a);
    margin-bottom: 10px;
}

/* Dates en blanc sur fond sombre */
.gs-timeline-dark .gs-timeline-year,
.gs-timeline-dark .year,
.gs-about-timeline .gs-timeline-year,
.gs-about-timeline .year {
    color: #fff;
}

/* Contenu */
.gs-timeline-content,
.gs-timeline-item .content {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: var(--gs-radius-lg, 12px);
    backdrop-filter: blur(10px);
}

.gs-timeline-content h3,
.gs-timeline-item .content h3 {
    font-size: var(--gs-h4-size, 1.125rem);
    font-weight: var(--gs-fw-heading, 600);
    margin: 0 0 10px 0;
    color: inherit;
}

.gs-timeline-content p,
.gs-timeline-item .content p {
    font-size: var(--gs-text-base, 0.9375rem);
    line-height: var(--gs-lh-normal, 1.6);
    margin: 0;
    opacity: 0.9;
}

/* ========================================
   2. VARIANTE SOMBRE (fond foncé)
   ======================================== */

.gs-timeline-dark {
    color: #fff;
}

.gs-timeline-dark .gs-timeline-content,
.gs-timeline-dark .content {
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   3. VARIANTE CLAIRE (fond clair)
   ======================================== */

.gs-timeline-light .gs-timeline-item::before {
    border-color: #fff;
}

.gs-timeline-light .gs-timeline-content,
.gs-timeline-light .content {
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.gs-timeline-light .gs-timeline-content h3,
.gs-timeline-light .content h3 {
    color: var(--gs-text-dark, #1a1a2e);
}

.gs-timeline-light .gs-timeline-content p {
    color: var(--gs-text, #444);
    opacity: 1;
}

/* ========================================
   4. VARIANTE VERTE (environnement)
   ======================================== */

.gs-timeline-eco::before {
    background: linear-gradient(to bottom, var(--gs-eco-green-dark, #2e7d32), var(--gs-eco-green, #4caf50));
}

.gs-timeline-eco .gs-timeline-item::before {
    background: var(--gs-eco-green, #4caf50);
    border-color: #fff;
    box-shadow: 0 0 0 4px var(--gs-eco-light, #e8f5e9);
}

.gs-timeline-eco .gs-timeline-year {
    color: var(--gs-eco-green, #4caf50);
}

/* ========================================
   5. SECTION CONTENEUR TIMELINE
   ======================================== */

.gs-timeline-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.gs-timeline-section-dark {
    background: var(--gs-secondary, #1a1a2e);
    color: #fff;
}

/* Image de fond optionnelle */
.gs-timeline-section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

.gs-timeline-section .gs-container {
    position: relative;
    z-index: 1;
}

.gs-timeline-section h2 {
    text-align: center;
    font-size: var(--gs-h2-size, 1.5rem);
    font-weight: var(--gs-fw-heading, 600);
    margin-bottom: 60px;
}

/* ========================================
   6. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .gs-timeline {
        padding-left: 30px;
    }
    
    .gs-timeline-item {
        padding-left: 25px;
    }
    
    .gs-timeline-item::before {
        left: -38px;
        width: 16px;
        height: 16px;
    }
    
    .gs-timeline-content {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .gs-timeline {
        padding-left: 25px;
    }
    
    .gs-timeline::before {
        left: 8px;
        width: 3px;
    }
    
    .gs-timeline-item {
        padding-left: 20px;
    }
    
    .gs-timeline-item::before {
        left: -25px;
        width: 14px;
        height: 14px;
    }
    
    .gs-timeline-section {
        padding: 60px 0;
    }
    
    .gs-timeline-section h2 {
        margin-bottom: 40px;
    }
}


/* === quote-form.css === */
/* ============================================
   GRAPHISCANN - FORMULAIRE DE DEVIS
   
   Version : 1.0.0
   Date : 1er Janvier 2026
   
   Styles pour le formulaire de devis produit
   Migré depuis includes/form-devis-produit.php
   ============================================ */

/* ========================================
   1. SECTION PRINCIPALE
   ======================================== */

.product-quote-form {
    background: var(--gs-bg-light, #f8f9fa);
    padding: 60px 0;
    margin-top: 60px;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   2. COLONNE INFORMATIONS
   ======================================== */

.quote-info h2 {
    color: var(--gs-primary, #c41e3a);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.quote-info .product-title {
    color: var(--gs-text-light, #666);
    font-size: 1rem;
    margin-bottom: 30px;
}

.quote-info .info-card {
    background: var(--gs-bg-white, #fff);
    border-left: 5px solid var(--gs-primary, #c41e3a);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--gs-radius-sm, 5px);
}

.quote-info .info-card h3 {
    color: var(--gs-text-dark, #333);
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-info .info-card h3 i {
    color: var(--gs-primary, #c41e3a);
    font-size: 1.3rem;
}

.quote-info .info-card p {
    color: var(--gs-text-light, #666);
    line-height: 1.6;
    margin: 0;
}

.quote-info .info-card a {
    color: var(--gs-primary, #c41e3a);
    text-decoration: none;
    font-weight: 600;
}

.quote-info .info-card a:hover {
    text-decoration: underline;
}

/* ========================================
   3. FORMULAIRE WRAPPER
   ======================================== */

.quote-form-wrapper {
    background: var(--gs-bg-white, #fff);
    padding: 40px;
    border-radius: var(--gs-radius-lg, 10px);
    box-shadow: var(--gs-shadow-md, 0 2px 10px rgba(0,0,0,0.1));
}

.quote-form-wrapper h3 {
    color: var(--gs-primary, #c41e3a);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.quote-form-wrapper .form-subtitle {
    color: var(--gs-text-light, #666);
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* ========================================
   4. SECTIONS FORMULAIRE
   ======================================== */

.form-section {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--gs-border-light, #e9ecef);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h4 {
    color: var(--gs-text-dark, #333);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
}

/* ========================================
   5. CHAMPS DE FORMULAIRE
   ======================================== */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--gs-text-dark, #333);
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group label .required {
    color: var(--gs-primary, #c41e3a);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--gs-border, #ddd);
    border-radius: var(--gs-radius-sm, 5px);
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--gs-primary, #c41e3a);
}

.form-group textarea {
    resize: vertical;
}

.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: var(--gs-danger, #dc3545);
}

.error-message {
    color: var(--gs-danger, #dc3545);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Honeypot anti-spam (caché) */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* ========================================
   6. BOUTON SUBMIT
   ======================================== */

.submit-btn {
    background: var(--gs-primary, #c41e3a);
    color: var(--gs-text-inverse, #fff);
    padding: 15px 40px;
    border: none;
    border-radius: var(--gs-radius-sm, 5px);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
}

.submit-btn:hover {
    background: var(--gs-primary-dark, #a01829);
}

.submit-btn i {
    margin-right: 8px;
}

/* ========================================
   7. MESSAGES ALERTES
   ======================================== */

.alert {
    padding: 20px;
    border-radius: var(--gs-radius-sm, 5px);
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alert-success {
    background: var(--gs-success-bg, #d4edda);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: var(--gs-danger-bg, #f8d7da);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert h3 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.alert p {
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.alert p:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 992px) {
    .quote-form-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .quote-form-wrapper {
        padding: 30px 25px;
    }
}

@media (max-width: 768px) {
    .product-quote-form {
        padding: 40px 20px;
    }
    
    .quote-info h2,
    .quote-form-wrapper h3 {
        font-size: 1.5rem;
    }
    
    .submit-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* === modal.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT MODAL
   
   Version : 1.0.0
   Date : 1er Janvier 2026
   
   Modal/Lightbox réutilisable pour :
   - Galeries images
   - Formulaires popup
   - Confirmations
   - Zoom produits
   ============================================ */

/* ========================================
   1. OVERLAY (fond sombre)
   ======================================== */

.gs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: var(--gs-z-modal, 9000);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

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

/* Empêcher le scroll du body quand modal ouverte */
body.gs-modal-open {
    overflow: hidden;
}

/* ========================================
   2. CONTENEUR MODAL
   ======================================== */

.gs-modal {
    background: var(--gs-bg-white, #fff);
    border-radius: var(--gs-radius-lg, 12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9) translateY(-20px);
    transition: transform 0.3s ease;
    position: relative;
}

.gs-modal-overlay.gs-active .gs-modal {
    transform: scale(1) translateY(0);
}

/* Tailles variantes */
.gs-modal-sm {
    max-width: 400px;
}

.gs-modal-lg {
    max-width: 800px;
}

.gs-modal-xl {
    max-width: 1000px;
}

.gs-modal-fullscreen {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: var(--gs-radius-md, 8px);
}

/* ========================================
   3. HEADER MODAL
   ======================================== */

.gs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid var(--gs-border-light, #e9ecef);
    background: var(--gs-bg-light, #f8f9fa);
}

.gs-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gs-text-dark, #333);
}

.gs-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gs-text-light, #666);
    cursor: pointer;
    padding: 5px 10px;
    margin: -5px -10px -5px 0;
    border-radius: var(--gs-radius-sm, 4px);
    transition: all 0.2s ease;
    line-height: 1;
}

.gs-modal-close:hover {
    background: var(--gs-bg-dark, #e9ecef);
    color: var(--gs-text-dark, #333);
}

/* ========================================
   4. BODY MODAL
   ======================================== */

.gs-modal-body {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.gs-modal-body p:last-child {
    margin-bottom: 0;
}

/* ========================================
   5. FOOTER MODAL
   ======================================== */

.gs-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 15px 25px;
    border-top: 1px solid var(--gs-border-light, #e9ecef);
    background: var(--gs-bg-light, #f8f9fa);
}

.gs-modal-footer-left {
    justify-content: flex-start;
}

.gs-modal-footer-center {
    justify-content: center;
}

.gs-modal-footer-between {
    justify-content: space-between;
}

/* ========================================
   6. MODAL IMAGE / LIGHTBOX
   ======================================== */

.gs-modal-image {
    background: transparent;
    box-shadow: none;
    max-width: 95vw;
    max-height: 95vh;
}

.gs-modal-image .gs-modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    max-height: none;
}

.gs-modal-image img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--gs-radius-md, 8px);
}

.gs-modal-image .gs-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 10;
}

.gs-modal-image .gs-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

/* Caption image */
.gs-modal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    text-align: center;
}

.gs-modal-caption-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.gs-modal-caption-count {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* ========================================
   7. NAVIGATION GALERIE
   ======================================== */

.gs-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gs-text-dark, #333);
    font-size: 1.25rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 10;
}

.gs-modal-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gs-modal-nav-prev {
    left: 20px;
}

.gs-modal-nav-next {
    right: 20px;
}

.gs-modal-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.gs-modal-nav:disabled:hover {
    transform: translateY(-50%);
}

/* ========================================
   8. MODAL CONFIRMATION
   ======================================== */

.gs-modal-confirm {
    max-width: 450px;
    text-align: center;
}

.gs-modal-confirm .gs-modal-body {
    padding: 30px 25px;
}

.gs-modal-confirm-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.gs-modal-confirm-icon.gs-warning {
    color: var(--gs-warning, #ffc107);
}

.gs-modal-confirm-icon.gs-danger {
    color: var(--gs-danger, #dc3545);
}

.gs-modal-confirm-icon.gs-success {
    color: var(--gs-success, #28a745);
}

.gs-modal-confirm-icon.gs-info {
    color: var(--gs-info, #17a2b8);
}

.gs-modal-confirm-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--gs-text-dark, #333);
}

.gs-modal-confirm-message {
    color: var(--gs-text-light, #666);
    margin-bottom: 0;
}

.gs-modal-confirm .gs-modal-footer {
    justify-content: center;
    background: transparent;
    border-top: none;
    padding-top: 0;
}

/* ========================================
   9. MODAL FORMULAIRE
   ======================================== */

.gs-modal-form .gs-modal-body {
    padding: 30px;
}

.gs-modal-form .gs-form-group:last-child {
    margin-bottom: 0;
}

/* ========================================
   10. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .gs-modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }
    
    .gs-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: var(--gs-radius-lg, 12px) var(--gs-radius-lg, 12px) 0 0;
        margin-bottom: 0;
    }
    
    .gs-modal-overlay.gs-active .gs-modal {
        transform: scale(1) translateY(0);
    }
    
    .gs-modal-header {
        padding: 15px 20px;
    }
    
    .gs-modal-body {
        padding: 20px;
        max-height: calc(95vh - 130px);
    }
    
    .gs-modal-footer {
        padding: 15px 20px;
        flex-wrap: wrap;
    }
    
    .gs-modal-footer .gs-btn {
        flex: 1;
        min-width: 120px;
    }
    
    /* Lightbox mobile */
    .gs-modal-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .gs-modal-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .gs-modal-nav-prev {
        left: 10px;
    }
    
    .gs-modal-nav-next {
        right: 10px;
    }
    
    /* Fullscreen sur mobile */
    .gs-modal-lg,
    .gs-modal-xl {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .gs-modal-footer {
        flex-direction: column;
    }
    
    .gs-modal-footer .gs-btn {
        width: 100%;
    }
}

/* === badges.css === */
/* ============================================
   GRAPHISCANN - COMPOSANT BADGES
   
   Version : 1.0.0
   Date : 1er Janvier 2026
   
   Badges et tags pour :
   - Produits (Nouveau, Promo, Best-seller)
   - Statuts (En cours, Terminé, Urgent)
   - Catégories et étiquettes
   ============================================ */

/* ========================================
   1. BADGE DE BASE
   ======================================== */

.gs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--gs-radius-sm, 4px);
    line-height: 1.4;
    white-space: nowrap;
}

/* ========================================
   2. COULEURS BADGES
   ======================================== */

/* Primaire (rouge Graphiscann) */
.gs-badge-primary {
    background: var(--gs-primary, #c41e3a);
    color: #fff;
}

/* Secondaire (gris foncé) */
.gs-badge-secondary {
    background: var(--gs-secondary, #2c3e50);
    color: #fff;
}

/* Succès (vert) */
.gs-badge-success {
    background: var(--gs-success, #28a745);
    color: #fff;
}

/* Warning (orange) */
.gs-badge-warning {
    background: var(--gs-warning, #ffc107);
    color: #333;
}

/* Danger (rouge vif) */
.gs-badge-danger {
    background: var(--gs-danger, #dc3545);
    color: #fff;
}

/* Info (bleu) */
.gs-badge-info {
    background: var(--gs-info, #17a2b8);
    color: #fff;
}

/* Light (gris clair) */
.gs-badge-light {
    background: var(--gs-bg-light, #f8f9fa);
    color: var(--gs-text-dark, #333);
}

/* Dark (noir) */
.gs-badge-dark {
    background: var(--gs-text-dark, #333);
    color: #fff;
}

/* ========================================
   3. BADGES PRODUITS SPÉCIFIQUES
   ======================================== */

/* Nouveau */
.gs-badge-new {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* Promo / Soldes */
.gs-badge-promo {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

/* Best-seller */
.gs-badge-bestseller {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #333;
}

/* Exclusif */
.gs-badge-exclusive {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
}

/* Express / Urgent */
.gs-badge-express {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
}

/* Éco / Écologique */
.gs-badge-eco {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

/* ========================================
   4. VARIANTES DE STYLE
   ======================================== */

/* Outline (bordure uniquement) */
.gs-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.gs-badge-outline.gs-badge-primary {
    color: var(--gs-primary, #c41e3a);
}

.gs-badge-outline.gs-badge-success {
    color: var(--gs-success, #28a745);
}

.gs-badge-outline.gs-badge-warning {
    color: var(--gs-warning-dark, #d39e00);
}

.gs-badge-outline.gs-badge-danger {
    color: var(--gs-danger, #dc3545);
}

.gs-badge-outline.gs-badge-info {
    color: var(--gs-info, #17a2b8);
}

/* Pill (arrondi) */
.gs-badge-pill {
    border-radius: 50px;
    padding: 4px 12px;
}

/* ========================================
   5. TAILLES
   ======================================== */

/* Petit */
.gs-badge-sm {
    padding: 2px 6px;
    font-size: 0.65rem;
}

/* Grand */
.gs-badge-lg {
    padding: 6px 14px;
    font-size: 0.875rem;
}

/* ========================================
   6. BADGE AVEC ICÔNE
   ======================================== */

.gs-badge i,
.gs-badge .fas,
.gs-badge .far,
.gs-badge .fab {
    font-size: 0.7em;
}

.gs-badge-lg i,
.gs-badge-lg .fas,
.gs-badge-lg .far,
.gs-badge-lg .fab {
    font-size: 0.8em;
}

/* ========================================
   7. BADGE POSITIONNÉ (sur carte/image)
   ======================================== */

.gs-badge-positioned {
    position: absolute;
    z-index: 10;
}

.gs-badge-top-left {
    top: 10px;
    left: 10px;
}

.gs-badge-top-right {
    top: 10px;
    right: 10px;
}

.gs-badge-bottom-left {
    bottom: 10px;
    left: 10px;
}

.gs-badge-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* ========================================
   8. GROUPE DE BADGES
   ======================================== */

.gs-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gs-badge-group-vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* ========================================
   9. BADGE COMPTEUR (notification)
   ======================================== */

.gs-badge-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.gs-badge-count-sm {
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
}

/* Badge point (sans texte) */
.gs-badge-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
}

.gs-badge-dot-sm {
    width: 6px;
    height: 6px;
}

/* ========================================
   10. ANIMATIONS
   ======================================== */

/* Pulse (attire l'attention) */
.gs-badge-pulse {
    animation: gs-badge-pulse 2s infinite;
}

@keyframes gs-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(196, 30, 58, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(196, 30, 58, 0);
    }
}

/* Shine (effet brillant) */
.gs-badge-shine {
    position: relative;
    overflow: hidden;
}

.gs-badge-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: gs-badge-shine 3s infinite;
}

@keyframes gs-badge-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ========================================
   11. STATUTS (admin, commandes)
   ======================================== */

.gs-badge-status-pending {
    background: #fff3cd;
    color: #856404;
}

.gs-badge-status-processing {
    background: #cce5ff;
    color: #004085;
}

.gs-badge-status-completed {
    background: #d4edda;
    color: #155724;
}

.gs-badge-status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

/* ========================================
   12. RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .gs-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    .gs-badge-lg {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    
    .gs-badge-top-left,
    .gs-badge-top-right {
        top: 8px;
    }
    
    .gs-badge-top-left,
    .gs-badge-bottom-left {
        left: 8px;
    }
    
    .gs-badge-top-right,
    .gs-badge-bottom-right {
        right: 8px;
    }
}