/*******************************************************************
                STYLE POUR LA PAGE DE CALENDRIERS
********************************************************************/
.calendrier_section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    & .calendrier_titres {
        & .calendrier_consulter_texte {
            color: var(--main-couleur-texte-principale);
            text-align: center;

            & strong {
                font-size: calc(var(--mobile-taille-grosTitresSecondaires) * 1.5);
                font-family: var(--police-titres);
            }
        }
    }

    & .photo_fond {
        grid-row-start: 1;
        grid-column-start: 1;
    }

    & .calendrier_composant {
        position: relative;
        display: grid;
        place-items: center;

        & source {
            display: none;
        }

        & .timee_recherche {
            animation: 6s ease-in-out 0s infinite normal none running float;
            z-index: 40;
            position: absolute;
            width: 9.5rem;
            top: -3.5rem;
            left: -4rem;
            filter: drop-shadow(4px 9px 0 #AC72E4);
        }

        & .tablette {
            min-width: 19rem;
            width: 60vw;
            border: 1px solid var(--couleur-accent-secondaire);
            box-shadow: var(--couleur-effet-decalage-5);
            border-radius: 0.7rem;
        }

        & .calendrier {
            z-index: 30;
            height: 88%;
            min-width: 16rem;
            width: 52vw;
            object-fit: cover;
            grid-row-start: 1;
            grid-column-start: 1;
            filter: brightness(0.5);
        }

        & .decoration_degrade {
            background: linear-gradient(0deg, #c92c9f54 -0.03%, rgb(1 1 1 / 0%) 50.63%, rgb(1 1 1 / 11%) 99.63%);
            z-index: 32;
            height: 88%;
            min-width: 16rem;
            width: 52vw;
            grid-row-start: 1;
            grid-column-start: 1;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            border-left: 1px solid white;
            border-image: initial;
            border-top: none;
        }
    }

    & .conteneur_selection {
        z-index: 35;
        display: flex;
        gap: 0.3rem;
        width: 84%;
        flex-direction: column;
        align-items: center;
        grid-row-start: 1;
        grid-column-start: 1;
        background-color: #03031fad;
        padding: 20px 10px;

        & .titre_selection {
            color: var(--main-couleur-texte-principale);
            font-size: var(--mobile-taille-titresSecondaires);
            text-transform: uppercase;
            /* filter: drop-shadow(-2px 0px 0px var(--couleur-accent-primaire)) drop-shadow(2px 0px 0 var(--couleur-accent-secondaire)); */
            text-align: center;
        }

        & .calendrier_selection {
            display: flex;
            /* background-color: var(--couleur-tresAssombrissant); */
            align-items: center;

            & .liste {
                display: flex;
                list-style-position: inside;
                gap: 1rem;
                flex-direction: column;
                align-items: center;
                padding: 25px;
                background-color: #03031fad;
                border-radius: 22px;

                & .choix_calendrier {
                    color: var(--main-couleur-texte-principale);
                    list-style: none;
                    transition: transform 0.3s, list-style-image 0.3s, text-shadow 0.2s ease-in-out;
                    padding-left: 2rem;
                    text-align: center;
                    background-color: var(--header-couleur-fond-principale);
                    border: 1px solid var(--couleur-accent-tertiaire);
                    padding: 10px;
                    border-radius: 25px;
                    flex: 1;
                    width: 100%;

                    &:active,
                    &:focus,
                    &:hover,
                    &.actif {
                        transform: scale(1.05);
                        text-shadow: var(--couleur-effet-lueur);
                    }

                    label {
                        padding-left: 0;
                    }
                }
            }
        }

        & .bouton {
            background-color: var(--couleur-tresAssombrissant);
            font-size: var(--mobile-taille-petitsTextes);
            color: var(--main-couleur-bouton);
            height: 2rem;
            border-radius: 2rem;
            box-shadow: var(--couleur-effet-lueur-2);
        }
    }
}

@media (min-width: 768px) {
    .calendrier_section {
        & .calendrier_titres {
            & .calendrier_consulter_texte {
                & strong {
                    font-size: calc(var(--tablette-taille-grosTitresSecondaires) * 1.5);
                }
            }
        }

        & .calendrier_composant {
            & .timee_recherche {
                z-index: 40;
                position: absolute;
                width: 12.5rem;
                top: -5.5rem;
                left: -5rem;
            }

            & .tablette {
                width: 40rem;
                border: 1px solid var(--couleur-accent-secondaire);
                box-shadow: var(--couleur-effet-decalage-5);
                border-radius: 0.7rem;
            }

            & .calendrier,
            & .decoration_degrade {
                position: relative;
                height: 20.5rem;
                width: 37rem;
                border-top: 1px solid #000000;
                top: 0.05rem;
            }
        }

        & .conteneur_selection {
            width: 30rem;
            top: 4.5rem;
            left: 5rem;

            & .titre_selection {
                font-size: var(--tablette-taille-titresSecondaires);
            }

            & .calendrier_selection {
            }

            & .bouton {
                font-size: var(--tablette-taille-petitsTextes);
            }
        }
    }
}

@media (min-width: 1024px) {
    .calendrier_section {
        & .calendrier_titres {
            & .calendrier_consulter_texte {
                & strong {
                    font-size: calc(var(--desktop-taille-grosTitresSecondaires) * 1.5);
                }
            }
        }

        .choix_calendrier {
            label {
                padding-left: 0 !important;
            }
        }

        & .calendrier_composant {
            & .timee_recherche {
                width: 15.5rem;
                top: -6.5rem;
                left: -6rem;
            }

            & .tablette {
                width: 55rem;
                border-radius: 1.2rem;
            }

            & .calendrier,
            & .decoration_degrade {
                height: 28.5rem;
                width: 51rem;
                top: 0.4rem;
                max-width: 100%;
            }
        }

        & .conteneur_selection {
            top: 12rem;
            translate: 0px 7px;
            padding: 65px 10px;
            left: 2.5rem;
            gap: 1rem;
            border-radius: 0;

            & .titre_selection {
                font-size: 2rem;
            }

            & .calendrier_selection {
                justify-content: center;
            }

            & .bouton {
                font-size: var(--desktop-taille-petitsTextes);
            }
        }
    }
}