body {
    margin: 0 auto;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #1f1f1f ;
    color: antiquewhite;
}

.containerh {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100%;
}

main {
    width: 1080px;
    margin: 0 auto;
}

/*----------------------------------------------------*/

#montableau {
    color: white;
}

/* Styles pour l'en-tête du DataTable */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper thead th {
    color: white; /* Changer la couleur du texte */
}
.dataTables_wrapper {

    margin-top: 20px;
}

/* Styles pour la barre de pagination du DataTable */
.dataTables_info,
.dataTables_paginate,
.dataTables_paginate .paginate_button {
    color: white; /* Changer la couleur du texte de la barre d'information (Affichage de 1 à 10 sur 50 entrées) et des boutons de pagination */
}
.dataTables_info,
.dataTables_paginate,
.dataTables_paginate .paginate_button {
    color: white !important; /* Ajouter !important pour forcer l'application du style */
}

/*-------------------------------------------------*/
nav {
    position: relative;
    left: 20%;
    bottom: 100px;
    padding: 10px;
    background-color: #333;
    border-radius: 8px;
}


#Titre_accueil {
    position: absolute;
    bottom: 400px;
    left: 180px;
    color:antiquewhite;
    width: 30%;
    font-family: Exo;
}



ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

li {
    margin-right: 20px;
}

a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

a:hover {
    color: #ffd700; /* Couleur au survol */
}

nav a.active {
    color: #ffd700;
}

#Photo_accueil{

    text-align: center;

}



header {
    display: flex;
    background-image: url("../images/background_header.png");
    background-size: cover; /* Assure que le fond d'écran couvre toute la zone */
    background-repeat: no-repeat; /* Empêche la répétition du fond d'écran */
}

/* lorem accueil */
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100%;
}

.elem1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    column-gap: 2rem ;
    width: 70%;
    background-color: #1f1f1f;
    color: rgb(255, 255, 255);
    height: 100%;
}

.container p, h1 {
    margin-left: 20px;
    margin-right: 10px;
}

.container2{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100%;
}

.container2 p, h1 {
    margin-left: 20px;
    margin-right: 10px;
}


.elem2 {
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    background-image: url('../images/photo_accueil.jpeg');
    background-size: cover;
    overflow: hidden; /* Ajout de cette propriété */
}


.elem4{
    display: flex;
    justify-content: center;
    flex-direction: column;
    column-gap: 2rem ;
    width: 70%;
    background-color: #1f1f1f;
    color: rgb(255, 255, 255);
    height: 100%;
}


.elem3 {
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    overflow: hidden; /* Ajout de cette propriété */
}

.elem3 img{
    height: inherit;
}

.elem2 img{
    height: inherit;
}

.video-container{
    margin: 0; 

}

video {
    width: 100%;
    height: auto;
}

h1{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

p{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1f1f1f;
    padding: 10px;
    color: white;
}

.footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: #ffd700;
}

.center {
    flex-grow: 1;
    text-align: center;
}


#BODYTAB{
    width: 100%}

    
#main{
    width: 1080px;
}

/*--------------------------------------------*/

/* Dans votre fichier CSS */
#gros-truc {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    max-width: 1080px; /* La largeur maximale est de 1080px */
    margin: 0 auto; /* Pour centrer horizontalement */
}

#formulaire {
    width: 400px;
    display: flex;
    flex-direction: column;
    border: 4px solid #f0e68c; /* Ajoutez une bordure beige avec une épaisseur de 5px */
    background-color: #1f1f1f; 
    padding: 50px;
    border-radius: 10px; /* Ajoutez un rayon de bordure de 10px */
    margin: 10px; /* Ajoutez une marge autour du formulaire */
}

#en-tête {
    display: flex;
    flex-direction: row;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.test {
    display: flex;
    flex-direction: column;
}

label {
    margin: 18px 0 3px 0;
    color: white;
}

input,
select {
    background-color: #333; /* Fond des champs de saisie */
    color: white; /* Couleur du texte dans les champs de saisie */
    border: 1px solid #444; /* Bordure des champs de saisie */
    padding: 8px; /* Marge intérieure des champs de saisie */
    margin-bottom: 10px; /* Espacement entre les champs de saisie */
}

textarea {
    background-color: #333;
    color: white;
    border: 1px solid #444;
    padding: 8px;
    margin-bottom: 10px;
    height: 80px; /* Réglez la hauteur de la zone de texte à 80px (4 lignes à 20px chacune) */
}

input[type="submit"] {
    background-color: #4CAF50; /* Couleur de fond pour le bouton Envoyer */
    color: white; /* Couleur du texte pour le bouton Envoyer */
    cursor: pointer; /* Curseur indiquant que le bouton est cliquable */
}

input[type="submit"]:hover {
    background-color: #45a049; /* Couleur de fond au survol du bouton Envoyer */
}
/*----------------------------------*/
.gallery {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.aya {
display: flex;
width: 250px;
flex-wrap: wrap;
margin-top: 20px;
}

.aya img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centrer l'image dans son conteneur */
}

#form_img {
    margin: 40px auto;
    display: flex;
    background-color: #333;
    border-radius: 8px;
    width: 550px;
    color: antiquewhite;
}

#label_img {
    margin: auto;
    padding: 10px;
}

#imput_img{
    margin-top: 15px;
    margin-right: 40px;
}


#titre-accueil {
    text-align: center;
    margin-top: 20px;
}

/* Général */
.partner-container {
    margin: 20px auto;
    max-width: 1080px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.partner-card {
    text-align: center;
    margin: 5px;
    position: relative;
}

/* Image */
.partner-card img {
    max-width: 300px;
    height: auto;
    border-radius: 30%;
    border: 3px solid #3498db;
}

.partner-info img {
    max-width: 150px;
    height: auto;
    border-radius: 30%;
    border: 3px solid #3498db;
    transition: filter 0.3s;
}

.partner-info:hover img {
    filter: grayscale(60%);
}

/* Titre */
.partner-card p {
    margin-top: 10px;
    font-weight: bold;
    color: antiquewhite;
}

/* Bouton "En savoir plus" */
.en-savoir-plus,
.show-description-btn {
    display: block;
    text-align: center;
    color: #3498db;
    text-decoration: none;
    margin-top: 5px;
    transition: color 0.3s;
}

.en-savoir-plus:hover,
.show-description-btn:hover {
    color: #144261;
}

/* Description (par défaut cachée) */
.partner-card .description,
.partner-description {
    display: none;
    color: antiquewhite;
    margin-top: 10px;
    font-size: 14px;
    transition: opacity 0.3s, font-size 0.3s;
    text-align: center;
}

/* Description visible lorsqu'activée */
.partner-card .description.show,
.partner-card:hover .partner-description {
    display: block;
    opacity: 1;
    font-size: 12px;
    pointer-events: auto; /* Permet les interactions avec le texte */
}


/* Bouton "Afficher la description" */
.show-description-btn {
    background-color: #3498db;
    color: antiquewhite;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.show-description-btn:hover {
    background-color: #144261;
}

/* Règles de média query pour la responsivité */
@media screen and (max-width: 768px) {
    .partner-info img {
        max-width: 100%;
    }

    .partner-card .description {
        font-size: 10px;
    }
}

/* REFERENCES --------------------------------------------------*/

body {
    font-family: 'Arial', sans-serif;
    color: #333;
}

main {
    width: 1080px;
    margin: 0 auto;
}

h3 {
    font-family: 'Exo', sans-serif;
    color: antiquewhite;
    margin-left: 80px;
}

h1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: antiquewhite;
}

.photo-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    z-index: -9999;
}

.photo_ref {
    width: 400px;
    height: auto;
    margin-right: 20px;
}

.link-ref {
    font-weight: bold;
    color: #0066cc;
    text-decoration: none;
}

.link-ref:hover {
    text-decoration: underline;
}

.description {
    max-width: 600px;
    z-index: 30;
    color: antiquewhite;
}

/* Ajout pour ajuster l'espace autour de la vidéo */
#video-container_ref {
    width: 400px;
    margin-right: 20px;
}

/* Ajout pour décaler légèrement les images vers la droite */
.photo-container img, #video-container_ref video {
    margin-left: 60px;
}

.cc{
    color: white;
    margin-left: 110px;
}