@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:500&display=swap');
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
::-webkit-scrollbar{
width: 4px;
color:#000;
transition: all .4s ease;
}
::-webkit-scrollbar-thumb {
background: #000; 
border-radius: 4px;
width: 4px;
transition: all .4s ease;
}
::-webkit-scrollbar-track {
background: #FFF; 
border-radius: 4px;
width: 4px;
}
#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #000;
}
h1 { 
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

.header_down{
    height: 120px;
	position: fixed;
	width: 100%;
    background: #000;
    top: 0;
    z-index: 104;
    transition: all 300ms ease-in-out;
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
height: auto;
z-index: 40;
	margin-bottom: 0;
}
.espacehaut{
height: 120px;
z-index: 1;
}
/* FUTUR FOOTER QUI BUG 
#footer{
position: relative;
	margin-top: 0;
  right: 0;
  bottom: 0;
  left: 0;
width:100%;
height: 120px;
background-color: #000;
z-index:200;
}
*/
.colonne1{
height: auto;
position: relative;
width: 50%;
float: left;
transition: all 250ms ease-out;
	margin-bottom: 0;
}

.colonne2{
height: auto;
position: relative;
width: 50%;
float: right;
transition: all 250ms ease-out;
	margin-bottom: 0;
}

.titre_vignette{
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
font-weight: 500;
font-size:2vw;
}

.hover_vignettes{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#000;
background-blend-mode: difference;
}

.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
cursor: cell;
}

.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}

.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}

.hover_vignettes_vertical{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}


.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}


.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
cursor: cell;
}


.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}


.vignette_verticale:hover .informations_vignette{
	margin-top:0.5vw;
}

.vignette_horizontale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

.vignette_verticale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}

.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: cell;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: cell;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: cell;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
transition: all .4s ease;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow: 
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width:  30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
cursor: cell;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: "Climate Crisis", serif;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 300;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
@keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@keyframes scale{
0%{
	transform: scale(.6);
	}
100%{
	transform: scale(1);
	}
}
@-webkit-keyframes breakeranimate{
0%{
	transform: scale(.6);
	}
100%{
transform: scale(1);
	}
}
.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}
.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition:  scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition:  scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}

/* Mobiles */
@media only screen and (max-width: 650px){
.grille{
z-index : 98;
height: auto;
width:100%;
}

.colonne1{
height: auto; 
position: relative;
width: 100%;
float: left;
}


.colonne2{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.colonne3{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.hover_vignettes{
display:none;
}

.hover_vignettes_vertical{
display:none;
}

.navigation-links a{
	font-size: 20px;
}
#breaker{
	height: 300vh;
	width: 200%;
	background-color: #fff;
	opacity: 1;
	animation: breakeranimate 3s linear;
	display: none;
	z-index: 300;
	transform: rotate(15deg);
	position: fixed;
	transform : translateY(-100%);
	}
@keyframes breakeranimate{
	0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
	50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
	100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
	}
@-webkit-keyframes breakeranimate{
	0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
	50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
	100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
	}
.social-media-links{
	display: none;
    }
.cursor{
	display: none;
	}
.header_down{
    height: 100px;
}
.espacehaut{
height: 100px;
}
/* Futur footer qui bug
.footer{
height: 100px;
}
*/
.header_down .logoInit{
	cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
	position: absolute;
	top: 32%;
	left: 3%;
	opacity: 1;
	transition: all .4s ease;
	}
.logo a{
	display: none;
	}

  .vignette_horizontale img[src], .vignette_verticale img[src] {
    display: none;
  }

  .vignette_horizontale img[data-swap], .vignette_verticale img[data-swap] {
    display: block;
  }

  .hover_vignettes, .hover_vignettes_vertical {
    display: block;
    opacity: 1;
    position: absolute;
    bottom: 12px;
    left: 11px;
    background: rgba(0, 0, 0, 0.7);
    text-align: left;
    padding: 3px;
    width: auto;
    min-width: 60%;
    height: auto;
    margin: 0;
    -webkit-transition: none;
    transition: none;
  }

  .texte_vignette, .texte_vignette_verticale {
    opacity: 1;
    position: relative;
    margin: 0;
    padding: 1px;
    text-align: left;
    -webkit-transition: none;
    transition: none;
  }

  .titre_vignette {
    font-size: 4vw;
    margin-bottom: 2px;
    text-align: left;
    padding: 0 5px;
  }

  .informations_vignette {
    font-size: 2.8vw;
    margin: 0;
    opacity: 1;
    text-align: left;
    padding: 0 5px;
    -webkit-transition: none;
    transition: none;
  }

  /* Désactiver tous les effets hover sur mobile */
  .vignette_horizontale:hover .hover_vignettes,
  .vignette_verticale:hover .hover_vignettes_vertical,
  .vignette_horizontale:hover .texte_vignette,
  .vignette_verticale:hover .texte_vignette_verticale,
  .vignette_horizontale:hover .informations_vignette,
  .vignette_verticale:hover .informations_vignette {
    margin-top: initial;
    opacity: 1;
    transform: none;
  }
}
       
/* for tabs  */
@media all and (max-width: 1025px) and (min-width: 651px){

h1{
	font-size : 25px;
	}
.navigation-links a{
	font-size: 30px;
}
.social-media-links{
	display: none;
}
#breaker{
	height: 300vh;
	width: 120%;
	opacity: 1;
	animation: breakeranimate 2s linear;
	display: none;
	z-index: 300;
	transform: rotate(15deg);
	position: fixed;
	transform : translateY(-100%);
	}
@keyframes breakeranimate{
	0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
	50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
	100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
	}
@-webkit-keyframes breakeranimate{
	0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
	50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
	100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
	}
.cursor{
	display: none;
	}
.colonne1{
height: auto; 
position: relative;
width: 100%;
float: left;
}


.colonne2{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.colonne3{
height: auto; 
position: relative;
width: 100%;
float: left;
}
.hover_vignettes{
width:32vw;
height:32vw;
left:0;
right:0;
top:12.5vw;
border:0px solid #2d2d2d; 
opacity: 0;
}


.hover_vignettes p{
margin-top:37%;
font-size:3vw;
}

.hover_vignettes_vertical{
	
width:32vw;
height:32vw;
left:0;
right:0;
top:50vw;
border:0px solid #2d2d2d; 
opacity: 1;
}
.hover_vignettes_vertical p{
margin-top:37%;
font-size:3vw;
}

.image_horizontale video {
    position: relative;
    margin-bottom: 10px;
}

.hover_vignettes {
display:none;
}

.hover_vignettes_vertical {
display:none;
}

}

@media all and (max-width: 9000px) and (min-width: 1441px){
.navigation-links a{
	font-size: 50px;
}

}

.playgif img {
  background: #f5f5f5; /* Couleur de fond pendant le chargement */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.playgif img.loaded {
  opacity: 1;
}

/* Ajuster les styles existants */
.vignette_horizontale, .vignette_verticale {
  background: #f5f5f5; /* Fond gris pendant le chargement */
  min-height: 200px; /* Hauteur minimale pour éviter le saut de contenu */
}

/* Styles spécifiques mobile */
@media only screen and (max-width: 650px) {
  .playgif img {
    transition: none; /* Désactiver la transition sur mobile */
  }
  
  .vignette_horizontale, .vignette_verticale {
    min-height: 150px; /* Hauteur minimale ajustée pour mobile */
  }
}