@font-face {
    font-family: 'PicNicRegular';
    src: url('fonts/PicNic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplayRoman';
    src: url('fonts/NeueHaasDisplayRoman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    background-color: #f0f0f0; /* Uniformisation du fond pour les deux sections */
}

.page-container {
    display: flex; /* Diviser la page en deux colonnes */
    height: 100vh; /* Faire en sorte que la hauteur de la page prenne tout l'écran */
}

.left-section {
    flex: 0 0 30%; /* 30% de la largeur pour la partie gauche */
    padding: 30px;
    background-color: #f0f0f0; /* Couleur uniforme avec la partie droite */
    position: fixed; /* Partie gauche fixe */
    height: 100vh; /* Hauteur complète de la page */
    overflow: hidden; /* Empêche le défilement */
}

.right-section {
    flex: 1;
    margin-left: 30%;
    position: relative; /* Important pour positionner les éléments de manière absolue */
    background-color: #f0f0f0;
    height: 100vh;
    overflow-y: scroll;
}

.logo {
    font-family: 'PicNicRegular', sans-serif;
    font-size: 30pt;
    color: #666666;
    padding: 0;
    margin: 0;
}

/* Suppression des effets par défaut pour le lien du logo */
.logo-link {
    text-decoration: none; /* Supprimer le soulignement */
}

.logo-link:hover {
    text-decoration: none; /* Pas de changement au survol */
}

.custom-underline {
    width: 310px;
    height: 1px;
    background-color: #666666;
    margin-top: 15px;
    margin-left: 0px;
    position: relative;
}

.custom-underline-second {
    width: 310px;
    height: 1px;
    background-color: #666666;
    margin-top: 20px;
    position: relative;
}

/* Troisième trait */
.custom-underline-third {
    width: 1010px;
    height: 1px;
    background-color: #666666;
    margin-top: 90px; /* Aligner la hauteur avec le trait sous MRT */
    margin-bottom: 20px; /* Espace de 20px entre le trait et la première image */
    position: relative;
}

/* Correction du menu */
.menu ul {
    list-style-type: none; /* Supprimer les puces */
    padding: 0;
}

.menu li {
    margin-bottom: 10px;
}

.menu a {
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 18pt;
    line-height: 1.0;
    color: #666666; /* Couleur grise */
    text-decoration: none; /* Pas de soulignement */
    transition: font-family 0.3s ease;
}

.menu a:hover {
    font-family: 'PicNicRegular', sans-serif;
}

/* Positionnement des images */
.image-container {
    position: relative; /* Relative pour que les images puissent être placées avec absolute */
    width: 100%;
    height: 100%;
}

/* Style pour regrouper chaque image et sa légende */
.image-wrapper {
    position: relative;
    margin-bottom: 30px; /* Espace entre chaque image et sa légende */
    text-align: left; /* Centrer la légende sous l'image */
}

.custom-image {
    width: 95.5%; /* Les images prennent toute la largeur du conteneur */
    height: auto;
    display: block;
    margin-bottom: 30px; /* Espace entre l'image et la légende */
}

/* Style des légendes sous les images */
.image-caption {
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 18pt;
    line-height: 1.0;
    color: #666666;
}

/* Espace supplémentaire après la dernière image */
.image-bottom-space {
    height: 10px; /* Ajuste cette hauteur pour contrôler l'espace après les images */
}

/* Titre à droite, position modifiable */
.title-right {
    font-family: 'PicNicRegular', sans-serif;
    font-size: 30pt;
    color: #666666;
    position: absolute; /* Utilisation de positionnement absolu pour précision */
    right: 40px; /* Ajuster ici pour déplacer à droite */
    top: 20px; /* Ajuster ici pour positionner verticalement */
}

/* Style pour le texte principal, ajusté à la largeur du trait */
.content-text {
    width: 965px; /* Correspond à la largeur du troisième trait */
    margin-left: auto;
    margin-right: auto;
    padding-left: -110; /* Pas de padding à gauche */
    padding-right: 0; /* Pas de padding à droite */
    text-align: justify; /* Justifier le texte */
}

.content-text p {
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 18pt; /* Même taille que le menu */
    line-height: 1.3; /* Même interlignage que le menu */
    color: #666666; /* Même couleur que le menu */
    margin-bottom: 20px; /* Espacement entre les paragraphes */
    text-align: justify;
    position: relative;
    top: 10px; /* Ajuste cette valeur pour déplacer verticalement */
    margin-left: -37px; /* Ajuste cette valeur pour déplacer horizontalement */

/* Style pour le lien actif (texte en PicNic) */
.menu a.active {
    font-family: 'PicNicRegular', sans-serif; /* Police Picnic pour le lien actif */
}