/* Attention: Limitez la taille à 25ko maximum, c'est la limite a partir de laquelle les CSS ne sont plus mis en cache par les navigateurs des appareils mobiles. */

:root {
	--sbox-width: 996px;  /* largeur barre de recherche */
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #23211e;  /* couleur affiché au chargement du site (sur un reload par exemple) */
}

a {
	color: #fff;
	text-decoration: none;
}

ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.container {
	max-width: 1170px;
	margin: 0 auto;
}

.toolbar {
	background: #fff;
	border-radius: 5px 5px 0 0;
}

.toolbar.simple { margin-bottom: 15px; }

.btn_add {
	display: inline-block;
	background: #259b43;
	padding: 10px;
	margin: 10px 5px;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
}

.btn_add:hover {
	background: #34b053;
	color: #fff;
	text-decoration: none;
}

.icon {
	font-size: 1.2em;
	padding: 5px
}

glyphicon-plus-sign::before {
    content: "\e081";
}

.glyphicon::before {
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    margin-right: 7px;
}

/*********************************
* 				fontes       	      *
*********************************/

@font-face {
	font-family: 'icones';
	src: url('fontes/icones.woff2') format('woff2');
}

@font-face {
   font-family: sansationbold;
   src: url(fontes/sansation/Sansation-Bold-webfont.eot);
   src: url(fontes/sansation/Sansation-Bold-webfont.eot?#iefix) format("embedded-opentype"),
   	url(fontes/sansation/Sansation-Bold-webfont.woff) format("woff"),
   	url(fontes/sansation/Sansation-Bold-webfont.ttf) format("truetype"),
   	url(fontes/sansation/Sansation-Bold-webfont.svg#sansationbold) format("svg");
   font-weight: 400;
   font-style: normal
}

@font-face {
   font-family: sansationbold_italic;
   src: url(fontes/sansation/Sansation-BoldItalic-webfont.eot);
   src: url(fontes/sansation/Sansation-BoldItalic-webfont.eot?#iefix) format("embedded-opentype"),
   	url(fontes/sansation/Sansation-BoldItalic-webfont.woff) format("woff"),
   	url(fontes/sansation/Sansation-BoldItalic-webfont.ttf) format("truetype"),
   	url(fontes/sansation/Sansation-BoldItalic-webfont.svg#sansationbold_italic) format("svg");
   font-weight: 400;
   font-style: normal
}

/*********************************
* 				icones        	      *
*********************************/

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icones' !important;
	speak: none;
	font-weight: normal;
	font-style: normal;
	font-size: 1.1em;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-loop2:before 	{ content: "\ea2e"; }
.icon-star-empty:before { content: "\e9d7"; }
.icon-star-half:before { content: "\e9d8"; }
.icon-star-full:before { content: "\e9d9"; }


/*********************************
*		        Header	       		*
*********************************/

.boutonMenu {
	display: none;
	font-family: icones;
	font-size: 1.8em;
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
	cursor: pointer;
}

#siteHeader {
	background: linear-gradient(#1d94da,#145b83);
	text-align: center;
}

#siteHeader .cadre {
	display: inline-block;
	margin: auto;
	position: relative;
	width: 1200px;
}

#cadre_logo {
	position: absolute;
	left: 0;
}

#logo {
	height: 42px;
	padding: 5px 0 0;
}

#identite {
	color: #fff;
	margin: 12px 0px 0px 20px;
	float: right;
}

#identite a {
	color: #fff;
	background: #d2353580;
	padding: 2px 0;
	font-size: 0.8em;
	display: block;
	text-align: center;
}

/*********************************
*         Menu principal         *
*********************************/

nav {
	display: block;
	text-align: center;
	font-family: sansationbold_italic,Arial,sans-serif;
	padding: 7px;
	letter-spacing: 0.04em;
}

nav ul { margin: 0; padding: 0 0 0 20px;}

nav li {
	display: inline-block;
	padding: 10px 10px 2px;
	margin: 0 10px 5px;
	font-size: 1.2em;
	border-bottom: 3px solid #0000;
	text-shadow: 1px 1px 1px #000;
}

nav li.active {
	border-bottom: 3px solid #3b9059;
}

.menu.mulderville li:first-child {
	display: none;
}

.menu.mulderville li:last-child a { pointer-events: none; } /* desactive le lien recherche */


/******************************
*  bouton choix du language
*******************************/

#bt_choix_language {
	display: inline-block;
	position: absolute;
	padding: 5px 6px;
	top: 10px;
	right: 0;
	font-size: 1em;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	cursor: pointer;
	z-index: 20;
}

#bt_choix_language:hover {
	background: #0003;
	border-radius: 8px;
}

#bt_choix_language img {
	vertical-align: middle;
	box-shadow: 1px 1px 0px #224062e6;
}

#bt_choix_language span {
	position: relative;
	top: 2px;
	margin-left: 5px;
}

#bt_choix_language .caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}


/**************************************
*           Menu pour Mobiles         *
**************************************/

.navbar-toggle {
	display: none;
}

#closer {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	background: #0000002e;
	z-index: 30;
}


/*********************************
*          Tableaux					*
*********************************/

section.panel-liste { margin-top: 10px; }

.panel-liste table {
	font-family: "Open Sans";
	width: 100%;
	border-spacing: 0;
}

.panel-liste th {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #d2e1f3;
}

.panel-liste th:nth-child(1) {
	text-align: left;
	padding-left: 20px;
}

.panel-liste th.categorie {
	width: 170px;
	text-align: left;
	padding-left: 15px;
}

.panel-liste th.prenom, .panel-liste th.nom {
	width: 120px;
	text-align: left;
	padding-left: 15px;
}

.panel-liste th.role {
	width: 100px;
	text-align: left;
	padding-left: 15px;
}

.panel-liste th.status {
	width: 100px;
	text-align: center;
}

.panel-liste tbody tr:nth-child(2n+1) { background: rgba(0, 0, 0, 0.03); }

.panel-liste tbody tr:hover { background: #e6e9c666; }

.panel-liste td {
	padding: 10px 15px;
	cursor: default;
	border-bottom: 1px solid #ccc;
}

.panel-liste td:nth-child(n+2) {
	width: 0;
	padding: 0 10px;
}

.panel-liste td.status { text-align: center; }
.panel-liste td.status.actif { color: #22ae23; }
.panel-liste td.status.wait { color: #f0903f; }
.panel-liste td.critique { padding-left: 24px; }

.panel-liste td a {
	color: #000;
	display: table-cell;
}

.panel-liste td:first-child { padding: 0; }
.panel-liste td:first-child a { padding: 10px 15px; display: block; }


.panel-liste > tbody > tr:hover > td { background-color: #93c4ef; }



/*********************************
*    Barre de recherche
**/

/******************************/
.menu.mulderville li:last-child {
	font-size: 0;
}

.menu.mulderville li:last-child::before {
	content: "\0815";
	font-size: initial;
	font-family: "icones";
	color: #fff;
	font-size: 30px;
	position: absolute;
	top: 10px;
}

#popRecherche {
	position: fixed;
	top: -140px;
	z-index: 8002;
	background: linear-gradient(to bottom, #1976a4 0%, #125B9C 93%, #0E5199 95%, #000 100%, #000 100%);
	width: 100%;
	text-align: center;
	padding: 20px 0px;
	font-family: "Segoe UI","Open sans";
	font-size: 1.1em;
}

#dataRecherche {
	display: inline-grid;
}

#inputRecherche {
	margin: 0 0 15px;
	border: 0;
	padding: 5px;
	border-radius: 2px;
	font-family: "Segoe UI","Open sans";
	font-size: 1em;
}

#popRechercheSubmit {
	border: 2px solid #720d0d;
	background: rgba(255, 255, 255, 0.11);
	color: #fff;
	border-radius: 2px;
	padding: 5px 20px;
	font-family: "Segoe UI","Open sans";
	font-size: 1em;
	margin-left: 15px;
}

#popRechercheSubmit:hover {
	background: rgba(255, 255, 255, 0.16);
}

.typeRecherche {
	display: inline-block;
	margin: 0 6px 10px;
	width: 115px;
	height: 30px;
	text-align: left;
}

.optionsRecherche input {
	display: inline-block;
	background: #4ca24c;
	width: 50px;
	z-index: 9000;
	height: 30px;
	border: 0;
	position: absolute;
	padding: 0;
	margin: 0;
	width: 115px;
	opacity: 0;
}

.optionsRecherche label {
	font-family: "Segoe UI","Open sans";
	color: #fff;
	width: 100%;
	height: 100%;
	display: block;
	background: #384f64;
	padding: 2px 10px;
	box-sizing: border-box;
	border-radius: 2px;
	text-align: center;
	border: 1px solid #00000059;
}

.optionsRecherche input:checked + label {
	border: 1px solid #353434;
	background: #e9f7ff;
	color: #000;
}

#panelRecherche {
	z-index: 999999;
	margin-left: calc(50% - var(--sbox-width)/2);
	box-shadow: 0 0px 2px #000;
	width: var(--sbox-width);
}

#searchbox-selectized {
	width: var(--sbox-width) !important;
	padding: 5px 10px;
	font-size: 1em;
	border-radius: 2px;
	border: 1px solid #000;
	box-sizing: border-box;
	font-size: 0.9em;
}

.selectize-input .item {
	width: var(--sbox-width) !important;
	padding: 4px 10px;
	font-size: 1em;
	border-radius: 2px;
	border: 1px solid #000;
	box-sizing: border-box;
	font-size: 0.9em;
	margin-left: calc(50% - var(--sbox-width)/2);
	background: #fff;
	text-align: left;
}

#searchbox-selectized:focus {
	outline: none;
}

.selectize-dropdown {
	max-height: 300px;
	box-sizing: border-box;
	top: 115px;
	position: fixed;
	background: #fff;
	overflow-y: auto;
	padding: 5px;
	border: 1px solid #8c8c8c;
	text-align: left;
	scrollbar-width: thin;
	max-width: 99%;
}

.selectize-dropdown .option {
	padding: 3px 5px;
}

.selectize-dropdown .option.active {
	background: #a2cddd;
}

#searchloader {
	display: none;
	color: #828282;
	font-size: 1em;
	/* text-shadow: 0px -1px 5px #515151; */
	padding: 0;
	animation-name: rotaloop;
	animation-duration: 0.9s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
	top: 68px;
	left: 50%;
	z-index: 9003;
	margin-left: 225px;
}


@keyframes rotaloop { 
   from { 
      transform: rotate(0deg); 
   } to { 
      transform: rotate(360deg); 
   }
}

/*********************************
*   Commun pour les articles
*/

#page {
	max-width: 1200px;
	margin: 20px auto;
}

#page.critique, #page.nouvelle, #page.evenement, #page.produit, #page.video, #page.concours {
	max-width: 1000px;
}

#list_name {
	background: #368050;
	padding: 10px;
	margin-bottom: 2px;
	display: none;
}

#list_name h1 {
	color: #fff;
	margin: 0;
	font-family: sansationbold_italic,Arial,sans-serif;
	font-feature-settings: "liga" 0;
	font-size: 1.1em;
	font-weight: normal;
}

#page_name {
 padding: 4px;
 background: #fff;
}

#page_name h1 {
	color: #fff;
	margin: 0;
	padding: 11px;
	font-family: "Segoe UI","Open sans";
	font-size: 1.2em;
	text-shadow: 1px 1px 1px #000;
	font-weight: bold;
	background: #1e7d7b;
	box-shadow: 1px 2px 2px #000;
	position: relative;
	left: -1px;
}

section.texte {
	background: #fff;
	padding: 20px 50px;
	color: #0e4c70;
	line-height: 1.3;
	font-size: 1.05em;
}

section.texte h2 {
	margin: 0 0 20px;
	font-size: 1em;
	font-family: sansationbold,Arial,sans-serif;
	font-feature-settings: "liga" 0;
}

section.texte img, section.test img, section.bonus img, section.critique img {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
}

section.texte p {
	padding: 10px;
	margin: 0 auto;
	font-family: "Segoe UI","Open sans";
	font-size: 1.1em;
	line-height: 1.4em;
}

section.texte a, section.test a {
	color: #0060dd;
	text-decoration: underline;
}

article.preview {
	margin: 0 0 20px;
	position: relative;
	background: #fff;
	color: #0e4c70;
}

article.preview h2 {
	color: #fff;
	margin: 0;
	font-weight: normal;
	background: #176c9e;
	padding: 5px 10px;
	font-size: 1.2em;
	font-family: arial;
}

article.preview p.extrait {
	font-family: "Segoe UI","Open sans";
	font-size: 1.1em;
	line-height: 1.3em;
}

article.preview a.bouton {
	display: inline-block;
	padding: 15px;
	min-width: 130px;
	color: #000;
	border: 1px dashed #000;
	background: #ddd;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

article.preview a.bouton:hover {
	border: 1px solid #000;
	background: #176c9e;
	color: #fff;
	transition: border, background;
	transition-duration: 200ms;
}


/*****************************
*   accueil
*/


.filmSemaine img, .filmProchain .image, .hazardSemaine img {
	border: 3px solid #0b3b57;
}


#homepage {
	width: 1300px;
	margin: auto;
}

#homepage h1 {
	padding: 0;
	margin: 0;
	font-size: 1em;
}

.box-semaine {
	background-color: #0e4c70;
	width: 100%;
	margin: 10px 0;
	text-align: left;
	display: inline-flex;
	flex-direction: column;
}

.box-semaine.white {
	background: #fff;
}

.box-semaine header {
	background-color: #1884c2;
	padding: 10px;
	color: #fff;
	position: relative;
}

.box-semaine h3 {
	margin: 4px 0;
}

.box-semaine .texte {
	display: inline-block;
}

.box-semaine a.image {
	display: inline-block;
}

.box-semaine.evenements img, .box-semaine.nouvelles img {
	max-width: 180px;
	max-height: 210px;
	margin: 10px 0;
}

/* homepage critiques */

.box-semaine.critiques {
	width: 1300px;
	margin: 20px 0 10px;
}

.filmSemaine {
	margin: 10px 30px;
}

/* Caroussel */
.cadre-caroussel {
	padding: 10px 10px 4px;
}

.carousel {
	display: inline-block;
	width: 100%;
	cursor: grab;
	overflow: hidden;
	position: relative;
}

.carousel .dragging {
	cursor: grabbing;
}

.carousel--wrap {
	white-space: nowrap;
	height: 203px;
}

.carousel--item {
	display: inline-block;
	width: 134px;
	user-select: none;
	margin: 0;
	padding: 10px 13px 3%;
}

.carousel img {
	position: absolute;
	height: 184px;
	width: 134px;
	border: 4px solid #143c55;
}

.carousel h2 {
	position: absolute;
	z-index: 1;
	bottom: 1.8vw;
	font-size: 6vw;
	bottom: 1vw;
	color: #fff;
}

.carousel--progress {
	pointer-events: none;
	height: 2px;
	padding: 4px;
}

.carousel--progress-bar {
	height: 100%;
	background: rgba(253, 249, 2, 0.8);
	transform-origin: 0% 0%;
}



/* presentation lorsque l'affiche ne peut pas être chargée */
.filmSemaine img::before, .filmProchain .image::before, .hazardSemaine img::before {
	display: block;
	background-color: rgb(35, 33, 30);
	border: 1px dotted rgb(227, 227, 227);
	border-radius: 7px;
	padding: 10px;
}

.filmSemaine img:hover, .filmProchain .image:hover, .hazardSemaine img:hover {
	border: 3px solid #1884c2;
}


/* Actualités */
.box-semaine.actu {
	width: 850px;
	background: #fff;
	margin-right: 20px;
}

.box-semaine.actu article {position: relative;}

.box-semaine.actu header {
	background-color: #1884c2;
	padding: 10px;
	color: #fff;
}


.box-semaine.actu a {
	display: inline-block;
	background: #fff;
	color: #000;
}

.box-semaine.actu .texte {
	display: inline-block;
	padding: 10px 10px 30px 150px;
	height: 130px;
	font-family: "Segoe UI","Open sans";
	font-size: 1em;
	line-height: 1.3em;
}

.box-semaine.actu img {
	position: absolute;
	left: 0;
	top: 0;
	height: 150px;
	width: 130px;
	margin: 10px;
	object-fit: contain;

}

.box-semaine.actu .parution {
	display: inline-block;
	padding: 5px 0;
	color: #a8aeb5;
	font-size: 0.9em;
	font-weight: bold;
}

.box-semaine.actu h1 {
	margin-top: 40px;
}

.box-semaine.actu .categorie {
	color: #156c8e;
	padding: 2px 8px;
	border-radius: 2px;
	text-shadow: 1px 1px 3px #fff;
	text-decoration: underline;
	background: #cecece;
	background: linear-gradient(#dbdbdb,#eee);
}

.box-semaine.actu .texte p {
	margin: 0;
}

.box-semaine hr {
	margin: 0px 22px;
	padding: 0;
	color: #fff;
	opacity: 0.3;
}


/* homepage aside */

#homepage aside {
	display: inline-block;
	width: 430px;
	vertical-align: top;
	position: sticky;
	top: 5px;
}


/* homepage Concours */

.box-semaine.concours a {
	display: block;
}

.box-semaine.concours img {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}


.box-semaine.twitter article {
	display: block;
	height: 473.5px;
}


/* Homepage films prochains */

.box-semaine.prochainement {
	width: 100%;
}


/* homepage Tests */

.box-semaine.tests {
	width: 100%;
	background: #fff;
}

.box-semaine.tests article {
	position: relative;
}

.box-semaine.tests a {
	display: inline-block;
	background: #fff;
	color: #000;
}

.box-semaine.tests img {
	position: absolute;
	height: 150px;
	width: 130px;
	margin: 10px;
	object-fit: contain;
}

.box-semaine.tests .texte {
	display: inline-block;
	padding: 40px 0 0 150px;
	height: 130px;
	font-family: "Segoe UI","Open sans";
	font-size: 1em;
	line-height: 1.3em;
}

.box-semaine.tests .categorie {
	color: #3d7eb7;
	font-weight: bold;
}

/* homepage selection de films à redécouvrir */

.hazardSemaine article {
	display: block;
	margin: 5px auto 0;
}

.box-semaine.hazard {
	display: inline-block;
	width: 1300px;
	margin: 10px 0;
}

.hazardSemaine {
	display: flex;
	flex-wrap: wrap;
	margin: 10px;
}

.hazardSemaine img {
	height: 184px;
	width: 134px;
	object-fit: fill;
}


/*********************************
* 			Liste des concours      *
*********************************/

article.preview.concours ul {
	background: #fff;
	padding: 20px 30px 0;
}

article.preview.concours h3 {
	margin: 0;
	font-size: 1.2em;
	font-family: sansationbold_italic,Arial,sans-serif;
	font-feature-settings: "liga" 0;
}

article.preview.concours li:last-child {
	display: flex;
	margin-top: 10px;
}

article.preview.concours img {
	max-width: 600px;
}

/*********************************
*  Page concours
*/

#affiche_concours {
	display: block;
	margin: auto;
}

#page_intro {
	background: #d6e1e9;
	padding: 20px;
	margin: 20px 0;
}


#page_article h3 {
	text-align: center;
	font-size: 1.4em;
	line-height: 1.5em;
	margin: 0 0 40px;
}

#zero_concours {
	background: #000;
	font-size: 1.4em;
	position: relative;
}

#zero_concours img {
	width: 100%;
	vertical-align: middle;
}

#zero_concours p {
	position: absolute;	
	margin: 0;	
	left: 0;	
	bottom: 3%;	
	color: #fff;
	font-size: 2em;
	text-shadow: 2px 3px 4px #000;
	text-align: center;
	width: 100%;
	background: #0003;
}

#video_concours {
	background: #000;
	margin-top: 40px;
	padding: 20px;
}

#concours_tip {
	text-align: center;
	font-weight: bold;
	background: #ece372;
}

#form_concours {
	padding: 30px;
	color: #0e4c70;
	background: #eee;
}

form.concours label {
	font-size: 1.1em;
}

#form_concours input {
	width: 100%;
	margin: 1px 0 18px;
	padding: 10px;
	box-sizing: border-box;
	font-size: 1em;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
}

#form_concours input[type='checkbox'] {
	width: 20px;
}

#form_concours button {
	width: initial;
	background: #c8c8c8;
	padding: 10px;
	font-size: 1.1em;
	margin: 15px;
	cursor: pointer;
	display: block;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #00000085;
	border: 1px solid #ddd;
	font-family: "Segoe UI","Open sans";
}

#form_concours button:hover {
	background: #88cc90;
}

#form_concours button.waiting {
	color: transparent;
	background-color: #d7d7d7;
}

#form_reglement {
	color: #000;
	padding: 20px;
	background: #f0a96b;
	font-family: open sans;
	margin-bottom: 15px;
}

#form_reglement.waiting {
	background: #d7d7d7;
}

#form_submit {
	text-align: right;
}


/************************************
*  Liste des Tests 
*************************************/

article.preview.test {
	display: flex;
	max-width: 1200px;
	padding: 0;
}

article.preview.test header {
	padding: 10px;
	background-color: #c57222;
	color: #fff;
	font-family: sansationbold_italic,Arial,sans-serif;
	font-feature-settings: "liga" 0;
	min-width: 100px;
	text-align: center;
}

article.preview.test .blu-ray { background: #176c9e; }
article.preview.test .jeu-video { background: #b63733; }
article.preview.test .figurine { background: #368050; }
article.preview.test .dvd { background: #8799a2; }
article.preview.test .high-tech { background: #656a8c; }


article.preview.test section {
	padding: 30px;
	display: inline-block;
	width: 733px;
}

article.preview.test h1 {
	margin: 0;
	font-size: 1.2em;
	font-family: sansationbold_italic,Arial,sans-serif;
	font-feature-settings: "liga" 0;
}

article.preview.test.blu-ray a:hover { background: #176c9e; color:#fff;}
article.preview.test.jeu-video a:hover { background: #b63733; color:#fff;}
article.preview.test.figurine a:hover { background: #368050; color:#fff;}
article.preview.test.dvd a:hover { background: #8799a2; color:#fff;}
article.preview.test.high-tech a:hover { background: #656a8c; color:#fff;}

article.preview.test aside img {
	max-height: 400px;
	vertical-align: bottom;
	margin: 10px;
	padding: 0;
}


/************************************
*  Page test video & produits
*************************************/

section.presentation {
	display: flex;
	position: relative;
	background: #fff;
	padding: 30px;
}

section.presentation.produit {
	margin-bottom: 5px;
}

section.presentation .affiche {
	display: inline-block;
	margin: auto;
}

section.presentation .affiche img {
	max-width: 350px;
	max-height: 400px;
	min-height: 300px;
	min-width: 300px;
	background: #000;
	color: #fff;
	vertical-align: bottom;
}

#produit-infos {
	display: inline-block;
	margin: auto;
}

section.presentation #notes {
	color: #425d6e;
	display: block;
	width: 334px;
}

section.presentation ul li {
	font-weight: bold;
	padding: 1px 3px 1px 7px;
}

section.presentation ul li hr {
	color: #15c335;
	margin: 4px 0 2px 0;
}

section.presentation ul li:last-child {
	color: #fff;
	background: #43555c;
}

section.presentation ul li div.categorie {
	width: 200px;
	display: inline-block;
	padding: 5px 0px;
	vertical-align: middle;
}

section.presentation ul li div.note {
	display: inline-block;
	width: 100px;
	height: 24px;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
	background: #ecece9;
}

section.presentation ul li div div.background {
	position: absolute;
	height: 1030px;
	margin-top: -1000px;
	background: linear-gradient(to bottom, rgb(7,201,0) 0%, rgb(255,208,0) 45%, rgb(255,208,0) 55%, rgb(255,0,0) 100%);
}

section.presentation ul li div.num {
	display: inline-block;
	font-size: 0.8em;
	background: linear-gradient(to right, rgb(210, 201, 201) 0%,rgb(222, 222, 222) 25%, rgba(242, 240, 240, 0.77) 90%, rgba(0, 0, 0, 0.59) 100%);
	padding: 4px 2px 4px 1px;
	width: 21px;
	text-align: center;
	color: #000;
	font-weight: bolder;
}

#test-video-parution {
	color: #000;
}

#test-video-parution strong {
	color: #1064ab;
}

#test-video-sortie {
	display: inline-block;
	margin: 20px auto 0;
	padding: 10px;
	background: #ddd;
	color: #0b0b0b;
	font-size: 1.2em;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

#test-video-parution span, #test-video-sortie span {
	display: inline-block;
	font-weight: bold;
}

/* videos youtube ou vimeo */
iframe {
	width: 100%;
	height: 500px;
}

/* todo:  voir pour supprimer ça car plus utilisé pour le moment */
section.acteurs {
	padding: 0px 20px;
	background: #fff;
	font-family: Open sans;
	line-height: 1.5em;
	color: #020202;
}

section.acteurs span {
	font-weight: bold;
	color: #555;
}
/* fin du todo */


section.synopsis {
	padding: 20px;
	background: #eae9e8;
	font-family: Open sans;
	line-height: 1.5em;
	color: #020202;
	border: 20px solid #fff;
	border-top: 0;
}

section.synopsis p {
	margin: 0;
}

section.technique {
	padding: 30px;
	background-color: #595d60;
	color: #fff;
	border-top: 5px solid #000;
	font-family: "Segoe UI","Open sans";
}

section.technique h2 {
	margin: 0 0 20px;
	font-size: 1.3em;
}

section.technique h3 {
	font-size: 1em;
	margin: 0;
}

section.test, section.bonus {
	padding: 20px 50px;
	background-color: #fff;
	color: #000;
	font-family: "Segoe UI","Open sans";
	font-size: 1.1em;
	line-height: 1.4em;
}

section.bonus h2 {
	color: #fff;
	margin: 0 0 40px;
	background: #555;
	padding: 10px;
	text-align: center;
}

section.technique ul li span {
	background: #bebfbb;
	color: #000;
	padding: 1px 7px;
	font-size: 0.8em;
	margin-right: 4px;
	border-radius: 2px;
}

section.technique ul.fleches {
	list-style: disclosure-closed;
	padding: 8px 25px;
}

section.technique table {
	min-width: 100%;
	margin: 0 auto;
}


section.technique table th {
	padding: 6px;
	background: #0000005c;
}

section.technique table td {
	padding: 2px 5px;
}

section.technique table td:first-child {
	width: 190px;
	font-weight: bold;
	color: #c8c8b7;
	font-family: Open sans;
}

/******************************
* Liste Evenements
*/

article.preview {
	background: #fff;
	margin-bottom: 20px;
}

article.preview ul {
	display: flex;
	padding: 10px 30px;
	position: relative;
}

article.preview h4 {
	font-size: 1.1em;
	font-family: sansationbold,Arial,sans-serif;
	font-feature-settings: "liga" 0;
	line-height: 1.2em;
	border-radius: 4px;
	text-shadow: 1px 1px 1px #f0f0f0;
	margin: 0;
	background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgb(210, 210, 210) 100%);
	padding: 10px;
}

article.preview.event h3, article.preview.nouvelle h3 {
	margin: 10px 0 0 0;
	background: #3b9084;
	padding: 1px 14px;
	display: inline-block;
	color: #fff;
	font-size: 1em;
	font-family: "Segoe UI","Open sans";
}

article.preview img {
	max-height: 400px;
	padding: 20px 0 20px 20px;
}


/*********************************
*  Liste Affiches
*/

#list_affiches {
	font-size: 0;  /* supprime les whitespace entre les fiches de film */
	text-align: center;
}

article.affiche.film {
	display: inline-block;
	background: #fff;
	padding: 6px;
	width: 136px;
	height: 181px;
	margin: 3px;
	position: relative;
	vertical-align: bottom;
	overflow: hidden;
}

article.affiche.film a {
	color: #000;
	position: relative;
	font-size: 1rem;  /* relatif avec le document root */
}

article.affiche.film img {
	width: 134px;
	height: 184px;
	vertical-align: bottom;
}

article.affiche.film h1 {
	font-size: 0.8em;
	color: #000;
	text-shadow: 1px 1px 2px #98b0c6;
	background: #fff;
	padding: 6px 0px;
	width: 100%;
	position: absolute;
	bottom: -142px;
	left: -2.2px;
	transition-duration: 0.3s;
	transition-property: bottom;
}

article.affiche.film a:hover h1 {
	bottom: 0;
	box-shadow: 0px 1px 9px #000;
}

#paginnation_hr {
	margin: 20px 50px 0;
}


/**********************************
* Critiques
*/

#critique-presentation {
	background: #fff;
}

#critique-presentation img {
	padding: 20px;
}

#critique-presentation .infos {
	display: inline-block;
	padding-bottom: 20px;
	vertical-align: bottom;
	color: #555;
	font-weight: bold;
	font-family: Open sans;
	line-height: 1em;
}

#critique-presentation #note_moyenne {
	color: #db8e38;
}

#critique-presentation .infos tr td:nth-child(1) {
	padding-right: 20px;
}

#critique-presentation .infos tr td:nth-child(2) {
	font-weight: 400;
	color: #003e80;
}

h2.critique {
	margin: 5px 0 0;
	padding: 10px;
	text-shadow: 1px 1px 1px #000;
	background: #1d74a8;
	font-family: Open Sans;
	font-size: 1.1em;
	color: #fff;
}

section.critique {
	background: #fff;
	padding: 20px;
	margin: 0;
	font-family: "Segoe UI","Open sans";
	font-size: 1.1em;
}

section.critique a {
	color: #1d74a8;
	text-decoration: underline;
	font-weight: bold;
}

.note_critique {
	text-align: right;
}

.note_critique .stars {
	color: #db8e38;
}

/********************************
* Pagination
*/

#pagination {
	font-size: 1rem;  /* relatif avec le document root */
}

#pagination a {
	display: inline-block;
	padding: 10px 14px;
	margin: 10px 5px 5px;
	border-radius: 4px;
	border: 1px dashed #f8f8f8;
	color: #fff;
	text-decoration: none;
}

#pagination a.actuelle {
	background: #0a5a8d;
	border: 2px solid #fff;
}


/* AjaxLoader **************************************/

#ajax_loader {
	text-align: center;
	display: inline-block;
	height: 65px;
	overflow: hidden;
	position: relative;
}

#ajaxScanner.waiting {
	position: absolute;
	width: 140px;
	left: 0px;
	margin: 30px 80px;
	top: 0px;
}


/************************
 * footer
 */
#site_footer {
	background: #3c322b;
}

#site_footer section {
	display: flex;
	line-height: 1.3em;
	padding: 30px 0;
}

#site_footer article {
	color: #fff;
	font-family: sansationbold,Arial,sans-serif;
	font-feature-settings: "liga" 0;
	background: #c3c3c31a;
	min-height: 50px;
	height: 170px;
}

#site_footer article header {
	background-color: #89898940;
	color: #000;
	padding: 6px 10px;
	font-family: sansationbold_italic,Arial,sans-serif;
	font-feature-settings: "liga" 0;
}

#site_footer article p {
	padding: 10px;
	margin: 0;
}

#footer_stats, #footer_social {
	min-width: 450px;
	margin: 0 auto;
}
#footer_contact {margin: 0 10px;}

#footer_stats ul li {
	background: url(../img/heart.svg) 0 7px no-repeat;
	background-size: 18px;
	padding: 6px 22px 4px 24px;
	margin-left: 10px;
}

#footer_social ul {
	display: flex;
	padding: 15px;
}

#footer_social ul li {
	margin: auto;
}

#footer_social img {
	height: 30px;
}

#footer_credits {
	padding-bottom: 20px;
	text-align: center;
	font-family: sansationbold,Arial,sans-serif;
	font-size: 1em;
	color: #e1e1e1;
}


/****************************************/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/*********************************
* 			404 not found           *
*********************************/

#skull {
	width: 12em;
}

.p404 {
	font-size: 1.2em;
	text-align: center;
	line-height: 1.3em;
	color: #fff;
}

#page.p404 {
	margin: 100px auto;
}



/*****************************************
*  Commun erreurs
*/
p.erreur {
	background: #fff;
	padding: 100px;
	font-size: 1.2em;
}



/****************************************************************************************************************
/****************************************************************************************************************
/**
/**			Corrections pour les résolutions inférieurs
/**
/****************************************************************************************************************
/***************************************************************************************************************/

@media (max-width: 1500px) {
	#footer_social {min-width: 300px;}
}



@media (max-width: 1300px) {
/* homepage */
	#homepage {width: auto;}
	.box-semaine {margin: 4px 0 0;}
	/* critiques de la semaine */
	.box-semaine.critiques { width: 100%; margin: 4px 0 0;}
	/* actualitées */
	.box-semaine.actu {width: 65vw; margin-right: 5px;}
	/* aside */
	#homepage aside {	width: calc(35vw - 5px); }
	.box-semaine.hazard { width: 100%; margin: 4px 0;}
	/* footer reseaux sociaux */
	#footer_social ul li {margin: 0 5%;}
}

@media (max-width: 1200px) {
	/* header du site */
	#siteHeader .cadre {
		width: 100%;
	}
	/* marges noires */
	#page { margin: 5px auto; }
	article.preview {	margin-bottom: 5px; }
	/* footer */
	#site_footer section {display: inline;}
	#site_footer article {height: auto; margin: 0; padding-bottom: 30px;}
	#footer_credits {margin-top: 15px;}
	/* marges autour du contenu */
	#page.critique, #page.nouvelle, #page.evenement, #page.produit, #page.video, #page.concours { max-width: none;}
	section.texte { padding: 20px 100px; }
}


@media (max-width: 1100px) {
	/* menu du site */
	.menu.mulderville ul {	padding: 0 0 0 40px; }
	.menu.mulderville li {
		font-size: 1.1em;
		padding: 10px 3px 2px;
	}
	article.preview.test aside img { max-width: 400px; }
	/* marges autour du contenu */
	section.texte { padding: 20px 50px; }
	/*  liste concours */
	article.preview.concours img {max-width: 500px;}
}


@media (max-width: 1000px) {

	:root {
		--sbox-width: 896px;  /* largeur barre de recherche */
	}

	article.preview.test aside img { max-width: 350px; }
	/* auteur */
	section.texte h2 { margin-left: 15px }
	/* marges autour du contenu */
	section.texte { padding: 20px 0; }
	article.preview.concours img {max-width: 400px;}
	/* actualitées */
	.box-semaine.actu {
		width: 100%;
		margin-right: 0;
	}
	#homepage aside { width: 100%;}
	.box-semaine.twitter article {
		height: 80vh;
		width: 500px;
		margin: auto;
	}
	/* twitter */
	.box-semaine.twitter article {height: 50vh;}
	/* concours */
	.box-semaine.concours img {width: 500px;}
	/* youtube */
	iframe {height: calc(100vw/2);}


}


@media (max-width: 900px) {

	:root {
		--sbox-width: 796px;  /* largeur barre de recherche */
	}

	article.preview.test aside img { max-width: 300px; }
	.hazardSemaine img {height: 166px;width: 121px;}

	#siteHeader .cadre {height: 48px;}
	.boutonMenu {display: block;}
	#cadre_logo {
		position: initial;
		z-index: 20;
		width: 100%;
	}
	/* drapeau langue */
	#bt_choix_language {padding: 6px 6px;margin-right: 5px;}
	#bt_choix_language span { display: none;}
	#bt_choix_language .caret {display: none;}
	#bt_choix_language:hover {background: transparent;}

	/* menu */
	.menu.mulderville {
		position: fixed;
		background: #026197;
		z-index: 100;
		padding: 0;
		height: 100vh;
		padding-top: 80px;
		top: 0;
		box-shadow: 4px 2px 10px #000;
		left: -300px;
	}
	.menu.mulderville ul {
		padding: 0;
		border-top: 1px solid #253c55;
	}

	.menu.mulderville li:first-child {display: block;}

	.menu.mulderville li {
		padding: 0;
		display: block;
		border: 0;
		margin: 0;
	}
	.menu.mulderville li:last-child {
		margin: 0;
		font-size: 1.1em;
	}
	.menu.mulderville li:last-child::before {	display: none; }
	.menu.mulderville li a {
		padding: 3vh 34px 3vh 5vw;
		display: block;
		text-align: left;
		font-size: 1.1em;
		text-transform: uppercase;
		background: #b6c8bc24;
		border: 1px outset #36769b;
		margin: 0 0 2px 0;
	}
}

@media (max-width: 800px) {

	:root {
		--sbox-width: 696px;  /* largeur barre de recherche */
	}

	/* homepage critiques */
	.carousel img {
		height: 165px;
		width: 120px;
	}
	.carousel--item {width: 120px;}
	.carousel--wrap {height: 186px;}

	/* liste images */
	article.preview.nouvelle img, article.preview.event img, article.preview.test aside img {
		max-width: 250px;
		min-width: 150px;
	}
	/* liste evenements */
	article.preview.event ul, article.preview.nouvelle ul {	padding: 0 15px; }
	article.preview.nouvelle li:first-child, article.preview.event li:first-child {margin: 10px 0 0;}
	/* test produit */
	#test-video-presentation .affiche img { max-width: 280px; }
	/* liste concours */
	article.preview.concours li:last-child {
		position: absolute;
		top: 0;
		left: 0;
	}
	article.preview.concours img {
		max-width: none;
		height: 250px;
	}
	article.preview.concours li:first-child {	margin-top: 280px; }
	/* films à redécouvrir */
	.hazardSemaine {width: 465px; margin: 5px auto 10px;}
	.hazardSemaine img {height: 184px; width: 134px; } /* rends leur taille originel */

	/* page Liste concours */
	article.preview.concours li:last-child {display: inline-block; margin: 0;width: 100%; text-align: center;}
	article.preview.concours img {padding: 15px;}
}


@media (max-width: 700px) {
	:root {
		--sbox-width: 596px;  /* largeur barre de recherche */
	}

	/* liste tests */
	article.preview.test {position: relative;}
	article.preview.test section {padding: 270px 10px 10px;}
	article.preview.test aside {position: absolute;	left: 121px;}
	article.preview.test aside img {	height: 250px;}
	/* liste images */
	article.preview.nouvelle img, article.preview.event img, article.preview.test aside img {	max-width: 200px; }
}


@media (max-width: 600px) {
	:root {
		--sbox-width: 496px;  /* largeur barre de recherche */
	}

	/* homepage critiques */
	.carousel img {
		height: 150px;
		width: 108px;
	}
	.carousel--item {width: 108px;}
	.carousel--wrap {height: 171px;}
	.cadre-caroussel {padding: 5px 5px 0;}
	/* homepage actualités */
	.box-semaine.actu h1 {
		width: 100%;
		display: inline-block;
	}
	.box-semaine.actu .categorie {
		display: inline-block;
		width: calc(100vw - 170px);
		margin-left: -8px;
	}
	.box-semaine.actu .parution {
		position: initial;
		padding: 5px 0;
		display: inline-block;
	}
	.box-semaine.actu .texte {padding: 3vw 10px 25px 150px;}
	.box-semaine.actu .texte p {display: none;}

	/* concours */
	.box-semaine.concours img {width: 450px;}
	/* critiques */
	section.synopsis, section.critique {font-size: 0.9em;}
	h2.critique {
		padding: 6px;
		font-size: 1em;
	}
	#critique-presentation img {padding: 10px;}

	#footer_stats, #footer_social { min-width: 0; }
	/* liste nouvelles, evenements */
	article.preview.nouvelle li:last-child, article.preview.event li:last-child {position: absolute;	width: calc(100% - 30px);}
	article.preview.nouvelle li img, article.preview.event li img {height: 250px;	padding: 0;}
	article.preview.nouvelle li:first-child, article.preview.event li:first-child { margin-top: 260px;}
	article.preview.nouvelle ul, article.preview.event ul {padding: 10px 10px;}
	/* général */
	#page_name h1 {
		padding: 8px;
		font-size: 1.1em;
	}
}

@media (max-width: 500px) {
	:root {
		--sbox-width: 396px;  /* largeur barre de recherche */
	}

	.hazardSemaine {width: auto;}
	.hazardSemaine img {height: 166px;width: 121px;}
	.box-semaine.concours img {width: 100%;}
	.box-semaine.twitter article {height: 60vh; width: 100%;}
	/* général */
	#page_name h1 {font-size: 1em;}
	/* critiques */
	h2.critique {font-size: 0.9em;}
	#critique-presentation .infos {font-size: 0.9em;}
}