/* Importation de la police Luciole (à adapter selon l'emplacement de la police) */
/* Webfont: Luciole-Regular */@font-face {
    font-family: 'Luciole';
    src: url('Luciole-Regular.eot'); /* IE9 Compat Modes */
    src: url('Luciole-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Luciole-Regular.woff') format('woff'), /* Modern Browsers */
         url('Luciole-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Luciole-Regular.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: 'Luciole';
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
    width: 100vw; /* Fixe la largeur à 100% de la largeur de la vue */
    height: auto; /* Permet à la hauteur de s'adapter au contenu */
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

header, nav, main, footer {
    padding: 10px;
    border: 1px solid #000000;
    box-sizing: border-box;
}

header {
    flex: 0 0 auto; /* Permet au header de s'adapter au contenu */
    text-align: center;
}

nav {
    display: flex;
    flex-direction: column; /* Colonne pour les petits écrans */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    gap: 5px; /* Espacement réduit entre les éléments de navigation */
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    padding: 10px;
    width: 100%; /* Largeur à 100% du conteneur */
    max-width: 300px; /* Limite la largeur maximale pour les grands écrans */
    height: auto; /* Hauteur automatique pour s'adapter au contenu */
    border: 1px solid #000000;
    box-sizing: border-box;
    text-align: center;
}

main {
    flex: 1 1 auto; /* Permet au main de s'adapter à l'espace disponible */
}

footer {
    text-align: center;
}

/* Pour les écrans plus larges, réinitialiser les styles spécifiques aux petits écrans */
@media (min-width: 600px) {
    body {
        height: 100vh; /* Fixe la hauteur à 100% de la hauteur de la vue */
        overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
    }
    
    nav {
        flex-direction: row; /* Disposition en ligne pour les grands écrans */
        gap: 10px; /* Espacement entre les éléments de navigation */
        flex-wrap: nowrap; /* Empêche les cellules de passer à la ligne suivante */
        white-space: nowrap; /* Empêche le retour à la ligne du contenu dans la navigation */
    }
    
    nav a {
        width: 150px; /* Largeur spécifique pour les grands écrans */
        height: 50px; /* Hauteur spécifique pour les grands écrans */
    }
    
    footer {
        text-align: center;
    }
}

/* Style général pour la page des actions pour smartphones */
#actions {
    padding: 10px;
    text-align: center; /* Centre le texte dans la section des actions */
}

#actions h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold; /* Rend le titre en gras */
}

#actions h2 {
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: normal; /* Rend le sous-titre non gras */
    color: #333; /* Couleur du sous-titre */
}

.blog-post {
    background-color: #ffffff; /* Fond blanc pour les articles */
    border: 1px solid #000000; /* Bordure noire pour les articles */
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: left; /* Aligne le texte à gauche dans les articles */
}

.blog-post h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.blog-post .post-date {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 10px;
}

.blog-post p {
    font-size: 0.9em;
    margin-bottom: 25px;
}