html, body 
{
    height:100%;
    margin: 0;
}
body
{
	background-color: white;
	color: black;
	font-family: verdana, sans-serif;
	font-size: 1em;	
}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/*MENU-NAV*/

nav
{   
	background-color: white;
	display:flex;
	margin:0;
	padding:1.5em 0 0.7em 0;
	position:sticky;
	top:0;
	z-index: 99;
}
nav p
{
	margin:0 0 0 3%;
	font-size: 2em;
	font-weight: bold;
	flex: 0 0 auto;	
}
nav p a:link {text-decoration: none; color:black;}
nav p a:visited {text-decoration: none; color:black;}
nav p a:focus {text-decoration: none; color:black;}
nav p a:hover {text-decoration: none; color:black;}
nav p a:active {text-decoration: none; color:black;}

nav ul
{
	flex:0 0 auto;
	list-style-type: none;
	display:flex;
	margin-left:auto;
	margin-right:5%;	
}
nav ul li
{
	padding-left:1.3em;
}
nav ul li .page::after
{
	content:"";
	display:block;
	height:0.13em;
	background-color: black;
	transform: translateY(0.3em);
	opacity:0;
	transition:transform 300ms, opacity 300ms;
}
nav ul li .page:hover::after
{
    transform: translateY(0);
    opacity:1;
}

nav ul li .page:link {text-decoration: none; color:black;}
nav ul li .page:visited {text-decoration: none; color:black;}
nav ul li .page:focus {text-decoration: none; color:black;}
nav ul li .page:hover {text-decoration: none; color:black;}
nav ul li .page:active {text-decoration: none; color:black;}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/*BANDEAU-HEADER*/

#bandeau_out 
{ 
    width: 100%;
}
#bandeau_in 
{
	position: relative;
	height: 0;
	padding-bottom: 30%;
}
header
{
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
    height:100%;
}

#icop1,#icop2
{
width:6vw;
margin:auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
}
#icop2
{
	opacity:0;
	transition: opacity 300ms;
}
header label:hover ~ #icop2
{
	opacity:1;
}


.bandeau.elle
{

	overflow: hidden;
	background: url("../MEDIA/IMAGES/AFFICHES_FILMS/elle_bandeau_fiche_ilimg.jpg") center/cover no-repeat;
	text-align: center;
}

.bandeau.visage
{

	overflow: hidden;
	background: url(../MEDIA/IMAGES/AFFICHES_FILMS/visage2_bandeau_fiche_ilimg.jpg) center/cover no-repeat;
	text-align: center;
}
.bandeau.a2doigts
{

	overflow: hidden;
	background: url(../MEDIA/IMAGES/AFFICHES_FILMS/a2doigts_bandeau_fiche_ilimg.jpg) center/cover no-repeat;
	text-align: center;
}


header label
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;	
}

header label:hover 
{
	cursor: pointer;
}

.player
{
	display: none;
	position:fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}
.zone_grise
{
	background-color: rgba(0, 0, 0, 0.7);
	display:block;
	position:absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.resize_video { 
    width: 58.5vw;
    margin:auto;
    position:relative;
	top: 50%;
	transform:translateY(-50%);
}
.resize_video div {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.resize_video div .video
{
	position:absolute;
	left: 0;
	right: 0;
	width: 100%;
    height: 100%;
	border:none;
}

#cbba_elle:checked ~.player.elle
{
	display:block;
}
#cbba_elle
{
	display:none;
}
#cbba_visage:checked ~.player.visage
{
	display:block;
}
#cbba_visage
{
	display:none;
}
#cbba_a2doigts:checked ~.player.a2doigts
{
	display:block;
}
#cbba_a2doigts
{
	display:none;
}
/*----------------------------------------------------------------------------------------------------------------------------------*/
/*FICHE-SECTION*/

section
{
	position: relative;
}
#lien_film
{
	position: absolute;
	top:5vh;
	right:5vw;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.5);
}
#lien_film span
{
	font-size: 2em;
	font-weight: bold;
	position: relative;
	top:5px;
}
#lien_film:link {text-decoration: none;}
#lien_film:visited {text-decoration: none;}
#lien_film:focus {text-decoration: none;}
#lien_film:hover {text-decoration: none;}
#lien_film:active {text-decoration: none;}

section img
{
	width: 13.12vw;
	height: auto;
	box-shadow: 0.052vw 0.052vw 0.26vw black;
	border-radius:0.36vw;
	position: absolute;
	left: /*-17.5vw*/  -21em;
	top: /*-13vh */ -7.3em;
}
#aff_a2doigts
{
	border: 1px solid grey;
}
#bloc_page_centre
{
	width: 35vw;
	margin-left:40vw;
	position:relative;
}
#bloc_page_centre h1
{
	font-size: 4em;
	line-height: 0.938em;
}
#bloc_page_centre h2
{
	font-weight: normal;
	font-size: 1.5em;
}


strong
{
	font-weight: bold;
}
#bloc_page_centre .dernier_intro
{
	margin-top: 3.125em;
	margin-bottom: 3.125em;
}
.milieu_intro
{
	margin-top: 3.125em;
}
#bloc_page_centre .premier_intro, #bloc_page_centre .dernier_intro, .milieu_intro
{
	text-align: justify;
	line-height: 2em;
}

.bloc_info
{
	background-color: rgb(244, 244, 245);
	padding: 1.438em 0 1.438em 2.5em ;
	line-height: 2em;
	margin-bottom: 0.3em;
}
.titre
{
	font-weight: bold;
}

.bloc_info.trois
{
	display:flex;
}

.bloc_info.trois p
{
	flex: 0 0 50%;
}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/*PIED DE PAGE - FOOTER*/

footer
{
	background-color: rgb(244, 244, 245);
	height: 20%;
	margin-top:/*15.4vh*/9.096em;
}