@import 'mods/reset.css';
@import 'mods/font.css';
@import 'mods/var.css';



/* * */
html, body{background:var(--color_white); color:var(--color_dark);font-family: 'Basis Grotesque Pro', sans-serif; font-size:var(--textM);overflow-x:hidden;font-weight:400;}
[data-bg]{background-size:cover;background-position:center center;}
[data-mail], a, a svg > * {transition: .4s ease; cursor: pointer;}
[data-mail]:hover, a:not(.bn):hover{color:var(--color_blue);}
a:hover svg > * {fill: var(--color_blue);}
[data-img]{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;}
.bg-img{background-size:cover;background-position:center center;}
picture {display: block; height: 100%; width: 100%; overflow: hidden; border-radius: 5px;}
picture img {border-radius: 5px; height: 100%; width: 100%; object-fit: cover;}
.grecaptcha-badge {visibility: hidden;}


/* ct */
.ct{width:80%; max-width: 1550px; margin:auto; z-index: 10;}

/* icon */
.icon, .icon *{stroke-width:var(--stroke_width)!important; fill: var(--color_dark);stroke-linejoin:round;stroke-linecap:round;}

/* swiper */
.swiper-slide{flex:1 0 auto;}
.swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
.swiper-pagination {display: flex; --dim: 6px; position: absolute; z-index: 100; width: 80%; max-width: 1550px; margin: auto; bottom: var(--marginCalc); left: 0; right: 0; justify-content: flex-end;}
.swiper-pagination .swiper-pagination-bullet {display: block; height: var(--dim); width: var(--dim); border-radius: 50%; background: rgba(var(--rgb_white), .5); cursor: pointer;}
.swiper-pagination .swiper-pagination-bullet:not(:last-child) {margin-right: var(--dim);}
.swiper-pagination .swiper-pagination-bullet-active {background: rgba(var(--rgb_white), 1);}

/* title */
.h2 {font-size: var(--textXXL); line-height: var(--textXXL); font-weight:bold;}
.h3 {font-size: var(--textXL); line-height: 1.1; font-weight: bold; margin-bottom: var(--marginS);}
.h4 {font-size: var(--textL); line-height: 1.1; font-weight: bold;}
.h5 {font-size: var(--textM); line-height: 1.1; font-weight: bold;}

/* paragraphe */
.paragraphe {font-size:var(--textS); line-height:1.6;}
.paragraphe a, .paragraphe [data-mail]{font-weight: bold;}
.paragraphe > * + *{margin-top:calc(var(--marginXS) + 2 * (100vw - 320px) / 1080);}

/* btn */
.bn {display: inline-flex; padding: 7px 20px; background: var(--color_pink); color: var(--color_white); font-size: var(--textS); border-radius: 30px; min-width: 130px; white-space: nowrap; align-items: center; justify-content: center; text-align: center; transition: .4s ease;}
.bn-blue {background: var(--color_blue);}
.bn:hover {background: var(--color_dark_purple);}

.paragraphe + .bt {margin-top: var(--marginM);}

.sphere {--fill: var(--color_white); --bg: rgba(var(--rgb_white), .5); --dim: 20px; cursor: pointer; height: var(--sphere); width: var(--sphere); border-radius: 50%; background: var(--bg); display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: var(--textS); color: var(--fill); transition: .3s ease;}
.sphere .icon {height: var(--dim); width: var(--dim);}
.sphere .icon > * {fill: var(--fill);}
.sphere:hover {--bg: var(--color_blue)!important;}

/* illu */
.illu {width: 100%; height: var(--illu);}
.illu img {width: 100%; height: 120%; object-fit: cover;}


/* rs */
.rs {display: flex; align-items: center; --dim: 30px; --fill: var(--color_white); z-index: 10;}
.rs-item {width: var(--dim); height: var(--dim); display: flex; justify-content: center; align-items: center;}
.rs-item .icon {--dim: 15px; height: var(--dim); width: var(--dim); max-height: var(--dim); max-width: var(--dim);}
.rs-item path {fill: var(--fill);}

/* phone */
.ph span {white-space: nowrap;}

/* cookies */
#ck{overflow:hidden;background-color:var(--color_white);color:var(--color_blue);box-shadow:0 15px 20px rgba(0,0,0,.3);border-radius:3px;transition:transform .6s, opacity .6s, visibility .6s;transform:translateY(100%);opacity:0;visibility:hidden;max-width:calc(99vw - 20px);position:fixed;bottom:calc(10px + .5vw);left:calc(10px + .5vw);z-index:9999;width:400px;font-size:11px;line-height:1.3;}
.cks #ck{transform:translateY(0);opacity:1;visibility:visible;}
#ck .ckc{display:flex;align-items:flex-start;padding:20px;}
#ck p strong{display:block;margin-bottom:10px;font-size:130%;line-height:1;}
#ck a{font-weight:bold;text-decoration:underline;}
#ck a:hover{color:#222;}
#ck i{color:var(--color_blue);font-size:35px;margin-right:15px;top:-8px;}
#ck i:before{animation:cookies 1s infinite linear;}
#ck .ckb{display:flex;font-size:15px;font-weight:bold;}
#ck .ckb > *{border-top:1px solid rgba(0,0,0,.1);flex:1;background-color:rgba(0,0,0,.1);padding:14px 0 15px;}
#ck .ckb > *:hover{background-color:rgba(0,0,0,.15);}
#ck .ckb > * + *{border-left:1px solid rgba(0,0,0,.1);}
#ck .ckb small{font-size:13px;font-weight:normal;}
@keyframes cookies{0%{content:'\f563';}100%{content:'\f564';}}

/* alert */
.alert{text-align:left;background:#222;border-radius:1px;color:#fff;font-size:11px;font-weight:400;line-height:1;padding:20px;}
.alert.alert-danger, .btn.danger, .badge.badge-danger, .badge.danger{background:#ff5353;}
.alert.alert-warning, .btn.warning, .badge.badge-warning, .badge.warning{background:#bd6e28;}
.alert.alert-success, .btn.success, .badge.badge-success, .badge.success{background:#8dc111;}
.alert.alert-info, .btn.info, .badge.badge-info, .badge.info{background:#2875bd;}
.alert.hide{transition:opacity .3s;}
.alert [data-close-alert]{position:absolute;top:2px;right:4px;font-size:10px;}
.alert.no-close [data-close-alert]{display:none;}
.alert.none{display:none;}

/* pop up */

#pp{display:flex;align-items:center;justify-content:center;text-align: center;position:fixed;top:0;height:100vh;left:0;width:100vw;z-index:9999;pointer-events:none; color: var(--color_primary);}
.opp #pp{pointer-events:auto;}
#pp > div{transition:1s;top:100px;pointer-events:none;opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;background:var(--color_white);box-shadow: 0 15px 20px rgba(0,0,0,.3);
    border-radius: 3px;width:calc(300px + 250 * (100vw - 320px) / 1080);overflow:hidden; padding: calc(30px + 5 * (100vw - 320px) / 1080) calc(30px + 5 * (100vw - 320px) / 1080) calc(50px + 5 * (100vw - 320px) / 1080);}
#pp .paragraphe{font-size: calc(12px + 3 * (100vw - 320px) / 1080); margin-top: 0; line-height: 1.5;}
#pp .cl {position: absolute; top: 0; right: 0; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; background: var(--color_greylight);z-index: 10; cursor: pointer; transition: .3s;}
#pp .cl:hover {background: var(--color_blue);}
#pp .cl svg {height: 15px; width: 15px;}
.opp #pp > div{top:0;pointer-events:auto;opacity:1;visibility:visible;}



/* header */
#header {transition: .6s ease-in-out; position:fixed; top:0; left:0; width:100%; z-index:500; }
#header a:not(.bn):hover{color:var(--color_purple);}
#header a:hover svg > * {fill: var(--color_purple);}

#header .top {height: var(--top_header); background: var(--color_greylight); font-size: var(--textXS); z-index: 50;}
#header .top .ct {display: flex; justify-content: space-between; align-items: center; height: 100%;}
#header .top .right {display: flex; align-items: center; flex: 1 0 50%;}
#header .ph span:first-child:after {content:'|'; margin-left: 8px; margin-right: 5px;}
#header .ph span:last-child,
h1 {color: var(--color_pink);}
h1 {white-space: nowrap;}

.lang {display: flex; align-items: center; margin-left: var(--marginM);}
.lang .trigger:after {content: '▴'; transform: rotateX(190deg); display: inline-block; top: 2px; font-size: 15px; transition: .5s ease; width: 2px;}
.lang img {vertical-align: middle; bottom: 2px; height: 20px;}
.lang.on .trigger:after {transform: rotateX(0)}
.lang.on .d-lang {opacity: 1; pointer-events: auto;}
.d-lang {position: absolute; background: var(--color_greylight); padding: 3px 7px; border-radius: 3px; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--top_header); left: 0; top: 29px; opacity: 0; pointer-events: none; font-weight: bold; transition: .4s ease-in-out; z-index: 10; font-size: var(--textXS);}
.d-lang > a {display: flex;}

#header .bottom {height: var(--bottom_header); background: var(--color_white);}
#header .bottom .ct {display: flex;; align-items: center; justify-content: space-between; height: 100%;}
#header .logo {display: flex; align-items: center; font-size: var(--textM); height: calc(100px + 20 * (100vw - 320px) / 1080); max-width: 140px;}
#header .right {display: flex; align-items: center; justify-content: flex-end;}
#header .bottom .lang {display: none;}
#header a, #header .bnv {pointer-events: auto;}

.fix #header {box-shadow: var(--box); transform: translateY(calc(-1 * var(--top_header)));}

/* bnv */
.bnv {display: none; align-items: center; color: var(--color_dark); font-weight: bold; --bar_w: 16px; --bar_h: 2px; --bar_s: 4px; cursor: pointer; font-size: var(--textM);}
.bnv:hover {--color_primary: var(--color_pink); transition: all 300ms;}
.hbg {width: var(--bar_w); height: calc(var(--bar_h) + var(--bar_s) * 2); top: 2px; margin-left: 10px;}
.hbg span,
.hbg span:before,
.hbg span:after {width: var(--bar_w); height: var(--bar_h); display: block; color: var(--color_dark);}
.hbg span {transform: translateY(var(--bar_s)); transition: all 0ms 300ms;}
.hbg span:before,
.hbg span:after {content:''; position: absolute; left: 0; background: var(--color_dark);}
.hbg span:before {top: var(--bar_s); transition: top 300ms 300ms var(--cubic), transform 300ms var(--cubic);}
.hbg span:after {bottom: var(--bar_s); transition: bottom 300ms 300ms var(--cubic), transform 300ms var(--cubic);}
.onav .hbg span:before {top: 0; transform: rotate(45deg); transition: top 300ms var(--cubic), transform 300ms 300ms var(--cubic);}
.onav .hbg span:after {bottom: 0; transform: rotate(-45deg); transition: bottom 300ms var(--cubic), transform 300ms 300ms var(--cubic);}


/* news */
#news {padding: var(--marginXXL) 0; --height: calc(350px + 50 * (100vw - 320px) / 1080);}
#news .ct {display: flex; justify-content: space-between;}
#news .h3 {color: var(--color_blue);}
.filli {position: absolute; bottom: 0; right: 0; font-size: var(--marginXXL); color: var(--color_blue); opacity: .15; line-height: .7;}
#news .left {width: 30%; display: flex; flex-direction: column; justify-content: center; margin-right: var(--marginL);}
#news .sw {width: 40%; height: var(--height); overflow: hidden;}
#news .swiper-wrapper {height: 100%;}
#news .news-item {height: 100%;}

.news-item {border-radius: 5px; overflow: hidden;  height: var(--height);}
.news-text {position: absolute; top: 0; left: 0; transform: none; height: 100%; width: 100%; color: var(--color_white); background: linear-gradient(to right, rgba(var(--rgb_dark_purple),.8), rgba(var(--rgb_dark_purple), .1)); display: flex; flex-direction: column; justify-content: center; z-index: 10; padding: var(--marginCalc);}
.news-item picture {width: 100%; height: 100%; margin-left: 0;}
.news-item .date strong {font-size: var(--textXL); color: var(--color_blue); display: block;}
.news-item .h4 {margin-bottom: var(--marginS); line-height: 1.2;}
.news-item .link {font-size: var(--textS);}
.news-item:hover .link {color: var(--color_greylight);}
.news-item img {transition: .4s var(--cubic); transform: scale(1.1);}
.news-item:hover img {transform: scale(1);}
.news-item img {transition: .4s var(--cubic); transform: scale(1.1);}
.news-item:hover img {transform: scale(1);}
.news-item .date {display: none;}


/* contact */
#contact .ct {display: flex; justify-content: space-between;}
#contact .left {width: 33.33%; margin: var(--marginL) 0; z-index: 1;}
#contact span {display: block;}
#contact picture {position: absolute; bottom: 0; right: 0; width: 60%;}
#contact address {color: var(--color_pink);}
.hand {position: absolute; left: 0; bottom: 0; z-index: 0; opacity: .15; height: var(--illu); width: var(--illu);}


/* footer */
#footer {font-weight: 500; font-size: var(--textXS); padding: var(--marginL) 0; background: var(--color_dark); line-height: 1.7; color:var(--color_pink);}
#footer .logo-abroad {height: var(--sphere); width: var(--sphere); margin-right: var(--marginM);}
#footer .ct {display: flex; justify-content: space-between; align-items: center; z-index: 1;}
#footer .title {font-weight: 600; font-size: var(--textS);}
#footer nav {display: flex; flex-wrap: wrap;}
#footer nav a:not(:last-child) {margin-right: var(--marginXS);}

#footer .left,
#footer .right {display: flex; align-items: center;}
#footer .right {width: 40%; justify-content: flex-end;}

#footer .ph span {display: block; white-space: nowrap;}
#footer .rs {--fill: var(--color_pink); justify-content: flex-end;}
#footer .logo {height: calc(100px + 20 * (100vw - 320px) / 1080); max-width: 140px; margin-right: var(--marginS);}
#footer .sphere {--bg: var(--color_pink); --fill: var(--color_dark);}
#serco {height: var(--textXS); bottom: 3px; margin-left: 2px;}
#serco > * {fill: var(--color_pink); transition: .3s;}
#serco:hover > * {fill: var(--color_blue);}

[data-scroll="up"] {transform: rotate(20deg); transition: .3s var(--cubic); margin-left: var(--marginM);}
[data-scroll="up"]:hover {transform: rotate(0);}



/*** media ***/

/*** max-width 1500px ***/
@media screen and (max-width:1500px){
    #news .sw {width: 50%;}
}
/*** max-width 1300px ***/
@media screen and (max-width:1300px){
    #footer address span {display: block; font-weight: 600;}
    #footer address span:before {display: none;}
}
/*** max-width 1200px ***/
@media screen and (max-width:1200px){
    #header .ph {display: none;}
    #news .sw {width: 60%;}

}
/*** min-width 1050px ***/
@media screen and (min-width: 1051px) {
    #nav {font-size: var(--textS); font-weight: bold;}
    #nav nav > ul {display: flex;}
    #nav nav > ul > li + li {margin-left: var(--marginM);}
    #nav nav > ul > li:last-child {color: var(--color_pink);}
    #nav .accordion {cursor: pointer;}
    #nav .accordion-sub {display: none; position: absolute; background: var(--color_white); padding: 8px 25px 10px; border-radius: 5px; top: 30px; left: 50%; transform: translateX(-50%); ; min-width: 190px; text-align: center; box-shadow: var(--box);}
    #nav .accordion-sub:after {content: ''; display: block; height: 10px; width: 10px; border-radius: 2px; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); background: var(--color_white); z-index: -1;}
    #nav .accordion-sub li {padding: 5px 0; width: 100%;}
}
/*** max-width 1050px ***/
@media screen and (max-width:1050px){
    .bnv {display: flex;}
    #nav {width: 100vw; pointer-events:auto; opacity: 0; transition: .6s var(--cubic);position:fixed;left:0;top:0;bottom:0;height:100vh;overflow:hidden;user-select:none;-moz-user-select:none;transform:translateY(-100%);font-size: var(--textXL); background: var(--color_white);}
    #nav nav {display: flex; align-items: center; padding: var(--marginL) var(--marginCalc); width: 100%; height: 100%;}
    #nav nav > ul {z-index: 1;}
    #nav nav ul li {padding: var(--marginXS) 0;}
    #nav nav > ul > li {line-height: 1.4;}
    #nav nav a {transition: 1s var(--cubic);}
    #nav nav a:after {content:''; height: 13px; width: 0; background: rgba(var(--rgb_secondary), .2); position: absolute; left: 0; bottom: 2px; transition: 1s var(--cubic);}
    #nav nav a:hover:after  {width: 100%;}
    #nav nav > ul > li {transition:opacity .8s var(--cubic), top .8s var(--cubic);transition-delay:var(--d);opacity:0;top:200px;display:block;width:100%;}
    .onav #nav{transform:translateY(0); opacity: 1;}
    .onav #nav nav > ul > li{opacity:1;top:0;}
    .onav #nav nav > ul > li:nth-child(1){--d:0s;}
    .onav #nav nav > ul > li:nth-child(2){--d:.2s;}
    .onav #nav nav > ul > li:nth-child(3){--d:.4s;}
    .onav #nav nav > ul > li:nth-child(4){--d:.6s;}
    .onav #nav nav > ul > li:nth-child(5){--d:.8s;}
    .onav #nav nav > ul > li:nth-child(6){--d:1s;}

    #nav .accordion {cursor: pointer;}
    #nav .accordion > span:after {content: '\f067'; font-family: "Font Awesome 5 Pro"; font-size: var(--textXS); margin-left: var(--marginXS); transition: .3s var(--cubic); bottom: 3px;}
    #nav .accordion.on > span:after {content: '\f068'; transform: rotate(360deg);}
    #nav .accordion-sub {display: none;}
    #nav .accordion-sub li {font-size: var(--textM); margin-left: var(--marginS); line-height: 1; padding: 8px 0}

    #news {padding: var(--marginXL) 0;}
    #news .ct {flex-direction: column;}
    #news .left {width: 100%; margin-bottom: var(--marginL);}
    #news .sw {width: 100%;}


}
/*** max-width 900px ***/
@media screen and (max-width:900px){

    :root {
        --textXXL: 50px;
        --textXL: 30px;
        --textL: 25px;
        --textM: 20px;
        --textS: 16px;
        --textXS: 12px;
    }

    #news .news-text {top: 0; left: 0; transform: none; height: 100%; width: 100%; color: var(--color_white); background: linear-gradient(to right, rgba(var(--rgb_dark_purple), 1), rgba(var(--rgb_dark_purple), .3)); display: flex; flex-direction: column; justify-content: center;}
    #news .news-item picture {width: 100%; margin-left: 0;}
    #news .news-item .h4:before {display: none;}
    .filli {font-size: var(--marginL);}


    #contact picture {width: 50%;}

    #footer .ct {flex-direction: column; text-align: center;}
    #footer .left {width: 100%; flex-direction: column;}
    #footer .right {width: 100%; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
    #footer .logo {display: none;}
    #footer nav {justify-content: center; text-align: center;}
    #footer .rs {justify-content: center;}
    #footer .sphere {margin-left: 0; margin-top: var(--marginS); --sphere: 50px;}
    #serco {height: 13px;}
}
/*** max-width 800px ***/
@media screen and (max-width:800px){
    #footer .top {padding: var(--marginL) 0;}
    #footer .top [data-link] {--dim: 120px;}
    #footer .bottom {--marginL: var(--marginM)}
    #footer .svg-contact {top: -24px; left: -24px;}
}
/*** max-width 700px ***/
@media screen and (max-width:700px){
    .ct {width: 90%;}

    h1 {width: 100%; text-align: center;}

    #nav nav {width: 100%;}
    #nav nav ul li {padding: 10px 0;}

    .filli {display: none;}

    #contact {margin-bottom: var(--marginXL);}
    #contact .left {width: 100%; margin: 0;}
    #contact picture {border-radius: 50%; height: var(--pic); width: var(--pic); top: 50%; transform: translateY(-50%); right: var(--marginCalc);}
}
/*** max-width 500px ***/
@media screen and (max-width:500px){
    #header {font-size: var(--textXS);}
    #header h1 {white-space: normal; width: calc(100% - 40px); text-align: left;}
    #header .aside > a {display: none;}
    #header .top .right {margin-left: var(--marginS); flex: auto; width: 40px;}
    #header .lang {margin: 0; font-weight: 500; line-height: normal; text-transform: lowercase;}
    #header .lang .trigger i {font-size: 80%;}
    .bnv {--bar_w: 10px; --bar_h: 1.5px; --bar_s: 2px;}
    .hbg {top: 1px;}
    :root {
        --textXXL: 35px;
        --textXL: 25px;
        --textL: 20px;
        --textM: 18px;
        --textS: 16px;
        --textXS: 12px;
        --marginXL: 70px;
    }
    #news .news-text {padding: var(--marginM);}
}
/*** max-width 450px ***/
@media screen and (max-width:450px){
    #contact picture {right: 0;}

}
/*** max-width 400px ***/
@media screen and (max-width:400px){
    #contact picture {display: none;}
    #contact .left {text-align: center;}
    #contact .hand {width: 100%; height: 100%; bottom: -10%;}
}