*{
    margin: 0%;
    padding: 0%;
    border: 0%;
    --main-color:  rgb(0, 0, 0);
    --text-color:  rgb(255, 234, 204);
    --main2-color:  rgb(236, 226, 213);
    --text2-color:  rgb(255, 72, 0);
    
}

/* @media screen and (max-width: 769px){
    *{
        cursor: auto;
    }}
    @media screen and (min-width: 769px){
        *{
            cursor: auto; 
        }} */
     a, a:hover, a:visited, a
{
    color:#000;
    text-decoration:none;
}
body{
    background-color:var(--main-color);
    overflow-x: hidden;
}

    .acceuil{
        position: fixed;
        top: 2.9vh;
        left: 9.3vh;
        z-index: 10;}
    .logo{
        position: fixed;
        top: 2.9vh;
        right: 9.3vh;
        z-index: 10;}

        .langue{
            position: fixed;
            bottom: 2.9vh;
            left: 9.3vh;
            z-index: 10;}

    .contact{
        position: fixed;
        bottom: 2.9vh;
        right: 17vh;
        z-index: 10;}
    .about{
        position: fixed;
        bottom: 2.9vh;
        left: 9.3vh;
        z-index: 10;}
    .insta{
        position: fixed;
        bottom: 2.9vh;
        right: 9.3vh;
        text-align: right;
        z-index: 10;
    }

    button {
        background-color: #0081b000;
        border: none;
    }


    .textheader{    font-family: "variable";
        font-variation-settings: 'wght' 700;
        transition: 500ms;
        font-size: 3.3vh;
        color: var(--text-color);
        cursor: pointer;
  
    }
    .textheader2{    font-family: "variable";
        font-variation-settings: 'wght' 400;
        font-size: 3.3vh;
        color: var(--text-color);
        cursor: pointer;
    }
 

    .textheader:hover{
        font-variation-settings: 'wght' 800;
        }



               
                .box {
                    width: 50vw;     
                         
                }
                    #contact {
                        bottom: 10vh;
                        transform: translate(150%);
                        transition: 0.5s cubic-bezier(.77,0,.18,1);
                        position: fixed;
                        right: 9.3vh;
                    }
                    #merci {
                        top: 10vh;
                        transform: translate(150%);
                        transition: 0.5s cubic-bezier(.77,0,.18,1);
                        position: fixed;
                        right: 9.3vh;
                    }     
                    /* #bio {
                        top: 10vh;
                        transform: translate(-840px);
                        transition: 0.5s cubic-bezier(.77,0,.18,1);
                        position: fixed;
                        left: 9.3vh;
                    }     */

                    .joindre1{font-family: "basier";
                        /* color: rgb(255, 249, 234); */
                                    font-size: 2.3vh;
                                    position: absolute;
                                    bottom: 0%;
                                    right: 0%;
                                    text-align: right;
                                   
                                    color: var(--text-color);
                        }
                    .joindre2{font-family: "basier";
                        /* color: rgb(255, 249, 234); */
                                    font-size: 2.3vh;
                                    position: absolute;
                                    top: 0%;
                                    right: 0%;
                                    text-align: right;
                             
                                    color: var(--text-color);
                        }
                        /* .joindre3{font-family: "basier";
                                        width: 100%;
                        
                                        font-size: 25px;
                                        position: absolute;
                                        top: 0%;
                                        left: 0%;
                                       
                                        color: var(--text-color);
                            }
                            .joindre4{font-family: "basier";
                                font-size: 1.5vw;
                                            padding: 65px;
                                            position: absolute;
                                            bottom: 0%;
                                            left: 0%;
                                            text-align: left;
                                            color: var(--text-color);
                                            z-index: 100;
                                } */

   

.modal {
    display: none; 
    position: fixed; 
    width: 100vw;
    height: 100vh; 
    z-index: 1000; 
    top: 0px;
    left: 0px;
    overflow: auto; 
    background-color: rgba(218, 211, 206, 0.288);
  }
  
  .modal-content {
    width: 60%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.507);
    margin: auto;
    padding: 3vh;
    border: 0.3vh solid var(--text2-color);
  }
  
  .close {
    color: var(--text-color);
    float: right;
    font-size: 3vh;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
  }

  .textabout{
    font-family: "basier";
    font-size: 2.5vh;
    color: var(--text-color);
  }




  .fleche {font-family: "variable";
    font-variation-settings: 'wght' 200, 'wdth' 85;
    color: var(--text-color);
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 100;
    font-size: 1.5vh;
}

@media screen and (max-width: 700px){ .en{opacity: 0;} }


@media screen and (min-width: 500px){
        #idmerci:hover ~ #merci{
            transform: translate(0px);
        }
        #idcontact:hover ~ #contact{
            transform: translate(0px);
        }
        #idbio:hover ~ #bio{
            transform: translate(0px);
        }
        #idabout:hover ~ #about{
            transform: translate(0px);
        }
    }

                
@media screen and (max-width: 500px){


    .acceuil{
        top: 1.5vh;
        left: 4vh;
}
    .logo{
        top: 1.5vh;
        right: 4vh;
 }
    .contact{
        bottom: 1.5vh;
        right: 8vh;
}
    .about{
        bottom: 1.5vh;
        left: 4vh;
}
    .insta{
        bottom: 1.5vh;
        right: 4vh;
 }


    #contact {
        bottom: 8vh;
        transform: translate(150%);
        right: 4vh;
    }
    #merci {
        top: 8vh;
        transform: translate(200%);
        right: 4vh;
    }     
    .joindre1{
                    font-size: 2vh;
        }
    .joindre2{
                    font-size: 2vh;
        }

      .move{
        -webkit-animation: moveall 5s;
        animation: moveall 10s;
      }

    .textheader{    font-family: "variable";
    font-variation-settings: 'wght' 700;
    transition: 0ms;
    font-size: 2.5vh;
    }
    .textheader:hover{
    font-variation-settings: 'wght' 700;
    color: rgba(255, 0, 0, 0);
    -webkit-text-stroke: 0.2vw var(--text-color);
    }
        
      @keyframes moveall {
        0%   {transform: translate(150%); }
        10%  {transform: translate(0vw); }
        90%  {transform: translate(0vw);}
        100% {transform: translate(150%); }
      }
}


@font-face {
    font-family: 'basier'; 
    src: url(font/Syne-Regular.ttf);
    font-style: normal;
    font-weight: 100;
    
    }
 
@font-face {
        font-family: "variable"; 
        src: url("font/Syne[wght].ttf");
        font-style: normal;
        font-weight: 400;
    
    }





main{
    margin-top:10vh;
    display: grid;
    z-index: -10;
    /* grid-template-columns: 1f 1fr 1fr 1fr; */
    /* grid-row-gap:10%; */
    /* animation: growinvers 4000ms infinite forwards; */
    }

        main{
            grid-template-columns: repeat(4, 1fr);
            margin-left: 6vw;
            margin-right: 6vw;
            position: relative;
            grid-column-gap:3%;
            grid-row-gap:1.5%;
          }
            .boitecoffret1{
                /* background-color: burlywood; */
                width:100%;
                grid-column-start: 3;
                grid-column-end: 5;
                grid-row-start: 2;
                grid-row-end: 3;
                z-index: 10;
            }
            .boitecoffret2{
                /* background-color: burlywood; */
                width:100%;
                grid-column-start: 3;
                grid-column-end: 5;
                grid-row-start: 2;
                grid-row-end: 3;
                z-index: 2;
            }
            .boitecouv{
                /* background-color: rgb(156, 95, 15); */
                width:100%;
                height: 200%;
                grid-column-start: 3;
                grid-column-end: 5;
                grid-row-start: 2;
                grid-row-end: 4;
                z-index: 5;
            }
            .couv{
                width: 100%;
                height: auto;
                position: sticky;
                top: 15%;
            }
            .coffret1{
                width: 100%;
                height: auto;
            }
            .coffret2{
                width: 100%;
                height: auto;
            }

            .abime1{
                /* background-color: rgb(156, 95, 15); */
                width:80%;
                margin-left: auto;
                margin-right: auto;
                height: auto;
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 4;
                grid-row-end: 6;
                z-index: 5;
            }
             .abime2{
                /* background-color: rgb(156, 95, 15); */
                width:100%;
                height: auto;
                grid-column-start: 2;
                grid-column-end: 5;
                grid-row-start: 5;
                grid-row-end: 7;
                z-index: 4;
                margin-top: 30%;
                transform: rotate(-5deg);
            } 
            .abime3{
                /* background-color: rgb(156, 95, 15); */
                width:70%;
                height: auto;
                grid-column-start: 1;
                grid-column-end: 4;
                grid-row-start: 7;
                grid-row-end: 8;
                z-index: 4;
                transform: rotate(20deg);
            } 
            .abime4{
                /* background-color: rgb(156, 95, 15); */
                width:100%;
                height: auto;
                grid-column-start: 2;
                grid-column-end: 5;
                grid-row-start: 8;
                grid-row-end: 9;
                z-index: 3;
                transform: rotate(-25deg);
                margin-top: -10%;
            } 
            /* .abime5{
                background-color: rgb(156, 95, 15);
                width:80%;
                height: auto;
                grid-column-start: 1;
                grid-column-end: 5;
                grid-row-start: 9;
                grid-row-end: 10;
                z-index: 5;
                transform: rotate(5deg);
                margin-top: 0%;
            }  */

                                                    #i1, #i2, #i3, #i4, #i5, #i6, #i7, #i8, #i9, #i10, #i11, #i12, #i13, #i14, #i15, #i16, #i17, #i18, #i19, #i20, #i21, #i22 { display: none;}

                                                    .container{
                                                            user-select: none;
                                                            width:80%;
                       
                                                            grid-column-start: 1;
                                                            grid-column-end: 5;
                                                            grid-row-start: 9;
                                                            grid-row-end: 10;
                                                            z-index: 5;
                                                            transform: rotate(5deg);
                                                            margin-top: 0%;
                                                        }
                                                    
                                                        
                                                        .slide_img{
                                                            position: absolute;
                                          
                                                            width: 100%;
                                                            height: auto;
                                                        }
                                                        
                                                        /* .container .slide_img{
                                                            position: absolute;
                                                            left: 50px;
                                                            width: 1300px;
                                                            height: 100%;
                                                        } */
                                                        
                                                        .container .slide_img img{
                                                            width: inherit;
                                                            height: inherit;
                                                        }
                                                    
                                                        .prev, .next{                      
                                                            width: 5%;
                                                            height: auto;
                                                            position: absolute;
                                                            top:44%;                                                 
                                                            color:rgb(255, 94, 0);
                                                            z-index: 99;
                                                            text-align: center;
                                                            font-size: 4vw;
                                                            font-family: variable;
                                                        }

                                                        @media screen and (max-width: 500px){ 
                                                            .prev, .next{                      
                                                                font-size: 30px;                                            
                                                            }
                                                        }
                                                    
                                                        .next{right:-5%;}
                                                        .prev{left:-5%;}
                                                        #hide {opacity: 0;}

                                                    
                                                        .prev:hover, .next:hover{
                                                            transition: .3s;
                                                            /* background-color: rgba(29, 29, 29, 0.438); */
                                                            color: rgb(247, 189, 0); 
                                                        }

                                                        .slide_img{opacity: 0;}

                                            #i1:checked ~ #one  ,
                                            #i2:checked ~ #two  ,
                                            #i3:checked ~ #three,
                                            #i4:checked ~ #four ,
                                            #i5:checked ~ #five,
                                            #i6:checked ~ #six,
                                            #i7:checked ~ #seven  ,
                                            #i8:checked ~ #eight  ,
                                            #i9:checked ~ #nine,
                                            #i10:checked ~ #ten ,
                                            #i11:checked ~ #eleven,
                                            #i12:checked ~ #twelve,
                                            #i13:checked ~ #thirteen,
                                            #i14:checked ~ #fourteen,
                                            #i15:checked ~ #fiveteen,
                                            #i16:checked ~ #sixteen,
                                            #i17:checked ~ #seventeen,
                                            #i18:checked ~ #eighteen,
                                            #i19:checked ~ #nineteen,
                                            #i20:checked ~ #twenty,
                                            #i21:checked ~ #twentyone,
                                            #i22:checked ~ #twentytwo
                                         
                                            {opacity: 1; animation: scroll 1s ease-in-out;}

                                       
                                                    

            .explication{
                /* background-color: tomato; */
                width: 60%;
                height: 100%;
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 3;
                /* margin-left: auto;
                margin-right: auto; */
            }
            .explicationstick{
                /* background-color: rgb(71, 255, 240); */
                width: auto;
                position: sticky;
                top: 385px;
                margin-bottom: 10%;

            }
            
            .titre1{
                margin-right: auto;
                margin-left: auto;
                margin-top: 30%;
                /* background-color: brown; */
                /* animation: grow 4000ms infinite forwards; */
            }
                        /* @keyframes grow {
            
                            0% {
                                margin-top: 30%;
                                    }
                            50% {
                                margin-top: 29%;
                            }
                            
                            100% {
                                margin-top: 30%;
                            }} */
            
            
            
                    h1{
                        font-family: "variable";
                        font-variation-settings: 'wght' 200, 'wdth' 85;
                        animation: mouse 500ms;
                        text-align: left;
                        color: rgb(255, 249, 234);
                    }
                                @keyframes mouse {
                    
                                0% {
                                        font-variation-settings: 'wght' 500, 'wdth' 700;
                                        }
                                100% {
                                font-variation-settings: 'wght' 200, 'wdth' 85;
                                }}
                    
                    h1:hover{
                    font-family: "variable";
                    font-variation-settings: 'wght' 500, 'wdth' 700;
                    animation: mouse2 500ms;
                    text-align: left;
                    }
                    
                                @keyframes mouse2 {
                    
                                0% {
                                    font-variation-settings: 'wght' 200, 'wdth' 85;
                                    }
                                100% {
                                font-variation-settings: 'wght' 500, 'wdth' 700;
                                }
                                }
            .paragraphe1{
                margin-right: auto;
                margin-left: auto;
                /* background-color: blue; */
                margin-top: 2%;
            }
            
            
                    p{   font-family: basier, sans-serif;
                        color: rgb(255, 249, 234);
                    }
    


.img2{
    width: 100%;
    mix-blend-mode: multiply;
}


@media screen and (max-width: 500px){ .container{ width:100%;}}