/* 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 */

	/* Thème sombre homepage */
	--dk-bg: #0b0f1a;
	--dk-glow: #182b4d;
	--dk-surface: #131a2b;
	--dk-surface-hover: #1a2338;
	--dk-border: #232e47;
	--dk-text: #f2f4f8;
	--dk-text-muted: #8b93a7;
	--dk-accent: #2f6fed;
	--dk-accent-hover: #4a84ff;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
	font-family: "Open Sans", "Segoe UI", 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;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 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;
	z-index: 21;
}

#siteHeader {
	text-align: center;
}

#siteHeader .cadre {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	min-height: 78px;
	padding: 0 2%;
	box-sizing: border-box;
}

#cadre_logo {
	position: absolute;
	left: 2%;
	top: 55%;
	transform: translateY(-50%);
}

#logo {
	height: 45px;
	width: auto;
	padding: 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.7em;
	border-bottom: 3px solid #0000;
	text-shadow: 1px 1px 1px #000;
}

nav li.active {
	border-bottom: 3px solid var(--dk-accent);
}

.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: 50%;
	transform: translateY(-50%);
	right: 2%;
	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", "Segoe UI", Arial, sans-serif;
	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: 22px;
}

#popRecherche {
	position: fixed;
	top: -140px;
	z-index: 8002;
	background: linear-gradient(to bottom, #2e79ff 0%, rgb(9, 28, 74) 93%, #000 100%);
	width: 100%;
	text-align: center;
	padding: 20px 0px;
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	font-size: 1.1em;
	background: radial-gradient(1100px 480px at 50% -80px, #2e79ff 0%, rgb(9, 28, 74) 70%);
	box-shadow: 0px 0px 26px 16px #000;
	border-bottom: 2px solid #143279;
}

#dataRecherche {
	display: inline-grid;
}

#inputRecherche {
	margin: 0 0 15px;
	border: 0;
	padding: 5px;
	border-radius: 2px;
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: "Open Sans", "Segoe UI", Arial, sans-serif;
	font-size: 1em;
	margin-left: 15px;
}

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

.optionsRecherche {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 30px;
	margin: 0 0 10px;
}

.typeRecherche {
	display: flex;
}

.optionsRecherche input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.optionsRecherche label {
	display: inline-block;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 4px 2px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.optionsRecherche input:checked + label {
	border-bottom-color: #fff;
}

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

#searchbox-selectized {
	width: var(--sbox-width) !important;
	padding: 9px 10px;
	font-size: 1em;
	border-radius: 2px;
	box-sizing: border-box;
	font-size: 0.9em;
	border-radius: 6px;
	border: none;
	font-weight: bold;
	color: #021d38;
}

.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%;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	color: #021d38;
}

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

.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: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: "Open Sans", "Segoe UI", Arial, sans-serif;
}

article.preview p.extrait {
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}


.homepage-wrap {
	width: 100%;
}

/* Le dégradé est porté par #page-wrap (qui englobe le header) plutôt que
   par .homepage-wrap, pour qu'il démarre dès le haut de la page et passe
   sous le header, sans coupure visuelle entre les deux. */
#page-wrap:has(.homepage-wrap) {
	background: radial-gradient(1100px 480px at 50% -80px, #054ed2 0%, rgba(24, 43, 77, 0) 70%),
	 radial-gradient(1100px 480px at 50% calc(100% + 80px), #054ed2 0%, rgba(24, 43, 77, 0) 70%),
	 var(--dk-bg);
	background-attachment: fixed;
}


#homepage {
	width: 100%;
	color: var(--dk-text);
	padding: 24px 2% 40px;
	box-sizing: border-box;
}

#homepage .box-semaine header h2,
#homepage .box-semaine.actu article h3 {
	padding: 0;
	margin: 0;
	font-size: 1em;
}

#homepage .box-semaine {
	background: transparent;
}

#homepage .box-semaine header {
	background: transparent;
	padding: 0 0 16px;
	color: var(--dk-text);
}

#homepage .box-semaine header h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

#homepage .box-semaine header h2::after {
	content: '';
	flex: 0 0 40px;
	height: 2px;
	background: var(--dk-accent);
}

#homepage .box-semaine.critiques header h2::before {
	content: '\25B6';
	color: var(--dk-accent);
	font-size: 0.8em;
}

.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: 100%;
	margin: 20px 0 10px;
}

.box-semaine.critiques .carousel--item a {
	position: relative;
	display: block;
	width: 168px;
	height: 230px;
}

/* Note en thermomètre, superposée en bas à droite des affiches (accueil) :
   une seule couleur choisie selon la note (rouge → vert), remplissage depuis le bas. */
.note-stars {
	position: absolute;
	right: 7px;
	bottom: 6px;
	z-index: 2;
	width: 8px;
	height: 110px;
	border-radius: 5px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.57);
	pointer-events: none;
	box-shadow: 0px 0px 1px 1px #090909e0;
}

.note-stars-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.filmSemaine {
	margin: 10px 30px;
}

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

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dk-border);
	border-radius: 50%;
	background: rgba(11, 15, 26, 0.75);
	color: var(--dk-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 150ms, border-color 150ms;
}

.carousel-arrow:hover {
	background: var(--dk-accent);
	border-color: var(--dk-accent);
}

.carousel-arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
}

.carousel-arrow.prev { left: 6px; }
.carousel-arrow.next { right: 6px; }

.carousel--dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 8px 0 0;
}

.carousel--dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dk-border);
	cursor: pointer;
	transition: background 200ms, width 200ms;
}

.carousel--dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: var(--dk-accent);
}

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

.carousel .dragging {
	cursor: grabbing;
}

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

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

.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 {
	box-shadow: 0 0 0 3px var(--dk-accent);
}


/* Actualités + aside en grille */
.grille-actu {
	display: grid;
	grid-template-columns: 80fr 30fr;
	column-gap: 20px;
	align-items: start;
}

/* Actualités */
.box-semaine.actu {
	background: #fff;
}

.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: "Open Sans", "Segoe UI", Arial, sans-serif;
	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 .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;
}

/* Actualités homepage : variante sombre, scopée à #homepage pour ne pas
   impacter les pages Nouvelles/Evènements qui réutilisent .box-semaine.actu */
#homepage .box-semaine.actu {
	background: transparent;
}

#homepage .box-semaine.actu article {
	position: relative;
	margin-bottom: 14px;
	padding: 10px 18px 10px 8px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(20, 37, 78, 0.39), rgba(15, 21, 39, 0.55));
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 20px rgba(80, 130, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
	transition: border-color 150ms, box-shadow 150ms;
}

#homepage .box-semaine.actu article:last-child {
	margin-bottom: 0;
}

#homepage .box-semaine.actu article:hover {
	border-color: rgba(122, 162, 255, 0.55);
	box-shadow: 0 0 26px rgba(80, 130, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.4);
}

#homepage .box-semaine.actu a {
	background: transparent;
	color: var(--dk-text);
	position: relative;
	width: 100%;
	padding-right: 22px;
	box-sizing: border-box;
}

#homepage .box-semaine.actu img {
	border-radius: 6px;
	object-fit: cover;
	height: 200px;
	width: 140px;
}

#homepage .box-semaine.actu .texte {
	height: 176px;
	padding-left: 161px;
	font-size: 1.2em;
}

#homepage .box-semaine.actu .parution {
	color: var(--dk-text-muted);
}

#homepage .box-semaine.actu .categorie {
	display: inline-block;
	vertical-align: middle;
	color: var(--dk-accent);
	background: none;
	padding: 0px 10px;
	border: 1px solid var(--dk-accent);
	border-radius:6px;
	font-weight: 700;
	font-size: 0.68em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
}

#homepage .box-semaine.actu article h3 span {
	color: var(--dk-text);
	font-weight: 700;
}

#homepage .box-semaine.actu .texte p {
	color: #acb2be;
}

#homepage .box-semaine.actu .chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--dk-text-muted);
}

#homepage .box-semaine.actu .chevron svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
}

#homepage .box-semaine.actu hr {
	display: none;
}

.actu-footer {
	text-align: center;
	padding: 20px 0 0;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 40px;
	border: 0;
	border-radius: 7px;
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: background 150ms;
	box-shadow: 0 0 10px 2px #6799f9;
	background: linear-gradient(135deg, rgba(22, 34, 61, 0.64), rgb(15, 21, 39));
	border: 1px solid rgba(122, 162, 255, 0.28);
}

.btn-outline:hover {
	box-shadow: 0 0 10px 2px #79c6ff;
}

.btn-outline .btn-loader {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: btn-loader-spin 700ms linear infinite;
}

.btn-outline.is-loading {
	cursor: default;
}

.btn-outline.is-loading .btn-label {
	display: none;
}

.btn-outline.is-loading .btn-loader {
	display: inline-block;
}

@keyframes btn-loader-spin {
	to {
		transform: rotate(360deg);
	}
}


/* homepage aside */

#homepage aside {
	align-self: start;
	position: sticky;
	top: 5px;
	max-height: calc(100vh - 10px);
	overflow-x: hidden;
	overflow-y: auto;
}


/* homepage Concours */

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

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


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


/* Homepage films prochains */

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

/* variante "prochainement" du carousel : image statique (plus d'absolute) */
.filmProchain .carousel--item {
	vertical-align: top;
}

.filmProchain .carousel--item a {
	display: block;
	position: relative;
}

.filmProchain img {
	position: static;
	display: block;
}

/* Thermomètre réduit de moitié sur les films à venir, les films à revoir et la liste des critiques */
.filmProchain .note-stars,
.hazardSemaine .note-stars,
article.affiche.film .note-stars {
	height: 55px;
	width: 6px;
}


/* 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: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: 100%;
	margin: 50px 0 10px;
}

.hazardSemaine {
	display: flex;
	flex-wrap: wrap;
	margin: 10px;
	background: #4fbcff2b;
	padding: 10px;
	box-shadow: 0 0 5px 5px #4fbcff2b;
	border-radius: 12px;
}

.hazardSemaine img {
	border-radius: 8px;
	height: 230px;
	width: 168px;
	object-fit: fill;
}

.hazardSemaine article a {
	position: relative;
	display: block;
}

/* homepage : encart newsletter */

.newsletter-box {
	display: flex;
	gap: 14px;
	align-items: flex-start;
   background: linear-gradient(135deg, rgba(20, 37, 78, 0.64), rgb(15, 21, 39));	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 20px rgba(80, 130, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	padding: 18px;
	margin: 10px 0;
	transition: border-color 150ms, box-shadow 150ms;
}

.newsletter-box:hover {
	border-color: rgba(122, 162, 255, 0.5);
}

.newsletter-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dk-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.newsletter-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.newsletter-body h2 {
	margin: 0 0 6px;
	font-size: 1em;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.newsletter-body p {
	margin: 0 0 12px;
	color: var(--dk-text-muted);
	font-size: 0.85em;
	line-height: 1.4em;
}

.newsletter-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
	flex: 1 1 140px;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 4px;
	border: 1px solid var(--dk-border);
	background: var(--dk-bg);
	color: var(--dk-text);
	font-size: 0.85em;
}

.newsletter-form button {
	padding: 9px 16px;
	border: none;
	border-radius: 4px;
	background: var(--dk-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.8em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 150ms;
}

.newsletter-form button:hover {
	background: var(--dk-accent-hover);
}

/* homepage : encart "Mulderville c'est..." (remplace temporairement l'encart newsletter ci-dessus) */

.stats-box {
	background: linear-gradient(135deg, rgba(20, 37, 78, 0.64), rgb(15, 21, 39));
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 20px rgba(80, 130, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	padding: 18px;
	margin: 40px 0;
	transition: border-color 150ms, box-shadow 150ms;
}

.stats-box h2 {
	margin: 0 0 10px;
	font-size: 1em;
	color: var(--dk-text);
	letter-spacing: 0.03em;
}

.stats-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--dk-text-muted);
	font-size: 0.85em;
	line-height: 1.4em;
	padding: 4px 0;
}

.stats-list strong {
	color: var(--dk-text);
	font-weight: 700;
}

.stats-icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--dk-accent);
}

.stats-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* homepage : réseaux sociaux (sidebar) */

.social-box h2,
.aside-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.social-box h2::after,
.aside-title::after {
	content: '';
	flex: 0 0 40px;
	height: 2px;
	background: var(--dk-accent);
}

.social-list {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.social-list li {
	flex: 1 1 0;
	max-width: 70px;
}

.social-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(31, 44, 76, 0.99), rgb(2, 11, 35));
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 14px rgba(80, 130, 255, 0.08);
	transition: background 150ms, border-color 150ms, box-shadow 150ms;
}

.social-list a:hover {
	background: #000;
	border-color: var(--dk-accent);
	box-shadow: 0 0 18px rgba(80, 130, 255, 0.35);
}

.social-list img {
	width: 72.7%;
	height: 50%;
}

.social-list img[alt="Flickr"] {
	height: 63.6%;
}

.social-list img[alt="YouTube"] {
	width: 95%;
}


/*********************************
* 			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: "Open Sans", "Segoe UI", Arial, sans-serif;
}

#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", "Segoe UI", Arial, sans-serif;
	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", "Segoe UI", Arial, sans-serif;
	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", "Segoe UI", Arial, sans-serif;
	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: "Open Sans", "Segoe UI", Arial, sans-serif;
}

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: "Open Sans", "Segoe UI", Arial, sans-serif;
	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", "Segoe UI", Arial, sans-serif;
}

/******************************
* 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: "Open Sans", "Segoe UI", Arial, sans-serif;
}

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;
	padding-top: 10px;
}

article.affiche.film {
	display: inline-block;
	background: transparent;
	padding: 0;
	width: 210px;
	height: auto;
	margin: 24px;
	position: relative;
	vertical-align: top;
	overflow: visible;
	text-align: center;
}

article.affiche.film a {
	color: var(--dk-text);
	display: block;
	font-size: 0.7rem;  /* relatif avec le document root */
}

/* Le cadre (bordure, ombre, coins arrondis) est porté par .affiche-image,
   pas par l'<img> : au survol, seule l'image zoome (voir plus bas) — si le
   cadre portait ces styles, il grossirait avec elle. overflow:hidden rogne
   l'image agrandie aux dimensions fixes du cadre. */
article.affiche.film .affiche-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	transition: box-shadow 0.25s;
	box-shadow: 0 0px 8px 3px #2179e9ed;
	border: 7px solid #fff;
}

article.affiche.film img {
	width: 210px;
	height: 288px;
	vertical-align: top;
	object-fit: cover;
	transition: transform 0.4s, opacity 300ms ease-out;
}

article.affiche.film a:hover .affiche-image {
	box-shadow: 0 0 9px 2px #fff;
}

article.affiche.film a:hover img {
	transform: scale(1.1);
}

article.affiche.film h1 {
	font-size: 1em;
	font-weight: 700;
	color: #899ed4;
	text-shadow: none;
	background: none;
	padding: 8px 2px 0;
	width: auto;
	position: static;
	line-height: 1.3em;
	transition: color 150ms;
}

article.affiche.film a:hover h1 {
	color: var(--dk-text);
}

#paginnation_hr {
	border-color: var(--dk-border);
	opacity: 1;
	margin: 20px 50px 0;
}

/* Liste évènements (mêmes codes visuels que la liste des nouvelles) */

#liste-evenements {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 24px 2% 60px;
	color: var(--dk-text);
	background: transparent;
}

#liste-evenements header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #1f8cff70;
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 22px 1px rgba(112, 188, 255, 0.72);
	border-radius: 12px;
	padding: 18px 24px;
	margin: 0 0 24px;
	transition: border-color 150ms, box-shadow 150ms;
}

#liste-evenements header:hover {
	border-color: rgba(122, 162, 255, 0.55);
	box-shadow: 0 0 22px 5px rgba(112, 188, 255, 0.72);
}

#liste-evenements header h1 {
	margin: 0;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.6em;
	font-weight: 700;
}

#liste-evenements header .compteur {
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	padding: 10px 25px;
	border-radius: 20px;
	background: #00000026;
}

#liste-evenements #pagination a {
	border: 1px solid rgba(122, 162, 255, 0.28);
	color: var(--dk-text);
	border-radius: 20px;
	transition: border-color 150ms, background 150ms;
}

#liste-evenements #pagination a:hover {
	border-color: var(--dk-accent);
}

#liste-evenements #pagination a.actuelle {
	background: var(--dk-accent);
	border-color: var(--dk-accent);
	color: #fff;
}

#liste-evenements #pagination .ellipsis {
	color: var(--dk-text-muted);
}

/* Fiche nouvelle / événement */

#page_intro .parution {
	color: #888;
	font-size: 0.9em;
}

#page_intro .tag {
	margin-left: 12px;
	background: #1884c2;
	color: #fff;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.85em;
}

#page_intro .lieu {
	margin-left: 12px;
	color: #555;
	font-size: 0.9em;
}

#page_intro .lieu::before {
	content: '📍 ';
}

#page_intro .dates-event {
	margin-left: 12px;
	color: #333;
	font-size: 0.9em;
	font-weight: bold;
}

/* Fiche critique */

#page_name h1 .annee {
	font-weight: normal;
	font-size: 0.85em;
	opacity: 0.8;
}

#retour-liste {
	padding: 12px 20px;
	background: #0e4c70;
	margin: 0;
}

#retour-liste a {
	color: #8ec8f0;
	font-size: 0.9em;
}

#retour-liste a:hover {
	color: #fff;
}

/* Liste des critiques */

#liste-critiques {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 24px 2% 60px;
	color: var(--dk-text);
	background: transparent;
}

#liste-critiques header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #1f8cff70;
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 22px 1px rgba(112, 188, 255, 0.72);
	border-radius: 12px;
	padding: 18px 24px;
	margin: 0 0 24px;
	transition: border-color 150ms, box-shadow 150ms;
}

#liste-critiques header:hover {
	border-color: rgba(122, 162, 255, 0.55);
	box-shadow: 0 0 22px 5px rgba(112, 188, 255, 0.72);
}

#liste-critiques header h1 {
	margin: 0;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.6em;
	font-weight: 700;
}

#liste-critiques header .compteur {
	font-size: 1em;
  	font-weight: 600;
   color: #fff;
   padding: 10px 25px;
   border-radius: 20px;
   background: #00000026;
}

#liste-critiques #pagination a {
	border: 1px solid rgba(122, 162, 255, 0.28);
	color: var(--dk-text);
	border-radius: 20px;
	transition: border-color 150ms, background 150ms;
}

#liste-critiques #pagination a:hover {
	border-color: var(--dk-accent);
}

#liste-critiques #pagination a.actuelle {
	background: var(--dk-accent);
	border-color: var(--dk-accent);
	color: #fff;
}

#liste-critiques #pagination .ellipsis {
	color: var(--dk-text-muted);
}

/* Liste des nouvelles (mêmes codes visuels que la liste des critiques, en briques pleine largeur) */

#liste-nouvelles {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 24px 2% 60px;
	color: var(--dk-text);
	background: transparent;
}

#liste-nouvelles header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #1f8cff70;
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 22px 1px rgba(112, 188, 255, 0.72);
	border-radius: 12px;
	padding: 18px 24px;
	margin: 0 0 24px;
	transition: border-color 150ms, box-shadow 150ms;
}

#liste-nouvelles header:hover {
	border-color: rgba(122, 162, 255, 0.55);
	box-shadow: 0 0 22px 5px rgba(112, 188, 255, 0.72);
}

#liste-nouvelles header h1 {
	margin: 0;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.6em;
	font-weight: 700;
}

#liste-nouvelles header .compteur {
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	padding: 10px 25px;
	border-radius: 20px;
	background: #00000026;
}

#liste-nouvelles #pagination a {
	border: 1px solid rgba(122, 162, 255, 0.28);
	color: var(--dk-text);
	border-radius: 20px;
	transition: border-color 150ms, background 150ms;
}

#liste-nouvelles #pagination a:hover {
	border-color: var(--dk-accent);
}

#liste-nouvelles #pagination a.actuelle {
	background: var(--dk-accent);
	border-color: var(--dk-accent);
	color: #fff;
}

#liste-nouvelles #pagination .ellipsis {
	color: var(--dk-text-muted);
}

#list_articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

article.brique-actu a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(122, 162, 255, 0.28);
	box-shadow: 0 0 20px rgba(80, 130, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
	color: var(--dk-text);
	transition: border-color 150ms, box-shadow 150ms;
}

article.brique-actu a:hover {
	border-color: rgba(122, 162, 255, 0.55);
	box-shadow: 0 0 26px rgba(80, 130, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.4);
}

article.brique-actu a:hover h2 {
	color: var(--dk-accent-hover);
}

article.brique-actu img, article.brique-actu .brique-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	flex: 0 0 auto;
}

article.brique-actu img {
	object-fit: cover;
	object-position: center top;
}

article.brique-actu .brique-placeholder {
	background: var(--dk-surface);
	border-bottom: 1px solid var(--dk-border);
}

article.brique-actu .brique-texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	padding: 14px 16px;
	background: #fff;
}

article.brique-actu .categorie {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 8px;
	color: var(--dk-accent);
	padding: 1px 10px;
	border: 1px solid var(--dk-accent);
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.68em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

article.brique-actu h2 {
	margin: 0 0 8px;
	font-size: 1.05em;
	font-weight: 700;
	color: #111;
	line-height: 1.3em;
	transition: color 150ms;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

article.brique-actu .parution {
	color: var(--dk-text-muted);
	font-size: 0.85em;
}

/* Variante horizontale des briques : photo à gauche du texte (aside fiche nouvelle) */

article.brique-actu.horizontal a {
	flex-direction: row;
	height: auto;
}

article.brique-actu.horizontal img,
article.brique-actu.horizontal .brique-placeholder {
	width: 110px;
	aspect-ratio: 3 / 4;
	flex: 0 0 110px;
	border-bottom: none;
}

article.brique-actu.horizontal .brique-image {
	position: relative;
	display: block;
	width: 110px;
	aspect-ratio: 3 / 4;
	flex: 0 0 110px;
}

article.brique-actu.horizontal .brique-image img,
article.brique-actu.horizontal .brique-image .brique-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

article.brique-actu.horizontal .brique-texte {
	padding: 10px 14px;
	flex-direction: row;
	gap: 10px;
}

article.brique-actu.horizontal .brique-texte-infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

article.brique-actu.horizontal a {
	background: #fff;
	color: #1a1a1a;
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

article.brique-actu.horizontal a:hover {
	border-color: rgba(0, 0, 0, 0.25);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

article.brique-actu.horizontal h2 {
	color: #1a1a1a;
	font-size: 0.95em;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

article.brique-actu.horizontal .parution {
	color: #666;
}

/* Fiche nouvelle / évènement (nouveau design, aligné sur les pages de liste) */

.fiche-page {
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 24px 2% 60px;
	row-gap: 24px;
}

.fiche-principale {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #7b7b7b14;
	box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.35);
}

.fiche-header {
	padding: 24px;
	background: #1b469c;
	border-bottom: 1px solid rgba(122, 162, 255, 0.28);
	background: radial-gradient(1100px 700px at 70% -80px, #68329ea3 0%, rgba(24, 43, 77, 0) 50%), radial-gradient(1100px 480px at 50% calc(100% + 80px), #054ed2 0%, rgba(24, 43, 77, 0) 70%), #213875;
}

.fiche-header .categorie {
	display: inline-block;
	margin-bottom: 12px;
	color: #7cc8ff;
	padding: 1px 10px;
	border: 2px solid #7cc8ff;
	border-radius: 5px;
	font-weight: 700;
	font-size: 0.9em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fiche-header h1 {
	margin: 0 0 10px;
	color: var(--dk-text);
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.3;
}

.fiche-header .parution {
	color: #fff;
	font-size: 0.9em;
}

.fiche-header .lieu {
	margin-left: 12px;
	color: #fff;
	font-size: 0.9em;
}

.fiche-header .lieu::before {
	content: '📍 ';
}

.fiche-header .dates-event {
	margin-left: 12px;
	color: #fff;
	font-size: 0.9em;
	font-weight: bold;
}

/* Fiche film : bandeau "hero" (fond dégradé + affiche floutée en fond + texture) */

.fiche-film .fiche-header.film-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 30px 35px;
	background: radial-gradient(1100px 700px at 70% -80px, #442067a3 0%, rgba(16, 28, 50, 0) 50%), radial-gradient(1100px 480px at 50% calc(100% + 80px), #033389 0%, rgba(16, 28, 50, 0) 70%), #16244c;
}

.film-hero::before,
.film-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
}

.film-hero::before {
	inset: -10%;
	background-image: var(--hero-poster, none);
	background-size: cover;
	background-position: center 20%;
	filter: blur(30px) saturate(1.4);
	opacity: 0.6;
	mix-blend-mode: color;
	transform: scale(1.1);
}

.film-hero::after {
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.film-hero-content {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.film-hero h1 {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(1.5em, 3.4vw, 2.5em);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.film-hero-realisateur {
	margin: 0 0 24px;
	color: #a3abc0;
	font-size: 1.2em;
	font-style: italic;
}

.film-hero-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.film-hero-genre {
	display: inline-block;
	color: #39c8ff;
	padding: 3px 14px;
	border: 4px solid #39c8ff;
	border-radius: 20px;
	font-weight: 700;
	font-size: 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.film-hero-annee {
	margin-left: 4px;
	color: #a3abc0;
	font-size: 1.2em;
	font-weight: 700;
	font-style: normal;
}

/* Thermomètre de notation, posé complètement à droite du bandeau (pleine hauteur) */
.film-hero-note {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
}

/* Thermomètre déplacé dans le bloc texte des briques horizontales (aside "Autres films"), collé à droite */
.note-stars--brique {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	flex: 0 0 auto;
	align-self: stretch;
	width: 6px;
	height: auto;
	margin-left: auto;
}

.note-stars--hero {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	align-self: stretch;
	height: auto;
	width: 14px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	box-shadow: none;
}

.fiche-corps {
	padding: 25px 50px;
	background: #fff;
	color: #1a1a1a;
	line-height: 1.6;
	font-size: 1.1em;
}

.fiche-corps a {
	color: #0060dd;
	text-decoration: underline;
}

/* Texte riche (HTML brut d'un article/critique) : images larges, texte étroit
   et justifié. Scopé à .fiche-texte (et non .fiche-corps) car .fiche-corps peut
   aussi contenir une fiche technique / un synopsis qui n'ont pas ce traitement. */

.fiche-texte img {
	display: block;
	max-width: 100%;
	width: 1100px;
	height: auto;
	border-radius: 8px;
	margin: 30px auto;
}

.fiche-texte p:not(:has(img)),
.fiche-texte ul,
.fiche-texte ol,
.fiche-texte h2,
.fiche-texte h3 {
	max-width: 90ch;
	margin: 0 auto 16px;
	text-align: justify;
	hyphens: auto;
}

.fiche-texte p:has(img) {
	margin: 0;
}

/* Nouvelles / évènements : la 1ère image du texte est une affiche/poster en
   format portrait (~2:3), pas une photo éditoriale large. On la limite en
   hauteur (et non en largeur comme les images suivantes) pour qu'elle tienne
   à l'écran. Ciblage via ">p:first-child" (et non "img:first-of-type", qui
   matche chaque image puisqu'elle est seule dans son <p>). Exclu des fiches
   film (.fiche-film), où .fiche-texte contient la critique et pas d'affiche
   en tête de texte. */
.fiche-page:not(.fiche-film) .fiche-texte > p:first-child > img {
	width: auto;
	max-height: 90vh;
}

/* Page contact : formulaire à l'intérieur de .fiche-corps (fond blanc), même bleu
   que .fiche-header/.fiche-corps a pour rester cohérent avec le reste des fiches. */

.contact-intro,
.contact-legal {
	max-width: 90ch;
	margin: 0 auto 24px;
	color: #444;
}

.contact-legal {
	margin: 24px auto 0;
	font-size: 0.85em;
	color: #777;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 90ch;
	margin: 0 auto;
}

.contact-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.contact-field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.contact-field label {
	font-size: 0.85em;
	font-weight: 700;
	color: #444;
}

.contact-field input,
.contact-field textarea {
	padding: 10px 14px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background: #f7f7f9;
	color: #1a1a1a;
	font-size: 1em;
	font-family: inherit;
	resize: vertical;
	transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.contact-field input:focus,
.contact-field textarea:focus {
	outline: none;
	border-color: #0b79c9;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11, 121, 201, 0.15);
}

.contact-actions {
	display: flex;
}

.contact-message {
	display: none;
	margin-top: 4px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.95em;
	background: #e9f7ee;
	color: #1e7d3e;
	border: 1px solid #b7e4c7;
}

.contact-message.is-error {
	background: #fdecea;
	color: #a4262c;
	border: 1px solid #f3b4ae;
}

/* Fiche critique : fiche technique (affiche + infos) puis synopsis puis texte */

.fiche-technique {
	display: grid;
	grid-template-columns: 273px 1fr;
	gap: 15px 30px;
	align-items: center;
}

.fiche-technique .affiche-film {
	width: 273px;
	height: 374px;
	object-fit: cover;
	border-radius: 8px;
	margin-left: 5px;
	box-shadow: 0 0 2px 8px #000;
}

.fiche-technique table {
	grid-column: 2;
	border-collapse: collapse;
}

.fiche-technique table td {
	padding: 6px 16px 6px 0;
	vertical-align: top;
	font-size: 0.95em;
}

.fiche-technique table td:first-child {
	color: #666;
	font-weight: 600;
	white-space: nowrap;
}

.fiche-technique table td:last-child {
	color: #1a1a1a;
}

.fiche-technique #note_moyenne {
	color: #c9770f;
	font-weight: 700;
}

.fiche-synopsis {
	padding: 16px;
	background: #f5f5f5;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	color: #333;
	font-style: italic;
	line-height: 1.5;
	margin-top: 40px;
}

.fiche-synopsis p {
	margin: 0;
}

.fiche-critique-titre {
	margin: 24px 16px 0;
	color: #1a1a1a;
	font-size: 1.1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.note_critique {
	padding: 16px;
	text-align: right;
	font-weight: bold;
}

.note_critique .stars {
	color: #c9770f;
	letter-spacing: 2px;
}

.fiche-critique-auteur {
	margin: 0 16px;
	font-size: 0.95em;
	color: #666;
}

.fiche-critique-date {
	margin-left: 8px;
}

.fiche-critique-date::before {
	content: "· ";
}

.fiche-critique-suivante {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(122, 162, 255, 0.28);
}

.fiche-retour {
	padding: 16px 32px;
	margin: 0;
	border-top: 1px solid rgba(122, 162, 255, 0.28);
	background: #d00;
}

.fiche-retour a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 1.2em;
	transition: color 150ms;
	font-weight: bold;
}

.fiche-retour a:hover {
	color: var(--dk-text);
}

.fiche-aside {
	align-self: start;
}

/* États pilotés par nouvelle-show.js : la colonne suit le bas de l'écran (is-fixed,
   position:fixed nativement géré par le navigateur, aucun recalcul JS par frame),
   puis se fige au niveau du bas de l'article une fois celui-ci atteint (is-docked). */

.fiche-aside.is-fixed {
	position: fixed;
	top: auto;
}

.fiche-aside.is-docked {
	position: absolute;
	top: auto;
}

.fiche-aside header {
	margin: 0 0 16px;
}

.fiche-aside header h2 {
	margin: 0;
	color: var(--dk-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.05em;
	font-weight: 700;
}

.fiche-aside-liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Liste des tests */

#liste-tests {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

#liste-tests > header {
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	max-width: 1200px;
}

#liste-tests > header .compteur {
	font-size: 0.85em;
	opacity: 0.75;
}

#liste-tests article.preview.test {
	margin-bottom: 2px;
}

.affiche-placeholder {
	width: 210px;
	height: 288px;
	display: inline-block;
	background: var(--dk-surface);
	border: 1px solid var(--dk-border);
	border-radius: 8px;
	vertical-align: top;
}

#pagination {
	text-align: center;
	padding: 10px;
}

#pagination .ellipsis {
	color: #fff;
	padding: 0 4px;
}


/**********************************
* 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", "Segoe UI", Arial, sans-serif;
	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", "Segoe UI", Arial, sans-serif;
	font-size: 1.1em;
	color: #fff;
}

section.critique {
	background: #fff;
	padding: 20px;
	margin: 0;
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	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: radial-gradient(1100px 480px at 50% -80px, #054ed2 0%, rgba(24, 43, 77, 0) 70%), var(--dk-bg); */
	border-top: 1px solid #24489c;
	padding: 30px 2%;
	box-sizing: border-box;
	background: #020818e0;
}

.footer-inner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	text-align: center;
}

#footer_credits {
	width: 100%;
	text-align: center;
	font-family: sansationbold,Arial,sans-serif;
	font-size: 0.85em;
	color: var(--dk-text-muted);
}

.footer-links {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 24px;
}

.footer-links a {
	color: var(--dk-text);
	font-family: sansationbold,Arial,sans-serif;
	font-size: 0.85em;
	text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--dk-accent-hover);
	text-decoration: underline;
}


/****************************************/
.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           *
*********************************/

/* Footer collé en bas même quand le contenu est court (page 404) */
body.page-error {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.page-error #page-wrap {
	flex: 1 0 auto;
}



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



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




@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és + aside */
	.grille-actu { grid-template-columns: 1fr 35vw; column-gap: 5px; }
	.box-semaine.hazard { width: 100%; margin: 4px 0;}
}

@media (max-width: 1200px) {
	/* header du site */
	#siteHeader .cadre {
		width: 100%;
	}
	/* marges noires */
	#page { margin: 5px auto; }
	article.preview {	margin-bottom: 5px; }
	/* footer */
	#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és + aside : empilement */
	.grille-actu { grid-template-columns: 1fr; }
	.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%;
		transform: none;
	}
	/* 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; }

	/* fiche article : colonne trop étroite pour justifier proprement (rivières de blanc) */
	.fiche-corps { padding: 20px 24px; }
	.fiche-film .fiche-header.film-hero { padding: 28px 20px; gap: 16px; }
	.film-hero-badges { margin-top: 16px; }
	.fiche-texte p:not(:has(img)),
	.fiche-texte ul,
	.fiche-texte ol,
	.fiche-texte h2,
	.fiche-texte h3 {
		text-align: left;
		hyphens: none;
	}
}


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

	/* fiche technique : pas assez de place pour 2 colonnes, on empile */
	.fiche-technique {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.fiche-technique table {
		grid-column: 1;
	}

	/* 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 article h3 {
		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;}

	/* 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;}
	/* fiche article */
	.fiche-corps { padding: 16px 16px; }
}

/* Retour visuel au clic sur une affiche/vignette, partout sur le site : voir
   triggerZoomTransition() dans fonctions.js. Calque plein écran + clone de
   l'élément cliqué (image seule, ou toute la carte selon le contexte) qui
   grossit jusqu'à couvrir tout l'écran puis s'estompe, pour donner
   l'impression d'entrer dans l'image pendant que la page suivante charge.
   Un seul passage (pas de boucle) : boucler en revenant à scale(1) se
   percevait comme un redémarrage visible, pas comme un zoom continu — un
   fondu de sortie en fin de course donne mieux l'impression d'un zoom
   "infini" qu'un retour en arrière. Position, taille, pivot, grossissement
   et fondu sont calculés et posés en style inline par triggerZoomTransition
   (pas ici) : le clone peut matcher des règles CSS très spécifiques de sa
   page d'origine (ex. "#homepage .box-semaine.actu article"), qui
   gagneraient sinon la guerre de spécificité sur ces propriétés — seul un
   style inline est garanti de primer dans tous les cas. Cette classe ne
   porte donc que des valeurs par défaut sans enjeu de spécificité.
   Le fond ne s'assombrit que très progressivement (+0.1 d'opacité par
   seconde, plein noir seulement au bout de 10s) : le site doit rester
   visible tant que le chargement est normal, et ne s'assombrir que si ça
   traîne — ce qui coïncide avec le setTimeout de sécurité dans fonctions.js
   (10s), seul filet en cas d'échec de navigation. z-index très haut pour
   passer au-dessus de tous les calques existants (recherche 8002,
   popups 9003...). */
.carousel-zoom-backdrop {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	z-index: 99998;
	pointer-events: none;
	transition: opacity 10s linear;
}

.carousel-zoom-backdrop.is-visible {
	opacity: 1;
}

.carousel-zoom-clone {
	border-radius: 8px;
	object-fit: cover;
}