:root {
    color-scheme: dark;
    --Color-Blanc: #fff;
    --Color-Black: #000;
    --Color-Pink: #f701a6;
    --Color-Green: #33F2AF;
    --Color-Blue: #805FF0;
    --Color-Blue-Plain: #1F17C2;
    --color-background-card-concours: #1E1E1E;
    --Color-Background: #121212;
    --color-text: var(--Color-Blanc);
    --color-button-text: var(--Color-Black);
    --Color-Color-1: var(--Color-Blue-Plain);
    --Color-Color-2: var(--Color-Pink);
    --Color-Color-3: var(--Color-Green);
    --SubColor-Color-3: rgba(95, 240, 128, 0.05);
    --tiny_icon_url: url("images/icon_tiny.png");
    --tiny_meritis_icon_url: url("images/signatureoutlooklogomeritisW.webp");
    --theme-mode: "☼"
    
}

:root.light {
    --Color-Blanc: #fff;
    --Color-Black: #000;
    --Color-Pink: #f701a6;
    --Color-Green: #33F2AF;
    --Color-Blue: #805FF0;
    --Color-Blue-Plain: #1F17C2;
    --color-background-card-concours: #ddd;
    --Color-Background: #fff;
    color-scheme: light;
    --color-text: var(--Color-Black);
    --color-button-text: var(--Color-Blanc);
    --Color-Color-1: var(--Color-Blue);
    --Color-Color-2: var(--Color-Green);
    --Color-Color-3: var(--Color-Pink);
    --SubColor-Color-3: rgba(240, 95, 128, 0.05);
    --tiny_icon_url: url("images/icon_tiny_light.png");
    --tiny_meritis_icon_url: url("images/signatureoutlooklogomeritis.webp");
    --theme-mode: "☾"
}

:not(:root):fullscreen::backdrop {
    position: fixed;
    inset: 0px;
    background: var(--Color-Background);
}

@foant-face {
    font-family: 'Akzidenz-Grotesk Std';
    /* Nom personnalisé pour la police */
    src: url('/AkzidGroStdReg.woff2') format('woff2');
    /* font-weight: normal;
    font-style: normal;*/
}

@fonat-face {
    font-family: 'Akzidenz-Grotesk Std Bold';
    /* Nom personnalisé pour la police */
    src: url('/AkzidGroStdReg.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}



@media screen and (prefers-reduced-motion: reduce) {
    * {
        /* Very short durations means JavaScript that relies on events still works */
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media (inverted-colors) {

    img,
    video {
        filter: invert(100%);
    }
}

.themeMode::before {
    content: var(--theme-mode);
}

.themeMode {
    font-size: 120%;
    color: var(--color-text);
    padding: 0.5rem 1rem;
    margin: 1em;
    background-color: var(--Color-Background);
    border: none;
}

.themeMode:hover {
    background-color: #ccc4;
    border-radius: 1.25rem;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--Color-Background, #121212);
    /*width: 100vw;*/
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html {
    font-family: "Akzidenz-Grotesk Std";
}

a {
    color: var(--Color-White);
}

background {
    overflow-x: hidden
}

.mandatory {
    color: var(--Color-Pink);
}

.icon_tiny {
    /* position: absolute;*/
    padding-top: 1.875rem;
    padding-left: 1.875em;
    /* width: 7.625rem;*/

}

.gototop {
    position: fixed;
    bottom: 5em;
    right: 5em;
    text-align: end;
    display: none;
    justify-content: flex-end;
}

.pastille_none {
    border-radius: 0.3em;
    background-color: #aaa8;
    width: 2.1em;
    height: 2.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: larger;
    box-shadow: 5px 5px 15px #0002;

}

.pastille_none:hover {
    background-color: var(--Color-Green);
    cursor: grab;
}

.pastille {
    border-radius: 1.3em;
    background-color: #aaa8;
    width: 2.6em;
    height: 2.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: larger;
    box-shadow: 5px 5px 15px #0002;

}

.pastille_green {
    background-color: var(--Color-Green)
}

.pastille_violet {
    background-color: var(--Color-Blue)
}

.aplat_blue {
    background-color: var(--Color-Blue)
}

.pastille_violet:hover {
    background-color: var(--Color-Green);
    cursor: grab;
}

.upperCase {
    text-transform: uppercase;
}

.green-text {
    color: var(--Color-Color-3);
}

.transparent {
    color: transparent;
}

.green {
    text-shadow: 0px 0px 0px var(--Color-Color-3);
}

.blue-text {
    color: var(--Color-Blue);
}


.round-image {
    border-radius: 50%;
    object-fit: cover;
    /* This ensures the image fills the circle without distortion */
    overflow: hidden;
    width: 100%;
}

.menuBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger span {
    width: 2rem;
    height: 0.25rem;
    background-color: #333;
    border-radius: 10px;
    transition: all 0.3s linear;
}



.vertical {
    flex-direction: column;
}

.img_icon_tiny {
    content: var(--tiny_icon_url);
    display: inline-flex;
    width: 100px;
}

.img_icon_meritis_tiny {
    content: var(--tiny_meritis_icon_url);
    display: inline-flex;
}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.wrapper2 {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.wrapper3 {
    position: absolute;
    top: 200vh;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.circle1 {
    position: absolute;
    width: 26rem;
    height: 26rem;
    left: 32rem;
    top: 5rem;
    border-radius: 50%;
    background-color: #F701A6;
    opacity: 0.1;
    z-index: -1;
}


.circle2 {
    position: absolute;
    width: 26rem;
    height: 26rem;
    left: -10rem;
    top: 25rem;
    border-radius: 50%;
    background-color: #F701A6;
    opacity: 0.1;
    z-index: -1;
}

.circle3 {
    position: absolute;
    width: 26rem;
    height: 26rem;
    right: 10rem;
    top: 25rem;
    border-radius: 50%;
    background-color: #F701A6;
    opacity: 0.1;
    z-index: -1;
}

.triangle {
    position: absolute;
    right: -10rem;
    top: 7rem;
    width: 0;
    height: 0;
    border-left: 18rem solid transparent;
    border-right: 18rem solid transparent;

    border-bottom: 31.2rem solid #0E9CB61A;
    overflow: -moz-hidden-unscrollable;

}

.triangle2 {
    position: absolute;
    left: calc(50% - 18rem);
    top: 7rem;
    width: 0;
    height: 0;
    border-left: 18rem solid transparent;
    border-right: 18rem solid transparent;

    border-bottom: 31.2rem solid #0E9CB61A;
    overflow: -moz-hidden-unscrollable;

}

.centerBlock {
    width: 60%;
    align-content: center;
}

.main {
    /*display: grid;
    height: 100vh;
    place-items: center;*/
    display: flex;
    padding-top: 3rem;
    /*width: 100vw;*/
    /*height: 100vh;*/
    flex-direction: column;
    align-items: center;
    gap: var(--Margin-L, 2rem);
}

.main-start {
    /*display: grid;
    height: 100vh;
    place-items: center;*/
    display: flex;
    padding-top: 3rem;
    /*width: 100vw;*/
    /*height: 100vh;*/
    flex-direction: column;
    gap: var(--Margin-L, 2rem);
}

.main_title {
    align-self: stretch;
    color: var(--color-text, #FFF);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H1, 3.75rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}



.main_title_blue {
    align-self: stretch;
    color: var(--Color-Blue, #805FF0);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H1, 3.75rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

@media screen and (max-width:1200) {
    .main_title_blue {
        font-size: var(--Font-size-H1, 2.5rem);
    }
}

.main_title2 {
    align-self: stretch;
    color: var(--color-text, #FFF);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H2, 2.75rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.main_title2_blue {
    align-self: stretch;
    color: var(--Color-Blue, #805FF0);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H2, 2.75rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.main_title3 {
    align-self: stretch;
    color: var(--color-text, #FFF);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H3, 2.25rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    /*text-transform: uppercase;*/
}

.main_title3_normal {
    align-self: stretch;
    color: var(--color-text, #FFF);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H3, 2.25rem);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    /*text-transform: uppercase;*/
}

.main_title3_blue {
    align-self: stretch;
    color: var(--Color-Blue, #805FF0);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H2, 2.25rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    /*text-transform: uppercase;*/
}

.main_title4 {
    align-self: stretch;
    color: var(--color-text, #FFF);
    text-align: center;
    font-family: "Akzidenz-Grotesk Std";
    font-size: var(--Font-size-H3, 1.5rem);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    /*text-transform: uppercase;*/
}

.frame-81 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.frame-82 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: left;

}

.miniIcon {
    height: 2.5em;
}

.textLeft {
    text-align: left;
}

.main-frame-80 {
    max-width: 80%;
    margin: auto;
}

.main-inCenter {
    padding-top: 10em;
}

.main-inCenterSmall {
    padding-top: 5em;
}

.main-inCenterVSmall {
    padding-top: 3em;
}

.main-profile {
    display: flex;
    flex-direction: row;
    column-gap: 3em;
}

.menuleft {
    border-right: solid 1px var(--Color-Green);
    display: flex;
    flex-direction: column;
    row-gap: 2em;
    align-items: center;
}

.faq details[open] {
    padding: -0.5em;
}

.avatarWidth {
    width: 5em;
}

.BigAvatarWidth {
    width: 10em;
}


.main-4steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: stretch;
    column-gap: 1.5em;
    row-gap: 1.5em;
    align-items: stretch;
}

.main-3steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: stretch;
    column-gap: 1.5em;
    row-gap: 1.5em;
    align-items: stretch;
    align-self: stretch;
}

.main-2steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    column-gap: 1.5em;
    row-gap: 1.5em;
    align-items: stretch;
}

.main-2steps-profile {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: stretch;
    column-gap: 1.5em;
    row-gap: 1.5em;
    align-items: stretch;
}

.gridCenter {
    justify-content: center !important;
    align-items: center !important;
}

.profile-informations {
    display: flex;
    justify-content: stretch;
    align-self: stretch;
}

.main-step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    justify-content: start;
    row-gap: 2em;

}

.main-step-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    justify-content: start;
    row-gap: 2em;

}

.double-step {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.grow {
    flex-grow: 4;
}

@media screen and (min-width:1200px) {
    .main-frame-80 {
        max-width: 65%;
    }

}




.loadingCenter {
    display: flex;
    align-items: center;
}

.buttonlogo {
    height: 1rem;
}

.buttonlogo15 {
    height: 1.5rem;
}

.hide {
    display: none !important;
}

.text {
    /*width: 845px;*/
    color: var(--color-text, #FFF);
    text-align: center;

    font-size: var(--Font-size-Body, 1.125rem);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.button_close {
    text-align: end;
    font-weight: bold;
}

.button_close:hover {
    color: var(--Color-Color-3, #33F2AF);
}


.button_delete {
    text-align: end;
    font-weight: bold;
    color: #f008;
}

.button_delete:hover {
    color: #f00;
}


.center {
    margin: auto;
}

.dialogBox {
    margin: auto;
    border-radius: 10px;
    padding: 2rem;
    min-width: 60vw;
    align-self: safe center;
}

.centerDialog {
    background: #0000;
    border: none;
    margin: auto;
    outline: none;
}

.centerDialog:focus-visible {
    border: none;
    outline: none;
}


.framemail,
.framelinkedin,
.frameforname,
.framesurname {
    display: flex;
    flex-flow: column;
}

.frameforname,
.framesurname {
    flex: 1
}

.frameinfos {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.frameaccept,
.frameregister {
    display: flex;
    flex-flow: row;
}

.framehidden {
    display: none;
}

.consentCheckbox {
    margin: .4rem;
}

.consentLabel {
    align-content: center;
}

.framemail,
.framelinkedin,
.frameforname,
.framesurname,
.frameaccept,
.frameregister {
    align-content: stretch;
    text-align: left;
}

.form-pre {
    text-align: center;
    color: var(--color-text, #FFF);
    display: flex;
    flex-flow: column;
    align-content: stretch;
    width: 80%;
    gap: 1rem;
}

.form-preW {
    text-align: center;
    color: var(--color-text, #FFF);
    display: flex;
    flex-flow: column;
    align-content: stretch;

    gap: 1rem;
}

@media only screen and (min-device-width: 481px) {
    .form-pre {
        width: 60%;
    }

}

.background {
    background: var(--color-background-card-concours);
}

.name_input,
.mail_input {
    margin: 0.4rem;
    padding: 1em;
    height: 3.5rem;
    border-radius: var(--border-border-radius-s, 0.625rem);

    background: var(--color-background-card-concours);
    color: var(--color-text, #FFF);
}

.simple_input {
    margin: 0.4rem;
    padding: 1em;
    height: 3.5rem;
    border-radius: var(--border-border-radius-s, 0.625rem);
    border: 0px;
    background: var(--color-background-card-concours);
    color: var(--color-text, #FFF);
    width: 95%;
}

textarea#reponseCode {
    text-align: left;
}

textarea#reponseCode::placeholder {
    color: var(--color-text, #FFF);
    position: absolute;
    top: 1em;
    font-weight: bolder;
    font-size: 1em;
}

.frameconfirm {
    padding-top: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
}

.button_confirm {
    align-self: stretch;
    display: flex;
    width: 12.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border-radius: 1.25rem;
    background: var(--Color-Color-3, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
    text-transform: uppercase;
}

.button_confirm:hover {
    background: var(--color-button-text);
    color: var(--Color-Color-3, #33F2AF);

    border-radius: 1.25rem;
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);

}

.button_espace_pink {
    align-self: stretch;
    display: flex;
    width: 12.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--Color-Color-2, #33F2AF);
}


.button_espace_pink:hover {
    background: var(--Color-Color-2, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;

}

.button_espace {
    align-self: stretch;
    display: flex;
    width: 12.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--Color-Color-3, #33F2AF);
}


.button_espace:hover {
    background: var(--Color-Color-3, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
    border-radius: 1.25rem;

}

.sbutton_espace {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--color-text, #33F2AF);
}


.sbutton_espace:hover {
    background: var(--Color-Color-3, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
    border-radius: 1.25rem;

}

.tag_pink {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--Color-Color-2, #33F2AF);
}

.sbutton_espace_pink {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--Color-Color-2, #33F2AF);
}


.sbutton_espace_pink:hover {
    background: var(--Color-Color-2, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;

}



.sibutton_espace {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--Color-Color-3, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);
}


.sibutton_espace:hover {
    background: var(--color-button-text);
    color: var(--color-text, #33F2AF);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-3, #33F2AF);

    border-radius: 1.25rem;

}

.stbutton_espace {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--color-text, #33F2AF);
}


.stbutton_espace:hover {
    background: var(--Color-Color-2, #33F2AF);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Color-2, #33F2AF);
    border-radius: 1.25rem;

}

.sfbutton_espace {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Green);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--color-text, #33F2AF);
}


.sfbutton_espace:hover {
    background: var(--Color-Green);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Green);
    border-radius: 1.25rem;

}

.sftbutton_espace {
    align-self: stretch;
    display: flex;
    width: 5.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: var(--Border-border-weight, 1px) solid var(--Color-Pink);
    border-radius: 1.25rem;
    text-transform: uppercase;
    background: var(--color-button-text);
    color: var(--color-text, #33F2AF);
}


.sftbutton_espace:hover {
    background: var(--Color-Pink);
    color: var(--color-button-text);
    border: var(--Border-border-weight, 1px) solid var(--Color-Pink);
    border-radius: 1.25rem;

}

.vw30 {
    width: 30vw;
}

.vw20 {
    width: 20vw;
}

.vw10 {
    width: 10vw;
}

.vw7 {
    width: 7vw;
}

.vw5 {
    width: 5vw;
}

.vw3 {
    width: 3vw;
}

.vw2 {
    width: 2vw;
}

.vw1_5 {
    width: 1.5vw;
}


.button_none_stretched {
    color: var(--color-text, #FFF);
    text-decoration: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    text-transform: uppercase;
    background: var(--Color-Background);
}

.button_none {
    color: var(--color-text, #FFF);
    text-decoration: none;
    align-self: stretch;
    display: flex;
    width: 12.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: none;
    text-transform: uppercase;
    background: var(--Color-Background);
}


.button_none:hover {
    color: var(--Color-Color-3, #33F2AF);
    border-width: 0;
    border-radius: 1.25rem;

}

.button_none_green {
    color: var(--Color-Color-3, #33F2AF);

    align-self: stretch;
    display: flex;
    width: 12.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--border-border-radius-s, 0.625rem);
    border: none;
    text-transform: uppercase;
    background: var(--Color-Background);
}


.button_none_green:hover {
    color: var(--color-text, #FFF);
    border-width: 0;
    border-radius: 1.25rem;

}

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

.aventureLink {
    display: flex;
    justify-content: center;
    align-items: center;
}

.undecorated {
    text-decoration: none !important;
    font-size: smaller;
    font-weight: lighter;
}

.mentions-legales {
    color: var(--color-text, #FFF);
    /*position: static;*/
    left: 0;
    bottom: 0;
    padding: 1rem;
    padding-top: 5rem;
    /* width: calc(100% - 15rem);*/
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.mentions-online {
    padding-left: 5rem;
    display: flex;
    flex-direction: row;
    gap: var(--border-border-radius-s, 0.625rem);
}

.mentions {
    display: flex;
    flex-direction: row;
    gap: var(--border-border-radius-s, 0.625rem);
}

.mentionsCenter {
    display: flex;
    flex-direction: row;
    gap: var(--border-border-radius-s, 0.625rem);
    align-items: center;
}

.card_div {
    padding: 0.5em;

    border-radius: var(--border-border-radius-s, 10px);
    border: 1px solid var(--color-text, #1F17C2);

    background: rgba(128, 95, 240, 0.05);
}

.card_div_no {
    padding: 0.5em;


    background: rgba(128, 95, 240, 0.05);
}

.card_div_blue {
    padding: 2em;
    border-radius: var(--border-border-radius-s, 10px);
    border: 0.5px solid var(--Color-Color-1, #1F17C2);
    background: var(--color-bleu-secondary-10, rgba(128, 95, 240, 0.05));
}

.card_div_selected {
    border: 0.5px solid var(--Color-Color-3, #1F17C2);
    background: var(--SubColor-Color-3, rgba(95, 240, 128, 0.05));
    transition: 500ms;
}
.card_div_unselected {
    filter: grayscale(0.4) opacity(0.7);
    transition: 200ms;
}

.card_div_unselected:hover {
    filter: grayscale(0.1) opacity(0.9);
    transition: 200ms;
    border: 1.5px solid var(--Color-Color-1, #1F17C2);
    cursor: grab;
}

  .card_div_unselected:hover h2 {
    position: relative;
    text-shadow: #aaa8 0px 0px 10px;
  }
  


.card_div_impossible {
    padding: 2em;
    border-radius: var(--border-border-radius-s, 10px);
    border: 0.5px solid var(--Color-Color-3, #1F17C2);
    background: var(--SubColor-Color-3, rgba(95, 240, 128, 0.05));
    filter: grayscale(1);
}
.card_div_impossible img, .card_div_impossible h2, .card_div_impossible .text{
    /* fliter blur and gray*/
    filter: blur(2px) grayscale(1) opacity(0.5);
}

/* HTML: <div class="loader"></div> */
.loader {
    color: var(--Color-Pink, #fff);
    width: 2rem;
    aspect-ratio: 1;
    position: relative;
    animation: l9-0 1.5s infinite steps(2);
    margin-right: 6rem;
}

.loader::before,
.loader::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--Color-Green, #FFF);
}

.loader::before {
    box-shadow: 4rem 0;
    transform: translateX(-4rem);
    animation: l9-1 .75s infinite linear alternate;
}

.loader::after {
    transform: translateX(2rem) rotate(0deg) translateX(2rem);
    animation: l9-2 .75s infinite linear alternate;
}

@keyframes l9-0 {

    0%,
    49.9% {
        transform: scale(1)
    }

    50%,
    100% {
        transform: scale(-1)
    }
}

@keyframes l9-1 {
    100% {
        box-shadow: 8rem 0
    }
}

@keyframes l9-2 {
    100% {
        transform: translateX(2rem) rotate(-180deg) translateX(2rem)
    }
}




.colorTeam {
    width: 50vw;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    margin-bottom: 5rem;
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
}

.colorRose {
    background-color: #f701a6;
    box-shadow: #f701a6ad 0px 19px 38px, #f701a638 0px 15px 12px;
}

.colorGreen {
    background-color: #33f2af;
    box-shadow: #33f2afad 0px 19px 38px, #33f2af38 0px 15px 12px;
}

.colorViolet {
    background-color: #805FF0;
    box-shadow: #805FF0ad 0px 19px 38px, #805FF038 0px 15px 12px;
}


dialog::backdrop {
    background-image: linear-gradient(#000,
            #aaa);
    opacity: 0.75;
}

@media (prefers-reduced-motion: no-preference) {

    dialog {
        transition: display 500ms allow-discrete, overlay 500ms allow-discrete;
        animation: close 500ms forwards;
    }

    dialog[open] {
        animation: open 200ms forwards;
    }
}

@keyframes open {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes close {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.pajama li:nth-child(odd) {
    background-color: #8888;
}

.number-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    width: 100%;
    /* percentage of parent width */
    max-width: 500px;
    /* optional: prevents container from becoming too wide */
    /*height: 1.75em;*/
    /*margin: 0 auto; /* centers the container */
    overflow: hidden;
}

.number-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.digit-group {
    display: flex;
    gap: 1px;
    height: 100%;
    /* Important pour que le groupe prenne toute la hauteur */
}

.digit-group img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.group-separator {
    width: 8px;
    height: 100%;
}

.grayImage img {
    filter: grayscale(1);
}

.grayScale {
    filter: grayscale(1);
}

.icon_progress {
    width: 2.5em;
}

.score_display {
    font-size: smaller;
}

@media screen and (min-width:1200) {
    .icon_progress {
        width: 3em;

    }

    .score_display {
        font-size: medium;
    }

}

@media screen and (min-width:1500px) {
    .icon_progress {
        width: 3.5em;

    }

    .score_display {
        font-size: larger;
    }

}

.noRightDisplay {
    display: none;
}

@media (aspect-ratio: 16/10) {
    #rightMenuDisplay {
        display: none;
    }

    .noRightDisplay {
        display: flex;
    }

}

.notdone {
    filter: grayscale(1);
    filter: opacity(0.1);
}

.notdone.dialogIcons {
    filter: opacity(0.);
    filter: blur(10em);
}

.MsoNormal {
    margin-top: 1em;
    margin-bottom: 1em;
}

ul .MsoNormal {
    margin-left: 1em;
}

.MsoListParagraphCxSpFirst {
    text-indent: -18.0pt
}




.buttonImage [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.buttonImage [type=radio]+img {
    cursor: pointer;
}

/* CHECKED STYLES */
.buttonImage [type=radio]:checked+img {
    outline: 2px solid #f00;
}

.chemins10 {
    display: grid;
    grid-template-columns: repeat(39, 1fr);
    row-gap: 1em;
}

.colums8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    row-gap: 1em;
}

.glitter {}

.glitter:hover {
    filter: brightness(150%);
}

.bgNotSelected {
    border-radius: 50%;
    background-color: #8880;
}

.bgSelected {
    border-radius: 50%;
    background-color: #8888;
}

.bgSelectedError {
    border-radius: 50%;
    background-color: #f44a;
}

.bgSelectedHighlight {
    border-radius: 50%;
    background-color: #f44a;
}

.bgSelectedHighlight2 {
    border-radius: 50%;
    background-color: #ff08;
}

.vh30 {
    height: 30vh;
}

.vh40 {
    height: 40vh;
}

.vh60 {
    height: 60vh;
}

.vh80 {
    height: 80vh;
}

.poem {
    text-align: left;
}

.article {
    text-align: justify;
}

.mirror {
    transform: scaleX(-1);
}

.article,
li {
    margin-left: 5em;
}

card_div_no,
.notdone {
    filter: grayscale(1) opacity(0.) !important;
}

#DevMode-DropFile {
    border: 5px solid #0000;
}

#DevMode-DropFile.onDrag {
    border: 5px dashed #888;
}

#DevMode-DropFile.onDrag::before {
    content: qeflsqdfjlsqmkdjfqsmdlkjqsmlfjqsldmkjf;
    color: red;
    font-size: 10em;

}

.fill {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    width: 100%; height: 100%;
}

.innerModalDialog {
    margin: auto;
    border-radius: 10px;
    padding: 2rem;
    min-width: 60vw;
    align-self: safe center;
}

@media (max-width: 1600px) {
    .main-frame-80 {
        max-width: 90%;
    }
}

@media (max-width: 1300px) {
    .hideSmall {
        display: none !important;
    }

    .main-4steps {
        grid-template-columns: 1fr 1fr;
    }

    .main-3steps {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .main-2steps {
        grid-template-columns: 1fr;
    }

    .main-frame-80 {
        max-width: 95%;
    }
    .vw10 {
        width: 30vw;
    }
    .vw5 {
        width: 17vw;
    }
    .vw3 {
        width: 10vw;
    }

    .main-profile {
        display: flex;
        flex-direction: column;
        column-gap: 3em;
        padding-left: 1em;
        padding-right: 1em;
    }

    .main-2steps-profile {
        grid-template-columns: 1fr 4fr;
    }

    .hamburger {
        display: flex;
        z-index: 10;
    }

    .main_title {
        font-size: 3.1rem;
    }

    .main_title_blue {
        font-size: 3.2rem;
    }

    .main_title2 {
        font-size: 2.25rem;
    }

    .main_title2_blue {
        font-size: 2.25rem;
    }

    .main_title3 {
        font-size: 1.85rem;
    }

    .main_title3_normal {
        font-size: 1.85rem;
    }

    .main_title3_blue {
        font-size: 1.85rem;
    }

    .BigAvatarWidth {
        width: 5em;
    }


    .article,
    li {
        margin-left: 2em;
    }

    .menu {
        position: fixed;
        top: 3rem;
        right: -100%;
        /*width: 70%;*/
        height: 100vh;
        background-color: #0000;
        flex-direction: column;
        padding: 2rem;
        transition: 0.3s;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .menu.active {
        right: 0;
    }

    /* Animation du hamburger */
    .hamburger.active span:first-child {
        transform: rotate(45deg) translate(0.75rem, 0.75rem);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:last-child {
        transform: rotate(-45deg) translate(0.5rem, -0.5rem);
    }
}


.recap table, .recap tr, .recap td, .recap th {
    border: 1px solid #aaa;
}
.recap tr:nth-child(even){background-color: #aaa8;}
.recap tr:hover{background-color: #aaf8;}

.recap table {
    border-collapse: collapse;
    width: 80%;
    margin: 1em 0;
}
.centerTD {
    margin: auto;
    text-align: center;
}
/* Modale pour lien magique */
.magic-link-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.magic-link-modal-content {
    background: var(--Color-Background);
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    color: var(--color-text);
}

.magic-link-modal h2 {
    margin-top: 0;
}

.magic-link-form-group {
    margin: 1.5rem 0;
}

.magic-link-form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.magic-link-form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background: var(--Color-Background);
    color: var(--color-text);
}

.magic-link-message {
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 4px;
    display: none;
}

.magic-link-message.success {
    background: #d4edda;
    color: #155724;
}

.magic-link-message.error {
    background: #f8d7da;
    color: #721c24;
}

.magic-link-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.button-cancel {
    background: #6c757d !important;
}

/* Messages de réponse pour la page code */
.response-message {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: 8px;
    display: none;
    text-align: center;
    font-weight: bold;
}

.response-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.response-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}