/* ════════════════════════════════════════════════════════════════════════════
 * styles-articles.css — Hugo Informatique
 * Charge unique pour tous les articles de blog auto-générés
 * Économie : ~3000 tokens par appel API Claude
 * ════════════════════════════════════════════════════════════════════════════ */

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

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.7;
    background: #f8f9fa;
}

/* === NAVIGATION === */
nav {
    background: linear-gradient(135deg, #0f0f1a, #1a1a3e);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.nav-logo {
    color: #00d4ff;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}
.nav-links a {
    color: #ccd6f6;
    text-decoration: none;
    margin-left: 1.5rem;
    font-size: .9rem;
    transition: color .3s;
}
.nav-links a:hover { color: #00d4ff; }

/* === BREADCRUMB === */
.breadcrumb {
    background: #e8f4fd;
    padding: .6rem 2rem;
    font-size: .85rem;
}
.breadcrumb a {
    color: #0066cc;
    text-decoration: none;
}
.breadcrumb span {
    color: #666;
    margin: 0 .4rem;
}

/* === HEADER ARTICLE === */
.article-header {
    background: linear-gradient(135deg, #0f3460, #16213e);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}
.article-header h1 {
    font-size: 2rem;
    max-width: 800px;
    margin: 0 auto 1rem;
    line-height: 1.3;
}
.article-meta {
    color: #a0b4d0;
    font-size: .9rem;
    margin-top: 1rem;
}
.article-meta span { margin: 0 1rem; }

/* === CONTAINER === */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* === TYPOGRAPHIE === */
h2 {
    font-size: 1.5rem;
    color: #0f3460;
    margin: 2rem 0 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #00d4ff;
}
h3 {
    font-size: 1.15rem;
    color: #16213e;
    margin: 1.5rem 0 .6rem;
}
p { margin-bottom: 1rem; color: #333; }
ul, ol { padding-left: 1.4rem; margin-bottom: 1rem; color: #333; }
li { margin: .3rem 0; }
strong { color: #0f3460; }

/* === SOMMAIRE === */
.toc {
    background: #e8f4fd;
    border-left: 4px solid #0066cc;
    padding: 1.2rem 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}
.toc h3 {
    color: #0066cc;
    margin: 0 0 .8rem;
    font-size: 1rem;
}
.toc ol { padding-left: 1.2rem; }
.toc a { color: #0066cc; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* === BOÎTES D'INFORMATION === */
.alert-box {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}
.alert-box h4 { color: #0066cc; margin-bottom: .5rem; }

.tip-box {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}
.tip-box h4 { color: #155724; margin-bottom: .5rem; }

.warn-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}
.warn-box h4 { color: #856404; margin-bottom: .5rem; }

/* === FAQ === */
.faq-section { margin: 2rem 0; }
.faq-section details {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: .7rem 0;
}
.faq-section summary {
    padding: 1rem 1.2rem;
    cursor: pointer;
    font-weight: 600;
    color: #0f3460;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-section summary::after {
    content: "▼";
    color: #0066cc;
    transition: transform .3s;
}
.faq-section details[open] summary::after { transform: rotate(180deg); }
.faq-section .answer { padding: 0 1.2rem 1rem; }

/* === CTA === */
.cta-box {
    background: linear-gradient(135deg, #0f3460, #16213e);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 3rem 0;
}
.cta-box h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.cta-box p { color: #a0b4d0; margin-bottom: 1.5rem; }
.cta-btn {
    display: inline-block;
    background: #00d4ff;
    color: #0f0f1a;
    padding: .9rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all .3s;
}
.cta-btn:hover {
    background: white;
    transform: translateY(-2px);
}

/* === AUTHOR BIO (EEAT) === */
.author-bio {
    background: #f0f4f8;
    border-left: 4px solid #00d4ff;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}
.author-bio h3 {
    color: #0f3460;
    margin-bottom: .5rem;
    font-size: 1.1rem;
}
.author-bio p {
    font-size: .95rem;
    color: #444;
    margin-bottom: .3rem;
}
.author-bio a {
    color: #0066cc;
    text-decoration: none;
}

/* === ARTICLES LIÉS === */
.related-articles {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 1px solid #e0e0e0;
}
.related-articles h3 { color: #0f3460; margin-bottom: 1rem; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.related-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e0e0e0;
    transition: all .3s;
}
.related-card:hover {
    border-color: #0066cc;
    transform: translateY(-2px);
}
.related-card h4 {
    color: #0066cc;
    font-size: .9rem;
    margin-bottom: .4rem;
}
.related-card p {
    font-size: .8rem;
    color: #666;
    margin: 0;
}

/* === FOOTER === */
footer {
    background: #0f0f1a;
    color: #8892b0;
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
}
footer a {
    color: #00d4ff;
    text-decoration: none;
}

/* === CATÉGORIES (étiquettes blog) === */
.category-label {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cat-securite   { background: #fce8e8; color: #c00; }
.cat-conseil    { background: #e8f4fd; color: #0066cc; }
.cat-tuto       { background: #d4edda; color: #155724; }
.cat-pratiques  { background: #fff3cd; color: #856404; }
.cat-cas        { background: #f0e8fc; color: #6f42c1; }
.cat-veille     { background: #fce4ec; color: #c2185b; }
.cat-decryptage { background: #e0f7fa; color: #00838f; }

/* === RESPONSIVE === */
@media (max-width: 600px) {
    .article-header h1 { font-size: 1.4rem; }
    .nav-links { display: none; }
}