.genos-medium {
  font-family: "Genos", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 34px;
  display: inline;
}

.signika-regular {
  font-family: "Signika", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "GRAD" 0;
}

.signika-bold {
    font-family: "Signika", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
    font-size: 36px;
}

.new-rocker-regular {
    font-family: "New Rocker", serif;
    font-weight: 400;
    font-style: normal;
}

.offside-regular {
    font-family: "Offside", serif;
    font-weight: 400;
    font-style: normal;
}
  
/*Version mobile*/
body{
    font-size: 16px;
    line-height: 150%;
    margin: 77px 0 0 0;
    padding: 0;
}

.promo{
    color: #FFF;
    background-color: #000;
    margin: 0;
    padding: 0;
}

.crit{
    color: #000;
    background-color: #FFF;
    margin: 0;
    padding: 0;
}

.fact{
    background-color: #FFD543;
}

section{
    margin: 30px 0;
    padding: 0;
}

.liens a{
    color: #000;
    text-decoration: none;
    padding: 0;
    margin: 0 0 0 6px;
    cursor: pointer;
    align-self: center;
}

/*Utilisation de Copilot pour enlever les orphelines*/
.no-orphan {
    margin: 0;
    white-space: nowrap; /* Empêche la rupture des mots à l'intérieur du span */
}

/*Menu*/
.menu{
    background-color: #000;
    height: 77px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; 
    width: 100%;
    transition: top .3s ease-out;
    z-index: 10;
}

.menu a{
    display: flex;
    z-index: 20;
    margin-left: 27px;
}

.menu.hidden{
    top: -100%;
}

.menu_liste{
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 25px 0px;
    margin: 0;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: transform .3s ease-out;
    /* 100% de sa taille à lui donc ici 100% du viewport */
    /* translate, rotate, scale, skew */
    align-items: center;
}

.menu_liste li{
    color: #FFF;
}

.menu_el{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 27px;
    border-radius: 25px;
}

.menu_el:first-child{ 
    margin-top: 28px;
}

.menu_el a{
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    margin: 0;
}

.menu_el a:hover{
    color: #000;
    background-color: #D4B170;
    border-radius: 5px;
    cursor: pointer;
}

#actif a{
    color: #000;
    background-color: #D4B170;
    border-radius: 5px;
    cursor: pointer;
}
  
.menu_btn{
    background-color: transparent;
    color:#FFF;
    font-size: 18px;
    margin: 22px 0;
    border: none;
    cursor: pointer;
    /* Il faut redéfinir la font */
    font-family: sans-serif;
    position: absolute;
    right: 27px;
    z-index: 20;
    border-radius: 5px;
    padding: 5px;
}

.menu_btn:hover{
    color: #000;
    background-color: #D4B170;
}

.menu--open .menu_liste{
    transform: translateY(0);
}

.noscroll {
    overflow: hidden;
}  

/*Haut de page*/
.btt{
    /* Flux du document */
    position: fixed;
    /* la position retire l'element du flux */
    /* top, right, bottom, left */
    bottom: 10px;
    right: 10px;
    color: #FFF;
    background-color: #000;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}

.btt:hover{
    color: #000;
    background-color: #D4B170;
    cursor: pointer;
}

/*images*/
img{
    width: 80%;
    border-radius: 25px;
    margin: 0px 10% 30px;
}

.changer{
    width: 80%;
    border-radius: 25px;
    margin: 0px 10%;
}

.voiture{
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.voiture img{
    margin: 0;
    margin-left: 27px;
}

.imagenav{
    height: 35px;
    width: auto;
    margin: 0;
}

.banniere{
    position: relative;
    display: flex;
}

.banniere img{
    display: block;
    width: 100%;
    border-radius: 0;
    background-color: #FFF;
    margin: 47px 0 0 0;
    padding: 0;
    z-index: 5;
}

.bannierecrit img{
    width: 100%;
    border-radius: 0;
    margin: 47px 0 0 0;
    padding: 0;
    background-color: #FFF;
    z-index: 5;
}

.bannierecrit{
    position: relative;
    display: flex;
}

.bannierefact{
    position: relative;
    display: flex;
}

.bannierefact img{
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    z-index: 5;
}

.separation1{
    width: 100%;
    margin: 0;
    z-index: 2;
}

.separation2{
    width: 100%;
    margin: 0;
    transform: scaleY(-1);
    z-index: 2;
}

.defile{
    height: 220px;
    width: auto;
    border-radius: 0;
    margin: 0 2px 42px;
    padding: 0;
}

.imgdefile{
    display: flex;
    align-items: center;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}

.imgdefile_inner{
    display: flex; 
    animation: imgdefile 25s linear infinite;
}

@keyframes imgdefile { 
    0% {
        transform: translateX(0%); 
    }
    100% {
        transform: translateX(-50%); 
    }
}

.st{
    height: 40px;
    margin: 0;
    float: inline-start;
}

.titre{
    height: 40px;
    margin: 19px 0;
    float: inline-end;
}

.slider {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.slide {
    display: none;
}

.slide span{
    margin: 0;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-70%);
    background-color: #0BC582;
    color: #000;
    border: none;
    padding: 30px 6px;
    cursor: pointer;
}

.nav-button:hover{
    background-color: #000;
    color: #0BC582;
}

#prev {
    width: 26px;
    height: 77px;
    left: 27px;
    border-radius: 0 22px 22px 0;
}

#next {
    width: 26px;
    height: 77px;
    right: 13%;
    border-radius: 22px 0 0 22px;
}

svg{
    width: 15%;
    height: auto;
    margin-left: 27px;
}
.bulle{
    transform: translateY(50%) scaleX(-1);
}

.cone1{
    margin-top: 27px;
}

/*Footer*/
.footerpromo{
    background-image: url('images/footerPg1.svg');
    margin: 0;
    padding: 0;
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: auto;
}

.footercrit{
    background-image: url('images/footerPg2.svg');
    margin: 0;
    padding: 0;
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: auto;
}

.footerfact{
    background-image: url('images/footerPg3.svg');
    margin: 0;
    padding: 0;
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: auto;
}

.footerpad{
    padding-top: 100px;
    margin: 0 27px 8px 27px;
    color: #FFF;
}

.footerpadfact{
    padding-top: 100px;
    margin: 0 27px 8px 27px;
    color: #000;
}

.shop a{
    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
}

.shop a:hover{
    color: #320082;
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.reseauimg{
    height: 50px;
    width: min-content;
    border-radius: 0;
    margin: 27px 27px;
}

.reseau{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
}

.credit{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item1{
    margin: 0 27px 50px 27px;
    color: #FFF;
}

.item1fact{
    margin: 0 27px 50px 27px;
    color: #000;
}

.heaj {
    display: block;
    border-radius: 0;
    width: 50px;
    height: max-content;
    padding: 0 27px 50px 0;
    margin: 0;
    justify-self: end;
    align-self: flex-end;

}

.shopfact{
    color: #000;
}

.monochrome {
    filter: grayscale(100%) brightness(1000%);
    position: relative;
    z-index: 1;
}

.monochromefact {
    filter: grayscale(100%) brightness(0%);
    position: relative;
    z-index: 1;
}

/*reste*/
.marque{
    font-size: 16px;
    margin: 0 10% 30px;
}

h1{
    position: absolute;
    color: #FFF;
    z-index: 1;
    top: 77px;
}

h2{
    line-height: normal;
    margin: 30px 27px;
}

h3{
    margin: 30px 27px 30px;
}

h4{
    color: rgba(0, 0, 0, 0.25);
    font-family: Signika;
    font-size: 96px;
    font-style: normal;
    font-weight: 600;
    font-size: 75px;
    margin: 22px 0;
    line-height: normal;
}

h5{
    color: rgba(0, 0, 0, 0.50);
    font-family: Signika;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h6{
    font-size: 16px;
}

p{
    margin: 0 27px 42px;
}

a{
    color: #FFF;
    text-decoration: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

iframe{
    width: 80%;
    margin: 0px 10% 30px;
    border: 0;
}

article{
    display: flex;
    align-self: center;
    margin: 0 27px 42px;
}

br{
    content: "";
    display: block;
    margin-top: 42px;
}

.abbones{
    margin: 80px 27px 0;
}

.videos{
    margin: 80px 27px 0;
}

.vues{
    margin: 80px 27px 0;
}

/*Version tablette*/
@media (min-width: 780px){
    body{
        font-size: 18px;
    }

    section{
        margin: 0;
    }

    .menu_liste {
        display: flex;
        flex-direction: row;
        transform: translateY(0); 
        position: static; 
        height: auto;  
        padding: 0; 
        background-color: transparent;
        align-items: start;
    } 
    .menu_btn { 
        display: none; /* Cache le bouton du menu */ 
    } 
    .menu_el { 
        flex-direction: row; 
    }

    .imagenav{
        height: 46px;
        width: auto;
    }

    .banniere img{
        margin: 77px 0 0 0;
    }
    
    .bannierecrit img{
        margin: 77px 0 0 0;
    }

    footer{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 30px;
    }

    .footerpad{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        align-self: end;
    }

    .reseau{
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .item1{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .shop{
        width: auto;
        height: fit-content;
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        justify-self: end;
        align-self: end;
        margin: 0;
        margin-right: 27px;
    }

    .shop a{
        padding: 5px;
        border-radius: 5px;
        background-color: transparent;
        cursor: pointer;
    }

    .shop a:hover{
        padding: 5px;
        border-radius: 5px;
        color: #320082;
        background-color: #FFF;
        cursor: pointer;
    }

    .heaj{
        grid-column: 3 / 4;
        grid-row: 3 / 4;
        justify-self: end;
    }

    .item1fact{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .nav-button {
        transform: translateY(-110%);
    }
    
    #projet{
        content: "";
        display: block;
        margin-top: 10px;
    }

    #prev {
        width: 26px;
        height: 88px;
        left: 10%;
        border-radius: 0 22px 22px 0;
    }
    
    #next {
        width: 26px;
        height: 88px;
        right: 8%;
        border-radius: 22px 0 0 22px;
    }

    .left{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-template-rows: 0.4fr 2fr;
        grid-row-gap: 20px;
    }

    .left img{
        height: auto;
        width: 82%;
        margin: 0 0 37px 44px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: start;
    }

    .left h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 27px 0 0;
        align-self: end;
    }

    .left p{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    .left span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    section.left .titre{
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    section.left .st{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .special_promo{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-row-gap: 20px;
    }

    .special_promo img{
        height: auto;
        width: 82%;
        margin: 0 0 37px 44px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: start;
    }

    .special_promo p{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    .special_promo span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .special_promo h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .special_promo svg{
        margin: 0;
    }

    section.special_promo .titre{
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    section.special_promo .st{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .right{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }

    .right img{
        height: auto;
        width: 82%;
        margin: 0 0 37px 44px;
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        align-self: start;
    }

    .right p{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    .right span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .right h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    section.right .titre{
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    section.right .st{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .titre{
        height: 100px;
        margin: 0;
        align-self: end;
    }

    .st{
        height: 100px;
        margin: 19px 0;
        align-self: end;
    }

    .left_crit{
        display: grid;
        grid-template-columns: 43% 10% 47%;
        grid-row-gap: 20px;
    }

    .left_crit img{
        height: auto;
        width: 82%;
        margin: 0 0 37px 44px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: start;
    }

    .slider{
        height: auto;
        width: 82%;
        margin: 0;
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    .voiture img{
        margin: 0 0 0 10%;
    }

    .voiture span{
        margin-left: 10%;
    }

    .left_crit p{
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    .left_crit span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .left_crit h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 37px 0 0 0;
        align-self: end;
        line-height: normal;
    }

    .left_crit iframe{
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    .right_crit{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }

    .right_crit img{
        height: auto;
        width: 82%;
        margin: 0 0 37px 44px;
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        align-self: start;
    }

    .right_crit p{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .right_crit span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .right_crit h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 27px 0 0 44px;
        align-self: end;
        line-height: normal;
    }

    .special_crit{
        display: grid;
        grid-template-columns: 23% 8% 15% 54%;
        grid-row-gap: 20px;
    }

    .special_crit h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin-top: 22px;
    }

    .special_crit p{
        width: 90%;
    }

    .special_crit svg{
        width: 85%;
        grid-column: 2 / 4;
    }

    .autre1{
        width: 250px;
        height: 250px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: center;
    }

    .para1{
        width: 580px;
        grid-column: 3 / 5;
        grid-row: 1 / 2;
        margin: 0;
        align-self: start;
        margin-top: 67px;
    }

    .para2{
        width: 580px;
        grid-column: 3 / 5;
        grid-row: 3 / 4;
        margin: 0;
        align-self: start;
        margin-bottom: 22px;
    }

    .decale{
        width: 580px;
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .special_crit2{
        display: grid;
        grid-template-columns: 23% 15% 8% 34% 20%;
        grid-row-gap: 20px;
    }

    .special_crit2 h3, article{
        margin: 0;
        width: 90%;
    }

    .special_crit2 p{
        width: 90%;
        margin: 30px 0;
    }

    .janken{
        width: 100%;
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin: 22px 0 22px 44px;
    }

    .juice{
        width: 100%;
        grid-column: 4 / 6;
        grid-row: 2 / 3;
        margin: 0;
        align-self: center;
        margin: 22px 0;
    }

    .prive{
        width: 100%;
        grid-column: 1 / 4;
        grid-row: 3 / 4;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin-bottom: 22px;
    }

    .cone1{
        width: 250px;
        height: 250px;
        grid-column: 4 / 6;
        grid-row: 1 / 2;
        align-self: center;
        justify-self: end;
    }

    .cone2{
        width: 250px;
        height: 250px;
        grid-column: 4 / 5;
        grid-row: 3 / 4;
        justify-self: end;
        align-self: center;
    }

    .bulle{
        width: 200px;
        height: 200px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        justify-self: end;
        transform: translateY(50%) scaleX(-1);
    }

    .inverse{
        width: 200px;
        height: 200px;
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        justify-self: end;
    }

    .leftfact{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-row-gap: 20px;
    }

    .leftfact img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .leftfact p{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    .leftfact span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .leftfact h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .rightfact{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }
    
    .rightfact img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfact p{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    .rightfact span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .rightfact h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    .rightfactlivre{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }
    
    .rightfactlivre img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactlivre p{
        width: 90%;
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .rightfactlivre h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    .rightfactlivre svg{
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        align-self: end;
    }

    .rightfactshorts{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }
    
    .rightfactshorts img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 4;
        align-self: center;
    }

    .rightfactshorts p{
        width: 90%;
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .rightfactshorts h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    .rightfactshorts h4{
        margin-top: 0;
    }

    .centrer{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: center;
    }

    .centrerlivre{
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactijzersterkste{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }

    .rightfactijzersterkste img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
    }

    .rightfactijzersterkste p{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    .rightfactijzersterkste span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .rightfactijzersterkste h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    .ijzersterkste{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: flex-end;
        margin-bottom: 60px;
    }

    h4{
        color: rgba(0, 0, 0, 0.25);
        font-family: Signika;
        font-style: normal;
        font-weight: 600;
        font-size: 96px;
        margin: 22px 0;
    }

    .enzoknol{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        transform: rotate(-90deg);
        align-self: end;
        margin: 30%;
    }

    .basD{
        grid-column: 2 / 4;
        grid-row: 3 / 4;
        align-self: end;
        margin: 0;
    }

    .basG{
        grid-column: 1 / 4;
        grid-row: 3 / 4;
        align-self: end;
        margin: 8% 6px 0;
    }

    .leftfactenfant{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-template-rows: 25% 70%;
        grid-row-gap: 20px;
    }

    .leftfactenfant img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .leftfactenfant p{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }

    .leftfactenfant span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .leftfactenfant h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .rightfactchiffres{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-template-rows: 20% 75%;
        grid-row-gap: 20px;
    }
    
    .rightfactshiffres img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
    }

    .rightfactchiffres p{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    .rightfactchiffres span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .rightfactchiffres h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    h5{
        color: rgba(0, 0, 0, 0.50);
        font-family: Signika;
        font-size: 48px;
        font-style: normal;
        font-weight: 600;
        margin: 0;
    }

    .abbones{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: first baseline;
        justify-self: flex-end;
        margin: 27px 30px 0 0;
    }

    .videos{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .vues{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: last baseline;
        justify-self: flex-end;
        margin: 0 30px 27px 0;
    }

    .specialfact{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 20px;
    }

    .specialfact h2{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .specialfact p{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .specialfact span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .specialfact svg{
        width: 45%;
        height: auto;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: center;
        justify-self: center;
    }

    .specialfact2{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .specialfact2 p{
        width: 90%;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        margin-bottom: 27px;
    }

    .specialfact2 svg{
        width: 45%;
        height: auto;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: center;
        justify-self: center;
    }

    svg{
        width: 80%;
        margin: 0;
    }
}
/*Version ordinateur*/
@media (min-width: 1250px) and (max-width: 1920px){
    body {
        font-size: 20px;
    }

    section{
        margin: 0;
    }

    .menu_liste {
        display: flex;
        flex-direction: row;
        transform: translateY(0); 
        position: static; 
        height: auto; 
        padding: 0;
        background-color: transparent;
        align-items: start;
    } 
    .menu_btn { 
        display: none; /* Cache le bouton du menu */ 
    } 
    .menu_el { 
        flex-direction: row; 
    }

    .imagenav{
        height: 57px;
        width: auto;
    }

    footer{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
    }

    .footerpad{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        align-self: end;
    }

    .reseau{
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .item1{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .shop{
        width: auto;
        height: fit-content;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        justify-self: end;
        align-self: center;
        margin: 0;
        margin-right: 27px;
    }

    .shop a{
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    .shop a:hover{
        color: #320082;
        background-color: #FFF;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    .heaj{
        grid-column: 3 / 4;
        grid-row: 3 / 4;
        justify-self: end;
    }

    .item1fact{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .nav-button {
        transform: translateY(-110%);
    }

    #projet{
        content: "";
        display: block;
        margin-top: 10px;
    }

    #prev {
        width: 26px;
        height: 88px;
        left: 14%;
        border-radius: 0 22px 22px 0;
    }
    
    #next {
        width: 26px;
        height: 88px;
        right: 4%;
        border-radius: 22px 0 0 22px;
    }

    .left{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-template-rows: auto;
        grid-row-gap: 20px;
    }

    .left img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .left p{
        width: 580px;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin: 0;
        margin-bottom: 27xp;
        align-self: start;
    }

    .left h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .special_promo{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-template-rows: 22% 73%;
        grid-row-gap: 20px;
    }

    .special_promo img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .special_promo p{
        width: 580px;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin: 0;
        margin-bottom: 27px;
        align-self: start;
    }

    .special_promo h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .special_promo svg{
        margin: 0;
    }

    .right{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }

    .right img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .right p{
        width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        margin-bottom: 27px;
        align-self: start;
    }

    .right h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    .titre{
        height: 100px;
        margin: 19px 0;
        align-self: end;
    }

    .st{
        height: 100px;
        margin: 19px 0;
        align-self: end;
    }

    .left_crit{
        display: grid;
        grid-template-columns: 43% 10% 47%;
        grid-row-gap: 20px;
    }

    .left_crit img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .slider{
        height: auto;
        width: 82%;
        margin: 0;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .voiture img{
        margin: 0 0 0 10%;
    }

    .voiture span{
        margin-left: 10%;
    }

    .left_crit p{
        width: 580px;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin: 0 0 37px 0;
        align-self: start;
    }

    .left_crit h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 37px 0 0 0;
        align-self: end;
        line-height: normal;
    }

    .left_crit iframe{
        width: 480px;
        height: 270px;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .right_crit{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-template-rows: auto;
        grid-row-gap: 20px;
    }

    .right_crit img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .right_crit p{
        width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .right_crit h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
        line-height: normal;
    }

    .special_crit{
        display: grid;
        grid-template-columns: 23% 8% 15% 54%;
        grid-row-gap: 20px;
    }

    .special_crit h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin-top: 22px;
    }

    .autre1{
        width: 250px;
        height: 250px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: center;
    }

    .para1{
        width: 580px;
        grid-column: 3 / 5;
        grid-row: 1 / 2;
        margin: 0;
        align-self: start;
        margin-top: 67px;
    }

    .para2{
        width: 580px;
        grid-column: 3 / 5;
        grid-row: 3 / 4;
        margin: 0;
        align-self: start;
        margin-bottom: 22px;
    }

    .decale{
        width: 580px;
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .special_crit2{
        display: grid;
        grid-template-columns: 23% 15% 8% 34% 20%;
        grid-template-rows: 23% 31% 36%;
        grid-row-gap: 20px;
    }

    .special_crit2 h3, article{
        margin: 0;
    }

    .special_crit2 p{
        margin: 30px 0;
    }

    .janken{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin: 22px 0 22px 44px;
    }

    .juice{
        width: 600px;
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        margin: 0;
        align-self: center;
        margin: 22px 0;
    }

    .prive{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        margin: 0 0 0 44px;
        align-self: self-start;
        line-height: normal;
        margin-bottom: 22px;
    }

    .cone1{
        width: 250px;
        height: 250px;
        grid-column: 5 / 6;
        grid-row: 1 / 2;
        align-self: center;
    }

    .cone2{
        width: 250px;
        height: 250px;
        grid-column: 4 / 5;
        grid-row: 3 / 4;
        justify-self: end;
        align-self: center;
    }

    .bulle{
        width: 200px;
        height: 200px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        justify-self: end;
        transform: translateY(50%) scaleX(-1);
    }

    .inverse{
        width: 200px;
        height: 200px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .leftfact{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-row-gap: 20px;
    }

    .leftfact img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .leftfact p{
        width: 580px;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .leftfact h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .rightfact{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }
    
    .rightfact img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfact p{
        width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
        margin-bottom: 22px;
    }

    .rightfact h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    .rightfactlivre{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }
    
    .rightfactlivre img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactlivre p{
        max-width: 520px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
        margin-bottom: 22px;
    }

    .rightfactlivre h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    .rightfactshorts{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-template-rows: 38% 58%;
        grid-row-gap: 20px;
    }
    
    .rightfactshorts img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactshorts p{
        max-width: 520px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
        margin-bottom: 22px;
    }

    .rightfactshorts h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0 0 0 44px;
        align-self: end;
    }

    .centrer{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: center;
    }

    .centrerlivre{
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactijzersterkste{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-row-gap: 20px;
    }

    .rightfactijzersterkste img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .rightfactijzersterkste p{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    
    .rightfactijzersterkste span{
        display: block;
        width: 90%;
        margin: 10px 0;
        margin-bottom: 27px;
    }

    .rightfactijzersterkste h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    .ijzersterkste{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: flex-end;
        margin-bottom: 60px;
    }

    h4{
        color: rgba(0, 0, 0, 0.25);
        font-family: Signika;
        font-size: 96px;
        font-style: normal;
        font-weight: 600;
        font-size: 96px;
        margin: 22px 0;
    }

    .enzoknol{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        transform: rotate(-90deg);
        align-self: end;
        margin: 30%;
    }

    .basD{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        align-self: end;
    }

    .basG{
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        align-self: end;
        margin: 8% 6px;
    }

    .leftfactenfant{
        display: grid;
        grid-template-columns: 43% 10% 37% 10%;
        grid-template-rows: 25% 70%;
        grid-row-gap: 20px;
    }

    .leftfactenfant img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .leftfactenfant p{
        max-width: 580px;
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
    }

    .leftfactenfant h2{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin: 0;
        align-self: end;
    }

    .rightfactchiffres{
        display: grid;
        grid-template-columns: 10% 37% 10% 43%;
        grid-template-rows: 20% 75%;
        grid-row-gap: 20px;
    }
    
    .rightfactshiffres img{
        height: auto;
        width: 82%;
        margin: 37px 0px 37px 44px;
        grid-column: 4 / 5;
        grid-row: 1 / 3;
    }

    .rightfactchiffres p{
        max-width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
        align-self: start;
        margin-bottom: 27px;
    }

    .rightfactchiffres h2{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 22px 0 0 44px;
        align-self: end;
    }

    h5{
        color: rgba(0, 0, 0, 0.50);
        font-family: Signika;
        font-size: 48px;
        font-style: normal;
        font-weight: 600;
        margin: 0;
    }

    .abbones{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: first baseline;
        justify-self: flex-end;
        margin: 27px 30px 0 0;
    }

    .videos{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: center;
    }

    .vues{
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        align-self: last baseline;
        justify-self: flex-end;
        margin: 0 30px 27px 0;
    }

    .specialfact{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 20px;
    }

    .specialfact h2{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .specialfact p{
        max-width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
    }

    .specialfact svg{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: center;
        justify-self: center;
    }

    .specialfact2{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .specialfact2 p{
        max-width: 580px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin: 0;
    }

    .specialfact2 svg{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: center;
        justify-self: center;
    }

    svg{
        width: 80%;
        margin: 0;
    }
}