/* styles/baseStyle.css - STYLE BRUTALIST COMPLET */

:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --border-color: #333333; /* Gris sombre pour les lignes discrètes */
}

/* Reset CSS de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* La police serif imposée */
    font-family: 'Times New Roman', Times, serif; 
    font-size: 18px;
    line-height: 1.6;
    /* Lissage de police pour un rendu plus net sur fond noir */
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Gestion des liens par défaut */
a {
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Titres */
h1, h2, h3, .section-title {
    font-weight: normal; /* Pas de gras, c'est plus élégant */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

/* Style standard des titres de section */
.section-title {
    font-size: 2rem;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 30px;
    display: inline-block; /* La ligne s'arrête à la fin du texte */
    width: 100%; /* ...ou prend toute la largeur (choisis ce que tu préfères) */
}

/* Mise en page principale */
main {
    flex: 1; /* Pousse le footer vers le bas si la page est vide */
    width: 100%;
    max-width: 1400px; /* Largeur max confortable pour les écrans larges */
    margin: 0 auto; /* Centre le contenu */
    padding: 40px 20px;
}

/* Paragraphes */
p {
    margin-bottom: 20px;
    max-width: 800px; /* Évite les lignes de texte trop longues à lire */
}

/* Images globales */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Sélection de texte (petit détail stylé) */
::selection {
    background: #fff;
    color: #000;
}

/* --- RESPONSIVE GLOBAL (Textes & Structure) --- */
@media screen and (max-width: 768px) {
    
    /* On réduit la taille de police globale pour gagner de la place */
    body {
        font-size: 16px; /* Passage de 18px à 16px */
    }

    /* On réduit le padding principal pour que le texte aille plus près des bords */
    main {
        padding: 30px 15px; /* Moins de vide sur les côtés */
    }

    /* Les titres sont trop gros sur mobile, on les calme */
    .section-title {
        font-size: 1.5rem; /* Passage de 2rem à 1.5rem */
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* Ajustement des paragraphes */
    p {
        margin-bottom: 15px;
        text-align: justify; /* Optionnel : rend la lecture plus propre sur petit écran */
    }
}