/* --- Réglages Généraux (Dark Mode et Police) --- */
body {
    /* Couleurs du Mode Sombre */
    background-color: #1a1a1a; /* Fond très sombre */
    color: #e0e0e0;          /* Texte principal (gris clair) */

    /* Police épurée (utilise la police système) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 Helvetica, Arial, sans-serif;
    
    line-height: 1.7;        /* Hauteur de ligne pour une lecture facile */
    margin: 0;
    padding: 20px;           /* Un peu d'espace sur mobile */
}

/* --- Conteneur de l'article --- */
main {
    max-width: 700px; /* Limite la largeur du texte pour la lisibilité */
    margin: 40px auto;  /* Centre l'article sur la page */
    padding: 20px;
}

/* --- Styles des Titres --- */
h1, h2 {
    color: #ffffff;         /* Titres en blanc pur pour ressortir */
    border-bottom: 1px solid #444; /* Ligne de séparation subtile */
    padding-bottom: 8px;
    line-height: 1.3;
}

h1 {
    font-size: 2.8em; 
    margin-bottom: 10px;
}

h2 {
    font-size: 1.8em;
    margin-top: 40px; 
}

/* --- Métadonnées (Auteur, Date) --- */
.meta {
    font-size: 0.9em;
    color: #888; /* Couleur grise plus discrète */
    font-style: italic;
    margin-bottom: 30px;
}

/* --- Paragraphes --- */
p {
    font-size: 1.1em;
    margin-bottom: 20px; 
}

/* --- Citations (pour mettre en avant du texte) --- */
blockquote {
    border-left: 4px solid #007acc; /* Couleur d'accent (bleu) */
    margin: 25px 0 25px 20px;
    padding: 10px 20px;
    background-color: #252525; /* Fond de citation légèrement différent */
    font-style: italic;
    color: #ccc; 
}

/* --- Liens --- */
a {
    color: #0099ff; /* Liens en bleu vif */
    text-decoration: none; 
}

a:hover {
    text-decoration: underline; 
}




/* --- Media Query pour les Écrans Mobiles (Max 600px de large) --- */
@media screen and (max-width: 600px) {
    
    /* 1. Texte (Lisibilité) */
    body {
        /* On réduit la marge générale */
        padding: 10px; 
    }

    main {
        /* On supprime la limitation de largeur sur mobile */
        max-width: 100%; 
        /* On utilise tout l'espace disponible */
        margin: 10px auto; 
    }

    p {
        /* On réduit légèrement la taille du texte pour qu'il soit moins "écrasé" */
        font-size: 1em; 
        margin-bottom: 15px;
    }

    /* 2. Titres */
    h1 {
        /* On réduit la taille du titre principal */
        font-size: 2em; 
    }
    
    h2 {
        /* On réduit la taille des sous-titres */
        font-size: 1.5em; 
    }
    
    /* 3. Images (Adaptation) */
    /* Cette règle est CRUCIALE pour les images */
    img {
        /* L'image prend 100% de la largeur du conteneur disponible */
        max-width: 100%; 
        /* La hauteur s'ajuste automatiquement pour éviter la déformation */
        height: auto;   
        display: block; /* S'assure que l'image est un bloc pour bien prendre la largeur */
    }

    /* 4. Citations (Adaptation) */
    blockquote {
        /* On retire la marge à gauche pour que la citation prenne toute la largeur */
        margin-left: 0;
    }
}

/* Appliquer à tout le site */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #ffffff;
}

/* Appliquer une graisse plus épaisse pour les titres */
h1 {
    font-weight: 700;
}