*{ margin: 0px; outline: 0px; text-decoration: none; font-style: normal; font-family: "DM Sans", serif;}

.inx{width: 1000px; margin: auto;}

.top{text-align: ;}
.top .in{overflow: auto;}
.top h1{padding: 29px; font-size: 1px; float: left;}
.top h1 a{color: #fff;}
.top h1 img{width: 230px;}

.go_banner{width: 872px; }

.rootop{padding: 60px 20px; text-align: center;}
.rootop p{padding: 20px;}
.rootop a{display: inline-block; margin: 10px; color:#ff1e4e;}

.page_content{padding: 20px; padding-top: 50px; padding-bottom: 50px;}
.page_content h2{font-size: 35px; padding-bottom: 40px;}
.tito h3{font-size: 35px; padding-bottom: 60px;}
.page_content p{font-size: 18px; }

.formal{display: grid; grid-template-columns: 1fr; gap: 10px; width:500px; margin:auto; }
.formal input{ padding: 8px; border: 0px; font-size: 17px; text-align: ; border-radius: 4px;  background: #eef1f3;}
.formal textarea{ padding: 8px; border: 0px; font-size: 17px; text-align: ; border-radius: 4px;  background: #eef1f3;}

.web{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.slide{background: url(../src/hoff2.png) no-repeat right top; background-size: auto 100% ; padding: 50px 20px ; text-align: center;}
.slide h2{font-size: 55px; font-weight: 900; padding-bottom: 30px; }
.slide a{}
.slide span{display: block; float: left; font-size: 20px;}

.acces{float: right; padding-top: 25px;}
.acces a{float: left; background: #4f565f; color: white; padding: 12px 21px; border-radius: 50px; font-weight: 800; margin-left: 11px; transition: background-color 0.5s;}
.acces a:hover{ background-color:#ff1e4e; color: #fff;}

.open_code{display: grid; grid-template-columns: 1fr; gap: 12px;  width: 200px; margin: auto;}
.open_code input{ padding: 10px; border: 0px; font-size: 17px; text-align: center; border-radius: 50px; }

body{color: #4f565f; }

.menu{text-align: center; padding: 20px; }
.menu a{display: inline-block; padding: 7px 16px; font-size:14px; font-weight: 800; color: #4f565f; border: solid 2px #4f565f; border-radius: 30px; margin: 4px; transition: background-color 0.5s;}
.menu a sup{font-size: 8px; }
.menu a:hover {
    background-color: #4f565f;
    color: #fff; /* Optional: change text color on hover */
}

.sub_menu{text-align: center; padding: 20px; background: #eef1f3; }
.sub_menu a{display: inline-block; padding: 7px 16px; font-size:12.5px; font-weight: 800; color: #4f565f; border-radius: 30px; margin: 4px; transition: background-color 0.5s;}
.sub_menu a sup{font-size: 8px; }
.sub_menu a:hover {
    background-color: #ffd2db;
    color: #ff1e4e; /* Optional: change text color on hover */
}

.tito{text-align: center;}

.user_box{padding: 22px; padding-top: 80px; padding-bottom: 50px; text-align: center;}
.user_box .ino{display: grid; grid-template-columns: 1fr; gap: 20px;}
.user{border-radius: 20px; background: #eef1f3; }
.user .ico{text-align: center; height: 60px; }
.user .ico b{display: inline-block; height: 80px; width: 80px; background: silver; border-radius: 80px; position: relative; top: -40px;}
.user .ico p{display: block; position: relative; top:-60px; text-align: right; padding: 20px; padding-top: 0px;}
.user .ico span{font-size: 20px; display: inline-block; margin-right: 8px;}
.user_name{padding:0px 20px; }

.date{background: url(../src/j11.png) no-repeat #eef1f3; background-size: auto 100%; padding: 40px 20px ;}
.date .in{display: grid; grid-template-columns: 1fr 1fr  ; gap: 15px; }
.date .in p{padding: 17.5px; background: #ff1e4e; color: #fff; font-weight: 900; border-radius: 10px; }
.date .in p span{display: block; float: left; font-size: 45px; margin-right: 10px;}
.date .in p b{ font-size: 35px; }

.date .in .signup{padding: 17.5px; background: #4f565f; color: #ff567b; font-weight: 900; border-radius: 10px; text-align: center;}

.seem{display:none;}
.seem{position: fixed; background: #1e2024; height: 100%; width: 100%; z-index: 20; opacity: 0.6;}

.drawer{position: fixed; height: 100%; width: 100%; background: #fff; right: 20%; z-index: 40; overflow:auto; display: none;}
.drawer b{display: block; text-align: right;}
.drawer .in{padding-left: 24%;}
.drawer .pac{padding: 12px;}
.drawer .pac a{display: grid; grid-template-columns: auto 1fr; color: #4f565f; border-bottom: solid 1px #eef1f3;}
.drawer .pac a span{padding:12px; display: block; color: #ff1e4e; font-size:18.8px;}
.drawer .pac a i{padding:10px; font-weight: 800; padding-top: 14px; padding-left:5px; font-size: 13px;}

.pronos{padding: 20px;}
.pronos em{font-weight: 700;}
.pronos b{display: inline-block; background: white; margin: 3px; border-radius: 20px; padding: 8px; padding-right: 15px; padding-left: 15px; font-size: 15px;}
.pac{padding-bottom: 5px;}

.view {text-align: center; padding-bottom: 20px;}
.view a{display: inline-block; padding: 8px 25px; background: #ff1e4e; color: #fff; font-weight: 800; border-radius: 25px;}
.but{display: inline-block; padding: 8px 25px; background: #ff1e4e; color: #fff; font-weight: 800; border-radius: 25px; border: 0px;}
.but{transition: background-color 0.5s;}
.but:hover{ background-color:#4f565f; color:  #fff;}

.info_cycle{padding: 10px; background: #4f565f; color: #fff;}
.info_cycle b{background: #ff1e4e; display: inline-block; color: #ffff; padding-right: 10px; padding-left: 10px;}

.actu{ padding: 20px; padding-bottom: 48px;}
.actu .in{display: grid; grid-template-columns: 1fr; gap: 25px; width: 700px; margin: auto;}
.actu .lab{ display: block; border-radius: 15px; height: 280px;}
.article h4{font-size: 27px;}

.pt{padding-top: 8px;}

.histo{padding: 20px; padding-bottom: 40px;}
.histo .in{display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px;}
.histo section a span{display: block; float: left; margin-right: 10px;}
.histo section a{display: block; background: #eef1f3; color: #4f565f; font-size: 13.5px; overflow: auto; padding: 9px; border-radius: 10px; margin-bottom: 10px;}

.annuaire{padding: 20px; padding-bottom: 40px;}
.annuaire .in{display: grid; grid-template-columns: 1fr ; gap: 15px;}
.annuaire section a span{display: block; float: left; margin-right: 10px; background: #ff1e4e; color: #fff; padding: 5px; border-radius: 4px;}
.annuaire section a{display: block; background: #eef1f3; color: #4f565f; font-size: 13.5px; overflow: auto; padding: 9px; border-radius: 10px; margin-bottom: 10px;}
.annuaire section a:hover{background-color: #ffd2db; color: #ff1e4e;}
.annuaire section b{border-bottom: solid 3px #ff1e4e; padding-bottom: 3px;}
.select_arch{text-align: center;}
.formpac{display: grid; grid-template-columns: 1fr; width: 80%; margin: auto; gap: 16px; margin-bottom: 18px;}
.select_arch strong{font-size: 34px; line-height: 25px;}
.select_arch input{ padding: 10px; border: solid 1px #4f565f; border-radius: 10px; }
.select_arch p{ width: 60%; margin: auto; font-size: 14px; padding: 21px; }

.more a{text-align: center;}

.newsletter{text-align: center; padding-bottom: 80px;}
.newsletter p{padding: 25px;}
.newsletter h2{font-size: 38px;}
.newsletter input{padding: 15px; border: 0px; background: transparent;  font-size: 20px; padding-left: 32px;}
.newa{display: grid; grid-template-columns: 1fr auto; width: 60%; margin: auto; background: #eef1f3; border-radius: 50px;}
.newa button{font-weight: 800; font-size: 20px;}
.newa span{float: left;}

.pop{position: fixed; width: 100%; z-index:100; }
.pop .in{padding: 20px;}
.pop .in b{display: block; padding: 20px; background: #dfffcc; color: #378708; text-align: center; border-radius: 4px;}

.footer{padding: 70px 20px ; background: #4f565f;}
.footer .in{display: grid; grid-template-columns: 1fr 1fr 1fr;}

.footer strong{display: block; padding-bottom: 20px; color: #fff;}
.footer a{display: block; color: #fff; padding: 8px 0px; font-size: 12.5px;}
.footer a img{width: 24px;}
.copyright{background: #4f565f; color: #fff; padding: 20px; padding-top: 0px;}
.purpose{text-align: center; padding: 20px; padding-top: 0px;}
.purpose p{font-size: ; line-height: ;}
.purpose h2{padding: 20px;}

.more{padding: 50px; text-align: center; background: #eef1f3;}


.open_menu{display: none;}

.tabx{padding: 20px;}
.tabx .in{width: 700px; margin: auto;}
.tabx .in .grid{display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-radius: 4px; padding: 17px; background: #48677C;}
.tabx .in .grid b{display: block; padding: 10px; border-radius: 4px; background: #65879E; color: #00FFD6;}
.espa{grid-column-start: 1; grid-column-end: 3;}

.tabz .in{width: 700px; margin: auto; background: #E3E3E3; padding: 1px; gap: 1px; text-align: left;}
.tabz .in strong{padding: 10px; background: white;}
.tabz .in h3{padding: 8px;}
.tabz .in h4{padding: 8px;}
.tabz .in i{padding: 10px; background: white;}
.gro2{display: grid; grid-template-columns: auto 1fr; }
.grox2{display: grid; grid-template-columns: 1fr 1fr; gap: 1px;}

@media (max-width:1000px ) {
    .user_box .ino{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
    .inx{width: auto;}
}
@media (max-width: 872px){
    .go_banner{width: 100%; }
}
@media (max-width:700px ) {
    .tabx{padding: 0px;}
    .tabx .in{width: auto; margin: auto;}
    .tabx .in .grid{display: grid; grid-template-columns: 1fr; gap: 14px; border-radius: 4px; padding: 17px; background: #48677C;}
    .open_menu{display: block; position: absolute; right: 0px; top: 45px; padding: 21px; background: ;}
    .espa{grid-column-start: auto; grid-column-end: auto;}

    .menu{text-align: center; padding: 20px; display: none;}
    .sub_menu{text-align: center; padding: 20px; display: none;}

    .top h1{padding: 29px; font-size: 1px; float: none; text-align: center;}
    .acces{float: none; text-align: center; padding-top: 25px; display: none;}
    .acces a{float: none; background: #4f565f; display: inline-block; color: white; padding: 12px 21px; border-radius: 50px; font-weight: 800; margin-left: 11px; transition: background-color 0.5s;}
    .user{border-radius: 20px; margin-bottom: 30px; background: #eef1f3; }
    .user_box .ino{display: grid; grid-template-columns: 1fr; gap: 20px;}
    .histo .in{display: grid; grid-template-columns: 1fr; gap: 20px;}
    .actu .in{display: grid; grid-template-columns: 1fr; gap: 25px; width: auto; margin: auto;}
    .actu .lab{height: 300px;}
    .histo .in{display: grid; grid-template-columns: 1fr; gap: 15px;}
    .annuaire .in{display: grid; grid-template-columns: 1fr ; gap: 15px;}
    .footer .in{display: grid; grid-template-columns: 1f;}
    .newa{display: grid; grid-template-columns: 1fr; width: 60%; margin: auto; background: #fff; border-radius: 50px;}
    .newa input{background: #eef1f3; font-size: 14px; text-align: ; border-radius: 60px; padding-left: auto; margin-bottom: 14px;}
    .footer .in{display: grid; grid-template-columns: 1fr;}

    .drawer{position: fixed; height: 100%; width: 100%; background: #fff; right: 100%; z-index: 40; overflow:auto; display: block;}
    .seem{display:none;}

    .web{display: grid; grid-template-columns: 1fr; gap: 10px; padding: }

    .top h1 img{width: 190px;}
    .select_arch p{ width: 90%; margin: auto; font-size: 14px; padding: 21px; }

    .slide{background: url(../src/hoff3.png) no-repeat right bottom; background-size: 70% auto ; padding: 50px 20px ; text-align: center;}
    .slide h2{font-size: 40px; font-weight: 900; padding-bottom: 30px; line-height: 32px; width: 80%; margin: auto; }

    .more img{width: 70%;}

    .tabz .in{width: auto; margin: auto; background: #E3E3E3; padding: 1px; gap: 1px; text-align: left;}
    .tabz .in strong{padding: 10px; background: white;}
    .tabz .in h3{padding: 8px;}
    .tabz .in h4{padding: 8px;}
    .tabz .in i{padding: 10px; background: white;}
    .gro2{display: grid; grid-template-columns: auto 1fr; }
    .grox2{display: grid; grid-template-columns: 1fr; gap: 1px;}
    .date .in{display: grid; grid-template-columns: 1fr; gap: 15px; }
}