html{scroll-behavior: smooth;}
.slideo .inxu{padding: 44px;}
.slideo .in{text-align: center;}
.slideo strong{display: block; padding: 30px; padding-top: 140px; padding-bottom: 140px;  font-weight: 400; color: white; text-transform: uppercase; font-size: 34px;}

.formpac{background: rgb(251,175,0); background: linear-gradient(45deg, rgba(251,175,0,1) 0%, rgba(249,74,0,1) 100%); padding: 80px 0px ;}
.formpac h3{ margin-bottom: 20px; font-size: 28px;}
.formpac h3 em{display: block; font-weight: 300;}
.formpac p{font-weight: 300; margin-bottom: 20px;}
.formpac ul{font-weight: 300; margin-bottom: 20px;}
.formpac .in{display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; color: white;}

hr{border: 0px; background: transparent;}

.start{display: inline-block; padding: 17px 30px; color: #f94a00; font-size: 18px; background: url(../loo.gif) no-repeat #fff; background-size: auto 70%; background-position: 13px 9px; padding-left: 60px; border-radius: 5px; font-family: 'bo'; margin-top: 12px;}

.inxaa{width: 1200px; margin: auto;}
.inxf{width: 1000px; margin: auto;}

.seco{height: 120px; background: blue;}

.pic{height: 2px; background: #f3d9a2;}

#pdf_canvas{height: auto; background: silver;}

.view_pdd{text-align: center; background: #e9f0f3; border-radius: 10px; padding: 10px;}
.view_pdd canvas{width: 90%;}

.ppddff button{padding: 5px 10px; background: white; border: 0px;}
.ppddff{padding:20px;}
.ppddff span{padding:15px; color:#000; display:block; border:solid 1px #000;}
.ppddff b{padding:15px; overflow: auto; color:#fff; display:block; font-family:'bo'; background:#000 ; text-align:center;}
.ppddff b i{float: left;}
.ppddff em{display:block; height: 552px;}
.ppddff .in{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.ppddff .in img{width:100%; display:block;}
.ppddff .in section a{display: block; padding: 11px; border-bottom: solid 1px silver; font-family: 'bo'; color: #000; font-size: 12.8px; overflow: auto; cursor: pointer;}
.ppddff .in section a:hover{background: #fffbe4;}
.ppddff .in section a i{display: inline-block; float: left; color: #fbaf00; margin-right: 15px;}

.posta{padding: 40px; background:#8e9ea5 ;} 
.posta .in section{display: grid; grid-template-columns: 0.5fr 1.7fr 0.7fr; gap: 0px; padding: 0px; border-radius: 2px; margin-bottom: 25px;  background: white; }
.loc{text-align: center; padding: 20px;}
.loc u{display: inline-block; font-weight: 900; background: red; color: #ffffff; padding: 5px 20px; font-size: 12px; border-radius: 4px;}
.uu{display: inline-block; font-weight: 900; background: red; color: #ffffff; padding: 5px 20px; font-size: 12px; border-radius: 4px;}
.loc b{display: block; overflow: auto;}
.loc b i{display: block; margin-top: 17px;}
.para{font-size: 14px; padding: 20px; text-align: left; color: #000000;}
.para b{font-family: 'bo';}
.popox{top: 100%; position: fixed; height: 100%; width: 100%; z-index: 100;}
.popox .in{padding: 40px;}
.popox .foor{width: 700px; margin: auto; background: white; height: 500px; overflow: auto; border-radius: 10px;}
.seem{position: fixed; height: 100%; width: 100%; background: #071129; z-index: 90; opacity: 0.6; display: none; }
.foor strong{display: block; padding: 20px; overflow: auto;}
.foor strong i{display: block; float: right;}

.gra2{display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;}
.gra2 textarea{grid-column-start: 1; grid-column-end: 3; padding: 15px;}
.gra1{display: grid; grid-template-columns: 1fr; gap: 15px;}
.gra2 input{padding: 15px; border: solid 1px #e9e7e7; background: #fff; color: #071129;}
.gra2 select{padding: 15px; border: solid 1px #e9e7e7; background: #fff; color: #071129;}
.gra1 textarea{padding: 15px; border: solid 1px #fff; background: #fff; color: #071129;}

.prevo{padding:  0px 30px;}
.prev{display: grid; grid-template-columns: auto 1fr; border-radius: 2px; gap: 10px; margin-bottom: 15px; background: #ebeef0; padding: 10px;}
.prev section{text-align: center;}
.prev section em{display: block; font-weight: 700;}
.prev p{font-weight: 700; font-size: 12.5px;}
.prev p span{font-weight: 400; font-size: 12.5px; display: block; padding-top: 10px;}

.bo{background: #f0f2f3; font-weight: 400; color: #000000; border-radius: 0px; padding: 15px;}
.bo2{background: #ebeef0; font-weight: 400; color: #000000; border-radius: 0px; padding: 15px;}
.bo3{background: #fffbe4; font-weight: 400; color: #000000; border-radius: 0px; padding: 15px;}
.bo span{ color: #1b47ac; border-radius: 10px; font-weight: 700;}
.bo3 span{ color: ; border-radius: 10px; font-weight: 700;}


.dem_dispo{padding: 0px; padding-top: 150px; padding-bottom: 150px; background: url(../img/plus.png) no-repeat center center; background-size: cover;}
.dem_dispo .in{text-align: center;}
.dem_dispo .in h1{font-weight: 700; color: #f95d00; font-size: 68px;}

.coo{margin-top: 15px;}

.pad20{padding: 40px; padding-top: 0px;}

.tito{margin-top: 80px; margin-bottom: 40px; padding-left: 20px; padding-right: 20px; text-align: center; font-weight: 400; font-size: 28px;}

.act{overflow: auto; margin-bottom: 15px;}
.act i{display: block; float: left; padding: 10px; background: white; color: #f95d00; border-radius: 10px; font-size: 22px;}
.act b{display: block; float: left; padding: 10px; color: white; font-size: 18px;}

.gr1{display: grid; grid-template-columns: 1fr; gap: 15px;}
.gr2 input{padding: 15px; border: solid 1px white; background: transparent; color: white; font-weight: 900;}
.gr2 select{padding: 15px; border: solid 1px white; background: transparent; color: white; font-weight: 900;}
.gr2 select option{ color: #000;}

.gr2{display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;}
.gr1{display: grid; grid-template-columns: 1fr; gap: 15px;}
.gr2 input{padding: 15px; border: solid 1px white; background: transparent; color: white;}
.gr2 select{padding: 15px; border: solid 1px white; background: transparent; color: white;}
.gr2 select option{ color: #000;}
.gr1 textarea{padding: 15px; border: solid 1px white; background: transparent; color: white;}

.spec{display: grid; grid-template-columns: 1fr;}

.check{overflow: auto; font-size: 15px; padding-top: 20px;}
.check input{float: left; padding: 20px; display: block; border: solid 4px white;}

.cn{text-align: center;}
.cn input{background: #fbaf00; color: white; padding: 15px 60px; border-radius: 10px; border: 0px; font-family: 'bo';}
.cn .coo{background: #fbaf00; color: white; font-family: 'bo'; display: inline-block; cursor: pointer; padding: 5px 15px; border-radius: 5px; border: 0px;}

::placeholder {
    color: #ffffff; /* Change cette couleur selon tes besoins */
    opacity: 1; 
}

.gra2 ::placeholder {
    color: #8396ad; /* Change cette couleur selon tes besoins */
    opacity: 1; 
}
.gra1 ::placeholder {
    color: #8396ad; /* Change cette couleur selon tes besoins */
    opacity: 1; 
}

.search{padding: 20px; padding-bottom: 0px; }
.search select{padding: 10px; border: solid 1px #ccd6db; background: white; font-weight: 700; color: #f94a00; }
.search select option{padding-left: 40px; margin-left: 40px;}
.search input{padding: 10px; width: auto; border: solid 1px #ccd6db; font-weight: 700; color: #5f5f5f; }
.search button{padding: 7px;  margin-top: 22px; background: #fbaf00; border: 0px; color: white;}
.search .in{display: grid; grid-template-columns: 1fr 1fr 0.4fr 1fr auto 1fr; gap: 10px; padding: 21px; padding-bottom: 25px; box-shadow: 0px 10px 10px #e2dfd7;  background: #f94a00; border-radius: 4px;}
.pac{display: grid; grid-template-columns: 1fr;}
.pac label{display: block; font-size: 11.5px; color: #f7f5d7; margin-bottom: 7px; text-align: left; font-family: 'bo';}

.posta{padding: 40px; } 
.posta .in section{display: grid; grid-template-columns: 0.5fr 1.7fr 0.7fr; gap: 0px; padding: 0px; border-radius: 2px; margin-bottom: 25px;  background: white; }
.loc{text-align: center; padding: 20px;}

.drawer{position: fixed; background: #f94a00; width: 100%; height: 100%; z-index: 500; right: 100%; }
.drawer .in{padding-left: 30%;}
.seem_draw{position: fixed; display: none; background: #000; width: 100%; height: 100%; z-index: 400; opacity: 0.5; text-align: right;}
.clozz{display: inline-block; position: absolute; padding: 20px; right: 0px; color: white; font-size: 33px; opacity: 1;}
.men_pa{padding: 15px;}
.men_pa a{display: block; padding: 12px; border-bottom: solid 1px #d13f00; font-family: 'bo'; color: #fff; font-size: 14px; }
.men_pa .calloo{border-radius: 40px; text-align: center; background: white; color: #f95d00; margin-top: 30px; overflow: auto;}
.men_pa .calloo i{display: block; float: left;}

.do_ico{display: block; padding: 15px; text-align: center;}
.do_ico img{width: 60%;}

.agency{}
.agency .in{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 34px;}
.agency .in section{}
.agency .in section strong{display: block; text-align: right; padding: 24px; padding-top: 276px; color: white; background: #f94a00;}
.agency .in section strong i{display: block; text-align: right;}
.agency .in section strong b{display: block; text-align: right;}
.agency .in section p{display: block; text-align: right; padding: 34px; color:; background: #f8f6dc;}

.footer{padding: 50px 30px ; background: #f94a00; color: white;}
.footer strong{display: block; padding-bottom: 40px; padding-left: 70px; font-size: 19px; text-align: left; font-family:'bo';}
.grf{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px;}
.cel{display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-bottom:24px ; text-align: left;}
.cel i{color: white; display: block; background: #bb3800; padding: 10px; border-radius: 25px; height: auto; align-self: start;}
.cel a{color: white; display: block;}
.cel span{font-size: 14px;}

@media(max-width:800px){
    .menu{float:left; overflow:auto; padding-top:19px; display: none;}
    .formpac{background: #f95d00; padding: 80px 20px ;}
    .formpac .in{display: grid; grid-template-columns: 1fr ; gap: 20px; color: white;}

    .posta{padding: 15px; background:#8e9ea5 ;} 
    .posta .in section{display: grid; grid-template-columns: 1fr ; gap: 10px; padding: 20px; border-radius: 10px; margin-bottom: 25px;}
    .gr2{display: grid; grid-template-columns: 1fr ; gap: 15px; margin-bottom: 15px;}
    .gra2{display: grid; grid-template-columns: 1fr ; gap: 15px; margin-bottom: 15px;}
    .search .in{display: grid; grid-template-columns: 1fr; gap: 10px; padding: 21px; padding-bottom: 25px; box-shadow: 0px 10px 10px #d7dfe2;  background: #f94a00; }
    .inxaa{width: auto; margin: auto;}
    .inxf{width: auto; margin: auto;}
}

@media(max-width:700px){
    .grf{display: grid; grid-template-columns: 1fr; gap: 25px;}
    .ppddff .in{display: grid; grid-template-columns: 1fr; gap: 20px;}
    .agency .in{display: grid; grid-template-columns: 1fr; gap: 34px;}
    .search input{padding: 10px; width: auto; border: solid 1px #ccd6db; font-weight: 700; color: #5f5f5f; }
    .grf{display: grid; grid-template-columns: 1fr; gap: 25px;}
    .popox .in{padding: 10px;}
    .popox .foor{width: 95%; margin: auto; background: white; height: 500px; overflow: auto; border-radius: 10px;}
    .pad20{padding: 20px; padding-top: 0px;}
    .gra2 input{padding: 15px; padding-right: 0px; border: solid 1px #f3d9a2; background: #fff; color: #071129;}
}