/* ============================================
   GIROUD CARRELAGE - Variables CSS
   ============================================ */

:root {
    /* ----------------------------------------
       COULEURS PRINCIPALES
       ---------------------------------------- */

    /* Fond principal (bleu royal Giroud) */
    --color-bg-primary: #2B3A9E;
    --color-bg-secondary: #243390;
    --color-bg-tertiary: #3347B0;

    /* Textes (clairs sur fond sombre) */
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D0D5DD;
    --color-text-muted: #98A2B3;

    /* Couleurs d'accent (doré Giroud) - basées sur --accent-hue / --accent-sat / --accent-lig */
    --accent-hue: 43;
    --accent-sat: 73%;
    --accent-lig: 61%;
    --color-accent-primary: hsl(var(--accent-hue), var(--accent-sat), var(--accent-lig));
    --color-accent-secondary: hsl(calc(var(--accent-hue) - 6), calc(var(--accent-sat) - 11%), calc(var(--accent-lig) - 3%));
    --color-accent-dark: hsl(calc(var(--accent-hue) - 15), calc(var(--accent-sat) - 21%), calc(var(--accent-lig) - 4%));
    --color-accent-gradient: linear-gradient(135deg, hsl(var(--accent-hue), var(--accent-sat), var(--accent-lig)) 0%, hsl(calc(var(--accent-hue) - 6), calc(var(--accent-sat) - 11%), calc(var(--accent-lig) - 3%)) 100%);

    /* Navy (pour headings, dark sections) */
    --color-navy: #1E2A7A;
    --color-navy-light: #2B3A9E;
    --color-navy-lighter: #3347B0;

    /* Triptyque Cards */
    --color-card-light-top: #E8EAF0;
    --color-card-light-bottom: #D0D4DE;
    --color-card-blue-top: var(--color-navy-lighter);
    --color-card-blue-mid: var(--color-navy-light);
    --color-card-blue-bottom: var(--color-navy);
    --color-card-gold-top: var(--color-accent-primary);
    --color-card-gold-mid: var(--color-accent-secondary);
    --color-card-gold-bottom: var(--color-accent-dark);

    /* Sustainability - Couleur 1 (vert foncé - cercles) */
    --color-sustain-1-top: hsl(var(--sustain-hue), calc(var(--sustain-sat) + 2%), calc(var(--sustain-lig) - 10%));
    --color-sustain-1-mid: hsl(var(--sustain-hue), calc(var(--sustain-sat) + 4%), calc(var(--sustain-lig) - 17%));
    --color-sustain-1-bottom: hsl(var(--sustain-hue), calc(var(--sustain-sat) + 6%), calc(var(--sustain-lig) - 24%));

    /* Sustainability - Couleur 2 (accent doré - carrés) */
    --color-sustain-2-top: var(--color-accent-primary);
    --color-sustain-2-mid: hsl(calc(var(--accent-hue) - 6), calc(var(--accent-sat) - 11%), calc(var(--accent-lig) - 3%));
    --color-sustain-2-bottom: hsl(calc(var(--accent-hue) - 6), calc(var(--accent-sat) - 23%), calc(var(--accent-lig) - 13%));

    /* Sustainability - Fond card (vert olive dynamique) */
    --sustain-hue: 95;
    --sustain-sat: 20%;
    --sustain-lig: 47%;
    --color-sustain-card-top: hsl(var(--sustain-hue), var(--sustain-sat), var(--sustain-lig));
    --color-sustain-card-mid: hsl(var(--sustain-hue), calc(var(--sustain-sat) + 4%), calc(var(--sustain-lig) - 11%));
    --color-sustain-card-bottom: hsl(var(--sustain-hue), calc(var(--sustain-sat) + 8%), calc(var(--sustain-lig) - 17%));

    /* Couleurs d'interaction */
    --color-hover: hsl(var(--accent-hue), calc(var(--accent-sat) + 10%), calc(var(--accent-lig) + 6%));
    --color-active: hsl(calc(var(--accent-hue) - 6), calc(var(--accent-sat) - 11%), calc(var(--accent-lig) - 3%));
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-accent: hsla(var(--accent-hue), var(--accent-sat), var(--accent-lig), 0.4);

    /* Overlay et effets */
    --color-overlay: rgba(43, 58, 158, 0.7);
    --color-overlay-light: rgba(43, 58, 158, 0.5);

    /* ----------------------------------------
       TYPOGRAPHIE
       ---------------------------------------- */

    --font-primary: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    /* Tailles de police */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 4rem;
    --font-size-hero: clamp(2.5rem, 5vw, 5rem);

    /* Poids de police */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 800;

    /* Hauteurs de ligne */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Espacement des lettres */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    --letter-spacing-widest: 0.2em;

    /* ----------------------------------------
       ESPACEMENTS
       ---------------------------------------- */

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    --spacing-4xl: 8rem;

    /* ----------------------------------------
       HEADER / NAVIGATION
       ---------------------------------------- */

    --header-height: 120px;
    --header-height-scrolled: 100px;
    --logo-width: 560px;
    --logo-width-scrolled: 380px;

    /* ----------------------------------------
       LAYOUT
       ---------------------------------------- */

    --container-max-width: 1400px;
    --container-padding: 5%;
    --section-padding: clamp(4rem, 10vh, 6rem);

    /* ----------------------------------------
       BORDURES ET ARRONDIS
       ---------------------------------------- */

    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 32px;
    --border-radius-xl: 55px;
    --border-radius-full: 9999px;

    /* ----------------------------------------
       OMBRES
       ---------------------------------------- */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 4px 20px hsla(var(--accent-hue), var(--accent-sat), var(--accent-lig), 0.25);
    --shadow-card: rgba(255, 255, 255, 0.35) 1px 1px 2px inset, rgba(0, 0, 0, 0.3) -1px -1px 2px inset, 12px 13px 18px rgba(0, 0, 0, 0.4);
    --noise-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --noise-size: 506px;
    --noise-opacity: 0.09;

    /* ----------------------------------------
       TRANSITIONS
       ---------------------------------------- */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-header: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------
       Z-INDEX
       ---------------------------------------- */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

@media (max-width: 768px) {
    :root {
        --header-height: 100px;
        --header-height-scrolled: 80px;
        --logo-width: 220px;
        --logo-width-scrolled: 170px;
        --container-padding: 6%;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 100px;
        --header-height-scrolled: 80px;
        --logo-width: 200px;
        --logo-width-scrolled: 150px;
    }
}