@font-face {
    font-family: "A2 Regular";
    src: 	url("../fonts/regular.eot") format("eot"),
            url("../fonts/regular.svg") format("svg"),
            url("../fonts/regular.ttf") format("ttf"),
            url("../fonts/regular.woff") format("woff");
}

@font-face {
    font-family: "A2 Regular Bold";
    src: 	url("../fonts/bold.eot") format("eot"),
            url("../fonts/bold.svg") format("svg"),
            url("../fonts/bold.ttf") format("ttf"),
            url("../fonts/bold.woff") format("woff");
}

@font-face {
    font-family: "A2 Regular Italic";
    src: 	url("../fonts/italic.eot") format("eot"),
            url("../fonts/italic.svg") format("svg"),
            url("../fonts/italic.ttf") format("ttf"),
            url("../fonts/italic.woff") format("woff");
}
   
/*
font-family: 'Nanum Pen Script', cursive;
font-family: 'Neucha', cursive;
*/
   
/* ToDo rename les class .grid en .col- */
/* Variables */
:root {
    --clr-bkg: #FAF9F7;
    --clr-primary: #0B687C;
    --clr-primary-hover: #174B57;
    --clr-primary-disabled: rgba(11, 104, 124, .5);
    --clr-secondary: #C44D3E;
    /*--clr-secondary-hover: #04252F;*/
    --clr-tertiary: #09174A;
    /*--clr-tertiary-hover: none;*/
    --clr-txt-primary: #18272C;
    --clr-txt-secondary: #04184D;
    --clr-txt-disabled:#000;
    --clr-border: #e5edf0;
    --clr-border-intro: #888888;
    --clr-border-focus: #FFF;
    --clr-border-error: #E44539;
    --clr-white: #FFF;
    --clr-dark: #000;
    --font-title: 11.5rem;
    --font-subtitle: 2.3rem;
    --font-section-title-xl: 6.9rem;
    --font-section-title-l: 5.5rem;
    --font-subsection-title: 3.1rem;
    --font-size: 1.6rem;
    --font-lh: 1.5em;
    --grid-col-width: 100px;
    --grid-gutter: 10px;
    --grid-col-number: 12;
    --spacer: 8px;
    --spacer-neg: -8px;
    --anim-duration: .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: 'A2 Regular Bold';
    font-weight: 700;
}

.ft-italic {
    font-family: 'A2 Regular Italic';
    font-style: italic;
}

.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; }
.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; }
.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: 'Neucha', cursive;
    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,
footer button {
    box-shadow: 0 1.5px 0 0 var(--clr-white);
    cursor: pointer;
}

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

.page-sas .introduction-container {
    --img-intro-width: 100%;
    --img-intro-haut: 0;
    --img-intro-bas: 0;
    position: relative;
    padding-bottom: var(--img-border-height);
    max-width: 100%;
}

.page-sas .introduction-container::before,
.page-sas .introduction-container::after {
    content: '';
    display: block;
    width: var(--img-intro-width);
    max-width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

.page-sas .introduction-container::before {
    height: var(--img-intro-haut);
    margin-bottom: -1px;
    background-image: url('../img/png/intro-haut.png');
}

.page-sas .introduction-container::after {
    height: var(--img-intro-bas);
    background-image: url('../img/png/intro-bas.png');
    margin-top: -1px;
}

.page-sas .introduction-container .container-bordered {
    position: relative;
    padding: calc(var(--spacer) * 4) calc(var(--spacer) * 2);
    background-color: var(--clr-bkg);
    border: 0;
}

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

.introduction--title {
    display: inline-block;
    font-family: 'Nanum Pen Script', cursive;
    font-weight: 400;
    font-size: var(--font-title);
    line-height: 0.8em;
    text-align: center;
    text-transform: uppercase;
    color : var(--clr-primary);
    letter-spacing: -2.3px;
}

.introduction--subtitle-container {
    display: flex; 
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacer) * 3);
}

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

.introduction--suptitle-before,
.introduction--suptitle-after,
.introduction--subtitle-before,
.introduction--subtitle-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 {
    font-size: var(--font-subtitle);
    line-height: 1.3em;
    font-weight: 400;
    color: var(--clr-primary);
    letter-spacing: 2.3px;
    max-width: 40ch;
}

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

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

.presentation--title {
    color: var(--clr-primary);
    font-style: normal;
    font-size: var(--font-section-title-xl);
    line-height: 1.15em;
}

.bande-annonce--video--outer-container {
    background: #FFF;
    background-image: url("../img/png/bande-annonce-background.png");
    background-size: 95%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bande-annonce--video-inner-container.container-bordered {
    border-bottom: 0 !important;
}

.bande-annonce--title-container,
.infos-pratiques--title-container {
    position:absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: max-content;
    width: -webkit-max-content;
    width: -moz-max-content;
}

h3.bande-annonce--title,
h3.infos-pratiques--title {
    --img-banner-width: 34px;
    --img-banner-height: 66;
    display: flex;
    flex-direction: row;
    position: relative;
}

h3.bande-annonce--title > *,
h3.infos-pratiques--title > * {
    flex: 1 1 var(--img-banner-width);
}

h3.bande-annonce--title span,
h3.infos-pratiques--title span {
    padding-top: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 2);
    padding-left: calc(var(--spacer) * 4);
    background-color: var(--clr-secondary);
    color: var(--clr-white);
    font-size: var(--font-subsection-title);
    line-height: 1.25em;
}

h3.bande-annonce--title::before,
h3.infos-pratiques--title::before,
h3.bande-annonce--title::after,
h3.infos-pratiques--title::after {
    content: '';
    display: block;
    background-image: url("../img/svg/bandeau-side.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: var(--img-banner-width);
    height: var(--img-banner-height);
    max-height: 100%;
}

h3.bande-annonce--title::before,
h3.infos-pratiques--title::before {
    margin-right: -2px;
}
    
h3.bande-annonce--title::after,
h3.infos-pratiques--title::after {
    margin-left: -2px;
    transform: rotateY(180deg);
}

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

.presentation--inner-container p {
    font-size: 1.6rem;
    line-height: 2em;
    max-width: 70ch;
}

.infos-pratique--inner-container hr {
    width: 90%;
}

.infos-pratiques--liste {
    display: flex;
    flex-wrap: wrap;
}

.infos-pratiques--item {
    flex: 0 1 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: 'A2 Regular Bold';
    font-weight: 700;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.infos-pratiques--container .btn {
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--spacer) * 4);
    padding-bottom: calc(var(--spacer) * 4);
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
}

.debut-partie--title,
.presentation-concept--title {
    font-size: var(--font-subsection-title);
    line-height: 1.30em;
    color: var(--clr-primary);
}

.presentation-concept--title {
    margin-left: auto;
    margin-right: auto;
    max-width: 21ch;
}

.popin--title {
    font-size: 1.5rem;
    line-height: 1.2em;
    color: var(--clr-white);
}

.popin--subtitle {
    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;
}

/* Buttons */
.btn {
    display: block;
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 2.4px;
    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-primary);
    color: var(--clr-white);
    border-color: var(--clr-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--clr-primary-hover);
    border-color: var(--clr-primary-hover);
}

.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;
    transition: unset;
}

.btn-primary[disabled]:hover,
.btn-primary.disabled:hover,
.btn-primary[disabled]:focus,
.btn-primary.disabled:focus {
    box-shadow: unset;
    transform: unset;
}

.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);
}

.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('../img/svg/arrow-up-rounded.svg');
    background-size: cover;
    opacity: 0;
    z-index: 100;
    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('../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;
}

/* 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 {
    --img-border-width: 100%;
    --img-border-height: 121px;
    position: relative;
    background-image: url('../img/png/background-intro.png');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--clr-border);
}

.introduction--outer-container::after {
    content: '';
    position: absolute; 
    bottom: 0;
    transform: translateY(2px);
    left: 0;
    display: block;
    width: var(--img-border-width);
    height: var(--img-border-height);
    background-image: url("../img/png/bordure-haut.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.introduction--inner-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(1000vh, calc(933px + var(--img-border-height)));
}

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

.bande-annonce--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);
}

/* Présentation containers */
.presentation-concept--container {
    position: relative;
    border-top: 2px solid var(--clr-border);
    border-bottom: 2px solid var(--clr-border);
    padding-top: calc(var(--spacer) * 9);
    padding-bottom: calc(var(--spacer) * 9);
    margin-top: calc(var(--spacer) * 8);
    margin-bottom: calc(var(--spacer) * 20);
}

.presentation-concept--container::before,
.presentation-concept--container::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 138px;
    background-image: url('../img/svg/presentation-border.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: -1;
}

.presentation-concept--container::before {
    top: 0;
    transform: translateY(-100%);
}

.presentation-concept--container::after {
    bottom: 0;
    transform: rotate(-180deg) translateY(-100%);
}

.presentation-concept--container ul {
    display: flex;
    flex-direction: row;
}

.presentation-concept--container ul > li {
    flex: 1 1 50%;
    padding-left: calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 3);
    text-align: center;
}

.presentation-concept--container ul > li figure {
    position: relative;
}

.presentation-concept--container ul > li img {
    margin-left: auto;
    margin-right: auto;
}

.presentation-concept--container ul > li figcaption {
    --img-banner-width: 34px;
    --img-banner-height: 66;
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
}

.presentation-concept--container ul > li figcaption span {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
    background-color: var(--clr-secondary);
    color: var(--clr-white);
    font-size: var(--font-subsection-title);
    line-height: 1.125em;
}

.presentation-concept--container ul > li figcaption > * {
    flex: 1 1 var(--img-banner-width);
}

.presentation-concept--container ul > li figcaption::before,
.presentation-concept--container ul > li figcaption::after {
    content: '';
    background-image: url('../img/svg/bandeau-side.svg');
    background-repeat: no-repeat;
    background-position: center right;
    width: var(--img-banner-width);
    height: var(--img-banner-height);
    max-height: 100%;
}

.presentation-concept--container ul > li figcaption::before {
    margin-right: -2px;
}

.presentation-concept--container ul > li figcaption::after {
    margin-left: -2px;
    transform: rotateY(180deg);
}

.presentation-concept--container ul > li p {
    margin-top: calc(var(--spacer) * 4);
}

/* Bande Annonce containers */
.infos-pratiques--container {
    position: relative;
}

.bande-annonce--video-inner-container::before,
.infos-pratiques--container::after {
    content: '';
    display: block;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.bande-annonce--video-inner-container::before {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    height: 93px;
    background-image: url("../img/png/bande-annonce-haut.png");
    background-position: center bottom;
}

.infos-pratiques--container::after {
    position: relative;
    bottom: 0;
    transform: translateY(calc(-1 * calc(var(--spacer) * 3)));
    height: 80px;
    background-image: url("../img/png/bande-annonce-bas.png");
    background-position: center top;
}

.infos-pratiques--achat-container {
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
    max-width: 430px !important;
}

/* Accompagnement container */
.accompagnement--outer-container {
    --img-border-width: 100%;
    --img-border-height: 121px;
    position: relative; 
    background-image: url("../img/png/accompagnement-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.accompagnement--outer-container::before,
.accompagnement--outer-container::after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: var(--img-border-width);
    height: var(--img-border-height);
    background-size: contain;
    background-repeat: no-repeat;
}

.accompagnement--outer-container::before {
    top: 0;
    background-image: url("../img/png/bordure-bas.png");
}

.accompagnement--outer-container::after {
    bottom: 0;
    transform: translateY(2px);
    background-image: url("../img/png/bordure-haut.png");
}

.accompagnement--inner-container {
    --img-accompagnement-width: 100%;
    --img-accompagnement-haut: 0;
    --img-accompagnement-bas: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.accompagnement--inner-container .grid-8 {
    padding: calc(var(--spacer) * 2);
    background-color: var(--clr-bkg);
}

.accompagnement--inner-container::before,
.accompagnement--inner-container::after {
    content: '';
    display: block;
    width: var(--img-accompagnement-width);
    height: 79px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.accompagnement--inner-container::before {
    height: var(--img-accompagnement-haut);
    background-image: url("../img/png/accompagnement-border-haut-2.png");
    margin-bottom: -1px;
}

.accompagnement--inner-container::after {
    height: var(--img-accompagnement-haut);
    background-image: url("../img/png/accompagnement-border-bas-2.png");
    margin-top: -1px;
}

.accompagnement--inner-container--title {
    max-width: 21ch;
    font-size: var(--font-section-title-l);
    line-height: 1.31em;
    color: var(--clr-primary);
    text-align: center; 
}

.accompagnement--inner-container p {
    line-height: 2.0em;
    text-align: center;
}

/* Personnages container */
.personnages--inner-container--title {
    position: relative;
}

.personnages--inner-container--title h2 {
    margin-top: calc(-1 * calc(var(--spacer) * 3));
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-section-title-xl);
    line-height: 1.15em;
    color: var(--clr-primary);
}

.personnages--list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--spacer) * 3);
    margin-top: calc(-1 * calc(var(--spacer) * 16));
}

.personnages--list li {
    flex: 0 0 calc(50% - calc(calc(var(--spacer) * 3) / 2));
}

.personnages--list > li button {
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.personnages--list > li figure {
    position: relative;
}

.personnages--list > li figure::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../img/png/personnages-bordures-vertical.png");
    background-size: cover; 
    background-position: center;
    z-index: 5;
}

.personnages--list > li figure div {
    clip-path: polygon(6% 4%, 94% 5%, 94% 94%, 7% 94%);
}

.personnages--list > li button figure img {
    transform: scale(.9);
    transition: transform .25s ease-in-out; 
}

.personnages--list > li button:hover figure img,
.personnages--list > li button:focus figure img {
    transform: scale(1.15);
}

.personnages--list > li figcaption {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 60%;
    text-align: center;
    z-index: 10;
}

.personnages--list > li figcaption span {
    padding-top: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 2);
    background-color: var(--clr-secondary);
    color: var(--clr-white);
    font-size: 3.2rem;
    line-height: 1.125em;
}

.personnages--list > li figcaption > * {
    flex: 1 1 auto;
}

.personnages--list > li figcaption::before,
.personnages--list > li figcaption::after {
    content: '';
    background-image: url('../img/svg/bandeau-side.svg');
    width: 34px;
    min-height: 100%;
}

.personnages--list > li figcaption::before {
    margin-right: -1px;
}

.personnages--list > li figcaption::after {
    margin-left: -1px;
    transform: rotateY(180deg);
}

/* Debut partie container */
.debut-partie--outer-container {
    --img-border-width: 100%;
    --img-border-height: 121px;
    position: relative; 
    background-image: url("../img/png/background-commencement.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.debut-partie--outer-container::before {
    content: '';
    position: absolute; 
    top: 0;
    left: 0;
    display: block;
    width: var(--img-border-width);
    height: var(--img-border-height);
    background-image: url("../img/png/bordure-bas.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.debut-partie--inner-container {
    --img-accompagnement-width: 100%;
    --img-accompagnement-haut: 0;
    --img-accompagnement-bas: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.debut-partie--inner-container .grid-8 {
    background-color: var(--clr-bkg);
    padding-left: calc(var(--spacer) * 2);
    padding-right: calc(var(--spacer) * 2);
}

.debut-partie--inner-container::before,
.debut-partie--inner-container::after {
    content: '';
    display: block;
    width: var(--img-accompagnement-width);
    height: 79px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.debut-partie--inner-container::before {
    height: var(--img-accompagnement-haut);
    background-image: url("../img/png/accompagnement-border-haut-2.png");
    margin-bottom: -1px;
}

.debut-partie--inner-container::after {
    height: var(--img-accompagnement-bas);
    background-image: url("../img/png/accompagnement-border-bas-2.png");
    margin-top: -1px;
}

/* Footer global container */
footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(var(--spacer) * 15);
    background-color: var(--clr-primary-hover);
    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: .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('../img/svg/icon-rs-instagram.svg');
}

.footer-socials-link--instagram:hover,
.footer-socials-link--instagram:focus {
    background-image: url('../img/svg/icon-rs-instagram-hover.svg');
}

.footer-socials-link--twitter {
    background-image: url('../img/svg/icon-rs-twitter.svg');
}

.footer-socials-link--twitter:hover,
.footer-socials-link--twitter:focus {
    background-image: url('../img/svg/icon-rs-twitter-hover.svg');
}

.footer-socials-link--facebook {
    background-image: url('../img/svg/icon-rs-facebook.svg');
}

.footer-socials-link--facebook:hover,
.footer-socials-link--facebook:focus {
    background-image: url('../img/svg/icon-rs-facebook-hover.svg');
}

/* Credits */
.credits--logo {
    height: 121px; 
}

/* Iframe et vidéo */
#bandeAnnonceTranscriptionButton {
    box-shadow: inset 0 -1.5px 0 -1px 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);
}

#btnContact {
    box-shadow: 0 1.5px 0 0 var(--clr-white);
    color: var(--clr-white);
    cursor: pointer;
    transition: box-shadow var(--anim-duration) var(--anim-timing), color var(--anim-duration) var(--anim-timing);
}

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

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

/* Animation */
a,
footer button {
    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: .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-primary);
}

.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-primary);
    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;
    color: var(--clr-primary);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.container-blue .popin--text {
    background: var(--clr-primary);
    color: var(--clr-white);
}

.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('../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('../img/svg/icon-close-hover.svg');
}

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

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

/* 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: .4;
}

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

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