.bloc {
    /* Je limite la largeur pour que ça reste lisible */
    max-width: 100%; 
    margin: 0 auto; /* Centrage automatique */
    margin-top: 10px;
    padding: 10px;
    /* J'ai choisi un gris très clair pour moderniser le fond par rapport au blanc pur */
    background-color: rgb(243,244,246); 
    margin-bottom: 60px;
    color: rgb(55,65,81); /* Texte en gris foncé pour un meilleur confort de lecture */
}


header {
    width: 100%;
    background-color: black; /* Fond noir pour contraster avec le reste du site */
    padding: 15px 0;
    top: 1px; /* Positionnement */
    left: 0;
    font-family: 'Times New Roman', Times, serif; /* Police avec empattement pour le style */
}

.interlien ul {
    list-style: none; /* Je retire les puces de la liste */
    padding: 0;
    display: flex; /* Utilisation de Flexbox pour aligner le menu horizontalement */
    justify-content: center; /* Je centre les liens au milieu de la barre */
    width: 100%;
    margin: auto;
    flex-wrap: wrap; /* Permet au menu de passer à la ligne si l'écran est petit */
}

.interlien li a {
    color: rgb(255,255,255); /* Texte blanc */
    text-decoration: none; /* Je retire le soulignement par défaut */
    border: 1px solid rgb(255,255,255); /* Bordure blanche pour faire un effet bouton */
    border-radius: 80px; /* Bords très arrondis (pill shape) */
    padding: 10px 40px; /* Espace intérieur pour grossir les boutons */
}


.interlien li a:hover {
    color: rgb(30,58,138); /* Le texte devient bleu foncé */
    text-decoration: underline;
    background-color: rgb(255,255,255); /* Le fond devient blanc */
}


.body { 
    background-color: rgb(243,244,246); /* Fond gris clair uniforme */
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
}

body {
    margin: 0; /* Je supprime les marges par défaut du navigateur */
}


.infoperso {
    font-size: large;
    background-color: black; /* Rappel du noir du header */
    color: rgb(255,255,255); /* Texte en blanc pour la lisibilité */
    padding: 30px;
    font-family: 'Times New Roman', Times, serif;
    height: 150vh; /* Je force une grande hauteur pour couvrir la page */
}


.infoperso img {
    display: block;
    margin: 0 auto; /* Centrage de l'image */
    width: 190px;
    height: 230px;
    object-fit: cover; /* L'image remplit le cadre sans être déformée */
    border-radius: 80px; /* Arrondi pour le style */
}


main {
    width: 25%; /* Prend 1/4 de la largeur de l'écran */
    text-align: justify; /* Texte justifié pour faire plus propre */
    border-right: 8px solid rgb(243,244,246); /* Séparation visuelle avec la droite */
}

.test {
    font-weight: bold; /* Classe utilitaire pour mettre en gras */
}


.container {
    display: flex; /* Met la colonne gauche (main) et droite (aside) côte à côte */
}


aside {
    width: 75%; /* Prend les 3/4 restants de la largeur */
    margin-bottom: 70px;
    background-color: rgb(229,231,235); /* Fond légèrement différent pour distinguer */
}


.contenu {
    max-width: 1000px; /* Empêche le texte d'être trop large sur grand écran */
    margin: 10px auto 10px auto; 
    padding: 15px;
    background-color: rgb(229,231,235);
    color: rgb(55,65,81);
    border-radius: 15px; /* Coins arrondis pour la douceur */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Petite ombre portée pour le relief */
    text-align: center;
}


.contenu-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;    
    margin-bottom: 20px; 
    height: auto; /* Hauteur automatique pour respecter le ratio */
    border-radius: 10px;
    width: 80%; /* L'image prend 80% du conteneur */
    max-width: 90%;
}

.contenu audio {
    width: 100%;           
    max-width: 500px;      /* Limite la largeur du lecteur audio */
    display: block;        
    margin: 20px auto;     /* Centrage */
    border-radius: 30px;   /* Design arrondi du lecteur */
}

video {
    width: 100%;    /* La vidéo s'adapte à la largeur disponible (responsive) */
    height: auto;   
    display: block; 
}


#page-interets {
    display: grid;                /* Activation du mode Grille */
    grid-template-columns: 1fr 1fr; /* Création de 2 colonnes de taille identique */
    gap: 30px;                    /* Espace (gouttière) entre les éléments */
    width: 100%;                  
    padding: 40px 20px;           
    box-sizing: border-box;       /* Inclut le padding dans le calcul de la largeur totale */
}


#page-interets .contenu {
    width: 100%;                  
    height: 100%;                 /* Force la même hauteur pour toutes les cartes */
    padding: 30px;                
    background-color: rgb(229,231,235);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;                /* Flexbox à l'intérieur de la Grid pour aligner le contenu */
    flex-direction: column;       /* Empile le texte et l'image verticalement */
    justify-content: space-between; /* Espacement équilibré */
}


#page-interets .contenu-img, 
#page-interets .video-container iframe {
    width: 100%;
    height: 200px;         /* Je fixe une hauteur précise pour que tout soit aligné */
    object-fit: cover;     /* Recadre l'image si nécessaire pour remplir la zone */
    border-radius: 8px;
    margin-top: 10px;
}

footer {
    width: 100%;
    background-color: black; /* Je reprends le noir du header pour l'uniformité */
    color: rgb(255, 255, 255); /* Texte en blanc */
    padding: 20px 0; /* Un peu d'espace en haut et en bas */
    text-align: center; /* Je centre le texte */
    font-family: 'Times New Roman', Times, serif;
    margin-top: 0; /* S'assure qu'il se colle bien au bas du contenu précédent */
    position: relative; /* Permet de rester stable dans le flux de la page */
    clear: both; /* Sécurité pour éviter que les éléments flottants ne le chevauchent */
}