/* --- 1. Réinitialisation et Polices --- */
body {
    font-family: 'Roboto', sans-serif; /* Police moderne et claire pour le corps */
    line-height: 1.6; /* Améliore la lisibilité */
    color: #333; /* Texte gris foncé pour un look plus doux que le noir pur */
    background-color: #f9f9f9; /* Fond très légèrement grisé */
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Merriweather', serif; /* Police à empattement (serif) pour les titres, rappelant les documents anciens/classiques */
    color: #1a1a1a; /* Noir presque pur pour les titres */
    font-weight: 700;
}

/* --- 2. Mise en page Générale --- */
.container {
    max-width: 800px; /* Largeur maximale fixe pour l'article */
    margin: 40px auto; /* Centrage et marges verticales */
    padding: 0 20px;
}

/* --- 3. En-tête (Header) --- */
header {
    text-align: center;
    padding: 40px 0;
    border-bottom: 2px solid #ddd; /* Ligne de séparation subtile */
    margin-bottom: 40px;
    background-color: #fff; /* Fond blanc pour l'en-tête */
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

header p {
    font-style: italic;
    color: #666;
}

/* --- 4. Article de Blog (Article) --- */
article {
    background-color: #fff; /* Le contenu principal est sur fond blanc */
    padding: 40px;
    border: 1px solid #eee; /* Bordure très fine pour délimiter légèrement le contenu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre légère pour un effet "feuille" */
}

article h2 {
    font-size: 2em;
    border-left: 4px solid #4a90e2; /* Accent de couleur discret */
    padding-left: 15px;
    margin-top: 0;
}

article h3 {
    font-size: 1.4em;
    margin-top: 30px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc; /* Ligne pointillée, très "document" */
    padding-bottom: 5px;
}

/* Méta-données */
.metadata {
    color: #999;
    font-size: 0.9em;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Listes */
ul {
    list-style-type: none; /* Supprime les puces par défaut */
    padding-left: 0;
}

ul li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

ul li::before {
    content: '→'; /* Utilise une flèche comme puce (symbole d'indexation/référence) */
    position: absolute;
    left: 0;
    color: #4a90e2; /* Couleur d'accentuation */
    font-weight: bold;
}

/* Mettre en gras les termes clés dans l'article */
strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* --- 5. Bas de Page (Footer) --- */
footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 0.8em;
}