body {
  background: #EFEFEF;
  font-family: DT Nightingale; 
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
	


@font-face {
	font-family: "Exposure Trial";
	src : url(polices/ExposureItalicTrial80.otf) format("opentype");
}

@font-face {
	font-family: "DT Nightingale";
	src: url(polices/DTNightingale-Light.otf) format("otf");

}




/* Conteneur fixe en haut à gauche */
.banner-etoiles {
  	position: fixed;
  	top:5px;
  	left: 50%;
  	transform: translateX(-50%);
  	width: 400px;         /* Ajustez la largeur visible souhaitée */
  	overflow: hidden;      /* Masque le texte qui dépasse */
  	white-space: nowrap;   /* Empêche le texte d'aller à la ligne */
  	z-index: 1000;         /* Reste au-dessus des images */
  	pointer-events: none;  /* Ne bloque pas le clic sur le fond */
  
 	 /* Optionnel : masque les bords avec un fondu */
  	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Le rail qui contient les deux blocs de texte */
.marquee-track {
  	display: flex;
  	width: max-content;
  	/* Utilise l'animation définie plus bas */
  	animation: scroll-left-to-right 10s linear infinite;
}

.marquee-track span {
  	padding-right: 10px; /* Espace entre la fin et le début du texte */
  	font-family: sans-serif;
  	font-size: 14px;
  	color: #ffffff;
}

/* Animation qui décale le rail de 50% vers la droite de manière continue */
@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}








h1 {
	color: black;
	font-family: "DT Nightingale";
	font-size: 25px;
	font-style: italic;
	font-weight: 100;
	margin-top: 10px;

}


h2 {
	color: darkred;
	font-family: DT Nightingale;
	font-size: 25px;
	font-style: italic;
	font-weight: 100;
	margin-top: 10px;
	
}


h3 {
	font-size: 15px
}




img {
	width: 400px;
	height: auto;
}


video {
    max-width: 2000px; 
    width: 50%;      
    margin: 0 auto; 
    height: auto;
  
}



.navigation {

	background-color:  ;
	width: 100%;

	position: fixed;  /*fixed, relative, absolue*/
	top: 0px;
	left: 0px;

	display: grid;
	grid-template-columns: 4fr 4fr 1fr 1fr;

}


.titre {

	position: relative; 
	top: 9px;
  	left: 15px;        /* Pousse la div de 50px vers la gauche */
  	width: fit-content; /* Adapte la largeur à la taille du texte */
}



.info {
	
	display: inline-block;
	color: darkred;
	font-family: "DT Nightingale";
	font-weight: normal;
	text-decoration: none;
	position: fixed;
 	top: 9px;            /* Même hauteur que .banner-top-left */
  	right: 100px;          /* Espacement par rapport au bord droit */
  	z-index: 1000;
  	width: fit-content;
	

}


.menu {

	background-color: ;
	font-family: "DT Nightingale";
	position: fixed;
 	top: 4px;            /* Même hauteur que .banner-top-left */
  	right: 20px;          /* Espacement par rapport au bord droit */
  	z-index: 1000;        /* Pour rester au-dessus des images du canvas */
	width: fit-content;
}
	





/*
.titre {
	border: 6px solid lightgrey;
}


.image {
	border: 6px solid mediumvioletred ;
}
*/


/*telephone*/
.container_project {  
	/*border: 6px solid darkred;*/
	display: grid;
	grid-template-columns: 1fr;

}


/*ordi*/
@media only screen and (min-width: 1000px) {

.container_project {  
	/*border: 6px solid darkred;*/
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	margin-top: 100px;
}
}



.video-test {
  	position: fixed;   /* Ou 'absolute' si la vidéo ne doit pas suivre au scroll */
  	top: 0;
  	left: 0;
  	width: 200vw;
  	height: 100vh;
  	overflow: hidden;
  	z-index: -1; /* z-index plus bas pour que la vidéo reste EN DESSOUS */
  	object-fit: cover;
}