/* Variables CSS centralisées pour le thème ArtGE */

:root {
    /* Typographie */
    --font-main: 'Inter', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-main-size: 0.9375rem;
    --font-small-size: 0.875rem;
    --font-normal-size: 1rem;

    --container-width: 1320px;
    --container-width-narrow: 1040px;
    --container-width-narrower: 920px;

    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 40px;

    --gutr: 15px;
    --gutrn: -15px;

    --offset-top: 60px;
    --offset-top: 0;

    /* Transitions */
    --transition-zoom: transform 0.5s ease;
    --transition-zoom: transform 1s, filter 3s ease-in-out;
    
    /* Dimensions des images */
    --img-square-size: 600px;
    --img-portrait-height: 800px;
    --img-portrait-width: 600px;
    --img-paysage-height: 600px;
    --img-paysage-width: 800px;
    
    /* Couleurs spécifiques à la maquette */
    --artge-text: #172540;
    --artge-light-text: #777777;
    --artge-bg: #172540;
    --artge-primary: #172540;
    --artge-accent: #d4af37;
    --artge-border: #D3D3D3;

    --beige: #F7F2F2;
    --orange: #CC4C25;
    --orangeLT: #D25936;
    
    --bleu: #405586;
    --bleuLT: #E8F0FF;
    --bleuALT: #A9BEEA;
    --bleuDK: #060D1A;
    
    --rougeLT: #FFD6D1;
    --rougeALT: #E6A7A0;

    --jauneLT: #FFF5D5;
    --jauneALT: #F7DB9C;

    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--large: 1.0625rem;
    --wp--preset--font-size--x-large: 1.125rem;

    --hero-img-radius: .75rem;
}

/* Variables pour l'éditeur Gutenberg */
:root :where(.editor-styles-wrapper) {
    /* Typographie */
    --font-main: 'Inter', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-main-size: 0.9375rem;
    --font-small-size: 0.875rem;
    --font-normal-size: 1rem;

    --container-width: 1320px;
    --container-width-narrow: 1040px;
    --container-width-narrower: 920px;

    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 40px;

    --gutr: 15px;
    --gutrn: -15px;

    --offset-top: 60px;

    /* Couleurs spécifiques à la maquette */
    --artge-text: #172540;
    --artge-light-text: #777777;
    --artge-bg: #172540;
    --artge-primary: #172540;
    --artge-accent: #d4af37;
    --artge-border: #D3D3D3;

    --beige: #F7F2F2;
    --orange: #CC4C25;
    --orangeLT: #D25936;
    
    --bleu: #405586;
    --bleuLT: #E8F0FF;
    --bleuALT: #A9BEEA;
    --bleuDK: #060D1A;
    
    --rougeLT: #FFD6D1;
    --rougeALT: #E6A7A0;

    --jauneLT: #FFF5D5;
    --jauneALT: #F7DB9C;

    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--large: 1.0625rem;
    --wp--preset--font-size--x-large: 1.125rem;

    --hero-img-radius: .75rem;
}

/* Variables spécifiques aux composants */
:root {
    /* Navigation */
    --hero-card-radius: 1.5rem;
    
    /* Home Hero */
    --hero-push-width: 23.5rem;
    --hero-push-radius: 1.875rem;
    --hero-push-margin: -5.5rem;
    
    /* Off-canvas (Posts Grid Filters) */
    --off-canvas-width: 450px;
    --off-canvas-bg: #fff;
    --off-canvas-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    --off-canvas-transition: transform 0.3s ease-in-out;
    
    /* Swiper Sliders */
    --swiper-theme-color: var(--bleu);
    --swiper-pagination-bottom: 0;
    --swiper-pagination-top: -2px;
    --swiper-pagination-bullet-width: 4px;
    --swiper-pagination-bullet-height: 4px;
    --swiper-pagination-bullet-size: 4px;
    --swiper-pagination-bullet-border-radius: 50%;
    --swiper-pagination-bullet-inactive-color: var(--artge-text);
    --swiper-pagination-bullet-inactive-opacity: .3;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-color: var(--artge-text);
    --swiper-pagination-bullet-horizontal-gap: 3px;
    --swiper-navigation-sides-offset: 10px;
}

/* Responsive breakpoints */
@media (min-width: 992px) {
    :root {
        --offset-top: 80px;
        --offset-top: 0;
    }
}

@media (max-width: 767px) {
    :root {
        --off-canvas-width: 100%;
    }
}

@media (min-width: 992px) {
    :root {
        --wp--preset--font-size--large: 1.25rem;
        --wp--preset--font-size--x-large: 1.35rem;
    }
}

@media (min-width: 1200px) {
    :root {
        /* Variables WordPress Gutenberg commentées - peuvent être décommentées si nécessaire */
        /*
        --wp--preset--font-size--large: 1.5rem;
        --wp--preset--font-size--x-large: 1.65rem;
        */
    }
}

@media (min-width: 2200px) {
    :root {
        --container-width: 1620px;
        --container-width-narrow: 1340px;
        --container-width-narrower: 1240px;
        --font-main-size: 1.25rem;
        --font-small-size: 1rem;
        --font-normal-size: 1.125rem;
        --wp--preset--font-size--large: 1.75rem;
        --wp--preset--font-size--x-large: 2rem;
    }
}