/* ------------------------------------------------
Style CSS
---------------------------------------------------*/


/**************************************************
CSS General
***************************************************/

/* RESET */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

button,
input,
textarea {
    outline: none;
    border: none;
    font-family: inherit;
}

body {
    max-width: 100vw; /* 100% la taille de l'ecran */
    font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif; 
    padding-top: 85px; /* Decalle tous la page de 60 px ver le bas (menu fixe en haut) */
    font-size: 20px;
    background-color: #E7EAE8;
    /*cursor: url("../images/auguste_image.jpg") 2 2, pointer;*/
    /*cursor: crosshair;*/
    cursor: default;
    /*cursor:  url(./images/auguste_image.jpg) 2 2, pointer;*/
}

#page {
    position: absolute;

}

/* GENERAL */
h2{
    display: inline-block;
    padding: 0 10px 0 0;
    margin-bottom: 50px;
    font-size: 50px;
    font-weight: bold;

}
/*
section {
    width: 60%;
    margin: 0 auto;
    padding-top: 100px;
}
*/
/* Bouton */
.btn1 {
    cursor: pointer;
    display: block;
    width: max-content;
    text-decoration: none;
    padding: 10px 60px;
    border-radius: 30px;
    background-color: rgb(67, 67, 201);
    color: #ffffff;
    margin: 30px auto;
    transition: all 0.3s ease;
}

.btn1:hover {
    background-color: rgba(67, 67, 201, 0.768);
    color: rgba(255, 255, 255, 0.816);
}

/* UTILITAIRE */
.invisible {
    visibility: hidden;
}

.dnone {
    display: none;
}

/* ------------------------------------------------
Scolling de la page en douceur
span anchor pour le calage de la page
---------------------------------------------------*/
html{
    scroll-behavior: smooth;
    /*scroll-padding: 10rem;*/
}

.anchor{
    display: block;
    height: 115px; /*même hauteur*/
    margin-top: -115px; /*même hauteur*/
    visibility: hidden;
  }


/**************************************************
CSS Navigation
***************************************************/

/* ------------------------------------------------
Le menu du haut
---------------------------------------------------*/
#menu {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
}

#MMI{
    text-align: right;
    color: white;
    padding-right: 10px;
    background-color: rgb(0, 0, 0);
}

nav {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 60px;
    color: inherit;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 30px;*/
}

#logo {
    position: relative;
    margin-left: 20px;
    padding-bottom: 20px;
    top:-30px;
}
#logo img {
    width: 90px;
}
#menu1 {
    width: 570px;
    text-align: right;
}

#menu1 ul {
    display: flex;
    right: 0px;
    width: 80%;
    height: 100%;
    /*width: min-content;*/ /* Minimum de largeur possition */
    list-style: none;
    align-items:end;
    /*margin: auto;*/
    margin-right: 20px;
    padding-bottom: 5px;
    right: 0px;
}

#menu1 ul li {
    display: flex;
    justify-content: center;
    align-items: end;
    margin-right: 20px;
}

#menu1 a {
    text-decoration: none;
    color: #FFFFFF;
}

body nav ul li a:visited,
body nav ul li a:link,
body nav ul li a:active
{
    color:inherit;
}

/* ------------------------------------------------
Le sous menu du haut
---------------------------------------------------*/
#menu2 {
    height: 25px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.3); /* ombre*/
    text-align: center;
}

#menu2 ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

#menu2 a {
    text-decoration: none;
    color: #FFFFFF;
    margin-left: 20px;
    margin-right: 20px;
}

#menu2 a:visited,
#menu2 a:link,
#menu2 a:active
{
    color: #FFFFFF;
}

/**************************************************
CSS Section
***************************************************/

#page {
    position: relative;
    top: -100px;
}

/* ------------------------------------------------
Box Horisontal 3 bloc
---------------------------------------------------*/
.BoxH3 {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
}

.TBoxH3 {
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 32%;
    padding: 10px;
}

.BoxH3 img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}

.BoxH3 div.BoxH3-T {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* aligne le texte au centre avec les flex */

    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

}

/* ------------------------------------------------
Box Horisontal 2 bloc
---------------------------------------------------*/
.BoxH2 {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
}

.TBoxH2 {
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 49%;
    padding: 10px;
}

.BoxH2 img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}

.BoxH div.BoxH2-T {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* aligne le texte au centre avec les flex */

    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

}

.BoxH2 div.BoxH2-T p {
    padding-top: 10px;
}

.no-height {
    height: unset !important;
}

/* ------------------------------------------------
Box Horisontal Petit
---------------------------------------------------*/
.BoxHP {
    display: flex;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;

    height: 230px;

    width: 80%;
    /*height: 205px;*/
    margin: 0 auto;
    margin-top: 20px;
}

.BoxHP div.BoxHP-IMG {
    width: 40%;
}

.BoxHP div.BoxHP-IMG img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.BoxHP div.BoxHP-T {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* aligne le texte au centre avec les flex */

    width: 60%;

    padding-left: 60px;
    padding-right: 60px;

}

/* ------------------------------------------------
Box Horisontal Grand
---------------------------------------------------*/
.BoxHG {
    display: flex;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;

    height: 370px;

    width: 80%;
    /*height: 205px;*/
    margin: 0 auto;
    margin-top: 20px;
}

.BoxHG div.BoxHG-IMG {
    width: 40%;
}

.BoxHG div.BoxHG-IMG img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.BoxHG div.BoxHG-T {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* aligne le texte au centre avec les flex */

    width: 60%;

    padding-left: 60px;
    padding-right: 60px;


}

.BoxHG div.BoxHG-T p {
    padding-top: 10px;
}


/* Reponsive Box Section */
@media screen and (max-width: 1000px) {
    .BoxHP {
        width: 90%;
    }

    .BoxHP div.BoxHP-T {
        padding-left: 30px;
        padding-right: 30px;
    }

    .BoxH3 {
        width: 90%;
    }

    .BoxH2 {
        width: 90%;
    }
    .BoxHG div.BoxHG-T {
        padding-left: 30px;
        padding-right: 30px;
    }
    #contact #Langage {
        display: flex;
        flex-direction: column;
    }

}

/* Merde */
.BoxHP-T p {
    margin-bottom: 20px;
}

/*
.BoxHP img {
    width: 100%;
    height: 100%;
}
*/

/* Annimation */
.zoom-inout {
    transition: transform .2s;
    /* Animation */
}

.zoom-inout:hover {
    /* A linfini
    animation: zoom-inout 1s ease infinite; 
    */
    /* 
    animation: zoom-inout 1s ease;
    */

    transform: scale(1.05);

}

@keyframes zoom-inout {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.05, 1.05);
    }

    100% {
        transform: scale(1, 1);
    }
}




/* ------------------------------------------------
Formulaire
---------------------------------------------------*/
section#contact {
    padding-bottom: 100px;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

form {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: rgb(0, 0, 0, 0.07);
    padding: 30px 30px 0px 30px;
    margin-top: 50px;
}

form label {
    margin-bottom: 5px;
}

form input,
form textarea {
    margin-bottom: 25px;
    border-radius: 5px;
    padding: 10px 20px;
    border-bottom: 5px solid transparent;
    transition: all 0.3s ease;
}

form input::placeholder,
form textarea::placeholder {
    font-size: 16px;
    font-family: inherit;
}
/**************************************************
CSS Formulaire
***************************************************/

form textarea {
    height: 200px;
    margin-bottom: 25px;
}

form input:valid,
form textarea:valid {
    border-bottom: 5px solid rgb(44, 173, 48);
}

form input:focus:invalid,
form textarea:focus:invalid {
    border-bottom: 5px solid rgb(184, 14, 14);
}

form #Langage input {
    margin-left: 20px;
} 
form .titre {
    padding-top: 25px;
    margin-bottom: 20px;
}
form #heure_visite {
    height: 40px;
}

#contact p {
    margin-left: 105px;
}

/**************************************************
CSS Header
***************************************************/

/* ------------------------------------------------
Image entete
---------------------------------------------------*/
/*
header {
    height: 90vh;
    width: 100%;
}
*/
header #header_img {
    width: 100%;
    height: 100%;
    background-image: url("../images/aqueduc_face.jpg");
    background-position: center;
    background-size: cover;

    height: 90vh;
    width: 100%;
}

header #header_environnement {
    height: 130px;
}

header #header_parcours {
    height: 130px;
}

header #header_page {
    width: 80%;
    margin: 0 auto;
    font-size: 36px;

    padding-top: 40px;
    height: 180px;
}

header #header_formulaire {
    width: 60%;
    margin: 0 auto;
    font-size: 36px;

    padding-top: 40px;
    height: 180px;
}

/**************************************************
CSS Footer
***************************************************/

/* ------------------------------------------------
Footer
---------------------------------------------------*/
footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    background-color: #000;
    height: 100px;
}

#footer_logo img {
    width: 90px;
    padding-left: 20px;
}

#footer_social {
    display: flex;
}
footer label{ 
    vertical-align: middle;
}

/*------ ICON --------*/
#footer_social a {
    text-decoration: none;
    padding: 0 20px;
    display: block;
    text-align: center;
    /*margin-top: 10px;*/
}

.f_icon {
    font-size: 25px;
    color: #FFFFFF;
    transition: 0.3s;
}

.f_icon:hover {
    color: rgba(117, 121, 235, 0.71);
}

.f_text {
    font-size: 18px;
    color: #FFFFFF;
}

.f_icon_face {
    font-size: 40px;
    color: #0c13d3;
    margin-right: 10px;
}

/* ------------------------------------------------
Pointeur souris
---------------------------------------------------*/
#trailer {
    background-color: rgb(101, 101, 206);
    height: 20px;
    width: 20px;
    border-radius: 20px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10000;

    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
}
body:hover > #trailer {
    opacity: 0.9;
}




/* ------------------------------------------------
CSS Environement
---------------------------------------------------*/
.BoxHP-IMG iframe {
    width: 100%;
    height: 210px;

}


#titre_accueil {
    position: relative;
    top: 100px;
    font-size: 30px;
/*    left: 50%;
    transform: translateY(-50%);*/
    text-align: center;
}