/*
.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
*/ 
/*
::placeholder {
    color: #1d549b;
    opacity: 0.5;
  }
  ::-ms-input-placeholder { 
    color: #1d549b;
  }*/

*{font-family: "Poppins", sans-serif; margin: 0px; outline: 0px; text-decoration: none; font-style: normal;}
body{ background: url(../img/bg.png) no-repeat bottom center; background-size: cover; color: #243142;}
.slide{text-align: ; background: url(../img/fami3.png) no-repeat right bottom; background-size: auto 90%;} 
.slide .in{padding-top: 100px; padding-bottom: 100px; padding-left: 60px;}
.slide h1{font-weight: 300; line-height: 45px; font-size: 20px;}
.slide h1 strong{font-weight: 900; font-size: 70px;}
.slide h1 em{color: #0a93f9; }
.slide h1 i{font-size: 27px; display: block;}

.slide input{border: 0px; padding: 14px; background: #f9f9fd; border: solid 1px #f2f2ff; border-radius: 40px; width: 40%; margin-top: 00px; color: #1d549b; padding-left: 31px;}
.slide button{border: 0px; padding: 14px; font-weight: 800; width: 10%; background: #0a93f9; color: white; border-radius: 40px; margin-top: 00px; }

.contact{ background: white;}
.contact p{font-size: 12px; font-weight: 700; padding: 11px; padding-right: 20px; color: #243142; overflow: auto;}
.contact p span{font-size: 10px;}
.contact p u{ display: block; float: left;}
.contact p em{ display: block; float: right;}

.menu{ border-bottom: solid 1px #14598f; background: #004981; position: fixed; width: 100%; z-index: 100; }
.menu .in{ overflow: auto;}
.menu section{ float: left; }
.menu section a{color: #ffffff; display: block; float: left; padding: 17px; font-weight: 700; overflow: visible;}

.search{float: right; margin-top: 14px; display: grid; grid-template-columns: auto 200px 1fr;  overflow: hidden; }
.search input{border: 0px; padding: 5px 20px; color: #e7eef3; background: #003863; border-radius: 4px; font-weight: 700;}
.search .subo{background: #0a93f9; color: white; font-weight: 700; }
.search span{ display: inline-block; color: #0a93f9; padding: 5px;}

.menu .in h1{font-size: 0.1px; padding: 18px; float: left;}
.menu .in h1 img{width: 120px;}

.sep{height: 60px; background: white;}

.submenu{ position: fixed; top: 60px; width: 100%; display: none; z-index: 100;}
.submenu .in{ background: #004981; border-radius: 0px 0px 8px 8px; }
.subx{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 20px 20px 50px 50px; color: white;}
.subx strong{color: #6cbfff;}
.subx p a{color: #fff; display: block; padding: px;  margin-top: 16px; font-size: 12px;}
.subx p a:hover{text-decoration: underline;}

.dir{height: 1px; background: white; width: 110px;}

.avis{padding: 5px 0px 35px 0px; }
.avis .in{display: grid; grid-template-columns: 1fr 1fr; gap: 30;}
.avis .avis_ico{background: url(../img/avis.png) no-repeat center top; background-size: cover; padding: 300px 50px 30px 50px; border-radius: 0px 20px 20px 0px; overflow: hidden;}
.avis .avis_ico h4{ text-align: center; font-size: 40px; padding: 30px; font-weight: 900; line-height: 40px; text-transform: uppercase; background: url(../img/blur.png); border-radius: 20px;}
.avis .avis_ico h4 p{ font-size: 18px; line-height: 25px; font-weight: 600; padding: 30px; padding-top: 0px; border-radius: 20px; margin-top: 40px; }
.avis .avis_ico h4 p a{ display: inline-block; padding: 10px 40px; border-radius: 30px; margin-top: 15px; font-weight: 800; font-size: 14px; background: #0a93f9; color: #fff; transition: background-color, 0.5s;}
.avis .avis_ico h4 p a:hover{background: #f1f1f1; color:#0a93f9;}
.avis .avis_ico h4 p a span{ display: inline-block; float: left; margin-right: 10px; transition: }

.cop{overflow: auto; padding: 25px; padding-top: 5px; }

.avis_texta{ padding: 0px ;}
.avis_texta p{background: white; padding: 22px; font-size: 13.5px; margin-bottom: 27px; color: #626e7e; border: solid 1px #d8dce2; border-radius: 10px; width: 62%; box-shadow: 0px 19px 34px -6px rgba(201,206,214,0.75);
  -webkit-box-shadow: 0px 19px 34px -6px rgba(201,206,214,0.75);
  -moz-box-shadow: 0px 19px 34px -6px rgba(201,206,214,0.75);}
.avis_texta .lef{ float: left;}
.avis_texta .rig{ float: right;}
.avis_texta p b{color: #0a93f9; display: block; border: solid 1px #d8dce2; padding: 10px; background: white; 
  font-size: 11.5px; border-radius: 10px; float: right; position: relative; top: 40px;}
.avis_texta p .chat{ float: left; margin-right: 8px; font-size: 30px; color: #0a93f9;}


.badge{overflow: auto; margin-bottom: 20px;}
.badge span{color: red; display: block; float: left; margin-right: 5px;}
.badge b{color: #fff; background: red;padding: 3px 12px 3px 12px; font-size: 12px; display: inline-block; border-radius: 4px;}

.tab{padding: 20px;}
.tab .in{ border: solid 1px #f2f2ff; display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; background: white;}
.tab .in b{padding: 10px; display: block; border-right: solid 1px #f2f2ff; }
.tab .in a{padding: 10px; display: block; overflow: auto; border-right: solid 1px #f2f2ff; color: #243142;}
.tab .in a span{display: block; float: right;}

.content{padding: 25px;}
.content .in{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px;}
.item{display: block; border: solid 1px #f2f2ff; border-radius: 18px; overflow: hidden; background: white;}
.item i{display:block; padding-right: 20px; text-align: right; background-position: center center; height: 210px; background-repeat: no-repeat; background-size: 100%; transition: background-size, 0.5s;}
.item i:hover{background-size: 110%;}
.item i u{display: inline-block; background: white; padding: 10px; background: white; color: #0a93f9; font-size: 12.9px; border-radius: 20px; padding-left: 25px; padding-right: 25px; font-weight: 800; margin-top: 190px;}
.item i u{display: inline-block; background: white; padding: 10px; background: white; color: #0a93f9; font-size: 12.9px; border-radius: 20px; padding-left: 25px; padding-right: 25px; font-weight: 800; margin-top: 190px;}
.item section{padding: 22px; color: #243142;}
.item p{overflow: auto; padding: 5px;}
.item p span{display: block; float: left;}
.more{display: grid; grid-template-columns: 1fr 1fr 1fr; background: url(../img/li.png) repeat-x center; background-size: auto 80%; gap: 1px;}
.more em{display: block; text-align: center; font-size: 11px; background: white; padding-top: 20px; padding-bottom: 20px;}
.date{font-size: 10px; overflow: auto;}
.date b{display: block; float: right; color: #0a93f9; font-size: 18px;}
.item section u{font-weight: 800; color: white; background: #0a93f9; display: block; padding: 8px; border-radius: 50px; text-align: center; margin-top: 10px; transition: background-size, 0.5s;}
.item section u:hover{background: #f1f1f1; color:#0a93f9;}

.tito{padding-left: 20px; padding-right: 20px;}
.tito b{display: block; overflow: auto; padding: 5px;}
.tito b span{ display: block; float: left;}

.sommaire{padding: 20px;}
.sommaire .in{display: grid; grid-template-columns: 1.3fr 2fr; gap: 15px;}

.pac_context .pac{display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.pac_context .enter{background-size: 100%;  border-radius: 10px; background-position: center; color: white; transition: background-size, 0.5s;}
.pac_context .enter:hover{ background-size: 130%; border-radius: 10px; color: white;}
.pac_context .enter div{text-align: right; padding: 20px;}
.pac_context .enter div b{display: inline-block; padding: 7px; border-radius: 5px; padding-left: 17px; padding-right: 22px; background: #0a93f9; color: white; font-size: 12px; transition: background-color, 0.5s;}
.pac_context .enter div b:hover{ background-color: #fff; color: #0a93f9;}
.pac_context .enter div b span{display: block; margin-right: 5px; font-size: 20px; float: left;}
.pac_context .enter strong{display: block; text-align: center; padding: 10px; padding-top: 90px; padding-bottom: 30px; font-size: 30px; line-height: 31px;}

.inx{margin: auto; width: 1200px;}
.inx2{margin: auto; width: 1200px;}

footer{}
.newsletter{background: #0a93f9; padding: 60px 60px; color: white;}
.newsletter .in{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.newsletter .in h2{font-size: 35px;}

.newsletter .inpa input{padding: 12px; border: 0px; background:#e1e8eb; border-radius: 30px; padding-left: 20px; padding-right: 20px;}
.newsletter .inpa .inpinp{ border-radius: 30px 0px 0px 30px; padding-left: 20px; padding-right: 20px;}
.newsletter .inpa .inpsub{background:#0071c7; font-weight: 900; color: white; border-radius: 0px 30px 30px 0px; padding-left: 20px; padding-right: 20px;}

.foot .in{display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 21px;}
.foot{padding: 40px 60px;background:#004981;}
.foot a{display: block; margin-top: 11px;}
.foot strong{color: #5fb9ff;}
.foot h1{color: #5fb9ff;}
.foot p{color: #fff; margin-top: 17px; font-size: 12px;}
.foot a{color: #fff; margin-top: 17px; font-size: 12px;}
.foot section{color: #fff; }
.foot section .social{ }
.foot section .social a{color: #004981; margin-right: 5px; margin-bottom: 10px; width: 20px; text-align: center; background: #fff; display: inline-block; padding: 7px; border-radius: 5px; font-size: 20px; margin-top: 0px;}
.foot .gr2{display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.foot .gr2 b{display: block;}
.foot .gr2 span{display: block; border: solid 1px white; text-align: center; font-size: 30px; border-radius: 10px; padding: 20px;}

.tab{}
.tab2 .in{ width: 50%; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; text-align:center;}
.tab2 .in a{font-weight: 600;}
.tab2 .in a:hover{background: #eaf6ff; color: #0a93f9;}
.tab2 .in .default{background: #0a93f9; color: #fff;}

.proprio{padding: 20px; padding-top: 20px; padding-bottom: 30px; text-align: center;}
.proprio .grid2{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px;}
.proprio section{color: white; background: #243142; background-repeat: no-repeat; background-position: bottom left; background-size: auto 80%; padding: 30px; padding-top: 0px; padding-bottom: 70px; border-radius: 20px;}
.proprio a{ display: inline-block; padding: 10px 40px; border-radius: 30px; margin-top: 15px; font-weight: 800; font-size: 14px; background: #0a93f9; color: #fff; transition: background-color, 0.5s;}
.proprio a:hover{background: #f1f1f1; color:#0a93f9;}
.proprio i{display:inline-block; height:160px; width: 160px; border-radius: 105px; position: relative; top: -50px; background-size: cover;}

.moree{text-align: center; overflow: auto; }
.moree a{display: inline-block; border: solid 1px #0a93f9; color: #0a93f9; font-weight: 500; margin: auto; padding: 5px 15px 5px 15px; font-size: 12.9px; border-radius: 20px; overflow: auto;}
.moree a span{display: inline-block; float: left; font-size: 18px; margin-right: 5px;}

.docs{padding: 40px 20px 40px 20px;}
.docs .in{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 17px;}
.item_doc{display: block; background: white;}
.item_doc b{display: block; padding: 18px; color: #0a93f9; overflow: auto;}
.item_doc b span{font-size: 30px; display: block; float: left; margin-right: 10px;}
.item_doc p{font-size: 12px; color: #626e7e; padding: 31px; padding-top: 0px;}

.copy{padding-top: 80px; overflow: auto;}
.copy b{color: white; font-size: 11px; display:block; float: left;}
footer .foot .copy a{color: #45aeff; display: block; float: right; font-size: 11px; margin-top: 0px; font-weight: 700;}

.loading{position: fixed; position: 200; height: 100%; width: 100%; background: white; text-align: center; z-index: 200;}
.loading .in{padding-top: 220px;}
.loading .in img{padding-bottom: 20px; width: 200px;}

.drawer{position: fixed; height: 100%; width: 100%; background: #14598f; color: white; z-index: 120; right: 20%; right: 100%;}
.drawer .in{ padding-left: 20%;}
.drawer .in a{ display: block; padding: 12px; padding-left: 35px; color: white; font-weight: 700;}
.seem{position: fixed; height: 100%; width: 100%; background: #000000; opacity: 0.8; z-index: 110; display: none;}
.close{text-align: right;}
.close span{display: inline-block; padding: 17px;}

/* HTML: <div class="loader"></div> */
.loader {
  margin: auto;
  width: 50px;
  aspect-ratio: 1;
  display: flex;
}
.loader:before,
.loader:after {
  content: "";
  flex: 1;
  margin: 0 0 0 -2px;
  --c:no-repeat linear-gradient(#0a93f9 0 0);
  background: 
    var(--c) 0    0, 
    var(--c) 100% 0, 
    var(--c) 100% 100%, 
    var(--c) 0    100%, 
    var(--c) 0    50%;
  animation: l17 1s infinite alternate;
}
.loader:before {
  transform: scale(-1);
  margin:0 -2px 0 0;
}
@keyframes l17 {
  0%,
  5%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px}
  20%  {background-size: 100% 4px,4px 0   ,0    4px,4px 0   ,0    4px}
  40%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   ,0    4px}
  60%  {background-size: 100% 4px,4px 100%,100% 4px,4px 0   ,0    4px}
  80%  {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,0    4px}
  95%,
  100% {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,100% 4px}
}

.menu .option{color: white; display: none; padding: 15px; font-size: 28px; float: right;}

@media (max-width:1200px ) {
  .inx{width: auto; margin: auto;}
  .inx2{width: auto; margin: auto;}
  
}
@media (max-width:1200px ) {
  .tab2 .in{ width: 80%; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; text-align:center;}
  .item i{display:block; padding-right: 20px; text-align: right; background-position: top center; height: 210px; background-repeat: no-repeat; background-size: 100%; transition: background-size, 0.5s;}
}
@media (max-width:1060px ){
  .content .in{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;}
  .item{display: block; border: solid 1px #f2f2ff; border-radius: 18px; overflow: hidden; background: white;}
  .item i{display:block; padding-right: 20px; text-align: right; background-position: top center; height: 210px; background-repeat: no-repeat; background-size: cover; transition: background-size, 0.5s;}
  .newsletter .in{display: grid; grid-template-columns: 1fr; gap: 20px;}
  .menu .search{display: none;}

  .slide h1 i{font-size: 27px; display: block;}
  .slide{ background: url(../img/fami3.png) no-repeat right bottom; background-size: auto 40%;} 
  
  .slide .sla_seek{display: grid; grid-template-columns: 1fr; gap: 16px;}
  .slide input{border: 0px; padding: 14px; background: #f9f9fd; border: solid 1px #f2f2ff; border-radius: 40px; width: auto; margin-top: 00px; color: #1d549b; padding-left: 31px;}
  .slide button{border: 0px; padding: 14px; font-weight: 800; width: auto; background: #0a93f9; color: white; border-radius: 40px; margin-top: 00px; }
  .slide .in{padding-top: 100px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px;}
}
  @media (max-width:775px ) {
  .contact p u{ display: block; float: none;}
  .contact p em{ display: block; float: none;}
  .tab .in{ border: solid 1px #f2f2ff; display: grid; grid-template-columns: 1fr 1fr 1fr; background: white;}
  .tab2 .in{ width: auto; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; text-align:center;}
  .tent .in{display: grid; grid-template-columns: 1fr 1fr ; gap: 18px;}
  .sommaire .in{display: grid; grid-template-columns: 1fr; gap: 15px;}
  .sommaire .in .item{display: grid; grid-template-columns: 1fr 2fr; gap: 15px;}
  .sommaire .in .item i{display:block; padding-right: 20px; text-align: right; background-position: top center; height: auto; background-repeat: no-repeat; background-size: cover; transition: background-size, 0.5s;}
  .avis .in{display: grid; grid-template-columns: 1fr; gap: 30;}
  .avis_ico{margin-bottom: 20px;}
  .avis .avis_ico{background: url(../img/avis.png) no-repeat center top; background-size: cover; padding: 200px 10px 10px 10px; border-radius: 0px 20px 20px 0px; overflow: hidden;}
  .docs .in{display: grid; grid-template-columns: 1fr 1fr; gap: 17px;}
  .foot .in{display: grid; grid-template-columns: 1fr 1fr; gap: 21px;}
  .slide{ background: url(../img/famix.png) no-repeat right bottom; background-size: auto 40%;}
  .slide h1 strong{font-weight: 900; font-size: 30px;}
}
@media (max-width:726px ) {
  .menu section{display: none;}
  .menu .option{display: block;}
}
@media (max-width:600px ) {
  .tab2 .in{ width: auto; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr ; text-align:center;}
  .proprio .grid2{display: grid; grid-template-columns: 1fr; gap: 20px; padding-top: 20px;}
  .proprio section{margin-top: 50px;}
  .docs .in{display: grid; grid-template-columns: 1fr; gap: 17px;}
  .tab .in{ border: solid 1px #f2f2ff; display: grid; grid-template-columns: 1fr 1fr; background: white;}
}
@media (max-width:560px ) {
  .content .in{display: grid; grid-template-columns: 1fr ; gap: 18px;}
  .tab2 .in{ width: auto; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr ; text-align:center;}
  .tab .in{ border: solid 1px #f2f2ff; display: grid; grid-template-columns: 1fr; background: white;}
}
@media (max-width:495px ) {
  .newsletter .inpa{display: grid; grid-template-columns: 1fr; gap: 10px;}
  .newsletter .inpa .inpinp{border-radius: 10px;}
  .newsletter .inpa .inpsub{border-radius: 10px;}
  .sommaire .in .item i{display:block; padding-right: 20px; text-align: right; background-position: top center; height: 210px; background-repeat: no-repeat; background-size: cover; transition: background-size, 0.5s;}
  .sommaire .in .item{display: grid; grid-template-columns: 1fr; gap: 15px;}
  .pac_context .pac{display: grid; grid-template-columns: 1fr; gap: 15px;}
  .foot .in{display: grid; grid-template-columns: 1fr; gap: 21px;}
  .copy b{color: white; font-size: 11px; display:block; float: none; margin-bottom: 10px;}
footer .foot .copy a{color: #45aeff; display: block; float: none; font-size: 11px; margin-top: 0px; font-weight: 700;}

}