/* ============================================
   GRAPHISCANN - TYPOGRAPHY SYSTEM
   Généré dynamiquement - Admin: /admin2024/pages/apparence/typography.php
   ============================================ */

:root {
    /* Taille de base */
    --gs-font-base: 16px;
    
    /* Titres Desktop */
    --gs-h1-size: 2.125rem;
    --gs-h2-size: 1.5rem;
    --gs-h3-size: 1.25rem;
    --gs-h4-size: 1.125rem;
    --gs-h5-size: 1rem;
    --gs-h6-size: 0.875rem;
    
    /* Texte courant */
    --gs-text-lead: 1.125rem;
    --gs-text-base: 0.875rem;
    --gs-text-small: 0.8125rem;
    --gs-text-tiny: 0.75rem;
    
    /* Interlignes */
    --gs-lh-heading: 1.25;
    --gs-lh-normal: 1.7;
    --gs-lh-relaxed: 1.75;
    --gs-lh-tight: 1.15;
    
    /* Graisses */
    --gs-fw-heading: 600;
    --gs-fw-light: 300;
    --gs-fw-normal: 400;
    --gs-fw-medium: 500;
    --gs-fw-semibold: 600;
    --gs-fw-bold: 700;
    
    /* Espacement lettres */
    --gs-ls-tight: -0.02em;
    --gs-ls-normal: 0;
    --gs-ls-wide: 0.02em;
    --gs-ls-caps: 0.05em;
}

/* Tablette (max 992px) */
@media (max-width: 992px) {
    :root {
        --gs-h1-size: 1.87rem;
        --gs-h2-size: 1.32rem;
        --gs-h3-size: 1.1rem;
        --gs-text-lead: 1rem;
    }
}

/* Mobile (max 576px) */
@media (max-width: 576px) {
    :root {
        --gs-h1-size: 1.5rem;
        --gs-h2-size: 1.25rem;
        --gs-h3-size: 1.125rem;
        --gs-text-lead: 0.9375rem;
        --gs-text-base: 0.875rem;
    }
}

/* ============================================
   APPLICATION AUX ÉLÉMENTS
   ============================================ */

body {
    font-size: var(--gs-font-base);
    line-height: var(--gs-lh-normal);
}

h1, .h1 {
    font-size: var(--gs-h1-size);
    font-weight: var(--gs-fw-heading);
    line-height: var(--gs-lh-heading);
    letter-spacing: var(--gs-ls-tight);
}

h2, .h2 {
    font-size: var(--gs-h2-size);
    font-weight: var(--gs-fw-heading);
    line-height: var(--gs-lh-heading);
}

h3, .h3 {
    font-size: var(--gs-h3-size);
    font-weight: var(--gs-fw-heading);
    line-height: var(--gs-lh-heading);
}

h4, .h4 {
    font-size: var(--gs-h4-size);
    font-weight: var(--gs-fw-medium);
    line-height: var(--gs-lh-heading);
}

h5, .h5 {
    font-size: var(--gs-h5-size);
    font-weight: var(--gs-fw-medium);
    line-height: var(--gs-lh-heading);
}

h6, .h6 {
    font-size: var(--gs-h6-size);
    font-weight: var(--gs-fw-medium);
    line-height: var(--gs-lh-heading);
    text-transform: uppercase;
    letter-spacing: var(--gs-ls-caps);
}

p {
    font-size: var(--gs-text-base);
    line-height: var(--gs-lh-normal);
}

.lead, .intro-text, .gs-lead, .product-intro {
    font-size: var(--gs-text-lead);
    line-height: var(--gs-lh-relaxed);
}

small, .small, .caption, .note {
    font-size: var(--gs-text-small);
}

.legal, .mentions, .copyright {
    font-size: var(--gs-text-tiny);
}

/* ============================================
   CLASSES UTILITAIRES
   ============================================ */

.gs-text-lead { font-size: var(--gs-text-lead) !important; }
.gs-text-base { font-size: var(--gs-text-base) !important; }
.gs-text-small { font-size: var(--gs-text-small) !important; }
.gs-text-tiny { font-size: var(--gs-text-tiny) !important; }

.gs-fw-light { font-weight: var(--gs-fw-light) !important; }
.gs-fw-normal { font-weight: var(--gs-fw-normal) !important; }
.gs-fw-medium { font-weight: var(--gs-fw-medium) !important; }
.gs-fw-semibold { font-weight: var(--gs-fw-semibold) !important; }
.gs-fw-bold { font-weight: var(--gs-fw-bold) !important; }

/* ============================================
   COMPATIBILITÉ PAGES PRODUITS V4
   ============================================ */

.product-h1-seo, .gs-product-title {
    font-size: var(--gs-h1-size);
    font-weight: var(--gs-fw-heading);
    line-height: var(--gs-lh-heading);
}

.product-subtitle, .gs-product-subtitle {
    font-size: var(--gs-h3-size);
    font-weight: var(--gs-fw-medium);
}

.content-section h2, .gs-section-title {
    font-size: var(--gs-h2-size);
    font-weight: var(--gs-fw-heading);
}

.product-description p, .content-section p {
    font-size: var(--gs-text-base);
    line-height: var(--gs-lh-normal);
}