/* ******************************* */
/*   BLOC Moteur de Recherche      */ 
/* ******************************* */

.SeekEngine {
    background: url('../img/BackGround.jpg'); 
    background-repeat: no-repeat;
    background-size: 100%;
    height: 900px;
    position: relative;
    top:-120px;
    z-index: 4;
}
.SeekTitre {
    position:relative;
    align-items: start;
    Top: 370px;
    Left: 50%;
    width:40%;
    min-width: 650px;
    font-size: 60px;
    color:white;
    font-family: "Confortaa";
}
.SeekSecondTitre {
    font-family:"GoldenHopes"; 
    position:relative;
    width:370px;
    left: 400px;
    top: -90px;
    font-size: 100px;
}
.SeekInput {
    position:relative;
    Left: 20%; 
    width: 60%;
    top: 350px;
    Display:flex;
}
.tag-container-spec {
    position: relative;
    Left: 20%; 
    width: 60% !important;
    top: 370px;
}
.SeekButton {
    position:relative;
    margin-left: 5px;
    width: 190px; min-width: 170px; max-width: 190px;
    height: 70px; 
    background-color: var(--IYVertClair);
    border-style: none;
    cursor: pointer;
    font-family: "Confortaa";
    text-decoration: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 20px;
    color: var(--IYVertFonce);
    text-align: center;
    padding: 25px 0px;
} 
.SeekButton:hover {
    background-color: rgb(171, 209, 209);
    color: #185667;
}
#DropDownSpec {
    background-color: white;
    border-top-left-radius: 15px;
    position: absolute;
    Top: 160px;
    left: 50px;
    height: 380px;
    width: 25%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition:visibility 0.3s linear,opacity 0.3s linear, transform 0.5s linear;
}
#DropDownSpec iframe {
    border: none;
}
#DropDownLoc {
    background-color: white;
    border-top-right-radius: 15px;
    position: absolute;
    Top: 200px;
    left: 32%;
    height: 290px;
    width: 40%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition:visibility 0.3s linear,opacity 0.3s linear, transform 0.5s linear;
}
#DropDownLoc iframe {
    border: none;
}
.TitreDrop {
    width: 100%;
    Height: 50px;
    padding: 18px;
    font-weight: bold;
    text-align:left;
    background-color: var(--IYVertFonce);
    color: white;
    font-family: Confortaa, Helvetica, sans-serif;
}
.TitreDropGauche {
    border-top-left-radius: 15px;
}
.TitreDropDroite {
    border-top-right-radius: 15px;
}
.DropLocalise {
    font-family: Confortaa, Helvetica, sans-serif;
    width: 100%;
    Height: 50px;
    font-weight: bold;
    text-align:left;
    padding: 15px;
}
.DropLocalise:hover {
    background-color: #c7c7f5;
    cursor:pointer;
} 
.input-icons {
    width: 49%;
    background: white;
    height: 70px;
    display:flex;
} 
.SeekSep {
    width:5px;
}   
.localizeme {
    position: relative;
    background: white;
    padding: 25px;
    cursor: pointer;
    z-index: 2;
    height:70px;
}  
#tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 4;
    top: -45px;
}
.input-field{
    height: 70px !important;
    padding: 10px;
}
.icon {
    top: 22px !important;
    font-size: 25px !important;
}    

/* ******************************* */
/*   BLOC Intermediare            */ 
/* ******************************* */
.IntermHaut {
    position:absolute;
    margin-top: -200px;
    z-index: 5;
    background-color: white;
    width:60%;
    margin-left: 20%;
    box-shadow: -20px 20px 25px grey;
    padding:35px;
}
.IntermFond {
    position:absolute;
    margin-top: -70px;
    background-color: var(--IYVertClair);
    width:80%;
    margin-left: 10%;
    height: 300px;
    z-index: 2;
}
.InteMainTitre {
    font-size: 30px;
    Color: var(--IYVertFonce);
    font-family: "Confortaa";
}
.InteSecondTitre {
    Color: var(--IYVertFonce);
    font-family: "Confortaa";
    font-size: 35px;
    font-weight: bolder;
}
.InteTxt {
    font-family: "Confortaa";
    font-size: 15px;
}

/* ******************************* */
/*   BLOC Panneau Information      */ 
/* ******************************* */


.InfoPannel1 {
    position:relative;
    margin-top: 300px;
    width: 84%;
    left: 8%;
    height: 1050px;
}

.InfoPannelLine {
    Display: flex;
}
.InfoTitre {
    position: relative;
    background: url('../img/InfoBack0.jpg');
    background-size: cover;
    height: 600px;
    width: 66.4%;
    padding-left: 20px;
}
.InfoTitre .MainTitre {
    position:relative;
    color: white;
    font-size: 6vw;
    margin-top: 10%;
}
.InfoTitre .SecondTitre {
    color: white;
    position:relative;
    left:25px;
    font-size: 6.5em;
    top: -20px;
}
.InfoTexte {
    background-color: #185667;
    margin-left: auto;
    width: 33%;
    color: white;
    padding: 60px 20px;
    font-family: "Confortaa";
    font-size: 2.5vw;
    height: 600px;
}
.InfoTexte img {
    width: 85%;
    padding: 20px;
}
.InfoStat {
   position: relative;
   top: 10px;
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 10px;
}
.StatContainer {
    background-color:rgba(80, 190, 190, 0.5);
    width: 33.33%;
    height: 150px;
    opacity: 0.8;
    font-family: "Confortaa";
    font-weight: bold;
    Color: #185667;
    font-size: 1.5vw;
    padding: 50px 60px;
}
.InfoSSTitre {
    font-family:"GoldenHopes"; 
    font-size: 1.8vw;
    color: white;
}
.InfoBtn {
    height:50px !important;
    font-size: 0.35em !important;
    width: 300px !important;
}

/* ******************************* */
/*   BLOC POUR AFFICHAGE MOBILE    */ 
/* ******************************* */

@media screen and (max-width: 1280px) {
    .SeekEngine {
        background-size: cover;
        height:700px;
    }
    /* Moteur de recherche */
    .SeekTitre {
        Top: 270px;
        Left: 40%;
        width:40%;
        min-width: 500px;
        font-size: 45px;
    }
    .SeekSecondTitre {
        width:270px;
        left: 280px;
        top: -70px;
        font-size: 80px;
    }
    /* bloc info */
    .InfoBtn {
        width: 200px !important;
    }
    .InfoTitre .MainTitre {
        font-size: 4em;
        margin-top: 20%;
    }
    .InfoTitre .SecondTitre {
        font-size: 4em;
    }
    .InfoTexte {
        height: 500px;
    }
    .InfoTitre {
        height: 500px;
    }
    .InfoPannel1 {
        Height: 970px;
    }
    .SeekInput {
        Left: 5%; 
        width: 90%;
        top: 200px;
    }
    .IntermHaut {
        margin-top: -230px;
    }
    .IntermFond {
        margin-top: -90px;
    }
    .InfoPannel1 {
        margin-top: 240px;
    }
    #DropDownSpec {
        Top: 140px;
        height: 200px;
    }
    #DropDownLoc {
        Top: 140px;
        left: 32%;
        height: 150px;
    }
    .tag-container-spec {
        position: relative;
        top: 230px;
        Left: 10%; 
        width: 80% !important;
    }
}