/* Les zoom par section */

/* .articles-container.zoom {
 zoom: 0.6;
 margin-top: 27em;
} 

.talants_desktop.zoom {
 zoom: 0.8;
}

.educatif.zoom {
 zoom: 0.8;
}

.adherents.zoom {
 zoom: 0.8;
} */


/* ----- Hero Section Start ----- */
.articles-container {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px;
    gap: 20px;
    align-items: center;
    position: relative;
    box-sizing: border-box;


    .logocode {
        position: absolute;
        width: 80%;
        top: 9%;

        &>img {
            width: 100%;
        }
    }

    .manette {
        z-index: 1;
        width: 44%;
        position: absolute;
        top: 40%;
        left: 13%;
        max-width: 250px;

        &>img {
            width: 100%;
        }
    }

    button.fleche-bas {
        display: none;
    }

    .boite-carte {
        margin: 65% 20% 0% 0%;
        position: relative;

        .card {
            position: absolute;
            background: var(--couleur-noir);
            box-sizing: border-box;
        }

        .card-content {
            container-type: inline-size;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 81%;
            width: 100%;

            &>p {
                font-size: clamp(1rem, 10cqi, 4rem);
                margin: 0;
                padding: 0 10%;
                text-align: center;
                font-family: var(--font-regular);
                line-height: 1;
                transform: translateY(-20%);

                .text_highlight {
                    font-size: clamp(1rem, 10cqi, 4rem);
                    display: block;
                    letter-spacing: 0.05em;
                    color: var(--couleur-noir);
                    text-shadow:
                        -1px -1px 0 var(--couleur-blanc),
                        1px -1px 0 var(--couleur-blanc),
                        -1px 1px 0 var(--couleur-blanc),
                        1px 1px 0 var(--couleur-blanc);
                }

                &.faux-bouton {
                    border: solid 2px var(--couleur-blanc);
                    border-radius: 10em;
                    box-shadow: 0 .3em 0 var(--couleur-blanc);
                    transform: translateY(-35%);
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
            }
        }

        .card:nth-child(1) {
            top: 50px;
            z-index: 0;
            right: -37vw;
            width: 51vw;
            /* height: 50vw; */
            max-width: 400px;
            max-height: 400px;
        }

        .card:nth-child(2) {
            top: 42vw;
            right: -20vw;
            z-index: 1;
            width: 50vw;
            height: 50vw;
            max-width: 380px;
            max-height: 380px;
        }

        .card:nth-child(3) {
            top: 85vw;
            z-index: 2;
            transform: rotate(3deg);
            width: 40vw;
            height: 40vw;
            max-width: 330px;
            max-height: 330px;
        }

        .carte-blanc {
            border: 2px solid white;
            border-radius: 1.2em;
            border-bottom: 3px solid;
            background-color: var(--couleur-blanc);
            position: absolute;
            top: 115vw;
            width: 39vw;
            right: -12vw;
            z-index: 3;
            width: 40vw;
            height: 40vw;
            max-width: 300px;
            max-height: 300px;

            .image {
                margin: 3%;
                width: 35%;
                float: right;
            }

            .card-content img {
                width: 65%;
            }
            
        }
    }

    @media only screen and (min-width: 768px) {
        /* All screans Bigger than 768px */
        flex-direction: row;
        justify-content: center;
        margin-top: 20rem;
        align-items: flex-start;
        padding-top: 0;

        .logocode {
            position: initial;
            width: 25%;
        }

        .manette {
            width: 18%;
            max-width: 350px;
            top: 20%;
        }

        .boite-carte {
            margin: 0;
            width: 35%;
            height: 18vw;
            max-height: 480px;

            .card {
                transform: translate(-50%, 0%);
            }

            .card-content p {
                line-height: 1.2;
                transform: translateY(-10%);
            }

            --card-position-helper: 10%;

            .card:nth-child(1) {
                width: 15vw;
                height: auto;
                max-width: 430px;
                max-height: 330px;
                top: 0;
                left: calc(30% + var(--card-position-helper));
            }

            .card:nth-child(2) {
                top: 73%;
                left: calc(0% + var(--card-position-helper));
                width: 12vw;
                height: 9vw;
                max-width: 360px;
                max-height: 250px;
                z-index: 2;
            }

            .card:nth-child(3) {
                left: calc(25% + var(--card-position-helper));
                top: 65%;
                transform: rotate(0deg);
                width: 14vw;
                height: 13vw;
                max-width: 360px;
                max-height: 360px;
                z-index: 1;
            }

            .carte-blanc {
                transform: translate(-50%, 0%);
                top: 120%;
                left: calc(35% + var(--card-position-helper));
                width: 9vw;
                height: 9vw;
                max-width: 230px;
                max-height: 230px;
            }
        }

        a.section-selector {
            transform: translate(-50%, 0%);
            display: block;
            background: none;
            border: none;
            position: absolute;
            top: 150%;
            left: 50%;
            cursor: pointer;
        }
    }
}

/* ----- Hero Section End ----- */

/*--------------------------SECTION 2 CAROUSSEL--------------------------------------------------------*/

/****telelphone****/
.caroussel{
    margin-top: 162vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* min-height:323vw ; */
}

.caroussel-container{
    position: relative;
    width: 75%;
    display:flex;
    flex-direction: column;
    gap:4vw;
    align-items: center;
   
}

.caroussel-container h2{
    text-align: center;
    font-size: 2em;
    font-family:"AlteHaasGroteskRegular" ;
    font-weight: normal;
}


.card-caroussel-content h3{
    text-align: center;
    font-size: 1em;
    font-family: "AlteHaasGroteskRegular"; 
    color: var(--couleur-rose);
    
}
.bouton-précédent , .bouton-suivant{
    background: none;
    border:none;
}
#boutons{
   position: absolute;
   width: 100%;
   top:60%;
   display: flex;
   justify-content: space-between;
}
.bouton-suiv{ 
    position: absolute;
    top: 57%;
    right: 0;
    background-color: transparent;
    transform: translateX(100%) scaleX(-1);
    border: none;
    cursor: pointer;
}
.bouton-précéd{
    position: absolute;
    top: 57%;
    left: 0;
    background-color: transparent;
    transform: translateX(-100%);
    border:none;
    z-index: 1;
    cursor: pointer;
}

.fenêtre-card{
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid white;
    flex-direction: row-reverse;
}

.fenêtre-card h3 {
    color: var(--couleur-vert);
    font-size: 16px;
}

.fenêtre-card img{
    margin:12px;
    width: 15vw;
}

/* Conteneur pour cacher les cartes en dehors de la vue */
.slider-wrapper {
    overflow: hidden; /* Cache les cartes en dehors de la vue */
    width: 80%;
    position: relative;
    
}

/* Conteneur des cartes pour les animations */
.slider {
    display: flex;
    transition: transform 0.8s ease-in-out; /* Animation fluide */
    width: 75%;
    gap: 20%;
    margin: 0 auto;
}

/* Les cartes conservent vos styles existants */
.card-caroussel {
    /* Vos styles existants */
    border: 2px solid white;
    border-radius: 24px;
    min-height: 100vw;
    border-bottom: 10px solid white;
    border-right: 10px solid white;
    width: 55vw;

    /* Ajout pour le slider */
    flex: 0 0 100%; /* Chaque carte prend 100% de la largeur du conteneur */
    box-sizing: border-box; /* Inclut les bordures dans la largeur */
}

.card-caroussel-content{
    display: flex;
    flex-direction: column;
    /* padding:2vw 4vw; */
}

.titre-card {
    margin-left: 5px;
}

.titre-card img{
    width: 20vw;
}

.card-caroussel-content span{
    font-weight: bold;
    display:block;
}

.card-caroussel-content p{
    /* display: flex;
    flex-direction: column; */
    font-size:1em;
    text-align: center;
    
}
.card-caroussel-content img{
    padding:3vw;
}

.card-caroussel:first-child{
    display: block; /*affiche la première carte*/
 
}


/****tablette****/

@media only screen and (min-width: 744px) {
    .caroussel {
        margin-top: 27vw;
    }
}


/****Bureau*****/
@media (max-width: 991px) {
  
    .slider-wrapper::before {
    display: none; /* inutile en mobile si 1 slide visible */
  }

  .slider-wrapper {
    width: 100%; 
    overflow: hidden;
  }

  .slider {
    width: 90%; 
    gap: 10vw;
    padding: 0 5vw;      
  }

  .card-caroussel {
    flex: 0 0 100%;     
    width: 100%;        
    min-height: auto;   
    box-sizing: border-box;
  }
}

@media only screen and (min-width: 992px) {

    .caroussel {
        margin-top: 5rem;
        width: auto;
        padding: 2rem 0;
    }

    .caroussel-container {
        width: 90% ;
        gap: 0 ;
        /* zoom: 0.8; */
    }

    .caroussel-container h2 span {
         font-size: 4rem ;
    }
    
    /* Le conteneur qui sert de "fenêtre" et cache le surplus */
    .slider-wrapper {
        max-width: 88%;
        margin: 0 auto; /* Centré */
        padding: 5rem 0;
        /* zoom: 0.8; */
    }

    /* Le conteneur qui bouge et contient toutes les cartes */
    .slider {
        gap: 4vw ;
        margin: 0 ;
    }
    
    /* Styles pour chaque carte */
    .card-caroussel {
        cursor: pointer;
        transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s;
        transform: scale(0.95);
        opacity: 0.75;
        width: 30vw; /* Largeur fixe pour chaque carte */
        max-width: 40%; /* Limite la taille sur très grands écrans */
        min-height: 32vw ;
    }

    .card-caroussel.active {
        transform: scale(1.05);
        opacity: 1;
        z-index: 10;
    }

    .fenêtre-card {
        display: flex;
        justify-content: flex-start ;
        align-items: center;
        border-bottom: 2px solid white;
        padding: 0.5rem 1rem;
        min-height: 60px;
        flex-direction: row-reverse;
        /*flex-wrap: wrap;*/
    }

    .fenêtre-card h3 {
        font-size: 1.1em;
        color: var(--couleur-vert);
        margin: 0;
        padding: 0;
        text-align: center;
        flex-grow: 1;
    }

    .fenêtre-card img {
        width: 30% ;
        flex-shrink: 0;
    }

    .card-caroussel-content {
        /* padding: 1rem 0; */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 1rem; */
    }

    .image-card {
        width: 70%;
        height: auto;
    }

    .card-caroussel-content p {
        font-size: 1em;
        text-align: center;
        margin: 0 40px;
    }

    .card-caroussel-content p span {
        margin-bottom: 0.5rem;
    }
    
    .bouton-précéd {
        position: absolute;
        top: 57%;
        left: 0;
        background-color: transparent;
        transform: translateX(-100%);
        border:none;
        z-index: 1;

    }

    .bouton-suiv {
        position: absolute;
        top: 57%;
        right: 0;
        background-color: transparent;
        transform: translateX(100%) scaleX(-1);
        border: none;
    }
}


/*---------------------------------------------SECTION 3 TALENT avec l'image telephone----------------------------------*/
.talents_mobile {
     margin-top: 35rem;
    .titre h2 {
        text-align: center;
        font-family: "AlteHaasGroteskRegular";
        margin: 26vw 6vw;
        font-weight: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5vw;
    }
    
    .titre h2::after {
        content: "  ";
        border: 1px white solid;
        width: 73px;
    }

    .image-téléphone img {
        padding-left: 24vw;
        margin-top: -19%;
        margin-bottom: 6%;
        max-width: 55%;
    }

    .partie-texte {
        font-size: 1em;
        font-family: "AlteHaasGroteskRegular";
        text-align: center;
    }

    .partie-texte p {
        margin: 0vw 16vw;
    }

    .partie-texte p:nth-of-type(2) {
        margin: 5vw 19vw;
    }

    .liste {
        list-style: none;
        text-align: center;
        font-family: "AlteHaasGroteskRegular";
        font-size: 18px;
        margin-right: 7vw;
        letter-spacing: 3px;
    }

    .liste li:nth-child(2) {
        font-size: 20px;
        text-shadow:
            1.5px 1.5px 1px #000,
            -1.5px 1.5px 1px #000,
            -1.5px -1.5px 0 #000,
            1.5px -1.5px 0 #000;
    }

    .button {
        margin-top: 8vw;
        display: flex;
        flex-direction: column;
        gap: 8vw;
        align-items: center;
    }

    .liste li:nth-child(1) span {
        color: var(--couleur-vert);
    }

    .liste li:nth-child(2) span {
        color: var(--couleur-rose);
    }

    .liste li:nth-child(2) {
        font-weight: bold;
    }

    .liste li:nth-child(3) span {
        color: var(--couleur-bleue);
    }

    .liste li {
        margin-bottom: 2vw;
    }

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

/* ----- Talents Desktop - Start ----- */
.talants_desktop {
    display: none;

    @media only screen and (min-width: 768px) {
        display: block;
        display: flex;
        flex-direction: column;
        max-width: 1440px;
        margin: 10rem auto 0;
        padding: 4em 36px 0 36px;
        align-items: center;
        box-sizing: border-box;

        .card_grid {
            margin: 4em 0;
            display: grid;
            column-gap: 4vw;
            row-gap: 7em;
            grid-template-columns: minmax(150px, 1fr) 1fr 1fr 1fr minmax(300px, 2fr);
            grid-template-rows: 3;
            grid-template-areas:
                "creativite creativite  creativite  creativite  creativite"
                "avenir     avenir      avenir      avenir      boost"
                "avenir     avenir      avenir      avenir      boost    ";

            .card {
                overflow: visible;
                max-height: fit-content;

                article:first-child {
                    justify-content: space-between;
                    align-items: center;

                    &>img {
                        max-width: 100px;
                        margin: 10px;
                    }
                }

                .main_title {
                    font-size: 20px;
                    margin: 10px 0 10px 16px;
                    line-height: 1;
                }

                .card-content {
                    padding: 0 60px;
                    position: relative;
                    padding-bottom: 50px;

                    .talant_image {
                        position: absolute;
                        top: 100%;
                        transform: translateY(-40px);
                    }
                }

                &.creativite {
                    grid-area: creativite;
                    margin-top: 4em;

                    .talant_image {
                        left: 0;
                        max-width: 170px;
                    }
                }

                &.avenir {
                    grid-area: avenir;
                    align-self: center;

                    .card-content {
                        margin-top: 4em;
                    }

                }

                &.boost {
                    grid-area: boost;
                    margin-top: 6em;
                    .card-content {
                        margin-top: 4em;

                        .talant_image {
                            transform: translate(-50%, -40px);
                            left: 50%
                        }
                    }
                }
            }
        }

        .button-main {
            margin-bottom: 2em;
        }
    }

    @media only screen and (min-width: 992px) {
        .card_grid {
            row-gap: 4em;
            grid-template-columns: minmax(150px, 1fr) 1fr 1fr 1fr minmax(300px, 2fr);
            grid-template-rows: 3;
            grid-template-areas:
                "creativite creativite  creativite  creativite  boost"
                "   .       avenir      avenir      avenir      boost"
                "   .       avenir      avenir      avenir      .    ";

            .card {

                &.avenir {
                    margin: 0 auto;
                    max-width: 400px;
                }
            }
        }
    }
}

/* ----- Talents Desktop - End ----- */
/*--------------------------------------------------SECTION 4 educatif avec image/texte Starts----------------------------*/
.educatif {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;

    .titreclavier {
        margin: 12vw 4vw;
        text-align: center;

        &>p {
            font-size: 6vw;
            font-family: var(--font-regular);
            line-height: 1.3;
            letter-spacing: normal;

            &>span {
                font-size: 9.5vw;
            }
        }
    }

    .partie-images {
        text-align: center;

        .image-et-texte {
            display: flex;
            align-items: center;
            margin: 6vw 0vw;
            flex-direction: column;

            .item_title {
                font-size: 2rem;
                font-weight: bold;
                margin: 2vw 0vw;
            }
        }
    }

    .button-main,
    .section-selector {
        display: none;
    }

    @media only screen and (min-width: 768px) {
        margin: 4em auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        .titreclavier {
            max-width: 55%;
            margin: 0 auto;
            /* zoom: 0.6; */


            &>p {
                line-height: 1.2;
                letter-spacing: normal;
                margin: 1em 0 0 0;
                font-size: 2vw;

                &>span {
                    font-size: 200%;
                }
            }
        }

        .partie-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(100px, auto);
            gap: 36px;
            grid-template-areas: "educatif creatif ludique";
            width: 80%;

            .image-et-texte {
                margin-bottom: 4em;
            }

            #educatif {
                grid-area: educatif;
                transform: translateY(-20%);

                &>img {
                    transform: scale(1.2);
                }
            }

            #creatif {
                grid-area: creatif;
                transform: translateY(20%);

                &>img {
                    transform: scale(.9);
                }
            }

            #ludique {
                grid-area: ludique;
                transform: translateY(-20%);

                &>img {
                    transform: rotate(-20deg);
                }
            }
        }

        .button-main {
            display: inline-flex;
            font-size: 1.5em;
            transform: translateX(28vw);
        }

        .section-selector {
            display: block;
            transform: translateY(-55px);
        }

    }
}

.educatif .flèche img {
    margin: 0vw 0vw 7vw 81vw;
}

/*--------------------------------------------------SECTION 4 educatif avec image/texte Ends----------------------------*/
/*--------------------------------------------------SECTION 5 AVIS Start---------------------------------------------*/


/* Conteneur pour cacher les cartes en dehors de la vue */
.slider-wrapper-avis {
    overflow: hidden;
    /* Cache les cartes en dehors de la vue */
    position: relative;
}

/* Conteneur des cartes pour les animations */
.slider-avis {
    display: flex;
    transition: transform 0.8s ease-in-out;
    /* Animation fluide */
    gap: 20%;
    padding-bottom: 2rem;
}

.avis .carte-avis {
    /* Ajout pour le slider */
    flex: 0 0 100%;
    /* Chaque carte prend 100% de la largeur du conteneur */


}

.carte-avis:first-child {
    display: block;
    /*affiche la première carte*/

}

.avis .carte-avis .card {
    margin: 0 auto;
    width: 66vw;

    .multicolor-card {
        background: var(--couleur-vert);
    }

    .card-content>img {
        display: none;
    }
}

.carte-avis .card .card-content {
    text-align: center;
}

.carte-avis .card .card-content h4 {
    font-family: var(--font-regular);
}

.carte-avis .card .card-content .card-description {
    /* margin: -4vw 7vw 0 7vw; */
    padding: 1em;
    height: 58px;
    overflow: hidden;
}

.carte-avis .card .card-content span {
    color: var(--couleur-vert);
    font-weight: bolder;
    margin-left: 35vw;
    position: relative;
    top: -1vw;
    font-size: 18px;
    font-style: normal;
    font-family: var(--font-regular);
}

#boutons-avis {
    /* top: 60%; */
    display: flex;
    align-items: center; /* Centrage vertical */
    justify-content: center;
    gap: 1em; 
    height: min-content; /* ou min-content, selon ce qui marche le mieux */
}

#boutons-avis .bouton-précédent img,
#boutons-avis .bouton-suivant img {
    max-width: none;

}

#boutons-avis>.bouton-suivant {
    transform: scaleX(-1);
    margin-right: 2vw;
    
}

#boutons-avis>.bouton-précédent {
    margin-left: 2vw;
    
}

.avis .section-selector {
    display: none;
}


@media only screen and (min-width: 768px) {
    .avis {
        text-align: center;

        .bouton-adhérants {
            display: none;
        }

        .section-selector {
            margin: 7em 0;
            display: inline-block;
        }
    }

    .slider-wrapper-avis {
        padding: 0 0 4em 0;
    }

    .slider-avis {
        gap: 3rem;
    }

    .avis .carte-avis {
        max-width: 30%;
        padding: 2%;
        margin: 20px 0;
        box-sizing: border-box;
        transform: scale(.9);
        cursor: pointer;
        display: flex;
        transition: all .5s ease;

        .card {
            background-color: var(--couleur-noir);
            width: auto;
            height: auto;
            overflow: visible;

            .card-content {
                margin: 0 50;
                padding: 0 3%;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                justify-content: space-around;
                /* passer de flex-end a space around pour mieux coller a la maquette. Renaud*/

                .card-title {
                    font-size: 20px;
                }

                &>p {
                    font-size: 14px;
                    order: -1;
                    margin: 0;
                    height: auto;
                }

                .read-more {
                    display: none;
                }

                &>img {
                    display: initial;
                    border: solid 2px var(--couleur-blanc);
                    border-radius: 1em;
                    width: 60%;
                }
            }
        }

        &.active {
            transform: scale(1.05);
            transition: all .5s ease;
        }

        &:nth-child(3n-1) .multicolor-card {
            background: var(--couleur-jaune);
        }

        &:nth-child(3n-2) .multicolor-card {
            background: var(--couleur-rose);
        }
    }
}

/*--------------------------------------------------SECTION 5 AVIS End---------------------------------------------*/

/* ----- Adherants Desktop - Start ----- */
.adherents {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 36px;
    align-items: center;
    box-sizing: border-box;

    .main_title {
        display: none;
    }

    .main_image {
        display: none;
    }

    .section-selector {
        display: none;
    }

    @media only screen and (min-width: 768px) {
        position: relative;

        .main_title {
            display: block;
            margin-top: 0;

            &>span {
                display: block;
                text-align: right;
            }

            .title_strong {
                font-family: var(--font-ultra-bold);
            }

            .title_thin {
                font-family: var(--font-regular);
            }
        }

        .main_image {
            display: block;
            width: 25%;
            position: absolute;
            left: 20vw;
            top: 30%;
        }

        .section-selector {
            display: block;
            margin: 4em 0;
        }

        .button-main {
            font-size: 1.5em;
            transform: translateX(25vw);
            width: 30%;
        }

    }
}

/* ----- CJeune Desktop - Start ----- */
.cjeune {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 36px;
    align-items: center;
    box-sizing: border-box;
    margin-top: 3rem;
     /* zoom: 0.8; */

    .section-content {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
        align-items: center;
        justify-content: center;
        max-width: 1024px;

        & > * {
            flex: 1;
            max-width: 50%;
            min-width: 300px;
            font-size: 21px;
        }
    }

    /*.main_title {
         zoom: 1.1; 
    }*/

    @media only screen and (min-width: 768px) {

        .main_title {
            display: block;
            margin-top: 0;
            /* zoom: 1; */
        }

        .section-selector {
            display: block;
            margin: 4em 0;
        }

    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .articles-container.zoom {
        margin-top: 5em;
       } 
    .caroussel {
        margin-top: 5rem;
       }
}

@media (min-width: 320px) and (max-width: 400px) {
    .bouton-précéd,
    .bouton-suiv {
        width: 1.7em;
        height: auto;
    }
    .slider {
        width: 100%; 
        padding: 0;
        gap: 0;
    }
    .caroussel-container{
        width: 300px;
    }
    .card-caroussel{
        box-sizing: border-box;
        max-width: 280px;
        margin-inline: 10px;
    }

    .card-caroussel-content img{
    padding:6vw;
}
}
/* ----- Adherants Desktop - End ----- */