/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 

**************************************************************************

    @ Copyright © 2019 POINT WEB
    @ Catégorie : Structure site
    @ Site : Yann Rémondin - Specialiste performance sportive
    @ Auteur : SERCO POINT WEB / www.point-web.fr / Noémie

**************************************************************************/

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url(../../lib/fontawesome/webfonts/fa-light-300.eot);
    src: url(../../lib/fontawesome/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../../lib/fontawesome/webfonts/fa-light-300.woff2) format("woff2"), url(../../lib/fontawesome/webfonts/fa-light-300.woff) format("woff"), url(../../lib/fontawesome/webfonts/fa-light-300.ttf) format("truetype"), url(../../lib/fontawesome/webfonts/fa-light-300.svg#fontawesome) format("svg")
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url(../../lib/fontawesome/webfonts/fa-brands-400.eot);
    src: url(../../lib/fontawesome/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../../lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(../../lib/fontawesome/webfonts/fa-brands-400.woff) format("woff"), url(../../lib/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"), url(../../lib/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

@font-face {
    font-family: 'Questrial';
    src: url('../../lib/questrial/Questrial-Regular.eot');
    src: url('../../lib/questrial/Questrial-Regular.eot?#iefix') format('embedded-opentype'), url('../../lib/questrial/Questrial-Regular.woff2') format('woff2'), url('../../lib/questrial/Questrial-Regular.woff') format('woff'), url('../../lib/questrial/Questrial-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/************* GENERAL **************/

#explicitsubmit, #explicitsubmit:focus {
    border: none;
    background: transparent;
    color: #FFF;
    margin-left: 0.5em;
    outline: none;
}

input#impliedsubmit {
    background-color: #FFF;
    color: #3e4035;
    border: none;
    border-radius: 100px;
    margin: 0 0 0 1em;
    padding: 0 0.5em;
    font-size: 10px;
}

*, *:after, *:before {
    -webkit-tap-highlight-color: transparent;
    list-style-position: inside;
    list-style-type: none;
    color: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    position: relative;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

*:after, *:before {
    display: inline-block;
    z-index: 1;
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td, p, figure, figcaption, button, var, abbr {
    font-style: normal;
    border: 0;
    font-size: inherit;
    color: inherit;
    background: transparent;
    text-decoration: none;
}

section, article, header, footer, nav, aside {
    display: block;
}

table, td, blockquote, code, pre, textarea, input, video {
    max-width: 100%;
}

p, dd, ul {
    word-wrap: break-word;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
}

input, textarea, button {
    resize: none;
    -webkit-appearance: none;
    font-family: inherit;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
}

a, button {
    border: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: .25s;
}

a, a:hover, a:active, a:focus, button, button:hover, button:focus, button:active {
    text-decoration: none;
    outline: none;
}

.clear {
    clear: both;
    background: none;
    outline: none;
    border: none;
    height: 1px;
    margin: 0;
}

.swiper-slide {
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1 0 auto;
    height: 100%;
}

.swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

[data-link] {
    cursor: pointer;
}

[data-bg] {
    background-size: cover;
    background-position: center center;
}

[data-mail] {
    cursor: pointer;
    display: inline !important;
}

[data-zoom] {
    cursor: zoom-in !important;
}

[data-grid] > * {
    position: absolute;
    transition: transform .5s;
    transform: scale(0);
}

[data-grid] > *.show {
    position: absolute;
    transform: scale(1);
}

strong {
    font-weight: 600;
}

a {
    transition: .3s;
}

address {
    font-style: normal;
}


/* autocomplete styles in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 0 #000 inset;
    transition: background-color 5000s ease-in-out 0s;
    background-color: inherit !important;
}

/* fa */
.fa:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-style: normal;
}

.fab:before {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-style: normal;
}

.phone:before {
    content: '\f095';
}

.facebook:before {
    content: '\f39e';
}

.instagram:before {
    content: '\f16d';
}

.cookie:before {
    content: '\f563';
}

.at:before {
    content: '\f1fa';
}

.paper-plane:before {
    content: '\f1d8';
}

.home:before {
    content: '\f015';
}

.times:before {
    content: '\f00d';
}

.phone:before {
    content: '\f095';
}

.twitter:before {
    content: '\f099';
}

.linkedin:before {
    content: '\f0e1';
}

.arrow-right:before {
    content: '\f30b';
}

.arrow-left:before {
    content: '\f30a';
}

.envelope:before {
    content: '\f0e0';
}

.lock:before {
    content: '\f30d';
}

.case:before {
    content: '\f0f2';
}

.angle-right:before {
    content: '\f105';
}

.check:before {
    content: '\f00c';
}

.off:before {
    content: '\f011';
}

.cog:before {
    content: '\f013';
}

.close:before {
    content: '\f00d';
}

.prev:before {
    content: '\f060';
}

.next:before {
    content: '\f061';
}

.pin:before {
    content: '\f276';
    font-weight: 900;
}

/* selection styling */
*::-moz-selection {
    background: rgba(235, 108, 57, 1);
    color: #fff;
}

*::selection {
    background: rgba(235, 108, 57, 1);
    color: #fff;
}

/* selection placeholder */
::-webkit-input-placeholder {
    color: inherit;
    opacity: .5;
}

::-moz-placeholder {
    color: inherit;
    opacity: .5;
}

::-ms-input-placeholder {
    color: inherit;
    opacity: .5;
}

/* scroll fix */
[data-scrollfix] {
    cursor: pointer;
    transition: .25s;
    background: #F49539;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    bottom: 25px;
    right: 25px;
    opacity: 0;
    visibility: hidden;
}

.fix [data-scrollfix] {
    opacity: 1;
    visibility: visible;
}

[data-scrollfix].down {
    transform: rotate(180deg);
}


/* reset bootstrap */
.btn-link {
    color: #F49539;
}

.btn-link:hover {
    color: #e36d3d;
}

/* error */
.error-page {
    text-align: center;
    padding: calc(20px + 5%) 0;
}

.error-page img {
    width: 300px;
    max-width: 70%;
}

.error-page .error-code {
    letter-spacing: 2px;
    margin-top: calc(25px + 2%);
    font-size: calc(18px + 20 * (100vw - 320px) / 1080);
    font-weight: bold;
    text-transform: uppercase;
}

.error-page p {
    font-size: calc(13px + 2.5 * (100vw - 320px) / 1080);
    margin: 10px 0 calc(15px + 2%);
}

/* html body */
html {
    width: 100%;
    overflow-x: hidden;
    line-height: 1;
}

body {
    width: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Questrial', sans-serif;
}

/* scrollbar */
*::-webkit-scrollbar {
    width: 4px;
    background-color: #252525;
}

*::-webkit-scrollbar-thumb {
    background: #fdf940;
}

* {
    scrollbar-color: #fdf940 #252525;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


/* cookies */
#ck {
    transition: transform .6s, opacity .6s, visibility .6s;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 15px 20px rgba(0, 0, 0, .3);
    background: #292623;
    color: #fefefe;
    max-width: calc(99vw - 20px);
    display: flex;
    align-items: flex-start;
    position: fixed;
    bottom: calc(10px + .5vw);
    left: calc(10px + .5vw);
    z-index: 9999;
    border-radius: 3px;
    width: 400px;
    font-size: 12px;
    line-height: 1.3;
    padding: 20px;
}

.cks #ck {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

#ck a {
    font-weight: bold;
    text-decoration: underline;
}

#ck i {
    font-size: 35px;
    margin-right: 15px;
    color: #fdf940;
}

#ck i:before {
    animation: cookies 1s infinite linear;
}

#ck .times {
    opacity: .7;
    font-size: 12px;
    position: absolute;
    padding: 10px;
    top: 0;
    right: 0;
}

#ck .times:hover, #ck a:hover {
    color: #fdf940;
    opacity: 1;
}

@keyframes cookies {
    0% {
        content: '\f563';
    }
    100% {
        content: '\f564';
    }
}

/* recaptcha styling */
.captcha {
    height: 40px;
    display: inline-block;
    margin: 5px 0 10px;
    color: #fff;
}

.captcha .g-recaptcha {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: .4s;
    z-index: 9;
    cursor: pointer !important;
    margin-right: 8px;
    float: left;
    border: 2px solid #fff;
    cursor: pointer;
    overflow: hidden;
    width: 29px;
    height: 29px;
    border-radius: 50%;
}

.captcha .g-recaptcha:hover {
    border-color: #fff;
}

.captcha .g-recaptcha > div {
    cursor: pointer !important;
    width: 500px !important;
    margin-top: -24px;
    margin-left: -14px;
    position: static;
}

.captcha .no-robot {
    font-weight: 500;
    float: left;
    font-size: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.captcha .no-robot .liens {
    font-family: 'Questrial', sans-serif;
    font-size: 10px;
    font-weight: normal;
}

.captcha .no-robot .liens a:hover {
    color: #fff;
}


/* error */
.error-page {
    text-align: center;
    padding: calc(20px + 5%) 0;
}

.error-page img {
    width: 300px;
    max-width: 70%;
}

.error-page .error-code {
    letter-spacing: 2px;
    margin-top: calc(25px + 2%);
    font-size: calc(18px + 20 * (100vw - 320px) / 1080);
    font-weight: bold;
    text-transform: uppercase;
}

.error-page p {
    font-size: calc(13px + 2.5 * (100vw - 320px) / 1080);
    margin: 10px 0 calc(15px + 2%);
}

/* html body */
html {
    width: 100%;
    overflow-x: hidden;
    line-height: 1;
}

body {
    width: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* title */
.legend {
    text-transform: uppercase;
    font-size: calc(8px + 2 * (100vw - 320px) / 1080);
    font-weight: 300;
    letter-spacing: 2px;
}

.title {
    font-size: calc(20px + 15 * (100vw - 320px) / 1080);
    font-weight: 600;
    line-height: 1.2;
}

.subtitle {
    font-size: calc(15px + 10 * (100vw - 320px) / 1080);
    font-weight: 600;
    line-height: 1.2;
}

/* text */
.text-orange {
    color: #fdf940;
}

.paragraphe {
    font-size: calc(12px + 2 * (100vw - 320px) / 1080);
    line-height: 1.5;
}

.paragraphe > * + * {
    margin-top: calc(10px + 1%);
}

/* btn */

.bn, .bn input {
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    color: #fff;
    font-size: calc(10px + 3 * (100vw - 600px) / 1080);;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
}

.bn:after {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -10px;
    left: 0;
    background: #fff;
    transition: .3s ease-in-out;
}

.bn:hover:after {
    background: #fdf940;
    height: 4px;
}

.bn:before {
    content: '';
    height: 200%;
    width: 100%;
    position: absolute;
    bottom: -7px;
    left: 0;
    background: #fdf940;
    z-index: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: .4s ease-in-out;
}

.bn:hover:before {
    opacity: 1;
    transform: scaleY(1);
}

/************* pages **************/

.page {
    padding: calc(25px + 5%) 0;
    background: #242424;
    color: #fff;
}

.cn {
    padding: 0 calc(25px + 70 * (100vw - 320px) / 1080);
}

.flex {
    display: flex;
}

.page .bn {
    margin-top: calc(15px + 2%);
}


/*----------------------------------------------------< APP >---------------------------------------------------*/

/************* header **************/

#header {
    transition: transform .6s;
    width: 100%;
    position: absolute;
    z-index: 900;
    padding: calc(15px + 3%) 0;
}

#header .cn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    color: #fff;
    font-size: calc(10px + 3 * (100vw - 600px) / 1080);
    font-weight: 600;
    letter-spacing: 3px;
}

#header .right {
    display: flex;
    align-items: center;
}

.fix #header {
    position: fixed;
}

.down #header {
    transform: translateY(-100%);
}

#header .h-logo {
    transition: all .4s ease-in-out;
}

#header .h-logo:after {
    content: '';
    height: 3px;
    width: 47px;
    position: absolute;
    bottom: -10px;
    left: 0;
    background: #fdf940;
}

#header .h-logo:hover:after {
    background: #fff;
    right: 0;
    left: auto;
}

#header a:hover {
    color: #fdf940;
}


/************* data-nav **************/

[data-nav] {
    z-index: 99;
    cursor: pointer;
    display: none;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
}

[data-nav] > div {
    background: #fff;
    align-self: center;
    height: 0;
    width: 30px;
    transition: .4s;
}

[data-nav]:hover > div {
    background: #fdf940;
}

[data-nav] > div:before,
[data-nav] > div:after {
    transition: transform .3s;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 0;
    background: inherit;
}

[data-nav] > div:before {
    top: -4px;
}

[data-nav] > div:after {
    bottom: -4px;
}

.openNav [data-nav] > div:before {
    transform: rotate(45deg);
    top: -1px;
}

.openNav [data-nav] > div:after {
    transform: rotate(-45deg);
    bottom: -1px;
}


/************* banner **************/

#ban {
    height: 50vh;
    background: #252525;
}

#ban:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, .6);
}

#ban .content {
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    height: 100%;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.ban-title {
    font-size: calc(30px + 20 * (100vw - 320px) / 1080);
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

#ban h1 {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translatex(-50%);
    color: rgba(255, 255, 255, .7);
    font-weight: 300;
    font-size: calc(7px + 2 * (100vw - 320px) / 1080);
}

#ban [data-bg] {
    transition: transform 1s;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
}


/* breadcrumb */
.bc {
    display: flex;
    width: 100%;
    justify-content: center;
}

.bc ol {
    display: flex;
    color: #bbb;
    font-size: calc(8px + 3 * (100vw - 320px) / 1080);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}

.bc i {
    margin-right: 10px;
}

.bc li:not(:last-child):after {
    content: '|';
    margin-left: 10px;
    margin-right: 10px;
}

/************* slider **************/

#slider {
    width: 100%;
    height: 100vh;
    min-height: 400px;
    background: #0C0C0E;
}

#slider > div {
    width: 100%;
    height: 100%;
}

#slider .swiper-slide {
    padding: 0 calc(25px + 70 * (100vw - 320px) / 1080);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#slider .cn {
    line-height: 1;
    z-index: 1000;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#slider .title span {
    transition: opacity 1s, top 1s;
    opacity: 0;
    top: -50px;
    font-size: calc(30px + 35 * (100vw - 320px) / 1080);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
    background: #fff;
    color: #070707;
    display: inline-block;
    margin-bottom: 7px;
}

#slider .end .title span {
    opacity: 1;
    top: 0;
}

#slider p {
    margin: calc(10px + 1%) 0 calc(15px + 3%);
    transition: opacity 1s, left 1s;
    opacity: 0;
    left: -80px;
    color: #fff;
    font-size: calc(13px + 5 * (100vw - 320px) / 1080);
    padding-right: 20px;
    font-weight: 500;
    line-height: 1.2;
    border-right: 5px solid #fdf940;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
}

#slider .end p {
    left: 0;
    opacity: 1;
}

#slider .rs {
    transition: all .25s, opacity 1s, bottom 1s;
    bottom: -40px;
    opacity: 0;
    position: absolute;
    left: 0;
    margin: calc(10px + 1%) 0 calc(15px + 3%);
    font-size: 90%;
}

#slider .rs a:not(:last-child) {
    margin-right: 20px;
}

#slider .rs a:hover {
    color: #fdf940;
}

#slider .end .rs {
    bottom: 0;
    opacity: 1;
}

#slider [data-bg] {
    transition: transform 1s;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
}

#slider [data-bg]:after, #ban [data-bg]:after {
    content: '';
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../../img/trame.png");
    background-repeat: repeat;
    opacity: .15;
}

#slider .end [data-bg] {
    transform: scale(1.05);
}

#slider h1 {
    position: absolute;
    opacity: 0;
}


/************* footer**************/

#footer {
    padding: calc(15px + 3%) 0;
    clear: both;
    color: #555;
    font-weight: 400;
    font-size: calc(12px + 3 * (100vw - 900px) / 1080);
}

#footer .cn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#footer strong {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 100%;
    color: #252525;
}

#footer ul {
    display: inline-flex;
}

#footer ul li:not(:last-child) {
    margin-right: calc(10px + 20 * (100vw - 320px) / 1080);
}

#footer .text-orange {
    font-weight: 500;
}

#footer a:hover {
    color: #fdf940;
}


/************* pages **************/


/************* index **************/

#intro {
    text-align: left;
    color: #fff;
    padding: calc(25px + 2%) calc(25px + 5%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(90deg, rgba(29, 29, 29, .75) 0%, rgba(29, 29, 29, .95) 100%);
}

#intro .title {
    width: 100%;
    padding-left: 50px;
    border-left: #fdf940 7px solid;
    z-index: 1;
}

#intro .title + div {
    width: 100%;
    padding-right: 57px;
    margin-bottom: calc(15px + 2%);
    margin-top: calc(10px + 2%);
    z-index: 1;
}

#intro .bn {
    margin-top: calc(15px + 7%);
    z-index: 1;
}

#services {
    color: #fff;
    padding: calc(25px + 5%);
    background: #252525;
}

#services .title {
    padding-left: 50px;
    border-left: 7px solid #fdf940;
    margin-bottom: calc(25px + 3%);
}

#services picture {
    border-radius: 30px;
    overflow: hidden;
    display: block;
    margin: 20px;
}

#services picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: .4s ease-in-out;
}

#services .content:hover img {
    transform: scale(1.1);
}

#services .s-title {
    text-align: center;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 3px;
    font-size: calc(5px + 8 * (100vw - 320px) / 1080);
    font-weight: 700;
    color: #070707;
    width: 100%;
}

#services .s-title span {
    background: #fff;
    display: inline-block;
    margin-bottom: 5px;
    transition: .3s ease-in-out;
}

#services .content:hover .s-title span {
    background: #fdf940;
}

#objectif .swiper-wrapper {
    height: 690px;
}

#objectif .swiper-slide {
    color: #fff;
    padding: calc(25px + 5%) calc(25px + 5%) calc(50px + 7%);
    background: #353535;
}

#objectif .content {
    z-index: 10;
}

#objectif .legend {
    margin-bottom: calc(12px + 1%);
    padding-left: 57px;
    transition: opacity 1s, left 1s;
    opacity: 0;
    left: -80px;
}

#objectif .end .legend {
    left: 0;
    opacity: 1;
}

#objectif .title {
    transition: opacity 1s, top 1s;
    opacity: 0;
    top: -50px;
    width: 100%;
    padding-left: 50px;
    border-left: #fdf940 7px solid;
}

#objectif .end .title {
    opacity: 1;
    top: 0;
}

#objectif .paragraphe {
    transition: opacity 1s, left 1s;
    opacity: 0;
    left: -80px;
    width: 40%;
    padding-left: 57px;
    margin-top: calc(15px + 2%);
}

#objectif .end .paragraphe {
    left: 0;
    opacity: 1;
}

#objectif [data-bg] {
    transition: transform 1s;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    mix-blend-mode: overlay;
    background-position: center right;
}

#objectif .end [data-bg] {
    transform: scale(1.05);
}

#objectif .swiper-pagination {
    position: absolute;
    left: calc(57px + (25px + 5%));
    bottom: calc(50px + 10%);
    display: flex;
    align-items: center;
}

#objectif .swiper-pagination-bullet {
    height: 3px;
    width: 35px;
    background: rgba(255, 255, 255, .5);
    border-radius: 20px;
    margin-right: 5px;
    cursor: pointer;
}

#objectif .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
}

#cible {
    color: #fff;
    padding: calc(25px + 5%);
    background: linear-gradient(-90deg, rgba(29, 29, 29, .75) 0%, rgba(29, 29, 29, .95) 100%);
}

#cible .title {
    padding-left: 50px;
    border-left: 7px solid #fdf940;
    margin-bottom: calc(25px + 3%);
}

#cible .content {
    font-size: calc(13px + 5 * (100vw - 320px) / 1080);
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    width: 80%;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}

#cible ul {
    width: 40%;
}

#cible ul li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

#cible ul li span {
    display: block;
}

#cible .cruz {
    display: block;
    color: #fdf940;
    font-size: 200%;
    margin-right: 30px;
}

#trust {
    color: #fff;
    padding: calc(25px + 5%);
    background: #252525;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#trust .title {
    padding-left: 50px;
    border-left: 7px solid #fdf940;
    margin-bottom: calc(25px + 3%);
}

#trust ul li {
    display: flex;
    align-items: center;
    font-size: calc(15px + 5 * (100vw - 320px) / 1080);
    font-weight: 500;
}

#trust ul li:not(:last-child) {
    margin-bottom: 20px;
}

#trust ul li span {
    display: block;
}

#trust .cruz {
    display: block;
    color: #fdf940;
    font-size: 180%;
    margin-right: 30px;
    width: 60px;
    font-weight: 600;
}

/************* presentation **************/

#page .cn, #preparation .cn:first-child {
    justify-content: center;
    align-items: center;
    width: 75%;
    margin: 0 auto;
}

#preparation .cn:last-child {
    margin-top: calc(25px + 5%);
}

#page picture {
    display: block;
    overflow: hidden;
    margin-right: 15%;
}

#preparation .pic {
    display: block;
    width: 30%;
    overflow: hidden;
    margin-right: calc(25px + 5%);
}

#preparation .pic img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    border-radius: 30px;
}

#page picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    border-radius: 30px;
}

#page .right, #preparation .right {
    width: 70%;
}

#page .subtitle, #page strong {
    margin: calc(25px + 2%) 0;
    padding-left: 50px;
    border-left: #fdf940 7px solid;
    line-height: 1.05;
}

#page strong {
    font-size: calc(15px + 10 * (100vw - 320px) / 1080);
    display: block;
}

#preparation .subtitle {
    padding-left: 50px;
    border-left: #fdf940 7px solid;
    line-height: 1.05;
}

#page .subtitle + div, #preparation .subtitle + div {
    padding-left: 57px;
    margin-top: calc(15px + 2%);
}

#page .right .content:last-child {
    margin-top: calc(15px + 2%);
}

#preparation .text-orange {
    margin-top: calc(10px + 1%);
}

[data-swiper="step"] {
    overflow: hidden;
}

#step {
    margin-top: calc(25px + 5%);
}

#step .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    height: 250px;
    text-align: center;
}

#step .swiper-slide .circle {
    height: 100px;
    width: 100px;
    margin-top: 10px;
}

#step .swiper-slide:not(:last-child):after {
    content: '';
    height: 2px;
    width: 20%;
    background: rgba(255, 255, 255, .1);
    position: absolute;
    right: 0;
    top: 49px;
    transform: translateX(50%);
}

#step .circle:before {
    content: '';
    height: 70%;
    width: 70%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    position: absolute;
    top: 15%;
    left: 15%;
    transform-origin: 50% 50%;
    z-index: 0;
    animation: pulse 1.5s infinite;
    transition: width .4s ease-in-out, height .4s ease-in-out, top .4s ease-in-out, left .4s ease-in-out;
}

#step picture {
    height: 30px;
    width: 30px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    background: #ccc;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease-in-out;
}

#step .swiper-slide img {
    height: 101%;
    width: 101%;
    object-fit: cover;
    visibility: hidden;
    transition: .3s ease-in-out;
}

#step .step-title {
    text-transform: uppercase;
    font-size: calc(12px + 3 * (100vw - 600px) / 1080);
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 35px;
}

#step .swiper-slide .step-text {
    font-size: 80%;
    color: rgba(255, 255, 255, .8);
    margin-top: 10px;
    width: 80%;
    opacity: 0;
    transition: .3s ease-in-out;
    line-height: 1.5;
}

#step .swiper-slide:hover .step-text {
    opacity: 1;
}

#step .swiper-slide:hover picture {
    background: transparent;
    height: 100%;
    width: 100%;
}

#step .swiper-slide:hover img {
    visibility: visible;
}

#step .swiper-slide:hover .circle:before {
    animation: none;
    height: 120%;
    width: 120%;
    top: -10%;
    left: -10%;
}

#step .nav {
    display: none;
}


@keyframes pulse {
    0% {
        opacity: .8;
        transform: scale(0.3);
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/************* consulting **************/

#consulting {
    text-align: center;
}


/************* actualités **************/

#articles .cn {
    display: flex;
    flex-wrap: wrap;
}

.art {
    width: 25%;
    padding: calc(10px + 1%);
    transition: .3s ease-in-out;
}

.art:hover {
    transform: translateY(-10px);
}

.art-title {
    padding: 0 20px;
    display: inline-block;
    text-align: center;
    font-size: calc(11px + 4 * (100vw - 320px) / 1080);
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #f9f9f9;
    line-height: 1.5;
}

.art .paragraphe {
    font-size: calc(10px + 2 * (100vw - 320px) / 1080);
    color: #3a3a3a;
    line-height: 1.3;
    margin-top: calc(10px + 1%);
    opacity: .6;
}

.art picture {
    display: block;
    height: calc(200px + 70 * (100vw - 320px) / 1080);
    width: 100%;
}

.art img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 25px;
}

#show .cn {
    display: flex;
    justify-content: center;
}

#show .subtitle {
    margin-bottom: calc(15px + 2%);
}

#show div.paragraphe img {
    float: right;
    margin: 2% 0 2% 2%;
}


/* Contact */

#contact .flex {
    justify-content: center;
}

#contact [data-bg]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(29, 29, 29, 0) 0%, rgba(29, 29, 29, 0.95) 100%);
}

#contact [data-bg] {
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
}

#contact .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#contact .bn {
    margin-top: 0;
}

#contact p {
    margin-bottom: calc(25px + 3%);
}

#contact .form-bloc {
    width: 50%;
}

#contact .address {
    width: 40%;
    line-height: 2;
    color: #f9f9f9;
    font-weight: 500;
    font-size: calc(12px + 2 * (100vw - 320px) / 1080);
    margin-right: calc(25px + 3%);
}

#contact strong {
    font-size: 150%;
}

#contact .map-pin {
    font-weight: 500;
    font-size: 110%;
}

#contact .pin {
    margin-right: 10px;
}

#contact iframe {
    margin-top: calc(25px + 3%);
    height: 500px;
    width: 80%;
}

/* Form */

.form-flex {
    display: flex;
}

.form-flex .form-group {
    width: 50%;
}

.form-flex .form-group:first-child {
    margin-right: 20px;
}

.form-group {
    margin-bottom: 30px;
}

label {
    margin-bottom: 10px;
    display: block;
    cursor: pointer;
    font-weight: 600;
    font-size: calc(12px + 2 * (100vw - 320px) / 1080);
    color: rgba(255, 255, 255, .7);
}

.form-control {
    padding: 1.25rem;
    border: 1px solid #cdcdcd;
    transition: border .3s cubic-bezier(.215, .61, .355, 1);
    border-radius: 5px;
    color: #ddd;
    font-weight: 500;
    width: 100%;
}

.form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .10);
}

textarea.form-control {
    height: auto;
}

/* Legal */

#legal .cn .subtitle:not(:first-child) {
    margin-top: calc(10px + 2%);
}

#legal .cn .subtitle {
    margin-bottom: calc(10px + 1%);
}

#legal a {
    opacity: .6;
    display: block;
}

#legal a:hover {
    opacity: 1;
    color: #fdf940;
}


/*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/

/************* min 851 **************/
@media screen and (min-width: 851px) {

    #nav nav > ul {
        margin-bottom: 0;
        line-height: 1;
        display: flex;
    }

    #nav nav > ul > li {
        padding: 0 calc(15px + 20 * (100vw - 850px) / 1080);;
    }

    #nav nav > ul > li:first-child {
        display: none;
    }

    #nav nav > ul > li > a:hover:before {
        width: 100%;
    }

    /*
    #nav nav > ul > li[data-sub] > a:after{transition:.2s;margin-left:8px;font-size:10px;top:-1px;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}
    #nav nav > ul > li[data-sub] > a.open:after{transform:rotate(180deg);top:0;}
    */
    #nav nav > ul > li ul {
        display: block !important;
        transition: .4s;
        opacity: 0;
        visibility: hidden;
        text-align: center;
        padding: 0;
        color: #fff;
        background: #252525;
        position: absolute;
        min-width: 200px;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }

    #nav nav > ul > li > a.open + ul {
        opacity: 1;
        visibility: visible;
        top: 40px;
    }

    #nav nav > ul > li ul li {
        padding: 7px 5px;
        display: block;
    }

    #nav nav > ul > li ul li > *:not(ul) {
        padding: 20px 10px;
        font-weight: 500;
        display: block;
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 2px;
    }

    #nav nav > ul > li ul li ul {
        position: absolute;
        left: 100%;
        top: 0;
    }

    #nav nav > ul > li ul:before {
        content: '';
        height: 50px;
        width: 50px;
        background: #252525;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        z-index: -1;
    }

    #nav nav > ul > li ul li ul.left {
        left: auto;
        right: 100%;
    }

    #nav nav > ul > li ul li ul:hover,
    #nav nav > ul > li ul li *:hover + ul {
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
    }

}

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

    #contact .form-bloc {
        width: 70%;
    }

    #page .cn, #preparation .cn {
        width: 100%;
        align-items: flex-start;
    }

    #preparation .cn:first-child {
        width: 100%;
        align-items: flex-start;
    }

}

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

    #intro .title + div, #objectif .paragraphe {
        width: 60%;
    }

    #intro .bg {
        mix-blend-mode: overlay;
    }

    #objectif [data-bg] {
        opacity: .7;
    }

    #cible .content {
        width: 100%;
    }

    .art {
        width: 33.33%;
    }
}


/************* max 1100 **************/
@media screen and (max-width: 1100px) {
    #ban {
        height: 30vh;
    }

    #ban .content {
        padding-top: 50px;
    }
}

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

    #footer .cn {
        flex-direction: column;
        font-size: 12px;
    }

    #footer .left {
        text-align: center;
    }

    #footer .right ul {
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #step .swiper-slide {
        height: auto;
    }

    #step .swiper-slide .circle {
        height: 200px;
        width: 200px;
    }

    #step .swiper-slide picture {
        background: transparent;
        height: 100%;
        width: 100%;
        border: 10px solid rgba(255, 255, 255, .1);
    }

    #step .swiper-slide img {
        visibility: visible;
    }

    #step .swiper-slide:not(:last-child):after {
        display: none;
        line-height: 1.1;
    }

    #step .swiper-slide .step-text {
        font-size: 90%;
        width: 50%;
        opacity: 1;
    }

    #step .swiper-slide .circle::before {
        display: none;
    }

    #step .nav {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
    }


}


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

    #header .cn {
        font-size: 12px;
    }

    [data-nav] {
        display: flex;
        margin-right: 20px;
    }

    #nav {
        z-index: 999;
        transform: translateX(-100%);
        transition: box-shadow .6s, transform .6s;
        width: 100vw;
        overflow: hidden;
        text-transform: uppercase;
        text-align: center;
        font-size: calc(15px + 7 * (100vw - 320px) / 1080);
        letter-spacing: 4px;
        font-weight: 600;
        color: #fff;
        background: #252525;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }

    .openNav #nav {
        transform: translateX(0);
    }

    #nav nav {
        overflow-y: scroll;
        height: 60vh;
        width: 150vw;
    }

    #nav nav > ul {
        margin-bottom: 0;
        margin-left: 0;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    #nav nav > ul li {
        transition: .6s;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
    }

    #nav nav > ul li:nth-child(2) {
        border-top: 1px solid rgba(0, 0, 0, .2);
    }

    #nav nav > ul > li:not(.show) {
        opacity: 0;
        top: -50px;
    }

    #nav nav > ul > li.show {
        top: 0;
        opacity: 1;
    }

    #nav nav > ul > li:first-child {
        cursor: pointer;
        padding: 10px 15px;
        font-size: 11px;
        opacity: .5;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: none;
    }

    #nav nav > ul > li:hover:first-child {
        opacity: 1;
    }

    #nav nav > ul li a {
        padding: calc(22px + .6%) calc(20px + .6%) calc(20px + .6%);
        display: block;
    }

    #nav nav > ul li a:hover {
        color: #fdf940;
    }

    #nav nav > ul li[data-sub] > a:after {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: calc(50px + 1.2%);
        position: absolute;
        height: 100%;
        right: 0;
        background: rgba(255, 255, 255, .05);
        border-left: 1px solid rgba(0, 0, 0, .5);
        transition: .2s;
        font-size: 16px;
        top: 0;
        content: '\f078';
        font-family: 'Font Awesome 5 Pro';
        font-weight: 300;
    }

    #nav nav > ul li[data-sub] > a.open:after {
        content: '\f077';
    }

    #nav nav > ul li ul {
        background: rgba(0, 0, 0, .2);
        display: none;
        border-top: 1px solid rgba(0, 0, 0, .2);
    }

    #nav nav > ul li ul li a {
        font-size: calc(13px + 7 * (100vw - 320px) / 1080);
        padding: calc(18px + .6%) calc(20px + .6%) calc(16px + .6%);
    }

    #slider {
        height: 85vh;
    }

    #slider .cn {
        text-align: center;
        justify-content: center;
    }

    #intro .title + div, #objectif .paragraphe {
        width: 100%;
    }

    #intro .bg {
        mix-blend-mode: overlay;
    }

    #objectif .swiper-wrapper {
        height: 500px;
    }

    #cible .content {
        flex-direction: column;
    }

    #cible ul {
        width: 100%;
    }

    #contact .form-bloc {
        width: 100%;
    }

    #page .flex {
        flex-direction: column;
    }

    #page .right {
        width: 100%;
    }

    #page picture {
        height: 300px;
        margin-right: 0;
    }

    #page .subtitle, #preparation .subtitle, #page strong {
        padding-left: 20px;
        border-width: 4px;
    }

    #page .subtitle + div, #preparation .subtitle + div {
        padding-left: 24px;
    }

    .art {
        width: 50%;
    }

    #show .paragraphe img {
        float: none !important;
        margin: 2% !important;
        width: 100% !important;
        height: 100% !important;
    }
}

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

    #page .flex, #preparation .flex {
        flex-direction: column;
    }

    #page .right, #preparation .right {
        width: 100%;
    }

    #page picture, #preparation .pic {
        width: 100%;
        height: 300px;
        margin-bottom: calc(25px + 5%);
    }

    #page img, #preparation img {
        object-position: top;
    }

    #step .swiper-slide .step-text {
        width: 100%;
    }

}

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

    #slider {
        height: 70vh;
    }

    #slider p {
        display: none;
    }

    #slider .rs {
        left: 50%;
        transform: translateX(-50%);
    }

    #slider .end .rs {
        bottom: 40px;
    }

    #intro .title {
        padding-right: 20px;
        border-width: 4px;
    }

    #objectif .title {
        padding-left: 20px;
        border-width: 4px;
    }

    #intro .title + div {
        padding-right: 24px;
    }

    #objectif .paragraphe, #objectif .legend {
        padding-left: 24px;
    }

    #services .title, #cible .title, #trust .title {
        padding-left: 20px;
        border-width: 4px;
    }

    #objectif .swiper-pagination {
        left: calc(24px + (25px + 5%));
        bottom: calc(30px + 7%);
    }

    #objectif .swiper-wrapper {
        height: 450px;
    }

    #trust .cruz {
        margin-right: 20px;
        width: 40px;
    }

    .form-flex {
        flex-direction: column;
    }

    .form-flex .form-group {
        width: 100%
    }

    .form-flex .form-group:first-child {
        margin-right: 0;
    }
}

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

    #header .cn {
        font-size: 11px;
    }

    [data-nav] {
        display: flex;
        margin-right: 10px;
        opacity: .9;
    }

    [data-nav] > div {
        width: 20px;
    }

    .art {
        width: 100%;
    }

}