*, ::after, ::before {
    box-sizing: border-box;
}
:root {
    --pink: #b792f4;
    font-family: 'Inter', sans-serif;
    --cup-gray-light: #F5F5F5;
}
body {
    padding: 50px 30px 30px 30px;
    background-color: var(--white);
}
div, h1, h2, h3, h4, h5, h6, p, span,
input {
    font-family: 'Inter', sans-serif !important;
}
a {
    text-decoration: none;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black);
}
.main {
    max-width: 1200px;
    margin: 0px auto;
    width: 100%;
}
.is-flex {
    display: flex !important;
}
.is-justify-content-center {
    justify-content: center !important;
}
.is-align-items-center {
    align-items: center !important;
}
.is-hidden {
    display: none !important;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-50 {
    margin-top: 50px;
}
.mr-10 {
    margin-right: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
/** Logo */
.checkup-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
}
.checkup-logo img {
    max-height: 60px;
}
/** Fils d'arianne */
.checkup-fil-dariane {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 80px;
    max-width: 800px;
}
.line-ariane {
    width: 75%;
    background-color: var(--pink);
    height: 2px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 19px;

}
.checkup-ariane-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--black);
    z-index: 1;
    width: 110px;
    text-align: center;
}
.checkup-arian-etape {
    margin-bottom: 20px;
    background-color: var(--pink);
    color: var(--black);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkup-ariane-content.active .checkup-arian-etape {
    background-color: var(--accent);
    color: var(--secondary-normal);
}
@media screen and (max-width: 500px) {
    .checkup-fil-dariane {
        flex-direction: column;
        max-width: 180px;
        margin-bottom: 50px;
    }
    .checkup-ariane-content {
        margin-bottom: 20px;
        width: 100%;
        flex-direction: row;
    }
    .checkup-ariane-content:last-child {
        margin-bottom: 0px;
    }
    .checkup-arian-etape {
        margin-bottom: 0px;
        margin-right: 20px;
    }
    .line-ariane {
        height: 85%;
        width: 2px;
        left: 19px;
        top: 0px;
    }
}
/** General */
.checkup-title {
    width: 100%;
    font-weight: 800;
    font-size: 4rem;
    text-align: center;
    color: var(--black);
    line-height: normal;
}
.checkup-step-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 500;
    color: var(--black);
    line-height: normal;
}
.checkup-step-subtitle {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: var(--black);
    line-height: normal;
    margin-top: 10px;
    max-width: 800px;
}
.checkup-step-infos-text {
    margin-top: 20px;
    margin-bottom: 20px;
}
.checkup-step-infos-text p {
    font-weight: 500;
    text-align: center;
}
.checkup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.checkup-step-1,
.checkup-step-2,
.checkup-step-3,
.checkup-step-5 {
    padding-bottom: 20px;
}
@media screen and (max-width: 600px) {
    .checkup-title {
        font-size: 2.5rem;
    }
    .checkup-step-title {
        font-size: 2rem;
    }
    .checkup-step-subtitle {
        font-size: 1.5rem;
    }
}

/** Bouton retour en arrière */
.checkup-step-back-checkup, 
.checkup-step-back {
    display: flex;
    align-items: center;
    color: var(--secondary-normal);
    width: fit-content;
    padding: 5px 15px 5px 5px;
    border-radius: 90px;
    cursor: pointer;
    position: fixed;
    top: 40px;
    left: max(30px, 5%);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    z-index: 100;
}
.checkup-step-back-checkup a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.checkup-step-back-checkup p,
.checkup-step-back p {
    font-family: 'Inter';
    font-weight: 600;
}
.checkup-step-back-checkup svg,
.checkup-step-back svg {
    transform: rotate(180deg);
}
.checkup-step-back-checkup svg g,
.checkup-step-back svg g {
    fill: transparent;
}
.checkup-step-back-checkup svg path,
.checkup-step-back svg path {
    fill: var(--secondary-normal);
}
@media screen and (max-width: 500px) {
    .checkup-step-back-checkup,
    .checkup-step-back {
        padding: 1px 3px 1px 0;
    }
    .checkup-step-back-checkup p,
    .checkup-step-back p {
        display: none;
    }
    
}
/** Etape 1 et 2 - Cards choix*/
.checkup-step-content-choice {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    border-radius: 12px;
    border: 2px solid var(--secondary-normal);
    min-height: 110px;
    margin-top: 20px;
    cursor: pointer;
    color: var(--black);
}
.checkup-step-1 .checkup-step-content-choice {
    height: 110px;
}
.checkup-step-zone,
.checkup-step-content,
.checkup-step-next {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.checkup-step-content {
    width: 60%;
    font-size: 1.2rem;
    font-weight: 700;
}
.checkup-step-zone,
.checkup-step-next {
    width: 20%;
}
.checkup-step-next svg g {
    fill: transparent;
}
.checkup-step-next path {
    fill: #E0E0E0;
}
.checkup-step-content-choice:hover {
    background-color: var(--cup-gray-light);
    color: var(--secondary-normal);
}
.checkup-step-content-choice:hover .checkup-step-next path {
    fill: var(--secondary-normal);
}
.checkup-step-zone svg {
    max-width: 100%;
    max-height: 90%;
}
.checkup-step-content-choice .checkup-step-zone svg .cls-1 {
    fill: var(--accent);
}
.checkup-step-content-choice:hover .checkup-step-zone svg .cls-1 {
    fill: var(--secondary-normal);
}
@media screen and (max-width: 600px) {
    .checkup-step-content-choice{
        padding: 10px 0px 10px 20px;
    }
    .checkup-step-zone {
        display: none;
    }
    .checkup-step-content {
        width: 80%;
        text-align: left;
        justify-content: flex-start;
    }
}
/** Etape 3 - Date et Heure */
.checkup-dates-header,
.checkup-hours-header {
    width: 100%;
    max-width: 800px;
    font-size: 1.5rem;
    font-weight: 600;
}
.checkup-hours,
.checkup-dates {
    width: 100%;
    max-width: 800px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 3%;
}
.checkup-hours-choice,
.checkup-date-choice {
    padding: 40px 30px;
    display: flex;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
    border: 2px solid var(--secondary-normal);
    color: var(--black);
    cursor: pointer;
    width: 17.5%;
    min-width: 120px;
    font-weight: 600;
}
.checkup-hours-choice {
    padding: 20px 10px;
}
.checkup-hours-choice:hover,
.checkup-date-choice.active,
.checkup-date-choice:hover {
    background-color: var(--cup-gray-light);
    color: var(--secondary-normal);
}
.checkup-hours-choice[disabled] {
    border-color: var(--pink);
    background-color: var(--pink);
    color: var(--black);
    cursor: not-allowed;
}
.checkup-date-day-number {
    font-size: 2rem;
    font-weight: 700;
}
@media screen and (max-width: 750px) {
    .checkup-hours-choice,
    .checkup-date-choice {
        width: 22.5%;
    }
}
@media screen and (max-width: 600px) {
    .checkup-hours-choice,
    .checkup-date-choice {
        width: 31%;
    }
}
@media screen and (max-width: 450px) {
    .checkup-hours-choice,
    .checkup-date-choice {
        width: 48.5%;
    }
}
/** Etape 4 - Informations */
.checkup-label-content,
.checkup-checkbox-content,
.checkup-button-content,
.checkup-cgu-content {
    width: 100%;
    max-width: 800px;
    display: flex;
}

.checkup-label-content {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}
.checkup-label-content-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.checkup-checkbox-content {
    font-size: .875rem;
}
.checkup-label-content input,
.checkup-label-content input:focus,
.checkup-label-content input:focus-visible,
.checkup-label-content input:focus-within {
    outline: none;
    width: 100%;
    padding: 25px;
    background-color: var(--cup-gray-light);
    color: var(--black);
    border: 2px solid var(--secondary-normal);
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
}
.checkup-label-content input:-internal-autofill-previewed {
    appearance: menulist-button;
    background-image: none !important;
    background-color: var(--secondary-normal) !important;
    color: var(--black) !important;
}

/** Checkbox */
.checkup-checkbox-content {
    align-items: center;
    margin-top: 20px;
}
.checkup-checkbox-container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
}
.checkup-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent;
    border: 2px solid var(--secondary-normal);
    border-radius: 10px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0, 5);
}
.checkup-checkbox-container input:checked~.checkmark {
    background-color: var(--cup-gray-light);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkup-checkbox-container .checkmark:after {
    left: 32%;
    top: 12%;
    width: 45%;
    height: 60%;
    border: solid var(--secondary-normal);
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}
.checkup-checkbox-container input:checked~.checkmark:after {
    display: block;
}
.checkup-button-content {
    justify-content: flex-end;
    margin-top: 40px;
}
.checkup-step-cta {
    padding: 10px 20px;
    background-color: var(--secondary-normal);
    border-color: var(--secondary-normal);
    color: var(--white);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
}
.checkup-step-cta[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
.checkup-cgu-content {
    /* font-size: 0.875rem; */
    font-size: 0.75rem;
}
.checkup-cgu-content a {
    color: var(--black);
    text-decoration: underline;
}
/** Etape 5 - Récapitulatif */
.checkup-recap-button-content {
    justify-content: center;
    margin-top: 40px;
}
.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
/** Modales */
.confirm p {
    color: var(--black);
}
.confirm a p {
    color: var(--secondary-normal);
}