*{
    margin: 0%;
    padding: 0%;
    border: 0%;
    /* --main-color:  rgb(255, 248, 239); */
    --main-color:  rgb(236, 231, 222);
    /* --text-color:  rgb(255, 72, 0); */
    --text-color:  rgb(255, 92, 28);
    
}

/* @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: var(--main-color);
            margin: auto;
            padding: 3vh;
            border: 0.3vh solid rgb(20, 20, 20);;
          }
          
          .close {
            color: rgb(20, 20, 20);
            float: right;
            font-size: 3vh;
            font-weight: bold;
          }
          
          .close:hover,
          .close:focus {
            color: rgb(20, 20, 20);
            text-decoration: none;
            cursor: pointer;
          }
        
          .textabout{
            font-family: "basier";
            font-size: 2.5vh;
            color: rgb(20, 20, 20);
          }
        
        
        
        
          .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;
            
            }
        















.debut{
    width: 100vw;

    height:100%;
    position: relative;
    top: 0%;

    background-attachment: fixed;
    background-image: url(image/signalu/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60vh ;
z-index: 5;
}


#lampeun{
background-image: url(image/11.jpg);
}
#lampedeux{
    background-image: url(image/22.jpg);
    }
    #lampetrois{
        background-image: url(image/33.jpg);
        }
    

 
    .contenant{
        width: 100%;
        height: 100%;
        position: relative;
        
    }


.image{
    position: absolute;
    top: 0vh;
    width: 100%;
    height:100%;
    background-color: var(--main-color);
    background-attachment: fixed;
    background-image: url(image/signalu/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40vh ;
   opacity: 0;
z-index: 5;

}



#un{
background-image: url(image/lamp.png);
opacity: 1;

}
#deux{
    background-image: url(image/lamp2.png);
    }
    #trois{
        background-image: url(image/lamp3.png);
        }
        #quatre{
            background-image: url(image/lamp5.png);
            }
            #cinq{
                background-image: url(image/lamp2.png);
                }
                #six{
                    background-image: url(image/lamp6.png);
                    }

   

.declenche{
    position: relative;
    width: 100%;
    z-index: 7;
    height: 16.66666666vh;
}

.orangebox{
    position: fixed;
    width: 1%;
    height: 50vh;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    z-index: 5;
    
}
.orange{
position: relative;
height: 16.66666666%;
background-color: var(--text-color);
width: 0%;
transition: 0.1s linear;
margin-left:auto;
margin-right:auto;
}


#d2:hover ~ #deux{
    opacity: 1;transition: 0s;
} 
#d3:hover ~ #trois{
    opacity: 1;transition: 0s;
} 
#d4:hover ~ #quatre{
    opacity: 1;transition: 0s;
} 
#d5:hover ~ #cinq{
    opacity: 1;transition: 0s;
} 
#d6:hover ~ #six{
    opacity: 1;transition: 0s;
} 

#d2:hover ~ #un{
    opacity: 0;
} 
#d3:hover ~ #un{
    opacity: 0;
} 
#d4:hover ~ #un{
    opacity: 0;
} 
#d5:hover ~ #un{
    opacity: 0;
} 
#d6:hover ~ #un{
    opacity: 0;
} 


#d1:hover ~ .orangebox #o1{
    width: 100%;
    transition: 0.1s linear;
} 
#d2:hover ~ .orangebox #o2{
    width: 100%; transition: 0.1s linear;
} 
#d3:hover ~ .orangebox #o3{
    width: 100%; transition: 0.1s linear;
} 
#d4:hover ~ .orangebox #o4{
    width: 100%; transition: 0.1s linear;
} 
#d5:hover ~ .orangebox #o5{
    width: 100%; transition: 0.1s linear;
} 
#d6:hover ~ .orangebox #o6{
    width: 100%; transition: 0.1s linear;
}