@media only screen and (min-width: 393px) and (max-width: 394px) {

        

}


@media only screen and (max-width: 400px) {

    html,
    body {
        overflow-x: hidden;
        position: relative;
        min-width: 100%;
    }

    .bouk {
        width: 100%;
        margin-left: -45px !important;

    }

    .navbar-brand h4 {
        font-weight: normal;
        font-size: 20px;

    }

  



    .cartes {
        margin-top: 100px;
        width: 100vw !important;
    }


    .central1 {
        margin-left: 13px !important;
        width: 100vw !important;
    }

    .central {
        margin-left: 10px !important;
    }

    .card {

        width: 100vw !important;
    }

    .duotext {
        margin-bottom: -200px !important;
        width: 100vw !important;
    }


    .partianimer {
        width: 100vw !important;
    }

    .anikainfo {
        margin-left: 06px !important;
        width: 100vw !important;
    }

    .section6 {
        width: 100vw !important;
    }

    .corptext {
        width: 100vw !important;
        margin-bottom: 10px !important;
        margin-left: -20px !important;

    }

    .section1 {
        width: 100vw !important;
        height: 120vh !important;
        margin-bottom: 20px !important;
    }

    .section1 .test3 {
        margin-left: 50px !important;
    }
/* 
    .section1 #Project,
    .bouk2 {
        padding-left: 100px !important;

    } */


    .final h1 {
        font-size: 6vw !important;
    }

    .square1 {
        width: 25px;
        height: 25px;
        background-color: #ff8400;
        margin-left: 25px;
        transform: translate(-50%, -50%);
        animation: rotate 5s linear infinite;
    }

    /* .anikaimg {
        width: 100% !important;
        margin-right: 40px !important;
    } */

    /* .section4 {
        width: 100%;
        height: auto !important;

        margin-top: 50px !important;
        margin-bottom: 250px !important;
    } */


    .section5 {
        height: auto !important;

     /*    margin-bottom: 180px !important; */
    }




    .section8 {
        margin-top: 60px !important;
        height: auto !important;
    }

    .tyu {
        width: 100% !important;
        height: 50% !important;
        margin-top: -150px !important;
    }

    .section6 .footing {
        padding: 0 !important;
    }

    .section6 .footing p {
        margin-left: 0px !important;
    }

    .section6 .power {
        padding-right: 0 !important;
    }

    .section6 .final {
        margin-left: 0 !important;
    }


    /* .anikainfo {

        padding: 0px 0 0 20px !important;
        gap: 10px !important;
        width: 100%;
        height: 600px;
        justify-content: center;
        align-items: center;
    } */



    .text12z {
        text-align: justify !important;
        margin-left: -20px !important;
    }

    .central1 {
        margin-top: -350px !important;
    }




    .cartes-slider .carte {
        width: 200px;
        height: 300px;
        overflow: hidden;
        border-radius: 15px;
        margin: 10px;
    }

    .cartes-slider .carte img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        object-position: center;

        border-radius: inherit;

    }

    .duotext {
        margin-top: 80px;
        margin-bottom: -300px !important;

    }

    .duotext img {
        width: 100%;
        height: 20vh !important;
    }


    .cartes {
        width: 100%;
    }

    .TEXT {
        flex: 1 !important;
    }



    .footing {
        padding: 20px;

        text-align: center !important;

    }

    .inf {
        margin-bottom: 20px;

    }

    .inf2 {
        margin-top: 20px;

        margin-left: 0px !important;
    }

    .final {
        text-align: center !important;

        margin-top: 20px;

    }


    .TEXTz {

        margin-left: -10px !important;
    }


    .inf h3 {
        font-size: 20px !important;
    }

    .inf h2 {
        font-size: 15px !important;
    }

    .foot {
        padding-left: 30px !important;
    }

    .section3 {
        /* height: 90vh !important; */
        /* margin-bottom: 900px !important; */
    }




    .central {
        position: sticky !important;
    }




}

@media only screen and (max-width: 600px) {

    html,
    body {
        overflow-x: hidden;
        position: relative;
        min-width: 100%;
    }

    .bouk {
        width: 100%;
        margin-left: -45px !important;
    }

    .navbar-brand h4 {
        font-weight: normal;
        font-size: 20px;
        /* Diminue le gras */
    }





    .cartes {
        margin-top: 100px;
        width: 100vw !important;
    }


    .central1 {
        margin-left: 13px !important;
        width: 100vw !important;
    }

    .central {
        margin-left: 10px !important;
    }

    .card {

        width: 100vw !important;
    }

    .duotext {
        margin-bottom: -200px !important;
        width: 100vw !important;
    }


    .partianimer {
        width: 100vw !important;
    }

    /* .anikainfo {
        margin-left: 06px !important;
        width: 100vw !important;
    } */

    .section6 {
        width: 100vw !important;
    }

    .corptext {
        width: 100vw !important;
        margin-bottom: 10px !important;
        margin-left: -20px !important;

    }

    .section1 {
        width: 100vw !important;
        height: 130vh !important;
    }

    .section1 .test3 {
        margin-left: 50px !important;
    }

    .section1 .bouk2 {
        padding-left: 130px !important;

    }


    .final h1 {
        font-size: 6vw !important;
    }

    .square1 {
        width: 25px;
        height: 25px;
        background-color: #ff8400;
        margin-left: 25px;
        transform: translate(-50%, -50%);
        animation: rotate 5s linear infinite;
    }

    /* .anikaimg {
        width: 100% !important;
        margin-right: 40px !important;
    } */

    /* .section4 {
        width: 100%;
        height: auto !important;
        margin-bottom: 250px;
        margin-top: 300px !important; 
    
    } */


    .section5 {
        height: auto!important;

    }




    .section8 {
        margin-top: 60px !important;
        height: auto !important;
    }

    .tyu {
        width: 100% !important;
        height: 50% !important;
        margin-top: -150px !important;
    }

    .section6 .footing {
        padding: 0 !important;
    }

    .section6 .footing p {
        margin-left: 0px !important;
    }

    .section6 .power {
        padding-right: 0 !important;
    }

    .section6 .final {
        margin-left: 0 !important;
    }


    /* .anikainfo {

        padding: 0px 0 0 20px !important;
        gap: 10px !important;
        width: 100%;
        height: 600px;
        justify-content: center;
        align-items: center;
    } */

    /*  nouvo style le 20 juin  */

    .text12z {
        text-align: justify !important;
        margin-left: -20px !important;
    }

    .central1 {
        margin-top: -350px !important;
    }




    .cartes-slider .carte {
        width: 200px;
        height: 300px;
        overflow: hidden;
        border-radius: 15px;
        margin: 10px;
    }

    .cartes-slider .carte img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Assurez-vous que l'image couvre toute la carte */
        object-position: center;
        /* Centrez l'image */
        border-radius: inherit;
        /* Applique le même rayon de bordure que la carte */
    }

    .duotext {
        margin-top: 80px;
        margin-bottom: -300px !important;

    }

    .duotext img {
        width: 100%;
        height: 20vh !important;
    }


    .cartes {
        width: 100%;
    }

    .TEXT {
        flex: 1 !important;
    }



    .footing {
        padding: 20px;
        /* Ajouter des paddings pour l'espacement */
        text-align: center !important;
        /* Centrer le contenu */
    }

    .inf {
        margin-bottom: 20px;
        /* Espacement entre les sections */
    }

    .inf2 {
        margin-top: 20px;
        /* Espacement en haut */
        margin-left: 0px !important;
    }

    .final {
        text-align: center !important;
        /* Centrer le texte */
        margin-top: 20px;
        /* Espacement en haut */
    }


    .TEXTz {

        margin-left: -10px !important;
    }


    .inf h3 {
        font-size: 20px !important;
    }

    .inf h2 {
        font-size: 15px !important;
    }

    .foot {
        padding-left: 30px !important;
    }

    .section3 {
        /* height: 70vh !important; */
        /* margin-bottom: 800px !important; */
    }


    #Project {
        margin-left: -30px !important;
    }

    .central {
        position: sticky !important;
    }




}





@media only screen and (max-width: 900px) and (orientation: landscape) {



    html,
    body {
        overflow-x: hidden;
        position: relative;
        min-width: 100%;
    }

    .section1 {
        width: 100vw !important;
        height: 140vh !important;
        margin-bottom: 600px !important;
    }

    .section1 .test3 {
        margin-left: 50px !important;
    }


    .duotext {
        margin-top: 50px;
        margin: 100px 0 -100px 0 !important;
        width: 100vw !important;

    }


    .bouk {
        width: 100%;
        margin-left: -45px !important;
    }

    .central1 {

        width: 100vw !important;
        margin-top: -50% !important;
        margin-bottom: 250px;
    }


    .section5 {
        height: auto !important;

    }

    .newconcept {

        width: 100% !important;

    }

    .newconcept .newimage img {
        width: 200px !important;
    }



    .section3 {
        /* height: 80vh !important; */
        /* margin-bottom: 500px !important; */
    }

    /* .section4 {
        width: 100%;
        height: auto !important;
      
        margin-bottom: 50px !important;
    } */

    .navbar-brand h4 {
        font-weight: normal;
        font-size: 20px;
        /* Diminue le gras */
    }




    .cartes {
        margin-top: 100px;
        width: 100vw !important;
    }



    .central {
        margin-left: 10px !important;
    }

    .card {

        width: 100vw !important;
    }




    .partianimer {
        width: 100vw !important;
    }

    .anikainfo {
        margin-left: 06px !important;
        width: 100vw !important;
    }

    #rotate {
        width: 100vw !important;
        height: auto !important;
    }

    #duopied {
        margin-top: -80px !important;
    }

    .corptext {
        width: 100vw !important;
        margin-bottom: 10px !important;
        margin-left: -20px !important;

    }




    .final h1 {
        font-size: 6vw !important;
    }

    .square1 {
        width: 25px;
        height: 25px;
        background-color: #ff8400;
        margin-left: 25px;
        transform: translate(-50%, -50%);
        animation: rotate 5s linear infinite;
    }

    /* .anikaimg {
        width: 100% !important;
        margin-right: 40px !important;
    } */









    .section8 {
        margin-top: 60px !important;
        height:auto!important;
        margin-bottom: 300px !important;
    }

    .tyu {
        width: 100% !important;
        height: 50% !important;
        margin-top: -150px !important;
    }

    .section6 .footing {
        padding: 0 !important;
    }

    .section6 .footing p {
        margin-left: 0px !important;
    }

    .section6 .power {
        padding-right: 0 !important;
    }

    .section6 .final {
        margin-left: 0 !important;
    }

/* g */

    /*  nouvo style le 20 juin  */

    .text12z {
        text-align: justify !important;
        margin-left: -20px !important;
    }




    .cartes-slider .carte {
        width: 200px;
        height: 300px;
        overflow: hidden;
        border-radius: 15px;
        margin: 10px;
    }

    .cartes-slider .carte img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Assurez-vous que l'image couvre toute la carte */
        object-position: center;
        /* Centrez l'image */
        border-radius: inherit;
        /* Applique le même rayon de bordure que la carte */
    }



    .cartes {
        width: 100%;
    }

    .TEXT {
        flex: 1 !important;
    }



    .footing {
        padding: 20px;
        /* Ajouter des paddings pour l'espacement */
        text-align: center !important;
        /* Centrer le contenu */
    }

    .inf {
        margin-bottom: 20px;
        /* Espacement entre les sections */
    }

    .inf2 {
        margin-top: 20px;
        /* Espacement en haut */
        margin-left: 0px !important;
    }

    .final {
        text-align: center !important;
        /* Centrer le texte */
        margin-top: 20px;
        /* Espacement en haut */
    }


    .TEXTz {

        margin-left: -10px !important;
    }


    .inf h3 {
        font-size: 20px !important;
    }

    .inf h2 {
        font-size: 15px !important;
    }

    .foot {
        padding-left: 30px !important;
    }






}




@media only screen and (min-width: 601px) and (max-width: 1024px) {

    /*   body{ background-color: red !important;} */

    .section3 {
        /* margin-bottom: -100px !important; */
    }

    .parti1 {
        margin-top: 25px !important;
    }

    .section1 {
        width: 100%;
        height: 90vh !important;
    }

  /*   .section5 {
        margin-top: -100px !important;
        margin-bottom: 120px !important;
    } */

    .central1 {
        height: 40vh !important;
    }

    .newconcept {
        margin-left: 30px !important;

        gap: 30px !important;
    }

    .newimage img {
        width: 250px !important;
    }

/* 
    .anikaimg {
        width: 100% !important;
    } */

    /* .section4 {
        width: 100%;
        height: auto !important;
        margin-bottom: 50px;
    } */

    .section8 {
        height: auto !important;

    }

    /*      nouvo style 20juin */

    .cartes {

        margin-top: -200px !important;
        margin-bottom: 500px !important;
    }

    .TEXT {
        flex: 1 !important;
    }

    .text12z {
        text-align: justify !important;
    }



    .section6 {
        width: 100%;
        height: 55vh !important;



    }

    .footing {
        padding: 0 90px 0 90px !important;
        /* Paddings plus grands pour les tablettes */
        text-align: center !important;
        /* Alignement à gauche pour le contenu */
    }

    .inf,
    .inf2 {
        margin-bottom: 20px;
        /* Espacement entre les sections */

        margin-left: 10px !important;
    }

    .final {
        text-align: center !important;
        /* Alignement à gauche pour le texte final */
    }

    .foot {
        padding-left: 50px !important;
    }

    .tyu {
        width: 100% !important;
        height: 60% !important;
        margin-top: -200px !important;
    }


    /* .anikaimg {
        border-radius: 20px;
        width: 30%;
        height: 80%;
        background-image: url(images/Facetune_28-03-2024-11-58-54\ 5.jpeg);
        background-position: 90% 40% !important;
        background-size: cover;
        background-repeat: no-repeat;
         border: .5px #ff7e21 solid;
    } */

    .duotext {
        height: 20vh !important;
    }

    .duotext img {
        width: 100%;
        height: 35vh !important;
    }




}




/* Mode portrait spécifique à l'iPhone 15 */
@media only screen and (width: 390px) and (height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}

/* Mode paysage spécifique à l'iPhone 15 */
@media only screen and (width: 852px) and (height: 393px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
    /* Vos styles ici */
}