/* ========================================
   MontSerrat Alternates - Intégration Google Fonts
======================================== */

/* Import depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ========================================
   APPLICATION DE ARCHIVO BLACK AUX TITRES
======================================== */

:root {
    /* Font families */
    --font-heading: 'Montserrat Alternates', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tous les titres */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.hero-title,
.archive-title,
.post-title,
.article-title,
.page-title,
.section-title,
.widget-title,
.footer-title,
.comments-title,
.comment-reply-title,
.mobile-nav-item>a {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.01em;
    /* Légèrement resserré pour un look moderne */
}

/* Titres spécifiques avec ajustements */

/* Site Title / Logo */
.site-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Hero Title */
.hero-title,
.archive-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Post Title dans Bento Grid */
.post-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.span-8-2 .post-title {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.span-4-1 .post-title {
    font-size: 1.3rem;
    font-weight: 400;
}

/* Article Title (Single Post) */
.single-post .article-title,
.single-page .page-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Titres dans le contenu */
.article-content h2,
.page-content-area h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.article-content h3,
.page-content-area h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.article-content h4,
.page-content-area h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
}

/* Quote Text */
.quote-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

/* Stats Number */
.stat-number {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Footer Titles */
.footer-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
}

/* Author Name */
.author-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
}

/* Comment Author */
.comment-author-name {
    font-family: var(--font-heading);
    font-weight: 400;
}

/* Category Badge */
.post-category,
.article-category {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   RESPONSIVE - Ajustements mobiles
======================================== */

@media (max-width: 768px) {
    .site-title {
        font-size: 2.2rem;
    }

    .hero-title,
    .archive-title {
        font-size: 2.8rem;
    }

    .single-post .article-title,
    .single-page .page-title {
        font-size: 2.5rem;
    }

    .article-content h2,
    .page-content-area h2 {
        font-size: 1.75rem;
    }

    .post-title,
    .span-8-2 .post-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 2rem;
    }

    .hero-title,
    .archive-title {
        font-size: 2.2rem;
    }

    .single-post .article-title,
    .single-page .page-title {
        font-size: 2rem;
    }

    .stat-number {
        font-size: 3.5rem;
    }
}

/* ========================================
   OPTIMISATION DE LA PERFORMANCE
======================================== */

/* Préchargement de la font Google Fonts */
/* À ajouter dans le <head> de votre header.php : */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
*/

/* Anti-aliasing pour une meilleure lecture */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.hero-title,
.post-title,
.article-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}