/* Réinitialisation de base et styles généraux */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    line-height: 1.6;
    color: #555555; /* Couleur de texte principale */
    background-color: transparent; /* ou #FFFFFF si vous préférez blanc */
    -webkit-text-size-adjust: 100%;
}

.container {
    max-width: 900px; /* Largeur max comme dans l'original */
    margin: 0 auto; /* Centrer le contenu */
    padding: 10px 20px; /* Ajouter un peu d'espace sur les côtés */
}

a {
    color: #66C7E5; /* Couleur des liens */
    text-decoration: none; /* Enlever le soulignement par défaut */
}

a:hover {
    text-decoration: underline; /* Souligner au survol */
}

p {
    margin-top: 0;
    margin-bottom: 1em; /* Espace sous les paragraphes */
}

h1, h2 {
    color: #66C7E5; /* Couleur des titres */
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: bold;
}

h1 {
    font-size: 1.2em; /* Ajuster si nécessaire */
    text-align: center;
}

h2 {
    font-size: 1.1em; /* Ajuster si nécessaire */
    text-align: center;
}

img {
    max-width: 100%; /* Rendre les images responsives */
    height: auto;
    display: block; /* Empêcher les espaces sous les images */
}

hr.separator {
    border: 0;
    height: 1px;
    background-color: #BBBBBB;
    margin: 20px 0;
}

/* Header Styles */
.site-header {
    padding: 15px 0;
    color: #66C7E5; /* Couleur spécifique du header */
}

.header-grid {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Espace entre les éléments */
}

.header-item {
    text-align: center;
    flex: 1; /* Fait en sorte que les éléments tentent de prendre une place égale */
    min-width: 200px; /* Largeur minimale pour éviter qu'ils deviennent trop petits */
}

.logo-title {
    display: flex;
    flex-direction: column; /* Logo au-dessus du titre */
    align-items: center;
}

.logo {
    width: 50px; /* Taille du logo comme dans l'original */
    margin-bottom: 5px;
}

.instructor-info p,
.contact-info p {
    margin: 0.2em 0;
    font-size: 0.9em; /* Ajuster la taille si besoin */
    font-weight: bold;
}
.contact-info a {
    font-weight: bold;
}


/* Main Content Styles */
.site-main {
    padding: 20px 0;
}

.content-grid {
    display: flex;
    flex-wrap: wrap; /* Permet de passer en colonne sur petits écrans */
    gap: 30px; /* Espace entre la bio et le contenu principal */
}

.bio-section {
    flex: 1; /* Prendra 1/3 de l'espace disponible */
    min-width: 250px; /* Largeur minimale avant de passer à la ligne */
    max-width: 300px; /* Correspond à peu près à la colonne num4 originale */
    color: #66C7E5; /* Couleur spécifique de la bio */
}
.bio-section p {
    font-size: 0.9em;
    margin-bottom: 1em;
}
.bio-section a {
    text-decoration: underline; /* Souligner les liens dans la bio */
}

.bio-image {
    max-width: 285px; /* Taille max de l'image comme dans l'original */
    margin: 0 auto 15px auto; /* Centrer l'image et ajouter espace en dessous */
    border: 0;
}

.main-content {
    flex: 2; /* Prendra 2/3 de l'espace disponible */
    min-width: 300px; /* Largeur minimale */
}

.main-content article {
    margin-bottom: 20px; /* Espace entre les articles */
    text-align: justify; /* Justifier le texte principal */
}
.main-content article:last-child {
    margin-bottom: 0;
}
.main-content h2 {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 15px;
}

/* Responsive Design */
@media (max-width: 768px) { /* Point de rupture pour tablettes/mobiles */
    .header-grid, .content-grid {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Centre les éléments empilés */
        text-align: center;
    }

    .header-item {
        min-width: 100%; /* Prend toute la largeur quand empilé */
        margin-bottom: 15px;
    }
    .header-item:last-child {
        margin-bottom: 0;
    }

    .bio-section {
        max-width: 100%; /* Permet à la bio de prendre toute la largeur */
        margin-bottom: 20px;
    }

    .main-content {
        flex-basis: 100%; /* Prend toute la largeur */
    }
    .main-content article {
         text-align: left; /* Moins justifié sur mobile pour lisibilité */
    }
}