:root {
    --theme-rounded: 0;
    --error-color: #dc3545;
}

*,
::before,
::after {
    --radius: initial;
    --is-rounded: initial;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    z-index: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
    text-wrap-style: pretty;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-wrap-style: balance;
}

p {
    margin: 0;
}

a,
button,
input,
[icon] {
    -webkit-tap-highlight-color: transparent;
    transition: all 0.25s ease-in-out;
}

a {
    color: inherit;
    text-decoration: none;
}

input[type="button"],
input[type="submit"] {
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav {
    -webkit-user-select: none;
    user-select: none;
}

.error,
.error::placeholder {
    color: var(--error-color);
}

.container {
    margin: 0 auto;
    width: min(90%, 1550px);
}

.text-nowrap {
    white-space: no-wrap;
}

.scroll-watcher {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    width: 0%;
    background-color: var(--scroll-watcher-color, var(--theme-color, #000));
}

@supports (animation-timeline: scroll()) {
    .scroll-watcher {
        animation: scroll-watcher linear;
        animation-timeline: scroll();
    }

    @keyframes scroll-watcher {
        to {
            width: 100%;
        }
    }
}

/* =====[ Utility bar ]================================================= */

header .utility-bar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--14pxrem);
    padding-top: 0.75rem;
}

header .utility-bar li,
header .utility-bar .socials {
    display: contents;
}

header .utility-bar li a {
    color: var(--theme-color, #000);
    font-size: 30px;
}

/* =====[ Client banner ]================================================= */

header .client-banner {
    padding-block: 1rem 1.5rem;
}

header .client-banner .container {
    display: flex;
    column-gap: 2rem;
}

header .client-banner .logos {
    display: flex;
    flex: 1;
    gap: 1rem;
    flex-wrap: wrap;
    margin-inline: auto;
    margin-block: auto;
    width: 100%;
}

header .client-banner .logos .logos-wrapper {
    display: flex;
    justify-content: inherit;
    gap: inherit;
    flex-wrap: wrap;
}

header .client-banner .logos a {
    display: contents;
}

header .client-banner .logos img {
    height: fit-content;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* =====[ Countdown ]================================================= */

header .countdown {
    margin-top: auto;
    margin-inline: auto;
    width: max(50%, 425px);
}

header .countdown h2 {
    margin-bottom: var(--6pxrem);
    font-size: var(--22px);
    font-weight: 400;
}

header .countdown ul {
    --countdown-gap: 2.25rem;
    display: flex;
}

header .countdown li {
    position: relative;
    margin-left: var(--countdown-gap);
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--13px);
    text-align: center;
    text-transform: capitalize;
}

header .countdown li:first-child {
    margin-left: unset;
}

header .countdown li span {
    position: relative;
    display: block;
    margin-top: var(--2pxrem);
    padding-block: var(--6pxrem) var(--4pxrem);
    background-color: #f4f4f4;
    font-size: var(--22px);
    font-weight: 600;
}

header .countdown li:not(:last-child) span::after {
    content: ":";
    position: absolute;
    top: 50%;
    right: calc(var(--countdown-gap) * -1);
    width: var(--countdown-gap);
    font-family: 'Trebuchet MS', 'Segoe UI', 'Courier New', 'Open Sans', 'Roboto', 'Ubuntu', 'Noto Sans', 'Arial Rounded MT', system-ui, BlinkMacSystemFont, sans-serif;
    font-size: var(--22px);
    line-height: 1;
    font-weight: 600;
    transform: translateY(-50%);
}

/* =====[ Lobby ]================================================= */

.lobby {
    flex: 1;
    padding-block: 4rem;
    min-height: initial;
    background-image: var(--background, none);
    background-color: var(--theme-color, #000);
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
}

.lobby .container {
    display: flex;
    justify-content: space-between;
    row-gap: 0.5rem;
    column-gap: 3.75rem;
}

/* =====[ Event overview ]================================================= */

.event-overview {
    color: #fff;
}

.event-overview .datetime {
    font-size: var(--20px);
}

/* =====[ Event access ]================================================= */

.event-access {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--radius, 10px) * (var(--theme-rounded, 0) * var(--is-rounded, 1)));
    height: fit-content;
    width: min(450px, 100%);
    text-align: center;
    overflow: hidden;
}

.event-access .message,
.event-access .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1.75rem 2rem;
    min-height: 25rem;
    background-color: #fff;
}

.event-access .message {
    text-align: center;
}

/* =====[ Event access - nav tabs ]================================================= */

.event-access .nav-tabs {
    display: flex;
    background-color: #fff;
    color: #000;
    transform: translateZ(0);
}

.event-access .nav-tabs .nav-button {
    flex: 1;
    padding: 1rem 1.25rem;
    background-color: var(--theme-color, #000);
    color: #fff;
    font-size: var(--20px);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.event-access .nav-tabs .nav-button.active {
    color: inherit;
    background-color: inherit;
    opacity: 1;
    cursor: default;
}

.event-access .nav-tabs .nav-button:nth-child(1):not(.active) {
    border-bottom-right-radius: calc(var(--radius, 10px) * (var(--theme-rounded, 0) * var(--is-rounded, 1)));
}

.event-access .nav-tabs .nav-button:nth-child(2):not(.active) {
    border-bottom-left-radius: calc(var(--radius, 10px) * (var(--theme-rounded, 0) * var(--is-rounded, 1)));
}

/* =====[ Event access - nav items ]================================================= */

.event-access .nav-item.hidden {
    display: none;
}

.event-access .nav-item h2 {
    margin-block: 1rem 2rem;
    font-size: var(--26px);
    line-height: 1.15;
    font-weight: 400;
    text-align: center;
}

.event-access .nav-item h2 strong {
    display: block;
    font-size: var(--48px);
    font-weight: 800;
}

.event-access .nav-item .kicked,
.event-access .nav-item .error-message {
    margin-block: -0.5rem 1rem;
    font-size: var(--14px);
    color: var(--error-color);
}

.event-access .nav-item input,
.event-access .nav-item select,
.event-access .nav-item textarea {
    outline: none;
    margin-bottom: var(--10pxrem);
    border-width: var(--2pxrem);
    border-style: solid;
    border-color: #eee;
    border-radius: calc(var(--radius, 5px) * (var(--theme-rounded, 0) * var(--is-rounded, 1)));
    padding: var(--9pxrem) 0.5rem;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.event-access .nav-item select {
    -webkit-appearance: none;
    appearance: none;
    /* %23 = # */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 13.414 8.121'><path stroke='%23000' stroke-width='2' d='m.707.707 6 6 6-6'/></svg>");
    background-color: unset;
    background-position: right var(--10pxrem) center;
    background-size: 0.75em;
    background-repeat: no-repeat;
}

.event-access .nav-item input:not(.error)::placeholder,
.event-access .nav-item select:not(.error),
.event-access .nav-item textarea:not(.error)::placeholder {
    color: var(--input-placeholder-color, #aaa);
}

.event-access .nav-item input,
.event-access .nav-item select.has-value,
.event-access .nav-item textarea {
    color: var(--input-value-color, #000);
}

.event-access .nav-item textarea {
    height: 5.5rem;
    resize: none;
}

.event-access .nav-item select option {
    color: #000;
}

.event-access .nav-item em {
    display: block;
    margin-top: var(--3pxrem);
    font-size: var(--12px);
}

.event-access .nav-item .click-register {
    margin-block: 1rem;
    font-size: var(--18px);
    line-height: 1.2;
}

.event-access .nav-item .click-register input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: auto;
    background-color: unset;
    font-family: inherit;
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.event-access .nav-item input[type="submit"] {
    order: 1;
    margin-block: 1.75rem 0.25rem;
    border: none;
    border-radius: calc(var(--radius, 8px) * (var(--theme-rounded, 0) * var(--is-rounded, 1)));
    padding: 0.5rem 2.5rem;
    width: unset;
    background-color: var(--theme-color, #000);
    font-family: inherit;
    color: #fff;
    font-size: var(--22px);
}

/* =====[ Event access - Message ]================================================= */

.event-access .message .not-available-maintext {
    font-size: var(--38px);
}

.event-access .message .not-available-subtext {
    font-size: var(--20px);
}

.event-access .message .icon {
    margin-block: 1rem 2rem;
    font-size: 58px;
}

.event-access .message .credentials-working,
.event-access .message .not-available-yet {
    margin-block: 0.5rem 0.75rem;
    font-size: var(--24px);
}

.event-access .message .datetime {
    margin-bottom: 0;
    font-size: var(--20px);
}

/* =====[ Add calendar ]================================================= */

.event-access .add-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem;
    width: 100%;
    background-color: var(--theme-color, #000);
    color: #fff;
    font-size: var(--14px);
}

.event-access .add-calendar .icon {
    font-size: var(--28px);
    transition: all 0.25s ease-in-out;
}

/* =====[ Playback - Event banner ]================================================= */

.playback .event-banner {
    padding-block: 1.75rem 1.25rem;
    background-image: var(--video-banner, none);
    background-color: var(--theme-color, #000);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    color: #fff;
}

.playback .event-banner .datetime {
    font-size: var(--20px);
    font-weight: 400;
}

.playback .event-banner .datetime span {
    font-weight: 600;
}

.playback .event-banner .date,
.playback .event-banner .time {
    display: inline-block;
}

.playback .event-banner .date {
    margin-right: 3rem;
}

.playback .event-banner h1 {
    margin-block: 0.75rem 0;
}

/* =====[ Footer ]================================================= */

footer {
    font-family: Arial, Helvetica, sans-serif;
}

footer .supports {
    background-color: #f4f4f4;
}

footer .supports ul {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 1.25rem 0;
    max-width: 600px;
    text-align: center;
}

footer .supports li {
    flex: 1;
    padding: var(--25pxrem) 0;
    font-size: var(--13px);
}

footer .supports a {
    display: block;
    margin: 0 auto;
    width: fit-content;
    color: #000;
}

footer .supports figure {
    margin: 0;
    width: fit-content;
    color: inherit;
}

footer .supports .icon {
    height: var(--50px);
    width: var(--50px);
}

footer .supports figcaption {
    margin-top: 0.5rem;
}

footer .supports .icon,
footer .supports figcaption {
    color: inherit;
    transition: all 0.25s ease-in-out;
}

footer .legal {
    padding: 1.5rem 0;
    background-color: #000;
    color: #fff;
    font-size: var(--13px);
    text-align: center;
}

footer .legal .copyright::before {
    content: "\0020\2013\0020";
}

@media screen and (max-width: 1020px) {
    header .client-banner .container {
        flex-direction: column;
        align-items: center;
    }

    header .client-banner .logos {
        justify-content: center;
    }

    header .countdown {
        margin-top: 1rem;
        width: min(425px, 100%);
        text-align: center;
    }

    .lobby .container {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 575px) {
    header .utility-bar {
        justify-content: center;
    }

    header .utility-bar li a {
        font-size: 36px;
    }

    footer .legal .copyright {
        display: block;
        margin-top: 4px;
    }

    footer .legal .copyright::before {
        content: unset;
    }
}

@media screen and (max-width: 460px) {
    .lobby .container {
        width: 100%;
    }

    .event-overview {
        text-align: center;
    }

    .event-access {
        --is-rounded: 0;
    }
}

@media screen and (max-width: 390px) {
    header .countdown ul {
        --countdown-gap: 16px;
    }

    header .countdown li:not(:last-child) span::after {
        content: "";
    }
}








/* =====[ VARIABLES CSS / COULEURS ]========================================== */

:root {
    --pqm-bleu: #0085eb;
    --pqm-gris-1: #f4f4f4;
    --pqm-gris-2: #eef4f8;
    --pqm-gris-3: #f8f6f7;

    --scroll-watcher-color: var(--pqm-bleu);
}

/* =====[ RESET ]==================================== */

h1,
h2,
h3,
h4,
p,
form,
input,
ul,
li,
label {
    margin: 0;
    padding: 0;
}

body {
    font-family: Muli, Arial, Helvetica, sans-serif;
    line-height: normal;
}

/* =====[ Utility bar ]================================================= */

header {
    background-color: #000;
}

header .utility-bar li a {
    color: #fff;
}

header .utility-bar li a:hover,
header .utility-bar li a.logout {
    color: var(--pqm-bleu);
}

header .utility-bar li a.logout:hover {
    color: var(--pqm-gris-1);
}

/* =====[ Client banner ]================================================= */

header .client-banner {
    color: #fff;
}

header .client-banner .logos img {
    height: var(--62pxrem);
}

/* =====[ Countdown ]================================================= */

header .countdown li span {
    background-color: var(--pqm-gris-1);
    color: #000;
    font-weight: 900;
}

header .countdown li:not(:last-child) span::after {
    color: #fff;
}

/* =====[ Lobby ]================================================= */

.accueil {
    display: flex;
    justify-content: center;

    --bg-height: 1080;
    --bg-width: 1924;
    --bg-min-height: 825px;
    --bg-size: auto max(var(--bg-min-height), 100%, calc(100vw / (var(--bg-width) / var(--bg-height))));

    --bg-clouds-width: 1929px;
    --bg-clouds-size: max(var(--bg-clouds-width), 100%) auto;

    padding: var(--70pxrem) 0;
    min-height: var(--bg-min-height);

    background-image: var(--bg-clouds), var(--background);
    background-size: var(--bg-clouds-size), var(--bg-size);
    background-position: bottom -1px center, center;
    background-repeat: no-repeat;
}

@media screen and (min-width: 1930px) {
    .accueil {
        --bg-clouds: var(--bg-clouds-lg);
        --bg-clouds-width: 3440px;
    }
}

@media screen and (min-width: 3441px) {
    .accueil {
        --bg-clouds: var(--bg-clouds-xl);
        --bg-clouds-width: 5120px;
    }
}

.accueil .container {
    display: flex;
    justify-content: space-between;
    gap: var(--60pxrem);
}

/* =====[ Titre accueil ]================================================= */

.titre-accueil {
    height: fit-content;
    color: #fff;
    font-size: var(--22px);
}

.titre-accueil .datetime {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
    font-weight: 300;
}

.titre-accueil .datetime .date span,
.titre-accueil .datetime .time span {
    font-weight: 700;
}

.titre-accueil h1 {
    max-width: 750px;
    font-family: 'Brandon Grotesque', Arial, Helvetica, sans-serif;
    font-size: var(--52px);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    text-wrap-style: balance;
}

.inscription input,
.inscription textarea,
.inscription select {
    background: #f1f1f1;
    padding: 1.5rem var(--10pxrem) 0.25rem;
    border: none;
    font-size: var(--14px);
    color: #454545;
    border-radius: 0;
    margin-bottom: var(--10pxrem);
}

.inscription input:focus,
.inscription textarea:focus,
.inscription select:focus {
    outline: none;
}

.inscription input[type="text"],
.inscription input[type="email"] {
    width: 100%;
}

.inscription ::placeholder {
    color: #454545;
    opacity: 1 !important;
    font-weight: 300;
}

.inscription select {
    width: 100%;
    height: var(--44pxrem);
}

.inscription form em {
    font-size: var(--13px);
    color: #fff;
    display: block;
    text-align: center;
    margin: 0 0 var(--24pxrem);
    order: -1;
}

.inscription form p {
    padding: var(--10pxrem) 0 var(--25pxrem);
}

.inscription input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--pqm-bleu);
    padding: var(--8pxrem) var(--70pxrem);
    color: var(--pqm-bleu);
    font-size: var(--22px);
    font-weight: 700;
    cursor: pointer;
}

.form-container {
    position: relative;
    margin-top: var(--7pxrem);
    margin-bottom: var(--10pxrem);
    width: 100%;
}

.form-input,
.form-float-select {
    padding: var(--22px) 8px 4px;
    width: 100%;
    border: none;
    font-size: var(--14px);
}

.form-float-select {
    background: none;
    appearance: none;
    height: auto;
}

.form-input + label,
.form-float-select + label {
    position: absolute;
    padding-left: 8px;
    padding-right: 37px;
    top: 0.875rem;
    left: 0;
    width: 100%;
    font-size: var(--13px);
    color: #999;
    font-weight: 600;
    text-align: left;
    pointer-events: none;
    transition: 0.1s ease all;
}

.form-input:focus + label,
.form-input:not(:placeholder-shown) + label,
.has-value + label {
    top: 0.188rem;
}

.custom-select {
    --custom-select-text-color: #454545;
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}

.custom-select select {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding-right: 25px;
    width: 100%;
    white-space: normal;
    cursor: pointer;
}

.custom-select select:disabled {
    cursor: not-allowed;
}

.custom-select::after {
    position: absolute;
    pointer-events: none;

    content: "";
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: var(--custom-select-text-color, #000);
    padding: 2.3px;
    top: 48%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg) scale(0.9);
}

.error.form-input:placeholder-shown + label,
select.error:not(.has-value) + label {
    color: #dc3545;
}

.error.form-input:not(:placeholder-shown),
select.error.has-value,
select.error option {
    color: var(--custom-select-text-color, #000);
}

.form-label {
    margin-top: 0.5rem;
    font-size: var(--14px);
    width: 100%;
}

.newsletter-checkbox {
    margin-top: 1rem;
}

.tab2 {
    display: flex;
    background-color: #000;
    transform: translateZ(0);
}

.tab2 button {
    flex: 1;
    border: none;
    padding: var(--20pxrem) 0 var(--16pxrem);
    background-color: var(--pqm-gris-2);
    color: #000;
    font-size: var(--20px);
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
    outline: none;
}

.tab2 button.active2 {
    background-color: #000;
    color: #fff;
    cursor: default;
}

.tab2 button:nth-child(1):not(.active2) {
    border-bottom-right-radius: 10px;
}

.tab2 button:nth-child(2):not(.active2) {
    border-bottom-left-radius: 10px;
}

.inscription {
    flex-shrink: 0;
    border-radius: 10px;
    height: fit-content;
    width: min(100%, 440px);
    overflow: hidden;
    color: #fff;
}

.inscription form,
.inscription .message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
    padding: var(--36pxrem);
}

.inscription h2 {
    order: -2;
    margin-bottom: var(--32pxrem);
    font-size: var(--32px);
    line-height: 1.15;
    font-weight: 400;
    text-align: center;
}

.inscription h2 strong {
    display: block;
    font-size: var(--54px);
    font-weight: 900;
}

.inscription p {
    font-size: var(--14px);
    text-align: center;
}

.inscription input,
.inscription select {
    margin: 0;
    background-color: #fff;
    border: none;
    border-radius: 5px;
}

p.privacy-policy {
    margin: 0.75rem 0 1.25rem;
    padding: 0;
    font-size: var(--14px);
    text-align: left;
}

.privacy-policy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-policy a:hover {
    color: var(--pqm-bleu);
}

p.click-register {
    margin: 1.75rem 0 2rem;
    padding: 0;
    font-size: var(--20px);
}

.click-register a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.inscription input[type="Submit"] {
    order: 1;
    background-color: var(--pqm-bleu);
    color: #fff;
    border: 2px solid transparent;
}

.inscription input[type="Submit"]:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: var(--pqm-bleu);
}

.add-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--10pxrem);
    font-weight: 400;
    background-color: #fafafa;
    width: 100%;
    font-size: var(--14px);
    color: #000;
    padding: var(--15pxrem);
}

.add-calendar .icon {
    color: #000;
    font-size: var(--28px);
    transition: all 0.25s ease-in-out;
}

.add-calendar .icon:hover {
    color: var(--pqm-bleu);
}

.message h2.icon,
.decompte2 h2.icon {
    height: var(--64px);
    width: var(--64px);
    font-size: var(--64px);
    padding: 0;
}

.message h3 {
    font-size: 1.17em;
    font-weight: 600;
    text-align: center;
}

.message p {
    font-size: var(--16px);
}

.message a {
    color: #fff;
}

.message p:last-child {
    margin-top: var(--50pxrem);
    font-size: var(--20px);
}

/* =====[ Playback ]================================================= */

.bg-clouds {
    padding-bottom: 300px;

    --bg-playback-clouds-width: 1920px;
    --bg-playback-clouds-size: max(var(--bg-playback-clouds-width), 100%) auto;
    --char-horizontal-position: right max(calc(((100vw - (1550px - var(--char-margin-right))) / 2) + 1rem), 4vw);

    background-color: #000;
    background-image: var(--character), var(--bg-playback-clouds-front), var(--bg-playback-clouds-back);
    background-repeat: no-repeat;
}

@media screen and (min-width: 1921px) {
    .bg-clouds {
        --bg-playback-clouds-front: var(--bg-playback-clouds-front-lg);
        --bg-playback-clouds-back: var(--bg-playback-clouds-back-lg);
        --bg-playback-clouds-width: 3440px;
    }
}

@media screen and (min-width: 3441px) {
    .bg-clouds {
        --bg-playback-clouds-front: var(--bg-playback-clouds-front-xl);
        --bg-playback-clouds-back: var(--bg-playback-clouds-back-xl);
        --bg-playback-clouds-width: 5120px;
    }
}

@supports (transition-behavior: normal) {
    @property --rocket-levitation {
        syntax: "<length>";
        inherits: false;
        initial-value: 50px;
    }

    @property --rocket-turbulence {
        syntax: "<length>";
        inherits: false;
        initial-value: 400px;
    }

    @property --astronaut-rocket-levitation {
        syntax: "<length>";
        inherits: false;
        initial-value: 115px;
    }

    @property --astronaut-rocket-turbulence {
        syntax: "<length>";
        inherits: false;
        initial-value: 245px;
    }

    @property --satellite-levitation {
        syntax: "<length>";
        inherits: false;
        initial-value: 120px;
    }

    @property --satellite-turbulence {
        syntax: "<length>";
        inherits: false;
        initial-value: 285px;
    }

    @keyframes levitation {
        from {
            --rocket-levitation: var(--rocket-levitation-max);
            --astronaut-rocket-levitation: var(--astronaut-rocket-levitation-max);
            --satellite-levitation: var(--satellite-levitation-max);
        }

        to {
            --rocket-levitation: var(--rocket-levitation-min);
            --astronaut-rocket-levitation: var(--astronaut-rocket-levitation-min);
            --satellite-levitation: var(--satellite-levitation-min);
        }
    }

    @keyframes turbulence {
        from {
            --rocket-turbulence: 402px;
            --astronaut-rocket-turbulence: 295px;
            --satellite-turbulence: 330px;
        }

        to {
            --rocket-turbulence: 398px;
            --astronaut-rocket-turbulence: 220px;
            --satellite-turbulence: 240px;
        }
    }
}

.bg-clouds.adaptable {
    --char-margin-right: var(--rocket-turbulence, 400px);
    --char-width: 150px;

    --rocket-levitation-base: 50px;
    --rocket-levitation-max: calc(var(--rocket-levitation-base) + 20px);
    --rocket-levitation-min: calc(var(--rocket-levitation-base) - 10px);

    background-size: var(--char-width) auto, var(--bg-playback-clouds-size), var(--bg-playback-clouds-size);
    background-position: var(--char-horizontal-position) bottom var(--rocket-levitation, var(--rocket-levitation-base)), bottom, bottom;

    animation:
        levitation 2.5s ease-in-out infinite alternate,
        turbulence 0.13s ease-in-out infinite alternate;
}

.bg-clouds.cohesion {
    --char-margin-right: var(--astronaut-rocket-turbulence, 245px);
    --char-width: 260px;

    --astronaut-rocket-levitation-base: 115px;
    --astronaut-rocket-levitation-max: calc(var(--astronaut-rocket-levitation-base) + 10px);
    --astronaut-rocket-levitation-min: calc(var(--astronaut-rocket-levitation-base) - 5px);

    background-size: var(--char-width) auto, var(--bg-playback-clouds-size), var(--bg-playback-clouds-size);
    background-position: var(--char-horizontal-position) bottom var(--astronaut-rocket-levitation, var(--astronaut-rocket-levitation-base)), bottom, bottom;

    animation:
        levitation 1s ease-in-out infinite alternate,
        turbulence 1.2s ease-in-out infinite alternate;
}

.bg-clouds.innovation {
    --char-margin-right: 300px;
    --char-width: 290px;

    background-image: var(--bg-playback-clouds-front), var(--character), var(--bg-playback-clouds-back);
    background-size: var(--bg-playback-clouds-size), var(--char-width) auto, var(--bg-playback-clouds-size);
    background-position: bottom, var(--char-horizontal-position) bottom 45px, bottom;
}

.bg-clouds.securite {
    --char-margin-right: var(--satellite-turbulence, 285px);
    --char-width: 260px;

    --satellite-levitation-base: 120px;
    --satellite-levitation-max: calc(var(--satellite-levitation-base) + 20px);
    --satellite-levitation-min: calc(var(--satellite-levitation-base) - 20px);

    background-size: var(--char-width) auto, var(--bg-playback-clouds-size), var(--bg-playback-clouds-size);
    background-position: var(--char-horizontal-position) bottom var(--satellite-levitation, var(--satellite-levitation-base)), bottom, bottom;

    animation:
        levitation 6s ease-in-out infinite alternate,
        turbulence 7s ease-in-out infinite alternate;
}

/* Patch car le lévitation fonctionnait pas dans firefox */
@supports not (-webkit-tap-highlight-color: transparent) {
    .bg-clouds.adaptable {
        animation: turbulence 0.13s ease-in-out infinite alternate !important;
    }

    .bg-clouds.cohesion {
        animation: turbulence 1.2s ease-in-out infinite alternate !important;
    }

    .bg-clouds.securite {
        animation: turbulence 7s ease-in-out infinite alternate !important;
    }
}

/* =====[ Playback - Event banner ]================================================= */

.playback .event-banner {
    background-position-y: bottom;
}

.playback .event-banner .datetime {
    font-size: var(--24px);
}

.playback .event-banner .datetime span {
    font-weight: 900;
}

.playback .event-banner h1 {
    max-width: 900px;
    font-family: 'Brandon Grotesque', Arial, Helvetica, sans-serif;
    font-size: var(--30px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: normal;
}

.bg-none {
    background: none !important;
}

.playback .event-banner .custom-title {
    border-bottom: 2px solid #fff;
}

.playback .event-banner .custom-title span {
    font-size: 125px;
    vertical-align: middle;
}

.playback .event-banner .custom-title h1 {
    display: inline-block;
    margin-top: 0;
    margin-left: var(--38pxrem);
    font-family: Muli, Arial, Helvetica, sans-serif;
    vertical-align: middle;
}

[icon^="adaptable"] {
    --icon-url: var(--icon-adaptable);
    --ratio: 149 / 150;
}

[icon^="cohesion"] {
    --icon-url: var(--icon-cohesion);
    --ratio: 132 / 150;
}

[icon^="innovation"] {
    --icon-url: var(--icon-innovation);
    --ratio: 103 / 150;
}

[icon^="securite"] {
    --icon-url: var(--icon-securite);
    --ratio: 90 / 150;
}

/* =====[ Playback - Player ]================================================= */

.playback .event-banner + .container {
    display: flex;
    align-items: stretch;
    gap: 2.5rem;
    padding: 4rem 0;
}

.playback .player {
    flex: 3;
    width: 100%;
}

.playback .player:only-child {
    margin: 0 auto;
    width: 100%;
    max-width: 918px;
}

.playback .player .jwplayer .jw-wrapper {
    background-color: unset;
}

.playback .player .jwplayer,
.playback .player .jw-video,
.playback .player .jw-preview,
.playback .player .jw-controls-backdrop,
.playback .player .jw-controls {
    border-radius: 10px;
}

.playback .player .unmute {
    position: absolute;
    inset: 1.25rem auto auto 1.25rem;
    width: var(--40px);
    height: var(--40px);
    font-size: var(--40px);
    color: #0070bd;
    background-color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.playback .player .unmute:hover {
    opacity: 1;
}

.playback .player .unmute.invisible {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.playback .player .btn-wrapper {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem 2rem;
}

.playback .player .btn-wrapper .cc-notice {
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    background-color: #666;
    color: #fff;
    font-size: var(--14px);
}

.playback .player .btn-wrapper .stream-lang {
    border-radius: 5px;
    padding: 0.5rem 0;
    width: min(45%, 15rem);
    background-color: var(--pqm-bleu);
    color: #fff;
    font-size: var(--20px);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.playback .player .btn-wrapper .stream-lang:hover {
    opacity: 0.75;
}

/* =====[ Playback - Interactions ]================================================= */

.playback .interactions {
    flex: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
}

.playback .interactions nav.tabs {
    flex-shrink: 0;
    display: flex;
    gap: 1px;
    border: 1px solid var(--pqm-bleu);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--pqm-bleu);
    overflow: hidden;
    transform: translateZ(0);
}

.playback .interactions nav.tabs button,
.playback .interactions nav.tabs a {
    appearance: none;
    flex: 1;
    outline: none;
    border: none;
    padding: 1rem;
    background-color: #fff;
    color: var(--pqm-bleu);
    font-family: inherit;
    font-size: var(--18px);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
    transform: translateZ(0);
}

.playback .interactions nav.tabs .nav-button[data-item="comment"] {
    flex: 2;
}

.playback .interactions nav.tabs .nav-button[data-item="comment"] .contact {
    font-size: var(--16px);
    font-weight: 400;
}

.playback .interactions nav.tabs .disabled {
    pointer-events: none;
    background-color: #eee;
    color: #aaa;
}

.playback .interactions nav.tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.playback .interactions nav.tabs a [icon] {
    margin-top: 2px;
    margin-left: 4px;
}

.playback .interactions nav.tabs :not(.active, [icon], .contact):hover {
    background-color: var(--pqm-gris-2);
}

.playback .interactions nav.tabs .nav-button.active {
    background-color: var(--pqm-bleu);
    color: #fff;
    cursor: default;
}

.playback .interactions .nav-item.hidden {
    display: none;
}

/* =====[ Playback - Interactions (Comment) ]================================================= */

.playback .interactions .nav-item.comment {
    position: relative;
    padding-top: 0.4rem;
}

.playback .interactions .comment textarea {
    display: block;
    outline: none;
    margin: 0;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 1rem;
    min-height: 15rem;
    width: 100%;
    background-color: #f4f4f4;
    font-family: inherit;
    font-size: var(--18px);
    resize: none;
}

.playback .interactions .comment textarea::placeholder {
    color: #aaa;
    font-weight: 600;
}

.playback .interactions .comment textarea.error::placeholder {
    color: #dc3545;
}

.playback .interactions .comment .comment-controls {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0;
    padding: 0.6rem 1rem;
    width: 100%;
    bottom: 0;
}

.playback .interactions .comment .comment-controls p {
    margin: 0;
    padding: 0;
    color: #bbb;
    font-size: var(--13px);
    -webkit-user-select: none;
    user-select: none;
}

.playback .interactions .comment .comment-controls .send-icon {
    background-color: var(--pqm-bleu);
    color: #fff;
    font-size: 42px;
}

.playback .interactions .comment .comment-controls .send-icon:hover {
    opacity: 0.75;
}

.playback .interactions .comment .comment-controls .toast-container {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
}

.playback .interactions .comment .comment-controls .toast-notification {
    padding: 1rem;
    color: #fff;
    background-color: #198754;
    text-align: center;
    opacity: 0;
    transform: translateY(-40%);
    transition: all 0.4s ease-in-out;
}

.playback .interactions .comment .comment-controls .toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* =====[ Playback - Interactions (Spark) ]================================================= */

.playback .interactions .spark {
    margin-top: 0.4rem;
    height: 100%;
    min-height: 24rem;
}

.playback .interactions .spark iframe {
    border: 1px solid #eee;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 100%;
}

/* =====[ Details ]======================================================================== */
.details {
    display: flex;
    justify-content: center;
    padding: var(--30pxrem) 0;
    background-color: #fff;
}

.details h2 {
    color: #000;
    font-size: var(--34px);
    font-weight: 900;
    line-height: normal;
}

.speakers h2 {
    margin-bottom: var(--32pxrem);
}

.speakers .group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--30pxrem);
}

.speakers .people {
    display: flex;
    flex-direction: row;
    gap: 3rem 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.speakers .image img {
    height: 14rem;
    border-radius: 7rem;
}

.speakers .person {
    flex: 1;
    text-align: center;
}

.speakers .person .name {
    margin: 1rem 0 var(--6pxrem);
    font-size: var(--24px);
    color: var(--pqm-bleu);
    font-weight: 900;
    line-height: normal;
}

.speakers .person .title {
    padding: 0;
    font-size: var(--18px);
    text-align: center;
    line-height: inherit;
}

.speakers .person .title span {
    display: block;
    font-weight: 700;
}

.speakers .person .organization {
    display: block;
    margin-top: var(--6pxrem);
    font-size: var(--18px);
    color: #000;
    font-weight: 900;
}

.speakers .person .socials {
    display: block;
    margin-top: 0.75rem;
}

[icon="linkedin2"] {
    color: #0a66c2;
    font-size: 30px;
    transition: all 0.25s ease-in-out;
}

[icon="linkedin2"]:hover {
    color: #ccc;
}

.description {
    margin: var(--30pxrem) 0;
    border-radius: 8px;
    padding: var(--38pxrem) 5.75rem;
    background-color: var(--pqm-gris-2);
    font-size: var(--22px);
    line-height: 1.5;
    text-wrap-style: pretty;
}

.description h2 {
    margin-bottom: var(--22pxrem);
    text-align: center;
    line-height: 1.5;
}

.description p {
    padding: var(--10pxrem) 0;
    text-align: left;
    line-height: 1.3;
}

.description a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.description a:hover {
    color: var(--pqm-bleu);
}

.description ul {
    padding-left: 0;
}

.description li {
    position: relative;
    padding-left: var(--34pxrem);
}

.description li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: black;
}

/* =====[ Supports ]========================================== */

.details + .supports {
    position: relative;
    overflow: hidden;

    --bg-black-clouds-width: 101%;

    background-image: var(--bg-black-clouds);
    background-size: max(var(--bg-black-clouds-width), 100%) auto;
    background-position: bottom -1px center;
    background-repeat: no-repeat;

    /*transform: translateZ(0);*/
}

@media screen and (min-width: 1921px) {
    .details + .supports {
        --bg-black-clouds: var(--bg-black-clouds-lg);
        --bg-black-clouds-width: 3440px;
    }
}

@media screen and (min-width: 3441px) {
    .details + .supports {
        --bg-black-clouds: var(--bg-black-clouds-xl);
        --bg-black-clouds-width: 5120px;
    }
}

.details + .supports:after {
    position: absolute;
    content: "";
    z-index: -1;
    border-radius: 100%;
    top: 0;
    right: -200px;
    bottom: 0;
    left: -200px;
    background-color: var(--pqm-gris-3);
}

.details + .supports ul {
    display: flex;
    justify-content: center;
    gap: min(10vw, 175px);
    margin: 0 auto;
    padding: 5rem 0 min(17rem, 15vw);
    text-align: center;
}

.details + .supports ul figure {
    margin: 0;
    padding: 0;
}

.details + .supports ul .icon {
    padding: 0;
    height: 40px;
    width: 40px;
}

.details + .supports ul figcaption {
    margin-top: var(--7pxrem);
    font-size: var(--13px);
    font-weight: 600;
    line-height: 1.3;
}

.details + .supports ul li .icon,
.details + .supports ul li figcaption {
    color: #c4c4c4;
    transition: all 0.25s ease-in-out;
}

.details + .supports ul li:hover figcaption,
.details + .supports ul li:hover .icon {
    color: var(--pqm-bleu);
}

/* =====[ Footer ]========================================== */

footer {
    background-color: #000;
    font-family: 'Brandon Grotesque', Arial, Helvetica, sans-serif;
    font-size: var(--13px);
    letter-spacing: 0.06em;
    color: #fff;
    text-transform: uppercase;
}

footer .container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: min(85%, 1290px);
}

footer .global {
    display: flex;
}

footer .sitemap {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--36pxrem);
}

footer .social {
    flex-basis: 30%;
}

footer a {
    color: inherit;
}

footer a:hover {
    color: var(--pqm-bleu);
}

footer img {
    height: var(--22pxrem);
}

footer h2 {
    margin-bottom: var(--10pxrem);
    font-size: inherit;
    font-weight: 800;
    line-height: normal;
}

footer hr {
    margin: var(--25pxrem) 0 var(--10pxrem);
    border-bottom: 0;
    width: 100%;
}

footer ul {
    display: flex;
    flex-wrap: wrap;
}

footer .sitemap li {
    flex-basis: 50%;
    padding: var(--5pxrem) 0;
}

footer .social ul {
    gap: 10px;
}

footer .social li {
    display: content;
}

footer .social li a {
    font-size: 32px;
}

footer .legal {
    display: flex;
    justify-content: space-between;
    padding: 0;
    height: var(--64pxrem);
    font-size: 9px;
    letter-spacing: normal;
}

footer .legal .copyright {
    text-align: center;
}

footer .legal .copyright::before {
    content: unset;
}

@media screen and (max-width: 1199px) {
    .accueil {
        --bg-clouds-size: auto 300px;
    }

    .bg-clouds {
        --bg-playback-clouds-size: auto 300px;
    }

    .bg-clouds.adaptable {
        --char-width: 100px;
        --rocket-levitation-base: 20px;
    }

    .bg-clouds.cohesion {
        --char-width: 210px;
        --astronaut-rocket-levitation-base: 80px;
    }

    .bg-clouds.innovation {
        --char-width: 240px;
    }

    .bg-clouds.securite {
        --char-width: 180px;
        --satellite-levitation-base: 90px;
    }
}

@media screen and (max-width: 1060px) {
    .titre-accueil .datetime {
        flex-direction: column;
        gap: unset;
        margin-bottom: 2rem;
    }

    .titre-accueil h1 {
        font-size: var(--42px);
    }
}

@media screen and (max-width: 1020px) {
    .accueil {
        padding: 3rem 0;
        min-height: unset;
    }

    .accueil .container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .titre-accueil {
        text-align: center;
    }

    .lobby .container,
    .playback .event-banner + .container {
        flex-direction: column;
        align-items: center;
    }

    .playback .event-banner + .container {
        padding: 3rem 0;
    }

    .playback .interactions nav.tabs button,
    .playback .interactions nav.tabs a {
        font-size: var(--16px);
    }

    .playback .interactions .comment textarea {
        min-height: 20rem;
    }

    .playback .interactions .spark iframe {
        height: 24rem;
    }

    .description {
        padding-inline: 3rem;
    }
}

@media screen and (max-width: 880px) {

    footer .sitemap,
    footer .social {
        flex-basis: 50%;
    }
}

@media screen and (max-width: 660px) {
    .speakers .people {
        flex-direction: column;
    }

    .description {
        margin-top: 0;
    }
}

@media screen and (max-width: 575px) {
    .bg-clouds {
        --bg-playback-clouds-size: auto 230px;
    }

    .description {
        padding-inline: 2rem;
        font-size: var(--18px);
    }

    footer .global {
        flex-direction: column;
    }

    footer .legal .copyright {
        margin-top: 0;
    }
}

@media screen and (max-width: 390px) {
    .accueil .container {
        width: 100%;
    }

    .titre-accueil h1 {
        margin-inline: auto;
        width: 90%;
    }

    .inscription {
        border-radius: unset;
    }

    .playback .player .btn-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .playback .player .btn-wrapper .stream-lang {
        width: 100%;
    }

    .details .container {
        width: 100%;
    }

    .description {
        border-radius: unset;
    }
}