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

:root {
    --pinkfull: #d38bc9;
    --bluefull: #2a1b80;
    --purplefull: #845cc1;
    --pinkmedium: #e5b7e1;
    --bluemedium: #8f9be1;
    --purplemedium: #c6b7e5;
    --pinkmedium50: hsla(305, 47%, 81%, 0.5);
    --bluemedium50: hsla(231, 58%, 72%, 0.5);
    --purplemedium50: hsla(260, 47%, 81%, 0.5);
    --green: #6aba78;
    --red: #ba6a6a;
    --transparent50 : hsla(287, 32%, 91%, 0.50);
    --transparent80 : hsla(287, 32%, 91%, 0.80);
    --purplefull50: hsla(264, 37%, 57%, 0.5);
}

html{
    scrollbar-width: thin;
    scrollbar-color: var(--pinkfull) white;
}

body {
    background-color: white;
    scrollbar-width: thin;
    scrollbar-color: var(--pinkfull) white;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}


/*ASSETS*/

body::after {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 45vh;
    background: linear-gradient(45deg, var(--bluefull) 10%, var(--pinkfull) 80%);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2435.81 822.09"><g><path fill="white" d="M2312.81,708.39h-234.98c3.16-13.31,4.76-26.98,4.76-40.9,0-23.83-4.68-46.96-13.89-68.75-8.9-21.03-21.63-39.92-37.84-56.13s-35.1-28.94-56.13-37.84c-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.88,44.92-13.88,68.75,0,13.92,1.59,27.59,4.75,40.9H638.89c3.17-13.31,4.76-26.98,4.76-40.9,0-23.83-4.67-46.96-13.88-68.75-8.9-21.03-21.63-39.92-37.84-56.13-16.21-16.21-35.1-28.94-56.13-37.84-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.89,44.92-13.89,68.75,0,12.13,1.21,24.07,3.62,35.75l-107.3-31.23c-46.11-13.42-78.52-54.71-80.68-102.68-2.65-58.53,2.42-134.44,30.49-217.34,25.57-75.48,63.15-135.93,101.06-182.67,59.06-72.8,142.67-121.61,234.99-137.85,20.73-3.65,41.85-7.04,63.34-10.14,206.8-29.82,394.79-25.09,554.67-5.91,47.68,5.72,94.4,17.64,139.09,35.22,213.7,84.02,427.4,168.04,641.1,252.07l245.69,49.68c161.31,32.61,254.81,202.18,196.3,356Z"/><path fill="white" d="M621.65,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.12,113.7s-131.21-48.16-149.14-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.22-154.61,154.61-154.61s154.6,69.22,154.6,154.61Z"/><path fill="white" d="M2060.59,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.13,113.7s-131.2-48.16-149.13-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.21-154.61,154.6-154.61s154.61,69.22,154.61,154.61Z"/><rect x="0" y="0" width="104.38" height="822.09" fill="black"/><rect x="2331.43" y="0" width="104.38" height="822.09" fill="black"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2435.81 822.09"><g><path fill="white" d="M2312.81,708.39h-234.98c3.16-13.31,4.76-26.98,4.76-40.9,0-23.83-4.68-46.96-13.89-68.75-8.9-21.03-21.63-39.92-37.84-56.13s-35.1-28.94-56.13-37.84c-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.88,44.92-13.88,68.75,0,13.92,1.59,27.59,4.75,40.9H638.89c3.17-13.31,4.76-26.98,4.76-40.9,0-23.83-4.67-46.96-13.88-68.75-8.9-21.03-21.63-39.92-37.84-56.13-16.21-16.21-35.1-28.94-56.13-37.84-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.89,44.92-13.89,68.75,0,12.13,1.21,24.07,3.62,35.75l-107.3-31.23c-46.11-13.42-78.52-54.71-80.68-102.68-2.65-58.53,2.42-134.44,30.49-217.34,25.57-75.48,63.15-135.93,101.06-182.67,59.06-72.8,142.67-121.61,234.99-137.85,20.73-3.65,41.85-7.04,63.34-10.14,206.8-29.82,394.79-25.09,554.67-5.91,47.68,5.72,94.4,17.64,139.09,35.22,213.7,84.02,427.4,168.04,641.1,252.07l245.69,49.68c161.31,32.61,254.81,202.18,196.3,356Z"/><path fill="white" d="M621.65,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.12,113.7s-131.21-48.16-149.14-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.22-154.61,154.61-154.61s154.6,69.22,154.6,154.61Z"/><path fill="white" d="M2060.59,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.13,113.7s-131.2-48.16-149.13-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.21-154.61,154.6-154.61s154.61,69.22,154.61,154.61Z"/><rect x="0" y="0" width="104.38" height="0" fill="black"/><rect x="2331.43" y="0" width="104.38" height="0" fill="black"/></g></svg>');
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: center bottom;
    -webkit-mask-size: contain;
    mask-repeat: repeat-x;
    mask-position: center bottom;
    mask-size: contain;
    pointer-events: none;
    z-index: -1;
    animation: none;
    opacity:0.4;
}

body#body--home::after{
    opacity:1;
}

body#body--discovery::after{
        content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 15vh;
    background: linear-gradient(45deg, var(--bluefull) 10%, var(--pinkfull) 80%);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2435.81 822.09"><g><path fill="white" d="M2312.81,708.39h-234.98c3.16-13.31,4.76-26.98,4.76-40.9,0-23.83-4.68-46.96-13.89-68.75-8.9-21.03-21.63-39.92-37.84-56.13s-35.1-28.94-56.13-37.84c-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.88,44.92-13.88,68.75,0,13.92,1.59,27.59,4.75,40.9H638.89c3.17-13.31,4.76-26.98,4.76-40.9,0-23.83-4.67-46.96-13.88-68.75-8.9-21.03-21.63-39.92-37.84-56.13-16.21-16.21-35.1-28.94-56.13-37.84-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.89,44.92-13.89,68.75,0,12.13,1.21,24.07,3.62,35.75l-107.3-31.23c-46.11-13.42-78.52-54.71-80.68-102.68-2.65-58.53,2.42-134.44,30.49-217.34,25.57-75.48,63.15-135.93,101.06-182.67,59.06-72.8,142.67-121.61,234.99-137.85,20.73-3.65,41.85-7.04,63.34-10.14,206.8-29.82,394.79-25.09,554.67-5.91,47.68,5.72,94.4,17.64,139.09,35.22,213.7,84.02,427.4,168.04,641.1,252.07l245.69,49.68c161.31,32.61,254.81,202.18,196.3,356Z"/><path fill="white" d="M621.65,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.12,113.7s-131.21-48.16-149.14-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.22-154.61,154.61-154.61s154.6,69.22,154.6,154.61Z"/><path fill="white" d="M2060.59,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.13,113.7s-131.2-48.16-149.13-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.21-154.61,154.6-154.61s154.61,69.22,154.61,154.61Z"/><rect x="0" y="0" width="104.38" height="822.09" fill="black"/><rect x="2331.43" y="0" width="104.38" height="822.09" fill="black"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2435.81 822.09"><g><path fill="white" d="M2312.81,708.39h-234.98c3.16-13.31,4.76-26.98,4.76-40.9,0-23.83-4.68-46.96-13.89-68.75-8.9-21.03-21.63-39.92-37.84-56.13s-35.1-28.94-56.13-37.84c-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.88,44.92-13.88,68.75,0,13.92,1.59,27.59,4.75,40.9H638.89c3.17-13.31,4.76-26.98,4.76-40.9,0-23.83-4.67-46.96-13.88-68.75-8.9-21.03-21.63-39.92-37.84-56.13-16.21-16.21-35.1-28.94-56.13-37.84-21.79-9.21-44.92-13.89-68.75-13.89s-46.96,4.68-68.75,13.89c-21.03,8.9-39.92,21.63-56.13,37.84s-28.94,35.1-37.84,56.13c-9.21,21.79-13.89,44.92-13.89,68.75,0,12.13,1.21,24.07,3.62,35.75l-107.3-31.23c-46.11-13.42-78.52-54.71-80.68-102.68-2.65-58.53,2.42-134.44,30.49-217.34,25.57-75.48,63.15-135.93,101.06-182.67,59.06-72.8,142.67-121.61,234.99-137.85,20.73-3.65,41.85-7.04,63.34-10.14,206.8-29.82,394.79-25.09,554.67-5.91,47.68,5.72,94.4,17.64,139.09,35.22,213.7,84.02,427.4,168.04,641.1,252.07l245.69,49.68c161.31,32.61,254.81,202.18,196.3,356Z"/><path fill="white" d="M621.65,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.12,113.7s-131.21-48.16-149.14-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.22-154.61,154.61-154.61s154.6,69.22,154.6,154.61Z"/><path fill="white" d="M2060.59,667.49c0,14.16-1.9,27.88-5.48,40.9-17.92,65.54-77.9,113.7-149.13,113.7s-131.2-48.16-149.13-113.7c-3.57-13.02-5.47-26.74-5.47-40.9,0-85.39,69.21-154.61,154.6-154.61s154.61,69.22,154.61,154.61Z"/><rect x="0" y="0" width="104.38" height="0" fill="black"/><rect x="2331.43" y="0" width="104.38" height="0" fill="black"/></g></svg>');
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: center bottom;
    -webkit-mask-size: contain;
    mask-repeat: repeat-x;
    mask-position: center bottom;
    mask-size: contain;
    pointer-events: none;
    z-index: -1;
    animation: none;
    opacity:1;
}

@keyframes maskMove {
    0% {
        -webkit-mask-position: center bottom;
        mask-position: center bottom;
    }

    100% {
        -webkit-mask-position: right bottom;
        mask-position: 150vw bottom;
    }
}

h1 {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 11vw, 80px);
    background: linear-gradient(45deg, var(--bluefull) 10%, var(--pinkfull) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ff0080;
    width: fit-content;
    text-align: center;
    margin: auto;
}

h2 {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 35px;
    text-align:center;
    color:white;
}

/* h3 {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 30px;
} */

p {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 20px;
    display: block;
    color: black;
}

.p--date{
    text-align:center;
    font-size : 22px;
}

span{
    font-weight: 400;
}

a{
    text-decoration : none;
}

.link {
    text-decoration:underline;
    cursor:pointer;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-align:center;
    display:block;
    color : white;
}

.link:hover {
    color: var(--pinkfull);
}

.link:active {
    color: var(--pinkmedium);
}

button {
    width: 220px;
    max-width:96%;
    height: 60px;
    font-weight: 800;
    font-size: 20px;
    display: block;
    background-color: var(--pinkfull);
    color: white;
    border-radius: 10px;
    border: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin:auto;
}

button::after {
    content: "";
    background-color: white;
    opacity: 0%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 70%;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="8"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    mask-repeat: no-repeat;
    mask-size: 70%;
    mask-position: center;
    transition: 0.3s ease-in-out;
}

button:hover::after {
    opacity: 10%;
    -webkit-mask-position: left;
    mask-position: left;
}

button:active {
    background-color: var(--pinkmedium)
}

.btn_blue{
background-color:var(--bluefull)
}

.btn_blue:active{
background-color:var(--bluemedium)
}

.btn_little{
    font-size : 18px;
}

form > a > button, .form-group > button, form > button, .card > button {
    width : 65%;
}

select{
    background-color : var(--purplefull);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(5px,5vw,24px);
    border-radius : 25px;
    height : 50px;
    border : 0px;
    padding : 2px 40px;
    cursor:pointer;
    max-width : 80%;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 83.68 73'><path fill='%23ede2f0' d='M43.57 72L83.41 3c.77-1.33-.19-3-1.73-3H2C.46 0-.5 1.67.27 3l39.84 69c.77 1.33 2.69 1.33 3.46 0Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
}

select:hover{
    border : 0.5px solid var(--pinkmedium);
}

select:focus-visible{
    border-top:1px solid gray;
    border-right:1px solid gray;
    border-left:1px solid gray;
    border-radius : 25px 25px 0px 0px;
    outline:0px;
}

select > option {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(5px,5vw,24px);
    display:block;
}

label{
    display:block;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 22px;
    display: block;
    color: white;
    margin-bottom : 2px;
}

input {
    background-color : var(--pinkmedium50);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
    border-radius : 10px;
    width : 100%;
    height : 60px;
    border : 0px;
    padding : 8px;
}

input::placeholder{
    color : var(--pinkmedium);
}

input:hover {
    border : 0.5px solid var(--pinkmedium);
}

input:focus {
    border : 2px solid white;
    outline:0px;
}

input:disabled {
    border : 0px
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected {

    -webkit-text-fill-color: var(--purplefull);
}


#remember-me{
    width : 26px;
    height:26px;
    position:relative;
}

input[type="checkbox"] {
    background-color : var(--pinkmedium50);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
    border-radius : 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    border : 0px;
    padding : 0px;
    position:absolute;
    z-index : 2;
    cursor:pointer;
}

input[type="date"] {
    background-color : var(--bluefull);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 180px;
    width : 120%;
    height : 140px;
    border : 0px;
    padding : 8px;
    display:block;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

/*#date-container{
    background-color : var(--bluefull);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 17.5px;
    border-radius : 150px;
    width : 100%;
    height : 40px;
    border : 0px;
    padding : 8px;
    cursor:pointer;
    display:block;
    background-image: none;
    text-align:center;
    pointer-events: none;
}*/

#date-container{
    overflow:hidden;
    border-radius : 150px;
    width : 100%;
    height : 40px;
    position:relative;
}


#date-container::after{
    content: "";
    background-color: white;
    opacity: 0%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 70%;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="8"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    mask-repeat: no-repeat;
    mask-size: 70%;
    mask-position: center;
    transition: 0.3s ease-in-out;
    pointer-events:none;
    z-index:3;
}

#date-container:hover::after {
    opacity: 10%;
    -webkit-mask-position: left;
    mask-position: left;
}

#date-container:active {
    background-color: var(--bluemedium)
}

#month-container{
position:absolute;
    width : 100%;
    height : 40px;
    background-color : var(--bluefull);
    z-index:2;
    pointer-events:none;
        font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(5px,2.5vw,18px);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}


input[type="time"] {
    background-color : var(--pinkmedium50);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 20px;
    border-radius : 10px;
    width :46%;
    height : 45px;
    border : 0px;
    padding : 0px;
    margin:auto;
    overflow:hidden;
    padding-block: 0px;
    padding-inline: 0px;
    -webkit-appearance: none; /* Chrome/Safari */
    -moz-appearance: textfield; /* Firefox */
    appearance: none; /* Standard */
    text-align:center;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.custom-checkbox {
  display:block;
  width: 100%;
  height: 100%;
  border : 0px solid var(--pinkmedium);
  position:absolute;
  border-radius: 4px;
  cursor:pointer;
  z-index : 1;
  background-color:var(--pinkmedium50);
}

input[type="checkbox"]:hover + .custom-checkbox{
    border : 0.5px solid var(--pinkmedium);
}

input[type="checkbox"]:active + .custom-checkbox{
    border : 2px solid white;
}

input[type="checkbox"]:checked + .custom-checkbox{
    /* coche blanche centrée */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M20.285 6.709a1 1 0 0 0-1.414-1.418L9 15.162l-3.871-3.87a1 1 0 0 0-1.414 1.414l4.578 4.577a1 1 0 0 0 1.414 0l10.578-10.576z'/></svg>");
background-repeat: no-repeat;
background-position: center;
background-size: 120%;
    background-color : var(--pinkfull);
    border : 2px solid white;
}

.inline_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;
    width: fit-content;
    margin: auto;
}

.inline_wrapper--home{
    gap : 40px;
}

.inline_wrapper--form{
    gap : 8px;
}

.inline_card{
    display:grid;
    grid-template-columns: 500px 1fr;
    grid-template-rows: calc(100vh - 120px);
    gap : 20px;
}

.inline_far{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

#main-personnal{
    margin-top:80px;
}

/*AUTRE CSS*/

.text-container {
    margin: 40px auto;
    max-width: 500px;
}

.video-container > video{
width : 100%;
height:auto;
background-color:white;
margin:auto;
display:block;
margin-bottom : 20px;
}

.card{
padding : 30px 40px;
background: #4344AA;
background: linear-gradient(45deg, var(--bluefull) 10%, var(--pinkfull) 80%);
border-radius: 20px;
margin: 20px auto;
}

.card > p ,.inline_wrapper > p{
    color:white;
    text-align:center;
}

.card-small{
width : 540px;
max-width : 95%;
height : fit-content;
}

.card-full{
width : 100%;

}

.card--scroll{
    overflow-y:scroll;
    overflow-x:hidden;
    scrollbar-width: thin;
    scrollbar-color: white rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card--multi{
    display:flex;
    flex-direction:column;
    gap : 20px;
}
.form-group{
    margin-bottom : 25px;
    transition: all 0.6s ease;
}

#password{
    margin-bottom : 10px;
}

.container-next-to{
    position:relative;
}

.next-to-input{
position:absolute;
width : 45px;
height : 45px;
top : 7.5px;
right : 7.5px;
cursor:pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#toggle-password{
background-image: url("data:image/svg+xml,%3Csvg id='Calque_2' data-name='Calque 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.81 266.32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D .cls-1, .cls-2 %7B stroke: %23fff; stroke-miterlimit: 10; stroke-width: 6px; %7D .cls-2 %7B fill: %23e5b7e1; %7D %3C/style%3E%3C/defs%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cpath class='cls-2' d='M504.23,136.45c-4.28,6.71-83.54,125.98-242.27,126.86-104.8.58-203.9-50.66-258.38-133.45C7.85,123.16,87.11,3.89,245.85,3c104.8-.58,203.9,50.66,258.38,133.45Z'/%3E%3Ccircle class='cls-1' cx='253.9' cy='133.16' r='79.86'/%3E%3C/g%3E%3C/svg%3E");

}

#cadenas{
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375.52 453.04'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23e4b6e0;stroke:%23fff;stroke-miterlimit:10;stroke-width:6px;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-2' d='M322.52 142.62h-13.8V73c0-38.6-31.41-70-70-70H136.81c-38.6 0-70 31.4-70 70v69.62H53c-27.61 0-50 22.39-50 50v207.42c0 27.61 22.39 50 50 50h269.52c27.62 0 50-22.39 50-50V192.62c0-27.61-22.38-50-50-50Zm-184.08 242.23 34.84-95.41c-16.11-5.91-27.61-21.39-27.61-39.54 0-1.69.1-3.35.3-4.99 2.46-20.9 20.24-37.1 41.79-37.1s39.33 16.2 41.79 37.1c.2 1.64.3 3.3.3 4.99 0 18.15-11.49 33.63-27.61 39.54l34.84 95.41h-98.64Zm130.28-242.23H106.81V73c0-16.54 13.46-30 30-30h101.91c16.54 0 30 13.46 30 30v69.62Z'/%3E%3Cpath class='cls-1' d='M138.44 384.85l34.84-95.41c-16.11-5.91-27.61-21.39-27.61-39.54 0-1.69.1-3.35.3-4.99 2.46-20.9 20.24-37.1 41.79-37.1s39.33 16.2 41.79 37.1c.2 1.64.3 3.3.3 4.99 0 18.15-11.49 33.63-27.61 39.54l34.84 95.41h-98.64Z'/%3E%3C/g%3E%3C/svg%3E");
}

#modify{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 309.56 491.34'%3E%3Cstyle%3E.cls-1{fill:%23e4b6e0;stroke:%23fff;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:6px;}.cls-2{fill:%23fff;}%3C/style%3E%3Cg%3E%3Cpolygon class='cls-1' points='24.25 361.88 205.95 43.51 287.3 90.48 102.43 407.01 24.25 361.88'/%3E%3Cpath class='cls-1' d='M240.89,12.82h40.5c14.75,0,26.72,11.97,26.72,26.72v31.35h-93.94v-31.35c0-14.75,11.97-26.72,26.72-26.72Z' transform='translate(55.91 -124.96) rotate(30)'/%3E%3Cpolygon class='cls-1' points='102.98 406.06 2.96 489.04 24.8 360.92 102.98 406.06'/%3E%3Cpolygon class='cls-2' points='11.74 453.62 30.96 464.71 7.47 483.69 8.68 456.34 11.74 453.62'/%3E%3C/g%3E%3C/svg%3E");
}


/*

    background-image: url("data:image/svg+xml,%3Csvg id='Calque_2' data-name='Calque 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.81 380.69'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D .cls-2 %7B fill: %23e5b7e1; stroke: %23fff; stroke-miterlimit: 10; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cpath class='cls-2' d='M504.23,193.63c-4.28,6.71-83.54,125.98-242.27,126.86-104.8.58-203.9-50.66-258.38-133.45,4.28-6.71,83.54-125.98,242.27-126.86,104.8-.58,203.9,50.66,258.38,133.45Z'/%3E%3Cpath class='cls-1' d='M441.31,17.06L80.63,377.76c-1.96,1.95-4.52,2.93-7.08,2.93s-5.11-.98-7.07-2.93c-3.9-3.9-3.9-10.24,0-14.14L427.17,2.93c3.91-3.9,10.24-3.9,14.14,0,3.91,3.91,3.91,10.24,0,14.14Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain;
*/

/*HEADER*/
nav{
    position:absolute;
    left:0px;
    top : 0px;
    width : 100%;
}

nav > ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 60px;    
    background-color:var(--transparent50);
    height : 80px;
    width : 100%;
    padding : 10px 20px;
    border-bottom: 2px white solid;
    position:relative;
}

nav > ul.nav-open::before {
    margin-left: 0px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

li{
    max-width : 95%;
}

.nav-menu{
    display:none;
    gap : 40px;
}

.nav-menu > button {
    height : 60px;
    width : 80px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJz4KICA8cmVjdCB4PSczJyB5PSc2JyB3aWR0aD0nMTgnIGhlaWdodD0nMi4yJyByeD0nMC41JyBmaWxsPScjRDM4QkM5Jy8+CiAgPHJlY3QgeD0nMycgeT0nMTEnIHdpZHRoPScxOCcgaGVpZ2h0PScyLjInIHJ4PScwLjUnIGZpbGw9JyNEMzhCQzknLz4KICA8cmVjdCB4PSczJyB5PScxNicgd2lkdGg9JzE4JyBoZWlnaHQ9JzIuMicgcng9JzAuNScgZmlsbD0nI0QzOEJDOScvPgo8L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.nav-menu > button::after{
    -webkit-mask-size: 130%;
        mask-size: 130%;
}

.nav-logo > a {
    display: block;
    width: 90px;
    height: 60px;
    background: url(../medias/logo-ac.svg) no-repeat center / contain;
}

.nav-link > a {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
    display: block;
    color: black;
    width : 250px;
    text-align:center;
    background-color : var(--bluefull);
    border-radius : 10px;
    height : 50px;
    align-content: center;
    color:white;
    position:relative;
    z-index:11;
}

.nav-link > a::after {
    content: "";
    background-color: white;
    opacity: 0%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 70%;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="8"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    mask-repeat: no-repeat;
    mask-size: 70%;
    mask-position: center;
    transition : 0.3s ease-in-out;
}

.nav-link > a:hover::after {
    opacity: 10%;
    -webkit-mask-position: left;
    mask-position: left;
}

.nav-link > a:active {
    background-color: var(--bluemedium)
}

.nav-selected a {
    background-color : var(--purplefull);
}

.nav-selected > a:active {
    background-color: var(--purplemedium)
}

/*DASHBOARD*/
.intern-card{
    background-color: var(--bluemedium50);
    border: 2px solid white;
    border-radius : 15px;
    padding : 15px;
    margin : 0px auto;

}

.intern-card > p {
    color:white;
}

/*CALENDAR*/
#calendar-container{
    display:grid;
    grid-template-columns: 150px 1fr;
    gap : 20px;
    margin-top : 15px;

    height:calc(100vh - 300px); /*MODIF?*/
}

#calendar-settings{
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 40px 1fr 40px;
    gap : 10px;
}


#prev,#next{
    width : 45%;
    height:40px;
    border-radius: 150px;
    background-repeat:no-repeat;
    background-size:35%;
    background-position:center;
}

#prev{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 83.68"><path fill="%23ede2f0" d="M1,43.57l69,39.84c1.33.77,3-.19,3-1.73V2c0-1.54-1.67-2.5-3-1.73L1,40.11c-1.33.77-1.33,2.69,0,3.46Z"/></svg>');
}

#next{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 83.68"><path fill="%23ede2f0" d="M72,40.11L3,.27C1.67-.5,0,.46,0,2v79.67c0,1.54,1.67,2.5,3,1.73l69-39.84c1.33-.77,1.33-2.69,0-3.46Z"/></svg>');
}

.controls > button::after{
    -webkit-mask-size: 165%;
    mask-size: 165%;
}

#schedules{
    background-color:var(--bluefull);
    border-radius:15px;
    width : 85%;
    margin: 0px auto;
    display:grid;
    grid-template-rows: repeat(8, 1fr);
}

#schedules > p {
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  font-size : clamp(5px,3.5vw,20px)
}

.day {
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 40px 1fr 40px;
    gap : 10px;
}

.day-header{
    background-color : var(--bluefull);
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 20px;
    border-radius : 150px;
    width : 100%;
    height : 40px;
    border : 0px;
    padding : 8px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

.day-hours{
    background-color: var(--bluefull);
    border-radius:15px 15px 0px 0px;
    display:grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(32, 1fr);
    cursor:pointer;
}

.hours-highlight {
    background: rgba(150, 100, 255, 0.25);
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.day-controls{
    background-color:var(--bluefull);
    margin-top:-10px;
    border-radius : 0px 0px 15px 15px;
    width : 100%;
}

.day-event{
    background-color: var(--bluemedium50);
    width:95%;
    margin : 0 auto;
    border-radius : 15px;
    z-index:3;
    cursor:auto;
}

.day-event--receipt-student{
    z-index:2;
background-color: var(--purplefull);
    width:90%;
}

.day-event--receipt-teacher{
    background-color: var(--bluemedium50);
    z-index:1;
}

.day-event--receipt-student-teacher{
    z-index:2;
background-color: var(--bluemedium50);
    width:90%;
}

.day-event--receipt-teacher-teacher{
    
    background-color: var(--purplefull);
    z-index:1;
}



.temp-event{
background-color: var(--purplefull50);
}

/*.eleve{
background-color: var(--bluemedium);
z-index:1;
pointer-events:none;
}*/


.day-event > p{
    color:white;
    font-size : 100%;
    text-align:center;
    display:block;
    position:absolute;
    top : 0px;
    left:0px;
    width : 100%;
}

#hours-remaining{
    background-color : var(--purplefull);
    border-radius : 25px;
    height : 50px;
    padding : 2px 10px;
    display:flex;
    justify-content:center;
    align-items:center;
    max-width : 50%;
}

#hours-remaining > p{
    color:white;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
}

#button-hours, #delete-btn{
    width : 94%;
    height:40px;
    position:absolute;
    top : 22px;
    left:50%;
    transform:translate(-50%,0);
}

#button-hours::after, #delete-btn::after{
    -webkit-mask-size: 85%;
        mask-size: 85%;
}



/*TABLETTE*/
@media (max-width: 1220px) {
    nav > ul {
    align-items: start;
    width : 100vw;
    height:80px;
    flex-direction:column;
}
nav > ul::before{
    content:'';
    position:absolute;
    height : calc(100vh - 80px);
    width : 300px;
    background-color:var(--transparent80);
    left : 0px;
    top:80px;
    margin-left:-300px;
    transition : 0.3s ease-in-out;
    z-index:10;
}
nav ul.nav-open::before {
    margin-left: 0px;
}
    .nav-menu{
        display:flex;
    }
    .nav-logo{
    position : absolute;
    top : 10px;
    left:120px;
}
.nav-link > a{
    margin-left:-300px;
    max-width : 85vw;
}
.nav-link > a.link-open{
    margin-left: 0px;
}

    #hide--dashboard{
    display:none;
}

}

/*MOBILE*/
@media (max-width: 720px) {
    body::after {
        bottom: 0vh;
        -webkit-mask-size: cover;
        mask-size: cover;
    }
    #hide{
    display:none;
}
#calendar-container{
grid-template-columns:1fr 2fr;
}

}










#discovery-footer{
    margin-top : 45px;
    margin-bottom : 240px;
}













    #calendar-days {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(7, 1fr);
    }

#calendar-days--dashboard {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }



    .time-block {
        position: absolute;
        background: rgba(0, 123, 255, 0.5);
        border: 2px solid #007bff;
        border-radius: 6px;
    }


    /* 3 jours (Tablette) */
    @media (max-width: 1220px) {
        #calendar-days {
            grid-template-columns: repeat(3, 1fr);
        }
                #calendar-days--dashboard {
            grid-template-columns: 1fr;
        }
    }
            @media (max-width: 960px) {
        .inline_card{
            grid-template-columns: 1fr 400px;
        }
    }


    @media (max-width: 720px) {
        #calendar-days {
            grid-template-columns: repeat(1, 1fr);
        }
        .card--none{
            display:none;
        }
        .inline_card{
            grid-template-columns: 1fr;
        }
    }














/* Bulle bleue */
#help-bubble {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 55px;
    height: 55px;
    background: var(--bluefull);
    border-radius: 50%;
    color: white;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
}
#help-bubble > div{
    height:100%;
    width:100%;
        display:flex;
    justify-content:center;
align-items:center;
}

#help-bubble > div::after {
    content: "";
    background-color: white;
    opacity: 0%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 280%;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848 353.72"><defs><filter id="blur"><feGaussianBlur stdDeviation="8"/></filter></defs><g filter="url(%23blur)"><polygon fill="white" points="284.37 0 123.41 0 20 353.72 180.96 353.72 284.37 0"/><polygon fill="white" points="848 0 447.7 0 344.29 353.72 764.59 353.72 848 0"/></g></svg>');
    mask-repeat: no-repeat;
    mask-size: 280%;
    mask-position: center;
    transition: 0.3s ease-in-out;
}

#help-bubble > div:hover::after {
    opacity: 10%;
    -webkit-mask-position: left;
    mask-position: left;
}

#help-bubble:active {
    background-color: var(--bluemedium)
}

/* Tableau flottant */
#help-table {
    position: fixed;
    bottom: 90px; /* juste au-dessus de la bulle */
    left: 20px;
    background-color:var(--bluefull);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    display: none; /* masqué au départ */
    z-index: 9999;
}

#help-table table {
    border-collapse: collapse;
    width: 260px;
}

#help-table th,
#help-table td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
    text-align: left;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: white;
}

#help-table th {
    background-color:var(--bluefull);
}