/* ============================================================
   articles-fixed.css — Palette raccord avec myip.casa (#20B2AA)
   Remplace uniquement les couleurs problématiques.
   La structure, animations et layout restent identiques.
   ============================================================ */

/* ── Fond de page ──────────────────────────────────────────── */
/* Avant : linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #10b981 100%) */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    color: #2d3748;
    background: linear-gradient(135deg, #0d7a75 0%, #20B2AA 50%, #2dd4bf 100%);
    min-height: 100vh;
    position: relative;
}

/* ── Header / bannière ─────────────────────────────────────── */
/* Avant : linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) */
header {
    background: linear-gradient(135deg, #0d7a75 0%, #20B2AA 100%);
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 15px 15px 0 0;
    margin: -20px -20px 20px -20px;
    position: relative;
    overflow: hidden;
}

/* ── Bouton nav actif ──────────────────────────────────────── */
/* Avant : color: #4f46e5 */
.nav-btn.active {
    background: white;
    color: #0d7a75;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

/* ── Barre de recherche focus ──────────────────────────────── */
/* Avant : border-color: #4f46e5 + rgba(79, 70, 229, 0.2) */
.search-bar input:focus {
    border-color: #20B2AA;
    box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.25);
}

/* ── Boutons de filtre actifs ──────────────────────────────── */
/* Avant : linear-gradient(45deg, #4f46e5, #06b6d4) */
.filter-btn.active {
    background: linear-gradient(45deg, #0d7a75, #20B2AA);
    color: white;
    box-shadow: 0 5px 15px rgba(32, 178, 170, 0.35);
    transform: translateY(-1px);
}

/* ── En-tête des cartes article ────────────────────────────── */
/* Avant : linear-gradient(135deg, #a78bfa, #818cf8)  (violet) */
.article-header {
    background: linear-gradient(135deg, #0d7a75, #20B2AA);
    color: white;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ── Bouton "Lire l'article" ───────────────────────────────── */
/* Avant : #4f46e5 / #4338ca */
.read-more {
    display: inline-block;
    background: #0d7a75;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

.read-more:hover {
    background: #20B2AA;
}

/* ── Liens footer ──────────────────────────────────────────── */
footer a {
    color: #20B2AA;
    text-decoration: none;
}

footer a:hover {
    color: #0d7a75;
    text-decoration: underline;
}