/* TYPOGRAPHIE - GESTION DES POLICES CONFIGURABLES */

/* Utilisation de la police principale pour les titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary, 'Poppins', sans-serif);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    font-size: calc(var(--font-base-size, 16px) * 2.5);
}

h2 {
    font-size: calc(var(--font-base-size, 16px) * 2);
}

h3 {
    font-size: calc(var(--font-base-size, 16px) * 1.7);
}

h4 {
    font-size: calc(var(--font-base-size, 16px) * 1.4);
}

h5 {
    font-size: calc(var(--font-base-size, 16px) * 1.2);
}

h6 {
    font-size: var(--font-base-size, 16px);
}

/* Utilisation de la police secondaire pour le texte courant */
p, span, div, li, td, th, label, input, textarea, select {
    font-family: var(--font-family-secondary, 'Open Sans', sans-serif);
}

/* Style des éléments spéciaux */
.menu-link, .btn, .cta span {
    font-family: var(--font-family-primary, 'Poppins', sans-serif);
    font-weight: 500;
}

/* Navigation */
nav a {
    font-family: var(--font-family-primary, 'Poppins', sans-serif);
    font-weight: 500;
}

/* Citations et éléments en italique */
blockquote {
    font-family: var(--font-family-secondary, 'Open Sans', sans-serif);
    font-style: italic;
    font-size: calc(var(--font-base-size, 16px) * 1.1);
}

/* Texte de taille alternative */
.plus_gros {
    font-size: calc(var(--font-base-size, 16px) * 2);
    font-family: var(--font-family-primary, 'Poppins', sans-serif);
}

.petit {
    font-size: calc(var(--font-base-size, 16px) * 0.9);
}

/* Responsive typography */
@media screen and (max-width: 768px) {
    h1 {
        font-size: calc(var(--font-base-size, 16px) * 2);
    }

    h2 {
        font-size: calc(var(--font-base-size, 16px) * 1.7);
    }

    h3 {
        font-size: calc(var(--font-base-size, 16px) * 1.4);
    }

    .plus_gros {
        font-size: calc(var(--font-base-size, 16px) * 1.7);
    }
}
/* ========================================
   TYPOGRAPHY - BREAKPOINT 480px
   ======================================== */

@media (max-width: 479px) {
    :root {
        --base-font-size: 14px;
    }

    body {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: clamp(1.3rem, 4vw, 1.75rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 0.9rem !important;
    }

    h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
    }

    h4 {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
        margin-bottom: 0.7rem !important;
    }

    h5, h6 {
        font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important;
        margin-bottom: 0.6rem !important;
    }

    p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    /* Lists */
    ul, ol {
        padding-left: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    li {
        margin-bottom: 0.5rem !important;
        line-height: 1.5 !important;
    }

    /* Blockquotes */
    blockquote {
        font-size: 1rem !important;
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }

    /* Code */
    code, pre {
        font-size: 0.85rem !important;
    }

    /* Links */
    a {
        word-break: break-word !important;
    }
}

/* Amélioration du breakpoint 768px existant */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --base-font-size: 15px;
    }

    body {
        font-size: 15px !important;
    }

    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
    }
}