/* RESET (déjà dans Bootstrap) */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    font-size: 100%;
    font-style: inherit;
    font-weight: 400;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    position: relative;
}
sup {
    vertical-align: super;
    font-size: 75%;
    font-weight: inherit;
}
span {
    font-weight: inherit;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    display: block;
    background-color: white;
    height: 100%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
html,
body {
    font-size: 16px;
    /* font-family: 'Oswald', sans-serif; */
    font-family: 'Ubuntu', sans-serif;
    /* font-family: "Montserrat", Arial, sans-serif; */
    font-weight: normal;
    color: #282c37;
    width: 100%;
    min-height: 100%;
}

/* Responsive */
@media screen and (max-width: 1600px) {
    html,
    body {
        font-size: 14px;
    }
    @media screen and (max-width: 1400px) {
        html,
        body {
            font-size: 13px;
        }
    }
}
@media screen and (min-width: 2500px) {
    html,
    body {
        font-size: 22px;
    }
    @media screen and (min-width: 3500px) {
        html,
        body {
            font-size: 32px;
        }
    }
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption,
th,
td {
    font-weight: normal;
    text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}
blockquote,
q {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    quotes: none;
}
a {
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    color: inherit;
}
a:hover,
a:active {
    outline: 0;
}
a img {
    border: 0;
}
select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    background-image: none;
}
select option {
    font-style: inherit;
    font-size: inherit;
}
select:focus {
    background-image: none;
}
input,
select,
button,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: 400;
    padding: 0;
    color: inherit;
    outline: none;
}
datalist {
    display: block;
}
img {
    vertical-align: bottom;
    border: 0;
    outline: 0;
}
z
.clear-after:after {
    content: "";
    display: block;
    clear: both;
}
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.middle-holder {
    display: table;
    height: 100%;
    width: 100%;
}
.middle-holder .middle {
    vertical-align: middle;
    width: 100%;
    display: table-cell;
}
.center-holder {
    text-align: center;
}
.left-holder {
    text-align: left;
}
.right-holder {
    text-align: right;
}
/* Marges */
.centered-small {
    display: block;
    width: calc(100% - 10em);
    max-width: 70em;
    box-sizing: border-box;
    margin: 0 auto;
    height: 100%;
}
.centered-thin {
    display: block;
    width: calc(100% - 10em);
    max-width: 85em;
    box-sizing: border-box;
    margin: 0 auto;
    height: 100%;
}
.centered-wide {
    display: block;
    width: calc(100% - 10em);
    max-width: 90em;
    box-sizing: border-box;
    margin: 0 auto;
    height: 100%;
}
.centered-semiwide {
    display: block;
    width: calc(100% - 10em);
    max-width: 96em;
    box-sizing: border-box;
    margin: 0 auto;
    height: 100%;
display: flex;align-items: center;}
.centered-large {
    display: block;
    width: calc(100% - 10em);
    max-width: 100em;
    box-sizing: border-box;
    margin: 0 auto;
    height: 100%;
}
/* Padding */
.left-pad-2 {
    padding-left: 2em;
}
.right-pad-2 {
    padding-right: 2em;
}
.left-pad-3 {
    padding-left: 3em;
}
.right-pad-3 {
    padding-right: 3em;
}
.left-pad-4 {
    padding-left: 4em;
}
.right-pad-4 {
    padding-right: 4em;
}
.left-pad-5 {
    padding-left: 5em;
}
.right-pad-5 {
    padding-right: 5em;
}
.left-pad-6 {
    padding-left: 6em;
}
.right-pad-6 {
    padding-right: 6em;
}
.left-pad-8 {
    padding-left: 8em;
}
.right-pad-8 {
    padding-right: 8em;
}
.left-pad-10 {
    padding-left: 10em;
}
.right-pad-10 {
    padding-right: 10em;
}
.left-pad-12 {
    padding-left: 12em;
}
.right-pad-12 {
    padding-right: 12em;
}
.left-pad-15 {
    padding-left: 15em;
}
.right-pad-15 {
    padding-right: 15em;
}
.left-pad-18 {
    padding-left: 18em;
}
.right-pad-18 {
    padding-right: 18em;
}
.left-pad-20 {
    padding-left: 20em;
}
.right-pad-20 {
    padding-right: 20em;
}
.top-pad-1 {
    padding-top: 1em;
}
.bot-pad-1 {
    padding-bottom: 1em;
}
.bot-pad-05 {
    padding-bottom: 0.5em;
}
.top-pad-6 {
    padding-top: 6em;
}
.bot-pad-6 {
    padding-bottom: 6em;
}
.top-pad-7 {
    padding-top: 7em;
}
.bot-pad-7 {
    padding-bottom: 7em;
}
.v-pad-10 {
    padding-top: 10em;
    padding-bottom: 10em;
}
/* Forme auto */
img.square {
    width: 100%;
    outline: 0;
    vertical-align: middle;
}
img.square-fit {
    object-fit: contain;
    object-position: center center;
    height: 100%;
    width: 100%;
    outline: 0;
    vertical-align: middle;
}
/* Carousel */
.slick-list {
    height: 100%;
}
.slick-list .slick-track {
    height: 100%;
}
/* Flottants */
.inline-block {
    display: inline-block;
}
.float {
    float: left;
}
.float.right {
    float: right;
}
/* Flexibles */
.flexbox {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    flex-wrap: wrap;
}
.flexbox .flex {
    flex: 1;
}
/* Grilles */
.gridbox {
    display: grid;
    display: -webkit-grid;
    display: -ms-grid;
}
.gridbox.three {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr));
    grid-template-columns: repeat(
        auto-fill,
        minmax(-webkit-calc(100% / 3), 1fr)
    );
}

/* Basique mobile */
.hide-mobile {
    display: block;
}
.only-mobile {
    display: none;
}
@media screen and (max-width: 900px) {
    .hide-mobile {
        display: none;
    }
    .only-mobile {
        display: block;
    }
}

/* Dimensions */
.half {
    position: relative;
    width: 50%;
}
.quarter {
    position: relative;
    width: 25%;
}
.third {
    position: relative;
    width: calc(100% / 3);
    width: -webkit-calc(100% / 3);
}
.two-third {
    position: relative;
    width: calc((100% / 3) * 2);
    width: -webkit-calc((100% / 3) * 2);
}
.three-quarter {
    position: relative;
    width: 75%;
}
.width-60 {
    position: relative;
    width: 60%;
}
.width-40 {
    position: relative;
    width: 40%;
}
.fitheight {
    height: 100%;
    height: calc(100%);
    height: -webkit-calc(100%);
}
.fitheight-nextscreen {
    height: calc(100% - 8.5em);
    height: -webkit-calc(100% - 8.5em);
}
.fitheight-nextscreen-middle {
    margin-top: 6.5em;
    height: calc(100% - 15em);
    height: -webkit-calc(100% - 15em);
}
.min-height-letter {
    min-height: 34em;
}
/* Mobile */
@media screen and (max-width: 900px) {
    .fitheight-nextscreen {
        height: calc(100% - 2em);
        height: -webkit-calc(100% - 2em);
    }
}

/* CHARTE */
/* Titres */
h1 {
    font-size: 281.25%;
    color: inherit;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.article-content h1,
h2 {
    font-size: 237.5%;
    color: inherit;
    font-weight: bold;
    letter-spacing: 0.025em;
}
.article-content h2,
h3 {
    font-size: 187.5%;
    color: inherit;
    font-weight: bold;
    letter-spacing: 0.045em;
}
h4 {
    font-size: 100%;
    color: inherit;
    letter-spacing: 0.076em;
}
/* Mobile */
@media screen and (max-width: 900px) {
    h1 br,
    h2 br,
    h3 br,
    h4 br {
        display: none;
    }
    h1 {
        font-size: 255%;
        line-height: 1.15em;
    }
    h2 {
        font-size: 200%;
        line-height: 1.2em;
    }
    h3 {
        font-size: 175%;
        line-height: 1.1em;
    }
    h4 {
        font-size: 120%;
    }
}
/* Textes */
.t-strong {
    font-size: 100%;
    line-height: 1.25em;
    font-weight: 600;
    letter-spacing: 0.076em;
}
.t-regular,
.regular-content p {
    font-size: 100%;
    line-height: 1.325em;
    font-weight: 500;
    letter-spacing: 0.076em;
}
.t-small {
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 600;
    letter-spacing: 0.09em;
}
.t-ssmall {
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
}
.t-xsmall {
    font-size: 70%;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
}
/* Mobile */
@media screen and (max-width: 900px) {
    .t-regular,
    .regular-content p {
        line-height: 1.475em;
    }
}
/* Liens */
.a-input {
    display: inline-block;
    font-size: 100%;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.a-input-small {
    display: inline-block;
    font-size: 72%;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.a-regular {
    display: inline-block;
    font-size: 100%;
    text-decoration: underline;
    line-height: 1.325em;
    font-weight: 500;
    letter-spacing: 0.076em;
}
.a-small {
    display: inline-block;
    font-size: 81.25%;
    text-decoration: underline;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
}
.a-lang {
    display: inline-block;
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 600;
    letter-spacing: 0.09em;
    opacity: 0.5;
    cursor: pointer;
}

.a-lang.current {
    opacity: 1;
}
/* Label gammes */
.g-label {
    font-size: 100%;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.1875em;
    text-transform: uppercase;
    width: 10em;
    padding: 0.5em 0;
    text-align: center;
    color: white;
}
/* Navigation */
.t-nav-pri {
    font-size: 187.5%;
    font-weight: 600;
    font-style: italic;
    line-height: 1.24em;
    letter-spacing: 0.078em;
}
.t-nav-sec {
    font-size: 156.25%;
    font-weight: 500;
    font-style: italic;
    line-height: 1.8em;
    letter-spacing: 0.094em;
    color: white;
}
/* Mobile */
@media screen and (max-width: 900px) {
    .t-nav-pri {
        font-size: 125%;
        font-weight: 500;
        letter-spacing: 0.076em;
        font-style: normal;
    }
    .t-nav-sec {
        font-size: 100%;
        font-weight: 600;
        letter-spacing: 0.09em;
        line-height: 1.25em;
    }
}
/* Couleurs */
/* Primaires */
.t-pcolor-1 {
    color: #282c37;
}
.b-pcolor-1 {
    background-color: #282c37;
}
.t-pcolor-2 {
    color: #999999;
}
.b-pcolor-2 {
    background-color: #999999;
}
.t-pcolor-3 {
    color: #dfedf3;
}
.b-pcolor-3 {
    background-color: #dfedf3;
}
.t-pcolor-4 {
    color: #ffffff;
}
.b-pcolor-4 {
    background-color: #ffffff;
}
/* Secondaires */
.t-scolor-1 {
    color: #0de0b8;
}
.b-scolor-1 {
    background-color: #0de0b8;
}
.t-scolor-2 {
    color: #eaf3f7;
}
.b-scolor-2 {
    background-color: #eaf3f7;
}
.t-scolor-3 {
    color: #f5f9fb;
}
.b-scolor-3 {
    background-color: #f5f9fb;
}
/* Gammes */
.t-gcolor-1 {
    color: #0de0b8;
}
.b-gcolor-1 {
    background-color: #0de0b8;
}
.t-gcolor-2 {
    color: #eaf3f7;
}
.b-gcolor-2 {
    background-color: #eaf3f7;
}
.t-gcolor-3 {
    color: #f5f9fb;
}
.b-gcolor-3 {
    background-color: #f5f9fb;
}
/* Boutons */
.btn-outline {
    position: relative;
    display: inline-block;
    height: 2.75em;
    line-height: 2.75em;
    padding: 0 2em;
    border-color: #282c37;
    box-sizing: border-box;
    cursor: pointer;
}
.btn-outline.blue {
    border-color: #282c37;
}
.btn-outline.red {
    border-color: #999999;
}
.btn-outline:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2.25px solid #282c37;
    border-color: inherit;
    border-radius: 1.375em;
}
.btn-outline.from-left:before {
    top: 50%;
    left: 1.375em;
    opacity: 0;
}
.btn-outline.from-center:before {
    top: 50%;
    left: 50%;
    opacity: 0;
}
.btn-outline.blue-back:before {
    background-color: #282c37;
}
.btn-outline.white-back:before {
    background-color: white;
}
.btn-outline .in {
    font-size: 86%;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}
.btn-outline.from-left .in,
.btn-outline.from-center .in {
    opacity: 0;
}
.btn-outline.big {
    height: 3.375em;
    line-height: 3.375em;
}
.btn-outline.big:before {
    border-radius: 1.6875em;
}
.btn-outline.big .in {
    font-size: 100%;
}
/* Couleurs boutons */
.btn-outline.white-back-hover:hover:before {
    background-color: #282c37;
}
.btn-outline.blue-back-hover:hover:before {
    background-color: #282c37;
}
.btn-outline.red-back-hover:hover:before {
    background-color: #999999;
}
.btn-outline.white-hover:hover .in {
    color: white;
}
.btn-outline.blue-hover:hover .in {
    color: #282c37;
}
/* Transitions */
.btn-outline:before {
    transition: background-color 0.25s, border-color 0.25s;
    -webkit-transition: background-color 0.25s, border-color 0.25s;
}
.btn-outline .in {
    transition: color 0.25s;
    -webkit-transition: color 0.25s;
}

/* FORMULAIRES */
.form-container.form-sent .form-content {
    opacity: 0;
    pointer-events: none;
}
.form-container .form-success {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
.form-container.form-sent .form-success {
    opacity: 1;
}
.form-container .form-success .thanks {
    /* font-family: "Mirador"; */
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 281.25%;
    text-align: center;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
/* CF7 */
.wpcf7-form {
    text-align: left;
}
.wpcf7-form .line label {
    display: block;
    width: 100%;
    border-bottom: 1px solid #999999;
}
.wpcf7-form .line label input,
.wpcf7-form .line label textarea,
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-form .wpcf7-response-output {
    display: block;
    width: 100%;
    resize: none;
    border: none;
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
    background-color: rgba(0, 0, 0, 0);
}
.wpcf7-form .line label textarea {
    height: 6em;
}
.wpcf7-form .line + .line {
    margin-top: 2.25em;
}
.wpcf7-form .line .half {
    float: left;
    width: calc(50% - 1em);
    width: -webkit-calc(50% - 1em);
}
.wpcf7-form .line .half + .half {
    float: right;
}
.wpcf7-form .line:after {
    content: "";
    display: block;
    clear: both;
}
.wpcf7-form .btn-input {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.wpcf7-form .btn-input .ajax-loader {
    display: none;
    opacity: 0;
    position: absolute;
    top: 1.25em;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
}
.wpcf7-form .btn-input input {
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-transform: inherit;
    outline: none;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.wpcf7-form .center-holder {
    margin-top: 1.5em;
}
.wpcf7-form .wpcf7-response-output {
    display: none !important;
}
/* SENDINBLUE */
.sib-form #sib-form {
    text-align: center;
}
.sib-form .btn-input {
    margin-top: 3em;
}
.sib-form .btn-input input {
    opacity: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-transform: inherit;
    outline: none;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sib-form .line label {
    display: block;
    width: 100%;
    border-bottom: 1px solid #999999;
}
.sib-form .line label input {
    display: block;
    padding: 0 !important;
    width: 100%;
    height: auto;
    resize: none;
    border: none;
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
    background-color: rgba(0, 0, 0, 0);
}
.sib-form .line label .error-message {
    display: none;
    width: 100%;
    color: #dc3232;
    font-size: 81.25%;
    line-height: 1.4615em;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-align: left;
}
.sib-form .line label input.error + .error-message {
    display: block;
}
/* RECAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}
.wpcf7-form .captcha-alert {
    font-size: 75%;
    opacity: 0.6;
    max-width: calc(100% - 4em);
    margin: 0 auto;
    text-align: center;
    margin-top: 2em;
}
.wpcf7-form .captcha-alert a {
    text-decoration: underline;
}

/* HEADER */
header {
    position: absolute;
    z-index: 75;
    top: 0;
    left: 0;
    padding-top: 3em;
    text-align: center;
    width: 100%;
}
header .logo {
    position: relative;
    display: inline-block;
}
header .logo img {
    vertical-align: middle;
    height: 2.375em;
}
header .logo img.image-light {
    display: none;
}
header .languages {
    position: absolute;
    left: 3em;
    text-align: left;
}
header .languages a {
    position: relative;
    text-transform: uppercase;
}
header .languages a + a {
    padding-left: 0.5em;
    margin-left: 0.5em;
}
header .languages a + a:before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: 50%;
    height: 0.75em;
    width: 1px;
    margin-top: -0.375em;
    background-color: #282c37;
}
/* Clair */
header.light {
    color: white;
}
header.light .logo img.image-dark {
    display: none;
}
header.light .logo img.image-light {
    display: block;
}
header.light .languages a + a:before {
    background-color: rgba(255, 255, 255, 0.1);
}
/* MDPI */
@media screen and (max-width: 1400px) {
    header .languages {
        left: 1.75em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        body.opened-nav header {
            position: fixed;
            z-index: 101;
        }
        header .languages {
            display: none;
            left: auto;
            right: 3em;
        }
        body.opened-nav .logo img.image-dark {
            display: block !important;
        }
        body.opened-nav .logo img.image-light {
            display: none !important;
        }
    }
}

/* Bouton menu */
.btn-menu {
    position: fixed;
    z-index: 102;
    top: 3em;
    right: 3em;
    width: 2.1em;
    height: 2.1em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
body.opened-popup .btn-menu {
    display: none;
}
.btn-menu .picto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.btn-menu .picto .arrow {
    position: absolute;
    left: 0;
    top: 15%;
    width: 100%;
    height: 70%;
    opacity: 0;
    text-align: right;
}
.btn-menu .picto .arrow svg {
    height: 100%;
}
.btn-menu .line {
    position: absolute;
    right: 0;
    height: 3px;
    background-color: #282c37;
}
.btn-menu .line:nth-child(1) {
    top: 0;
    width: 100%;
}
.btn-menu .line:nth-child(2) {
    top: 50%;
    margin-top: -1px;
    width: 66%;
}
.btn-menu .line:nth-child(3) {
    bottom: 0;
    margin-top: -1px;
    width: 40%;
}
/* Clair */
.btn-menu.light .line {
    background-color: white;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    .btn-menu {
        right: 1.75em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        .btn-menu {
            position: fixed;
            top: 50vh;
            right: 0;
            width: 3em;
            height: 20em;
            max-height: 50%;
        }
        .btn-menu .handler {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter: drop-shadow(-0.25em 0 1.15em rgba(2, 54, 70, 0.2));
        }
        .btn-menu:after {
            content: "";
            display: block;
            position: absolute;
            left: 100%;
            top: -1.5em;
            bottom: -1.5em;
            width: 2.75em;
        }
        .btn-menu .picto {
            top: 50%;
            left: 50%;
            width: 1.6em;
            height: 1.6em;
            margin-top: -0.8em;
            margin-left: -0.8em;
            text-align: center;
        }
        .btn-menu .line {
            height: 2px;
        }
        .btn-menu.light .line {
            background-color: #282c37;
        }
    }
}

/* FOOTER */
footer {
    background-color: #282c37;
    color: white;
    width: 100%;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transition: transform 1s, -webkit-transform 1s;
}
footer .row {
    padding: 3em 0;
}
footer .row.spktr {
    padding: 0 0 1em 0;
}
footer .col {
    width: 20em;
}
footer .col .image-light {
    width: 50%;
    height: auto;
    object-fit: cover;
    margin-top: -0.5em;
}
footer .col:nth-child(1) {
    width: 17.5em;
}
footer .social-sharing {
    position: absolute;
    float: none;
    right: 0;
    top: 0;
    bottom: 0;
}
footer .scrolltop-container {
    position: absolute;
    z-index: 80;
    bottom: 100%;
    left: 100%;
    bottom: calc(100% + 16em);
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    writing-mode: vertical-rl;
    min-height: 10em;
    cursor: pointer;
}
footer .scrolltop-container .scrolltop:after {
    position: absolute;
    content: "";
    display: block;
    left: 50%;
    margin-left: -1.25em;
    top: 100%;
    margin-top: 3em;
    height: 1em;
    width: 2em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
footer #footer-handler {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transition: transform 1s, -webkit-transform 1s;
}
footer.folded #footer-handler:hover .cls-footer-handler {
    fill: #282c37;
}
footer #footer-handler .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.3125em;
    height: 0.5625em;
    margin-top: -0.28125em;
    margin-left: -0.15625em;
}
footer #footer-handler .arrow svg {
    display: block;
    transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
}
footer #footer-handler:hover .arrow svg path {
    fill: #999999;
}
footer.folded #footer-handler:hover .arrow svg path {
    fill: #ffffff;
}
footer #footer-handler > svg {
    height: 100%;
}
footer.folded {
    transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
}
footer.folded #footer-handler {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
    transform: translate(-100%, 0) scale(-1, 1);
    -webkit-transform: translate(-100%, 0) scale(-1, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
/* Mobile */
@media screen and (max-width: 900px) {
    footer .col:nth-child(3) {
        width: 100%;
        display: flex;
    }
    footer .col:nth-child(3) .line {
        float: left;
        width: 50%;
        font-size: 125%;
    }
    footer .col:nth-child(3) .line:nth-child(2) {
        text-align: right;
    }
    footer .col:nth-child(3) .line:nth-child(3) {
        float: right;
        text-align: right;
        margin-top: 0.25em;
    }
    footer .social-sharing {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        text-align: center;
        margin-top: 2.5em;
    }
    footer .social-sharing a:nth-child(1) {
        float: left;
    }
    footer .social-sharing a:nth-child(3) {
        float: right;
    }
    footer .social-sharing a + a {
        margin-left: 0;
    }
    footer .scrolltop-container {
        left: calc(100% + 1.75em);
        left: -webkit-calc(100% + 1.75em);
    }
}
/* Scrolltop masqué sur certaines pages */
.single-produit footer .scrolltop-container,
.page-nos-sites-de-production footer .scrolltop-container,
.single-site-de-production footer .scrolltop-container,
.page-contact footer .scrolltop-container,
.single-post footer .scrolltop-container,
.page-actualites footer .scrolltop-container,
.page-recrutement footer .scrolltop-container,
.page-notre-histoire footer .scrolltop-container,
.single-offre-emploi footer .scrolltop-container,
.error404 footer .scrolltop-container,
.search footer .scrolltop-container {
    display: none;
}

/* MENU PRINCIPAL */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 100vh;
}
body:not(.opened-nav) nav,
body:not(.opened-nav) nav * {
    pointer-events: none !important;
}
nav .layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
nav .layer.back,
nav .layer.fore {
    opacity: 0;
}
nav .layer.back .half {
    float: left;
    background-color: rgba(255, 255, 255, 0.46);
}
nav .layer.back .half + .half {
    background-color: rgba(2, 54, 70, 0.25);
}
nav .layer.fore .half .main-menu {
    display: inline-block;
}
nav .layer.fore .half .main-menu .menu-item {
    padding: 0 8em 0 3em;
}
nav .layer.fore .half .main-menu .menu-item + .menu-item {
    padding-top: 0.75em;
}
nav .layer.fore .half .main-menu .menu-item .t-nav-pri,
nav .layer.fore .half .main-menu .menu-item .t-nav-sec {
    position: relative;
    transition: color 0.25s;
    -webkit-transition: color 0.25s;
    opacity: 0;
}
nav .layer.fore .half .main-menu .menu-item .menu-submenu {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -21.25em;
    padding: 20em 0;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
nav .layer.fore .half .main-menu .menu-item .menu-submenu .menu-subitem {
    padding: 0 3em 0 8em;
}
nav .layer.fore .half .main-menu .menu-item.current-page .t-nav-pri:after,
nav .layer.fore .half .main-menu .menu-subitem.current-page .t-nav-sec:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -0.1em;
    right: -0.1em;
    margin-top: 0.05em;
    height: 2.5px;
    background-color: #999999;
}
/* Interactions */
nav .layer.fore .half .main-menu .menu-item:hover .t-nav-pri,
nav
    .layer.fore
    .half
    .main-menu
    .menu-item:hover
    .menu-submenu
    .menu-subitem:hover
    .t-nav-sec {
    color: #999999;
}
nav .layer.fore .half .main-menu .menu-item.current-page .menu-submenu {
    opacity: 1;
    pointer-events: auto;
}
/* Sous menus masqués (sauf hover) au hover sur un des items de premier niveau */
nav .layer.fore .half .main-menu .menu-item:hover .menu-submenu {
    opacity: 1;
    pointer-events: auto;
}
nav .layer.fore .half .main-menu:hover .menu-item:not(:hover) .menu-submenu {
    opacity: 0;
    pointer-events: none;
}
/* Cercles */
nav .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2.5px solid #999999;
    border-radius: 50%;
    pointer-events: none;
}
/* Mobile */
@media screen and (max-width: 900px) {
    nav {
        right: auto;
        width: calc(100vw - 6em);
        width: -webkit-calc(100vw - 6em);
        left: 100%;
        opacity: 1;
    }
    nav .layer.fore {
        opacity: 1;
    }
    nav .layer.back {
        opacity: 1;
        background-color: white;
        border-top-left-radius: 4em;
        border-bottom-left-radius: 4em;
        box-shadow: 0 0 3em rgba(2, 54, 70, 0.3);
    }
    nav .layer.fore .right-holder {
        text-align: left;
        padding: 0 1.25em 0 4em;
    }
    nav .layer.fore .half {
        float: none;
        width: 100%;
    }
    nav .layer.fore .half .main-menu {
        display: block;
    }
    nav .layer.fore .half .main-menu .menu-item {
        display: block;
        padding: 0;
        width: 100%;
    }
    nav .layer.fore .half .main-menu .menu-item + .menu-item {
        padding-top: 0;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-submenu {
        display: none;
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0;
        opacity: 1;
        padding: 0;
        width: 100%;
        border-top: 2px solid #dfedf3;
        border-bottom: 2px solid #dfedf3;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-submenu .menu-subitem {
        padding: 0;
        text-align: center;
    }
    nav .layer.fore .half .main-menu .menu-item.opened .menu-submenu {
        display: block;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-head {
        padding: 1.5em 0;
    }
    nav .layer.fore .half .main-menu .menu-item .t-nav-sec {
        color: inherit;
    }
    nav .layer.fore .half .main-menu .menu-item .t-nav-pri,
    nav .layer.fore .half .main-menu .menu-item .t-nav-sec {
        opacity: 1;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-submenu .menu-subitem {
        padding: 1.5em 0;
    }
    nav
        .layer.fore
        .half
        .main-menu
        .menu-item
        .menu-submenu
        .menu-subitem
        + .menu-subitem {
        padding-top: 0.75em;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-head .btn-dropdown {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -1.5em;
        width: 3em;
        height: 3em;
        line-height: 3em;
        text-align: center;
    }
    nav .layer.fore .half .main-menu .menu-item .menu-head .btn-dropdown svg {
        width: 40%;
    }
    nav
        .layer.fore
        .half
        .main-menu
        .menu-item.opened
        .menu-head
        .btn-dropdown
        svg {
        transform: scale(1, -1);
        -webkit-transform: scale(1, -1);
    }
    nav
        .layer.fore
        .half
        .main-menu
        .menu-item.opened
        .menu-head
        .btn-dropdown
        svg
        path {
        fill: #999999;
    }
    nav .layer.fore .half .main-menu .menu-item:hover .t-nav-pri,
    nav
        .layer.fore
        .half
        .main-menu
        .menu-item:hover
        .menu-submenu
        .menu-subitem:hover
        .t-nav-sec {
        color: #282c37;
    }
    nav .layer.fore .half .main-menu .menu-item:hover .menu-submenu {
        opacity: initial;
        pointer-events: initial;
    }
    nav
        .layer.fore
        .half
        .main-menu:hover
        .menu-item:not(:hover)
        .menu-submenu {
        opacity: initial;
        pointer-events: initial;
    }
}

/* MENU OUVERT/APRES FERMETURE */
/* Fond floutté */
body.menu-already-seen header,
body.menu-already-seen main,
body.menu-already-seen footer,
body.popup-already-seen header,
body.popup-already-seen main,
body.popup-already-seen footer {
    animation: 0.5s ease-out 0s blur-out both;
    -webkit-animation: 0.5s ease-out 0s blur-out both;
}
body.opened-nav header,
body.opened-nav main,
body.opened-nav footer,
body.opened-popup header,
body.opened-popup main,
body.opened-popup footer {
    animation: 1s ease-out 0s blur both;
    -webkit-animation: 1s ease-out 0s blur both;
}
/* Menu */
body.menu-already-seen nav .layer.fore,
body.menu-already-seen nav .layer.back {
    animation: 0.5s ease-out 0s fade-out both;
    -webkit-animation: 0.5s ease-out 0s fade-out both;
}
body.opened-nav nav .layer.fore,
body.opened-nav nav .layer.back {
    animation: 1s ease-out 0s fade-in both;
    -webkit-animation: 1s ease-out 0s fade-in both;
    /* background-color: rgba(0, 0, 0, 0.6); */
    color: #fff;
}
/* Bouton */
body.opened-nav .btn-menu .line {
    position: absolute;
    right: auto;
    left: 0.1em;
    height: 3px;
    width: 100%;
    background-color: white;
}
body.opened-nav .btn-menu .line:nth-child(1) {
    top: 0;
    transform-origin: top left;
    width: 136%;
    -webkit-transform-origin: top left;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
body.opened-nav .btn-menu .line:nth-child(2) {
    top: auto;
    bottom: 0;
    transform-origin: bottom left;
    width: 136%;
    -webkit-transform-origin: bottom left;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
body.opened-nav .btn-menu .line:nth-child(3) {
    opacity: 0;
}
/* Animations */
body.opened-nav nav .circle.circle1 {
    animation: 1.25s ease-out 0.5s menu-circle-big both;
    -webkit-animation: 1.25s ease-out 0.5s menu-circle-big both;
}
body.opened-nav nav .menu-item .t-nav-pri,
body.opened-nav nav .menu-item .t-nav-sec {
    animation: 0.5s ease-out 0.75s fade-in both;
    -webkit-animation: 0.5s ease-out 0.75s fade-in both;
}
body.opened-nav nav .menu-item:nth-child(2) .t-nav-pri {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
body.opened-nav nav .menu-item:nth-child(3) .t-nav-pri {
    animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
}
body.opened-nav nav .menu-item:nth-child(4) .t-nav-pri {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
body.opened-nav nav .menu-item:nth-child(5) .t-nav-pri {
    animation-delay: 1.75s;
    -webkit-animation-delay: 1.75s;
}
body.opened-nav nav .menu-item:nth-child(6) .t-nav-pri {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
body.opened-nav nav .menu-item:nth-child(7) .t-nav-pri {
    animation-delay: 2.25s;
    -webkit-animation-delay: 2.25s;
}
body.opened-nav nav .menu-item:nth-child(8) .t-nav-pri {
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
body.opened-nav nav .menu-subitem:nth-child(2) .t-nav-sec {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
body.opened-nav nav .menu-subitem:nth-child(3) .t-nav-sec {
    animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
}
body.opened-nav nav .menu-subitem:nth-child(4) .t-nav-sec {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
body.opened-nav nav .menu-subitem:nth-child(5) .t-nav-sec {
    animation-delay: 1.75s;
    -webkit-animation-delay: 1.75s;
}
body.opened-nav nav .circle.circle2 {
    animation: 0.5s ease-out 1s menu-circle-small both;
    -webkit-animation: 0.5s ease-out 1s menu-circle-small both;
}
/* Mobile */
@media screen and (max-width: 900px) {
    body.menu-already-seen header,
    body.opened-nav header,
    body.opened-nav nav .circle.circle1,
    body.opened-nav nav .circle.circle2,
    body.opened-nav nav .menu-item .t-nav-pri,
    body.opened-nav nav .menu-item .t-nav-sec,
    body.menu-already-seen nav .layer.fore,
    body.menu-already-seen nav .layer.back,
    body.opened-nav nav .layer.fore,
    body.opened-nav nav .layer.back {
        animation: none;
    }
    body.opened-nav nav .layer.fore,
    body.opened-nav nav .layer.back {
        opacity: 1;
    }
    body.menu-already-seen nav {
        animation: 0.5s ease-out 0s translate-menu-reverse both;
        -webkit-animation: 0.5s ease-out 0s translate-menu-reverse both;
    }
    body.opened-nav nav {
        animation: 0.5s ease-out 0s translate-menu both;
        -webkit-animation: 0.5s ease-out 0s translate-menu both;
    }
    body.menu-already-seen .btn-menu {
        animation: 0.5s ease-out 0s translate-menu-reverse both;
        -webkit-animation: 0.5s ease-out 0s translate-menu-reverse both;
    }
    body.opened-nav .btn-menu {
        animation: 0.5s ease-out 0s translate-menu both;
        -webkit-animation: 0.5s ease-out 0s translate-menu both;
    }
    body.opened-nav .btn-menu .picto .line {
        display: none;
    }
    body.opened-nav .btn-menu .picto .arrow {
        opacity: 1;
    }
}

/* POPUP VIDEO */
#popup-holder {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
}
#popup-holder .btn-close {
    position: absolute;
    z-index: 102;
    top: 3em;
    right: 3em;
    width: 2.1em;
    height: 2.1em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
#popup-holder .btn-close .picto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#popup-holder .btn-close .line {
    position: absolute;
    right: auto;
    left: 0.1em;
    height: 3px;
    width: 100%;
    background-color: #282c37;
}
#popup-holder .btn-close.light .line {
    position: absolute;
    right: auto;
    left: 0.1em;
    height: 3px;
    width: 100%;
    background-color: white;
}
#popup-holder .btn-close .line:nth-child(1) {
    top: 0;
    transform-origin: top left;
    width: 136%;
    -webkit-transform-origin: top left;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#popup-holder .btn-close .line:nth-child(2) {
    top: auto;
    bottom: 0;
    transform-origin: bottom left;
    width: 136%;
    -webkit-transform-origin: bottom left;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
body.opened-popup #popup-holder {
    display: block;
    animation: 1s ease-out 0.5s fade-in both;
    -webkit-animation: 1s ease-out 0.5s fade-in both;
}
#popup-holder .popup {
    display: inline-block;
    box-shadow: 0 0 1em rgba(2, 54, 70, 0.5);
}
#popup-holder .popup iframe {
    width: 80vw;
    height: 75vh;
    vertical-align: middle;
}

/* MASTER TEMPLATE */
main {
    position: relative;
    display: block;
    z-index: 50;
    overflow: hidden;
}
/* Sections */
main section {
    position: relative;
    width: 100%;
}
main section.dark {
    color: white;
}
main section.dark .layer.back {
    background-color: #282c37;
}
main section.min-fitscreen {
    min-height: 100vh;
}
main section.fitscreen {
    height: 100vh;
}
main section.fitscreen-handle {
    height: calc(100vh - 3.75em);
    height: -webkit-calc(100vh - 3.75em);
}
main section .layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
main section .layer.back {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
main section .layer .rope {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}
main section .layer .rope svg {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
main section .layer .contour svg {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
main section .layer .sketch {
    opacity: 0; /* opacity:1 quand dashOffset réglé par js */
}
main section .layer .half {
    float: left;
    width: 50%;
    box-sizing: border-box;
}
main section .layer .half.right {
    float: right;
}
main section .layer .half .middle-holder {
    text-align: left;
}
main section .layer.back .half.image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
main section .next-screen {
    position: absolute;
    z-index: 60;
    display: block;
    width: 10em;
    bottom: 3em;
    left: 50%;
    margin-left: -5em;
    line-height: 2em;
    text-align: center;
    opacity: 0;
}
/* Mobile */
@media screen and (max-width: 900px) {
    main section .next-screen {
        display: none;
    }
}
/* V-half */
main section .layer .v-half {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
}
main section .layer .v-half.v-half-40 {
    height: 40%;
}
main section .layer .v-half.v-half-45 {
    height: 45%;
}
main section .layer .v-half.v-half-55 {
    height: 55%;
}
main section .layer .v-half.v-half-60 {
    height: 60%;
}
main section .layer .v-half.v-half-65 {
    height: 65%;
}
main section .layer .v-half.bottom {
    top: auto;
    bottom: 0;
    left: 0;
}
main section .stick-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
/* Tuiles (3x1 / 1x1) */
main section .tiles-container {
    position: relative;
}
main section .tiles-container .tiles {
    width: 100%;
    height: 50vh;
}
main section .tiles-container .tiles .tile {
    position: relative;
    float: left;
    height: 100%;
    padding: 0 0.5em;
    box-sizing: border-box;
    outline: none;
}
main section .tiles-container .tiles.three .tile {
    width: calc(100% / 3);
    width: -webkit-calc(100% / 3);
}

main section .tiles-container .tiles.four .tile {
    width: calc(100% / 4);
    width: -webkit-calc(100% /4);
}

main section .tiles-container .tiles.one .tile {
    width: 100%;
}
main section .tiles-container .tiles .tile .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
main section .tiles-container .tiles .tile .inner .back {
    position: absolute;
    z-index: 51;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
main section .tiles-container .tiles .tile .inner .front {
    position: relative;
    z-index: 52;
}
/* Fix carousel in table */
main section .tiles-container .tiles.carousel {
    min-width: 100%;
    width: 0;
}
/* Espacements */
main section h4 + h2 {
    margin-top: 0.15em;
}
main section h4 + h1 {
    margin-top: 0.1em;
}
main section .g-label + h1 {
    margin-top: 0.5em;
}
main section .g-label + h2 {
    margin-top: 0.75em;
}
main section .title + p.t-regular {
    margin-top: 1.5em;
}
main section .title + ul.t-regular {
    margin-top: 1.5em;
}
main section h3 + p.t-ssmall {
    margin-top: 1em;
}
main section p.t-regular + a {
    margin-top: 2.5em;
}
main section p.t-ssmall + a {
    margin-top: 1em;
}
main section p.t-regular + p.t-regular,
.regular-content * + p {
    margin-top: 1em;
}
.regular-content * + h3 {
    margin-top: 1em;
}
.regular-content * + h4 {
    margin-top: 1em;
}
main section p.t-strong + p.t-regular {
    margin-top: 1.25em;
}
/* Mobile */
@media screen and (max-width: 900px) {
    main section p.t-regular br {
        display: none;
    }
    main section h4 + h2 {
        margin-top: 0.5em;
    }
    main section h4 + h1 {
        margin-top: 0.25em;
    }
}
/* Pagination */
main section .pagination {
    position: absolute;
    left: 3em;
    top: 50%;
    margin-top: -1.75em;
    opacity: 0;
}
main section .pagination .current {
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #282c37;
    line-height: 1.5em;
}
main section .pagination .total {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.5;
    line-height: 1.75em;
}
main section.dark .pagination .current {
    border-bottom: 1px solid white;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    main section .pagination {
        left: 1.75em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        main section .pagination {
            left: 1.25em;
        }
    }
}
/* Vagues / Chevrons / Guillemets / Gouttes */
.wave {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wave svg {
    height: 100%;
    vertical-align: middle;
}
.gouttes {
    position: absolute;
    pointer-events: none;
}
.gouttes .goutte {
    position: absolute;
    opacity: 0;
    background-image: url("img/gammes_goutte.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
/* Poignée */
main .handler-container {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 3.75em;
    text-align: center;
}
main .handler-container.bottom {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 3.75em;
    text-align: center;
}
main .handler-container .handler {
    opacity: 0;
    display: inline-block;
    height: 100%;
    margin-top: 1px;
}
main .handler-container.bottom .handler {
    margin-top: -1px;
}
main .handler-container .handler svg {
    height: 100%;
}

/* ANIMATIONS GENERALES */
/* Fadeloading */
main .layer.loading {
    background-color: white;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
main .loaded .layer.loading {
    opacity: 0;
}
/* Interface */
main section .pagination {
    animation: 1s ease-in-out 3s fade-in both;
    -webkit-animation: 1s ease-in-out 3s fade-in both;
}
main section.seen .next-screen {
    animation: 1s ease-in-out 3s fade-in both;
    -webkit-animation: 1s ease-in-out 3s fade-in both;
}
/* Titrage + Contenu */
main section.seen .title .g-label {
    animation: 1s ease-out 1.5s window-fromleft both;
    -webkit-animation: 1s ease-out 1.5s window-fromleft both;
}
main section.seen .title h4 {
    animation: 1s ease-out 1.5s fade-fromright both;
    -webkit-animation: 1s ease-out 1.5s fade-fromright both;
}
main section.seen .title h2,
main section.seen .title h1 {
    animation: 1s ease-out 2s fade-fromright both;
    -webkit-animation: 1s ease-out 2s fade-fromright both;
}
main section.seen p.t-regular {
    animation: 1s ease-out 2.5s fade-fromright both;
    -webkit-animation: 1s ease-out 2.5s fade-fromright both;
}
main section.seen ul.t-regular {
    animation: 1s ease-out 2.5s fade-fromright both;
    -webkit-animation: 1s ease-out 2.5s fade-fromright both;
}
/* Boutons CTA */
main section.seen .btn-outline.from-left:before {
    animation: 1s ease-in-out 2.5s cta-fromleft both;
    -webkit-animation: 1s ease-in-out 2.5s cta-fromleft both;
}
main section.seen .btn-outline.from-left .in {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}
main section.seen .btn-outline.from-center:before {
    animation: 1s ease-in-out 2.5s cta-fromcenter both;
    -webkit-animation: 1s ease-in-out 2.5s cta-fromcenter both;
}
main section.seen .btn-outline.from-center .in {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}
main section.seen .btn-outline.big.from-left:before {
    animation: 1s ease-in-out 2.5s cta-fromleft-big both;
    -webkit-animation: 1s ease-in-out 2.5s cta-fromleft-big both;
}
main section.seen .btn-outline.big.from-left .in {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}
main section.seen .btn-outline.big.from-center:before {
    animation: 1s ease-in-out 2.5s cta-fromcenter-big both;
    -webkit-animation: 1s ease-in-out 2.5s cta-fromcenter-big both;
}
main section.seen .btn-outline.big.from-center .in {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}
main section.seen .btn-outline.btn-input.big.from-center input,
main section.seen .btn-outline.btn-input.big.from-center button {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}

/* PAGE PAR DEFAUT */
#section-page-content > .layer.fore {
    position: relative;
    top: auto;
    left: auto;
    padding: 15em 0 10em 0;
}
#section-page-content .page-content {
    box-shadow: 0 0 3em rgba(2, 54, 70, 0.08);
    min-height: 50vh;
}
#section-page-content .page-content h4 {
    font-size: 150%;
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.045em;
}
#section-page-content .page-content .t-regular p strong {
    font-weight: bold;
}
#section-page-content .page-content .t-regular p + p {
    margin-top: 1em;
}
#section-page-content .page-content .t-regular h3 + p,
#section-page-content .page-content .t-regular h4 + p {
    margin-top: 2.5em;
}
#section-page-content .page-content .t-regular p + h3,
#section-page-content .page-content .t-regular p + h4 {
    margin-top: 2em;
}
#section-page-content .page-content h2 + * {
    margin-top: 3em;
}
#section-page-content .wave.wave-page-1 {
    opacity: 1;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -50%;
}
#section-page-content .wave.wave-page-1 svg {
    height: auto;
    width: 100%;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    #section-page-content .left-pad-8 {
        padding-left: 6em;
    }
    #section-page-content .right-pad-8 {
        padding-right: 6em;
    }
    #section-page-content .top-pad-7 {
        padding-top: 6em;
    }
    #section-page-content .bot-pad-7 {
        padding-bottom: 6em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Entete */
        #section-article-head {
            height: 30em;
        }
        /* Contenu */
        #section-page-content .centered-large {
            width: calc(100% - 5em);
            width: -webkit-calc(100% - 5em);
        }
        #section-page-content .left-pad-8 {
            padding-left: 5em;
        }
        #section-page-content .right-pad-8 {
            padding-right: 5em;
        }
        #section-page-content .top-pad-7 {
            padding-top: 4em;
        }
        #section-page-content .bot-pad-7 {
            padding-bottom: 4em;
        }
        /* Mobile */
        @media screen and (max-width: 600px) {
            #section-page-content .left-pad-8 {
                padding-left: 3em;
            }
            #section-page-content .right-pad-8 {
                padding-right: 3em;
            }
            #section-page-content .top-pad-7 {
                padding-top: 3em;
            }
            #section-page-content .bot-pad-7 {
                padding-bottom: 3em;
            }
        }
    }
}

/* PAGE ACCUEIL */
/* Header */
.page-accueil header .languages {
    animation: 1s ease-in-out 1.5s fade-in both;
    -webkit-animation: 1s ease-in-out 1.5s fade-in both;
}
.page-accueil header .logo {
    animation: 1s ease-in-out 2s fade-in both;
    -webkit-animation: 1s ease-in-out 2s fade-in both;
}
.page-accueil .btn-menu {
    animation: 1s ease-in-out 2.5s fade-in both;
    -webkit-animation: 1s ease-in-out 2.5s fade-in both;
}
/* Intro (commune) */
#section-intro {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-intro .letter {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17em;
    margin-left: -17em;
    display: inline-block;
    width: 34em;
    height: 34em;
    overflow: hidden;
}
#section-intro .letter .letter-back {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
}
#section-intro .letter .letter-back svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
#section-intro .letter .letter-mid {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
    background-color: white;
    -webkit-mix-blend-mode: darken;
    mix-blend-mode: darken;
}
#section-intro .letter .letter-mid svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
#section-intro .letter .letter-mid .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-mix-blend-mode: lighten;
    mix-blend-mode: lighten;
    overflow: hidden;
}
#section-intro .letter .letter-mid .video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
#section-intro.seen .letter svg path.triggered {
    transition: stroke-dashoffset 1s ease-in-out 1s;
    -webkit-transition: stroke-dashoffset 1s ease-in-out 1s;
    stroke-dashoffset: 0 !important;
}
/* Qui sommes nous ? */
#section-about .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -18.5em;
    margin-left: -18.5em;
    display: inline-block;
    width: 37em;
    height: 37em;
    background-image: url("img/home_o_waves.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-about .circle:after {
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26em;
    height: 26em;
    margin-top: -13em;
    margin-left: -13em;
    background-color: white;
}
#section-about .layer .half {
    padding-top: 10em;
}
#section-about .wave.wave-home-2 {
    height: 7em;
    top: 50%;
    margin-top: -3em;
    left: 50%;
    margin-left: 16em;
}
#section-about .wave.wave-home-3 {
    height: 7em;
    top: 50%;
    margin-top: 9em;
    left: 50%;
    margin-left: 14em;
}
#section-about .wave.wave-home-1 {
    height: 9vh;
    top: 0;
    margin-top: -9vh;
    right: 0;
}
/* Animation */
#section-about.seen .rope path.triggered {
    transition: stroke-dashoffset 2s ease-in-out 0s;
    -webkit-transition: stroke-dashoffset 2s ease-in-out 0s;
    stroke-dashoffset: 0 !important;
}
#section-about.seen .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-about.seen .circle:after {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter both;
}
#section-about.seen .wave.wave-home-2 {
    opacity: 1;
    animation: 1s ease-out 0.75s window-fromleft both;
    -webkit-animation: 1s ease-out 0.75s window-fromleft both;
}
#section-about.seen .wave.wave-home-3 {
    opacity: 1;
    animation: 1s ease-out 1s window-fromleft both;
    -webkit-animation: 1s ease-out 1s window-fromleft both;
}
/* Savoir faire */
#section-how .pagination {
    color: white;
}
#section-how .pagination .current {
    border-bottom: 1px solid white;
}
/* Animation */
#section-how.seen .layer.back .half {
    animation: 1.25s ease-in-out 0.75s window-fromright both;
    -webkit-animation: 1.25s ease-in-out 0.75s window-fromright both;
    opacity: 1;
}
/* Sites de production */
#section-sites .wave.wave-home-4 {
    height: 25vh;
    top: 0;
    margin-top: -20vh;
    left: 0;
}
/* Animation */
#section-sites.seen .layer.back .half {
    animation: 1.25s ease-in-out 0.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 0.75s window-fromleft both;
    opacity: 1;
}
/* Gammes */
#section-gammes .layer.back {
    opacity: 0;
}
#section-gammes .tiles {
    height: auto;
}
#section-gammes .tiles .tile {
    padding: 0 2em;
}
#section-gammes .tiles .tile .image {
    position: relative;
    max-width: 26em;
    margin: 0 auto;
    height: 45vh;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-gammes .tiles .tile .image .scaler {
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
    box-sizing: border-box;
    padding: 2em 0;
    height: 100%;
}
#section-gammes .tiles .tile .image:hover .scaler {
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-gammes .tiles .tile .image .scaler img {
    opacity: 0;
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}
#section-gammes .tiles .tile .image .g-label {
    position: absolute;
    bottom: 1em;
    left: 50%;
    margin-left: -5em;
    text-align: center;
    opacity: 0;
}
#section-gammes .pagination {
    color: white;
}
#section-gammes .pagination .current {
    border-bottom: 1px solid white;
}
#section-gammes .center-holder {
    margin-top: 2em;
}
/* Animation */
#section-gammes.seen .layer.back {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter-over both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter-over both;
}
#section-gammes.seen .tiles .tile .image .scaler img {
    opacity: 1;
    animation: 1s ease-in-out 1.5s scale-in both;
    -webkit-animation: 1s ease-in-out 1.5s scale-in both;
}
#section-gammes.seen .tiles .tile.elaboree .image .scaler img {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
#section-gammes.seen .tiles .tile .image .g-label {
    opacity: 1;
    animation: 1s ease-in-out 2.5s label-window-fromleft both;
    -webkit-animation: 1s ease-in-out 2.5s label-window-fromleft both;
}
/* Actualités */
#section-news .tiles-container {
    margin: 2em -0.5em 0 -0.5em;
}
#section-news .tiles {
    height: 50vh;
}
#section-news .tiles .tile {
    padding: 0 1em;
    text-decoration: none;
    color: inherit;
    display: block;
}
#section-news .tiles .tile .inner {
    box-sizing: border-box;
    padding: 2em;
}
#section-news .tiles .tile .inner .back {
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-news .tiles .tile .inner .back .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: saturate(60%);
    -webkit-filter: saturate(60%);
    transition: transform 0.25s, filter 0.25s;
    -webkit-transition: transform 0.25s, -webkit-filter 0.25s;
}
#section-news .tiles .tile .inner .back .incrustation {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    background-color: #1dcbea;
    mix-blend-mode: multiply;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
#section-news .tiles .tile .inner .a-small {
    transition: color 0.25s;
    -webkit-transition: color 0.25s;
    margin-top: 1em;
}
#section-news .tiles .tile .inner:hover .a-small {
    color: #999999;
}
#section-news .tiles .tile .inner:hover .back .img {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-news .tiles .tile .inner:hover .back .incrustation {
    opacity: 0;
}
#section-news a.more {
    position: absolute;
    display: block;
    text-align: center;
    font-size: 200%;
    line-height: 3.5em;
    right: 0;
    margin-right: -1.5em;
    margin-top: -1.75em;
    top: 50%;
    width: 3.5em;
    height: 3.5em;
}
#section-news a.more:before {
    content: "";
    position: absolute;
    z-index: 53;
    display: block;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 2px 1em rgba(2, 54, 70, 0.15);
    opacity: 0;
    transition: background-color 0.25s;
    -webkit-transition: background-color 0.25s;
}
#section-news a.more .in {
    position: relative;
    z-index: 54;
    opacity: 0;
}
#section-news a.more:hover:before {
    background-color: #999999;
}
#section-news .wave.wave-home-5 {
    height: 17vh;
    top: 30%;
    margin-top: -30vh;
    right: 0;
}
/* Animation */
#section-news.seen .tiles .tile .inner .back {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromleft both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromleft both;
}
#section-news.seen .tiles .tile .inner .front h3 {
    animation: 1s ease-out 1.5s fade-fromright both;
    -webkit-animation: 1s ease-out 1.5s fade-fromright both;
}
#section-news.seen .tiles .tile .inner .front .t-ssmall {
    animation: 1s ease-out 2s fade-fromright both;
    -webkit-animation: 1s ease-out 2s fade-fromright both;
}
#section-news.seen .tiles .tile .inner .front .a-small {
    animation: 1s ease-out 2.5s fade-fromright both;
    -webkit-animation: 1s ease-out 2.5s fade-fromright both;
}
#section-news.seen a.more:before {
    opacity: 1;
    animation: 0.5s ease-out 3s scale-in both;
    -webkit-animation: 0.5s ease-out 3s scale-in both;
}
#section-news.seen a.more .in {
    opacity: 1;
    animation: 0.5s ease-out 3.25s fade-in both;
    -webkit-animation: 0.5s ease-out 3.25s fade-in both;
}
/* Contact */
#section-contact .layer.back .v-half.bottom {
    background-color: #dfedf3;
    opacity: 0;
}
#section-contact .layer.fore .v-half.top .stick-bottom {
    padding-bottom: 1em;
}
#section-contact .layer.fore .v-half.bottom {
    padding-top: 1.5em;
}
#section-contact .layer.fore .v-half.bottom .t-regular {
    opacity: 0;
}
#section-contact .letter {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17em;
    margin-left: -17em;
    display: inline-block;
    width: 34em;
    height: 34em;
    overflow: hidden;
}
#section-contact .letter .letter-back {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
}
#section-contact .letter .letter-back svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
#section-contact .letter .letter-mid {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
    background-color: white;
    -webkit-mix-blend-mode: darken;
    mix-blend-mode: darken;
}
#section-contact .letter .letter-mid svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
#section-contact .letter .letter-mid .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-mix-blend-mode: lighten;
    mix-blend-mode: lighten;
    overflow: hidden;
}
#section-contact .letter .letter-mid .video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
#section-contact .center-holder {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -1.5em;
}
#section-contact a.btn-outline:not(:hover):before {
    background-color: white;
}
#section-contact .wave.wave-home-6 {
    height: 18vh;
    top: 50%;
    margin-top: -40vh;
    left: 50%;
    margin-left: 10em;
}
/* Animation */
#section-contact.seen .layer.back .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-contact.seen .letter svg path.triggered {
    transition: stroke-dashoffset 1s ease-in-out 1s;
    -webkit-transition: stroke-dashoffset 1s ease-in-out 1s;
    stroke-dashoffset: 0 !important;
}
#section-contact.seen .layer.fore .v-half.bottom .t-regular {
    opacity: 1;
    animation: 1s ease-in-out 3s fade-in both;
    -webkit-animation: 1s ease-in-out 3s fade-in both;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    /* Intro */
    .page-accueil #section-intro .letter {
        width: 28em;
        height: 28em;
        margin-left: -14em;
        margin-top: -14em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Commun */
        .page-accueil #section-intro .layer.back .rope {
            display: none;
        }
        .page-accueil .btn-menu {
            animation: 1s ease-in-out 2.5s translate-fromright both;
            -webkit-animation: 1s ease-in-out 2.5s translate-fromright both;
        }
        .page-accueil #section-intro .letter,
        #section-about .circle {
            margin-top: -11em;
            margin-left: -11em;
            width: 22em;
            height: 22em;
        }
        #section-contact .letter {
            margin-top: -12.5em;
            margin-left: -12.5em;
            width: 25em;
            height: 25em;
        }
        #section-how,
        #section-about,
        #section-sites,
        #section-news {
            height: auto;
        }
        #section-how .layer.back,
        #section-about .layer.back,
        #section-sites .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 50vh;
        }
        #section-how .layer.fore,
        #section-about .layer.fore,
        #section-sites .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding: 2em 0 4em 0;
        }
        #section-how .circle:after,
        #section-about .circle:after {
            margin-top: -7.75em;
            margin-left: -7.75em;
            width: 15.5em;
            height: 15.5em;
        }
        #section-about .layer.back .rope svg,
        #section-how .layer.back .rope svg,
        #section-sites .layer.back .rope svg {
            transform: scale(2);
            -webkit-transform: scale(2);
        }
        #section-how .layer.fore .half,
        #section-about .layer.fore .half,
        #section-sites .layer.fore .half,
        #section-contact .layer.fore .half {
            width: 100%;
            float: none;
            padding-top: 0;
        }
        #section-contact .layer.fore .v-half.top .stick-bottom {
            position: relative;
            bottom: auto;
            left: auto;
        }
        #section-how .layer .left-pad-10 {
            padding-left: 0;
        }
        #section-about .layer .right-pad-8,
        #section-sites .layer .right-pad-10,
        #section-contact .layer .right-pad-15 {
            padding-right: 0;
        }
        #section-gammes .tiles-container {
            margin: 0 -5em;
        }
        #section-news .tiles-container {
            margin: 4em -5em 0 -5em;
        }
        #section-news a.more {
            top: 100%;
            left: 50%;
            height: 2.8em;
            width: 2.8em;
            line-height: 2.8em;
            margin-right: 0;
            margin-left: -1.4em;
            margin-top: 1em;
        }
        #section-news .centered-large {
            padding-top: 3em;
            padding-bottom: 10em;
        }
        #section-contact .centered-small {
            padding-top: 3em;
        }
        #section-contact .tiles-container {
            margin: 4em -5em 0 -5em;
        }
        .page-accueil #section-news .title,
        #section-contact .title {
            /* background-color: white; */
            padding: 3em 0 1em 0;
        }
        /* Gammes */
        #section-gammes .center-holder {
            margin-top: -7.5em;
        }
        #section-gammes .slick-dots {
            text-align: center;
            margin-top: 7.5em;
        }
        #section-gammes .slick-dots li {
            display: inline-block;
            padding: 0;
            margin: 0;
            width: 2em;
            height: 2em;
            line-height: 2em;
        }
        #section-gammes .slick-dots li button {
            font-size: inherit;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 2em;
            width: 2em;
            border: 0;
            outline: 0;
            border: 0;
            cursor: pointer;
            color: rgba(0, 0, 0, 0);
            background-color: rgba(0, 0, 0, 0);
            user-select: none;
        }
        #section-gammes .slick-dots li button .label {
            display: block;
            opacity: 0;
            position: absolute;
            bottom: 100%;
            left: 50%;
            width: 10em;
            margin-left: -5em;
            color: #282c37;
            user-select: none;
            pointer-events: none;
        }
        #section-gammes .slick-dots li button:before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -3px;
            margin-top: -3px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: white;
        }
        /* Animation */
        #section-gammes.seen .tiles .tile .image .g-label {
            opacity: 1;
            animation: none;
            -webkit-animation: none;
        }
        /* Actualités */
        #section-news .slick-dots {
            margin-top:20px;
        }
    }
}

/* PAGE VISION */
/* Intro */
.page-vision-valeurs-et-engagements #section-intro {
    background-image: url("img/vision_intro_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-vision-valeurs-et-engagements #section-intro .wave.wave-vision-1 {
    height: 13em;
    top: 50%;
    right: 50%;
    margin-right: 8em;
    margin-top: -5.5em;
}
/* Animation */
.page-vision-valeurs-et-engagements #section-intro.seen .wave.wave-vision-1 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Notre vision */
#section-regard .layer.back .half {
    background-image: url("img/vision_regard_bg.jpg");
    background-size: cover;
    background-position: center top -8em;
    background-repeat: no-repeat;
    opacity: 0;
}
#section-regard .middle .inner {
    position: relative;
}
#section-regard .pagination {
    color: white;
}
#section-regard .pagination .current {
    border-bottom: 1px solid white;
}
#section-regard .wave.wave-regard-1 {
    height: 7em;
    right: 100%;
    bottom: 100%;
    margin-right: 2.5em;
    margin-bottom: 3em;
}
#section-regard .wave.wave-regard-2 {
    z-index: 60;
    height: 7em;
    left: 100%;
    top: 100%;
    margin-left: 0;
    margin-top: 3em;
}
/* Animation */
#section-regard.seen .layer.back .half {
    animation: 1.25s ease-in-out 0.75s window-fromright both;
    -webkit-animation: 1.25s ease-in-out 0.75s window-fromright both;
    opacity: 1;
}
#section-regard.seen .wave.wave-regard-1 {
    animation: 1s ease-out 3s fade-fromtop both;
    -webkit-animation: 1s ease-out 3s fade-fromtop both;
}
#section-regard.seen .wave.wave-regard-2 {
    animation: 1s ease-out 3s fade-frombot both;
    -webkit-animation: 1s ease-out 3s fade-frombot both;
}
/* Nos valeurs */
#section-valeurs .layer.back {
    background-color: #dfedf3;
}
#section-valeurs .tiles-container {
    margin-top: -6em;
}
#section-valeurs .tiles {
    height: 50vh;
}
#section-valeurs .slick-dots {
    position: absolute;
    z-index: 55;
    top: 100%;
    left: 0;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 4em;
}
#section-valeurs .slick-arrow {
    opacity: 1;
    position: absolute;
    z-index: 56;
    display: block;
    top: 100%;
    margin-top: 4em;
    height: 2em;
    width: 2em;
    overflow: hidden;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    background-size: auto 1.25em;
    background-position: center center;
    background-repeat: no-repeat;
    user-select: none;
}



#section-valeurs .slick-dots li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 2em;
    height: 2em;
    line-height: 2em;
}
#section-valeurs .slick-dots li button {
    font-size: inherit;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
    width: 2em;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    user-select: none;
}
#section-valeurs .slick-dots li button .label {
    display: block;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10em;
    margin-left: -5em;
    color: #282c37;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
#section-valeurs .slick-dots li button:hover .label,
#section-valeurs .slick-dots li.slick-active button .label {
    opacity: 1;
}
#section-valeurs .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #282c37;
}
#section-valeurs .slick-dots li + li {
    margin-left: 11em;
}
#section-valeurs .slick-dots li + li:before {
    width: 12em;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: -0.5em;
    margin-top: -1px;
    height: 2px;
    background-color: white;
}
#section-valeurs .slick-dots li.slick-active button:before {
    background-color: #999999;
}
#section-valeurs .tile .back .image {
    position: absolute;
    width: 50%;
    height: 70%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-valeurs .tile .back .wave {
    text-align: center;
    opacity: 0;
}
/* 1 */

#section-valeurs .tile:nth-child(1) .wave-valeurs-1 {
    bottom: 5%;
    left: 0;
    height: 50%;
    width: 100%;
}
#section-valeurs .tile:nth-child(1) .wave-valeurs-2 {
    bottom: 0;
    left: 50%;
    height: 30%;
    width: 50%;
    text-align: left;
}
#section-valeurs .tile:nth-child(1) .wave-valeurs-3 {
    bottom: 35%;
    left: 80%;
    height: 10%;
}
/* 2 */
#section-valeurs .tile:nth-child(2) .back .image {
    background-image: url("img/vision_picto_plaisir.svg");
    top: 0;
    right: 0;
    height: 90%;
    width: 40%;
}
#section-valeurs .tile:nth-child(2) .wave-valeurs-1 {
    bottom: 8%;
    left: 0;
    height: 50%;
    width: 100%;
    transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
}
#section-valeurs .tile:nth-child(2) .wave-valeurs-2 {
    bottom: 0;
    right: 50%;
    height: 30%;
    width: 50%;
    transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    text-align: right;
}
#section-valeurs .tile:nth-child(2) .wave-valeurs-3 {
    bottom: 8%;
    left: 0;
    height: 10%;
    width: 100%;
}
/* 3 */
#section-valeurs .tile:nth-child(3) .back .image {
    z-index: 54;
    background-image: url("img/vision_picto_partage.svg");
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
}
#section-valeurs .tile:nth-child(3) .wave-valeurs-1 {
    z-index: 51;
    bottom: 45%;
    left: 45%;
    height: 30%;
    width: 50%;
    text-align: left;
}
#section-valeurs .tile:nth-child(3) .wave-valeurs-2 {
    z-index: 50;
    bottom: 50%;
    left: -5%;
    height: 50%;
    width: 100%;
}
#section-valeurs .tile:nth-child(3) .wave-valeurs-3 {
    z-index: 53;
    bottom: 50%;
    right: 5%;
    height: 10%;
    width: 100%;
}
#section-valeurs .tile:nth-child(3) .fore {
    z-index: 54;
}
/* 4 */
#section-valeurs .tile:nth-child(4) .back .image {
    background-image: url("img/vision_picto_audace.svg");
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
}
#section-valeurs .tile:nth-child(4) .wave-valeurs-1 {
    bottom: 35%;
    left: 0;
    height: 50%;
    width: 100%;
}
#section-valeurs .tile:nth-child(4) .wave-valeurs-2 {
    bottom: 65%;
    left: 50%;
    height: 30%;
    width: 50%;
    text-align: left;
}
#section-valeurs .tile:nth-child(4) .wave-valeurs-3 {
    bottom: 50%;
    left: 80%;
    height: 10%;
}
/* 5 */
#section-valeurs .tile:nth-child(5) .back .image {
    background-image: url("img/vision_picto_excellence.svg");
    top: 0;
    right: 0;
    width: 35%;
    height: 90%;
}
#section-valeurs .tile:nth-child(5) .wave-valeurs-1 {
    bottom: 5%;
    left: 0;
    height: 50%;
    width: 100%;
    transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
}
#section-valeurs .tile:nth-child(5) .wave-valeurs-2 {
    bottom: 0;
    right: 50%;
    height: 30%;
    width: 50%;
    transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
}
#section-valeurs .tile:nth-child(5) .wave-valeurs-3 {
    bottom: 35%;
    right: 80%;
    height: 10%;
}
/* Animation */
#section-valeurs.seen .tile.slick-current .back .image {
    animation: 1s ease-out 0s fade-fromright both;
    -webkit-animation: 1s ease-out 0s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .wave-valeurs-1 {
    animation: 1s ease-out 0.25s fade-fromright both;
    -webkit-animation: 1s ease-out 0.25s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .wave-valeurs-2 {
    animation: 1s ease-out 0.5s fade-fromright both;
    -webkit-animation: 1s ease-out 0.5s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .wave-valeurs-3 {
    animation: 1s ease-out 0.75s fade-fromright both;
    -webkit-animation: 1s ease-out 0.75s fade-fromright both;
}
#section-valeurs .title h4,
#section-valeurs .title h2,
#section-valeurs .title h1,
#section-valeurs .title + p.t-regular,
#section-valeurs p.t-regular + p.t-regular {
    opacity: 0;
    animation: none;
    -webkit-animation: none;
}
#section-valeurs.seen .tile.slick-current .title h4 {
    animation: 1s ease-out 0.75s fade-fromright both;
    -webkit-animation: 1s ease-out 0.75s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .title h2 {
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .title h1 {
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-valeurs.seen .tile.slick-current .title + p.t-regular,
#section-valeurs.seen .tile.slick-current p.t-regular + p.t-regular {
    animation: 1s ease-out 1.25s fade-fromright both;
    -webkit-animation: 1s ease-out 1.25s fade-fromright both;
}
/* Nos engagements */
#section-engagements .layer.back .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22.5em;
    margin-left: -22.5em;
    display: inline-block;
    width: 45em;
    height: 45em;
    background-color: #dfedf3;
}
#section-engagements .layer.fore .circle {
    position: absolute;
    top: 50%;
    left: 9em;
    width: 23em;
    margin-top: -11.5em;
    display: inline-block;
    text-align: left;
}
#section-engagements .layer.fore .circle .shape {
    opacity: 0;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-engagements .layer.fore .circle .contour {
    position: absolute;
    top: -6.5em;
    left: -6.5em;
    width: 36em;
    height: 36em;
    clip-path: polygon(
        0% 0%,
        0% 37%,
        5% 37%,
        5% 63%,
        0% 63%,
        0% 100%,
        0% 100%,
        37% 100%,
        37% 95%,
        63% 95%,
        63% 100%,
        100% 100%,
        100% 100%,
        100% 63%,
        95% 63%,
        95% 37%,
        100% 37%,
        100% 0%,
        100% 0%,
        63% 0%,
        63% 5%,
        37% 5%,
        37% 0%,
        0% 0%
    );
}
#section-engagements .layer.fore .tiles-container {
    margin-top: 2.5em;
}
#section-engagements .layer.fore .tiles {
    height: auto;
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
    padding: 2em 1.5em;
}
#section-engagements .layer.fore .tiles .tile {
    height: auto;
}
#section-engagements .layer.fore .circle .items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#section-engagements .layer.fore .circle .items .item {
    position: absolute;
    width: 9em;
    height: 9em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: box-shadow 0.25s, background-color 0.25s;
    -webkit-transition: box-shadow 0.25s, background-color 0.25s;
}
#section-engagements .layer.fore .circle .items .item.active {
    background-color: #999999;
}
#section-engagements .layer.fore .circle .items .item:not(.active):hover {
    box-shadow: 0 0 1.25em rgba(2, 54, 70, 0.1);
}
#section-engagements .layer.fore .circle .items .item:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 6.5em;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-engagements .layer.fore .circle .items .item.active:before {
    filter: brightness(0) invert(1);
}
#section-engagements .layer.fore .circle .items .item:nth-child(1) {
    bottom: 100%;
    left: 50%;
    margin-left: -4.5em;
    margin-bottom: 1.5em;
}

#section-engagements .layer.fore .circle .items .item:nth-child(2) {
    top: 50%;
    left: 100%;
    margin-left: 1.5em;
    margin-top: -4.5em;
}
#section-engagements .layer.fore .circle .items .item:nth-child(3) {
    top: 100%;
    left: 50%;
    margin-left: -4.5em;
    margin-top: 1.5em;
}

#section-engagements .layer.fore .circle .items .item:nth-child(4) {
    top: 50%;
    right: 100%;
    margin-right: 1.5em;
    margin-top: -4.5em;
}

/* Animation */
#section-engagements.seen .layer.back .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-engagements.seen .layer.fore .circle .shape {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter both;
}
#section-engagements.seen .layer.fore .circle .shape .tiles-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
}
#section-engagements.seen .layer.fore .circle .shape .tiles-container .tiles {
    height: 100%;
    width: 100%;
    padding: 0;
}
#section-engagements.seen
    .layer.fore
    .circle
    .shape
    .tiles-container
    .tiles
    .tile {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#section-engagements.seen .layer.fore .circle .contour path.triggered {
    transition: stroke-dashoffset 2s ease-in-out 0.75s;
    -webkit-transition: stroke-dashoffset 2s ease-in-out 0.75s;
    stroke-dashoffset: 0 !important;
}
#section-engagements.seen .layer.fore .circle .items .item:nth-child(1) {
    opacity: 1;
    animation: 0.5s ease-in-out 1s scale-in both;
    -webkit-animation: 0.5s ease-in-out 1s scale-in both;
}
#section-engagements.seen .layer.fore .circle .items .item:nth-child(2) {
    opacity: 1;
    animation: 0.5s ease-in-out 1.25s scale-in both;
    -webkit-animation: 0.5s ease-in-out 1.25s scale-in both;
}
#section-engagements.seen .layer.fore .circle .items .item:nth-child(3) {
    opacity: 1;
    animation: 0.5s ease-in-out 1.6s scale-in both;
    -webkit-animation: 0.5s ease-in-out 1.6s scale-in both;
}
#section-engagements.seen .layer.fore .circle .items .item:nth-child(4) {
    opacity: 1;
    animation: 0.5s ease-in-out 1.9s scale-in both;
    -webkit-animation: 0.5s ease-in-out 1.9s scale-in both;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    /* Intro */
    .page-vision-valeurs-et-engagements #section-intro .letter {
        width: 28em;
        height: 28em;
        margin-left: -14em;
        margin-top: -13em;
    }
    .page-vision-valeurs-et-engagements
        #section-intro
        .layer.fore
        .left-pad-20 {
        padding-left: 15em;
    }
    .page-vision-valeurs-et-engagements #section-intro .wave.wave-vision-1 {
        height: 9em;
        top: 50%;
        right: 50%;
        margin-right: 8em;
        margin-top: -3.5em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Commun */
        .page-vision-valeurs-et-engagements #section-intro,
        #section-regard,
        #section-valeurs {
            height: auto;
        }
        /* Intro */
        .page-vision-valeurs-et-engagements #section-intro {
            background-image: initial;
        }
        .page-vision-valeurs-et-engagements #section-intro .letter {
            top: 16em;
            width: 15em;
            height: 15em;
            margin-left: -8.5em;
            margin-top: -7.5em;
        }
        .page-vision-valeurs-et-engagements #section-intro .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 31em;
            background-image: url("img/vision_intro_bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .page-vision-valeurs-et-engagements #section-intro .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            background-color: white;
            padding: 3em 0;
        }
        .page-vision-valeurs-et-engagements #section-intro .layer.fore .half {
            float: none;
            width: 100%;
        }
        .page-vision-valeurs-et-engagements
            #section-intro
            .layer.fore
            .left-pad-20 {
            padding-left: 0;
        }
        /* Notre vision */
        #section-regard .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 22em;
        }
        #section-regard .layer.back .half {
            width: 100%;
            height: 100%;
            margin-top: 0;
        }
        #section-regard .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            background-color: white;
            padding: 6em 0 12em 0;
        }
        #section-regard .layer.fore .half {
            float: none;
            width: 100%;
        }
        #section-regard .layer.fore .left-pad-10 {
            padding-left: 0;
        }
        #section-regard .wave.wave-regard-1 {
            height: 6em;
            margin-right: -5em;
            margin-bottom: 3em;
        }
        #section-regard .wave.wave-regard-2 {
            height: 6em;
            margin-left: -5em;
            margin-top: 3em;
        }
        /* Nos valeurs */
        #section-valeurs > .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding: 5em 0 7em 0;
        }
        #section-valeurs .tiles-container {
            margin-top: 0;
        }
        #section-valeurs .tiles {
            height: auto;
        }
        #section-valeurs .tiles .tile .layer {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-valeurs .tiles .tile .layer.back {
            height: 15em;
        }
        #section-valeurs .tiles .tile .layer.fore {
            padding-top: 3em;
        }
        #section-valeurs .tiles .tile .layer.fore .half {
            width: 100%;
            float: none;
        }
        #section-valeurs .tiles .tile .layer.fore .half .stick-bottom {
            position: relative;
            bottom: auto;
            left: auto;
        }
        #section-valeurs .slick-dots {
            margin-top: 2.5em;
        }
        #section-valeurs .slick-dots li + li {
            margin-left: 0.25em;
        }
        #section-valeurs .slick-dots li + li:before {
            display: none;
        }
        #section-valeurs .slick-dots li button .label {
            display: none;
        }
        #section-valeurs .slick-arrow {
            display: none !important;
        }
        /* Nos engagements */
        #section-engagements {
            height: auto;
            min-height: 100vh;
        }
        #section-engagements .layer.back {
            display: none;
        }
        #section-engagements .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            padding: 3em 0;
        }
        #section-engagements .layer.fore .half {
            float: none;
            height: auto;
            width: 100%;
        }
        #section-engagements .layer.fore .right-pad-10 {
            padding-right: 0;
        }
        #section-engagements .layer.fore .circle {
            position: relative;
            top: auto;
            left: auto;
            margin-top: 8em;
            width: 100%;
        }
        #section-engagements .layer.fore .circle .shape {
            width: 80%;
            background-color: #dfedf3;
            background-image: none;
            margin: 0 auto;
        }
        #section-engagements .layer.fore .circle .contour {
            display: none;
        }
        #section-engagements .layer.fore .circle .items .item {
            width: 12em;
            height: 12em;
        }
        #section-engagements .layer.fore .circle .items .item:after {
            background-size: auto 10em;
        }
        #section-engagements .layer.fore .circle .items .item:nth-child(1) {
            bottom: 60%;
            top: auto;
            right: auto;
            left: 60%;
            margin-left: 0;
            margin-bottom: 0;
        }
        #section-engagements .layer.fore .circle .items .item:nth-child(2) {
            top: 60%;
            bottom: auto;
            right: auto;
            left: 60%;
            margin-left: 0;
            margin-top: 0;
        }
        #section-engagements .layer.fore .circle .items .item:nth-child(3) {
            top: 60%;
            bottom: auto;
            left: auto;
            right: 60%;
            margin-left: 0;
            margin-top: 0;
        }
        #section-engagements .layer.fore .circle .items .item:nth-child(4) {
            bottom: 60%;
            top: auto;
            left: auto;
            right: 60%;
            margin-right: 0;
            margin-top: 0;
        }
        #section-engagements .layer.fore .half.left .tiles-container {
            position: fixed;
            margin-top: 0;
            left: 0;
            top: 0;
            height: 100vh;
            width: calc(100vw - 6em);
            width: -webkit-calc(100vw - 6em);
            z-index: 10000;
            filter: drop-shadow(-0.25em 0 1.15em rgba(2, 54, 70, 0.2));
            border-radius: 0;
            transform: translateX(-150%);
            -webkit-transform: translateX(-150%);
            transition: transform 0.5s, -webkit-transform 0.5s;
            -webkit-transition: transform 0.5s, -webkit-transform 0.5s;
        }
        #section-engagements .layer.fore .half.left .tiles-container.active {
            transform: translateX(0);
            -webkit-transform: translateX(0);
        }
        #section-engagements .layer.fore .half.left .tiles-container .handler {
            position: absolute;
            bottom: 50vh;
            left: 100%;
            width: 3em;
            height: 20em;
            transform: scale(-1, 1);
            -webkit-transform: scale(-1, 1);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        #section-engagements
            .layer.fore
            .half.left
            .tiles-container
            .handler:after {
            content: "";
            display: block;
            position: absolute;
            height: 1.5em;
            width: 1.5em;
            top: 50%;
            left: 29%;
            margin-top: -0.75em;
            margin-left: 0.25em;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url("/assets/theme-images/vision_picto_arrow_next.svg");
        }
        #section-engagements .layer.fore .half.left .tiles-container .layer {
            background-color: white;
            z-index: 10001;
            padding: 2em 1.5em;
            border-top-right-radius: 4em;
            border-bottom-right-radius: 4em;
        }
        #section-engagements .layer.fore .half.left .tiles-container .tiles {
            height: auto;
            background-color: none;
            box-shadow: none;
            border-radius: none;
            padding: 0;
        }
    }
}

/* PAGE SAVOIR-FAIRE */
/* Intro */


.page-notre-savoir-faire #section-intro .wave.wave-savoirfaire-1 {
    height: 9em;
    top: 50%;
    right: 50%;
    margin-right: 9em;
    margin-top: -10em;
}
.page-notre-savoir-faire .half-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35vh;
    margin-left: -35vh;
    display: inline-block;
    width: 70vh;
    height: 70vh;
}
.page-notre-savoir-faire .half-circle .half-circle-back {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
}
.page-notre-savoir-faire .half-circle .half-circle-back svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
.page-notre-savoir-faire .half-circle .half-circle-mid {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    width: calc(100% + 1em);
    width: -webkit-calc(100% + 1em);
    height: calc(100% + 1em);
    height: -webkit-calc(100% + 1em);
    background-color: white;
    -webkit-mix-blend-mode: darken;
    mix-blend-mode: darken;
}
.page-notre-savoir-faire .half-circle .half-circle-mid svg {
    filter: blur(0.5px);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    width: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    height: -webkit-calc(100% - 1em);
}
.page-notre-savoir-faire .half-circle .half-circle-mid .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("img/savoirfaire_half_waves.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-mix-blend-mode: lighten;
    mix-blend-mode: lighten;
    overflow: hidden;
}
.page-notre-savoir-faire .half-circle .half-circle-mid .video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
.page-notre-savoir-faire .half-circle svg path.triggered {
    transition: stroke-dashoffset 1s ease-in-out 1s;
    -webkit-transition: stroke-dashoffset 1s ease-in-out 1s;
    stroke-dashoffset: 0 !important;
}
.page-notre-savoir-faire #section-intro.seen .wave.wave-savoirfaire-1 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Commun */
/* Animation */
#section-surveillance.seen .rope path.triggered,
#section-livraison.seen .rope path.triggered,
#section-conditionnement.seen .rope path.triggered {
    transition: stroke-dashoffset 2s ease-in-out 0s;
    -webkit-transition: stroke-dashoffset 2s ease-in-out 0s;
    stroke-dashoffset: 0 !important;
}
/* Recherche & Innovation */
#section-recherche .back .half.right {
    opacity: 0;
}
#section-recherche .insert {
    text-align: center;
}
#section-recherche .insert h3 + .t-regular {
    margin: 0.5em auto 0 auto;
    max-width: 25em;
}
#section-recherche .tiles-container .tiles {
    height: auto;
}
#section-recherche .tiles-container .tiles .tile .inner {
    padding: 2em 0;
}
#section-recherche .tiles-container .tiles .tile .inner .image {
    width: 80%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#section-recherche .tiles-container .tiles .tile .inner .box {
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
    padding: 2em 1.5em;
    text-align: center;
}
#section-gammes .slick-dots {
    text-align: center;
    margin-top: 7.5em;
}
#section-recherche .tiles-container .tiles .slick-dots {
    text-align: center;
}
#section-recherche .tiles-container .tiles .slick-dots li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 2em;
    height: 2em;
    line-height: 2em;
}
#section-recherche .tiles-container .tiles .slick-dots li button {
    font-size: inherit;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
    width: 2em;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    user-select: none;
}
#section-recherche .tiles-container .tiles .slick-dots li button .label {
    display: block;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10em;
    margin-left: -5em;
    color: #282c37;
    user-select: none;
    pointer-events: none;
}
#section-recherche .tiles-container .tiles .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #282c37;
}
#section-recherche
    .tiles-container
    .tiles
    .slick-dots
    li.slick-active
    button:before {
    background-color: #999999;
}
#section-recherche .tiles-container .tiles .slick-arrow {
    opacity: 1;
    position: absolute;
    z-index: 56;
    display: block;
    margin-bottom: 0.25em;
    bottom: 0;
    height: 2em;
    width: 2em;
    overflow: hidden;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    background-size: auto 1.25em;
    background-position: center center;
    background-repeat: no-repeat;
    user-select: none;
}


#section-recherche .tiles-container .tiles .slick-arrow.slick-disabled {
    opacity: 0;
}
/* Animation */
#section-recherche.seen .back .half.right {
    opacity: 1;
    animation: 1s ease-in-out 1s window-frombot both;
    -webkit-animation: 1s ease-in-out 1s window-frombot both;
}
/* Sourcing & Partenariats */
#section-sourcing .back .half .v-half.bottom {
    opacity: 0;
}
#section-sourcing .wave.wave-savoirfaire-2 {
    height: 11vh;
    top: 50%;
    left: 0;
    margin-left: -5.5vh;
    margin-top: -5.5vh;
}
/* Animation */
#section-sourcing.seen .back .half .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-sourcing.seen .wave.wave-savoirfaire-2 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Surveillance & Qualité */
#section-surveillance .back .half .v-half {
    opacity: 0;
}
#section-surveillance .half.right .circle {
    opacity: 0;
    width: 100%;
    border-radius: 50%;
    background-image: url("img/savoirfaire_circle_surveillance.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-surveillance .wave.wave-savoirfaire-3 {
    height: 8em;
    top: 50%;
    right: 0;
    margin-right: -6em;
    margin-top: -4em;
}
/* Animation */
#section-surveillance.seen .back .half .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromtop both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromtop both;
}
#section-surveillance.seen .back .half.right .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-surveillance.seen .half .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-surveillance.seen .wave.wave-savoirfaire-3 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Cuisson */
#section-cuisson .back .half .v-half {
    opacity: 0;
}
#section-cuisson .half .circle {
    position: relative;
    z-index: 52;
    opacity: 0;
    width: 100%;
    border-radius: 50%;
    background-image: url("img/savoirfaire_circle_cuisson.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-cuisson .wave.wave-savoirfaire-4-back {
    z-index: 51;
    height: 6em;
    top: 6.25em;
    left: 0;
    margin-left: -3.5em;
}
#section-cuisson .wave.wave-savoirfaire-4-fore {
    z-index: 53;
    height: 6em;
    top: 0;
    left: 0;
    margin-left: -3.5em;
}
/* Animation */
#section-cuisson.seen .back .half.right .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromtop both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromtop both;
}
#section-cuisson.seen .back .half .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-cuisson.seen .half .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-cuisson.seen .wave.wave-savoirfaire-4-fore,
#section-cuisson.seen .wave.wave-savoirfaire-4-back {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Conditionnement */
#section-conditionnement .back .half .v-half {
    opacity: 0;
}
#section-conditionnement .half.right .circle {
    position: relative;
    z-index: 52;
    opacity: 0;
    width: 100%;
    border-radius: 50%;
    background-image: url("img/savoirfaire_circle_conditionnement.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-conditionnement .wave.wave-savoirfaire-5-back {
    z-index: 51;
    height: 19em;
    top: 50%;
    right: 0;
    margin-right: -6em;
    margin-top: -9.5em;
}
#section-conditionnement .wave.wave-savoirfaire-5-fore {
    z-index: 53;
    height: 8em;
    top: 50%;
    right: 0;
    margin-right: -6em;
    margin-top: -4em;
}
/* Animation */
#section-conditionnement.seen .back .half .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromtop both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromtop both;
}
#section-conditionnement.seen .back .half.right .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-conditionnement.seen .half .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-conditionnement.seen .wave.wave-savoirfaire-5-fore,
#section-conditionnement.seen .wave.wave-savoirfaire-5-back {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Livraison */
#section-livraison .back .half .v-half {
    opacity: 0;
}
#section-livraison .half .circle {
    position: relative;
    z-index: 52;
    opacity: 0;
    width: 100%;
    border-radius: 50%;
    background-image: url("img/savoirfaire_circle_livraison.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-livraison .wave.wave-savoirfaire-6-back {
    z-index: 51;
    height: 5em;
    bottom: 0;
    left: 50%;
    margin-left: -5em;
    margin-bottom: -4em;
}
#section-livraison .wave.wave-savoirfaire-6-fore {
    z-index: 53;
    height: 5em;
    top: 0;
    left: 50%;
    margin-left: -5em;
    margin-top: -4em;
}
/* Animation */
#section-livraison.seen .back .half.right .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromtop both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromtop both;
}
#section-livraison.seen .back .half .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-livraison.seen .half .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-livraison.seen .wave.wave-savoirfaire-6-fore,
#section-livraison.seen .wave.wave-savoirfaire-6-back {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Suivi */
#section-suivi .back .half .v-half {
    opacity: 0;
}
#section-suivi .wave.wave-savoirfaire-7 {
    height: 11vh;
    top: 50%;
    right: 0;
    margin-right: -5.5vh;
    margin-top: -5.5vh;
}
/* Animation */
#section-suivi.seen .back .half .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-fromtop both;
    -webkit-animation: 1s ease-in-out 0.5s window-fromtop both;
}
#section-suivi.seen .back .half.right .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s window-frombot both;
    -webkit-animation: 1s ease-in-out 0.5s window-frombot both;
}
#section-suivi.seen .wave.wave-savoirfaire-7 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    /* Intro */
    .page-savoir-faire #section-intro .letter {
        width: 28em;
        height: 28em;
        margin-left: -14em;
        margin-top: -14em;
    }
    .page-savoir-faire #section-intro .layer.fore .left-pad-20 {
        padding-left: 15em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Commun */
        .page-notre-savoir-faire #section-intro {
            height: auto;
        }
        /* Intro */
        .page-notre-savoir-faire #section-intro {
            background-image: initial;
        }
        .page-notre-savoir-faire #section-intro .letter {
            top: 16em;
            width: 15em;
            height: 15em;
            margin-left: -8.5em;
            margin-top: -7.5em;
        }
        .page-notre-savoir-faire #section-intro .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 31em;
            background-image: url("img/gammes_intro_bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .page-notre-savoir-faire #section-intro .layer.back .rope {
            display: none;
        }
        .page-notre-savoir-faire #section-intro .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            background-color: white;
            padding: 3em 0 8em 0;
        }
        .page-notre-savoir-faire #section-intro .layer.fore .half {
            float: none;
            width: 100%;
        }
        .page-notre-savoir-faire #section-intro .layer.fore .left-pad-20 {
            padding-left: 0;
        }
        .page-notre-savoir-faire #section-intro .layer.fore .v-half,
        .page-notre-savoir-faire #section-intro .layer.fore .stick-bottom {
            position: relative;
            top: auto;
            bottom: auto;
            left: auto;
            right: auto;
        }
        /* Sections suivantes */
        .page-notre-savoir-faire section:not(#section-intro) {
            height: auto;
        }
        .page-notre-savoir-faire section:not(#section-intro) .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 50vh;
        }
        .page-notre-savoir-faire section:not(#section-intro) .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding: 2em 0 4em 0;
        }
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer.back
            .rope
            svg {
            transform: scale(2);
            -webkit-transform: scale(2);
        }
        .page-notre-savoir-faire section:not(#section-intro) .layer.fore .half {
            width: 100%;
            float: none;
            padding-top: 0;
        }
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer.fore
            .v-half.top
            .stick-bottom {
            position: relative;
            bottom: auto;
            left: auto;
        }
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer
            .left-pad-15,
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer
            .left-pad-12 {
            padding-left: 0;
        }
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer
            .right-pad-15,
        .page-notre-savoir-faire
            section:not(#section-intro)
            .layer
            .right-pad-12 {
            padding-right: 0;
        }
        .page-notre-savoir-faire section:not(#section-intro) .half-circle {
            display: none;
        }
        #section-surveillance .layer.fore .half.right,
        #section-cuisson .layer.fore .half:not(.right),
        #section-livraison .layer.fore .half:not(.right),
        #section-conditionnement .layer.fore .half.right {
            display: none;
        }
    }
}

/* PAGE CERTIFICATIONS */
/* Intro */
.page-nos-certifications #section-intro {
    background-image: url("img/certif_intro_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.page-nos-certifications #section-intro .wave.wave-vision-1 {
    height: 13em;
    top: 50%;
    right: 50%;
    margin-right: 8em;
    margin-top: -5.5em;
}
/* Animation */
.page-nos-certifications #section-intro.seen .wave.wave-vision-1 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Certifications */
section.certification .half.intro .circle {
    border-radius: 50%;
    margin: -3em auto 0 auto;
    width: 80%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
section.certification .half.intro .caption {
    position: absolute;
    text-align: center;
    padding-top: 1em;
    opacity: 0.4;
    top: 100%;
    width: 100%;
    left: 0;
}
section.certification .half.intro .layer {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
}
section.certification .half.intro .layer.fore {
    z-index: 51;
}
section.certification .half.intro .layer.back {
    z-index: 50;
}
section.certification .layer.logos {
    pointer-events: none;
}
section.certification .layer.logos .logo {
    margin: 0 auto;
}
section.certification .layer.logos .logo img {
    vertical-align: middle;
    max-height: 10em;
    max-width: 15em;
    filter: drop-shadow(0.5em 0.5em 1em rgba(2, 54, 70, 0.11));
}
section.certification .layer.logos .logo .caption {
    text-align: center;
    padding-top: 0.25em;
    opacity: 0.4;
    top: 100%;
    width: 100%;
    left: 0;
}
section.certification .layer.logos .stick-bottom {
    padding-bottom: 2em;
}
section.certification .layer.logos .stick-top {
    padding-top: 2em;
}
section.certification .layer.logos .logo + .logo {
    margin-top: 2em;
}
section.certification .linked.produits {
    padding: 0 1em;
}
section.certification .linked.produits .tiles-container .tiles {
    height: auto;
}
section.certification .linked.produits .tiles-container .tiles .slick-list {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-bottom: -2em;
}
section.certification .linked.produits .tiles-container .tiles .tile .padded {
    position: relative;
    margin: 0 1em;
}
section.certification .linked.produits .tiles-container .tiles .slick-dots {
    text-align: center;
    margin-top: 1em;
}
section.certification .linked.produits .tiles-container .tiles .slick-dots li {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 2em;
    height: 2em;
    line-height: 2em;
}
section.certification
    .linked.produits
    .tiles-container
    .tiles
    .slick-dots
    li:only-child {
    display: none;
}
section.certification
    .linked.produits
    .tiles-container
    .tiles
    .slick-dots
    li
    button {
    font-size: inherit;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
    width: 2em;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    user-select: none;
}
section.certification
    .linked.produits
    .tiles-container
    .tiles
    .slick-dots
    li
    button
    .label {
    display: block;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10em;
    margin-left: -5em;
    color: #282c37;
    user-select: none;
    pointer-events: none;
}
section.certification
    .linked.produits
    .tiles-container
    .tiles
    .slick-dots
    li
    button:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #282c37;
}
section.certification
    .linked.produits
    .tiles-container
    .tiles
    .slick-dots
    li.slick-active
    button:before {
    background-color: #999999;
}
section.certification .linked .squared-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 0 2em rgba(2, 54, 70, 0.15);
}
section.certification .linked .produit {
    border-radius: 50%;
    cursor: pointer;
}
section.certification .linked .produit .layer.back {
    background-position: center center;
    background-size: 75%;
    background-repeat: no-repeat;
}
section.certification .linked .produit .layer.fore {
    opacity: 0;
}
section.certification .linked .produit .layer.fore h3 {
    font-size: 150%;
}
section.certification .linked .produit:hover .layer.fore {
    opacity: 1;
}
section.certification .linked .flex .circle {
    border-radius: 50%;
}
section.certification ul.t-regular li {
    padding-left: 1.5em;
}
section.certification ul.t-regular li + li {
    margin-top: 0.25em;
}
section.certification ul.t-regular li:before {
    content: "•";
    position: absolute;
    display: block;
    top: 0;
    left: 0.5em;
    color: black;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    /* Intro */
    .page-nos-certifications #section-intro .letter {
        width: 28em;
        height: 28em;
        margin-left: -14em;
        margin-top: -13em;
    }
    .page-nos-certifications #section-intro .layer.fore .left-pad-20 {
        padding-left: 15em;
    }
    .page-nos-certifications #section-intro .wave.wave-vision-1 {
        height: 9em;
        top: 50%;
        right: 50%;
        margin-right: 8em;
        margin-top: -3.5em;
    }
    /* MDPI */
    @media screen and (max-width: 1200px) {
        section.certification .linked .squared-container .title {
            font-size: 85%;
        }
        /* Mobile */
        @media screen and (max-width: 900px) {
            /* Commun */
            .page-nos-certifications #section-intro {
                height: auto;
            }
            /* Intro */
            .page-nos-certifications #section-intro {
                background-image: initial;
            }
            .page-nos-certifications #section-intro .letter {
                top: 16em;
                width: 15em;
                height: 15em;
                margin-left: -8.5em;
                margin-top: -7.5em;
            }
            .page-nos-certifications #section-intro .layer.back {
                position: relative;
                top: auto;
                left: auto;
                height: 31em;
                background-image: url("img/vision_intro_bg.jpg");
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
            .page-nos-certifications #section-intro .layer.fore {
                position: relative;
                top: auto;
                left: auto;
                height: auto;
                background-color: white;
                padding: 3em 0;
            }
            .page-nos-certifications #section-intro .layer.fore .half {
                float: none;
                width: 100%;
            }
            .page-nos-certifications #section-intro .layer.fore .left-pad-20 {
                padding-left: 0;
            }
            .page-nos-certifications #section-intro .layer.fore .v-half,
            .page-nos-certifications #section-intro .layer.fore .stick-bottom {
                position: relative;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
            }
            /* Certifications */
            section.certification:nth-child(odd) {
                background-color: #dfedf3;
            }
            section.certification.fitscreen {
                height: auto;
                padding: 5em 0;
            }
            section.certification .half.intro .circle {
                max-width: 35em;
                margin: -2em auto 0 auto;
            }
            section.certification > .layer.back {
                display: none;
            }
            section.certification > .layer {
                position: relative;
                top: auto;
                left: auto;
                height: auto;
            }
            section.certification > .layer .v-half {
                position: relative;
                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
                height: auto;
            }
            section.certification > .layer .v-half .stick-top,
            section.certification > .layer .v-half .stick-bottom {
                position: relative;
                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
                height: auto;
                padding: 0;
            }
            section.certification > .layer.fore .centered-semiwide > .half {
                float: none;
                width: 100%;
                height: auto;
            }
            section.certification > .layer.fore .flex {
                flex: none;
                float: none;
                width: 100%;
                height: auto;
            }
            section.certification > .layer.fore .flex .circle {
                max-width: 35em;
                margin: 0 auto;
            }
            section.certification > .layer.fore .half + .half {
                margin-top: 3em;
            }
            section.certification > .layer.fore .v-half + .v-half {
                margin-top: 3em;
            }
            section.certification > .layer.fore .left-pad-12,
            section.certification > .layer.fore .left-pad-3 {
                padding-left: 0;
            }
            section.certification > .layer.fore .right-pad-12,
            section.certification > .layer.fore .right-pad-3 {
                padding-right: 0;
            }
            section.certification > .layer.logos {
                text-align: center;
                padding: 0 5em;
                box-sizing: border-box;
                width: 100%;
                padding: 4em 3em;
            }
            section.certification > .layer.logos .logo {
                padding: 1em;
            }
            section.certification > .layer.logos .v-half {
                display: inline-block;
                width: auto;
            }
        }
    }
}

/* PAGE GAMMES */
/* Intro */
.page-nos-gammes #section-intro {
    background-image: url("img/gammes_intro_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-nos-gammes #section-intro .wave.wave-gammes-1 {
    height: 11em;
    top: 50%;
    right: 50%;
    margin-right: 7.5em;
    margin-top: 7em;
}
.page-nos-gammes #section-intro .next-screen {
    color: white;
}
/* Animation */
.page-nos-gammes #section-intro.seen .wave.wave-gammes-1 {
    animation: 1.25s ease-in-out 1.75s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.75s window-fromleft both;
    opacity: 1;
}
/* Gammes */
.page-nos-gammes .gammes section.dark .layer.back {
    background-color: #282c37;
    opacity: 0;
}
.page-nos-gammes .gammes section .inner {
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
.page-nos-gammes .gammes section .inner .image {
    text-align: center;
    opacity: 0;
    height: 70vh;
}
.page-nos-gammes .gammes section .inner .image img {
    height: 100%;
    width: auto;
}
.page-nos-gammes .gammes section .inner .wave.wave-gamme {
    height: 6em;
    bottom: 10%;
    right: 50%;
    margin-right: 15%;
}
.page-nos-gammes .gammes section .inner .circle {
    position: absolute;
    left: 50%;
    top: 0;
    height: auto;
    width: 40%;
    border-radius: 50%;
    margin-left: 3em;
    opacity: 0;
}
.page-nos-gammes .gammes section .gouttes.gouttes-1 {
    top: 2em;
    right: 0;
}
.page-nos-gammes .gammes section .gouttes.gouttes-1 .goutte-1 {
    top: 0;
    right: 0;
    width: 5em;
    height: 5em;
}
.page-nos-gammes .gammes section .gouttes.gouttes-1 .goutte-2 {
    top: 1em;
    right: 7em;
    width: 2em;
    height: 2em;
}
.page-nos-gammes .gammes section .gouttes.gouttes-2 {
    bottom: 3em;
    left: 0;
}
.page-nos-gammes .gammes section .gouttes.gouttes-2 .goutte-1 {
    bottom: 2.5em;
    left: 0;
    width: 3em;
    height: 3em;
}
.page-nos-gammes .gammes section .gouttes.gouttes-2 .goutte-2 {
    bottom: 0;
    left: 2.5em;
    width: 9em;
    height: 9em;
}
.page-nos-gammes .gammes section .g-label .handler {
    display: none;
}
/* Animation */
.page-nos-gammes .gammes section.seen .inner .circle {
    opacity: 1;
    animation: 1s ease-in-out 0.5s scale-in both;
    -webkit-animation: 1s ease-in-out 0.5s scale-in both;
}
.page-nos-gammes .gammes section.seen .inner .image {
    opacity: 1;
    animation: 1s ease-in-out 0.75s scale-in both;
    -webkit-animation: 1s ease-in-out 0.75s scale-in both;
}
.page-nos-gammes .gammes section.seen .wave.wave-gamme {
    opacity: 1;
    animation: 1s ease-out 1s window-fromleft both;
    -webkit-animation: 1s ease-out 1s window-fromleft both;
}
.page-nos-gammes .gammes section.dark.seen .layer.back {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter-over both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter-over both;
}
.page-nos-gammes .gammes section.dark.seen .inner .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s scale-in both;
    -webkit-animation: 1s ease-in-out 1s scale-in both;
}
.page-nos-gammes .gammes section.dark.seen .inner .image {
    opacity: 1;
    animation: 1s ease-in-out 1.25s scale-in both;
    -webkit-animation: 1s ease-in-out 1.25s scale-in both;
}
.page-nos-gammes .gammes section.dark.seen .wave.wave-gamme {
    opacity: 1;
    animation: 1s ease-out 1.5s window-fromleft both;
    -webkit-animation: 1s ease-out 1.5s window-fromleft both;
}
/* MDPI */
@media screen and (max-width: 1400px) {
    /* Intro */
    .page-nos-gammes #section-intro .letter {
        width: 28em;
        height: 28em;
        margin-left: -14em;
        margin-top: -14em;
    }
    .page-nos-gammes #section-intro .layer.fore .left-pad-20 {
        padding-left: 15em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Commun */
        .page-nos-gammes #section-intro {
            height: auto;
        }
        .page-nos-gammes .pagination {
            display: none;
        }
        /* Intro */
        .page-nos-gammes #section-intro {
            background-image: initial;
        }
        .page-nos-gammes #section-intro .letter {
            top: 16em;
            width: 15em;
            height: 15em;
            margin-left: -8.5em;
            margin-top: -7.5em;
        }
        .page-nos-gammes #section-intro .layer.back {
            position: relative;
            top: auto;
            left: auto;
            height: 31em;
            background-image: url("img/gammes_intro_bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .page-nos-gammes #section-intro .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            background-color: white;
            padding: 3em 0 8em 0;
        }
        .page-nos-gammes #section-intro .layer.fore .half {
            float: none;
            width: 100%;
        }
        .page-nos-gammes #section-intro .layer.fore .left-pad-20 {
            padding-left: 0;
        }
        .page-nos-gammes #section-intro .layer.fore .v-half,
        .page-nos-gammes #section-intro .layer.fore .stick-bottom {
            position: relative;
            top: auto;
            bottom: auto;
            left: auto;
            right: auto;
        }
        /* Gammes */
        .page-nos-gammes .all-gammes {
            padding-bottom: 2em;
        }
        .page-nos-gammes .all-gammes .handler-container {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        .page-nos-gammes .all-gammes .handler {
            height: auto;
            width: 100%;
            vertical-align: middle;
            margin-bottom: -1px;
            opacity: 1;
        }
        .page-nos-gammes .all-gammes .handler svg {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        .page-nos-gammes .all-gammes .handler svg path {
            fill: #282c37;
        }
        .page-nos-gammes .gammes {
            z-index: 50;
        }
        .page-nos-gammes .gammes:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 20em;
            background-color: #282c37;
            z-index: 50;
        }
        .page-nos-gammes .slick-list {
            z-index: 51;
        }
        .page-nos-gammes section.gamme {
            height: auto;
            padding: 3em 0;
        }
        .page-nos-gammes section.gamme .centered-thin {
            height: auto;
            width: calc(100% - 5em);
            width: -webkit-calc(100% - 5em);
        }
        .page-nos-gammes section.gamme .third {
            float: none;
            width: 100%;
            height: auto;
            text-align: center;
        }
        .page-nos-gammes section.gamme .third .g-label {
            position: relative;
            border-radius: 1em;
        }
        .page-nos-gammes section.gamme .third .g-label + h2 {
            margin-top: 10em;
        }
        .page-nos-gammes section.gamme .third .g-label .handler {
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
        }
        .page-nos-gammes .gammes section .inner {
            position: relative;
        }
        .page-nos-gammes .gammes section .inner .image {
            text-align: center;
            opacity: 0;
            height: auto;
        }
        .page-nos-gammes .gammes section .inner .image img {
            width: 100%;
            height: auto;
        }
        .page-nos-gammes .gammes section .inner .wave.wave-gamme {
            height: 6em;
            bottom: 10%;
            left: 0;
            margin-left: -1em;
        }
        .page-nos-gammes .gammes section .inner .circle {
            position: absolute;
            right: 0;
            top: 0;
            height: auto;
            width: 50%;
            border-radius: 50%;
            margin-right: -4em;
            opacity: 0;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-1 {
            top: 2em;
            right: 0;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-1 .goutte-1 {
            top: 0;
            right: 0;
            width: 5em;
            height: 5em;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-1 .goutte-2 {
            top: 1em;
            right: 7em;
            width: 2em;
            height: 2em;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-2 {
            bottom: 3em;
            left: 0;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-2 .goutte-1 {
            bottom: 2.5em;
            left: 0;
            width: 3em;
            height: 3em;
        }
        .page-nos-gammes .gammes section .gouttes.gouttes-2 .goutte-2 {
            bottom: 0;
            left: 2.5em;
            width: 9em;
            height: 9em;
        }
        .page-nos-gammes .gammes section .g-label .handler {
            display: none;
        }
        .page-nos-gammes section.gamme .third .title {
            text-align: center;
        }
        .page-nos-gammes section.gamme .two-third {
            float: none;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: 3em;
        }
        .page-nos-gammes section.gamme .two-third .image {
            width: 100%;
            margin: 0 auto;
            max-width: 20em;
        }
        .page-nos-gammes section.gamme .two-third .middle-holder {
            display: block;
        }
        .page-nos-gammes section.gamme .two-third .middle-holder .middle {
            display: block;
        }
        .page-nos-gammes section.gamme .left-pad-8 {
            padding-left: 0;
        }
        .page-nos-gammes section.gamme .right-pad-8 {
            padding-right: 0;
        }
        .page-nos-gammes .gammes section.dark {
            color: inherit;
        }
        .page-nos-gammes .gammes section.dark .layer.back {
            background-color: initial;
        }
        .page-nos-gammes .gammes .slick-dots {
            text-align: center;
        }
        .page-nos-gammes .gammes .slick-dots li {
            display: inline-block;
            padding: 0;
            margin: 0;
            width: 2em;
            height: 2em;
            line-height: 2em;
        }
        .page-nos-gammes .gammes .slick-dots li button {
            font-size: inherit;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 2em;
            width: 2em;
            border: 0;
            outline: 0;
            border: 0;
            cursor: pointer;
            color: rgba(0, 0, 0, 0);
            background-color: rgba(0, 0, 0, 0);
            user-select: none;
        }
        .page-nos-gammes .gammes .slick-dots li button .label {
            display: block;
            opacity: 0;
            position: absolute;
            bottom: 100%;
            left: 50%;
            width: 10em;
            margin-left: -5em;
            color: #282c37;
            user-select: none;
            pointer-events: none;
        }
        .page-nos-gammes .gammes .slick-dots li button:before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -3px;
            margin-top: -3px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #282c37;
        }
    }
}

/* SINGLE GAMME */
#section-gamme-head .layer.front {
    color: white;
}
#section-gamme-head .layer.mid {
    text-align: center;
    padding-top: 5em;
}
#section-gamme-head .layer.mid .illus {
    display: inline-block;
    width: 45em;
    height: 75vh;
}
#section-gamme-head .layer.mid .illus .circle {
    position: absolute;
    left: 50%;
    bottom: 50%;
    height: auto;
    width: 40%;
    border-radius: 50%;
    margin-left: 4em;
    margin-bottom: 4em;
}
#section-gamme-head .layer.mid .illus .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-gamme-head .layer.mid .illus .image img {
    height: 100%;
    width: auto;
}
#section-gamme-head .layer.mid .wave.wave-gamme {
    height: 15%;
    top: 55%;
    margin-top: -0.75em;
    left: 100%;
}
/* Animation */
#section-gamme-head.seen .layer.mid .wave.wave-gamme {
    opacity: 1;
    animation: 1s ease-out 1.5s window-fromleft both;
    -webkit-animation: 1s ease-out 1.5s window-fromleft both;
}
/* Produits */
#section-gamme-produits .layer.back {
    overflow: hidden;
    background-color: white;
}
#section-gamme-produits .layer.back .v-part {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 17em;
}
#section-gamme-produits .layer.back .v-part.bottom {
    top: auto;
    bottom: 0;
    height: 28em;
}
#section-gamme-produits.fancy-bg .layer.back {
    background-color: initial;
}
#section-gamme-produits.fancy-bg .layer.back .v-part {
    display: block;
}
#section-gamme-produits .layer.front {
    position: relative;
    top: auto;
    left: auto;
}
#section-gamme-produits .tiles {
    padding-bottom: 10em;
    transform: translate(0, -9em);
    transform: -webkit-translate(0, -9em);
}
#section-gamme-produits .tiles .tile {
    position: relative;
    margin: 0 auto;
    margin-top: 18em;
    text-align: center;
    height: 26em;
}
#section-gamme-produits .tiles .tile .inner {
    position: relative;
    max-width: calc(100% - 6em);
    max-width: -webkit-calc(100% - 6em);
    height: 100%;
    margin: 0 auto;
}
#section-gamme-produits .tiles .tile .inner .back {
    position: absolute;
    z-index: 55;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 1.4375em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-gamme-produits .tiles .tile .inner .front {
    position: relative;
    z-index: 56;
    padding: 9em 4em 5em 4em;
    box-sizing: border-box;
}
#section-gamme-produits .tiles .tile .inner .front h3 .ellipsis {
    display: block;
    max-height: 2.5em;
    overflow: hidden;
}
#section-gamme-produits .tiles .tile .inner .front h3 + .t-ssmall {
    margin-top: 0.5em;
}
#section-gamme-produits .tiles .tile .inner .front .t-ssmall {
    max-height: 9em;
}
#section-gamme-produits .tiles .tile .inner .center-holder {
    z-index: 57;
    position: absolute;
    top: 100%;
    margin-top: -1.375em;
    left: 0;
    width: 100%;
}
#section-gamme-produits .tiles .tile .inner .image {
    position: absolute;
    z-index: 58;
    height: 18em;
    width: 18em;
    left: 50%;
    margin-left: -9em;
    top: 0;
    margin-top: -9em;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-gamme-produits .tiles .tile .inner .image .scalable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-gamme-produits .tiles .tile:hover .inner .image .scalable {
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-gamme-produits .gouttes.gouttes-1 {
    top: -20vh;
    left: 0;
}
#section-gamme-produits .gouttes.gouttes-1 .goutte-1 {
    top: 0;
    left: 0;
    width: 7em;
    height: 7em;
}
#section-gamme-produits .gouttes.gouttes-1 .goutte-2 {
    top: 7em;
    left: 7em;
    width: 3em;
    height: 3em;
}
#section-gamme-produits .gouttes.gouttes-2 {
    bottom: 35vh;
    right: 27%;
}
#section-gamme-produits .gouttes.gouttes-2 .goutte-1 {
    bottom: 2.5em;
    right: 0;
    width: 3em;
    height: 3em;
}
#section-gamme-produits .gouttes.gouttes-2 .goutte-2 {
    bottom: 0;
    right: 2.5em;
    width: 9em;
    height: 9em;
}
/* Animation */
#section-gamme-produits .seen .btn-outline.from-center:before {
    animation: 1s ease-in-out 0s cta-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s cta-fromcenter both;
}
#section-gamme-produits .seen .btn-outline.from-center .in {
    animation: 1s ease-in-out 1s fade-in both;
    -webkit-animation: 1s ease-in-out 1s fade-in both;
}
/* MDPI */
@media screen and (max-width: 1500px) {
    #section-gamme-head .layer.mid .illus {
        margin-right: -10em;
    }
    @media screen and (max-width: 1200px) {
        /* Entete */
        #section-gamme-head .layer.mid .illus {
            width: 37.5em;
            margin-right: -15em;
        }
        #section-gamme-head .layer.front .right-pad-15 {
            padding-right: 10em;
        }
        #section-gamme-head .layer.back .v-half.v-half-65 {
            height: 60%;
        }
        /* Produits */
        #section-gamme-produits .tiles .tile {
            width: 50%;
        }
        /* Mobile */
        @media screen and (max-width: 900px) {
            /* Entete */
            #section-gamme-head {
                height: auto;
            }
            #section-gamme-head .layer.back {
                display: none;
            }
            #section-gamme-head .layer.mid {
                position: relative;
                top: auto;
                left: auto;
                height: auto;
                padding-top: 9em;
            }
            #section-gamme-head .layer.mid:before {
                position: absolute;
                z-index: 50;
                content: "";
                display: block;
                top: 0;
                left: 0;
                height: 75%;
                width: 100%;
                background-color: #282c37;
            }
            #section-gamme-head .layer.mid .centered-wide {
                z-index: 51;
            }
            #section-gamme-head .layer.front {
                position: relative;
                top: auto;
                left: auto;
                color: inherit;
                padding: 3em 0;
            }
            #section-gamme-head .layer.mid .illus {
                position: relative;
                display: block;
                width: 100%;
                max-width: 35em;
                top: auto;
                right: auto;
                height: auto;
                margin: 0 auto;
            }
            #section-gamme-head .layer.mid .illus .circle {
                width: 50%;
            }
            #section-gamme-head .layer.front .half {
                float: none;
                width: 100%;
            }
            #section-gamme-head .layer.front .v-half {
                position: relative;
                top: auto;
                left: auto;
                height: auto;
            }
            #section-gamme-head .layer.front .right-pad-15 {
                padding-right: 0;
            }
            /* Produits */
            #section-gamme-produits .tiles .tile {
                width: 100%;
            }
            #section-gamme-produits .tiles .tile .inner {
                max-width: 100%;
            }
        }
    }
}
/* SINGLE PRODUIT */
/* Entete */
#section-product-head .layer.back .v-half {
    opacity: 0;
    height: calc(40% - 2em);
    height: -webkit-calc(40% - 2em);
}
#section-product-head .layer.fore .g-label {
    opacity: 0;
}
#section-product-head .layer.mid .image {
    width: 100%;
    height: 60vh;
    opacity: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-product-head .layer.mid .image img {
    height: 100%;
    width: auto;
}
#section-product-head .layer.fore .half.right .a-regular {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4em;
    color: white;
}
#section-product-head .wave.wave-produit-1 {
    height: 6em;
    top: 20%;
    left: 0;
    margin-left: -1em;
}
#section-product-head .layer.fore .left-arrow {
    position: relative;
    padding-left: 3.5em;
}
#section-product-head .layer.fore .left-arrow:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 2em;
    height: 1em;
    bottom: 0;
    margin-bottom: 0.15em;
    background-image: url("img/produit_back_arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
/* Animation */
#section-product-head.seen .layer.fore .g-label {
    opacity: 1;
}
#section-product-head.seen .layer.back .v-half {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-frombot-over both;
    -webkit-animation: 1s ease-in-out 0s circle-frombot-over both;
}
#section-product-head.seen .layer.mid .image {
    opacity: 1;
    animation: 1s ease-in-out 1s scale-in both;
    -webkit-animation: 1s ease-in-out 1s scale-in both;
}
#section-product-head.seen .wave.wave-produit-1 {
    opacity: 1;
    animation: 1s ease-out 1.5s window-fromleft both;
    -webkit-animation: 1s ease-out 1.5s window-fromleft both;
}
#section-product-head.seen .layer.fore .half.right .a-regular {
    animation: 1s ease-out 3s fade-fromright both;
    -webkit-animation: 1s ease-out 3s fade-fromright both;
}
/* Animation */
#section-product-head.seen + #section-origin .handler {
    opacity: 1;
    animation: 1s ease-out 3s translate-frombot both;
    -webkit-animation: 1s ease-out 3s translate-frombot both;
}
/* Origine */
#section-origin {
    padding: 2em 0;
}
#section-origin .tile .inner {
    position: absolute;
    opacity: 0;
    top: 2em;
    left: 2em;
    width: calc(100% - 4em);
    width: -webkit-calc(100% - 4em);
    height: calc(100% - 4em);
    height: -webkit-calc(100% - 4em);
    border-radius: 50%;
    background-color: #f5f9fb;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
#section-origin .tile.map .inner {
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-origin .tile .inner .middle-holder {
    text-align: center;
    padding: 0 20%;
}
#section-origin .tile .inner .middle {
    width: 100%;
    text-align: center;
}
#section-origin .tile .inner .middle h2 + .t-regular {
    margin-top: 1.5em;
}
#section-origin .centered-thin {
    z-index: 51;
}
#section-origin .handler-container {
    z-index: 50;
}
/* Animation */
#section-origin.seen .tile .inner {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter both;
}
#section-origin.seen .tile:nth-child(2) .inner {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
/* Caractéristiques techniques */
#section-technical {
    opacity: 0;
    background-color: #eaf3f7;
    padding: 2em 0;
}
#section-technical .two-third {
    position: absolute;
    top: 2em;
    bottom: 2em;
    left: 0;
}
#section-technical .two-third .title + .properties {
    margin-top: 3em;
}
#section-technical .two-third .property {
    position: relative;
    padding-left: 4.5em;
    opacity: 0;
}
#section-technical .two-third .property .bold {
    font-weight: 800;
}
#section-technical .two-third .property:before {
    content: "";
    opacity: 0;
    display: block;
    position: absolute;
    top: 50%;
    height: 2em;
    width: 2em;
    margin-top: -1em;
    left: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-technical .two-third .property + .property {
    margin-top: 2em;
}
#section-technical .third .inner {
    position: absolute;
    opacity: 0;
    top: 2em;
    left: 2em;
    width: calc(100% - 4em);
    width: -webkit-calc(100% - 4em);
    height: calc(100% - 4em);
    height: -webkit-calc(100% - 4em);
    border-radius: 50%;
    background-color: #ffffff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
#section-technical .third .image {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#section-technical .third .image .smooth-float {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-technical .third .wave.wave-produit-2 {
    opacity: 0;
    height: 5em;
    bottom: 20%;
    left: 0;
    margin-left: -1em;
}
/* Animation */
#section-technical.seen {
    opacity: 1;
    animation: 1s ease-in-out 0s window-fromleft both;
    -webkit-animation: 1s ease-in-out 0s window-fromleft both;
}
#section-technical.seen .third .inner {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-technical.seen .third .image {
    opacity: 1;
    animation: 1s ease-in-out 1.5s scale-in both;
    -webkit-animation: 1s ease-in-out 1.5s scale-in both;
}
#section-technical.seen .third .image .smooth-float {
    animation: 3s ease-in-out infinite 2.5s smooth-float both;
    -webkit-animation: 3s ease-in-out infinite 2.5s smooth-float both;
}
#section-technical.seen .third .wave.wave-produit-2 {
    opacity: 1;
    animation: 1s ease-out 2s window-fromleft both;
    -webkit-animation: 1s ease-out 2s window-fromleft both;
}
#section-technical.seen .two-third .property {
    animation: 0.5s ease-in-out 2.25s fade-fromright both;
    -webkit-animation: 0.5s ease-in-out 2.25s fade-fromright both;
}
#section-technical.seen .two-third .property:before {
    opacity: 1;
    animation: 0.5s ease-in-out 2.5s scale-in both;
    -webkit-animation: 0.5s ease-in-out 2.5s scale-in both;
}
#section-technical.seen .two-third .property.name {
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
#section-technical.seen .two-third .property.name:before {
    animation-delay: 2.75s;
    -webkit-animation-delay: 2.75s;
}
#section-technical.seen .two-third .property.size {
    animation-delay: 2.75s;
    -webkit-animation-delay: 2.75s;
}
#section-technical.seen .two-third .property.size:before {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}
#section-technical.seen .two-third .property.label {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}
#section-technical.seen .two-third .property.label:before {
    animation-delay: 3.25s;
    -webkit-animation-delay: 3.25s;
}
#section-technical.seen .two-third .property.preparation {
    animation-delay: 3.25s;
    -webkit-animation-delay: 3.25s;
}
#section-technical.seen .two-third .property.preparation:before {
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}
#section-technical.seen .two-third .property.location {
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}
#section-technical.seen .two-third .property.location:before {
    animation-delay: 3.75s;
    -webkit-animation-delay: 3.75s;
}
#section-technical.seen .two-third .property.conditioning {
    animation-delay: 3.75s;
    -webkit-animation-delay: 3.75s;
}
#section-technical.seen .two-third .property.conditioning:before {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
/* Les plus produit */
#section-plus {
    padding: 10em 0;
    background-color: #f5f9fb;
    opacity: 0;
}
#section-plus .title {
    text-align: center;
}
#section-plus .title + .flexbox {
    margin-top: 4em;
}
#section-plus .flexbox .flex {
    box-sizing: border-box;
    padding: 0 2em;
}
#section-plus .flexbox .flex .inner {
    position: relative;
    padding: 4em 3em 3em 3em;
    height: 100%;
    box-sizing: border-box;
}
#section-plus .flexbox .flex .inner .back {
    position: absolute;
    z-index: 55;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#section-plus .flexbox .flex .inner .back .shape {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-plus .flexbox .flex .inner .front {
    position: relative;
    opacity: 0;
    z-index: 56;
    text-align: center;
}
#section-plus .flexbox .flex .inner .number {
    position: absolute;
    opacity: 0;
    z-index: 57;
    width: 3.5em;
    height: 3.5em;
    line-height: 3.5em;
    top: 0;
    margin-top: -1.75em;
    left: 50%;
    margin-left: -1.75em;
    background-color: white;
    border: solid 2px #ae9861;
    border-radius: 50%;
    text-align: center;
}
#section-plus .flexbox .flex .inner .number .in {
    opacity: 0;
    font-size: 150%;
    font-weight: 600;
    line-height: 2.2em;
}
/* Animation */
#section-plus.seen {
    opacity: 1;
    animation: 1s ease-in-out 0s window-fromright both;
    -webkit-animation: 1s ease-in-out 0s window-fromright both;
}
#section-plus.seen .flexbox .flex .inner .number {
    animation: 0.5s ease-out 1s number-scale-in both;
    -webkit-animation: 0.5s ease-out 1s number-scale-in both;
}
#section-plus.seen .flexbox .flex .inner .number .in {
    animation: 1s ease-out 1.5s fade-in both;
    -webkit-animation: 1s ease-out 1.5s fade-in both;
}
#section-plus.seen .flexbox .flex .inner .back .shape {
    animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
    -webkit-animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
}
#section-plus.seen .flexbox .flex .inner .front {
    animation: 1s ease-out 2.75s fade-in both;
    -webkit-animation: 1s ease-out 2.75s fade-in both;
}
#section-plus.seen .flexbox .flex:nth-child(2) .inner .number {
    animation-delay: 1.15s;
    -webkit-animation-delay: 1.15s;
}
#section-plus.seen .flexbox .flex:nth-child(2) .inner .number .in {
    animation-delay: 1.65s;
    -webkit-animation-delay: 1.65s;
}
#section-plus.seen .flexbox .flex:nth-child(2) .inner .back .shape {
    animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
}
#section-plus.seen .flexbox .flex:nth-child(2) .inner .front {
    animation-delay: 2.9s;
    -webkit-animation-delay: 2.9s;
}
#section-plus.seen .flexbox .flex:nth-child(3) .inner .number {
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
}
#section-plus.seen .flexbox .flex:nth-child(3) .inner .number .in {
    animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
}
#section-plus.seen .flexbox .flex:nth-child(3) .inner .back .shape {
    animation-delay: 1.55s;
    -webkit-animation-delay: 1.55s;
}
#section-plus.seen .flexbox .flex:nth-child(3) .inner .front {
    animation-delay: 3.05s;
    -webkit-animation-delay: 3.05s;
}
/* A voir aussi */
#section-aussi .title {
    text-align: center;
}
#section-aussi .tiles-container {
    margin-top: 3em;
}
#section-aussi .layer .v-half.bottom {
    background-color: #dfedf3;
    opacity: 0;
}
#section-aussi .tiles {
    height: 60vh;
}
#section-aussi .tile {
    padding: 8em 2em 2em 2em;
    text-align: center;
}
#section-aussi .tile .inner {
    position: relative;
    max-width: 25em;
    margin: 0 auto;
}
#section-aussi .tile .inner .back {
    position: absolute;
    z-index: 55;
}
#section-aussi .tile .inner .back .shape {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-aussi .tile .inner .front {
    position: relative;
    z-index: 56;
    padding: 8em 3em 2em 3em;
    box-sizing: border-box;
}
#section-aussi .tile .inner .front h3 + .t-ssmall {
    margin-top: 0.5em;
    max-height: calc(20vh - 11em);
    max-height: -webkit-calc(27.5vh - 11em);
}
#section-aussi .tile .inner .center-holder {
    z-index: 57;
    position: absolute;
    top: 100%;
    margin-top: -1.25em;
    left: 0;
    width: 100%;
}
#section-aussi .tile .inner .image {
    position: absolute;
    z-index: 58;
    height: 18em;
    width: 18em;
    left: 50%;
    margin-left: -9em;
    top: 0;
    margin-top: -9em;
}
#section-aussi .tile .inner .image .fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-aussi .tile .inner .image .scalable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-aussi .tile:hover .inner .image .scalable {
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
/* Animation */
#section-aussi.seen .title h3 {
    animation: 1s ease-out 2s fade-fromright both;
    -webkit-animation: 1s ease-out 2s fade-fromright both;
}
#section-aussi.seen .layer .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-frombot-over both;
    -webkit-animation: 1s ease-in-out 0.5s circle-frombot-over both;
}
#section-aussi.seen .tile .inner .back .shape {
    animation: 1.5s ease-in-out 1.5s panel-fromcenter both;
    -webkit-animation: 1.5s ease-in-out 1.5s panel-fromcenter both;
}
#section-aussi.seen .tile .inner .front {
    animation: 1s ease-out 2.75s fade-in both;
    -webkit-animation: 1s ease-out 2.75s fade-in both;
}
#section-aussi.seen .tile .inner .image {
    animation: 1s ease-in-out 2.5s scale-in both;
    -webkit-animation: 1s ease-in-out 2.5s scale-in both;
}
#section-aussi.seen .tile .inner .btn-outline.from-center:before {
    animation: 1s ease-in-out 2.75s cta-fromcenter both;
    -webkit-animation: 1s ease-in-out 2.75s cta-fromcenter both;
}
#section-aussi.seen .tile .inner .btn-outline.from-center .in {
    animation: 1s ease-in-out 3.75s fade-in both;
    -webkit-animation: 1s ease-in-out 3.75s fade-in both;
}
#section-aussi.seen .tile:nth-child(2) .inner .back .shape {
    animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
    -webkit-animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
}
#section-aussi.seen .tile:nth-child(2) .inner .front {
    animation: 1s ease-out 2.5s fade-in both;
    -webkit-animation: 1s ease-out 2.5s fade-in both;
}
#section-aussi.seen .tile:nth-child(2) .inner .image {
    animation: 1s ease-in-out 2.25s scale-in both;
    -webkit-animation: 1s ease-in-out 2.25s scale-in both;
}
#section-aussi.seen .tile:nth-child(2) .inner .btn-outline.from-center:before {
    animation: 1s ease-in-out 2.5s cta-fromcenter both;
    -webkit-animation: 1s ease-in-out 2.5s cta-fromcenter both;
}
#section-aussi.seen .tile:nth-child(2) .inner .btn-outline.from-center .in {
    animation: 1s ease-in-out 3.5s fade-in both;
    -webkit-animation: 1s ease-in-out 3.5s fade-in both;
}
/* MBP */
@media screen and (max-height: 850px) {
    #section-aussi .tile .inner .front h3 .ellipsis {
        display: block;
        max-height: 2.5em;
        overflow: hidden;
    }
}
/* MDPI */
@media screen and (max-width: 1200px) {
    /* Origine */
    #section-origin .centered-thin {
        width: calc(100% - 5em);
        width: -webkit-calc(100% - 5em);
    }
    #section-origin .tile:nth-child(1) .inner {
        font-size: 85%;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Header clair */
        .single-produit header {
            color: white;
        }
        .single-produit:not(.opened-nav) header .logo img.image-dark {
            display: none;
        }
        .single-produit:not(.opened-nav) header .logo img.image-light {
            display: block;
        }
        .single-produit header .languages a + a:before {
            background-color: rgba(255, 255, 255, 0.1);
        }
        /* Intro */
        #section-product-head {
            height: auto;
            min-height: 100vh;
        }
        #section-product-head .layer.back .v-half {
            display: none;
        }
        #section-product-head .layer.mid {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding-top: 9em;
        }
        #section-product-head .layer.mid .image {
            height: auto;
        }
        #section-product-head .layer.mid .image img {
            width: 100%;
            height: auto;
        }
        #section-product-head .layer.mid .inner {
            max-width: 35em;
            margin: 0 auto;
        }
        #section-product-head .layer.mid:before {
            opacity: 0;
            position: absolute;
            z-index: 50;
            content: "";
            display: block;
            top: 0;
            left: 0;
            height: 75%;
            width: 100%;
            background-color: #282c37;
        }
        #section-product-head .layer.mid .centered-thin {
            z-index: 51;
        }
        #section-product-head .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-product-head .layer.fore .half,
        #section-product-head .layer.mid .half {
            float: none;
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-product-head .layer.fore .v-half {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-product-head .layer.fore .v-half.v-half-60 {
            padding: 3em 0 8em 0;
        }
        #section-product-head .layer.fore .v-half .stick-bottom {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-product-head .layer.fore .left-pad-8 {
            padding-left: 0;
        }
        #section-product-head .layer.fore .v-half.bottom {
            display: none;
        }
        /* Animation */
        #section-product-head .layer.mid:before {
            opacity: 1;
            animation: 1s ease-in-out 0s circle-frombot-over both;
            -webkit-animation: 1s ease-in-out 0s circle-frombot-over both;
        }
        /* Origine */
        #section-origin {
            padding: 1em 0 4em 0;
            background-color: #f5f9fb;
        }
        #section-origin .centered-thin {
            width: calc(100% - 10em);
            width: -webkit-calc(100% - 10em);
        }
        #section-origin .tile {
            float: none;
            width: 100%;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-origin .tile .inner {
            top: 1em;
            left: 1em;
            width: calc(100% - 2em);
            width: -webkit-calc(100% - 2em);
            height: calc(100% - 2em);
            height: -webkit-calc(100% - 2em);
        }
        #section-origin .tile:nth-child(1) .inner {
            font-size: 85%;
        }
        #section-origin .tile:nth-child(2) {
            display: none;
        }
        #section-origin .tile:nth-child(3) .inner {
            background-color: white;
        }
        #section-origin .tile .inner .middle-holder {
            padding: 0;
        }
        #section-origin .tile .inner .middle h2 + .t-regular {
            font-size: 120%;
            line-height: 1.5em;
        }
        #section-origin .handler-container {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-origin .handler {
            height: auto;
            width: 100%;
            vertical-align: middle;
            margin-bottom: -1px;
        }
        #section-origin .handler svg {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-origin .handler svg path {
            fill: #f5f9fb;
        }
        /* Caractéristiques techniques */
        #section-technical {
            padding: 4em 0;
        }
        #section-technical .two-third,
        #section-technical .third {
            float: none;
            position: relative;
            top: auto;
            left: auto;
            bottom: auto;
            width: 100%;
            height: auto;
        }
        #section-technical .third {
            max-width: 35em;
            margin: 0 auto;
        }
        #section-technical .third .inner {
            top: 1em;
            left: 1em;
            width: calc(100% - 2em);
            width: -webkit-calc(100% - 2em);
            height: calc(100% - 2em);
            height: -webkit-calc(100% - 2em);
        }
        #section-technical .third .image {
            top: -1em;
            left: -1em;
            width: calc(100% + 2em);
            width: -webkit-calc(100% + 2em);
            height: calc(100% + 2em);
            height: -webkit-calc(100% + 2em);
        }
        #section-technical .two-third {
            padding-top: 4em;
        }
        #section-technical .two-third .properties .property {
            font-size: 115%;
        }
        #section-technical .two-third .properties .half {
            float: none;
            width: 100%;
        }
        #section-technical .two-third .properties .half + .half {
            margin-top: 2em;
        }
        /* Les plus produit */
        #section-plus {
            padding: 4em 0;
        }
        #section-plus .title + .flexbox {
            margin-top: 6em;
        }
        #section-plus .flexbox .flex {
            flex: none;
            width: 100%;
            padding: 0;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-plus .flexbox .flex + .flex {
            margin-top: 6em;
        }
        /* Mobile */
        @media screen and (max-width: 600px) {
            /* A voir aussi */
            #section-aussi {
                height: auto;
                padding: 5em 0;
            }
            #section-aussi .middle-holder {
                padding: 0 5em;
                box-sizing: border-box;
            }
            #section-aussi .tiles-container {
                margin: 2em -5em 0 -5em;
            }
            #section-aussi .tiles {
                height: auto;
            }
            #section-aussi .tiles .tile {
                padding: 1.5em 1.5em 2em 1.5em;
            }
            #section-aussi .tiles .tile .inner {
                height: 100%;
                max-width: initial;
            }
            #section-aussi .tiles .tile .inner .front {
                display: none;
            }
            #section-aussi .tiles .tile .inner .back .shape {
                border-radius: 50%;
                opacity: 1;
            }
            #section-aussi .tiles .tile .inner .image {
                z-index: 56;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                margin: 0;
                background-size: 65% auto;
                opacity: 1;
            }
            #section-aussi .tiles .slick-dots {
                text-align: center;
                margin-top: 3em;
            }
            #section-aussi .tiles .slick-dots li {
                display: inline-block;
                padding: 0;
                margin: 0;
                width: 2em;
                height: 2em;
                line-height: 2em;
            }
            #section-aussi .tiles .slick-dots li button {
                font-size: inherit;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                height: 2em;
                width: 2em;
                border: 0;
                outline: 0;
                border: 0;
                cursor: pointer;
                color: rgba(0, 0, 0, 0);
                background-color: rgba(0, 0, 0, 0);
                user-select: none;
            }
            #section-aussi .tiles .slick-dots li button .label {
                display: block;
                opacity: 0;
                position: absolute;
                bottom: 100%;
                left: 50%;
                width: 10em;
                margin-left: -5em;
                color: #282c37;
                user-select: none;
                pointer-events: none;
            }
            #section-aussi .tiles .slick-dots li button:before {
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -3px;
                margin-top: -3px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #282c37;
            }
            /* Animation */
            #section-aussi.seen .tiles .tile .inner .shape {
                animation: none;
            }
            #section-aussi.seen .tiles .tile .inner .image {
                animation: none;
            }
        }
    }
}

/* CARTE MATRICE DE POINTS */
.dotmatrix {
    position: absolute;
    z-index: 53;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}
.dotmatrix .line {
    width: 100%;
    height: calc(100% / 11);
    height: -webkit-calc(100% / 11);
}
.dotmatrix .line .dot {
    position: relative;
    width: calc(100% / 11);
    width: -webkit-calc(100% / 11);
    height: 100%;
}
.dotmatrix .line .dot.filled:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25%;
    margin-left: -25%;
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #282c37;
}
.dotmatrix .line .dot.filled.cta {
    cursor: pointer;
}
.dotmatrix .line .dot.filled.cta:after {
    background-color: #999999;
}
.dotmatrix .line .dot.filled.cta.active:after {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
.dotmatrix .line .dot .bubble {
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 18em;
    margin-left: -9em;
    margin-bottom: 0.5em;
    text-align: center;
    pointer-events: none;
}
.dotmatrix .line .dot .bubble .in {
    padding: 0.4em 1.4em;
    border-radius: 1em;
}
.dotmatrix .line .dot .bubble:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 0.2em;
    margin-left: -1.5em;
    display: block;
    width: 3em;
    height: 1em;
    background-position: center top;
    background-image: url("img/sites_bubble_tip.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.dotmatrix .line .dot.filled.cta:hover .bubble {
    opacity: 1;
}
.dotmatrix.small {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}
.dotmatrix.small .line .dot.filled.cta:after {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
}

/* SITES DE PRODUCTION */
#section-all-sites .layer.back .v-half.bottom {
    opacity: 0;
    background-color: #dfedf3;
}
#section-all-sites .layer.fore .v-half.top .stick-bottom {
    padding-bottom: 2em;
}
#section-all-sites .layer.fore .v-half.bottom {
    padding-top: 2em;
}
#section-all-sites .layer.fore .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: -1em;
    margin-top: -22em;
    display: inline-block;
    width: 44em;
    background-image: url("img/home_o_waves.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-all-sites .layer.fore .circle:after {
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    margin-top: -40%;
    margin-left: -40%;
    background-color: white;
}
#section-all-sites .layer.fore .circle .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#section-all-sites .layer.fore .circle .video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section-all-sites .layer.fore .discover {
    opacity: 0;
    padding-left: 2.35em;
    padding-top: 0.85em;
}
#section-all-sites .layer.fore .discover .picto {
    position: absolute;
    left: 0;
    top: 0;
    height: 3.25em;
    width: 1.5em;
}
#section-all-sites .layer.fore .discover .picto:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -0.425em;
    display: block;
    width: 0.85em;
    height: 0.8em;
    border-radius: 50%;
    background-color: #999999;
}
#section-all-sites .layer.fore .discover .picto:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.5em;
    height: 2em;
    background-image: url("img/sites_picto_mouse.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-all-sites .layer.fore .wave.wave-sites-1 {
    height: 1.75em;
    position: relative;
    margin-top: 4em;
}
#section-all-sites .dotmatrix {
    opacity: 0;
}
/* Couche CTA */
#section-all-sites .layer.cta {
    display: none;
}
#section-all-sites .layer.cta .circle-holder {
    position: relative;
    max-width: 35em;
}
#section-all-sites .layer.cta .circle {
    opacity: 0;
    width: 100%;
    border-radius: 50%;
    margin-bottom: -2.5em;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-all-sites .layer.cta .title {
    margin-top: -2em;
    width: 50%;
}
#section-all-sites .layer.cta .cta-single {
    display: none;
    position: relative;
    z-index: 54;
    opacity: 0;
}
#section-all-sites .layer.cta .cta-single.active {
    display: block;
    opacity: 1;
}
#section-all-sites .layer.cta .cta-single .btn-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    background-image: url("img/sites_picto_close.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}
#section-all-sites .layer.cta .cta-single .btn-close:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}
#section-all-sites .layer.cta .cta-single .wave.wave-sites-2 {
    height: 3.5em;
    right: 0;
    top: 0;
}
/* Animation */
#section-all-sites.seen .layer.back .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-frombot-over both;
    -webkit-animation: 1s ease-in-out 0.5s circle-frombot-over both;
}
#section-all-sites.seen .layer.fore .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-all-sites.seen .layer.fore .circle:after {
    opacity: 1;
    animation: 1s ease-in-out 1.5s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1.5s circle-fromcenter both;
}
#section-all-sites.seen .dotmatrix {
    opacity: 1;
    animation: 1s ease-in-out 2.25s fade-in both;
    -webkit-animation: 1s ease-in-out 2.25s fade-in both;
}
#section-all-sites.seen .layer.fore .discover {
    opacity: 1;
    animation: 1s ease-in-out 3s fade-in both;
    -webkit-animation: 1s ease-in-out 3s fade-in both;
}
#section-all-sites.seen .layer.fore .wave.wave-sites-1 {
    animation: 1.25s ease-in-out 3s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 3s window-fromleft both;
    opacity: 1;
}
#section-all-sites.seen .cta-single .title h2 {
    animation: none;
}
#section-all-sites.seen .cta-single .title + p.t-regular {
    animation: none;
}
#section-all-sites.seen .cta-single.active .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-all-sites.seen .cta-single.active .title h2 {
    opacity: 1;
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-all-sites.seen .cta-single.active .title + p.t-regular {
    opacity: 1;
    animation: 1s ease-out 1.5s fade-fromright both;
    -webkit-animation: 1s ease-out 1.5s fade-fromright both;
}
#section-all-sites.seen .cta-single.active .wave.wave-sites-2 {
    animation: 1.25s ease-in-out 1.5s window-fromright both;
    -webkit-animation: 1.25s ease-in-out 1.5s window-fromright both;
    opacity: 1;
}
/* Plus court quand fermeture cta */
#section-all-sites.seen .layer.fore.already-seen .title h4 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
#section-all-sites.seen .layer.fore.already-seen .title h2 {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
#section-all-sites.seen .layer.fore.already-seen .title + p.t-regular {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
#section-all-sites.seen .layer.fore.already-seen .discover {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
#section-all-sites.seen .layer.fore.already-seen .wave.wave-sites-1 {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
} /* MDPI */
@media screen and (max-width: 1100px) {
    #section-all-sites .layer.fore .circle {
        margin-top: -19em;
        width: 38em;
    }
    #section-all-sites .layer .right-pad-15 {
        padding-right: 12em;
    }
    #section-all-sites .layer .right-pad-18 {
        padding-right: 15em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        #section-all-sites .layer.fore .circle {
            margin-top: -15em;
            width: 30em;
        }
        #section-all-sites .layer .right-pad-15 {
            padding-right: 5em;
        }
        #section-all-sites .layer .right-pad-18 {
            padding-right: 5em;
        }
        /* Mobile */
        @media screen and (max-width: 600px) {
            #section-all-sites {
                height: auto;
                min-height: 100vh;
            }
            #section-all-sites .layer.fore {
                position: relative;
                top: auto;
                left: auto;
                height: auto;
                padding: 9em 0 4em 0;
            }
            #section-all-sites .layer.fore .half {
                float: none;
                width: 100%;
                height: auto;
            }
            #section-all-sites .layer.fore .half.right {
                padding-top: 2em;
            }
            #section-all-sites .layer.fore .half .v-half {
                position: relative;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
            }
            #section-all-sites .layer.fore .centered-thin {
                height: auto;
                width: calc(100% - 6.5em);
                width: -webkit-calc(100% - 6.5em);
            }
            #section-all-sites .layer.fore .half.intro {
                display: block !important;
            }
            #section-all-sites .layer.fore .half.intro .v-half .stick-bottom {
                position: relative;
                bottom: auto;
                left: auto;
                padding-bottom: 0;
            }
            #section-all-sites .layer.fore .half.intro .v-half.bottom {
                display: none;
            }
            #section-all-sites .layer.fore .half.intro .title h4 {
                display: none;
            }
            #section-all-sites .layer.fore .half.intro .title h2 {
                margin-top: 0;
                font-size: 255%;
            }
            #section-all-sites .layer.fore .half.intro .t-regular {
                display: none;
            }
            #section-all-sites .layer.fore .half.intro .right-pad-18,
            #section-all-sites .layer.fore .half.intro .right-pad-15 {
                padding-right: 0;
            }
            #section-all-sites .layer.fore .circle {
                display: block;
                opacity: 0;
                position: relative;
                top: auto;
                left: auto;
                margin: 0 auto;
                width: 100%;
                max-width: 35em;
            }
            #section-all-sites .layer.fore .circle:after {
                opacity: 0;
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 80%;
                height: 80%;
                margin-top: -40%;
                margin-left: -40%;
                background-color: white;
            }
            #section-all-sites .dotmatrix .line .dot.filled.cta.active:after {
                transform: scale(1.25);
                -webkit-transform: scale(1.25);
            }
            #section-all-sites .layer.cta {
                width: calc(100% - 6em);
                width: -webkit-calc(100% - 6em);
                background-color: white;
                z-index: 54;
                border-top-right-radius: 4em;
                border-bottom-right-radius: 4em;
                box-shadow: 0 0 3em rgba(2, 54, 70, 0.3);
            }
            #section-all-sites .layer.cta .centered-thin {
                height: auto;
            }
            #section-all-sites .layer.cta .half {
                float: none;
                width: 100%;
                height: auto;
            }
            #section-all-sites .layer.cta .half .right-pad-15 {
                padding-right: 0;
            }
            #section-all-sites .layer.cta .half .v-half {
                position: relative;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
                height: auto;
            }
            #section-all-sites .layer.cta .half .v-half.top {
                padding-top: 10em;
            }
            #section-all-sites .layer.cta .half .v-half .stick-bottom {
                position: relative;
                bottom: auto;
                left: auto;
            }
        }
    }
}
/* SITE DE PRODUCTION */
/* Intro */
#section-site-head .layer.back .v-half.bottom {
    opacity: 0;
    background-color: #282c37;
}
#section-site-head .layer.fore .v-half.top .stick-bottom {
    padding-bottom: 2em;
}
#section-site-head .layer.fore .v-half.bottom {
    padding-top: 2em;
}
#section-site-head .layer.mid {
    z-index: 56;
}
#section-site-head .circle {
    position: relative;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: auto;
    background-image: url("img/site_cover_sample.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-site-head .circle.open-popup:after {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -3em;
    margin-top: -3em;
    display: inline-block;
    width: 6em;
    height: 6em;
    background-image: url("img/sites_picto_play.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-site-head .circle.open-popup:hover:after {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
}
#section-site-head .layer.mid .wave.wave-site-1 {
    height: 6em;
    left: -5em;
    top: 50%;
    margin-top: -3em;
}
#section-site-head .layer.fore .left-arrow {
    opacity: 0;
    position: relative;
    padding-left: 3.5em;
}
#section-site-head .layer.fore .left-arrow:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 2em;
    height: 1em;
    bottom: 0;
    margin-bottom: 0.15em;
    background-image: url("img/produit_back_arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
/* Animation */
#section-site-head.seen .layer.back .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-frombot-over both;
    -webkit-animation: 1s ease-in-out 0.5s circle-frombot-over both;
}
#section-site-head.seen .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-site-head.seen .layer.mid .wave.wave-site-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 1.5s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.5s window-fromleft both;
}
#section-site-head.seen .layer.fore .left-arrow {
    z-index: 57;
    opacity: 1;
    animation: 1s ease-in-out 3s fade-in both;
    -webkit-animation: 1s ease-in-out 3s fade-in both;
}
/* Gallerie */
#section-gallery {
    z-index: 52;
}
#section-gallery .centered-thin {
    position: relative;
    padding: 10em 0;
    z-index: 53;
}
#section-gallery .tiles-container {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 54;
}
#section-gallery .tiles-container .tiles .slick-list {
    opacity: 0;
}
#section-gallery .tiles-container .tiles {
    height: 100%;
    width: 100%;
}
#section-gallery .tiles-container .tiles-pagination,
#section-gallery .tiles-container .tiles .slick-arrow {
    position: absolute;
    opacity: 0;
    z-index: 55;
    top: 50%;
    left: 100%;
    margin-left: -1.875em;
    margin-top: -1.875em;
    height: 3.75em;
    width: 3.75em;
    background-color: white;
    background-size: auto 1.35em;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    overflow: hidden;
    color: transparent;
    user-select: none;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    outline: none;
    transition: background-color 0.25s;
    -webkit-transition: background-color 0.25s;
}
#section-gallery .tiles-container .tiles .slick-arrow:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 1.35em;
    background-position: center center;
    background-repeat: no-repeat;
    transition: filter 0.25s;
    -webkit-transition: filter 0.25s;
}
#section-gallery .tiles-container .tiles .slick-arrow.slick-prev {
    top: 50%;
    margin-top: 3.875em;
}
#section-gallery .tiles-container .tiles .slick-arrow.slick-next {
    bottom: 50%;
    top: auto;
    margin-bottom: 3.875em;
}
#section-gallery .tiles-container .tiles .slick-arrow:hover {
    background-color: #999999;
}
#section-gallery .tiles-container .tiles .slick-arrow:hover:after {
    filter: brightness(0) invert(1);
}
#section-gallery .tiles-container .tiles-pagination {
    cursor: initial;
    color: initial;
}
#section-gallery .tiles-container .tiles-pagination .in {
    display: block;
    line-height: 3.75em;
    text-align: center;
}
#section-gallery .tiles-container .tiles .tile {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#section-gallery .wave.wave-site-2 {
    height: 7.5em;
    right: -1em;
    bottom: 0;
}
/* Animation */
#section-gallery.seen .tiles-container .tiles .slick-list {
    opacity: 1;
    animation: 1s ease-in-out 0.75s window-fromright both;
    -webkit-animation: 1s ease-in-out 0.75s window-fromright both;
}
#section-gallery .tiles-container .tiles-pagination,
#section-gallery .tiles-container .tiles .slick-arrow {
    opacity: 1;
    animation: 0.5s ease-in-out 1.25s scale-in both;
    -webkit-animation: 0.5s ease-in-out 1.25s scale-in both;
}
/* Chiffres clés */
#section-keynumbers {
    padding: 10em 0;
    z-index: 51;
    background-color: #f5f9fb;
    opacity: 0;
}
#section-keynumbers .flexbox .flex {
    box-sizing: border-box;
    padding: 0 3em;
    text-align: center;
}
#section-keynumbers .flexbox .flex .inner {
    position: relative;
    display: inline-block;
    padding: 4em 3em 3em 3em;
    height: 100%;
    box-sizing: border-box;
    max-width: 25em;
}
#section-keynumbers .flexbox .flex .inner .back {
    position: absolute;
    z-index: 55;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#section-keynumbers .flexbox .flex .inner .back .shape {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-keynumbers .flexbox .flex .inner .front {
    position: relative;
    opacity: 0;
    z-index: 56;
    text-align: center;
}
#section-keynumbers .flexbox .flex .inner .number {
    position: absolute;
    opacity: 0;
    z-index: 57;
    width: 9em;
    height: 4em;
    line-height: 4em;
    top: 0;
    margin-top: -2em;
    left: 50%;
    margin-left: -4.5em;
    background-color: white;
    border: solid 2px #282c37;
    border-radius: 2em;
    text-align: center;
}
#section-keynumbers .flexbox .flex .inner .number .in {
    opacity: 0;
    /* font-family: "Mirador Book"; */
    font-size: 185%;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 0.045em;
}
/* Animation */
#section-keynumbers.seen {
    opacity: 1;
    animation: 1s ease-in-out 0s window-fromright both;
    -webkit-animation: 1s ease-in-out 0s window-fromright both;
}
#section-keynumbers.seen .flexbox .flex .inner .number {
    animation: 0.5s ease-out 1s number-large-scale-in both;
    -webkit-animation: 0.5s ease-out 1s number-large-scale-in both;
}
#section-keynumbers.seen .flexbox .flex .inner .number .in {
    animation: 1s ease-out 1.5s fade-in both;
    -webkit-animation: 1s ease-out 1.5s fade-in both;
}
#section-keynumbers.seen .flexbox .flex .inner .back .shape {
    animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
    -webkit-animation: 1.5s ease-in-out 1.25s panel-fromcenter both;
}
#section-keynumbers.seen .flexbox .flex .inner .front {
    animation: 1s ease-out 2.75s fade-in both;
    -webkit-animation: 1s ease-out 2.75s fade-in both;
}
#section-keynumbers.seen .flexbox .flex:nth-child(2) .inner .number {
    animation-delay: 1.15s;
    -webkit-animation-delay: 1.15s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(2) .inner .number .in {
    animation-delay: 1.65s;
    -webkit-animation-delay: 1.65s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(2) .inner .back .shape {
    animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(2) .inner .front {
    animation-delay: 2.9s;
    -webkit-animation-delay: 2.9s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(3) .inner .number {
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(3) .inner .number .in {
    animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(3) .inner .back .shape {
    animation-delay: 1.55s;
    -webkit-animation-delay: 1.55s;
}
#section-keynumbers.seen .flexbox .flex:nth-child(3) .inner .front {
    animation-delay: 3.05s;
    -webkit-animation-delay: 3.05s;
}
/* Produits */
#section-site-produits {
    background-color: #eaf3f7;
    overflow: hidden;
    opacity: 0;
}
#section-site-produits > .clear-after {
    opacity: 0;
}
#section-site-produits > .clear-after .third {
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0.1875em 0 1.25em rgba(2, 54, 70, 0.13);
}
#section-site-produits .tiles {
    height: 50em;
}
#section-site-produits .tiles .tile {
    text-align: center;
}
#section-site-produits .tiles .tile .inner {
    position: relative;
    max-width: 25em;
    height: 26em;
    margin: 0 auto;
}
#section-site-produits .tiles .tile .inner .back {
    position: absolute;
    z-index: 55;
}
#section-site-produits .tiles .tile .inner .back .shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 0.625em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-site-produits .tiles .tile .inner .front {
    position: relative;
    z-index: 56;
    padding: 8em 3em 2em 3em;
    box-sizing: border-box;
}
#section-site-produits .tiles .tile .inner .front h3 + .t-ssmall {
    margin-top: 0.5em;
    max-height: 8em;
}
#section-site-produits .tiles .tile .inner .center-holder {
    z-index: 57;
    position: absolute;
    top: 100%;
    margin-top: -1.65em;
    left: 0;
    width: 100%;
}
#section-site-produits .tiles .tile .inner .image {
    position: absolute;
    z-index: 58;
    height: 16em;
    width: 16em;
    left: 50%;
    margin-left: -8em;
    top: 0;
    margin-top: -8em;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-site-produits .tiles .tile .inner .image .scalable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-site-produits .tiles .tile:hover .inner .image .scalable {
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-site-produits .tiles .tile .inner .btn-outline {
    border-color: #999999;
}
#section-site-produits .tiles .tile .inner .btn-outline:hover:before {
    background-color: #999999;
}
#section-site-produits .tiles .tile .inner .btn-outline:hover .in {
    color: white;
}
#section-site-produits .ext-nav {
    position: relative;
    margin-top: 2em;
}
#section-site-produits .ext-nav #ext-dots {
    width: calc(100% - 4em);
    width: -webkit-calc(100% - 4em);
    margin-left: 2em;
    text-align: center;
}
#section-site-produits .ext-nav #ext-dots:after {
    content: "";
    display: block;
    clear: both;
}
#section-site-produits .ext-nav #ext-dots li {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 2em;
}
#section-site-produits .ext-nav #ext-dots li + li {
    margin-left: 1em;
}
#section-site-produits .ext-nav #ext-dots li button {
    float: left;
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    cursor: pointer;
}
#section-site-produits .ext-nav #ext-dots li:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 0.5em;
    margin-top: -0.25em;
    margin-left: -0.25em;
    background-color: #282c37;
    border-radius: 50%;
}
#section-site-produits .ext-nav #ext-dots li.slick-active:after {
    background-color: #999999;
}
#section-site-produits .ext-nav #ext-arrows {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
#section-site-produits .ext-nav #ext-arrows .slick-arrow {
    opacity: 1;
    position: absolute;
    z-index: 56;
    top: 0;
    display: block;
    height: 2em;
    width: 2em;
    overflow: hidden;
    border: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    background-size: auto 1.25em;
    background-position: center center;
    background-repeat: no-repeat;
    user-select: none;
}
#section-site-produits .ext-nav #ext-arrows .slick-arrow.slick-disabled {
    opacity: 0;
}
/* Animation */
#section-site-produits.seen {
    opacity: 1;
    animation: 1s ease-in-out 0s window-fromleft both;
    -webkit-animation: 1s ease-in-out 0s window-fromleft both;
}
#section-site-produits.seen > .clear-after {
    opacity: 1;
    animation: 1s ease-in-out 1s fade-in both;
    -webkit-animation: 1s ease-in-out 1s fade-in both;
}
/* News */
.single-site-de-production #section-news a.more {
    margin-top: -1.35em;
}
.single-site-de-production #section-news .layer.back .v-half.bottom {
    opacity: 0;
    background-color: #dfedf3;
}
/* Animation */
.single-site-de-production #section-news.seen .layer.back .v-half.bottom {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-frombot-over both;
    -webkit-animation: 1s ease-in-out 0s circle-frombot-over both;
}
/* MDPI */
@media screen and (max-width: 1100px) {
    /* Intro */
    #section-site-head .layer.fore .right-pad-18 {
        padding-right: 12em;
    }
    /* Produits */
    #section-site-produits .left-pad-10 {
        padding-left: 7.5em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        #section-site-head {
            height: auto;
        }
        /* Header clair */
        .single-site-de-production header {
            color: white;
        }
        .single-site-de-production header .logo img.image-dark {
            display: none;
        }
        .single-site-de-production header .logo img.image-light {
            display: block;
        }
        .single-site-de-production header .languages a + a:before {
            background-color: rgba(255, 255, 255, 0.1);
        }
        /* Intro */
        #section-site-head .layer.back {
            display: none;
        }
        #section-site-head .layer.mid {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding-top: 9em;
        }
        #section-site-head .layer.mid:before {
            position: absolute;
            z-index: 50;
            content: "";
            display: block;
            top: 0;
            left: 0;
            height: 75%;
            width: 100%;
            background-color: #282c37;
        }
        #section-site-head .layer.mid .centered-thin {
            z-index: 51;
        }
        #section-site-head .layer.mid .middle {
            display: block;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-site-head .layer.mid .circle {
            width: 100%;
        }
        #section-site-head .layer.mid .circle:after {
            margin-left: -2em;
            margin-top: -2em;
            width: 4em;
            height: 4em;
        }
        #section-site-head .layer.mid .half,
        #section-site-head .layer.fore .half {
            float: none;
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-site-head .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            padding: 4em 0 3em 0;
        }
        #section-site-head .layer.fore .v-half {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-site-head .layer.fore .v-half .stick-bottom {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-site-head .layer.fore .right-pad-18 {
            padding-right: 0;
        }
        #section-site-head .layer.fore .v-half.bottom {
            display: none;
        }
        #section-site-head .layer.fore .wave.wave-site-1 {
            top: 0;
            left: auto;
            right: 0;
            margin: 0;
            height: 4em;
        }
        /* Gallerie */
        #section-gallery .layer {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
        }
        #section-gallery .half {
            float: none;
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-gallery .layer .tiles-container {
            height: 22em;
        }
        #section-gallery .tiles-container .tiles .slick-arrow.slick-prev {
            top: 100%;
            left: 0;
            right: auto;
            bottom: auto;
            margin: -1.875em 0 0 3em;
        }
        #section-gallery .tiles-container .tiles .slick-arrow.slick-next {
            top: 100%;
            left: auto;
            right: 0;
            bottom: auto;
            margin: -1.875em 3em 0 0;
        }
        #section-gallery .tiles-container .tiles-pagination {
            top: 100%;
            left: 50%;
            bottom: auto;
            margin: -1.875em 0 0 -1.875em;
        }
        #section-gallery .left-pad-15 {
            padding-left: 0;
        }
        #section-gallery .centered-thin {
            padding: 5em 0;
        }
        /* Chiffres clés */
        #section-keynumbers {
            padding: 7em 0;
        }
        #section-keynumbers .centered-large {
            width: calc(100% - 10em);
            width: -webkit-calc(100% - 6em);
        }
        #section-keynumbers .flexbox .flex {
            flex: none;
            width: 100%;
            padding: 0;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-keynumbers .flexbox .flex + .flex {
            margin-top: 6em;
        }
        /* Produits */
        #section-site-produits .left-pad-10 {
            padding-left: 0;
        }
        #section-site-produits .right-pad-12 {
            padding-right: 0;
        }
        #section-site-produits > .clear-after {
            padding: 4em 5em;
        }
        #section-site-produits > .clear-after .third {
            position: relative;
            float: none;
            width: 100%;
            box-shadow: none;
        }
        #section-site-produits > .clear-after .two-third {
            position: relative;
            float: none;
            width: 100%;
        }
        /* Mobile */
        @media screen and (max-width: 600px) {
            /* Produits */
            #section-site-produits .tiles-container {
                margin: 2em -5em 0 -5em;
            }
            #section-site-produits .tiles {
                height: auto;
            }
            #section-site-produits .tiles .tile {
                padding: 0 1.5em 2em 1.5em;
            }
            #section-site-produits .tiles .tile .inner {
                height: 100%;
                max-width: initial;
            }
            #section-site-produits .tiles .tile .inner .front {
                display: none;
            }
            #section-site-produits .tiles .tile .inner .back .shape {
                border-radius: 50%;
            }
            #section-site-produits .tiles .tile .inner .image {
                z-index: 56;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                margin: 0;
                background-size: 65% auto;
            }
        }
    }
}

/* PAGE CONTACT */
.page-contact .handler-container {
    z-index: 50;
}
.page-contact .third .pad-container .circle {
    opacity: 0;
    z-index: 55;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 50%;
    background-color: #f5f9fb;
}
.page-contact .third .pad-container .middle-holder {
    opacity: 0;
    z-index: 56;
}
.page-contact .third .squared-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
/* Intro */
#section-contact-intro {
    z-index: 51;
}
#section-contact-intro .wave.wave-contact-1 {
    position: relative;
    height: 1.75em;
    margin-top: 1.5em;
}
#section-contact-intro .title + .t-regular {
    margin-top: 8em;
}
#section-contact-intro .third .stick-bottom {
    bottom: -4em;
}
#section-contact-intro .third .image {
    display: inline-block;
    width: 2.5em;
}
#section-contact-intro .third .image + .t-regular {
    margin-top: 1.5em;
}
#section-contact-intro #contact-phone {
    display: block;
    margin-top: 1.25em;
    color: #999999;
    text-decoration: underline;
}
/* Animation */
main #section-contact-intro.seen .title h1 {
    opacity: 1;
    animation: 1s ease-out 0.5s fade-fromright both;
    -webkit-animation: 1s ease-out 0.5s fade-fromright both;
}
main #section-contact-intro.seen .title + p.t-regular,
main #section-contact-intro.seen p.t-regular + p.t-regular {
    opacity: 1;
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
main #section-contact-intro.seen .wave.wave-contact-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 1.5s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.5s window-fromleft both;
}
main #section-contact-intro.seen .flex:nth-child(2) .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
main #section-contact-intro.seen .flex:nth-child(2) .middle-holder {
    opacity: 1;
    animation: 1s ease-in-out 1.5s fade-in both;
    -webkit-animation: 1s ease-in-out 1.5s fade-in both;
}
main #section-contact-intro.seen .flex:nth-child(3) .circle {
    opacity: 1;
    animation: 1s ease-in-out 1.25s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1.25s circle-fromcenter both;
}
main #section-contact-intro.seen .flex:nth-child(3) .middle-holder {
    opacity: 1;
    animation: 1s ease-in-out 1.75s fade-in both;
    -webkit-animation: 1s ease-in-out 1.75s fade-in both;
}
#section-contact-intro.seen .handler {
    opacity: 1;
    animation: 1s ease-out 3s translate-fromtop both;
    -webkit-animation: 1s ease-out 3s translate-fromtop both;
}
/* Lieux */
#section-contact-location {
    z-index: 49;
    padding: 10em 0;
}
#section-contact-location .wave.wave-contact-2 {
    position: relative;
    height: 1.75em;
    margin-top: 1.5em;
}
#section-contact-location .map {
    display: inline-block;
    width: 50%;
}
#section-contact-location * + .title {
    margin-top: 3em;
}
#section-contact-location ul li {
    padding-left: 1.5em;
}
#section-contact-location ul li + li {
    margin-top: 0.25em;
}
#section-contact-location ul li:before {
    content: "•";
    position: absolute;
    display: block;
    top: 0em;
    left: 0.5em;
    color: white;
}
/* Animation */
#section-contact-location.seen .title h2 {
    opacity: 1;
    animation: 1s ease-out 0.5s fade-fromright both;
    -webkit-animation: 1s ease-out 0.5s fade-fromright both;
}
#section-contact-location.seen .wave.wave-contact-2 {
    opacity: 1;
    animation: 1.25s ease-in-out 1.5s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1.5s window-fromleft both;
}
#section-contact-location.seen .flex:nth-child(2) .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-contact-location.seen .flex:nth-child(2) .middle-holder {
    opacity: 1;
    animation: 1s ease-in-out 1.5s fade-in both;
    -webkit-animation: 1s ease-in-out 1.5s fade-in both;
}
#section-contact-location.seen .title h3 {
    opacity: 1;
    animation: 1s ease-out 1.5s fade-fromright both;
    -webkit-animation: 1s ease-out 1.5s fade-fromright both;
}
#section-contact-location.seen + #section-contact-newsletter .handler {
    opacity: 1;
    animation: 1s ease-out 3s translate-frombot both;
    -webkit-animation: 1s ease-out 3s translate-frombot both;
}
/* Newsletter */
#section-contact-newsletter {
    z-index: 51;
    padding: 10em 0;
}
#section-contact-newsletter .third {
    margin: 0 auto;
}
#section-contact-newsletter .wpcf7-form,
#section-contact-newsletter .sib-form {
    margin-top: 3em;
    padding: 0 6em;
}
#section-contact-newsletter .picto {
    position: absolute;
    z-index: 55;
    pointer-events: none;
    opacity: 0;
}
#section-contact-newsletter .picto svg {
    width: 100%;
    outline: none;
}
#section-contact-newsletter .letter-1 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 6.5em;
    margin-top: -2em;
    margin-left: -3.25em;
    transform: rotate(-55deg);
}
#section-contact-newsletter .letter-2 {
    position: absolute;
    left: 100%;
    bottom: 65%;
    width: 5em;
}
#section-contact-newsletter .letter-3 {
    position: absolute;
    left: 100%;
    top: 70%;
    width: 3em;
    margin-left: -1.5em;
}
#section-contact-newsletter .star-1 {
    position: absolute;
    right: 100%;
    top: 75%;
    width: 2.5em;
    margin-right: 1.25em;
}
#section-contact-newsletter .star-2 {
    position: absolute;
    left: 0;
    bottom: 70%;
    width: 1.75em;
}
#section-contact-newsletter .star-3 {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4em;
    margin-top: -1em;
    margin-left: -2em;
}
#section-contact-newsletter .star-4 {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 1.75em;
    margin-left: -0.5em;
    margin-top: -1.5em;
}
#section-contact-newsletter .wave.wave-contact-3 {
    height: 8em;
    bottom: 100%;
    margin-bottom: -4em;
    left: 0;
}
/* Animation */
#section-contact-newsletter.seen .third .circle {
    opacity: 1;
    animation: 1s ease-in-out 1s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 1s circle-fromcenter both;
}
#section-contact-newsletter.seen .third .middle-holder {
    opacity: 1;
    animation: 1s ease-in-out 1.5s fade-in both;
    -webkit-animation: 1s ease-in-out 1.5s fade-in both;
}
#section-contact-newsletter.seen .picto {
    opacity: 1;
    animation: 1.5s ease-in-out 2.5s fade-in both;
    -webkit-animation: 1.5s ease-in-out 2.5s fade-in both;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    /* Intro */
    #section-contact-intro {
        height: auto;
        padding: 9em 0 4em 0;
    }
    #section-contact-intro .flexbox {
        display: block;
    }
    #section-contact-intro .flexbox:after {
        content: "";
        display: block;
        clear: both;
    }
    #section-contact-intro .third {
        flex: none;
        position: relative;
        float: left;
        width: 100%;
        margin: 0 auto;
    }
    #section-contact-intro .third .stick-bottom {
        position: relative;
        float: none;
        bottom: auto;
        left: auto;
        width: 100%;
    }
    #section-contact-intro .third:nth-child(2),
    #section-contact-intro .third:nth-child(3) {
        width: 50%;
        margin-top: 4em;
    }
    /* Lieux */
    #section-contact-location .flexbox {
        display: block;
    }
    #section-contact-location .flexbox:after {
        content: "";
        display: block;
        clear: both;
    }
    #section-contact-location .third {
        flex: none;
        position: relative;
        float: left;
        width: 100%;
        margin: 0 auto;
    }
    #section-contact-location .third .stick-bottom {
        position: relative;
        float: none;
        bottom: auto;
        left: auto;
        width: 100%;
    }
    #section-contact-location .third:nth-child(2),
    #section-contact-location .third:nth-child(3) {
        width: 50%;
        margin-top: 4em;
    }
    /* Newsletter */
    #section-contact-newsletter .third {
        width: 50%;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Intro */
        #section-contact-intro .handler-container {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-contact-intro .handler {
            height: auto;
            width: 100%;
            vertical-align: middle;
            margin-top: -1px;
        }
        #section-contact-intro .handler svg {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-contact-intro .third {
            float: none;
            width: 100%;
        }
        #section-contact-intro .third .stick-bottom {
            position: relative;
            float: none;
            bottom: auto;
            left: auto;
            width: 100%;
        }
        #section-contact-intro .third:nth-child(2),
        #section-contact-intro .third:nth-child(3) {
            width: 100%;
            max-width: 35em;
            margin: 0 auto;
            margin-top: 4em;
        }
        #section-contact-intro .right-pad-12,
        #section-contact-intro .third:nth-child(2) .right-pad-3 {
            padding-right: 0;
        }
        #section-contact-intro .third:nth-child(2) .left-pad-3,
        #section-contact-intro .left-pad-6 {
            padding-left: 0;
        }
        /* Lieux */
        #section-contact-location .third {
            float: none;
            width: 100%;
        }
        #section-contact-location .third:nth-child(2),
        #section-contact-location .third:nth-child(3) {
            width: 100%;
            max-width: 35em;
            margin: 0 auto;
            margin-top: 4em;
        }
        #section-contact-location .left-pad-12 {
            padding-left: 0;
        }
        #section-contact-location .right-pad-3 {
            padding-right: 0;
        }
        #section-contact-location .left-pad-3 {
            padding-left: 0;
        }
        /* Newsletter */
        #section-contact-newsletter .handler-container {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-contact-newsletter .handler {
            height: auto;
            width: 100%;
            vertical-align: middle;
            margin-bottom: -1px;
        }
        #section-contact-newsletter .handler svg {
            height: auto;
            width: 100%;
            vertical-align: middle;
        }
        #section-contact-newsletter .third {
            float: none;
            width: 100%;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-contact-newsletter .third .right-pad-3 {
            padding-right: 0;
        }
        #section-contact-newsletter .third .left-pad-3 {
            padding-left: 0;
        }
        #section-contact-newsletter .third .top-pad-7 {
            padding-top: 4em;
        }
        #section-contact-newsletter .wpcf7-form {
            margin-top: 2em;
            padding: 0 3em;
        }
    }
}

/* PARTAGE/RESEAUX SOCIAUX COMMUN */
.social-sharing a {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.social-sharing a + a {
    margin-left: 5.5em;
}

/* FILTRES/NAV COMMUN */
.section-nav {
    padding: 1.75em 0;
}
.section-nav .categories .cat,
.section-nav .tags .tag {
    display: inline-block;
    padding: 0 1em;
    background-color: white;
    border-radius: 1.125em;
    height: 2.25em;
    line-height: 2.25em;
    margin-right: 1em;
    box-shadow: 0 0 0.56em rgba(2, 54, 70, 0.1);
}
.section-nav .btn-blog {
    float: left;
    display: block;
    width: 2.25em;
    height: 2.25em;
    background-image: url("img/blog_picto_root.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.section-nav form {
    float: left;
    display: block;
    height: 2.25em;
    width: 16.25em;
    box-shadow: 0 0 0.56em rgba(2, 54, 70, 0.1);
    margin-left: 1.5em;
}
.section-nav form input {
    position: relative;
    display: block;
    width: 100%;
    height: 2.76em;
    line-height: 2.76em;
    border: none;
    background-color: white;
    outline: none;
    box-sizing: border-box;
    padding: 0 0.75em;
}
.section-nav select {
    float: left;
    position: relative;
    display: block;
    width: 16.25em;
    height: 2.76em;
    line-height: 2.76em;
    border: none;
    background-color: white;
    outline: none;
    box-sizing: border-box;
    padding: 0 0.75em;
    box-shadow: 0 0 0.56em rgba(2, 54, 70, 0.1);
}
.section-nav select + select {
    margin-left: 1.8462em;
}
.section-nav form:after {
    content: "";
    display: block;
    position: absolute;
    width: 1.125em;
    height: 1.125em;
    top: 50%;
    right: 0.65em;
    margin-top: -0.5625em;
    background-image: url("img/blog_picto_loupe.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
} /* Mobile */
/* MDPI */
@media screen and (max-width: 1100px) {
    .section-nav form {
        width: 13em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        .section-nav .centered-large {
            width: calc(100% - 7.5em);
            width: -webkit-calc(100% - 7.5em);
        }
        .section-nav .float form {
            float: none;
            width: 100%;
        }
        .section-nav .float .clear-900 + form {
            margin: 1em 0 0 0;
        }
        .section-nav .btn-blog {
            float: none;
            position: absolute;
            right: 100%;
            top: 0;
        }
        /* Mobile */
        @media screen and (max-width: 700px) {
            .section-nav .float {
                float: none;
                width: 100%;
            }
            .section-nav .float select {
                float: none;
                width: 100%;
                margin: 0;
            }
            .section-nav .float select + select {
                margin-top: 0.5em;
            }
            .section-nav .float form {
                margin-top: 0.5em;
            }
            .section-nav .categories .cat,
            .section-nav .tags .tag {
                margin-bottom: 1em;
            }
        }
    }
}

/* BLOG - RACINE */
/* Entete */
#section-blog-head {
    background-image: url("img/blog_head_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50em;
    text-align: center;
    z-index: 51;
}
#section-blog-head h2 {
    opacity: 0;
}
#section-blog-head .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -14em;
    margin-left: -14em;
    display: inline-block;
    width: 28em;
    height: 28em;
    background-image: url("img/blog_head_waves.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#section-blog-head .wave.wave-actus-1 {
    height: 5.625em;
    top: 50%;
    left: 50%;
    margin-top: -10em;
    margin-left: 8.5em;
}
/* Animation */
#section-blog-head.loaded .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-blog-head.loaded .wave.wave-actus-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 0.5s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 0.5s window-fromleft both;
}
#section-blog-head.loaded h2 {
    opacity: 1;
    animation: 1s ease-in-out 0.5s fade-in both;
    -webkit-animation: 1s ease-in-out 0.5s fade-in both;
}
/* Liste des actualités */
#section-blog-content .tiles-container {
    margin: 0 -0.75em 0 -0.75em;
}
#section-blog-content .tiles {
    padding: 2.5em 0 5em 0;
    height: auto;
}
#section-blog-content .tiles .tile {
    padding: 0.75em;
    box-sizing: border-box;
}
#section-blog-content .tiles .tile .inner {
    box-sizing: border-box;
    padding: 2em;
}
#section-blog-content .tiles .tile .inner .back {
    opacity: 1;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-blog-content .tiles .tile .inner .back .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: saturate(60%);
    -webkit-filter: saturate(60%);
    transition: transform 0.25s, filter 0.25s;
    -webkit-transition: transform 0.25s, -webkit-filter 0.25s;
}
#section-blog-content .tiles .tile .inner .back .incrustation {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    background-color: #1dcbea;
    mix-blend-mode: multiply;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
#section-blog-content .tiles .tile .inner .front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2em;
    box-sizing: border-box;
}
#section-blog-content .tiles .tile .inner .a-small {
    transition: color 0.25s;
    -webkit-transition: color 0.25s;
    margin-top: 1em;
}
#section-blog-content .tiles .tile .inner:hover .a-small {
    color: #999999;
}
#section-blog-content .tiles .tile .inner:hover .back .img {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-blog-content .tiles .tile .inner:hover .back .incrustation {
    opacity: 0;
}
#section-blog-content a.more {
    position: absolute;
    display: block;
    text-align: center;
    font-size: 200%;
    line-height: 3.5em;
    right: 0;
    margin-right: -1.5em;
    margin-top: -4em;
    top: 50%;
    width: 3.5em;
    height: 3.5em;
}
#section-blog-content a.more:before {
    content: "";
    position: absolute;
    z-index: 53;
    display: block;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 2px 1em rgba(2, 54, 70, 0.15);
    opacity: 0;
    transition: background-color 0.25s;
    -webkit-transition: background-color 0.25s;
}
#section-blog-content a.more .in {
    position: relative;
    z-index: 54;
    opacity: 0;
}
#section-blog-content a.more:hover:before {
    background-color: #999999;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    /* Liste des actualités */
    #section-blog-content .tiles .tile {
        height: 35em;
    }
    /* MDPI */
    @media screen and (max-width: 1050px) {
        /* Liste des actualités */
        #section-blog-content .tiles .tile {
            width: 50%;
        }
        /* Mobile */
        @media screen and (max-width: 900px) {
            #section-blog-head {
                height: 40em;
            }
            #section-blog-head h2 {
                margin-top: 2em;
            }
            #section-blog-head .circle {
                margin-top: -12em;
            }
            #section-blog-content .centered-large {
                width: calc(100% - 7.5em);
                width: -webkit-calc(100% - 7.5em);
            }
            /* Mobile */
            @media screen and (max-width: 700px) {
                /* Liste des actualités */
                #section-blog-content .tiles .tile {
                    width: 100%;
                }
            }
        }
    }
}

/* BLOG - ARTICLE */
/* Entete */
#section-article-head {
    background-image: url("img/article_head_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 55vh;
}
#section-article-head .wave.wave-article-1 {
    height: 17vh;
    top: 50%;
    right: 0;
    margin-top: -8.5vh;
}
/* Animation */
#section-article-head.loaded .wave.wave-article-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 0.5s window-fromright both;
    -webkit-animation: 1.25s ease-in-out 0.5s window-fromright both;
}
/* Contenu article */
#section-article-content {
    padding: 4em 0;
}
#section-article-content .layer.fore {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
}
#section-article-content .article-content {
    box-shadow: 0px 0px 3em rgba(2, 54, 70, 0.08);
}
#section-article-content .article-content .date + h1 {
    margin-top: 0.25em;
}
#section-article-content .article-content h1 + p {
    margin-top: 1em;
}
#section-article-content .article-content .excerpt {
    font-size: 112.5%;
}
#section-article-content .article-content .content {
    margin-top: 2em;
}
#section-article-content .article-content .content * + p {
    margin-top: 1.25em;
}
#section-article-content .article-content .content figure {
    width: 100%;
    margin: 0;
    height: auto;
}
#section-article-content .article-content .content figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section-article-content .article-content .content figure.aligncenter {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
#section-article-content .article-content .content .wp-block-image {
    margin: 2em auto 0 auto;
}
#section-article-content .article-content .content h2 {
    line-height: 1em;
}
#section-article-content .article-content .content * + h2 {
    margin-top: 2.5em;
}
#section-article-content .article-content .content h2 + * {
    margin-top: 2.5em;
}
#section-article-content .article-content .content strong {
    font-weight: 800;
}
#section-article-content .article-content .content em {
    font-style: italic;
}
#section-article-content .article-content .content * + ul {
    margin-top: 1.25em;
}
#section-article-content .article-content .content a {
    text-decoration: underline;
}
#section-article-content .article-content .content ul li {
    padding-left: 1.5em;
}
#section-article-content .article-content .content ul li + li {
    margin-top: 0.25em;
}
#section-article-content .article-content .content ul li:before {
    content: "•";
    position: absolute;
    display: block;
    top: 0em;
    left: 0.5em;
    color: inherit;
}
#section-article-content .article-content .content iframe {
    width: 100%;
    height: 35em;
    margin-top: 3em;
}
#section-article-content .social-sharing {
    margin-top: 5em;
}
#section-article-content .wave.wave-article-2 {
    height: 11em;
    top: 50%;
    left: 0;
    margin-top: -11em;
}
/* A lire également */
.single-post #section-news a.more {
    margin-top: -1.75em;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    #section-article-content .left-pad-15 {
        padding-left: 10em;
    }
    #section-article-content .right-pad-15 {
        padding-right: 10em;
    }
    #section-article-content .top-pad-7 {
        padding-top: 6em;
    }
    #section-article-content .bot-pad-7 {
        padding-bottom: 6em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Entete */
        #section-article-head {
            height: 30em;
        }
        /* Contenu article */
        #section-article-content .centered-large {
            width: calc(100% - 5em);
            width: -webkit-calc(100% - 5em);
        }
        #section-article-content .left-pad-15 {
            padding-left: 5em;
        }
        #section-article-content .right-pad-15 {
            padding-right: 5em;
        }
        #section-article-content .top-pad-7 {
            padding-top: 4em;
        }
        #section-article-content .bot-pad-7 {
            padding-bottom: 4em;
        }
        #section-article-content .article-content .content iframe {
            height: 25em;
        }
        /* Mobile */
        @media screen and (max-width: 600px) {
            #section-article-content .left-pad-15 {
                padding-left: 3em;
            }
            #section-article-content .right-pad-15 {
                padding-right: 3em;
            }
            #section-article-content .top-pad-7 {
                padding-top: 3em;
            }
            #section-article-content .bot-pad-7 {
                padding-bottom: 3em;
            }
        }
    }
}

/* RECRUTEMENT - COMMUN */
.job-properties {
    text-align: left;
}
.job-properties .property {
    position: relative;
    padding-left: 3em;
}
.job-properties .property + .property {
    margin-top: 2em;
}
.job-properties .property:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    height: 2em;
    width: 2em;
    margin-top: -1em;
    left: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* RECRUTEMENT - RACINE */
/* Entete */
#section-jobs-head {
    background-color: #282c37;
    height: 50em;
    z-index: 51;
}
#section-jobs-head .centered-wide {
    padding-top: 5em;
}
#section-jobs-head .circle {
    position: relative;
    cursor: pointer;
    background-image: url("img/jobs_head_circle_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0.01deg) translateZ(0) scale(1, 1);
    transform: rotate(0.01deg) translateZ(0);
}
#section-jobs-head .circle:after {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -3em;
    margin-top: -3em;
    display: inline-block;
    width: 6em;
    height: 6em;
    background-image: url("img/sites_picto_play.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-jobs-head .circle:hover:after {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
}
#section-jobs-head .wave.wave-jobs-1 {
    height: 8em;
    top: 50%;
    left: 100%;
    margin-top: -4em;
    margin-left: -3em;
}
/* Animation */
#section-jobs-head.loaded .title h1 {
    animation: 1s ease-out 0.5s fade-fromright both;
    -webkit-animation: 1s ease-out 0.5s fade-fromright both;
}
#section-jobs-head.loaded .title + p.t-regular,
#section-jobs-head.loaded p.t-regular + p.t-regular {
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-jobs-head.loaded .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-jobs-head.loaded .wave.wave-jobs-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 1s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1s window-fromleft both;
}
/* Filtres / Nav */
#section-jobs-nav {
    z-index: 52;
}
/* Contenu */
#section-jobs-content .layer.back {
    z-index: 50;
    background-color: white;
}
#section-jobs-content .layer.back .v-part {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 17em;
}
#section-jobs-content .layer.back .v-part.bottom {
    top: auto;
    bottom: 0;
    height: 28em;
}
#section-jobs-content.fancy-bg .layer.back {
    background-color: initial;
}
#section-jobs-content.fancy-bg .layer.back .v-part {
    display: block;
}
#section-jobs-content .layer.fore {
    position: relative;
    z-index: 51;
}
#section-jobs-content .tiles {
    padding-bottom: 10em;
    transform: translate(0, -6em);
    -webkit-transform: translate(0, -6em);
}
#section-jobs-content .tiles .tile {
    position: relative;
    margin-top: 10em;
    text-align: center;
    height: 35em;
}
#section-jobs-content .tiles .tile .inner {
    position: relative;
    max-width: calc(100% - 6em);
    max-width: -webkit-calc(100% - 6em);
    height: 100%;
    margin: 0 auto;
}
#section-jobs-content .tiles .tile .inner .back {
    position: absolute;
    z-index: 55;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 1.4375em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
}
#section-jobs-content .tiles .tile .inner .front {
    position: relative;
    z-index: 56;
    padding: 5em 4em;
    box-sizing: border-box;
}
#section-jobs-content .tiles .tile .inner .front .date {
    opacity: 0.5;
}
#section-jobs-content .tiles .tile .inner .front .date + h3 {
    margin-top: 0.5em;
}
#section-jobs-content .tiles .tile .inner .front h3 + p.t-ssmall {
    margin-top: 2.5em;
    overflow: hidden;
}
#section-jobs-content .tiles .tile .inner .front p.t-ssmall {
    max-height: 6em;
}
#section-jobs-content .tiles .tile .inner .center-holder {
    z-index: 57;
    position: absolute;
    top: 100%;
    margin-top: -1.6em;
    left: 0;
    width: 100%;
}
#section-jobs-content .tiles .tile .inner .job-properties {
    margin-top: 3.5em;
}
#section-jobs-content .tiles .tile .inner .job-properties .half + .half {
    text-align: right;
}
#section-jobs-content
    .tiles
    .tile
    .inner
    .job-properties
    .half
    + .half
    .property {
    text-align: right;
    padding-left: 0;
    padding-right: 3em;
}
#section-jobs-content
    .tiles
    .tile
    .inner
    .job-properties
    .half
    + .half
    .property:before {
    left: auto;
    right: 0;
}
/* Animation */
#section-jobs-content .seen .btn-outline.from-center:before {
    animation: 1s ease-in-out 0s cta-fromcenter-big both;
    -webkit-animation: 1s ease-in-out 0s cta-fromcenter-big both;
}
#section-jobs-content .seen .btn-outline.from-center .in {
    animation: 1s ease-in-out 1s fade-in both;
    -webkit-animation: 1s ease-in-out 1s fade-in both;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    /* Contenu */
    #section-jobs-content .tiles .tile {
        width: 50%;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Entete */
        #section-jobs-head {
            height: auto;
        }
        #section-jobs-head .centered-wide {
            padding: 0;
        }
        #section-jobs-head .layer.fore {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            height: auto;
            padding: 9em 0 4em 0;
        }
        #section-jobs-head .layer.fore .pad-container {
            max-width: 35em;
            margin: 0 auto;
        }
        #section-jobs-head .layer.fore .half {
            float: none;
            top: auto;
            left: auto;
            right: auto;
            height: auto;
            width: 100%;
        }
        #section-jobs-head .layer.fore .half + .half {
            margin-top: 3em;
        }
        #section-jobs-head .layer.fore .right-pad-8 {
            padding-right: 0;
        }
        #section-jobs-head .layer.fore .left-pad-8 {
            padding-left: 0;
        }
        /* Contenu */
        #section-jobs-content .centered-large {
            width: calc(100% - 7.5em);
            width: -webkit-calc(100% - 7.5em);
        }
        #section-jobs-content .tiles .tile .inner {
            max-width: calc(100% - 3em);
            max-width: -webkit-calc(100% - 3em);
        }
        /* Mobile */
        @media screen and (max-width: 700px) {
            /* Entete */
            #section-jobs-head .wave.wave-jobs-1 {
                height: 5em;
                margin-top: -2.5em;
                margin-left: -4em;
            }
            /* Contenu */
            #section-jobs-content .tiles .tile {
                width: 100%;
            }
            #section-jobs-content .tiles .tile .inner {
                max-width: 100%;
            }
        }
    }
}

/* RECRUTEMENT - OFFRE */
/* Offre */
#section-offre-emploi .layer.offer {
    position: relative;
    top: auto;
    left: auto;
    z-index: 51;
}
#section-offre-emploi .layer.offer .centered-large {
    padding-top: 9em;
    padding-bottom: 10em;
}
#section-offre-emploi .layer.offer .pad-container {
    border-radius: 2em;
    box-shadow: 0 0 1.5em rgba(2, 54, 70, 0.1);
    overflow: hidden;
}
#section-offre-emploi .layer.offer .date + h1 {
    margin-top: 0.25em;
}
#section-offre-emploi .layer.offer h1 + p {
    margin-top: 1em;
}
#section-offre-emploi .layer.offer .job-properties {
    margin-top: 2em;
    width: 35em;
    max-width: 100%;
}
#section-offre-emploi .layer.offer .picto {
    width: 2.5em;
}
#section-offre-emploi .layer.offer * + .panel-title {
    margin-top: 2.5em;
}
#section-offre-emploi .layer.offer .picto + .panel-title {
    margin-top: 1.5em;
}
#section-offre-emploi .layer.offer .panel-title + .t-regular,
#section-offre-emploi .layer.offer .panel-title + .t-ssmall {
    margin-top: 1.75em;
}
#section-offre-emploi .float.min-height {
    min-height: 100em;
    min-height: calc(100vh - 19em);
    min-height: -webkit-calc(100vh - 19em);
}
#section-offre-emploi .pad-container .width-40 {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
#section-offre-emploi .social-sharing {
    margin-top: 3em;
}
#section-offre-emploi .social-sharing a {
    width: 1.5em;
    height: 1.5em;
}
#section-offre-emploi .social-sharing a + a {
    margin-left: 4em;
}
#section-offre-emploi .layer.offer .center-holder {
    position: absolute;
    top: 100%;
    margin-top: -1.6em;
    left: 0;
    width: 100%;
}
#section-offre-emploi .layer.offer .wave.wave-job-1 {
    height: 3.5em;
    top: 50%;
    left: 60%;
    margin-top: -1.75em;
    margin-left: -3.5em;
}
/* Animation */
#section-offre-emploi.seen .layer.offer .wave.wave-job-1 {
    opacity: 1;
    animation: 1.25s ease-in-out 1s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1s window-fromleft both;
}
/* Candidature */
#section-offre-emploi .layer.apply h1 {
    animation: none;
    -webkit-animation: none;
}
#section-offre-emploi .layer.apply.active + .layer.offer {
    display: none;
}
#section-offre-emploi .layer.apply .third:nth-child(2) .pad-container .circle {
    opacity: 0;
    z-index: 55;
    position: absolute;
    top: -2em;
    left: -2em;
    right: -2em;
    bottom: -2em;
    border-radius: 50%;
    background-color: #f5f9fb;
}
#section-offre-emploi
    .layer.apply
    .third:nth-child(2)
    .pad-container
    .middle-holder {
    opacity: 0;
    z-index: 56;
}
#section-offre-emploi
    .layer.apply
    .third:nth-child(2)
    .pad-container
    .middle-holder
    .form-content {
    padding-top: 2em;
}
#section-offre-emploi .layer.apply .third:nth-child(2) .squared-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#section-offre-emploi
    .layer.apply
    .third:nth-child(3)
    .squared-container
    .circle {
    opacity: 0;
    width: 17.5em;
    background-image: url("img/job_circle_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}
#section-offre-emploi .layer.apply .wave.wave-job-2 {
    position: relative;
    height: 1.75em;
    margin-top: 1.5em;
}
#section-offre-emploi .layer.apply .wave.wave-job-3 {
    height: 2.875em;
    top: 50%;
    left: -3em;
    margin-top: -1.4375em;
}
/* Animation */
#section-offre-emploi .layer.apply {
    z-index: 50;
}
#section-offre-emploi .layer.apply.active {
    z-index: 53;
}
#section-offre-emploi .layer.apply.active h1 {
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-offre-emploi
    .layer.apply.active
    .third:nth-child(3)
    .squared-container
    .circle {
    opacity: 1;
    animation: 1s ease-in-out 0.25s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0.25s circle-fromcenter both;
}
#section-offre-emploi .layer.apply.active .wave.wave-job-3 {
    opacity: 1;
    animation: 1.25s ease-in-out 0.5s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 0.5s window-fromleft both;
}
#section-offre-emploi
    .layer.apply.active
    .third:nth-child(2)
    .pad-container
    .circle {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-offre-emploi
    .layer.apply.active
    .third:nth-child(2)
    .pad-container
    .middle-holder {
    opacity: 1;
    animation: 1s ease-in-out 0.5s fade-in both;
    -webkit-animation: 1s ease-in-out 0.5s fade-in both;
}
#section-offre-emploi .layer.apply.active .wave.wave-job-2 {
    opacity: 1;
    animation: 1.25s ease-in-out 1s window-fromleft both;
    -webkit-animation: 1.25s ease-in-out 1s window-fromleft both;
}
/* MDPI */
@media screen and (max-width: 1200px) {
    /* Offre */
    #section-offre-emploi .layer.offer .left-pad-8 {
        padding-left: 5em;
    }
    #section-offre-emploi .layer.offer .right-pad-8 {
        padding-right: 5em;
    }
    #section-offre-emploi .layer.offer .top-pad-6 {
        padding-top: 4em;
    }
    #section-offre-emploi .layer.offer .bot-pad-6 {
        padding-bottom: 4em;
    }
    /* Candidature */
    #section-offre-emploi .layer.apply .third:nth-child(3) {
        display: none;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        /* Offre */
        #section-offre-emploi .layer.offer .centered-large {
            height: auto;
            width: calc(100% - 5em);
            width: -webkit-calc(100% - 5em);
        }
        #section-offre-emploi .float.min-height {
            min-height: auto;
        }
        #section-offre-emploi .layer.offer .job-properties {
            width: 100%;
        }
        #section-offre-emploi .layer.offer .width-60,
        #section-offre-emploi .layer.offer .width-40 {
            float: none;
            position: relative;
            top: auto;
            right: auto;
            left: auto;
            width: 100%;
            height: auto;
        }
        #section-offre-emploi .layer.offer .left-pad-8 {
            padding-left: 4em;
        }
        #section-offre-emploi .layer.offer .right-pad-8 {
            padding-right: 4em;
        }
        #section-offre-emploi .layer.offer .v-half {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            height: auto;
            padding: 3em 0;
        }
        #section-offre-emploi .layer.offer .v-half + .v-half {
            padding-bottom: 5em;
        }
        #section-offre-emploi p.t-regular br {
            display: block;
        }
        /* Candidature */
        #section-offre-emploi .layer.apply .third {
            flex: none;
            width: 100%;
            max-width: 35em;
            margin: 0 auto;
        }
        #section-offre-emploi .layer.apply .third + .third {
            margin-top: 6em;
        }
        /* Mobile */
        @media screen and (max-width: 500px) {
            /* Candidature */
            #section-offre-emploi .layer.apply {
                display: none;
                position: relative;
                top: auto;
                left: auto;
                padding: 9em 0 5em;
                height: auto;
                min-height: 100vh;
            }
            #section-offre-emploi .layer.apply.active {
                display: block;
            }
            #section-offre-emploi .layer.apply .third .left-pad-4 {
                padding-left: 1.5em;
            }
            #section-offre-emploi .layer.apply .third .right-pad-4 {
                padding-right: 1.5em;
            }
            #section-offre-emploi
                .layer.apply
                .third:nth-child(2)
                .pad-container
                .circle {
                top: -4em;
                left: -4em;
                right: -4em;
                bottom: -4em;
            }
            #section-offre-emploi
                .layer.apply
                .third:nth-child(2)
                .pad-container
                .middle-holder
                .form-content {
                padding-top: 1em;
            }
            /* Mobile */
            @media screen and (max-width: 400px) {
                /* Candidature */
                #section-offre-emploi .layer.apply .third .left-pad-4 {
                    padding-left: 0.5em;
                }
                #section-offre-emploi .layer.apply .third .right-pad-4 {
                    padding-right: 0.5em;
                }
            }
        }
    }
}

/* PAGE HISTOIRE */
.page-notre-histoire footer {
    position: fixed;
    z-index: 90;
    bottom: 0;
    left: 0;
}
#section-histoire .slices {
    height: 100%;
}
#section-histoire .slices .slice {
    width: 100vw;
    height: 100%;
}
#section-histoire .slices .slice.odd .layer.fore .half {
    float: right;
}
#section-histoire .slices .slice.odd .layer.fore .circle.in {
    margin-top: -27.5vh;
}
#section-histoire .slices .slice.odd .layer.fore .circle.year {
    margin-top: 10vh;
}
#section-histoire .slices .slice.odd .layer.fore .half.right {
    float: left;
}
#section-histoire .slices .slice:nth-child(1) .layer.fore .circle.in {
    margin-top: -27.5vh;
}
#section-histoire .slices .slice:nth-child(2) .layer.fore .circle.year {
    margin-top: 10vh;
}
#section-histoire .slices .slice.odd .layer.fore .circle.year {
    margin-top: 10vh;
}
#section-histoire .slices .slice .rope {
    top: 50%;
    margin-top: -32vh;
    left: 50%;
    width: 100vw;
    height: 64vh;
}
#section-histoire .slices .slice .rope svg {
    width: 100%;
    height: 100%;
}
#section-histoire .slices .slice .circle {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) rotate(0.01deg);
}
#section-histoire .slices .slice .circle.contour {
    width: 64vh;
    height: 64vh;
    margin-top: -32vh;
    margin-left: -32vh;
}
#section-histoire .slices .slice .circle.in {
    width: 55vh;
    height: 55vh;
    margin-top: -20vh;
    margin-left: -27.5vh;
    border-radius: 50%;
    background-image: url("img/histoire_intro_waves.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
#section-histoire .slices .slice .circle.in .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-histoire .slices .slice .circle.in:hover .image {
    transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}
#section-histoire .slices .slice .circle.year {
    width: 20vh;
    height: 20vh;
    margin-top: -20vh;
    margin-left: -35vh;
    border-radius: 50%;
}
#section-histoire .slices .slice .circle.year .in {
    display: block;
    line-height: 20vh;
    text-align: center;
    width: 100%;
    font-size: 237.5%;
    color: inherit;
    /* font-family: "Mirador"; */
    font-weight: bold;
    letter-spacing: 0.025em;
}
#section-histoire .slices .slice .circle svg {
    width: 100%;
    height: 100%;
}
#section-histoire .slices .slice .stick-bottom {
    padding-bottom: 1.5em;
}
#section-histoire .slices .slice .v-half.bottom {
    padding-top: 1.5em;
}
#section-histoire .slices .slice .regular-content {
    opacity: 0;
    background-color: white;
    background-color: white;
    box-shadow: 0 0 1.4375em rgba(2, 54, 70, 0.11);
    border-radius: 1.625em;
    padding: 2.5em 3em;
}
#section-histoire .slices .slice .regular-content .subcontent + .subcontent {
    margin-top: 1.5em;
}
#section-histoire .slices .slice p img {
    max-width: 50%;
    width: 12em;
    height: auto;
}
#section-histoire .slices .slice .next-screen {
    bottom: 50%;
    left: auto;
    right: 2.5em;
    animation: none;
    -webkit-animation: none;
    opacity: 1;
    text-align: right;
    margin-bottom: -1.15em;
}
#section-histoire .slices .slice .next-screen .arrow {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    width: 2.75em;
    height: 1em;
}
#section-histoire .slices .slice .next-screen .arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
#section-histoire .slices .slice .next-screen:hover {
    color: #999999;
}
#section-histoire .slices .slice .next-screen:hover .arrow svg path {
    fill: #999999;
}
#section-histoire .ariane {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.375em;
}
#section-histoire .ariane .centered-wide {
    height: auto;
}
#section-histoire .ariane .slice {
    float: left;
    height: 2em;
}
#section-histoire .ariane .slice .dot {
    position: absolute;
    height: 100%;
    width: 2em;
    right: 0;
    top: 0;
    cursor: pointer;
}
#section-histoire .ariane .slice .dot:after {
    content: "";
    display: block;
    position: absolute;
    height: 0.4em;
    width: 0.4em;
    left: 50%;
    top: 50%;
    margin-top: -0.2em;
    margin-left: -0.2em;
    border-radius: 50%;
    background-color: #282c37;
    opacity: 0.3;
    transition: transform 0.25s, -webkit-transform 0.25s;
    -webkit-transition: transform 0.25s, -webkit-transform 0.25s;
}
#section-histoire .ariane .slice .dot:hover:after {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
#section-histoire .ariane .slice.passed .dot:after {
    opacity: 1;
}
#section-histoire .ariane .slice.current .dot:after {
    opacity: 1;
    background-color: #999999;
}
#section-histoire .ariane .slice .line {
    position: absolute;
    left: -0.5em;
    top: 50%;
    margin-top: -1px;
    right: 1.5em;
    height: 2px;
    background-color: white;
}
#section-histoire .ariane .slice:nth-child(1) .line {
    display: none;
}
#section-histoire .ariane .slice .dot .label {
    opacity: 0;
    position: absolute;
    left: 100%;
    bottom: 100%;
    margin-left: -3em;
    margin-bottom: -0.35em;
    text-align: center;
    width: 4em;
    pointer-events: none;
    transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
#section-histoire .ariane .slice .dot:hover .label {
    opacity: 1;
}
/* Animations */
#section-histoire .slices .slice.seen .regular-content {
    opacity: 1;
    animation: 1s ease-in-out 00.5s fade-in both;
    -webkit-animation: 1s ease-in-out 0.5s fade-in both;
}
#section-histoire .slices .slice.seen .circle.in {
    opacity: 1;
    animation: 1s ease-in-out 0.5s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0.5s circle-fromcenter both;
}
#section-histoire .slices .slice.seen .circle.open-popup:after {
    position: absolute;
    cursor: pointer;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -3em;
    margin-top: -3em;
    display: inline-block;
    width: 6em;
    height: 6em;
    background-image: url("img/sites_picto_play.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.25s;
    -webkit-transition: -webkit-transform 0.25s;
}
#section-histoire .slices .slice.seen .circle.open-popup:hover:after {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
}
#section-histoire .slices .slice.seen .circle.year {
    opacity: 1;
    animation: 1s ease-in-out 0s circle-fromcenter both;
    -webkit-animation: 1s ease-in-out 0s circle-fromcenter both;
}
#section-histoire .slices .slice .circle.contour path.triggered {
    transition: stroke-dashoffset 1s ease-in-out 0.5s;
    -webkit-transition: stroke-dashoffset 1s ease-in-out 0.5s;
    stroke-dashoffset: 0 !important;
}
#section-histoire .slices .slice h4,
#section-histoire .slices .slice h3,
#section-histoire .slices .slice h2,
#section-histoire .slices .slice h1,
#section-histoire .slices .slice p {
    opacity: 0;
    animation: none;
    -webkit-animation: none;
}
#section-histoire .slices .slice.seen h4 {
    animation: 1s ease-out 0.5s fade-fromright both;
    -webkit-animation: 1s ease-out 0.5s fade-fromright both;
}
#section-histoire .slices .slice.seen h3,
#section-histoire .slices .slice.seen h2,
#section-histoire .slices .slice.seen h1 {
    animation: 1s ease-out 1s fade-fromright both;
    -webkit-animation: 1s ease-out 1s fade-fromright both;
}
#section-histoire .slices .slice.seen p {
    animation: 1s ease-out 1.5s fade-fromright both;
    -webkit-animation: 1s ease-out 1.5s fade-fromright both;
}
/* MBP */
@media screen and (max-height: 850px) and (min-width: 900px) {
    #section-histoire .slices .slice .regular-content .subcontent h2 {
        font-size: 200%;
    }
    #section-histoire .slices .slice .regular-content .subcontent h3 {
        font-size: 175%;
    }
}
/* MDPI */
@media screen and (max-width: 1200px) {
    #section-histoire .slices .slice .layer.fore .half .regular-content {
        padding-right: 2em;
        padding-left: 0;
    }
    #section-histoire .slices .slice .layer.fore .half.right .regular-content {
        padding-right: 0;
        padding-left: 2em;
    }
    #section-histoire .slices .slice.odd .layer.fore .half .regular-content {
        padding-right: 0;
        padding-left: 2em;
    }
    #section-histoire
        .slices
        .slice.odd
        .layer.fore
        .half.right
        .regular-content {
        padding-right: 2em;
        padding-left: 0;
    }
    #section-histoire .slices .slice + .slice .circle.in {
        width: 45vh;
        height: 45vh;
        margin-top: -10vh;
        margin-left: -22.5vh;
    }
    #section-histoire .slices .slice + .slice .circle.year {
        width: 15vh;
        height: 15vh;
        margin-top: -10vh;
        margin-left: -25vh;
    }
    #section-histoire .slices .slice + .slice .circle.year .in {
        line-height: 15vh;
    }
    #section-histoire .slices .slice + .slice.odd .layer.fore .circle.year {
        margin-top: 7.5vh;
    }
    #section-histoire .slices .slice .right-pad-12 {
        padding-right: 6em;
    }
    /* Mobile */
    @media screen and (max-width: 900px) {
        .page-histoire footer {
            position: relative;
            z-index: initial;
            bottom: auto;
            left: auto;
            transform: none;
            -webkit-transform: none;
        }
        #section-histoire {
            height: auto;
            padding: 8em 0 0 0;
        }
        #section-histoire > .layer.back .v-half {
            bottom: auto;
            top: 0;
            height: 30em;
        }
        #section-histoire .pagination {
            display: none;
        }
        #section-histoire .slices {
            height: auto;
            min-height: 100vh;
            width: 100% !important;
            transform: none !important;
            -webkit-transform: none !important;
        }
        #section-histoire .slices .slice {
            width: 100%;
            height: auto;
            padding: 4em 0;
        }
        #section-histoire .slices .slice.filled-odd {
            background-color: #dfedf3;
        }
        #section-histoire .slices .slice + .slice {
            padding: 7em 0 4em 0;
        }
        #section-histoire .slices .slice:not(.filled) {
            display: none;
        }
        #section-histoire .slices .slice .layer {
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            height: auto;
        }
        #section-histoire .slices .slice .centered-wide {
            height: auto;
        }
        #section-histoire .slices .slice .half {
            float: none;
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-histoire .slices .slice .half.right {
            max-width: 35em;
            margin: 0 auto;
        }
        #section-histoire .slices .slice .half:nth-child(2) {
            padding-top: 3em;
        }
        #section-histoire .slices .slice .v-half {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-histoire .slices .slice .stick-bottom {
            position: relative;
            top: auto;
            left: auto;
            height: auto;
            width: 100%;
        }
        #section-histoire .slices .slice .right-pad-12 {
            padding-right: 0;
        }
        #section-histoire .slices .slice .half .rope,
        #section-histoire .slices .slice .half .circle.contour {
            display: none;
        }
        #section-histoire .slices .slice .half .circle.in {
            position: relative;
            top: auto;
            left: auto;
            margin: 0 !important;
            height: auto;
            width: 100%;
        }
        #section-histoire .slices .slice .circle.year {
            width: 7.5em;
            height: 7.5em;
            margin: 0 !important;
            right: 0;
            top: 0;
            left: auto;
            bottom: auto;
        }
        #section-histoire .slices .slice .circle.year .in {
            line-height: 3.75em;
            font-size: 200%;
            height: 100%;
        }
        #section-histoire .ariane {
            position: fixed;
            height: 5em;
            top: 0;
            bottom: auto;
            left: 0;
            transform-origin: 0 100%;
            -webkit-transform-origin: 0 100%;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
        #section-histoire .ariane .slice .line {
            background-color: #eaf3f7;
        }
        #section-histoire .slices .slice .layer.fore .regular-content {
            background-color: rgba(0, 0, 0, 0);
            box-shadow: none;
        }
        #section-histoire .slices .slice .layer.fore .left-pad-6 {
            padding-left: 0;
        }
        #section-histoire .slices .slice .layer.fore .right-pad-6 {
            padding-right: 0;
        }
        #section-histoire .slices .slice .layer.fore .half .regular-content {
            padding-right: 0;
            padding-left: 0;
        }
        #section-histoire
            .slices
            .slice
            .layer.fore
            .half.right
            .regular-content {
            padding-right: 0;
            padding-left: 0;
        }
        #section-histoire
            .slices
            .slice.odd
            .layer.fore
            .half
            .regular-content {
            padding-right: 0;
            padding-left: 0;
        }
        #section-histoire
            .slices
            .slice.odd
            .layer.fore
            .half.right
            .regular-content {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

/* PLAN DU SITE */
.page-plan-du-site .menu-item + .menu-item {
    margin-top: 1em;
}
.page-plan-du-site .menu-item .menu-head {
    font-weight: bold;
}
.page-plan-du-site .main-menu + .menu-item {
    margin-top: 1em;
}
.page-plan-du-site .wave-page-1 {
    display: none;
}

/* ANIMATIONS */
/* Apparition en fondu depuis un côté */
@keyframes fade-fromleft {
    0% {
        opacity: 0;
        -webkit-transform: translate(-5em);
        -moz-transform: translate(-5em);
        -ms-transform: translate(-5em);
        -o-transform: translate(-5em);
        transform: translate(-5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
@-webkit-keyframes fade-fromleft {
    0% {
        opacity: 0;
        -webkit-transform: translate(-5em);
        -moz-transform: translate(-5em);
        -ms-transform: translate(-5em);
        -o-transform: translate(-5em);
        transform: translate(-5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
@keyframes fade-fromright {
    0% {
        opacity: 0;
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
@-webkit-keyframes fade-fromright {
    0% {
        opacity: 0;
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
@keyframes fade-fromtop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-5em);
        -moz-transform: translateY(-5em);
        -ms-transform: translateY(-5em);
        -o-transform: translateY(-5em);
        transform: translateY(-5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes fade-fromtop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-5em);
        -moz-transform: translateY(-5em);
        -ms-transform: translateY(-5em);
        -o-transform: translateY(-5em);
        transform: translateY(-5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade-frombot {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5em);
        -moz-transform: translateY(5em);
        -ms-transform: translateY(5em);
        -o-transform: translateY(5em);
        transform: translateY(5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes fade-frombot {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5em);
        -moz-transform: translateY(5em);
        -ms-transform: translateY(5em);
        -o-transform: translateY(5em);
        transform: translateY(5em);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes translate-fromtop {
    0% {
        -webkit-transform: translateY(-5em);
        -moz-transform: translateY(-5em);
        -ms-transform: translateY(-5em);
        -o-transform: translateY(-5em);
        transform: translateY(-5em);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes translate-fromtop {
    0% {
        -webkit-transform: translateY(-5em);
        -moz-transform: translateY(-5em);
        -ms-transform: translateY(-5em);
        -o-transform: translateY(-5em);
        transform: translateY(-5em);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes translate-frombot {
    0% {
        -webkit-transform: translateY(5em);
        -moz-transform: translateY(5em);
        -ms-transform: translateY(5em);
        -o-transform: translateY(5em);
        transform: translateY(5em);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes translate-frombot {
    0% {
        -webkit-transform: translateY(5em);
        -moz-transform: translateY(5em);
        -ms-transform: translateY(5em);
        -o-transform: translateY(5em);
        transform: translateY(5em);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes translate-fromright {
    0% {
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
@-webkit-keyframes translate-fromright {
    0% {
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
    100% {
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
/* Menu mobile */
@keyframes translate-menu {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
    100% {
        transform: translate(calc(-100vw + 6em));
        -webkit-transform: translate(-webkit-calc(-100vw + 6em));
    }
}
@keyframes translate-menu-reverse {
    0% {
        transform: translate(calc(-100vw + 6em));
        -webkit-transform: translate(-webkit-calc(-100vw + 6em));
    }
    100% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
}
@-webkit-keyframes translate-menu {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
    100% {
        transform: translate(calc(-100vw + 6em));
        -webkit-transform: translate(-webkit-calc(-100vw + 6em));
    }
}
@-webkit-keyframes translate-menu-reverse {
    0% {
        transform: translate(calc(-100vw + 6em));
        -webkit-transform: translate(-webkit-calc(-100vw + 6em));
    }
    100% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
}
/* Apparition lettre intro (pseudo cercle sens horaire) */
@keyframes letter-clock {
    0% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%
        );
    }
    37.5% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            50% -25%,
            50% -25%
        );
    }
    87.5% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            100% 0%,
            100% 0%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            100% 0%,
            125% 50%
        );
    }
}
@-webkit-keyframes letter-clock {
    0% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%
        );
    }
    12.5% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    25% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%
        );
    }
    37.5% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%
        );
    }
    50% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%
        );
    }
    62.5% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%
        );
    }
    75% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            50% -25%,
            50% -25%
        );
    }
    87.5% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            100% 0%,
            100% 0%
        );
    }
    100% {
        -webkit-clip-path: polygon(
            50% 50%,
            125% 50%,
            100% 100%,
            50% 125%,
            0% 100%,
            -25% 50%,
            0% 0%,
            50% -25%,
            100% 0%,
            125% 50%
        );
    }
}
@keyframes letter-clock-invert {
    0% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%
        );
    }
    37.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            50% -25%,
            50% -25%
        );
    }
    87.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            0% 0%,
            0% 0%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            0% 0%,
            -25% 50%
        );
    }
}
@-webkit-keyframes letter-clock-invert {
    0% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%,
            -25% 50%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%,
            0% 100%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%,
            50% 125%
        );
    }
    37.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%,
            125% 50%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            50% -25%,
            50% -25%
        );
    }
    87.5% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            0% 0%,
            0% 0%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            -25% 50%,
            0% 100%,
            50% 125%,
            100% 100%,
            125% 50%,
            100% 0%,
            50% -25%,
            0% 0%,
            -25% 50%
        );
    }
}
/* Apparition par mise à l'échelle */
@keyframes scalefocus {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes scalefocus {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-in {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes scale-in {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
/* Apparition fenetre */
@keyframes window-fromleft {
    0% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
}
@-webkit-keyframes window-fromleft {
    0% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
}
@keyframes window-fromright {
    0% {
        clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
    }
    100% {
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
}
@-webkit-keyframes window-fromright {
    0% {
        clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
    }
    100% {
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
}
@keyframes window-frombot {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    }
}
@-webkit-keyframes window-frombot {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    }
}
@keyframes window-fromtop {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
@-webkit-keyframes window-fromtop {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
/* Apparition fenetre pur label gamme */
@keyframes label-window-fromleft {
    0% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        color: rgba(255, 255, 255, 0);
    }
    50% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        color: rgba(255, 255, 255, 0);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        color: rgba(255, 255, 255, 1);
    }
}
@-webkit-keyframes label-window-fromleft {
    0% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        color: rgba(255, 255, 255, 0);
    }
    50% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        color: rgba(255, 255, 255, 0);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        color: rgba(255, 255, 255, 1);
    }
}
/* Apparition en cercle */
@keyframes circle-fromcenter {
    0% {
        clip-path: circle(0%);
        -webkit-clip-path: circle(0%);
    }
    100% {
        clip-path: circle(50%);
        -webkit-clip-path: circle(50%);
    }
}
@-webkit-keyframes circle-fromcenter {
    0% {
        clip-path: circle(0%);
        -webkit-clip-path: circle(0%);
    }
    100% {
        clip-path: circle(50%);
        -webkit-clip-path: circle(50%);
    }
}
@keyframes circle-fromcenter-over {
    0% {
        clip-path: circle(0%);
        -webkit-clip-path: circle(0%);
    }
    100% {
        clip-path: circle(115%);
        -webkit-clip-path: circle(115%);
    }
}
@-webkit-keyframes circle-fromcenter-over {
    0% {
        clip-path: circle(0%);
        -webkit-clip-path: circle(0%);
    }
    100% {
        clip-path: circle(115%);
        -webkit-clip-path: circle(115%);
    }
}
@keyframes circle-frombot-over {
    0% {
        clip-path: circle(0% at 50% 100%);
        -webkit-clip-path: circle(0% at 50% 100%);
    }
    100% {
        clip-path: circle(115% at 50% 100%);
        -webkit-clip-path: circle(115% at 50% 100%);
    }
}
@-webkit-keyframes circle-frombot-over {
    0% {
        clip-path: circle(0% at 50% 100%);
        -webkit-clip-path: circle(0% at 50% 100%);
    }
    100% {
        clip-path: circle(115% at 50% 100%);
        -webkit-clip-path: circle(115% at 50% 100%);
    }
}
/* Fade */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* Blur */
@keyframes blur {
    0% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
    100% {
        filter: blur(10px);
        -webkit-filter: blur(10px);
    }
}
@-webkit-keyframes blur {
    0% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
    100% {
        filter: blur(10px);
        -webkit-filter: blur(10px);
    }
}
@keyframes blur-out {
    0% {
        filter: blur(10px);
        -webkit-filter: blur(10px);
    }
    100% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
}
@-webkit-keyframes blur-out {
    0% {
        filter: blur(10px);
        -webkit-filter: blur(10px);
    }
    100% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
}
/* Cercles menu principal */
@keyframes menu-circle-big {
    0% {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 200vh;
        height: 200vh;
        margin-left: -100vh;
        margin-top: -100vh;
        opacity: 0;
    }
}
@-webkit-keyframes menu-circle-big {
    0% {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 200vh;
        height: 200vh;
        margin-left: -100vh;
        margin-top: -100vh;
        opacity: 0;
    }
}
@keyframes menu-circle-small {
    0% {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 5em;
        height: 5em;
        margin-left: -2.5em;
        margin-top: -2.5em;
        opacity: 1;
    }
}
@-webkit-keyframes menu-circle-small {
    0% {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 5em;
        height: 5em;
        margin-left: -2.5em;
        margin-top: -2.5em;
        opacity: 1;
    }
}
/* Boutons CTA (deux tailles) */
@keyframes cta-fromleft {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 2.75em;
        margin-top: -1.375em;
        margin-left: -1.375em;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.375em;
        margin-left: -1.375em;
    }
}
@-webkit-keyframes cta-fromleft {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 2.75em;
        margin-top: -1.375em;
        margin-left: -1.375em;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.375em;
        margin-left: -1.375em;
    }
}
@keyframes cta-fromcenter {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
        left: 50%;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 2.75em;
        margin-top: -1.375em;
        margin-left: -1.375em;
        left: 50%;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.375em;
        margin-left: -1.375em;
        left: 1.375em;
    }
}
@-webkit-keyframes cta-fromcenter {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
        left: 50%;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 2.75em;
        margin-top: -1.375em;
        margin-left: -1.375em;
        left: 50%;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.375em;
        margin-left: -1.375em;
        left: 1.375em;
    }
}
@keyframes cta-fromleft-big {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 3.375em;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
    }
}
@-webkit-keyframes cta-fromleft-big {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 3.375em;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
    }
}
@keyframes cta-fromcenter-big {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
        left: 50%;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 3.375em;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
        left: 50%;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
        left: 1.6875em;
    }
}
@-webkit-keyframes cta-fromcenter-big {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 0;
        margin-left: 0;
        left: 50%;
    }
    25% {
        opacity: 1;
    }
    50% {
        height: 100%;
        width: 3.375em;
        margin-top: -1 6875em;
        margin-left: -1 6875em;
        left: 50%;
    }
    100% {
        height: 100%;
        opacity: 1;
        width: 100%;
        margin-top: -1.6875em;
        margin-left: -1.6875em;
        left: 1.6875em;
    }
}
/* Panneaux */
@keyframes panel-fromcenter {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 1.375em;
        margin-left: 0;
        left: 50%;
    }
    33% {
        height: 2.75em;
        opacity: 1;
        width: 2.75em;
        margin-top: 0;
        margin-left: -1.375em;
        left: 50%;
    }
    66% {
        height: 2.75em;
        width: 100%;
        margin-left: -1.375em;
        left: 1.375em;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}
@-webkit-keyframes panel-fromcenter {
    0% {
        height: 0%;
        opacity: 0;
        width: 0;
        margin-top: 1.375em;
        margin-left: 0;
        left: 50%;
    }
    33% {
        height: 2.75em;
        opacity: 1;
        width: 2.75em;
        margin-top: 0;
        margin-left: -1.375em;
        left: 50%;
    }
    66% {
        height: 2.75em;
        width: 100%;
        margin-left: -1.375em;
        left: 1.375em;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}
/* Bulle chiffre */
@keyframes number-scale-in {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        width: 3.5em;
        height: 3.5em;
        margin-top: -1.75em;
        margin-left: -1.75em;
    }
}
@-webkit-keyframes number-scale-in {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        width: 3.5em;
        height: 3.5em;
        margin-top: -1.75em;
        margin-left: -1.75em;
    }
}
/* Grosse bulle chiffrée */
@keyframes number-large-scale-in {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        width: 4em;
        height: 4em;
        margin-top: -2em;
        margin-left: -2em;
    }
    100% {
        opacity: 1;
        width: 9em;
        height: 4em;
        margin-top: -2em;
        margin-left: -4.5em;
    }
}
@-webkit-keyframes number-large-scale-in {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
        margin-top: 0;
        margin-left: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        width: 4em;
        height: 4em;
        margin-top: -2em;
        margin-left: -2em;
    }
    100% {
        opacity: 1;
        width: 9em;
        height: 4em;
        margin-top: -2em;
        margin-left: -4.5em;
    }
}
/* Flottement doux */
@keyframes smooth-float {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    50% {
        transform: translateY(1em);
        -webkit-transform: translateY(1em);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}
@-webkit-keyframes smooth-float {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    50% {
        transform: translateY(1em);
        -webkit-transform: translateY(1em);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}


#section-intro .letter .letter-mid .video video {
    padding: 12px;
}