#heroSection {
    background: var(--secondary-gradient);
}

#heroSection .tag {
    background: var(--primary-gradient);
    color: white;
    margin: 0 auto 20px auto;
}

#heroSection h1 {
    text-wrap: balance;
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

#heroSection .intro {
    margin-bottom: 0;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

#heroSection figure {
    width: max-content;
    margin: 20px auto -6rem auto;
}

#heroSection figure img {
    width: 250px;
}

/* Processus Section */
#processus .content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#processus article {
    text-align: left;
}

#processus .theme {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#processus .theme .tag {
    background: var(--primary-gradient);
    color: white;
}

#processus .theme h3 {
    margin-top: 10px;
    text-wrap: balance;
}

#processus .theme .title-container {
    display: flex;
}

#processus .theme .title-container > div {
    padding-right: 10px;
}

#processus .theme .title-container i {
    margin: auto 0;
    color: orange;
    transition: all 0.3s ease;
}

#processus .theme.active .title-container i {
    rotate: 180deg;
}

#processus .desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}

#processus .desc > div {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#processus .desc strong {
    font-weight: bold;
}

#processus .desc em {
    font-style: italic;
}

#processus .desc ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 15px;
    line-height: 1.6;
    list-style-type: disc;
}

#processus .desc ul li ul {
    margin-top: 10px;
    list-style-type: circle;
}

#processus .desc ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 15px;
    line-height: 1.6;
    list-style-type: decimal;
}


/* Infos Section */
#infos {
    background: var(--tertary-gradient);
}

#infos article {
    border: none;
}

#infos h3 {
    margin: 15px 0 10px 0;
}

#infos #green {
    background: color-mix(in srgb, var(--green) 20%, white);
}

#infos #green .icon {
    background: var(--green);
}

#infos #green .details {
    background: white;
    border-radius: var(--low-radius);
    padding: 10px;
    margin-top: 10px;
}

#infos #red {
    background: color-mix(in srgb, var(--pink) 20%, white);
}

#infos #red .icon {
    background: var(--pink);
}

#infos #red .details {
    padding: 10px;
    border-radius: var(--low-radius);
    background: white;
}

#infos #red .details ul {
    margin: 10px auto;
    list-style-type: disc;
    padding-left: 15px;
    text-align: left;
    width: max-content;
}

#infos #red .details ul li {
    margin-top: 5px;
}

#infos #red .details p {
    font-style: italic;
    color: var(--pink);
}

#infos #yellow {
    background: color-mix(in srgb, var(--yellow) 20%, white);
}

#infos #yellow .icon {
    background: var(--yellow);
}

#infos #yellow .desc {
    text-wrap: balance;
    margin-bottom: 20px;
}

#infos #yellow .details {
    background: white;
    padding: 10px;
    border-radius: var(--low-radius);
    margin-top: 10px;
}


/* Avantages Section */
#avantages .tag {
    background: var(--primary-gradient);
    color: white;
    margin: 0 auto 20px auto;
}

#avantages article {
    text-wrap: balance;
}

#avantages article h3 {
    margin: 10px 0;
}

#avantages .citation {
    background: var(--blue-pink-gradient);
    margin-top: 30px;
    border: none;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

#avantages .citation .stars img {
    height: 25px;
}

#avantages .citation p {
    margin: 10px 0 15px 0;
    font-style: italic;
    text-wrap: balance;
}

#avantages .citation span {
    font-size: 14px;
    color: black;
    font-weight: 500;
}


/* CTA Section */
#cta {
    background: var(--quaternary-gradient);
}

#cta a {
    margin-left: auto;
    margin-right: auto;
}


    /* Pad Version */
    @media screen and (min-width: 768px) {
        /* Section accueil */
        #heroSection figure {
            margin: 20px auto -7rem auto;
        }


        /* Processus Section */
        #processus .content {
            max-width: 750px;
            margin-left: auto;
            margin-right: auto;
        }

        #processus .theme {
            gap: 15px;
        }

        #processus .theme .title-container {
            width: 100%;
            justify-content: space-between;
        }

        #processus .desc > div {
            margin-top: 20px;
        }

        #processus article .icon {
            margin: 0;
        }

        /* Infos Section */
        #infos article {
            width: calc(50% - 10px);
        }

        #infos h3 {
            margin-bottom: 15px;
        }

        #infos #green .details,
        #infos #red .details,
        #infos #yellow .details {
            margin-top: 15px;
            padding: 15px;
        }

        #infos #yellow {
            width: 100%;
        }


        /* Avantages Section */
        #avantages article {
            width: calc(50% - 10px);
        }

        #avantages .citation {
            margin-top: 40px;
        }

        #avantages .citation span {
            font-size: 15px;
        }
    }


        /* Desktop Version */
        @media screen and (min-width: 992px) {
            /* Section accueil */
            #heroSection .section-container {
                display: flex;
                justify-content: space-between;
                gap: 60px;
            }

            #heroSection .tag {
                margin-left: 0;
            }

            #heroSection h1,
            #heroSection .intro {
                text-align: left;
            }

            #heroSection figure {
                margin: 0 auto -8rem auto;
            }

            #heroSection figure img {
                width: 275px;
            }


            /* Processus Section */
            #processus .content {
                max-width: 850px;
            }

            #processus .theme {
                gap: 20px;
            }


            /* Infos Section */
            #infos .cards-container {
                justify-content: center;
                flex-wrap: nowrap;
            }

            #infos article {
                width: 100%;
            }

            #infos #green .details,
            #infos #red .details,
            #infos #yellow .details {
                margin-top: 20px;
                padding: 20px;
            }


            /* Avantages Section */
            #avantages .cards-container {
                flex-wrap: nowrap;
            }

            #avantages article {
                width: 100%;
            }

            #avantages .citation {
                max-width: 550px;
                margin-top: 50px;
            }

            #avantages .citation span {
                font-size: 16px;
            }
        }