/* Reset */

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
    margin: 0;
}

/*
3. Allow percentage-based heights in the application
*/
html,
body {
    height: 100%;
}

/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    display: block;
    font: inherit;
}

/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*
9. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable='true']) {
    -webkit-user-drag: element;
}

/* ToDo rename les class .grid en .col- */
/* Variables */
:root {
    --clr-bkg: #eee9e5;
    --clr-primary: #7ccdf5;
    /*--clr-primary-hover: #FFD750;*/
    /*--clr-primary-disabled: #0D3D4B;*/
    --clr-secondary: #4163bb;
    /*--clr-secondary-hover: #04252F;*/
    --clr-tertiary: #09174a;
    /*--clr-tertiary-hover: none;*/
    /*--clr-error: #E44539;*/
    --clr-txt-primary: #18272c;
    --clr-txt-secondary: #04184d;
    /*--clr-txt-tertiary: #6B8A8F;*/
    /*--clr-txt-disabled:#7DB7CA;*/
    --clr-quaternary: #f45f59;
    --clr-border: #d3c2b5;
    --clr-border-intro: #888888;
    --clr-border-focus: #fff;
    --clr-border-error: #e44539;
    --clr-white: #fff;
    --clr-dark: #000;
    --font-title: 8rem;
    --font-subtitle: 1.7rem;
    --font-size: 1.5rem;
    --font-lh: 1.5em;
    --grid-col-width: 100px;
    --grid-gutter: 10px;
    --grid-col-number: 12;
    --spacer: 8px;
    --spacer-neg: -8px;
    --anim-duration: 0.25s;
    --anim-timing: ease-in-out;
}

*::before,
*::after {
    --spacer: 8px;
    --spacer-neg: -8px;
}

/* Helper */
.d-b {
    display: block;
}

.d-ib {
    display: inline-block;
}

.d-none {
    display: none;
}

.bs-none {
    box-shadow: none;
}

.txt-upper {
    text-transform: uppercase;
}

.txt-lower {
    text-transform: lowercase;
}

.txt-left {
    text-align: left;
}

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

.ft-bold {
    font-family: 'Lato';
    font-weight: 700;
}

.sr-only {
    position: absolute;
    left: -99999px;
    width: 1px;
    height: 1px;
}

/* Margins et paddings */
.m-0 {
    margin: 0;
}
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.m-1 {
    margin: calc(var(--spacer) * 1);
}
.mx-1 {
    margin-left: calc(var(--spacer) * 1);
    margin-right: calc(var(--spacer) * 1);
}
.my-1 {
    margin-top: calc(var(--spacer) * 1);
    margin-bottom: calc(var(--spacer) * 1);
}
.mt-1 {
    margin-top: calc(var(--spacer) * 1);
}
.mr-1 {
    margin-right: calc(var(--spacer) * 1);
}
.mb-1 {
    margin-bottom: calc(var(--spacer) * 1);
}
.ml-1 {
    margin-left: calc(var(--spacer) * 1);
}
.m-2 {
    margin: calc(var(--spacer) * 2);
}
.mx-2 {
    margin-left: calc(var(--spacer) * 2);
    margin-right: calc(var(--spacer) * 2);
}
.my-2 {
    margin-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
}
.mt-2 {
    margin-top: calc(var(--spacer) * 2);
}
.mr-2 {
    margin-right: calc(var(--spacer) * 2);
}
.mb-2 {
    margin-bottom: calc(var(--spacer) * 2);
}
.ml-2 {
    margin-left: calc(var(--spacer) * 2);
}
.m-3 {
    margin: calc(var(--spacer) * 3);
}
.mx-3 {
    margin-left: calc(var(--spacer) * 3);
    margin-right: calc(var(--spacer) * 3);
}
.my-3 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
}
.mt-3 {
    margin-top: calc(var(--spacer) * 3);
}
.mr-3 {
    margin-right: calc(var(--spacer) * 3);
}
.mb-3 {
    margin-bottom: calc(var(--spacer) * 3);
}
.ml-3 {
    margin-left: calc(var(--spacer) * 3);
}
.m-4 {
    margin: calc(var(--spacer) * 4);
}
.mx-4 {
    margin-left: calc(var(--spacer) * 4);
    margin-right: calc(var(--spacer) * 4);
}
.my-4 {
    margin-top: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 4);
}
.mt-4 {
    margin-top: calc(var(--spacer) * 4);
}
.mr-4 {
    margin-right: calc(var(--spacer) * 4);
}
.mb-4 {
    margin-bottom: calc(var(--spacer) * 4);
}
.ml-4 {
    margin-left: calc(var(--spacer) * 4);
}
.m-5 {
    margin: calc(var(--spacer) * 5);
}
.mx-5 {
    margin-left: calc(var(--spacer) * 5);
    margin-right: calc(var(--spacer) * 5);
}
.my-5 {
    margin-top: calc(var(--spacer) * 5);
    margin-bottom: calc(var(--spacer) * 5);
}
.mt-5 {
    margin-top: calc(var(--spacer) * 5);
}
.mr-5 {
    margin-right: calc(var(--spacer) * 5);
}
.mb-5 {
    margin-bottom: calc(var(--spacer) * 5);
}
.ml-5 {
    margin-left: calc(var(--spacer) * 5);
}
.m-6 {
    margin: calc(var(--spacer) * 6);
}
.mx-6 {
    margin-left: calc(var(--spacer) * 6);
    margin-right: calc(var(--spacer) * 6);
}
.my-6 {
    margin-top: calc(var(--spacer) * 6);
    margin-bottom: calc(var(--spacer) * 6);
}
.mt-6 {
    margin-top: calc(var(--spacer) * 6);
}
.mr-6 {
    margin-right: calc(var(--spacer) * 6);
}
.mb-6 {
    margin-bottom: calc(var(--spacer) * 6);
}
.ml-6 {
    margin-left: calc(var(--spacer) * 6);
}
.m-8 {
    margin: calc(var(--spacer) * 8);
}
.mx-8 {
    margin-left: calc(var(--spacer) * 8);
    margin-right: calc(var(--spacer) * 8);
}
.my-8 {
    margin-top: calc(var(--spacer) * 8);
    margin-bottom: calc(var(--spacer) * 8);
}
.mt-8 {
    margin-top: calc(var(--spacer) * 8);
}
.mr-8 {
    margin-right: calc(var(--spacer) * 8);
}
.mb-8 {
    margin-bottom: calc(var(--spacer) * 8);
}
.ml-8 {
    margin-left: calc(var(--spacer) * 8);
}
.mt--1 {
    margin-top: calc(var(--spacer-neg) * 1);
}
.mr--1 {
    margin-right: calc(var(--spacer-neg) * 1);
}
.mb--1 {
    margin-bottom: calc(var(--spacer-neg) * 1);
}
.ml--1 {
    margin-left: calc(var(--spacer-neg) * 1);
}
.mt--2 {
    margin-top: calc(var(--spacer-neg) * 2);
}
.mr--2 {
    margin-right: calc(var(--spacer-neg) * 2);
}
.mb--2 {
    margin-bottom: calc(var(--spacer-neg) * 2);
}
.ml--2 {
    margin-left: calc(var(--spacer-neg) * 2);
}
.mt--3 {
    margin-top: calc(var(--spacer-neg) * 3);
}
.mr--3 {
    margin-right: calc(var(--spacer-neg) * 3);
}
.mb--3 {
    margin-bottom: calc(var(--spacer-neg) * 3);
}
.ml--3 {
    margin-left: calc(var(--spacer-neg) * 3);
}
.mt--4 {
    margin-top: calc(var(--spacer-neg) * 4);
}
.mr--4 {
    margin-right: calc(var(--spacer-neg) * 4);
}
.mb--4 {
    margin-bottom: calc(var(--spacer-neg) * 4);
}
.ml--4 {
    margin-left: calc(var(--spacer-neg) * 4);
}
.m--5 {
    margin: calc(var(--spacer-neg) * 5);
}
.mt--5 {
    margin-top: calc(var(--spacer-neg) * 5);
}
.mr--5 {
    margin-right: calc(var(--spacer-neg) * 5);
}
.mb--5 {
    margin-bottom: calc(var(--spacer-neg) * 5);
}
.ml--5 {
    margin-left: calc(var(--spacer-neg) * 5);
}
.m--6 {
    margin: calc(var(--spacer-neg) * 6);
}
.mt--6 {
    margin-top: calc(var(--spacer-neg) * 6);
}
.mr--6 {
    margin-right: calc(var(--spacer-neg) * 6);
}
.mb--6 {
    margin-bottom: calc(var(--spacer-neg) * 6);
}
.ml--6 {
    margin-left: calc(var(--spacer-neg) * 6);
}
.mt--8 {
    margin-top: calc(var(--spacer-neg) * 8);
}
.mr--8 {
    margin-right: calc(var(--spacer-neg) * 8);
}
.mb--8 {
    margin-bottom: calc(var(--spacer-neg) * 8);
}
.ml--8 {
    margin-left: calc(var(--spacer-neg) * 8);
}
.mx-auto {
    margin-right: auto;
    margin-left: auto;
}
.mr-auto {
    margin-right: auto;
}
.ml-auto {
    margin-left: auto;
}
.p-0 {
    padding: 0;
}
.px-0 {
    padding-left: 0;
    padding-right: 0;
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.p-1 {
    padding: calc(var(--spacer) * 1);
}
.px-1 {
    padding-left: calc(var(--spacer) * 1);
    padding-right: calc(var(--spacer) * 1);
}
.py-1 {
    padding-top: calc(var(--spacer) * 1);
    padding-bottom: calc(var(--spacer) * 1);
}
.pt-1 {
    padding-top: calc(var(--spacer) * 1);
}
.pr-1 {
    padding-right: calc(var(--spacer) * 1);
}
.pb-1 {
    padding-bottom: calc(var(--spacer) * 1);
}
.pl-1 {
    padding-left: calc(var(--spacer) * 1);
}
.p-2 {
    padding: calc(var(--spacer) * 2);
}
.px-2 {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
}
.py-2 {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
}
.pt-2 {
    padding-top: calc(var(--spacer) * 2);
}
.pr-2 {
    padding-right: calc(var(--spacer) * 2);
}
.pb-2 {
    padding-bottom: calc(var(--spacer) * 2);
}
.pl-2 {
    padding-left: calc(var(--spacer) * 2);
}
.p-3 {
    padding: calc(var(--spacer) * 3);
}
.px-3 {
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
}
.py-3 {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
}
.pt-3 {
    padding-top: calc(var(--spacer) * 3);
}
.pr-3 {
    padding-right: calc(var(--spacer) * 3);
}
.pb-3 {
    padding-bottom: calc(var(--spacer) * 3);
}
.pl-3 {
    padding-left: calc(var(--spacer) * 3);
}
.p-4 {
    padding: calc(var(--spacer) * 4);
}
.px-4 {
    padding-left: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
}
.py-4 {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
}
.pt-4 {
    padding-top: calc(var(--spacer) * 4);
}
.pr-4 {
    padding-right: calc(var(--spacer) * 4);
}
.pb-4 {
    padding-bottom: calc(var(--spacer) * 4);
}
.pl-4 {
    padding-left: calc(var(--spacer) * 4);
}
.p-5 {
    padding: calc(var(--spacer) * 5);
}
.px-5 {
    padding-left: calc(var(--spacer) * 5);
    padding-right: calc(var(--spacer) * 5);
}
.py-5 {
    padding-top: calc(var(--spacer) * 5);
    padding-bottom: calc(var(--spacer) * 5);
}
.pt-5 {
    padding-top: calc(var(--spacer) * 5);
}
.pr-5 {
    padding-right: calc(var(--spacer) * 5);
}
.pb-5 {
    padding-bottom: calc(var(--spacer) * 5);
}
.pl-5 {
    padding-left: calc(var(--spacer) * 5);
}
.p-6 {
    padding: calc(var(--spacer) * 6);
}
.px-6 {
    padding-left: calc(var(--spacer) * 6);
    padding-right: calc(var(--spacer) * 6);
}
.py-6 {
    padding-top: calc(var(--spacer) * 6);
    padding-bottom: calc(var(--spacer) * 6);
}
.pt-6 {
    padding-top: calc(var(--spacer) * 6);
}
.pr-6 {
    padding-right: calc(var(--spacer) * 6);
}
.pb-6 {
    padding-bottom: calc(var(--spacer) * 6);
}
.pb-6-imp {
    padding-bottom: calc(var(--spacer) * 6) !important;
}
.pl-6 {
    padding-left: calc(var(--spacer) * 6);
}
.p-8 {
    padding: calc(var(--spacer) * 8);
}
.px-8 {
    padding-left: calc(var(--spacer) * 8);
    padding-right: calc(var(--spacer) * 8);
}
.py-8 {
    padding-top: calc(var(--spacer) * 8);
    padding-bottom: calc(var(--spacer) * 8);
}
.pt-8 {
    padding-top: calc(var(--spacer) * 8);
}
.pr-8 {
    padding-right: calc(var(--spacer) * 8);
}
.pb-8 {
    padding-bottom: calc(var(--spacer) * 8);
}
.pl-8 {
    padding-left: calc(var(--spacer) * 8);
}
.pt--1 {
    padding-top: calc(var(--spacer-neg) * 1);
}
.pr--1 {
    padding-right: calc(var(--spacer-neg) * 1);
}
.pb--1 {
    padding-bottom: calc(var(--spacer-neg) * 1);
}
.pl--1 {
    padding-left: calc(var(--spacer-neg) * 1);
}
.pt--2 {
    padding-top: calc(var(--spacer-neg) * 2);
}
.pr--2 {
    padding-right: calc(var(--spacer-neg) * 2);
}
.pb--2 {
    padding-bottom: calc(var(--spacer-neg) * 2);
}
.pl--2 {
    padding-left: calc(var(--spacer-neg) * 2);
}
.pt--3 {
    padding-top: calc(var(--spacer-neg) * 3);
}
.pr--3 {
    padding-right: calc(var(--spacer-neg) * 3);
}
.pb--3 {
    padding-bottom: calc(var(--spacer-neg) * 3);
}
.pl--3 {
    padding-left: calc(var(--spacer-neg) * 3);
}
.pt--4 {
    padding-top: calc(var(--spacer-neg) * 4);
}
.pr--4 {
    padding-right: calc(var(--spacer-neg) * 4);
}
.pb--4 {
    padding-bottom: calc(var(--spacer-neg) * 4);
}
.pl--4 {
    padding-left: calc(var(--spacer-neg) * 4);
}
.p--5 {
    padding: calc(var(--spacer-neg) * 5);
}
.pt--5 {
    padding-top: calc(var(--spacer-neg) * 5);
}
.pr--5 {
    padding-right: calc(var(--spacer-neg) * 5);
}
.pb--5 {
    padding-bottom: calc(var(--spacer-neg) * 5);
}
.pl--5 {
    padding-left: calc(var(--spacer-neg) * 5);
}
.p--6 {
    padding: calc(var(--spacer-neg) * 6);
}
.pt--6 {
    padding-top: calc(var(--spacer-neg) * 6);
}
.pr--6 {
    padding-right: calc(var(--spacer-neg) * 6);
}
.pb--6 {
    padding-bottom: calc(var(--spacer-neg) * 6);
}
.pl--6 {
    padding-left: calc(var(--spacer-neg) * 6);
}
.pt--8 {
    padding-top: calc(var(--spacer-neg) * 8);
}
.pr--8 {
    padding-right: calc(var(--spacer-neg) * 8);
}
.pb--8 {
    padding-bottom: calc(var(--spacer-neg) * 8);
}
.pl--8 {
    padding-left: calc(var(--spacer-neg) * 8);
}
.bt-0 {
    border-top: 0 !important;
}
.br-0 {
    border-right: 0 !important;
}
.bb-0 {
    border-bottom: 0 !important;
}
.bl-0 {
    border-left: 0 !important;
}
.bt-1 {
    border-top: 1.5px solid var(--clr-border);
}
.br-1 {
    border-right: 1.5px solid var(--clr-border);
}
.bb-1 {
    border-bottom: 1.5px solid var(--clr-border);
}
.bl-1 {
    border-left: 1.5px solid var(--clr-border);
}
.bx-1 {
    border-top: 1.5px solid var(--clr-border);
    border-bottom: 1.5px solid var(--clr-border);
}
.by-1 {
    border-left: 1.5px solid var(--clr-border);
    border-right: 1.5px solid var(--clr-border);
}
.bx-0 {
    border-top: 0;
    border-bottom: 0;
}
.by-0 {
    border-left: 0;
    border-right: 0;
}
.bc-white {
    border-color: var(--clr-white) !important;
}

/* Séparation */
[class*='separation-']::before,
[class*='separation-']::after {
    content: '';
    display: block;
    width: 1px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--clr-border);
}
.separation-before-1::before,
.separation-after-1::after {
    height: calc(var(--spacer) * 1);
}
.separation-before-2::before,
.separation-after-2::after {
    height: calc(var(--spacer) * 2);
}
.separation-before-3::before,
.separation-after-3::after {
    height: calc(var(--spacer) * 3);
}
.separation-before-4::before,
.separation-after-4::after {
    height: calc(var(--spacer) * 4);
}
.separation-before-5::before,
.separation-after-5::after {
    height: calc(var(--spacer) * 5);
}
.separation-before-6::before,
.separation-after-6::after {
    height: calc(var(--spacer) * 6);
}
.separation-before-7::before,
.separation-after-7::after {
    height: calc(var(--spacer) * 7);
}
.separation-before-8::before,
.separation-after-8::after {
    height: calc(var(--spacer) * 8);
}
.separation-before-9::before,
.separation-after-9::after {
    height: calc(var(--spacer) * 9);
}
.separation-before-10::before,
.separation-after-10::after {
    height: calc(var(--spacer) * 10);
}
.separation-left-auto::before,
.separation-left-auto::after,
.separation-right-auto::before,
.separation-right-auto::after {
    content: none;
}
.separation-left-auto,
.separation-right-auto {
    width: auto;
    height: 1px;
    flex: 1 1 auto;
    background: var(--clr-border);
}

/* Global */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    background: var(--clr-bkg);
    color: var(--clr-txt-primary);
    font-family: 'Lato';
    font-weight: 400;
    font-size: var(--font-size);
    line-height: var(--font-lh);
}

#app {
    position: relative;
}

hr {
    display: block;
    border-bottom: 1.5px solid var(--clr-border);
}

.link {
    font-family: 'A2 Regular Bold';
    box-shadow: 0 1.5px 0 0 var(--clr-dark);
}

/* Grid */
.grid-12 {
    --grid-width: calc(
        calc(var(--grid-col-width) * var(--grid-col-number)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 1))
    );
    width: var(--grid-width);
}

.grid-11 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 1)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 2))
    );
    width: var(--grid-width);
}

.grid-10 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 2)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 3))
    );
    width: var(--grid-width);
}

.grid-9 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 3)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 4))
    );
    width: var(--grid-width);
}

.grid-8 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 4)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 5))
    );
    width: var(--grid-width);
}

.grid-7 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 5)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 6))
    );
    width: var(--grid-width);
}

.grid-6 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 6)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 7))
    );
    width: var(--grid-width);
}

.grid-5 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 7)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 8))
    );
    width: var(--grid-width);
}

.grid-4 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 8)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 9))
    );
    width: var(--grid-width);
}

.grid-3 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 9)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 10))
    );
    width: var(--grid-width);
}

.grid-2 {
    --grid-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 10)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 11))
    );
    width: var(--grid-width);
}

.grid-1 {
    --grid-width: calc(var(--grid-col-width) * calc(var(--grid-col-number) - 11));
    width: var(--grid-width);
}

/* CSS grid */
.grid-container--4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gutter);
}

.grid-container--3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-container--2cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gutter);
}

/* Accessibilité */
.ally--hidden-buttons {
    position: absolute;
    top: 0;
    left: 0;
    list-style-type: none;
}

.ally--hidden-button a {
    position: fixed;
    top: 0;
    left: -9999999px;
    padding-top: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 2);
    padding-left: calc(var(--spacer) * 3);
}

.ally--hidden-button a:focus {
    left: 0;
    z-index: 999;
}

.ally-title {
    position: absolute;
    top: -100px;
    left: -9999px;
}

/* Logo */
#logo {
    position: absolute;
    top: calc(var(--spacer) * 4);
    left: 0;
    width: 100px;
    height: 100px;
}

/* Typographie */
a {
    box-shadow: 0 1.5px 0 0 var(--clr-white);
    cursor: pointer;
}

a:hover,
a:focus {
    box-shadow: none;
}

.introduction-container {
    letter-spacing: 2.77px;
}

.page-sas .introduction-container .container-bordered {
    background-color: var(--clr-white);
    border: 2px dotted var(--clr-border-intro);
}

.introduction-container .introduction--titles-container {
    text-align: center;
}

.introduction--title,
.connexion--title {
    display: inline-block;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: var(--font-title);
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
}

.introduction--suptitle-container,
.introduction--subtitle-container,
.connexion--subtitle,
.documentaire--subtitle-container {
    position: relative;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Lato';
    font-weight: 300;
    font-size: var(--font-subtitle);
    text-align: center;
}

.introduction--suptitle-container > *,
.introduction--subtitle-container > *,
.connexion--subtitle > *,
.documentaire--subtitle-container > * {
    flex: 1 1 auto;
}

.introduction--suptitle-before,
.introduction--suptitle-after,
.introduction--subtitle-before,
.introduction--subtitle-after,
.connexion--subtitle-before,
.connexion--subtitle-after,
.documentaire--suptitle-before,
.documentaire--suptitle-after {
    flex: 1 0 auto;
    width: auto;
    height: 1px;
    margin-top: calc(var(--font-subtitle) / 2);
    background-color: var(--clr-white);
}
.introduction--suptitle-before,
.introduction--suptitle-after,
.introduction--subtitle-before,
.introduction--subtitle-after {
    height: 2px;
}

.introduction--subtitle,
.introduction--suptitle {
    font-family: 'Lato';
    font-weight: 700;
}

.introduction--subtitle {
    font-family: 'Lato';
    font-weight: 300;
}

.bande-annonce--video-inner-container,
.infos-pratique--inner-container {
    position: relative;
}

.infos-pratique--inner-container {
    background-color: var(--clr-white);
}

.bande-annonce--outer-container--title,
.chefs--outer-container--title,
.a-propos--inner-container--title {
    font-family: 'Amatic SC', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 6.9rem;
    line-height: 1.25em;
}

.bande-annonce--video--outer-container {
    background: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/jpg/bande-annonce--bg.jpg')
        center no-repeat;
    background-size: cover;
}

.bande-annonce--title-container,
.infos-pratiques--title-container {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-50% - 12px));
}

h3.bande-annonce--title,
h3.infos-pratiques--title {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.22em;
    color: var(--clr-white);
    background-color: var(--clr-quaternary);
    position: relative;
}

h2.comment-ca-marche--title {
    margin-bottom: calc(var(--spacer) * 5);
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.22em;
    color: var(--clr-white);
    background-color: var(--clr-quaternary);
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
}

h3.bande-annonce--title::before,
h3.infos-pratiques--title::before,
h2.comment-ca-marche--title::before,
h3.bande-annonce--title::after,
h3.infos-pratiques--title::after,
h2.comment-ca-marche--title::after {
    content: '';
    width: 80px;
    height: 100%;
    background-color: #d5524c;

    /* position ribbon ends behind and slightly lower */
    position: absolute;
    z-index: -1;
    top: 12px;

    /* clip ribbon end shape */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* draw and position the folded ribbon bit */
    background-image: linear-gradient(45deg, transparent 50%, #932b26 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h3.bande-annonce--title::before,
h3.infos-pratiques--title::before,
h2.comment-ca-marche--title::before {
    left: -60px;
}

h3.bande-annonce--title::after,
h3.infos-pratiques--title::after,
h2.comment-ca-marche--title::after {
    right: -60px;
    transform: scaleX(-1); /* flip horizontally */
}

.bande-annonce--iframe-outer-container {
    padding-top: calc(var(--spacer) * 9);
    padding-bottom: calc(var(--spacer) * 10);
}

.bande-annonce--inner-container p {
    font-size: 1.6rem;
    line-height: 2em;
}

/* #infosPratiques.infos-pratiques--container .container-bordered{
    border-top: 0;
} */

.infos-pratiques--liste {
    display: flex;
    flex-wrap: wrap;
    padding: calc(var(--spacer) * 2);
    padding-top: calc(var(--spacer) * 8);
}

.infos-pratiques--item {
    min-width: 25%;
    min-height: auto;
    padding: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);

    text-align: center;
}

.infos-pratiques--item img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacer) * 3);
    width: 56px;
    max-height: 56px;
}

.infos-pratiques--item figcaption {
    font-family: 'Lato';
    font-weight: 700;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.chefs--outer-container--title::before {
    margin-bottom: calc(var(--spacer) * 2);
}

.a-propos--outer-container {
    min-height: 942px;
    background-size: cover;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/png/a-propos--bg.png');
    background-repeat: no-repeat;
}

.a-propos--outer-container::before,
.a-propos--outer-container::after {
    content: '';
    width: 295px;
    height: 165px;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

.a-propos--outer-container::before {
    top: 0;
    right: 0;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/corner-haut-droit.svg');
}

.a-propos--outer-container::after {
    bottom: 0;
    left: 0;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/corner-haut-gauche.svg');
}

.a-propos--inner-container {
    text-align: center;
    width: 60%;
    padding-top: calc(var(--spacer) * 14.375);
}

.a-propos--inner-container--title {
    margin-bottom: calc(var(--spacer) * 7.35);
}

.a-propos--inner-container p {
    font-size: 1.6rem;
    line-height: 2em;
}

.chefs--outer-container--title::after {
    margin-top: calc(var(--spacer) * 2);
}

.chefs--card-title {
    font-family: bely-display, sans-serif;
    font-style: normal;
    font-size: 2.3rem;
    line-height: 1.2em;
}

.chefs--card-subtitle {
    color: var(--clr-txt-secondary);
}

.chefs--card-tails-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-quaternary);
}

.chefs--card-tails-title {
    font-family: 'Amatic SC', cursive;
    font-weight: 400;
    color: var(--clr-white);
    font-style: normal;
    font-size: 4rem;
    line-height: 1.275em;
    padding-bottom: calc(var(--spacer) * 3);
    width: fit-content;
}

.chefs--card-tails-title.bb-1 {
    border-color: var(--clr-dark);
}

.chefs--card-tails-title + p {
    font-size: 1.6rem;
}

.chefs--card-tails-title + p + p {
    margin-top: var(--spacer);
}

.achat-code--title {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.6em;
}

.comment-ca-marche--inner-container {
    position: relative;
}

.comment-ca-marche--title {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    line-height: 1.33em;
    color: var(--clr-white);
    background-color: var(--clr-quaternary);
}

.comment-ca-marche--card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    text-align: center;
    font-size: 5.3rem;
    line-height: 1.5em;
    background: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/bkg-cards-ccm.svg')
        no-repeat center top;
    background-size: contain;
    min-height: 108px;
    padding-left: 0;
    padding-right: 0;
}

.comment-ca-marche--card-title::before,
.comment-ca-marche--card-title::after {
    content: '';
    border-bottom: 4px dotted #89898e;
    width: 100%;
    min-height: 1.5px;
}

.comment-ca-marche--card-title::before {
    margin-right: calc(var(--spacer) * 7);
}
.comment-ca-marche--card-title::after {
    margin-left: calc(var(--spacer) * 7);
}

.popin--title {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2em;
    color: var(--clr-dark);
}

.popin--subtitle {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.04em;
    color: #2f4d57;
}

.popin--text {
    color: #2f4d57;
    font-size: 1.5rem;
}

.popin--text a {
    box-shadow: 0 1.5px 0 0 #2f4d57;
}

.popin--text a:hover,
.popin--text a:focus {
    box-shadow: 0 1.5px 0 0 var(--clr-white);
}

.popin--title:focus {
    text-decoration: underline;
}

.icon-timer {
    font-size: 1.5rem;
}

.documentaire--title {
    font-family: 'Gordita Black';
    font-size: 9rem;
    line-height: 1.33em;
}

.documentaire--subtitle {
    font-family: 'Gordita Bold';
    font-size: 1.7rem;
    line-height: 1.3em;
}

.documentaire--utils-title {
    font-family: bely-display, sans-serif;
    font-size: 2.3rem;
    line-height: 1.47em;
}

.introduction-edito--title {
    font-family: 'Gordita Black';
    font-size: 4.5rem;
    line-height: 1.44em;
}

.edito--title {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.5em;
}

.edito--subtitle {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.5em;
}

.edito--text {
    line-height: 1.6em;
}

/* Buttons */
.btn {
    display: block;
    font-family: 'Lato';
    font-weight: 400;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 2.77px;
    cursor: pointer;
}

.btn:hover,
.btn:focus {
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    transform: scale(1.04);
}

.btn.btn-sticky {
    letter-spacing: initial;
}

.btn-primary {
    background-color: var(--clr-bkg);
    color: var(--clr-white);
    border-color: var(--clr-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--clr-white);
    color: var(--clr-dark);
    text-shadow: 1px 0px 0px var(--clr-dark);
}

.btn-primary[disabled],
.btn-primary.disabled {
    background-color: var(--clr-primary-disabled);
    color: var(--clr-txt-disabled);
    border-color: var(--clr-primary-disabled);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--clr-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--clr-secondary-hover);
    text-shadow: 1px 0px 0px var(--clr-white);
}

.btn-tertiary {
    background-color: var(--clr-tertiary);
    color: var(--clr-white);
    box-shadow: 0 0 11px #00000029;
}

.btn-tertiary:hover,
.btn-tertiary:focus {
    background-color: var(--clr-secondary);
    border-color: var(--clr-border);
    color: var(--clr-white);
    text-shadow: 1px 0px 0px var(--clr-white);
}

.btn-ally:hover,
.btn-ally:focus {
    background-color: var(--clr-tertiary);
    color: var(--clr-white);
}

.btn-bordered {
    background-color: var(--clr-bkg);
    border: 1.5px solid var(--clr-border);
}

.btn-bordered:hover,
.btn-bordered:focus {
    background-color: var(--clr-secondary-hover);
    border: 1.5px solid var(--clr-primary-disabled);
    text-shadow: 1px 0px 0px var(--clr-white);
}

.btn-bordered.bc-white:hover,
.btn-bordered.bc-white:focus {
    background-color: var(--clr-white);
    color: var(--clr-dark);
    text-shadow: 1px 0px 0px var(--clr-dark);
}

.btn-aide {
    position: fixed;
    top: 0;
    right: 0;
}

.btn-pause,
.btn-play {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 57px;
    height: 57px;
    background-size: cover;
    cursor: pointer;
}

.btn-pause {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-pause.svg');
}

.btn-play {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-play.svg');
}

.btn-pause:hover,
.btn-pause:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-pause-hover.svg');
    border: 2px solid var(--clr-primary-disabled);
}

.btn-play:hover,
.btn-play:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-play-hover.svg');
    border: 2px solid var(--clr-primary-disabled);
}

.btn-retour,
.btn-contact {
    padding-right: calc(var(--spacer) * 3);
    padding-left: calc(var(--spacer) * 3);
    min-height: calc(var(--spacer) * 8);
}

.btn-retour {
    position: absolute;
    top: 0;
    left: 0;
}

.btn-retour.btn-icon-before,
.btn-contact.btn-icon-before {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
}

.btn-retour.btn-icon-before::before {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/arrow-left.svg');
    background-size: cover;
}

.btn-contact {
    position: absolute;
    top: 0;
    right: 0;
}

.btn-contact.btn-icon-before::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-contact.svg');
    background-size: cover;
}

.btn-contact.btn-icon-after::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-contact.svg');
    background-size: cover;
}

.introduction--buttons-container .btn {
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
    padding-left: calc(var(--spacer) * 8);
    padding-right: calc(var(--spacer) * 8);
}

.btn-back-top {
    display: none;
    position: fixed;
    bottom: calc(var(--spacer) * 4);
    right: calc(var(--spacer) * 4);
    width: 67px;
    height: 67px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/arrow-up-rounded.svg');
    background-size: cover;
    opacity: 0;
    transition: background-image var(--anim-duration) var(--anim-timing),
        opacity var(--anim-duration) var(--anim-timing), transform var(--anim-duration) var(--anim-timing);
}

.btn-back-top:hover,
.btn-back-top:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/arrow-up-rounded_hover.svg');
    transform: scale(calc(80 / 67)); /* correspond aux deux tailles des éléments de l'UI d'Antoine */
}

.btn-container {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacer) * 2);
}

.btn-container .btn-contact {
    position: initial;
}

.page-edito .edito--outer-container .btn {
    letter-spacing: 2.77px;
}

/* Form */
input {
    border: 1.5px solid var(--clr-border);
}

input[type='text']:focus {
    border: 1.5px solid var(--clr-white);
}

input[type='text'].is-invalid {
    border: 1.5px solid var(--clr-error);
    color: var(--clr-error);
}

input[type='text'].is-invalid {
    margin-bottom: var(--spacer);
}

input::placeholder {
    color: var(--clr-txt-secondary);
}

input[type='submit'] {
    letter-spacing: 2.77px;
}

form.is-invalid .connexion--form-error-message a {
    box-shadow: 0 1.5px 0 0 var(--clr-error);
}

form.is-invalid .connexion--form-error-message a:hover,
form.is-invalid .connexion--form-error-message a:focus {
    box-shadow: none;
}

/* Containers */
.container-marked {
    position: relative;
    background: var(--clr-bkg);
}

.container-marked::before,
.container-marked::after {
    content: '';
    position: absolute;
    top: calc(var(--spacer) * 4);
    width: 8px;
    height: 8px;
    background: var(--clr-border);
    border-radius: 50%;
}

.container-marked::before {
    left: calc(var(--spacer) * 4);
}

.container-marked::after {
    right: calc(var(--spacer) * 4);
}

.container-bordered {
    border: 1.5px solid var(--clr-border);
}
.page-sas .container-bordered {
    border: 2px solid var(--clr-border);
}

.introduction--outer-container {
    position: relative;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/png/background-intro.png');
    background-size: cover;
    background-position: top center;
}

.introduction--inner-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 752px;
}

.introduction--titles-container {
    padding-top: calc(var(--spacer) * 12);
    padding-bottom: calc(var(--spacer) * 14);
}

.introduction--buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacer) * 3);
    transform: translateY(-50%);
}

.connexion--outer-container {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/bkg-edito.svg');
    background-size: cover;
    background-position: left center;
}

.connexion--inner-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - calc(var(--spacer) * 15));
}

.connexion--form-container {
    font-family: 'Lato';
    font-weight: 700;
}

.connexion--form-error-message {
    color: var(--clr-error);
}

.bande-annonce--iframe-container,
.documentaire--iframe-container {
    position: relative;
}

.grid-8 .bande-annonce--iframe-container > iframe,
.grid-8 .bande-annonce--iframe-container > iframe {
    --iframe-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 4)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 5))
    );
    --iframe-ratio: calc(calc(9 * 100) / 16); /* ratio 16/9 */
    width: var(--iframe-width);
    height: calc(calc(var(--iframe-width) * var(--iframe-ratio)) / 100);
}

.grid-10 .documentaire--iframe-container > iframe {
    --iframe-width: calc(
        calc(var(--grid-col-width) * calc(var(--grid-col-number) - 2)) +
            calc(var(--grid-gutter) * calc(var(--grid-col-number) - 3))
    );
    --iframe-ratio: calc(calc(9 * 100) / 16); /* ratio 16/9 */
    width: var(--iframe-width);
    height: calc(calc(var(--iframe-width) * var(--iframe-ratio)) / 100);
}

.chefs--card-title--container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.chefs--card-title--container > span {
    flex: 1 1 auto;
}

.achat-code--outer-container {
    padding: calc(var(--spacer) * 12) 0 calc(var(--spacer) * 12);
}

.achat-howto--outer-container {
    position: relative;
    z-index: 0;
    background-color: #cbf2ff;
    background-image: url(https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/png/how-it-works-top.png),
        url(https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/png/how-it-works-bottom.png);
    background-position: top -65px center, bottom center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, contain;
}

.achat-code--inner-container {
    padding: calc(var(--spacer) * 4.125) 0 calc(var(--spacer) * 4.125);
    background-color: var(--clr-white);
}

.achat-code--inner-container .container-outline {
    border: 2px dotted var(--clr-border-intro);
    margin-right: calc(var(--spacer) * 4.125);
    margin-left: calc(var(--spacer) * 4.125);
    padding: calc(var(--spacer) * 5) 0 calc(var(--spacer) * 4);
}

.comment-ca-marche--outer-container {
    padding: 0 0 calc(var(--spacer) * 45);
}

.comment-ca-marche--card {
    padding: calc(var(--spacer) * 10) calc(var(--spacer) * 3) calc(var(--spacer) * 8);
    background-color: var(--clr-white);
    box-shadow: 0 3px 6px #00000029;
}

/* Documentaire containers */
.icon-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
    background-color: var(--clr-bkg);
    min-height: calc(var(--spacer) * 8);
    font-family: 'Lato';
    font-weight: 400;
    font-size: 1.7rem;
    text-align: center;
}

.icon-timer.icon-before::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-timer.svg');
    background-size: cover;
}

.icon-timer.icon-after::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-timer.svg');
    background-size: cover;
}

.documentaire--outer-container {
    padding-bottom: calc(var(--spacer) * 10);
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/bkg-documentaire.svg');
    background-size: cover;
    background-position: top center;
}

.documentaire--inner-container {
    position: relative;
}

.documentaire--iframe-outer-container.container-marked::before,
.documentaire--iframe-outer-container.container-marked::after {
    width: 12px;
    height: 12px;
    top: calc(var(--spacer) * 6);
}

.documentaire--iframe-outer-container.container-marked::before {
    left: calc(var(--spacer) * 6);
}

.documentaire--iframe-outer-container.container-marked::after {
    right: calc(var(--spacer) * 6);
}

.documentaire--iframe-outer-container > .container-marked {
    min-height: 12px;
}

.documentaire--iframe-outer-container > .container-marked::before,
.documentaire--iframe-outer-container > .container-marked::after {
    width: 12px;
    height: 12px;
    top: 0;
}

.documentaire--iframe-tools-outer-container {
    background-color: var(--clr-bkg);
}

.documentaire--iframe-tools-inner-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.documentaire--iframe-sharing-container ul {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacer) * 2);
}

.documentaire--utils-outer-container {
    padding-top: calc(var(--spacer) * 10);
    padding-bottom: calc(var(--spacer) * 10);
}

.documentaire--utils-inner-container > div {
    display: flex;
}

.documentaire--utils-inner-container > div > figure {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 8);
    padding-top: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 8);
    padding-bottom: calc(var(--spacer) * 4);
    padding-left: calc(var(--spacer) * 8);
}

.documentaire--utils-inner-container > div > figure > * {
    flex-grow: 1;
}

.documentaire--utils-inner-container > div > figure > img {
    max-width: 190px;
}

.documentaire--utils-inner-container > div > figure > figcaption .btn {
    width: fit-content;
    padding-top: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2.5);
    padding-bottom: calc(var(--spacer) * 2);
    padding-left: calc(var(--spacer) * 2.5);
    letter-spacing: initial;
}

/* Edito containers */
.introduction-edito--outer-container {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/bkg-edito.svg');
    background-size: cover;
    background-position: left center;
}

.introduction-edito--inner-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - calc(var(--spacer) * 15));
}

.introduction-edito--container {
    padding-top: calc(var(--spacer) * 7);
    padding-right: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 7);
    padding-left: calc(var(--spacer) * 4);
}

.edito--outer-container {
    padding-top: calc(var(--spacer) * 7);
    padding-bottom: calc(var(--spacer) * 7);
}

/* Footer global container */
footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(var(--spacer) * 15);
    background-color: var(--clr-tertiary);
    color: var(--clr-white);
}

.footer--inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-links--container ul,
.footer-socials-links--container ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-links--container li {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
    border-right: 0.5px solid var(--clr-border);
}

.footer-links--container li:first-child {
    padding-left: 0;
}

.footer-links--container li:last-child {
    padding-right: 0;
    border-right: none;
}

.footer-socials-links--container li {
    padding-left: calc(var(--spacer) * 2);
}

.footer-socials-links--container li:first-child {
    padding-left: 0;
}

.footer-socials-link {
    display: block;
    width: 40px;
    height: 40px;
    background-size: contain;
    transition: background-image var(--anim-duration) var(--anim-timing);
}

.footer-socials-link--instagram {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-instagram.svg');
}

.footer-socials-link--instagram:hover,
.footer-socials-link--instagram:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-instagram-hover.svg');
}

.footer-socials-link--twitter {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-twitter.svg');
}

.footer-socials-link--twitter:hover,
.footer-socials-link--twitter:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-twitter-hover.svg');
}

.footer-socials-link--facebook {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-facebook.svg');
}

.footer-socials-link--facebook:hover,
.footer-socials-link--facebook:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-rs-facebook-hover.svg');
}

/* Chefs cards */
.chefs--outer-container {
    --maxHeight: auto;
    --maxHeightFigure: auto;
    --maxHeightFigureImg: auto;
}

.chefs--card {
    position: relative;
    height: var(--maxHeight);
    border: 0.5px solid var(--clr-border);
    overflow: hidden;
}

.chefs--card-heads-container {
    display: flex;
    align-items: center;
}

.chefs--card-heads-container,
.chefs--card-tails-container {
    height: var(--maxHeight);
}

.chefs--card-heads-container > figure {
    height: var(--maxHeightFigure);
}

.chefs--card-inner-container {
    top: 0;
    position: relative;
    transition: top calc(var(--anim-duration) * 2) var(--anim-timing);
}

.chefs--card:hover .chefs--card-inner-container,
.chefs--card:focus .chefs--card-inner-container {
    top: calc(-1 * var(--maxHeight));
}

.chefs--card:nth-child(1) {
    border-left: 1.5px solid var(--clr-border);
    border-right: 0.5px solid var(--clr-border);
    border-top: 1.5px solid var(--clr-border);
    border-bottom: 0.5px solid var(--clr-border);
}

.chefs--card:nth-child(2) {
    border-left: 0.5px solid var(--clr-border);
    border-right: 0.5px solid var(--clr-border);
    border-top: 1.5px solid var(--clr-border);
    border-bottom: 0.5px solid var(--clr-border);
}

.chefs--card:nth-child(3) {
    border-left: 0.5px solid var(--clr-border);
    border-right: 1.5px solid var(--clr-border);
    border-top: 1.5px solid var(--clr-border);
    border-bottom: 0.5px solid var(--clr-border);
}

.chefs--card:nth-child(4) {
    border-left: 1.5px solid var(--clr-border);
    border-right: 0.5px solid var(--clr-border);
    border-top: 0.5px solid var(--clr-border);
    border-bottom: 0.5px solid var(--clr-border);
}

.chefs--card:nth-child(5) {
    border-left: 0.5px solid var(--clr-border);
    border-right: 0.5px solid var(--clr-border);
    border-top: 0.5px solid var(--clr-border);
    border-bottom: 1.5px solid var(--clr-border);
}

.chefs--card:nth-child(6) {
    border-left: 0.5px solid var(--clr-border);
    border-right: 1.5px solid var(--clr-border);
    border-top: 0.5px solid var(--clr-border);
    border-bottom: 1.5px solid var(--clr-border);
}

.chefs--card:nth-child(7) {
    border-left: 1.5px solid var(--clr-border);
    border-right: 1.5px solid var(--clr-border);
    border-top: 0.5px solid var(--clr-border);
    border-bottom: 1.5px solid var(--clr-border);
}

.chefs--card figure {
    padding: calc(var(--spacer) * 5) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chefs--card figure img {
    display: block;
    margin-left: calc(var(--spacer) * 7);
    margin-right: calc(var(--spacer) * 7);
    max-width: 100%;
    height: auto;
    max-height: var(--maxHeightFigureImg);
}

.chefs--card-title {
    max-width: 20ch;
}

.chefs--card-subtitle {
    padding-top: calc(var(--spacer) * 2);
    display: inline-block;
    font-size: 1.6rem;
    max-width: 50ch;
}

.chefs--card-title--container .separation-left-auto,
.chefs--card-title--container .separation-right-auto {
    margin-top: calc(calc(2.3rem + calc(1.2em / 2)) / 2);
}

/* Credits */
.edito--inner-container li {
    line-height: 24px;
}

.credits--logo {
    height: 121px;
}

/* Iframe et vidéo */
#bandeAnnonceTranscriptionButton,
#documentaireTranscriptionButton,
#btnContact {
    box-shadow: 0 1.5px 0 0 var(--clr-txt-secondary);
    color: var(--clr-txt-secondary);
    cursor: pointer;
    transition: box-shadow var(--anim-duration) var(--anim-timing), color var(--anim-duration) var(--anim-timing);
}

#bandeAnnonceTranscriptionButton:hover,
#bandeAnnonceTranscriptionButton:focus,
#documentaireTranscriptionButton:hover,
#documentaireTranscriptionButton:focus,
#btnContact:hover,
#btnContact:focus {
    box-shadow: none;
    font-weight: bold;
    color: var(--clr-txt-secondary);
}

/* Animation */
a {
    transition: box-shadow var(--anim-duration) var(--anim-timing);
}

.btn {
    transition: background-color var(--anim-duration) var(--anim-timing),
        border-color var(--anim-duration) var(--anim-timing), box-shadow var(--anim-duration) var(--anim-timing),
        transform var(--anim-duration) var(--anim-timing);
}

.btn-pause,
.btn-play {
    transition: background-image var(--anim-duration) var(--anim-timing);
}

.btn-retour.btn-icon-before {
    transition: background-color var(--anim-duration) var(--anim-timing);
}

.btn-bordered {
    transition: background-color var(--anim-duration) var(--anim-timing);
}

.btn-bordered.bc-white {
    transition: background-color var(--anim-duration) var(--anim-timing), color var(--anim-duration) var(--anim-timing);
}

/* Popin */
.popin--outer-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-timing);
}

.popin--outer-container > [role='document'] {
    position: relative;
    z-index: 15;
}

.popin--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--clr-bkg);
    opacity: 0.85;
    z-index: 10;
    cursor: pointer;
}

.popin--inner-container {
    background: var(--clr-white);
    color: var(--clr-dark);
    max-width: calc(var(--spacer) * 100);
    width: calc(100% - calc(var(--spacer) * 8));
    margin: auto;
}

.popin--inner-container.container-bordered {
    border: 2px solid var(--clr-quaternary);
}

.popin--contact {
    width: 860px;
    max-width: calc(100% - calc(var(--spacer) * 4));
}

.popin--contact + .popin--button-close {
    right: calc(var(--spacer) * 4);
}

.popin--title {
    background: var(--clr-quaternary);
    padding-top: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
    padding-left: calc(var(--spacer) * 4);
}

.popin--text {
    padding-top: calc(var(--spacer) * 4);
    padding-right: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
    padding-left: calc(var(--spacer) * 4);
    max-height: 65vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.popin--contact .popin--text {
    padding-right: 0;
    padding-left: 0;
}

.popin--text p {
    margin-bottom: calc(var(--spacer) * 2);
}

.popin--text p:last-child {
    margin-bottom: 0;
}

.popin--button-close {
    position: absolute;
    top: calc(var(--spacer) * 3);
    right: calc(var(--spacer) * 7);
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-close.svg');
    background-size: cover;
    width: 40px;
    height: 40px;
    transition: background-image var(--anim-duration) var(--anim-timing);
    cursor: pointer;
}

.popin--button-close:hover,
.popin--button-close:focus {
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-close-hover.svg');
}

/* Changement du titre de dernière minute - bonjour si vous me lisez */
.introduction--title {
    line-height: 1.21em;
    letter-spacing: 8px;
}

.introduction--title span {
    display: block;
}

.introduction--titles-container {
    padding-top: calc(var(--spacer) * 8);
    padding-bottom: calc(var(--spacer) * 10);
}

/* Ajout de la vidéo en background */
.introduction--video-background {
    position: absolute;
    width: 100%;
    height: 100%;
}

.introduction--video-background::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #001b23;
    opacity: 0.4;
}

.introduction--video-background > video {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.introduction--outer-container {
    border-bottom: 1px solid var(--clr-border);
}

/* Captions Vimeo */
.vp-captions {
    display: none !important;
}

/* Gestion des chataigne sur les containers */
.container-outline {
    background-color: var(--clr-white);
    padding: 24px;
}

.introduction-container .container-outline,
.achat-code--inner-container {
    position: relative;
}

.introduction-container .container-outline::before,
.introduction-container .container-outline::after,
.achat-code--inner-container::before,
.achat-code--inner-container::after,
.achat-code--inner-container .container-outline::before,
.achat-code--inner-container .container-outline::after {
    content: '';
    position: absolute;
    background-color: var(--clr-white);
    background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/png/chataigne-border.png');
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 56px;
    min-height: 56px;
}

.introduction-container .container-outline::before,
.achat-code--inner-container::before {
    top: 0;
    left: 0;
}

.achat-code--inner-container .container-outline::before {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.introduction-container .container-outline::after,
.achat-code--inner-container::after {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.achat-code--inner-container .container-outline::after {
    bottom: 0;
    right: 0;
    transform: scale(-1);
}

.chefs--outer-container,
.a-propos--outer-container,
.bande-annonce--outer-container {
    position: relative;
}

.a-propos--outer-container {
    background-size: cover;
}

.chefs--card-heads-container,
.chefs--card-tails-container {
    padding: calc(var(--spacer) * 5) calc(var(--spacer) * 4);
}

.chefs--card figure {
    padding: 0;
}

/* Responsive avant Jevons */
/* Responsive */
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1329px) {
    :root {
        --font-title: 7rem;
    }

    /* Landing page */

    .introduction--titles-container {
        text-align: center;
    }

    .bande-annonce--outer-container--title,
    .chefs--outer-container--title {
        width: calc(calc(var(--grid-col-width) * 8) + calc(var(--grid-gutter) * 7));
    }

    .introduction--buttons-container .btn,
    .achat-code--inner-container .btn {
        padding-top: calc(var(--spacer) * 2);
        padding-bottom: calc(var(--spacer) * 2);
        padding-left: calc(var(--spacer) * 5);
        padding-right: calc(var(--spacer) * 5);
        font-size: 1.3rem;
    }

    .chefs--card-title {
        max-width: 15ch;
    }

    .chefs--card-subtitle .chefs--card-tails-container p {
        padding-right: calc(var(--spacer) * 2);
        padding-left: calc(var(--spacer) * 2);
    }

    /* Page du documentaire */
    .documentaire--inner-container {
        padding-top: calc(var(--spacer) * 8);
    }

    .documentaire--title {
        font-size: var(--font-title);
    }

    .documentaire--utils-inner-container > div > figure {
        padding-top: calc(var(--spacer) * 4);
        padding-right: calc(var(--spacer) * 4);
        padding-bottom: calc(var(--spacer) * 4);
        padding-left: calc(var(--spacer) * 4);
    }
}
@media screen and (max-width: 1023px) {
    .grid-12,
    .grid-11,
    .grid-10,
    .grid-9,
    .grid-8,
    .grid-7,
    .grid-6,
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2,
    .grid-2,
    .grid-11 {
        --grid-width: calc(
            calc(var(--grid-col-width) * var(--grid-col-number)) +
                calc(var(--grid-gutter) * calc(var(--grid-col-number) - 1))
        );
        width: var(--grid-width);
        max-width: 100%;
    }

    /* Containers globaux */
    .container-marked::before,
    .container-marked::after {
        top: calc(var(--spacer) * 2);
    }

    .container-marked::before {
        left: calc(var(--spacer) * 2);
    }

    .container-marked::after {
        right: calc(var(--spacer) * 2);
    }

    .footer-socials-link {
        width: 32px;
        height: 32px;
    }

    /* Autres */
    .separation-before-8::before,
    .separation-after-8::after {
        height: calc(var(--spacer) * 5);
    }

    /* Boutons */
    .btn:not(.btn-sticky) {
        font-size: 1.3rem;
        line-height: 1.36em;
        padding-top: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
        /* padding-left: calc(var(--spacer) * 9);
        padding-right: calc(var(--spacer) * 9); */
    }

    .btn-pause,
    .btn-play {
        width: 40px;
        height: 40px;
    }

    .btn-pause {
        background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-pause-mob.svg');
    }

    .btn-play {
        background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-play-mob.svg');
    }

    .btn-pause:hover,
    .btn-pause:focus {
        background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-pause-hover-mob.svg');
    }

    .btn-play:hover,
    .btn-play:focus {
        background-image: url('https://www.cite-sciences.fr/evolutionsindustrielles/paradoxe-au-village/img/svg/icon-play-hover-mob.svg');
    }

    /* Landing page */
    body.page-sas {
        line-height: 1.45em;
    }

    .introduction--inner-container {
        padding-top: calc(var(--spacer) * 2);
        flex-direction: column;
        align-items: flex-start;
        min-height: unset;
    }

    #logo {
        margin-bottom: calc(var(--spacer) * 3);
        position: initial;
        width: 60px;
        height: 60px;
    }

    .introduction-container {
        overflow: hidden;
    }

    .introduction--subtitle,
    .introduction--suptitle {
        line-height: 1.36em;
    }

    .introduction--titles-container {
        padding-top: calc(var(--spacer) * 8);
        padding-bottom: calc(var(--spacer) * 8);
        text-align: center;
    }

    .introduction--title,
    .connexion--title {
        line-height: 1.34em;
    }

    .introduction--buttons-container {
        gap: var(--spacer);
    }

    .btn-pause,
    .btn-play {
        position: initial;
        margin-left: auto;
    }

    .bande-annonce--inner-container p {
        font-size: 1.5rem;
        max-width: 80ch;
    }

    .bande-annonce--inner-container p.pb-5 {
        padding-bottom: calc(var(--spacer) * 2);
    }

    .bande-annonce--outer-container--title,
    .chefs--outer-container--title,
    .a-propos--inner-container--title {
        width: calc(calc(var(--grid-col-width) * 8) + calc(var(--grid-gutter) * 7));
        font-size: 4rem;
        line-height: 1.33em;
    }

    .bande-annonce--title {
        font-family: 'Amatic SC', cursive;
        font-weight: 700;
        font-size: 2.5rem;
        line-height: 1.27em;
        color: var(--clr-white);
    }

    .bande-annonce--iframe-outer-container {
        width: 100%;
        padding-top: 0;
    }

    #bandeAnnonceTranscriptionButton {
        margin-right: calc(var(--spacer) * 2);
        margin-bottom: calc(var(--spacer) * 2);
    }

    .grid-container--2cols,
    .grid-container--3cols,
    .grid-container--4cols {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Cards 27/01/2022 */
    .chefs--card-heads-container {
        display: flex;
        align-items: center;
    }

    .chefs--card-heads-container > figure {
        flex-grow: 1;
    }

    .chefs--card-tails-title::after {
        margin-bottom: 0;
    }

    .chefs--card figure {
        padding: 0;
        padding-top: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
    }

    .chefs--card-title,
    .chefs--card-tails-title {
        font-size: 4rem;
        line-height: 1.15em;
    }

    .chefs--card-title--container .separation-left-auto,
    .chefs--card-title--container .separation-right-auto {
        margin-top: calc(1.3rem / 2);
    }

    .chefs--card-subtitle,
    .chefs--card-tails-container p {
        padding-right: calc(var(--spacer) * 2);
        padding-left: calc(var(--spacer) * 2);
        font-size: 1.5rem;
        line-height: 1.45em;
    }

    .achat-code--outer-container {
        padding-top: calc(var(--spacer) * 6);
        padding-bottom: calc(var(--spacer) * 6);
    }

    .achat-code--inner-container {
        text-align: center;
    }

    .achat-code--title {
        font-size: 1.8rem;
        line-height: 1.8em;
    }

    .achat-code--inner-container .btn {
        display: inline-block;
        width: auto;
    }

    .comment-ca-marche--title {
        max-width: 30ch;
        font-size: 3rem;
        line-height: 1.25em;
    }

    .comment-ca-marche--card {
        padding: calc(var(--spacer) * 6) calc(var(--spacer) * 2) calc(var(--spacer) * 4);
    }

    .comment-ca-marche--card-title {
        font-size: 2.4rem;
        line-height: 1.16em;
    }

    .footer--inner-container {
        padding: calc(var(--spacer) * 2) 0;
        gap: calc(var(--spacer) * 4);
    }

    .footer--inner-container,
    .footer-links--container ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links--container li {
        padding-right: 0;
        padding-bottom: var(--spacer);
        padding-left: 0;
        border: 0;
    }

    .footer-links--container li:last-child {
        padding-bottom: 0;
    }

    /* Page de connexion */
    .btn-retour,
    .btn-contact {
        padding-top: var(--spacer);
        padding-right: calc(var(--spacer) * 2);
        padding-bottom: var(--spacer);
        padding-left: calc(var(--spacer) * 2);
        min-height: calc(var(--spacer) * 5);
    }

    .btn-contact.btn-icon-before::before {
        width: 16px;
        height: 16px;
    }

    .connexion--outer-container {
        background-size: 1250px;
        background-position: center;
    }

    .connexion--inner-container {
        min-height: initial;
        padding-top: calc(var(--spacer) * 9);
        padding-bottom: calc(var(--spacer) * 9);
        overflow: hidden;
    }

    .connexion-container {
        width: calc(calc(var(--grid-col-width) * 6) + calc(var(--grid-gutter) * 5));
    }

    .connexion--form-container {
        width: 100%;
        margin-top: 0;
        padding-top: calc(var(--spacer) * 7);
        padding-right: calc(var(--spacer) * 2);
        padding-bottom: calc(var(--spacer) * 4);
        padding-left: calc(var(--spacer) * 2);
    }

    input[type='text'] {
        padding-top: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
    }

    input[type='submit'] {
        font-family: 'Gordita Regular';
        font-size: 1rem;
        line-height: 1.4em;
    }

    .connexion--form-container a {
        margin-bottom: 0;
    }

    /* Page documentaire */
    .documentaire--outer-container {
        padding-bottom: calc(var(--spacer) * 4);
    }

    .icon-timer {
        padding-top: var(--spacer);
        padding-right: calc(var(--spacer) * 2);
        padding-bottom: var(--spacer);
        padding-left: calc(var(--spacer) * 2);
        min-height: calc(var(--spacer) * 5);
        font-size: 17px;
    }

    .icon-timer.icon-before::before {
        width: 16px;
        height: 16px;
    }

    .documentaire--title-container {
        margin-top: calc(var(--spacer) * 1);
        margin-bottom: calc(var(--spacer) * 3);
    }

    .documentaire--title {
        font-size: var(--font-title);
        line-height: 1.34em;
    }

    .documentaire--subtitle-container {
        max-width: 70%;
    }

    .documentaire--subtitle {
        font-size: 1.3rem;
        line-height: 1.3em;
    }

    .documentaire--iframe-outer-container {
        padding-top: calc(var(--spacer) * 7);
        padding-right: calc(var(--spacer) * 2);
        padding-bottom: calc(var(--spacer) * 3);
        padding-left: calc(var(--spacer) * 2);
    }

    .documentaire--iframe-outer-container.container-marked::before,
    .documentaire--iframe-outer-container.container-marked::after {
        width: 8px;
        height: 8px;
        top: calc(var(--spacer) * 3);
    }

    .documentaire--iframe-outer-container.container-marked::before {
        left: calc(var(--spacer) * 2);
    }

    .documentaire--iframe-outer-container.container-marked::after {
        right: calc(var(--spacer) * 2);
    }

    .documentaire--iframe-inner-container {
        width: 100%;
    }

    .documentaire--iframe-outer-container > .container-marked {
        margin-top: calc(var(--spacer) * 3);
        min-height: 8px;
    }

    .documentaire--iframe-outer-container > .container-marked::before,
    .documentaire--iframe-outer-container > .container-marked::after {
        width: 8px;
        height: 8px;
        top: 0;
    }

    .documentaire--iframe-outer-container > .container-marked::before {
        left: var(--spacer);
    }

    .documentaire--iframe-outer-container > .container-marked::after {
        right: var(--spacer);
    }

    .documentaire--iframe-tools-outer-container {
        width: 100%;
        padding-right: calc(var(--spacer) * 2);
        padding-left: calc(var(--spacer) * 2);
    }

    .documentaire--utils-outer-container {
        padding-top: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
    }

    .documentaire--utils-inner-container > div {
        align-items: flex-end;
    }

    .documentaire--utils-inner-container > div > figure {
        flex-direction: column;
        gap: calc(var(--spacer) * 3);
        padding-top: calc(var(--spacer) * 3);
        padding-right: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
        padding-left: calc(var(--spacer) * 3);
    }

    .documentaire--utils-inner-container > div > figure > img {
        max-width: 150px;
    }

    .documentaire--utils-title {
        font-size: 1.5rem;
        line-height: 1.6em;
    }

    .documentaire--utils-inner-container > div > figure > figcaption .btn {
        width: 100%;
    }

    /* Page edito */
    .introduction-edito--title {
        font-size: 1.8rem;
        line-height: 1.78em;
    }

    .introduction-edito--outer-container {
        background-size: 1000px;
    }

    .introduction-edito--inner-container {
        min-height: initial;
        padding-top: calc(var(--spacer) * 9);
        padding-bottom: calc(var(--spacer) * 9);
    }

    .edito--outer-container {
        padding-top: calc(var(--spacer) * 3);
        padding-bottom: calc(var(--spacer) * 3);
    }

    .introduction-edito--title,
    .introduction-edito--text,
    .edito--inner-container {
        max-width: 80ch;
    }

    .edito--title {
        font-size: 1.8rem;
        line-height: 1.33em;
    }

    .edito--subtitle {
        font-size: 1.5rem;
        line-height: 1.2em;
    }

    .edito--text.mb-6,
    hr.mb-6 {
        margin-bottom: calc(var(--spacer) * 3);
    }
}
@media screen and (max-width: 767px) {
    /* Landing Page */
    .bande-annonce--inner-container p {
        max-width: unset;
    }

    .bande-annonce--outer-container--title,
    .chefs--outer-container--title,
    .infos-pratiques--title,
    .a-propos--inner-container--title {
        font-size: 4rem;
        line-height: 1.39em;
    }

    .achat-code--inner-container .btn {
        font-size: 1rem;
        line-height: 1.4em;
    }

    .comment-ca-marche--title {
        font-size: 2.3rem;
        line-height: 1.39em;
    }

    .introduction--buttons-container {
        flex-direction: column;
        transform: translateY(calc(-1 * calc(calc(var(--spacer) * 2) + 7px)));
    }

    .introduction--buttons-container .btn {
        font-size: 1rem;
        line-height: 1.4em;
    }

    /* Page édito */
    .introduction-edito--text {
        max-width: 100%;
    }

    /* Popin */
    .popin--subtitle {
        font-size: 1.8rem;
    }

    .popin--contact {
        width: 100%;
        max-width: inherit;
    }

    .popin--contact .popin--text.mx-8 {
        margin-right: calc(var(--spacer) * 4);
        margin-left: calc(var(--spacer) * 4);
    }
}
@media screen and (max-width: 600px) {
    :root {
        --font-title: 4.4rem;
        --font-subtitle: 1.2rem;
        --font-size: 1.5rem;
        --font-lh: 1.5em;
        --grid-col-width: 65px;
        --grid-gutter: 15px;
        --grid-col-number: 4;
    }

    /* Global */
    .popin--inner-container {
        width: calc(100% - calc(var(--spacer) * 4));
    }

    .popin--contact.popin--inner-container {
        width: 100%;
    }

    .grid-container--2cols,
    .grid-container--3cols,
    .grid-container--4cols {
        grid-template-columns: initial;
    }

    .documentaire--utils-inner-container > div > figure > * {
        width: 100%;
    }

    .documentaire--utils-inner-container > div > figure > figcaption .btn {
        text-align: left;
    }

    .bande-annonce--outer-container--title,
    .chefs--outer-container--title,
    .a-propos--inner-container--title {
        width: var(--grid-width);
    }

    .infos-pratiques--title {
        width: fit-content;
        width: -moz-fit-content;
    }

    .chefs--card figure img {
        max-height: 250px;
        width: auto;
    }

    /* Documentaire */
    .documentaire--subtitle-container {
        max-width: 80%;
    }
}
@media screen and (max-width: 479px) {
    :root {
        --font-title: 4.4rem;
        --font-subtitle: 1.2rem;
        --font-size: 1.2rem;
        --font-lh: 1.5em;
        --grid-col-width: 65px;
        --grid-gutter: 15px;
        --grid-col-number: 4;
    }

    .achat-code--title {
        font-size: 1.3rem;
        line-height: 1.8em;
    }
}

/* Changement du titre de dernière minute - bonjour si vous me lisez */
@media screen and (max-width: 1329px) {
    .introduction--title {
        font-size: 4.2rem;
    }
}
@media screen and (max-width: 767px) {
    .introduction--subtitle {
        flex: 1 1 80%;
    }
}
@media screen and (max-width: 600px) {
    .introduction--title {
        padding-left: calc(var(--spacer) * 2);
        padding-right: calc(var(--spacer) * 2);
        font-size: 4.2rem;
    }
}
@media screen and (max-width: 479px) {
    .introduction--title {
        font-size: 3.4rem;
    }
}

/* Ajout de la vidéo en background */
@media screen and (max-width: 1023px) {
    .btn-pause,
    .btn-play {
        position: absolute;
    }

    .introduction-container {
        margin-bottom: 50px;
    }
}

/* CSS pour l'affichage du RWD */
.a-propos--outer-container {
    background-position: bottom center;
}

@media screen and (max-width: 1024px) {
    .bande-annonce--title-container h3,
    .infos-pratiques--title-container h3,
    .comment-ca-marche--inner-container h2 {
        font-size: 2.8rem;
        line-height: 1.25em;
    }

    .bande-annonce--iframe-outer-container {
        padding-top: calc(var(--spacer) * 6);
        padding-bottom: calc(var(--spacer) * 8);
    }

    .infos-pratiques--liste > li {
        flex: 1 1 33%;
    }

    .a-propos--outer-container {
        min-height: 800px;
    }

    .a-propos--inner-container {
        padding-top: calc(var(--spacer) * 10);
    }

    .a-propos--inner-container p {
        max-width: 80ch;
    }

    .a-propos--inner-container--title {
        margin-bottom: calc(var(--spacer) * 4);
    }

    .comment-ca-marche--outer-container {
        padding-bottom: calc(var(--spacer) * 30);
    }
}

@media screen and (max-width: 768px) {
    .a-propos--inner-container {
        padding-top: calc(var(--spacer) * 12);
    }

    .a-propos--outer-container {
        min-height: 900px;
    }
}

@media screen and (max-width: 600px) {
    .infos-pratiques--liste > li {
        flex: 1 1 50%;
    }

    .a-propos--inner-container {
        padding-top: calc(var(--spacer) * 10);
    }
}

@media screen and (max-width: 450px) {
    .a-propos--outer-container {
        min-height: 1000px;
    }
}

@media screen and (max-width: 380px) {
    /* Introduction */
    .container-outline,
    .achat-code--inner-container .container-outline {
        padding: var(--spacer);
        margin: 0;
    }

    .bande-annonce--outer-container--title,
    .chefs--outer-container--title,
    .infos-pratiques--title,
    .a-propos--inner-container--title {
        font-size: 3rem;
        line-height: 1.33em;
    }

    .bande-annonce--title-container h3,
    .infos-pratiques--title-container h3,
    .comment-ca-marche--inner-container h2 {
        white-space: nowrap;
    }

    .bande-annonce--title-container h3::before,
    .infos-pratiques--title-container h3::before,
    .comment-ca-marche--inner-container h2::before {
        left: -30px;
    }

    .bande-annonce--title-container h3::after,
    .infos-pratiques--title-container h3::after,
    .comment-ca-marche--inner-container h2::after {
        right: -30px;
    }

    .bande-annonce--title-container h3::before,
    .infos-pratiques--title-container h3::before,
    .comment-ca-marche--inner-container h2::before,
    .bande-annonce--title-container h3::after,
    .infos-pratiques--title-container h3::after,
    .comment-ca-marche--inner-container h2::after {
        width: 50px;
    }

    .infos-pratiques--liste > li {
        flex: 1 1 50%;
    }
}

/* Gestion des corner strat A propos du paradoxe de Jevons */
@media screen and (max-width: 1024px) {
    .a-propos--outer-container::before,
    .a-propos--outer-container::after {
        width: 230px;
        height: 130px;
    }
}

@media screen and (max-width: 600px) {
    .a-propos--outer-container::before,
    .a-propos--outer-container::after {
        width: 150px;
        height: 85px;
    }
}

/* Responsive des chataigne dans les containers */
@media screen and (max-width: 380px) {
    .introduction-container .container-outline::before,
    .introduction-container .container-outline::after,
    .achat-code--inner-container::before,
    .achat-code--inner-container::after,
    .achat-code--inner-container .container-outline::before,
    .achat-code--inner-container .container-outline::after {
        min-width: 33px;
        min-height: 33px;
        background-size: 15px;
    }

    .container-outline,
    .achat-code--inner-container {
        padding: calc(var(--spacer) * 2);
    }
}

.infos-pratiques--asterisques {
    padding: calc(var(--spacer) * 4) 0;
    width: 80%;
    border-top: 1px solid var(--clr-border);
    margin: 0 auto;
}