@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}

	body:before {
		content: "site optimisé pour ordinateur ou tablette";
		display: block;
		font-family: serif;
		font-size: 12px;
		text-align: justify-all;
		text-align: center;
		font-style: regular;
		color: #777;
		margin-top: 3px;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 90%;
	}
	*/

	.film_entier
	{
		max-width:150%;
		margin-top: -100px;
		
	}

	.film_entier_2
	{
		max-width: 100%;
		opacity: 0;
	}
	

.element {
		max-width: 100%;
	}


}

	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */
}





html

.index{
	animation: fadeInAnimation ease 0.2s;
	animation-fill-mode: forwards;
	animation-iteeration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

body
{
	background-color: rgb(230, 231, 226);
	font-family: times;
}

#fond
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(230, 231, 226, 1);
}


.reverse_animation
{
    animation: fadeOutAnimation ease 0.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}
 
@keyframes fadeOutAnimation {
    100% {
        opacity: 0;
     }
    0% {
        opacity: 100;
    }
}



h1{

    opacity: 100%;
    position: center;

}


h2
{
	opacity: 0%;
    position: center;
}

h2:hover
{
	opacity: 100%;

	transition: all ease-in-out 0.3s;
	transition-delay: 0.0s;
}

h2:not(:hover)
{
	opacity: 0%;

	transition: all ease-in-out 0.3s;
	transition-delay: 0.0s;
}

#titre{
    width:600px;
    position: fixed;
    text-align: center;
}

#imagetitre{
	position: fixed;
	left: 50%;
	height: 200px;
	transform: translate(-50%);
}

a
{
	color: rgb(255, 0, 224);
	text-decoration-line: none;

	font-size: 1em;
	font-family: 'merchanto_bold';
	font-weight: Normal;

	transition: all ease-in-out 0.2s;
}

nav
{
	font-size: 1.2em;
	font-family: 'merchanto_bold';
	font-weight: bolder;
}


#topsection
{
	background-color: rgb(221, 226, 235);
	position: fixed;
	top: 0px;
	width: 100%;
	height: 180px;
}

#vide
{
	width: 100%;
	height: 200px;
}


#synopsis:hover
{
	text-shadow: 0 0 50px rgb(255,0,224);
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;
}

#lefilm:hover
{
	text-shadow: 0 0 50px rgb(255,0,224);
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;
}

#equipe:hover
{
	text-shadow: 0 0 50px rgb(255,0,224);
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;
}

#film
{
	left: 2%;
	position: fixed;
	top: 3%;
}

#filmhover
{
	left: 2%;
	position: fixed;
	top: 3%;
	opacity : 0;

}

#filmhover:hover
{
	opacity : 1;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}

#filmhover:not(:hover)
{
	opacity : 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}


#synopsis
{
	left: 2%;
	position: fixed;
	bottom: 2%;
}

#synopsishover
{
	left: 2%;
	position: fixed;
	bottom: 2%;
}

#synopsishover:hover
{
	opacity : 1;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}

#synopsishover:not(:hover)
{
	opacity : 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}



#archives
{
	right: 2%;
	position: fixed;
	top: 3%;
}

#archiveshover
{
	right: 2%;
	position: fixed;
	top: 3%;
}

#archiveshover:hover
{
	opacity : 1;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}

#archiveshover:not(:hover)
{
	opacity : 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}



#contact
{
	right: 2%;
	position: fixed;
	bottom: 2%;
}

#contacthover
{
	right: 2%;
	position: fixed;
	bottom: 2%;
}

#contacthover:hover
{
	opacity : 1;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}

#contacthover:not(:hover)
{
	opacity : 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}


.element
{
	height: 53px;
}



section
{
	width: 100%;
	position:absolute;
	top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}


.animation
{
	animation: fadeInAnimation ease 1.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

.contenu
{
	width: 700px;
	max-width:90%;
	position:absolute;
	left: 50%; /* à 50%/50% du parent référent */
  	transform: translate(-50%); /* décalage de 50% de sa propre taille */
}

/*section
{
	width: 56%;
	min-width: 400px;
	text-align: justify;
	margin: auto;

}
*/



.player
{
	width: 550px;
	max-width: 90%;
	position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  justify-items: space-between;

}

.vimeo
{
  width: 85%;
	position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  justify-items: space-between;
  margin-top: -5%;

}

.vimeo
{
	animation: fadeInAnimation ease 1.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

.player
{
	animation: fadeInAnimation ease 1.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}


#gif
{
	justify-content: space-between;
}

.bloc_gif
{
  max-height:100%;
  position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

.player_entier
{
	width: 800px;
	max-width: 90%;
	position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  justify-items: space-between;

}

.vimeo_entier
{
  width: 85%;
	position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  justify-items: space-between;
  margin-top: -2%;

}

.vimeo_entier
{
	animation: fadeInAnimation ease 1.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

.player_entier
{
	animation: fadeInAnimation ease 1.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}




#film_entier
{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	margin-top: 15%;
}

.film_entier
{
	height: 30px;
}

#film_entier_2
{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	margin-top: 3%;
}

.film_entier_2
{
	height: 43px;
}

#film_entier_3
{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	margin-top: -10%;
}

.film_entier_3
{
	height: 40px;
}



#bande_annonce
{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

.bande_annonce
{
	width: 45%;
	position:absolute;
}

.archivesbouton
{
  width: 90%;
}

.archivesbouton_hover
{
  width: 90%;
  opacity: 0;
}

.archivesbouton_hover:hover
{
	opacity : 1;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}

#archivesbouton_hover:not(:hover)
{
	opacity : 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0.0s;

}


#archives_boutons
{
	width: 300px;
	max-width:60%;
	position: absolute;
	top: 50%; left: 50%;
  transform: translate(-50%, -50%);

}

#archives_boutons
{
	animation: fadeInAnimation ease 3s;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

#contact_gif
{
	position: absolute;
	left: 50%;
  	transform: translate(-50%);
  	margin-top: -8%;
  	width: 700px;
  	max-width:98%;

}

.contact_gif
{
	position: absolute;
	left: 50%;
  	transform: translate(-50%);
  	max-height:30%;
}

.contact_gif_2
{
	margin-top: 70%;
}

#accueil_gif
{
	height:65%;
	position: fixed; /* postulat de départ */
  	top: 50%; left: 50%; /* à 50%/50% du parent référent */
  	transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

/* ( ex #affiches :) */
#accueil
{
	position: fixed; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

/* ( ex #affiches :) */
#accueil
{
	animation: fadeInAnimation ease 3s;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}
@keyframes fadeInAnimation {
	0%{
	opacity : 0;
}
100% {
	opacity: 1;
}
}

header
{
	width: 600px;
}

/* ( ex .affiche :) */
.bloc
{
  width: 700px;
  max-width: 90vw;
  position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

.loading_gif
{
  width: 75%;
  max-width:80vw;
  
  position: fixed; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

.loading_texte
{
  width: 50%;
  max-width:60vw;
  position: fixed; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

#bordure{
	width: 8%;
	position: fixed;
	margin-top: -15px;
	margin-left: -30px;
}

p
{ 
animation: fadeInAnimation ease 1.0s; 
animation-fill-mode: forwards; 
animation-iteration-count: 1; 
} 
@keyframes fadeInAnimation { 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
}

p
{
  color: rgb(255, 0,224);
  text-align: justify;
  font-family: futurabook;
  font-weight: light;
  font-size: 1em;
}