/* Reset des marges et des paddings pour tous les éléments */
* {
    margin: 0;
    padding: 0;
}

/* Style général du body */
body {
    background-color: #000000;
    font-family: TT-Octosquares-Trial-Bold;
    color: white;
}

/* Style et position pour les éléments avec la classe "expli" */
.expli {
    background-color: #333;
    padding-top: 10px;
    padding-bottom: 50px;
    margin-top: 10%;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 10px;
}

/* Style et position pour les éléments avec la classe "creator" */
.creator {
    background-color: #333;
    padding-bottom: 30px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 10px;
}

/* Cacher span */
span {
    visibility: hidden;
}

/* Définition des polices */
@font-face {
    font-family: ethnocentric-rg-it;
    src: url(Font/ethnocentric-rg-it.woff);
    font-weight: bold;
}

@font-face {
    font-family: Dune_Rise_1;
    src: url(Font/Dune_Rise_1.woff);
    font-weight: bold;
}

@font-face {
    font-family: TT-Octosquares-Trial-Bold;
    src: url(Font/TT-Octosquares-Trial-Bold.woff);
    font-weight: bold;
}

/* Style et position pour h1 de "banniere" */
.banniere h1 {
    font-family: ethnocentric-rg-it;
    text-align: center;
    font-size: 4rem;
    margin-bottom: 35px;
    margin-top: 30px;
}

/* Image flou de fond pour "banniere" */
.banniere::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/Accueil.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(5px);
    z-index: -1;
}

/*********BARRE DE NAVIGATION********/

/* Style et position pour la barre de navigation */
.navbar {
    background-color: #333;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Style et position pour les éléments dans "container" */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    font-size: large;
    text-align: center;
    font-family: Dune_Rise_1;
}

/* Style et position pour les liens dans "container" */
.container a {
    list-style-type: none;
    text-decoration: none;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Style du logo dans "container" */
.container .logo {
    font-family: ethnocentric-rg-it;
    font-size: xx-large;
}

/* Style et position pour les ul de la barre de navigation */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Style et position pour les li de la barre de navigation */
nav ul li {
    margin: 0 10px;
}

/* Style et position pour les liens de la barre de navigation */
nav ul li a {
    text-decoration: none;
    color: #fff;
    transition: 0.1s ease;
}

/* effet pour les liens de la barre de navigation */
nav ul li a:hover {
    color: #27d86c;
    border: #27d86c solid 2px;
    border-radius: 5px;
    padding-top: 5px;
    padding-left: 2px;
    padding-right: 2px;
    box-shadow: 10px 5px 5px rgba(39, 216, 108, .50);
}

/* Position pour "content" */
.content {
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Barre de progression */
#progres {
    height: 10px;
    width: 0;
    /* Largeur initiale à 0 */
    border-radius: 0px 50px 50px 0px;
    position: fixed;
    background: linear-gradient(to right, #27d86c, #26caf8);
    transition: width 0.3s ease;/
}



/*********BLOCS********/

/* Style et position pour les éléments dans "bloc1" */
.bloc1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: x-large;
    gap: 3rem;
    margin-bottom: 2rem;

}

/* Position pour le paragraphe dans "bloc1" */
.bloc1 p {
    width: 50%;
    margin: 20px;
}

/* Style et position pour l'image dans "bloc1" */
.bloc1 .img {
    background-image: url(images/VRillustration1.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    transition: 0.3s ease;
}


/* Style pour effet de zoom  sur l'image de "bloc1" */
.bloc1 .img:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);

}

/*********************************/

/* Style et position pour les éléments dans "bloc2" */
.bloc2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: x-large;
    gap: 3rem;
    margin-bottom: 3rem;

}

/* Position pour le paragraphe dans "bloc2" */
.bloc2 p {
    width: 50%;
    margin: 20px;
}

/* Style et position pour l'image dans "bloc2" */
.bloc2 .img {
    background-image: url(images/MapBuilding.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    transition: 0.3s ease;
}

/* Style pour effet de zoom  sur l'image de "bloc3" */
.bloc2 .img:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);

}

/*********************************/

/* Style et position pour les éléments dans "bloc3" */
.bloc3 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: x-large;
    gap: 3rem;
    margin-bottom: 3rem;

}

/* Position pour le paragraphe dans "bloc3" */
.bloc3 p {
    width: 50%;
    margin: 20px;
}

/* Style et position pour l'image dans "bloc3" */
.bloc3 .img {
    background-image: url(images/MH-forest.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    transition: 0.3s ease;
}

/* Style pour effet de zoom  sur l'image de "bloc3" */
.bloc3 .img:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);

}

/*********************************/

/* Style et position pour les éléments dans "bloc4" */
.bloc4 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: x-large;
    gap: 3rem;
    margin-bottom: 3rem;

}

/* Position pour le paragraphe dans "bloc4" */
.bloc4 p {
    width: 50%;
    margin: 20px;
}

/* Style et position pour l'image dans "bloc4" */
.bloc4 .img {
    background-image: url(images/VRillustration3.png);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    transition: 0.3s ease;
}

/* Style pour effet de zoom  sur l'image de "bloc4" */
.bloc4 .img:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);

}

/*********************************************/

/* Style et position pour les éléments dans "bloc5" */
.bloc5 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: x-large;
    gap: 3rem;
    margin-bottom: 2rem;

}

/* Position pour le paragraphe dans "bloc5" */
.bloc5 p {
    width: 50%;
    margin: 20px;
}

/* Style et position pour l'image dans "bloc5" */
.bloc5 .img {
    background-image: url(images/mp.jpg);
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    transition: 0.3s ease;
}

/* Style pour effet de zoom  sur l'image de "bloc5" */
.bloc5 .img:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);

}

/* Masque pour effet de zoom */
#overflow {
    border: black solid 5px;
    border-radius: 15px;
    overflow: hidden;
    width: 30%;
}

/* Masque pour effet de zoom sur image profil */
#overflow2 {
    border: black solid 5px;
    border-radius: 50%;
    overflow: hidden;
    width: 20%;
}

/**************PARTENAIRES**************/


/* Style et position du titre de "partners" */
.partners-title {
    text-align: center;
    font-size: xx-large;
    margin: 20px;
}

/* Style et position des éléments de "partners" */
.partners-postition {
    display: flex;
    justify-content: center;
}

/* Style et position des éléments de "partners" sauf le h2 */
.partners:not(h2) {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 80%;
    height: 100%;

    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 0;
    padding-left: 0;
    border: white solid 5px;
    border-radius: 15px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5rem;
}

/* Style et position de l'image de "partners" */
.partners img {
    width: 5%;
    height: 5%;
    padding: 0;

}


/*********BLOC LIEN EXTERNE********/


/* Style et position des éléments de "autre" */
.autre {
    width: 80%;
    margin: 0 auto;
}

/* Style et position de la boite de texte "box" */
.box {
    border: #000000 solid 5px;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}

/* Style et position du h3 de "autre" */
.autre h3 {
    margin-top: 25px;
    margin-bottom: 0;
    text-align: center;
    font-size: 2rem;
    color: rgb(0, 0, 0);
}

/* Style et position du h4 de "autre" */
.autre h4 {
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
    font-size: 2rem;
    color: rgb(0, 0, 0);
}

/* Style et position des paragraphes de "autre" */
.autre p {
    margin-top: 5px;
    padding-bottom: 10px;
    text-align: center;
    font-size: medium;
    color: rgb(0, 0, 0);
    border-bottom: black solid 5px;
}

/* Style général pour les boutons */
button {
    font-family: TT-Octosquares-Trial-Bold;
    width: 160px;
    background: transparent;
    border: rgb(0, 0, 0) solid 3px;
    color: rgb(255, 255, 255);
    margin-top: 10px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    font-size: 1.5rem;
    transition: all .2s;
    z-index: 2;

}

/* Style pour l'effet de couleur des boutons */
button::after {
    content: "";
    width: 400px;
    height: 400px;
    background: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
    position: absolute;
    top: -10px;
    left: -120px;
    z-index: -1;
    transition: all .5s;
}

/* transformation pour les boutons au survol*/
button:hover::after {
    transform: rotate(150deg);
}

/* transformation pour les boutons au survol, le retour*/
button:hover {
    transform: translate(0, -6px);
    box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, .50), -10px 10px 25px 0 rgba(39, 200, 255, .50);
}

/************MENTIONS LEGALES***************/

/* Style et position de l'élément dépliant "details" */
details {
    font-family: TT-Octosquares-Trial-Bold;
    text-align: center;
    width: 90%;
    background: white;
    border: rgb(0, 0, 0) solid 3px;
    color: rgb(0, 0, 0);
    margin: 0 auto;
    padding: 10px 20px;


    position: relative;
    overflow: hidden;
    border-radius: 20px;
    font-size: 1.5rem;
    transition: all .2s;
    z-index: 2;

}

/* transformation du fond pour "details" au clique */
details[open]::after {
    opacity: 0;
}

/* Style effet de couleur de "details" */
details::after {
    content: "";
    width: 2100px;
    height: 2100px;
    background: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
    position: absolute;
    top: -410px;
    left: -210px;
    z-index: -1;
    transition: all .5s;
}

/* Style effet de couleur de "details" au survol */
details:hover::after {
    transform: rotate(150deg);
}

/* Style effet de couleur de "details" au survol, 2*/
details:hover {
    transform: translate(0, -6px);
    box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, .50), -10px 10px 25px 0 rgba(39, 200, 255, .50);
}

/* Style et position de la table de liens */
table {
    color: black;
    border: #000000 solid 5px;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    font-size: medium;
}

/* Position des td du tableau */
td {
    padding-right: 20px;
    padding-bottom: 20px;
}


/*********BAS DE PAGE*********/

/* Style et position général pour le pied de page */
footer {
    display: flex;
    flex-direction: column;
    color: #000;
}

/* Style pour les liens dans le pied de page */
footer a {
    color: black;
    text-decoration: none;
}

/* Style au survol des liens dans le pied de page */
footer a:hover {
    text-decoration: underline;
}

/* Style et position pour le "container" du pied de page */
.foot-container {
    background-color: #ccc;
    border: #000 solid 5px;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    margin-top: 100px;
}

/* Style pour le h1 de "contacts" dans le pied de page */
.contacts h1 {
    font-family: ethnocentric-rg-it;
    font-size: x-large;
}

/* Style et position général pour les liens dans le pied de page */
.contacts,
.events,
.Category,
.About {
    flex: 1;
    max-width: 300px;
    padding: 10px;
}

/* Style et position général pour les liens dans le pied de page */
.contacts,
.events,
.Category {
    margin-right: 10px;
    border-right: #000 solid 5px;
}

/* Style pour les médias queries à une largeur maximale de 910px */
@media (width <=910px) {
  /* Réduit la taille de la police des éléments de la liste dans le conteneur */
    .container li {
        font-size: 1rem;
    }
/* Cache le logo dans le conteneur */
    .container .logo {
        display: none;
    }
/* Ajuste l'espacement de "reservation" */
    .reservation {
        gap: 20px;
    }

}

/************************************/

/* Style pour les médias queries à une largeur maximale de 1177px */
@media (width <=1177px) {

    /* Change l'orientation des éléments dans le bloc5 */
    .bloc5 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: x-large;
        gap: 3rem;
        margin-bottom: 2rem;
    }
/* Ajuste la largeur des paragraphes dans le bloc5 */
    .bloc5 p {
        width: 80%;
        margin: 20px;
    }
/* Ajuste le masque pour effet de zoom du profil */
    #overflow2 {
        border: black solid 5px;
        border-radius: 50%;
        overflow: hidden;
        width: 50%;
    }


}

/* Style pour les médias queries à une largeur maximale de 1550px */
@media (width <=1550px) {
    /* Ajuste les liens dans le tableau */
    table {
        font-size: x-small;
        overflow-wrap: anywhere;
    }


}