/*******************************************************************
                STYLE POUR LA PAGE DE CETIM
********************************************************************/
.cetim {
    .carte-cetim {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .cetim-jeuMots {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenu-texte-cetim,
    .cetim-description {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        align-self: center;
        overflow: hidden;

        .mot-gros-cetim {
            font-size: 3rem;

            @media (min-width:768px) {
                font-size: 3.5rem;
            }

            @media (min-width:1024px) {
                font-size: 4rem;
            }
        }

        .cetim-definition {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 1rem;
            width: 10rem;

            @media (min-width:768px) {
                width: 18rem;
            }

            @media (min-width:1024px) {
                width: 100%;
                flex-direction: row;
                margin-top: 2rem;
                margin-bottom: 2rem;
            }

            h2 {
                margin: 0;
                font-size: 3rem;

                @media (min-width:768px) {
                    font-size: 3.5rem;
                }

                @media (min-width:1024px) {
                    font-size: clamp(3rem, 0.5385rem + 3.8462vw, 4rem);
                }
            }

            h2:hover {
                @media (min-width:1024px) {
                    transform: scale(1.05);
                }
            }

            .cetim-texte-gauche {
                transform: rotate(3deg);
            }

            .cetim-texte-droite {
                transform: rotate(-3deg);
            }

            .cetim-texte-gauche,
            .cetim-texte-droite {

                .cetim-texte-petit {
                    font-size: 2rem;

                    @media (min-width:768px) {
                        font-size: 2.5rem;
                    }

                    @media (min-width:1024px) {
                        font-size: clamp(2rem, -0.4615rem + 3.8462vw, 3rem);
                    }
                }

            }

            .cetim-timbre {
                @media (min-width:1024px) {
                    display: flex;
                    align-items: center;
                    width: 24%;
                    justify-content: center;
                    gap: 1rem;

                    p {
                        font-size: 1rem;
                    }
                }
            }
        }

        .cetim-texte {
            margin-top: 2rem;
            margin-bottom: 2rem;
            text-align: center;
            width: 85%;
        }

        .cetim-timee {
            width: 10rem;
            position: absolute;
            transform: rotate(-42deg);
            top: -9rem;
            right: -8rem;

            @media (min-width:768px) {
                width: 14rem;
                top: -1rem;
                right: -13rem;
            }

            @media (min-width:1024px) {
                display: none;
            }

            img {
                margin-top: 6rem;
                margin-left: -2rem;
                width: 100%;
                filter: drop-shadow(4px 9px 0 #000000);
                animation: float 6s ease-in-out infinite;
            }
        }

        .timee-cetim-ordi {
            width: 20rem;
            filter: drop-shadow(4px 9px 0 #000000);
            animation: float 6s ease-in-out infinite;
            display: none;

            @media (min-width:768px) {
                display: none;
            }

            @media (min-width:1024px) {
                display: block;
            }
        }
    }
}

/* Les cartes du CÉTIM */
.carte-cetim {
    display: flex;
    position: relative;
    gap: 2.5rem;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 99vw;
}

/* Carrousel */
.cetim {
    .previewCarteCarrousel {
        bottom: 145px;
    }
}

@media (min-width: 1024px) {
    .cetim {
        .previewCarteCarrousel {
            .carte_clonePrecedentDesktop {
                translate: 13rem -0.4rem;
                z-index: -1;
            }

            .carte_cloneSuivantDesktop {
                translate: -13rem -0.4rem;
                z-index: -1;
            }
        }
    }
}

.section_cetim-qualite {}

.titre-cetim {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cetim {
    .carte-cetim {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        background: linear-gradient(0deg, rgba(0, 145, 131, 0.49) 0%, rgba(122, 0, 223, 0.18) 50%, rgba(45, 35, 49, 0) 100%) 59% / 100% 21% no-repeat;
        background-size: 100% 35%;
        background-repeat: no-repeat;
        background-position-y: 48%;

        .timee-cetim-ordi {
            position: absolute;
            z-index: 2;
            left: 5%;
            width: 20%;
            filter: drop-shadow(4px 9px 0 #000000);
            animation: float 6s ease-in-out infinite;
            display: none;

            @media (min-width:768px) {
                display: none;
            }

            @media (min-width:1024px) {
                display: block;
            }
        }
    }

    .carte-cetim::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        /* épaisseur des bordures */
        background: linear-gradient(90deg,
                #37e6d5,
                #dd40b4,
                #882be4);
    }

    .carte-cetim::before {
        top: 31%;
    }

    .carte-cetim::after {
        bottom: 34%;
    }

    .contenu-texte-cetim,
    .cetim-description {
        .mot-gros-cetim {
        font-size: 3rem;
        @media (min-width:768px) {
                font-size: 3.5rem;
            }
        @media (min-width:1024px) {
                font-size: 4rem;
            }
        }

        .cetim-definition {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
        width: 10rem;
        @media (min-width:768px) {
                width: 18rem;
            }
        @media (min-width:1024px) {
                width: 100%;
                flex-direction:
        row;
                margin-top: 2rem;
                margin-bottom: 2rem;
            }
        h2 {
                margin: 0;
        font-size: 3rem;
        @media (min-width:768px) {
                    font-size: 3.5rem;
                }
        @media (min-width:1024px) {
                    font-size: clamp(3rem, 0.5385rem + 3.8462vw, 4rem);
                }
            }
        h2:hover {
                @media (min-width:1024px) {
                    transform: scale(1.05);
                }
            }

            .cetim-texte-gauche {
        transform: rotate(3deg);
            }

            .cetim-texte-droite {
        transform: rotate(-3deg);
            }

            .cetim-texte-gauche,
            .cetim-texte-droite {

                .cetim-texte-petit {
        font-size: 2rem;
        @media (min-width:768px) {
                        font-size: 2.5rem;
                    }
        @media (min-width:1024px) {
                        font-size: clamp(2rem, -0.4615rem + 3.8462vw, 3rem);
                    }
                }

            }

            .cetim-timbre {
        @media (min-width:1024px) {
                    display: flex;
                    align-items:
        center;
                    width: 24%;
                    justify-content:
        center;
                    gap: 1rem;

                    p {
        font-size: 1rem;
                    }
                }
            }
        }

        .cetim-texte {
        margin-top: 2rem;
        margin-bottom: 2rem;
        text-align: center;
        width: 85%;
        }

        .cetim-timee {
        width: 10rem;
        position: absolute;
        transform: rotate(-42deg);
        top: -9rem;
        right: -8rem;
        @media (min-width:768px) {
                width: 14rem;
                top: -1rem;
                right: -13rem;
            }
        @media (min-width:1024px) {
                display: none;
            }
        img {
                margin-top: 6rem;
        margin-left: -2rem;
        width: 100%;
        filter: drop-shadow(4px 9px 0 #000000);
        animation: float 6s ease-in-out infinite;
            }
        }
    }
}