/* ===== POLICES PERSONNALISÉES ===== */
/* Définition de la police "pixel-script" */
@font-face {
    font-family: 'pixel-script';
    src: url('../font/pixel-script.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

/* Police "Victor Mono" importée depuis Google Fonts */
.victor-mono-<uniquifier> {
    font-family: "Victor Mono", monospace;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

/* Définition de la police "Avara-BoldItalic" */
@font-face {
    font-family: 'Avara-BoldItalic';
    src: url('../font/Avara-BoldItalic.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

/* Définition de la police "Avara-Bold" */
@font-face {
    font-family: 'Avara-Bold';
    src: url('../font/Avara-Bold.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

/* ===== STYLES GLOBAUX ===== */
body {
    line-height: 1.6; /* Interligne pour une meilleure lisibilité */
    color: #333; /* Couleur de texte par défaut */
    padding: 20px; /* Espace autour du contenu */
}

/* ===== EN-TÊTE ===== */
header {
    width: 90vw; /* Largeur relative à la fenêtre */
    margin: 0 auto; /* Centrage horizontal */
    height: 100px; /* Hauteur fixe */
    position: fixed; /* Position fixe en haut de la page */
    top: 10px;
    left: 5vw;
}

/* ===== CONTENEUR PRINCIPAL ===== */
#conteneur {
    width: 90vw; /* Largeur relative à la fenêtre */
    margin: 100px auto 0px; /* Marge haute pour éviter le chevauchement avec l'en-tête */
    background-color: white; /* Fond blanc */
    height: calc(100vh - 150px); /* Hauteur calculée pour s'adapter à la fenêtre */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre légère */
    display: flex; /* Affichage en flexbox pour organiser les éléments enfants */
    justify-content: space-between; /* Espacement égal entre les éléments */
}

/* ===== ASIDE (PRÉSENTATION) ===== */
aside {
    display: none; /* Masque les éléments "aside" par défaut */
}

#asidesarah {
    font-family: "Victor Mono"; /* Police personnalisée */
    margin-bottom: 1.5rem; /* Marge basse */
    font-style: italic; /* Texte en italique */
    font-size: 10px; /* Taille de police */
    width: 25%; /* Largeur relative */
    padding: 1.5rem; /* Espace intérieur */
}

/* ===== SECTION PRINCIPALE (ARTICLES) ===== */
section {
    width: 60%; /* Largeur relative */
    height: 100%; /* Hauteur maximale */
    overflow-y: scroll; /* Barre de défilement verticale si le contenu dépasse */
}

/* ===== PIED DE PAGE ===== */
footer {
    width: 25%; /* Largeur relative */
    margin-bottom: 1.5rem; /* Marge basse */
    padding: 1.5rem; /* Espace intérieur */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}

footer ul {
    list-style: none; /* Enlève les puces de la liste */
    padding: 0; /* Enlève le padding par défaut */
    margin: 0; /* Enlève la marge par défaut */
}

footer li {
    margin-bottom: 1vh; /* Espace entre chaque élément de la liste */
}

footer img {
    max-width: 100%; /* Les images ne dépassent pas la largeur du conteneur */
    height: auto; /* Garde les proportions naturelles */
    display: block; /* Évite les espaces indésirables sous les images */
}

/* ===== TITRES ===== */
h1 {
    color: black; /* Couleur du texte */
    text-align: center; /* Centrage du texte */
    font-family: 'pixel-script'; /* Police personnalisée */
    font-size: 4vw; /* Taille relative à la fenêtre */
}

#asidesarah h2 {
    color: black; /* Couleur du texte */
    font-family: 'Avara-BoldItalic'; /* Police personnalisée */
    font-size: 3vh; /* Taille relative à la hauteur de la fenêtre */
}

/* ===== STYLES DES ARTICLES ===== */
article {
    background-color: white; /* Fond blanc */
    padding: 1.5rem; /* Espace intérieur */
    margin-bottom: 1.5rem; /* Marge basse */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre légère */
    transition: all 0.3s ease; /* Animation fluide pour les effets au survol */
}

article:hover {
    transform: translateY(-3px); /* Déplacement vers le haut au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Ombre plus marquée au survol */
}

article h3 {
    color: black; /* Couleur du texte */
    font-family: "Victor Mono"; /* Police personnalisée */
    margin-bottom: 0.5rem; /* Marge basse */
    font-size: 1.2rem; /* Taille de police */
}

article h4 {
    color: black; /* Couleur du texte */
    font-family: "Avara-BoldItalic"; /* Police personnalisée */
    margin-bottom: 0.5rem; /* Marge basse */
    font-size: 1.1rem; /* Taille de police */
}

article h4 a {
    color: inherit; /* Hérite de la couleur du parent */
    transition: all 0.3s ease; /* Animation fluide pour les effets au survol */
    text-decoration: underline; /* Soulignement au survol */
}

article h4 a:hover {
    color: red;
    text-decoration: underline; /* Soulignement au survol */
}

article h5 {
    color: darkgray;
    font-size: 0.9rem; /* Taille de police */
    margin-bottom: 0.75rem; /* Marge basse */
    font-family: "Victor Mono"; /* Police personnalisée */
}

article blockquote {
    border-left: 3px solid #e0e0e0; /* Bordure gauche */
    padding-left: 1rem; /* Espace intérieur à gauche */
    margin: 0.75rem 0; /* Marges verticales */
    color: black; /* Couleur du texte */
    font-family: "Avara-Bold"; /* Police personnalisée */
    font-size: 3vh; /* Taille relative à la hauteur de la fenêtre */
}

article p {
    margin: 0.75rem 0; /* Marges verticales */
    font-family: "Victor Mono"; /* Police personnalisée */
}

article h6 {
    color: #e0e0e0; /* Couleur du texte (gris clair) */
    font-size: 0.8rem; /* Taille de police */
    text-align: right; /* Alignement à droite */
    margin-top: 0.75rem; /* Marge haute */
    font-family: "Victor Mono"; /* Police personnalisée */
}

/* ===== LIEN MÉMOIRE PDF ===== */
#lien-memoire {
    display: inline-block;
    margin-top: 1.2rem;
    font-family: "Victor Mono";
    font-size: 10px;
    font-style: italic;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
    transition: all 0.3s ease;
}
 
#lien-memoire:hover {
    color: red;
    border-bottom-color: red;
}
 

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {

    body {
        padding: 10px;
    }

    header {
        width: 100vw;
        left: 0;
        padding: 0 10px;
        box-sizing: border-box;
        height: 70px;
    }

    h1 {
        font-size: 8vw; /* Trop petit à 4vw sur mobile */
    }

    #conteneur {
        width: 100vw;
        margin: 80px 0 0;
        height: auto;
        min-height: calc(100vh - 80px);
        flex-direction: column; /* Empilement vertical */
        box-shadow: none;
    }

    #asidesarah {
        width: 100%;
        padding: 1rem;
        font-size: 12px;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #asidesarah h2 {
        font-size: 5vw;
    }

    section {
        width: 100%;
        height: auto;
        overflow-y: visible; /* Plus besoin de scroll interne */
    }

    footer {
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;
        margin-bottom: 2rem;
    }

    footer li {
        margin-bottom: 1.5vh;
    }

    article {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    article blockquote {
        font-size: 4vw; /* Remplace 3vh qui peut être trop grand */
    }

    article h3 {
        font-size: 1rem;
    }

    article h4 {
        font-size: 1rem;
    }
}