/* =====================================================
   style-content.css — Pages de contenu FIRE
   Utilisé par : FAQ FIRE France, Glossaire FIRE France
   Palette alignée sur index / mentions-légales (#1f4e79)
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Calibri, Arial, sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    background: #f8f9fa;
}

/* --- Header --- */
header {
    background: linear-gradient(135deg, #1f4e79 0%, #2c5f8d 50%, #1f4e79 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* --- Layout --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- Blocs blancs (intro, sections) --- */
.intro,
.category-section,
.category {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- Encart "Pour aller plus loin" dans l'intro --- */
.intro-callout {
    background: #f8f9fa;
    border: 2px solid #1f4e79;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-radius: 8px;
}

.intro-callout h3 {
    color: #1f4e79;
    margin-bottom: 0.75rem;
}

.intro-callout p {
    line-height: 1.7;
}

.intro-callout p.italic {
    margin-top: 0.75rem;
    font-style: italic;
}

.intro p.nav-hint {
    margin-top: 1rem;
}

/* --- Navigation sticky --- */
.category-nav,
.alpha-nav {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 1rem;
    z-index: 100;
}

.category-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    list-style: none;
}

.alpha-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    justify-content: center;
}

.category-nav a,
.alpha-nav a {
    display: block;
    padding: 0.75rem 1rem;
    background: #1f4e79;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s;
    text-align: center;
}

.alpha-nav a {
    padding: 0.5rem 1rem;
}

.category-nav a:hover,
.alpha-nav a:hover {
    background: #2c5f8d;
}

/* --- Titres de section --- */
.category-section h2,
.category h2 {
    color: #1f4e79;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #1f4e79;
}

/* --- FAQ --- */
.faq-item {
    margin-bottom: 1.5rem;
    border-left: 4px solid #1f4e79;
    padding-left: 1.5rem;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-question::before {
    content: "❓";
    font-size: 1.3rem;
}

.faq-answer {
    color: #495057;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.faq-answer strong {
    color: #1f4e79;
}

.faq-answer ol,
.faq-answer ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

/* --- Glossaire --- */
.term {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.term:last-child {
    border-bottom: none;
}

.term h3 {
    color: #1f4e79;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.term-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.term-tag {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: #e8f4f8;
    color: #1f4e79;
    border-radius: 12px;
    font-weight: 500;
}

.term-tag.fr {
    background: #e8f5e9;
    color: #388e3c;
}

.term-tag.concept {
    background: #fff3e0;
    color: #f57c00;
}

.term p {
    color: #495057;
    margin-bottom: 0.5rem;
}

/* --- Liens newsletter --- */
.newsletter-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #27ae60;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.newsletter-link:hover {
    color: #1f4e79;
    text-decoration: underline;
}

/* --- Encarts info / avertissement --- */
.highlight-box {
    background: #f8f9fa;
    border-left: 4px solid #1f4e79;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.warning-box {
    background: #fff9e6;
    border-left: 4px solid #f4d03f;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
    border: 2px solid #f4d03f;
}

/* --- CTA --- */
.cta-box {
    background: linear-gradient(135deg, #1f4e79 0%, #2c5f8d 100%);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    margin: 3rem 0;
}

.cta-box h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.cta-box p + p {
    margin-top: 1rem;
}

.cta-button {
    display: inline-block;
    background: white;
    color: #1f4e79;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 1rem;
    transition: transform 0.3s;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.3);
}

/* --- Footer --- */
footer {
    background: #2c3e50;
    color: white;
    padding: 2rem;
    text-align: center;
    margin-top: 3rem;
}

footer .footer-tagline {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

footer .footer-legal {
    margin-top: 1rem;
    font-size: 0.8rem;
    opacity: 0.65;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Responsive mobile --- */
@media only screen and (max-width: 600px) {

    /* Header */
    header {
        padding: 2rem 1rem;
    }

    header h1 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    header p {
        font-size: 1rem;
    }

    /* Conteneur principal */
    .container {
        padding: 1rem;
    }

    /* Blocs blancs */
    .intro,
    .category-section,
    .category {
        padding: 1.25rem 1rem;
    }

    /* Encart intro */
    .intro-callout {
        padding: 1rem;
    }

    /* Navigation : désactivée sticky, boutons empilés */
    .category-nav,
    .alpha-nav {
        position: static;
        padding: 0.75rem;
    }

    .category-nav ul {
        grid-template-columns: 1fr;
    }

    .alpha-nav ul {
        gap: 0.4rem;
    }

    .category-nav a,
    .alpha-nav a {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
    }

    /* Titres de section */
    .category-section h2,
    .category h2 {
        font-size: 1.3rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    /* FAQ */
    .faq-item {
        padding-left: 1rem;
        margin-bottom: 1.25rem;
    }

    .faq-question {
        font-size: 1rem;
        line-height: 1.4;
    }

    .faq-answer {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .faq-answer ol,
    .faq-answer ul {
        margin-left: 1.2rem;
    }

    /* Encarts info / avertissement */
    .highlight-box,
    .warning-box {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Glossaire */
    .term {
        margin-bottom: 1.5rem;
        padding-bottom: 1.25rem;
    }

    .term h3 {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .term p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .term-meta {
        gap: 0.4rem;
    }

    .term-tag {
        font-size: 0.78rem;
        padding: 0.2rem 0.6rem;
    }

    /* Liens newsletter */
    .newsletter-link {
        font-size: 0.85rem;
    }

    /* CTA */
    .cta-box {
        padding: 1.5rem 1rem;
        margin: 2rem 0;
    }

    .cta-box h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .cta-box p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .cta-button {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
        display: block;
        margin-top: 1rem;
    }

    /* Footer */
    footer {
        padding: 1.5rem 1rem;
    }

    footer .footer-tagline {
        font-size: 0.85rem;
    }

    footer .footer-legal {
        font-size: 0.75rem;
        line-height: 1.6;
    }
}