/* --- Importation des polices depuis Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

/* --- Variables CSS --- */
:root {
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-headings: 'Merriweather', 'Georgia', serif;
    --color-text: #212529;
    --color-primary: #007bff;
    --color-secondary-text: #6c757d;
    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-border: #dee2e6;
    --color-highlight-bg: #e9f7ff;
    --color-arabic-text: #00695c;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 5px 15px rgba(0,0,0,0.08);
    --border-radius: 8px;
}

/* --- Styles Globaux --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* =================================================================== */
/* STYLES POUR LA TABLE DES MATIÈRES AUTOMATIQUE                     */
/* =================================================================== */

#table-of-contents {
    background-color: #f8f9fa; /* Fond gris très clair */
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary); /* Accent bleu */
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 3rem; /* Espace avant le début du premier contenu */
}

#table-of-contents h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
}

#table-of-contents ul {
    list-style: none; /* Retire les puces */
    padding: 0;
    margin: 0;
    columns: 2; /* Affiche la liste sur 2 colonnes sur les grands écrans */
    column-gap: 2rem;
}

#table-of-contents li {
    margin-bottom: 0.5rem;
    text-align: left; /* On force l'alignement à gauche */
}

#table-of-contents a {
    text-decoration: none;
    font-weight: 500;
    color: #34495e; /* Un bleu-gris pour les liens */
    transition: color 0.2s, padding-left 0.2s;
}

#table-of-contents a:hover {
    color: var(--color-primary); /* Le lien devient bleu au survol */
    padding-left: 5px; /* Petit décalage au survol */
    text-decoration: none;
}

/* Sur les petits écrans, on repasse sur 1 seule colonne */
@media (max-width: 768px) {
    #table-of-contents ul {
        columns: 1;
    }
}

body {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.7;
    background-color: var(--color-light-gray);
    color: var(--color-text);
    margin: 0;
    overflow-x: hidden;
}

/* --- STYLES POUR L'ARTICLE --- */
main.article-page { padding: 2rem 1rem; }
main.article-page article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 3rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}
main.article-page p, main.article-page li { text-align: justify; }
main.article-page h1 {
    font-size: 3rem; text-align: center; color: var(--color-white);
    background: linear-gradient(45deg, #007bff, #0056b3);
    padding: 2rem 1.5rem; margin: -2.5rem -3rem 3rem -3rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); border-bottom: none;
}
main.article-page h2 {
    font-size: 2.1rem; margin-top: 3.5rem; margin-bottom: 1.5rem;
    color: #2c3e50; padding-left: 1rem;
    border-left: 5px solid var(--color-primary); border-bottom: none;
}
main.article-page h3 {
    font-size: 1.6rem; color: #34495e; margin-top: 3rem;
    padding-bottom: 0.5rem; border-bottom: 2px dotted var(--color-border);
}
main.article-page h4 {
    font-size: 1.2rem; color: var(--color-primary);
    font-family: var(--font-primary); font-weight: 700;
}

/* --- STYLES POUR LES SECTIONS DE L'ARTICLE --- */
main.article-page section {
    padding: 2rem; margin-top: 2.5rem; border-radius: var(--border-radius);
    border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.section-1 { background-color: #f8f9fa; }
.section-2 { background-color: #e9f7ff; }
.section-3 { background-color: #e8f5e9; }
.section-4 { background-color: #fff8e1; }
.section-5 { background-color: #f3e5f5; }
.section-6 { background-color: #fff3e0; }
.section-7 { background-color: #e8eaf6; }

/* --- STYLES POUR LES TABLEAUX --- */
table {
    width: 100%; border-collapse: collapse; margin-top: 2rem;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius); overflow: hidden;
}
th, td {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border);
    text-align: left; vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
thead th {
    background-color: var(--color-light-gray); color: #333;
    font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 2px solid var(--color-primary);
}
tbody tr:nth-child(even) { background-color: #fdfdfd; }
tbody tr:hover { background-color: var(--color-highlight-bg); }

/* --- STYLES POUR LA PAGE D'ACCUEIL --- */
.site-header {
    text-align: center; padding: 2rem 1rem; border-bottom: 1px solid var(--color-border);
    background-color: var(--color-white);
}
.site-header h1 { font-size: 3rem; margin: 0; color: var(--color-text); border: none; }
.site-header p { font-size: 1.1rem; color: var(--color-secondary-text); margin: 0.5rem 0 0; text-align: center; }
.home-section { max-width: 1400px; margin: 0 auto; padding: 2rem 1rem; }
.home-section h2 { text-align: center; font-size: 2.2rem; border: none; margin-bottom: 2.5rem; color: var(--color-primary); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
.post-card {
    display: block; color: var(--color-text); text-decoration: none;
    border-radius: var(--border-radius); padding: 1.5rem; border-left: 5px solid;
    box-shadow: var(--shadow-sm); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card-category {
    display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 0.75rem; opacity: 0.8;
}
.card-title { font-size: 1.4rem; margin: 0 0 0.75rem 0; color: var(--color-text); }
.card-description { font-size: 0.95rem; line-height: 1.6; margin: 0; text-align: left; }
.post-card.category-cours { background-color: #e9f7ff; border-color: #007bff; }
.post-card.category-cours .card-category { color: #007bff; }
.post-card.category-comm { background-color: #e8f5e9; border-color: #4caf50; }
.post-card.category-comm .card-category { color: #4caf50; }
.post-card.category-culture { background-color: #fff8e1; border-color: #ffab00; }
.post-card.category-culture .card-category { color: #ffab00; }
.post-card.category-islam { background-color: #f3e5f5; border-color: #9c27b0; }
.post-card.category-islam .card-category { color: #9c27b0; }

/* --- STYLES PARTAGÉS ET RESPONSIVE --- */
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
[lang="ar"] { font-family: 'Tahoma', var(--font-primary); font-size: 1.25em; color: var(--color-arabic-text); font-weight: 500; text-align: right; }

/* --- STYLES POUR LES CORRIGÉS DÉPLIANTS --- */
.correction { margin-top: 1.5rem; }
.correction summary {
    display: inline-block; cursor: pointer; padding: 0.6rem 1.2rem;
    background-color: var(--color-primary); color: var(--color-white);
    border-radius: 5px; font-weight: 500; transition: background-color 0.2s;
    outline: none;
}
.correction summary:hover { background-color: #0056b3; }
.correction summary::marker { color: var(--color-white); }
.correction-content {
    margin-top: 1rem; padding: 1.5rem; background-color: var(--color-white);
    border: 1px solid var(--color-border); border-radius: 5px;
}

@media (max-width: 1280px) { main.article-page article { max-width: 95%; } }
@media (max-width: 768px) {
    body { font-size: 16px; }
    main.article-page { padding: 0; }
    main.article-page article { padding: 1.5rem; border-radius: 0; }
    main.article-page h1 { font-size: 2rem; margin: 0 0 2rem 0; border-radius: 0; }
    main.article-page h2 { font-size: 1.75rem; }
}
html {
  scroll-behavior: smooth;
/* --- STYLES POUR LES TABLEAUX RESPONSIVE --- */
.table-responsive-wrapper {
    overflow-x: auto; /* Crée une barre de défilement horizontale si nécessaire */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-top: 2rem;
    box-shadow: var(--shadow-sm);
}

.table-responsive-wrapper table {
    /* On s'assure que le tableau à l'intérieur n'a plus d'ombre ou de bordure propre pour éviter les doublons */
    box-shadow: none;
    border: none;
    margin-top: 0;
}
}