/* Fichier styles.css */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
/* Fichier styles.css */

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f8f0de;
}

header {
    padding: 20px 0;

}

.header-container {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    position: relative;

}

.header-title-container {
    flex: 1;
    display: left;
    justify-content: center;
}

.header-imagefleche {
    height: 40px; /* Ajustez la taille selon votre image */
    margin-left: auto; /* Pousse l'image vers la droite */
    padding-right: 2vw; /* Ajuste la distance de l'image par rapport au côté droit */
}

header h1 {
    font-size: 5em;
    margin: 0;
    font-family: "Abril Fatface", serif;
    font-weight: bold; /* Applique le style en gras */
    color: #4d3f28;
    position: relative;
    z-index: 1; /* Assure que le texte est au-dessus de tout autre contenu */
    padding-left : 5vw;
}

h2 {
    font-size: 1.4em;
    margin: 10px 0 0 0;
    font-family: 'Lexend Mega', sans-serif;
    color: #000000; /* Couleur du texte du lien */
    padding-left : 5vw;
    padding-right : 0vw;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: left;
}

p {
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    color: #000000; /* Couleur du texte du lien */
    padding-left : 5vw;
    padding-right : 5vw;
    padding-top: 0px;
    padding-bottom: 10px;
    text-align: left;
    line-height: 2.5; /* Définit un interligne de 1,5 fois la taille de la police */
}


.header-image {
    width:30vw;
    height: auto; /* Ajustez la taille selon votre image */
    margin-left: auto; /* Pousse l'image vers la droite */
    padding-right: 0vw; /* Ajuste la distance de l'image par rapport au côté droit */
    object-fit: contain; /* Conserve les proportions sans déformer l'image */
    align-self: flex-start; /* Place l'image en haut du conteneur */
    padding-top: 100px;
}



.intro-text p {
    font-size: 1.2em;
    margin: 0px 0;
}



ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.5em;
    text-align: center;
    color: #4d3f28;
    line-height: 2.5; /* Ajuste l'interligne */
}



.content-containers h1 {
    font-size: 5em;
    margin: 0;
    font-family: "Abril Fatface", serif;
    font-weight: bold; /* Applique le style en gras */
    color: #c8a287;
    position: relative;
    z-index: 1; /* Assure que le texte est au-dessus de tout autre contenu */
    line-height: 1; /* Définit un interligne de 1,5 fois la taille de la police */
    text-align: left;
    padding-left: 4vw;
}

.container h3 {
    font-size: 2em;
    margin-bottom: 10px;
    color : #c8a287;
    font-family: 'Lexend Mega', sans-serif;
}

.container p {
    font-size: 1em;
}

/* Style pour le conteneur "En savoir plus" */
.more-info {
    background-color: #c8a287;
    color: white;
    padding: 10px;
    border-radius: 30px;
    margin-top: 15px; /* Espace au-dessus du conteneur "En savoir plus" */
    cursor: pointer;
    border: 2px solid white; /* Ajoute un contour blanc */
    display: inline-block; /* Ajuste la largeur du conteneur au texte qu'il contient */
}

.more-info:hover {
    background-color: #FFFFFF; /* Change la couleur au survol */
}

.more-info p {
    margin: 0;
    font-size: 1em;
    color : #231f20;
    padding-left : 0px;
    padding-right : 0px;
    padding-top: 0px;
    padding-bottom: 0px;

}

/* Style pour ajouter une ligne entre chaque élément <li> */
.container ul li {
    padding: 10px 0; /* Ajoute un peu d'espace autour de chaque élément */
    border-bottom: 1px solid #ccc; /* Ajoute une ligne de séparation sous chaque élément */
}

.container ul li:last-child {
    border-bottom: none; /* Retire la ligne sous le dernier élément */
}

/* Style pour le conteneur des h4 */
.text-right {

    text-align: left; /* Justifie le texte */
    margin: 20px; /* Ajoute un peu d'espace autour du conteneur */
}

.text-right p {
    margin: 0; /* Supprime les marges par défaut des éléments h4 */
    padding: 0px 0; /* Ajoute un peu d'espace vertical entre les éléments */
    color: #000000; /* Couleur du texte */
    font-family: 'Poppins', sans-serif;
    font-size: 0.8em; /* Taille du texte en petit */
    line-height: 1; /* Définit un interligne de 1,5 fois la taille de la police */
}

/* Supprimer le soulignement des liens et définir la couleur */
a {
    text-decoration: none; /* Enlève le soulignement */
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.2em; /* Taille du texte en petit */
}




/* Style pour le conteneur principal */
.content-containers {
    display: flex;
    justify-content: space-between; /* Espace égal entre les conteneurs */
    align-items: flex-start; /* Aligne les conteneurs en haut */
    margin-top: 20px; /* Espace au-dessus de la section */

}


/* Style pour la section des titres */
.title-container {
    display: flex;
    flex-direction: column; /* Empile les h1 verticalement */
    align-items: center; /* Centre les titres horizontalement */
    margin-bottom: 20px; /* Ajoute un espace en dessous des h1 */
}


/* Style pour chaque conteneur */
.container {
    flex: 1; /* Chaque conteneur occupe une largeur égale */
    padding: 0 10px; /* Espacement horizontal entre les conteneurs */
    margin-top: 150px; /* Décale le conteneur vers le haut */
}

/* Style spécifique pour décaler l'image centrale vers le haut */
.center-container {
    margin-top: 30px; /* Décale le conteneur vers le haut */
}



.content-image-parution {
    width: 20vw; /* L'image prend toute la largeur du conteneur */
    height: 50%; /* L'image prend toute la hauteur du conteneur */
    /*object-fit: cover; /* L'image remplit le conteneur en conservant ses proportions */
    border-radius: 10px; /* Arrondit les coins de l'image */
}

/* Style pour les images à l'intérieur des conteneurs */
.content-image-video {
    max-width: 50vw; /* Ajuste l'image à la largeur maximale du conteneur */
    height: auto; /* Conserve les proportions de l'image */
    border-radius: 10px; /* Arrondit les coins de l'image */
}

/* Style pour centrer les éléments dans la section des images */
.image-container-flex {
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    margin-top: 20px; /* Espace au-dessus de l'image */
}

/*SPECIFIQUE PAGE REDACTION*/


/* Style pour le conteneur principal */
.content-containers-parution {
    display: flex;
    justify-content: space-between; /* Espace égal entre les conteneurs */
    align-items: flex-start; /* Aligne les conteneurs en haut */
    margin-top: 20px; /* Espace au-dessus de la section */
    padding-bottom: 80px;
}

/* Style pour chaque conteneur */
.container-parution-text {
    flex: 1; /* Chaque conteneur occupe une largeur égale */
    padding: 0 10px; /* Espacement horizontal entre les conteneurs */
    margin-top: 0px; /* Décale le conteneur vers le haut */
    background-color: #fffbf5;
    color : #4d3f28;
    font-family: 'Lexend Mega', sans-serif;
}

/* Style pour les images à l'intérieur des conteneurs */
.content-image {
    width: 30vw; /* L'image prend toute la largeur du conteneur */
    height: 50%; /* L'image prend toute la hauteur du conteneur */
    /*object-fit: cover; /* L'image remplit le conteneur en conservant ses proportions */
    border-radius: 10px; /* Arrondit les coins de l'image */
}

/* Style pour le conteneur principal */
.content-containers-parution {
    display: flex;
    justify-content: space-between; /* Espace égal entre les conteneurs */
    align-items: center; /* Aligne les conteneurs en haut */
    margin-top: 20px; /* Espace au-dessus de la section */
    gap: 20px; /* Ajoute un espace de 20px entre chaque .container-parution-text */
    font-size: 0.6em; /* Taille du texte en petit */

}

/* Style pour chaque conteneur d'image */
.container-parution {
    flex: 1; /* Chaque conteneur occupe une largeur égale */
    text-align: center; /* Centre l'image horizontalement */
}
/* Afficher un élément uniquement pour les petits écrans*/
.show-on-small {
    display: none;
  }
/* Styles pour les téléphones */
@media (max-width: 580px) {
    /* Changement de la disposition en colonnes pour les petits écrans */
    header h1 {
        font-size: 1.8em;
    }

    .content-containers h1 {
        font-size: 2em;
    }
    header h2 {
        font-size: 0.8em;
        padding-top: 8em;
    }

    p {
        font-size: 0.7em;
    }
    .container-parution-text {
        font-size: 0.6em;
    }
    /* Masquer un élément pour les petits écrans*/
    .hide-on-small {
        display: none;
    }
    /* Afficher un élément uniquement pour les petits écrans*/
    .show-on-small {
        display: block;
    }

    .text-right p {
        font-size: 0.5em; /* Taille du texte en petit */
     /* Style pour les images à l'intérieur des conteneurs */
    }