@charset "utf-8";
/* CSS Document */
body {
	background: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 1vw;
	font-weight: 300;
	margin: 0;
}
a {
    text-decoration: none;
    font-weight: 700;
    color: #000; /* Couleur par défaut des liens */
}
a:hover {
    color: #f0f; /* Couleur lors du survol */
}
img {
	width: 100%;
	display: block; /* Assure que les images sont affichées comme des blocs pour éviter les marges */
	margin: 0; /* Supprime toute marge autour des images */
	padding: 0; /* Supprime tout padding autour des images */
	-moz-transform: scale(1);
	-moz-transition-duration: 0.6s;
	-webkit-transition-duration: 0.6s;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-ms-transition-duration: 0.6s;
}
video {
	margin-bottom: 1%;
	width: 100%;
}
#image {
}
.image_conteneur {
	margin-bottom: 1%;
}
.image_legende {
    position: relative;
    width: 100%; /* Assure que l'élément s'adapte à la largeur du conteneur parent */
    color: #fff;
    white-space: nowrap; /* Empêche le retour à la ligne pour que le texte s'adapte */
    overflow: hidden; /* Masque le texte qui dépasse la largeur de son conteneur */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
    margin-top: 0; /* Supprime toute marge au-dessus du texte sous l'image */
    padding-top: 0; /* Supprime tout padding au-dessus du texte */
    line-height: 100%;
}
.image_texte {
    font-size: 1vw;
    background-color: #333;
    padding-left: 1vw;
    padding-right: 1vw;
    width: 100%; /* Assure que le texte s'adapte à la largeur du conteneur parent */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale pour éviter les débordements */
}
.menu {
    position: fixed;
	top: 0;
	left: 15vw;
    z-index: 10;
    font-weight: 800;
    color: #fff;
    background-color: #f0f;
    padding: 0.5vw 1vw 0.2vw 1vw;
	opacity: 0.7; /* Opacité initiale à 70% */
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition smooth pour l'opacité et l'icône */
}
.menu:hover {
    color: #fff;
	opacity: 1; /* Opacité initiale à 70% */
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition smooth pour l'opacité et l'icône */
}
.legende {
	font-size: 1vw;
}
.bottom {
	padding-bottom: 75px
}
.enTete_titre {
	position: absolute;
	top: 3vw;
	right: 1%;
	font-size: 8vw;
	font-weight: 800;
	line-height : 0vw;
	text-shadow: 2px -2px 3px #FFFFFF;
	z-index: 3;
}
.enTete_titre a {
	font-size: 8vw;
	font-weight: 800;
}
.enTete_titre a:hover {
	color: #f0f;
}
.enTete_soustitre {
	position: absolute;
	top: 4vw;
	right: 1%;
	line-height : 5vw;
	text-shadow: 2px -2px 3px #FFFFFF;
	z-index: 5;
}
.enTete_soustitre a {
	font-size: 3vw;
	font-weight: 800;
}
.enTete_expo {
	position: absolute;
	top: 7vw;
	right: 1%;
	line-height : 5vw;
	font-size: 3vw;
	font-weight: 800;
	z-index: 4;
}
.video_conteneur {
	position: relative;
	padding-bottom: 56.25%;
	margin-bottom: 1vh;
	height: 0;
	background-color: #fff;
}
.video_conteneur video, iframe, .video_conteneur object, .video_conteneur embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.video_conteneur img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video_conteneur_txt {
	color: #fff;
	position: absolute;
	top: 85%;
	left: 2.5%;
	width: 75%;
	height: 3.5%;
	z-index: 3;
	font-size: 1.5vw;
	font-weight: 800;
}
.texte {
	color: #fff;
	font-size: 1vw;
	line-height: 1.2vw; /* Assure une bonne lisibilité */
	background-color: #333;
	padding: 0 1vw 0 1vw;
}
.cartel {
	position: relative;
	margin-bottom: 3vw;
	text-align: left;
	left: 55%;
	width: 40%;
}
.cartel .OdM {
	font-size: 2vw;
	line-height : 3vw;
}
.cartel .titre {
	font-size: 3vw;
	font-weight: 700;
	line-height : 3vw;
	margin-bottom: 1vw;
}
.cartel .sousTitre {
	font-size: 1.5vw;
	font-weight: 700;
	line-height : 1.5vw;
	margin-bottom: 1vw;
}
.cartel .text {
}
.expo {
	vertical-align: top;
	display: inline-block;
	width: 31%;
	height: auto;
	margin: 1vw;
}
.bonus_titre {
	position: relative;
	left: 0;
	font-size: 10vw;
	text-decoration: none;
	font-weight: 800;
	color: #999;
}
.bonus_soustitre {
	position: absolute;
	bottom: 0;
	left: 5%;
	font-size: 5vw;
	line-height : -5vw;
	font-weight: 200;
	color: #000;
	z-index: 3;
}
.serie_article {
	position: relative;
	margin-bottom: 4vw;
}
.serie_titre {
	position: relative;
	font-size: 6vw;
	font-weight: 800;
	color: #CCC;
	text-align: right;
	margin-top: 10%;
	margin-bottom: 1%;
	line-height : 2.5vw;
}
.serie_soustitre {
	position: relative;
	font-size: 2vw;
	font-weight: 800;
	text-align: right;
	margin-bottom: 2%;
}
.serie_illustration {
	float: left;
	width: 67%;
	height: auto;
	margin-bottom: 2%;
}
.serie_texte {
	float: left;
	margin-left: 3%;
	width: 28%;
	height: auto;
	line-height : 1.5vw;
	margin-top: 1%;
	margin-bottom: 2%;
}
.serie_texte_italic {
	float: left;
	margin-left: 3%;
	width: 28%;
	height: auto;
	line-height : 1.5vw;
	margin-top: 1%;
	margin-bottom: 2%;
	font-style: italic;
}
.serie_back {
	text-align: right;
	margin-bottom: 4vw;
}
.serie_legende {
	position: relative;
	margin-left: 70%;
	width: 28%;
	height: auto;
	margin-bottom: 2%;
	background-color: #333;
	color: #FFF;
	padding: 1vw;
	margin-top: -2vw;
	margin-bottom: 2%;
}
.serie_legende_premiere {
	position: relative;
	margin-left: 50%;
	width: 47%;
	height: auto;
	margin-bottom: 2%;
	background-color: #333;
	color: #FFF;
	padding: 1vw;
	margin-top: -2vw;
	margin-bottom: 2%;
}
.serie_retour {
	position: relative;
	margin-left: 60%;
	font-size: 1vw;
	line-height: 4vw;
	padding: 1vw;
	background-color: #CCC;
}
.serie_series {
	position: relative;
	margin-left: 40%;
}
.serie_serie {
	float: left;
	margin-left: 2vW;
	font-size: 1vw;
	padding: 1vw;
	background-color: #CCC;
}

/* Media Queries pour orientation portrait sur tablettes */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.menu {
		font-size: 4vw;
		line-height: 5vw;
	}
}

/* Media Queries pour orientation paysage sur tablettes */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.menu {
		font-size: 2vw;
		line-height: 2.2vw;
	}
}

/* Media Queries pour orientation portrait sur smartphones */
@media (max-width: 767px) and (orientation: portrait) {
	.menu {
		font-size: 4vw;
		line-height: 5vw;
	}
}

/* Media Queries pour orientation paysage sur smartphones */
@media (max-width: 767px) and (orientation: landscape) {
	.menu {
		font-size: 2vw;
		line-height: 2.2vw;
	}
}