@charset "UTF-8";

body {
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1.2rem;
}

.greyabout a p{
    color: grey;
    font-style: italic;
}

.header {
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    top: 10%;
    padding: 1% 1.3% 0% 1.3%;
}

.header p {
    text-decoration: none;
    color: white;
}

.leacorin {
    text-decoration: none;
    color: white;
}

.leacorin p:hover {
    color: grey;
}

.conteneur {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Espace entre les colonnes */
    align-items: flex-start; /* Aligne les colonnes en haut */
    margin: 20px; /* Ajoute une marge autour du conteneur */
    gap: 20px; /* Espace entre les colonnes */
}

.colonne-gauche,
.colonne-droite {
    font-size: 1rem;
    flex: 1; /* Les deux colonnes prennent un espace égal */
    max-width: 50%; /* Limite leur largeur pour ne pas dépasser 50% */
}

.colonne-gauche {
    flex: 2; /* La colonne gauche occupe 2 parts de l'espace disponible */
    max-width: 55%; /* Facultatif : Limite la largeur maximale */
    text-align: left; 
    
}

.colonne-gauche h1 {
    padding-right: 330px;
}

.colonne-gauche h1 .french-description {
    color: rgb(199, 199, 199);
}

.colonne-droite {
    flex: 1; /* La colonne droite occupe 1 part de l'espace disponible */
    max-width: 45%; /* Facultatif : Limite la largeur maximale */
    text-align: left;
}

.colonne-droite h2 {
    color: grey;
    margin-bottom: 10px;
}

.colonne-droite h3,
.colonne-droite h4 {
    margin: 0; /* Supprime les marges par défaut */
}

.colonne-droite h3 {
    flex-shrink: 0; /* Empêche h3 de rétrécir */
    min-width: 100px; /* Fixe une largeur minimale pour aligner h4 */
    margin-right: 20px; /* Ajoute un espace entre h3 et h4 */
    white-space: nowrap; /* Empêche h3 de se décomposer sur plusieurs lignes */
}

.colonne-droite h4 {
    flex-grow: 1; /* Permet à h4 d'occuper tout l'espace restant */
    margin-bottom: 5px; /* Supprime les marges par défaut */
    padding-left: 0; 
    /* Supprime tout padding additionnel */
}

.colonne-droite .entry {
    display: flex; /* Active le modèle Flexbox pour h3 et h4 */
    align-items: flex-start; /* Aligne les textes en haut */
    gap: 10px; /* Ajoute un espace entre h3 et h4 */
    /* Ajoute un espace entre chaque ligne */
}

.colonne-droite h4 a {
    color: white; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement */
     /* Met en gras */
}

.colonne-droite h4 a:hover {
    color: grey; /* Change la couleur au survol */
    text-decoration: underline; /* Ajoute un soulignement au survol */
}

@media (max-width: 768px) {
    .conteneur {
        flex-direction: column; /* Empile les colonnes l'une sur l'autre */
        gap: 20px; /* Ajoute un espace entre les colonnes */
    }

    .colonne-gauche,
    .colonne-droite {
        max-width: 100%; /* Chaque colonne prend toute la largeur */
        flex: none; /* Supprime les proportions de flex */
    }

    .colonne-gauche {
        margin-bottom: 40px; /* Ajoute un espace sous la colonne gauche */
        text-align: justify; /* Justifie le texte pour la version mobile */
    }
    
    .header {
        padding: 2% 4.2% 0% 4.2%;
    }

    .colonne-gauche h1 {
        padding-right: 0px;
        text-align: left;
    }
}