/* CSS index-projets Rupin Conq Architecture */
/* Design : RCA */
/*----------------------------------------------------------------------------------------------------------------------------------*/
*                             {box-sizing: border-box;-webkit-font-smoothing: antialiased;margin:0;padding:0;}
::selection                   {background-color: transparent;color: black;}/* Firefox */::-moz-selection{background-color: transparent;color: black;}  

/*----------------------------------------------------------------------------------------------------------------------------------*/
body                          {text-align:left;background-color:white;font-family: 'Noto Sans JP', sans-serif; font-size: 1em;font-weight:400;color:rgba(20,20,20,1);word-wrap: break-word;background-color:none;}
h1                      {color:white;font-size: 1em;letter-spacing: .1em; font-weight: 400;opacity: 1;}
h2                      {font-size: 1.2em;font-weight: 500;padding:0 0 10px 0; margin:0 0 0 0; border-bottom: 0px solid silver;}
 
/*----------------------------------------------------------------------------------------------------------------------------------*/



a  {
  font-family: 'Noto Sans JP', sans-serif;font-size: 1em;font-weight:500;line-height: 1.9em;
  border:1px solid white;
  background-color: transparent;
  color:white;
  border-radius:35px;
  padding:5px 30px;
  text-align:center;
  text-decoration: none;
}


a#projets{color:black;background-color:white;}
a#projets:hover{color:rgba(0, 0, 0, .7);background-color:white;}
a#atelier{color:white;background-color:none;}
a#atelier:hover{color:black;background-color:white;transition: .1s ease-in-out;}
.intro {          
                  position:fixed;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  height: 120vh; /* Pour centrer verticalement */
                  text-align: center;
                  z-index: 2;
                  width:100%;
                  padding:15%;
                }

.navigation {     margin:3%;
                  display: flex;
                  flex-direction: row;
                  gap: 50px; /* Espace entre les boutons */}

.overlay-background        {
                            z-index: 2;
                            position: fixed;
                            width:100%;
                            text-transform: none;
                            left:0;top:0;
                            height:calc(100% - 0px);
                            font-size:1.3em;
                            background-color: rgba(0,0,0,0.2);}

#spread {display: none;}

.overlay-top-left{position:absolute;top:5%;left:5%;}
.overlay-top-center{position:absolute;top:5%;left:50%;transform: translate(-50%, 0%);}
.overlay-top-right{position:absolute;top:5%;right:5%;}

.overlay-half-left{position:absolute;top:50%;left:5%;transform:translate(0%, -50%);}
.overlay-half-center{position:absolute;top:50%;left:50%;transform: translate(-50%, 0%);}
.overlay-half-right{position:absolute;top:50%;right:5%;transform:translate(0%, -50%);}

.overlay-bottom-left{position:absolute;bottom:5%;left:5%;}
.overlay-bottom-center{position:absolute;bottom:5%;left:50%;transform: translate(-50%, 0%);}
.overlay-bottom-right{position:absolute;bottom:5%;right:5%;}

@keyframes animatedBackground { 0%   {background-position: 0 0;}100% {background-position: 100% 0;}}

#backgroundImage{
                  position:fixed;
                  z-index:1;
                  height:100%;
                  width:100%;
                  left:0;top:0;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
                  animation: animatedBackground 50s linear infinite alternate; 
}

#actu{
  position:absolute;top:100%;left:0%;
  width: 100%;
  height:auto;
  padding:5% ;
  background-color: white;
font-size:1.3em;  font-weight: 500;   
  z-index:3;

}
#top{
  position:absolute;top:15%;right:5%;
  font-size: 1.2em;
  width: calc(50% - 20%);
  height:auto;
  margin:0px 5% 10px 0% ;
  background-color: none;
  color:black;
  z-index:3;

}

@media only all and (min-width : 100px) and (max-width : 600px)
                              {
#spread {display: none;}
.navigation {     margin:15%;
                  display: flex;
                  flex-direction: row;
                  gap: 50px; /* Espace entre les boutons */}

}