@font-face {

    font-family: 'OPTIEdgar-Extended';
    src: url('OPTIEdgarBold-Extended.eot');
    src: url('OPTIEdgarBold-Extended.eot?#iefix') format('embedded-opentype'), url('OPTIEdgarBold-Extended.woff2') format('woff2'), url('OPTIEdgarBold-Extended.woff') format('woff'), url('OPTIEdgarBold-Extended.ttf') format('truetype'), url('OPTIEdgarBold-Extended.svg#OPTIEdgarBold-Extended') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;

}
@font-face {

    font-family: 'OPTIEdgar-Extended';
    src: url('OPTIEdgar-Extended.eot');
    src: url('OPTIEdgar-Extended.eot?#iefix') format('embedded-opentype'), url('OPTIEdgar-Extended.woff2') format('woff2'), url('OPTIEdgar-Extended.woff') format('woff'), url('OPTIEdgar-Extended.ttf') format('truetype'), url('OPTIEdgar-Extended.svg#OPTIEdgar-Extended') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'wicon';
    src: url('wicon.eot?#iefix') format('embedded-opentype'),  url('wicon.woff') format('woff'), url('wicon.ttf') format('truetype'), url('wicon.svg#wicon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

html {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

/* ------------------------------------------- */
/* ///// VARIABLES COULEURS ////////////////// */
/* ------------------------------------------- */
:root {
    --primaire: #fc5e2e;
    --primaire-f: #1d1d1b;
    --secondaire: #121a59;
    --secondaire-f: #fc5e2e;
    --gris: #8b8c90;
    --gris-c: #f4f4f4;
    --gris-f: #434343;
}
body {
    font-family: "Roboto", Arial;
    font-size: 18px;
    font-weight: 300;
    margin: auto;
    width: 100%;
    background: #fff;
}
.container{max-width:1260px;}




/* ------------------------------------------- */
/* ///// CLASSES DE BASE ///////////////////// */
/* ------------------------------------------- */
a{text-decoration: none; transition:all ease 0.3s; color:var(--primaire);}
a:hover{text-decoration: none; transition: all ease 0.3s; color:var(--primaire-f);}
img{max-width:100%; height: auto;}
#smartnav{display:none; background:var(--primaire)!important;}

.blc-top{border-bottom:5px solid var(--primaire); padding:5px 0; background:url(../images/bg-top.png)center no-repeat; background-size:cover;}
.ctn-top-rgt{width:calc(100% - 400px);}
.adr{color:#fff; position:relative; font-family: 'OPTIEdgar-Extended'; line-height: 20px; padding-left:50px;}
.adr::before{content:'\e010'; color:#fff; font-size:45px; line-height: 45px; font-family: 'wicon'; position:absolute; top:0; left:0;}
.adr span{display:block; font-weight: 700;}
.contact{position:relative; padding-left:50px;}
.contact::before{content:'\e001'; color:#fff; font-size:45px; line-height: 45px; font-family: 'wicon'; position:absolute; top:-2px; left:0;}
.contact a{display:block; color:#fff; line-height: 20px;}
.contact a:hover{color:var(--primaire);}
.contact .tel{ font-family: 'OPTIEdgar-Extended'; font-weight: 700;}

.top-menu{margin-top:15px;}
.top-menu ul{padding:0; margin:0; display:flex; flex-wrap:wrap; list-style: none;}
.top-menu ul li{ transform:skewX(-15deg); border:1px solid var(--primaire); margin:0 3px; position:relative; overflow: hidden; transition:all 0.3s;}
.top-menu ul li::after{content:''; position:absolute; top:0; left:-100%; bottom:0; width:100%; background:var(--primaire); transition:all 0.3s; z-index: -1;}
.top-menu a{display:block; padding:20px; color:#fff; transform:skewX(15deg); z-index: 1;}
.top-menu a::first-letter{text-transform: uppercase;}
.top-menu ul li:hover::after{left:0; transition:all 0.3s;}
.nav-active{background:var(--primaire);}

.blc-slg{position:absolute; top:0; left:0; bottom:0; right:0; z-index: 999;}
.slg{font-family: 'OPTIEdgar-Extended';}
.tms{font-size:50px; font-weight: 700; color:var(--secondaire);}
.tms span{color:var(--primaire);}
.slg .tx{color:#fff; font-size:28px;}

.anim{position:relative; min-height: 320px; background:url(../images/anim.jpg)center; background-size:cover;}

h1{font-size:40px; margin-bottom:30px; font-family: 'OPTIEdgar-Extended'; font-weight: 700; color:var(--secondaire);}
h2{font-size:40px; margin-bottom:30px; font-family: 'OPTIEdgar-Extended'; color:var(--primaire);}

.blc-01{position:relative; padding:0 0 100px; margin-top:-7%; z-index: 99;}
.tx01 h2{font-size:40px;}
.im01 a{display:block; border-radius: 50%; overflow: hidden;}
.i11{width:90%; margin-left:10%;}
.i11 a{border:5px solid var(--primaire);}
.i12{width:60%; margin-top:-25%;}
.i12 a{border:5px solid var(--secondaire); position:relative;}

.blc-01-supp{margin:-70px auto; position:relative; z-index: 99;}

.blc-02{padding:100px 0; /*background:url(../images/bg.jpg)center no-repeat; background-size:cover;*/}
.tx02{color:#fff;}
.im02{margin-top: -12%;}
.im02 a{display:block; border-radius: 50%; overflow: hidden;}
.i21{width:90%;}
.i21 a{border:5px solid var(--primaire);}
.i22{width:60%; margin-top:-25%; margin-left:40%}
.i22 a{border:5px solid var(--secondaire); position:relative;}
.tx02{background:rgb(18 26 89 / 60%); padding:50px 30px; border-radius:10px; color:#fff;}
.tx02 ul{list-style: square; margin-bottom:0;}

.blc-act{padding:70px 15px 120px;}
.ttl-h2 h2{font-weight: 700; color:var(--secondaire); display:inline-block; font-size: 40px; padding:30px; position:relative; z-index: 1;}
.ttl-h2 h2::before{content:''; position:absolute; top:24px; left:10px; width:90px; height:60px; background:var(--primaire); transform:skewX(-15deg); z-index: -1;}
.tx-act a{font-family: 'OPTIEdgar-Extended'; font-size:20px;}
.tx-act span{width:240px; height: 240px; display:flex; justify-content:center; align-items:center; border:2px solid var(--primaire); border-radius: 50%; margin:0 auto 20px; padding:70px; transition:all 0.5s; position:relative;}
.tx-act span img{transition:all 0.5s;}
.tx-act span::after{content:''; position:absolute; bottom:-15px; left:calc(50% - 40px); width:80px; height:40px; background:var(--secondaire); transform:skewX(-15deg)}
.tx-act a:hover{color:var(--secondaire);}
.tx-act a:hover span{border-color: var(--secondaire); transition:all 0.5s;}
.tx-act a:hover span img{transform: rotate(360deg); transition:all 0.5s;}
.tx-act a:hover span::after{background: var(--primaire);}

.blc-03{background:var(--gris-c)}
.blc-03 .im01{margin:-40px 0 -30px;}

.bg-gris{background:var(--gris-c);}

.blc-gal{padding:70px 0;}
.blc-gal a{display:block; position:relative; overflow: hidden; border-radius: 50%;}
.bor01 a{border:5px solid var(--primaire);}
.bor02 a{border:5px solid var(--secondaire);}

.wr a img{transition:all 0.3s;}
.wr a:hover img{transform: scale(1.3) rotate(13deg); transition:all 0.3s;}

footer{background:var(--secondaire);}
.f-tms{color:#fff; font-family: 'OPTIEdgar-Extended'; font-size:30px; line-height: 30px;}
.f-tms span{color:var(--primaire); font-weight: 700; display:block;}
.f-adr{color:#fff; line-height: 20px;}
.f-adr span{display:block;}
.f-content{padding:50px 15px 30px;}
.f-contact a{color:#fff; display:block;}
.f-contact a:hover{color:var(--primaire);}
.f-content p{line-height: 20px; color:#fff; padding-left:40px; margin-bottom:10px}
.f-content h3{ font-family: 'OPTIEdgar-Extended'; color:#fff; margin-bottom:20px; position:relative; z-index: 1;}
.f-content h3::first-letter{font-weight: 700; color:var(--secondaire);}
.f-content h3::before{content:''; position:absolute; top:-3px; left:-12px; width:60px; height: 40px; background:var(--primaire); transform:skewX(-15deg); z-index: -1;}

.foot-menu{padding:30px 0; border-top:1px solid #fff;}
.foot-menu ul{padding:0; margin:0; display:flex; justify-content:center; list-style: none;}
.foot-menu a{display:block; padding:0 20px; color:#fff;}
.foot-menu a::first-letter{text-transform: uppercase;}
.foot-menu a:hover{color:var(--primaire);}

.copyright-text{color:#fff; font-size:16px;}

/*CONTACT*/
.form-group{ margin:0 0 10px 0;}
.form-group label, .form-group input.form-input, textarea.form-textarea{ width:99%; display:block; margin:0 auto;}
input[type="text"],textarea,select{ padding:8px 5px; margin:8px 0; display:inline-block; border:1px solid #ccc; border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.btn-form{ margin:10px 0 0 0;}
.btn-submit-1, .btn-submit-2{  background: var(--primaire); color: #fff; text-decoration: none; width:200px; padding: 10px 16px; font-size: 15px; border:1px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; margin:10px 0 0 0; cursor:pointer; text-transform:capitalize;}
/*PLAN D'ACCES*/
.map-google{ width:100%; margin:0 auto;}
.map-google iframe{ margin:0; padding:0; border:none; width:100%; height:400px;}

.nav-diapo{display:none;}
.comimage{text-align: center; padding:20px; background:#090944;}
/* -------------------------------------- */
/* ///// RESPONSIVE ///////////////////// */
/* -------------------------------------- */

@media all and (max-width: 1279px) {
    .container{max-width:1140px;}
    .ctn-top-rgt{width:calc(100% - 280px);}
    .blc-01-supp{margin:-40px auto;}
}
@media all and (max-width: 1151px) {
    .container{max-width:960px;}
    #logo{width:220px;}
    .top-menu ul li{margin:0 1px;}
    .top-menu a{padding:20px 10px;}
    .ctn-top-rgt{width:680px;}
    .blc-01,.blc-act{margin-top:0; padding:70px 15px;}
    .blc-01-supp{margin:0 auto; padding:70px 15px;}
    .bg-gris{padding-top:30px;}
    .blc-act{padding:70px 15px;}
    .blc-03{padding:70px 0;}
    .blc-03 .im01{margin:0;}
    .f-content > div{width:45%;}
    .f-tms{margin-bottom: 20px;}
    .foot-menu a{font-size:16px; padding:20px 15px;}
}
@media all and (max-width: 992px) {
    #smartnav{display:block;}
    .container{max-width:720px;}
    .anim{min-height: 200px;}
    .blc-top .container{max-width:100%;}
    .ctn-top-rgt{width:570px;}
    .blc-02{padding:50px 0;}
    .tx02{padding:30px;}
    .im02{margin-top:0;}
    .tx-act span{width:200px; height:200px; padding:50px;}
    .blc-gal{padding:50px 0;}
    
}
@media all and (max-width: 889px) {
    #logo{width:100%; text-align: center; margin-bottom:20px;}
    .ctn-top-rgt{width:100%; margin-bottom:10px;}
}
@media all and (max-width: 767px) {
    .container{max-width:540px;}
    .tms{font-size:40px; line-height: 40px; text-align: center;}
    .slg .tx{font-size:20px; text-align: center;}
    h1, h2{font-size:30px!important;}
    .ttl-h2 h2{margin-bottom:0;}
    .ttl-h2 h2::before{height:50px; left:20px; width:60px}
    .f-content{flex-direction: column; align-items:center;}
    .f-content > div{width:auto; margin-bottom:20px;}
}
@media all and (max-width: 599px) {
    .ctn-coord{flex-direction: column; align-items:center;}
}
@media all and (max-width: 479px) {
    .ttl-h2 h2{text-align: left; margin-bottom:0;}
    .blc-head{overflow: hidden;}
    .anim{position:relative; width:520px; left:50%; margin-left:-260px}
    .tx02{padding:30px 15px;}
}