*{
    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;
    
    }













    .contenant{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0%;
        background-color: blue;
        
    }


.image{
    position: fixed;
    top: 0%;
    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: 70% ;
    opacity: 0;
z-index: 100;
}



#un{
background-image: url(image/signal1.jpg);
opacity: 1;
}
#deux{
    background-image: url(image/signal2.jpg);
    }
    #trois{
        background-image: url(image/signal3.jpg);
        }
        #quatre{
            background-image: url(image/signal4.jpg);
            }
            #cinq{
                background-image: url(image/signal5.jpg);
                }
                #six{
                    background-image: url(image/signal6.jpg);
                    }
                    #sept{
                        background-image: url(image/signal7.jpg);
                        }
                        #huit{
                            background-image: url(image/signal8.jpg);
                            }
                            #neuf{
                                background-image: url(image/signal9.jpg);
                                }
                                #dix{
                                    background-image: url(image/signal10.jpg);
                                    }
                                    #onze{
                                        background-image: url(image/signal11.jpg);
                                        }
                                        #douze{
                                            background-image: url(image/signal12.jpg);
                                            }

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

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


#d2:hover ~ #deux{
    opacity: 1;
} 
#d3:hover ~ #trois{
    opacity: 1;
} 
#d4:hover ~ #quatre{
    opacity: 1;
} 
#d5:hover ~ #cinq{
    opacity: 1;
} 
#d6:hover ~ #six{
    opacity: 1;
} 
#d7:hover ~ #sept{
    opacity: 1;
} 
#d8:hover ~ #huit{
    opacity: 1;
} 
#d9:hover ~ #neuf{
    opacity: 1;
} 
#d10:hover ~ #dix{
    opacity: 1;
} 
#d11:hover ~ #onze{
    opacity: 1;
} 
#d12:hover ~ #douze{
    opacity: 1;
} 

#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;
} 
#d7:hover ~ .orangebox #o7{
    width: 100%; transition: 0.1s linear;
} 
#d8:hover ~ .orangebox #o8{
    width: 100%; transition: 0.1s linear;
} 
#d9:hover ~ .orangebox #o9{
    width: 100%; transition: 0.1s linear;
} 
#d10:hover ~ .orangebox #o10{
    width: 100%; transition: 0.1s linear;
} 
#d11:hover ~ .orangebox #o11{
    width: 100%; transition: 0.1s linear;
} 
#d12:hover ~ .orangebox #o12{
    width: 100%; transition: 0.1s linear;
} 

.plaque{
    position: relative;
    width: 50%;
    margin-top: 20%;
    z-index: 104;
    display: block;
    margin-left: auto;
    margin-right:auto ;
    transform: rotate(10deg);
}
#p1{
    margin-top: 110vh ;
}
#p4{
    margin-bottom: 110vh ;
}