/* ============================================================
   FLIXEO DESIGN SYSTEM v3.0 — "AlloCiné dark"
   Palette : noir profond + rouge cramoisi cinéma (#ef0e2d signature)
   Stratégie : forcer les couleurs partout, style premium AlloCiné
============================================================ */

/* =============================================================
   1) VARIABLES — palette AlloCiné dark
============================================================= */
:root {
	/* Backgrounds — noir profond cinéma */
	--fx-bg-deep:        #050505;
	--fx-bg:             #0d0d0f;
	--fx-surface:        #161618;
	--fx-surface-hover:  #1d1d20;
	--fx-surface-high:   #232328;
	--fx-overlay:        rgba(5, 5, 5, 0.92);

	/* Texte */
	--fx-text:           #ffffff;
	--fx-text-soft:      #c8c8cc;
	--fx-text-mute:      #8a8a92;
	--fx-text-dim:       #555560;
	--fx-text-on-red:    #ffffff;

	/* ROUGE ALLOCINÉ signature */
	--fx-red:            #ef0e2d;
	--fx-red-bright:     #ff3148;
	--fx-red-dim:        #c10b25;
	--fx-red-deep:       #7a0719;
	--fx-red-glow:       rgba(239, 14, 45, 0.22);
	--fx-red-tint:       rgba(239, 14, 45, 0.08);

	/* Or pour les notes (étoiles uniquement) */
	--fx-star:           #ffb800;
	--fx-star-dim:       #5b5b65;

	/* Bordures + ombres */
	--fx-border:         rgba(255, 255, 255, 0.07);
	--fx-border-strong:  rgba(255, 255, 255, 0.14);
	--fx-border-red:     rgba(239, 14, 45, 0.35);
	--fx-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.45);
	--fx-shadow-md:      0 6px 20px -4px rgba(0, 0, 0, 0.55);
	--fx-shadow-lg:      0 20px 50px -12px rgba(0, 0, 0, 0.75);
	--fx-shadow-red:     0 8px 24px -8px var(--fx-red-glow);

	/* Rayons */
	--fx-radius-xs:      4px;
	--fx-radius-sm:      6px;
	--fx-radius:         10px;
	--fx-radius-lg:      14px;
	--fx-radius-xl:      20px;
	--fx-radius-full:    9999px;

	/* Typo — AlloCiné moderne */
	--fx-font-display:   "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif;
	--fx-font-body:      "Inter", "Source Sans Pro", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--fx-font-serif:     "Playfair Display", Georgia, serif;

	/* Easing & duration */
	--fx-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--fx-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
	--fx-fast:           150ms;
	--fx-base:           240ms;
	--fx-slow:           420ms;

	/* Layout */
	--fx-max-w:          1280px;
	--fx-gutter:         clamp(1rem, 3vw, 2rem);
	--fx-toolbar-h:      64px;
}

/* =============================================================
   1bis) REMAP des variables du thème movie-and-play
        Le thème a été conçu pour un fond clair (--bg: #fff,
        --couleur-blanc: #fff, --text: #111). On remap chaque
        variable vers nos couleurs dark AlloCiné pour que tous
        les composants du thème suivent automatiquement.
============================================================= */
body.flixeo-themed {
	/* Couleurs principales remap */
	--couleur-blanc:           var(--fx-surface);    /* "blanc" = surface dark */
	--couleur-noir:            var(--fx-text);       /* "noir" = blanc texte */
	--couleur-titres:          var(--fx-text);
	--couleur-textes:          var(--fx-text-soft);
	--couleur-rouge:           var(--fx-red);
	--couleur-gris:            var(--fx-text-mute);

	/* Backgrounds */
	--couleur-fond:            var(--fx-bg);
	--couleur-fond-clair:      var(--fx-surface);
	--bg:                      var(--fx-bg);
	--bg-soft:                 var(--fx-surface);
	--bg-muted:                var(--fx-surface-hover);
	--bg-dark:                 var(--fx-bg-deep);
	--bg-darker:               var(--fx-bg-deep);

	/* Brand rouge */
	--primary:                 var(--fx-red);
	--primary-hover:           var(--fx-red-bright);
	--primary-soft:            var(--fx-red-tint);

	/* Glass */
	--glass-bg:                rgba(255,255,255,0.05);
	--glass-bg-strong:         rgba(255,255,255,0.08);

	/* Textes */
	--text:                    var(--fx-text);
	--text-soft:               var(--fx-text-soft);
	--text-muted:              var(--fx-text-mute);
	--text-invert:             var(--fx-bg-deep);
	--text-on-dark:            var(--fx-text);
	--text-on-dark-soft:       var(--fx-text-soft);
	--text-on-dark-muted:      var(--fx-text-mute);
	--texte-principal:         var(--fx-text);
	--texte-secondaire:        var(--fx-text-soft);

	/* Bordures */
	--border:                  var(--fx-border);
	--border-strong:           var(--fx-border-strong);
	--border-soft:             var(--fx-border);
	--border-light:            var(--fx-border-strong);
	--border-light-strong:     var(--fx-border-strong);
	--border-dark:             var(--fx-border-strong);

	/* Ombres */
	--ombre-soft:              var(--fx-shadow-sm);
	--ombre-medium:            var(--fx-shadow-md);
	--shadow-xs:               var(--fx-shadow-sm);
	--shadow-sm:               var(--fx-shadow-sm);
	--shadow:                  var(--fx-shadow-md);
	--shadow-lg:               var(--fx-shadow-lg);

	/* Overlays */
	--overlay-dark:            rgba(5,5,5,0.55);
	--overlay-darker:          rgba(5,5,5,0.72);
	--overlay-deep:            rgba(5,5,5,0.88);
	--overlay-light:           rgba(255,255,255,0.04);
	--glass-border:            var(--fx-border-strong);
	--glass-border-strong:     var(--fx-border-strong);

	/* Interaction */
	--ring:                    var(--fx-red-glow);
	--ring-strong:             rgba(239,14,45,0.55);

	/* Statut (gardé en couleurs métier) */
	--success:                 #27c084;
	--success-soft:            rgba(39,192,132,0.16);
	--warning:                 #f39c12;
	--warning-soft:            rgba(243,156,18,0.16);
	--info:                    #3a93d6;
	--info-soft:               rgba(58,147,214,0.16);
	--danger:                  var(--fx-red);
	--danger-soft:             var(--fx-red-tint);

	/* Étoiles */
	--wpz-star:                var(--fx-star);
	--wpz-star-empty:          var(--fx-text-dim);

	/* Carousels arrows */
	--wpz-arrow-color:         var(--fx-red-bright);
	--wpz-arrow-bg:            var(--fx-red-tint);
	--wpz-arrow-bg-hover:      var(--fx-red-glow);

	/* Badges / Chips */
	--badge-bg:                rgba(255,255,255,0.08);
	--badge-br:                var(--fx-border-strong);
	--badge-tx:                var(--fx-text);
	--chip-bg:                 var(--fx-surface);
	--chip-br:                 var(--fx-border-strong);
	--chip-tx:                 var(--fx-text);
}

/* =============================================================
   2) RESET + BASE — couleurs forcées
============================================================= */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	background: var(--fx-bg-deep);
	color-scheme: dark;
}

body.flixeo-themed {
	background: var(--fx-bg);
	color: var(--fx-text);
	font-family: var(--fx-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	line-height: 1.6;
}

body.flixeo-themed,
body.flixeo-themed p,
body.flixeo-themed span,
body.flixeo-themed li,
body.flixeo-themed td,
body.flixeo-themed th,
body.flixeo-themed dd,
body.flixeo-themed dt,
body.flixeo-themed figcaption,
body.flixeo-themed label,
body.flixeo-themed small,
body.flixeo-themed div {
	color: var(--fx-text);
}

body.flixeo-themed h1,
body.flixeo-themed h2,
body.flixeo-themed h3,
body.flixeo-themed h4,
body.flixeo-themed h5,
body.flixeo-themed h6 {
	color: var(--fx-text);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

body.flixeo-themed h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
body.flixeo-themed h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
body.flixeo-themed h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }

body.flixeo-themed strong,
body.flixeo-themed b {
	color: var(--fx-text);
	font-weight: 700;
}

body.flixeo-themed em,
body.flixeo-themed i {
	color: var(--fx-text-soft);
}

body.flixeo-themed code,
body.flixeo-themed kbd {
	background: var(--fx-surface);
	color: var(--fx-red-bright);
	padding: 0.15em 0.45em;
	border-radius: var(--fx-radius-xs);
	font-size: 0.92em;
	border: 1px solid var(--fx-border);
}

body.flixeo-themed hr {
	border: 0;
	border-top: 1px solid var(--fx-border);
	margin: 2rem 0;
}

/* =============================================================
   3) LIENS
============================================================= */
body.flixeo-themed a {
	color: var(--fx-red-bright);
	text-decoration: none;
	transition: color var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed a:hover {
	color: var(--fx-red);
}

/* Liens dans le contenu : soulignement progressif */
body.flixeo-themed .entry-content a:not(.wp-block-button__link):not(.flixeo-btn):not(.button):not(.flixeo-toolbar__chip):not(.flixeo-card__link):not(.flixeo-actor-card__link),
body.flixeo-themed .post-content a:not(.wp-block-button__link):not(.flixeo-btn):not(.flixeo-card__link) {
	background: linear-gradient(var(--fx-red), var(--fx-red)) no-repeat 0 100% / 0 1px;
	transition: background-size var(--fx-base) var(--fx-ease-out),
	            color var(--fx-fast) var(--fx-ease-out);
	padding-bottom: 1px;
}
body.flixeo-themed .entry-content a:not(.wp-block-button__link):not(.flixeo-btn):not(.flixeo-card__link):hover,
body.flixeo-themed .post-content a:not(.wp-block-button__link):not(.flixeo-btn):not(.flixeo-card__link):hover {
	background-size: 100% 1px;
}

/* =============================================================
   4) LISTES
============================================================= */
body.flixeo-themed ul,
body.flixeo-themed ol {
	padding-left: 1.4em;
	margin: 0 0 1em;
}
body.flixeo-themed ul li,
body.flixeo-themed ol li {
	margin-bottom: 0.4em;
	color: var(--fx-text);
}
body.flixeo-themed ul li::marker { color: var(--fx-red); }
body.flixeo-themed ol li::marker { color: var(--fx-red); font-weight: 700; }

body.flixeo-themed ul.no-bullets,
body.flixeo-themed ul.menu,
body.flixeo-themed ul.nav,
body.flixeo-themed ul.wp-block-list--no-bullets,
body.flixeo-themed .wp-block-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* =============================================================
   5) BOUTONS
============================================================= */
body.flixeo-themed button {
	font-family: var(--fx-font-body);
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--fx-text);
	transition: all var(--fx-fast) var(--fx-ease-out);
}

/* Bouton primaire — rouge AlloCiné */
body.flixeo-themed .flixeo-btn,
body.flixeo-themed .wpz-btn--primary,
body.flixeo-themed .wp-block-button__link,
body.flixeo-themed .button,
body.flixeo-themed button[type="submit"]:not(.wpz-search__clear) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: var(--fx-red);
	color: var(--fx-text-on-red) !important;
	font-family: var(--fx-font-body);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.84rem;
	border: 0;
	border-radius: var(--fx-radius-sm);
	padding: 0.85rem 1.6rem;
	cursor: pointer;
	box-shadow: var(--fx-shadow-sm);
	transition: background var(--fx-fast) var(--fx-ease-out),
	            transform var(--fx-fast) var(--fx-ease-out),
	            box-shadow var(--fx-fast) var(--fx-ease-out);
	text-decoration: none;
	min-height: 44px;
}
body.flixeo-themed .flixeo-btn:hover,
body.flixeo-themed .wpz-btn--primary:hover,
body.flixeo-themed .wp-block-button__link:hover,
body.flixeo-themed .button:hover {
	background: var(--fx-red-bright);
	transform: translateY(-1px);
	box-shadow: var(--fx-shadow-red);
	color: var(--fx-text-on-red) !important;
}
body.flixeo-themed .flixeo-btn:active,
body.flixeo-themed .wpz-btn--primary:active,
body.flixeo-themed .wp-block-button__link:active,
body.flixeo-themed .button:active {
	transform: translateY(0);
	background: var(--fx-red-dim);
}

/* Bouton secondaire (ghost) */
body.flixeo-themed .flixeo-btn--ghost,
body.flixeo-themed .wpz-btn--ghost {
	background: transparent;
	color: var(--fx-text);
	border: 1px solid var(--fx-border-strong);
	box-shadow: none;
}
body.flixeo-themed .flixeo-btn--ghost:hover,
body.flixeo-themed .wpz-btn--ghost:hover {
	background: var(--fx-surface);
	border-color: var(--fx-red);
	color: var(--fx-red-bright);
}

/* Bouton icône (loupe, fermer, etc.) */
body.flixeo-themed .flixeo-btn--icon {
	background: var(--fx-surface);
	color: var(--fx-text-soft);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-full);
	padding: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
body.flixeo-themed .flixeo-btn--icon:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-red-bright);
	border-color: var(--fx-border-red);
}

/* =============================================================
   6) INPUTS
============================================================= */
body.flixeo-themed input,
body.flixeo-themed textarea,
body.flixeo-themed select {
	font-family: var(--fx-font-body);
	background: var(--fx-surface);
	color: var(--fx-text);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	padding: 0.7rem 1rem;
	font-size: 1rem;
	transition: border-color var(--fx-fast) var(--fx-ease-out),
	            box-shadow var(--fx-fast) var(--fx-ease-out),
	            background var(--fx-fast) var(--fx-ease-out);
	min-height: 44px;
	width: 100%;
	max-width: 100%;
}

body.flixeo-themed input::placeholder,
body.flixeo-themed textarea::placeholder {
	color: var(--fx-text-dim);
	opacity: 1;
}

body.flixeo-themed input:focus,
body.flixeo-themed textarea:focus,
body.flixeo-themed select:focus {
	outline: none;
	border-color: var(--fx-red);
	box-shadow: 0 0 0 3px var(--fx-red-glow);
	background: var(--fx-surface-hover);
}

body.flixeo-themed input[type="checkbox"],
body.flixeo-themed input[type="radio"] {
	width: auto;
	min-height: 0;
	accent-color: var(--fx-red);
	cursor: pointer;
	margin-right: 0.5em;
}

body.flixeo-themed select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ef0e2d' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

body.flixeo-themed input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}

/* =============================================================
   7) FOCUS RING + SÉLECTION
============================================================= */
body.flixeo-themed *:focus-visible {
	outline: 2px solid var(--fx-red-bright);
	outline-offset: 3px;
	border-radius: var(--fx-radius-xs);
}
::selection {
	background: var(--fx-red);
	color: var(--fx-text-on-red);
}

/* =============================================================
   8) SCROLLBAR
============================================================= */
body.flixeo-themed ::-webkit-scrollbar { width: 10px; height: 10px; }
body.flixeo-themed ::-webkit-scrollbar-track { background: var(--fx-bg-deep); }
body.flixeo-themed ::-webkit-scrollbar-thumb {
	background: var(--fx-surface-high);
	border-radius: 10px;
	border: 2px solid var(--fx-bg-deep);
}
body.flixeo-themed ::-webkit-scrollbar-thumb:hover { background: var(--fx-red-dim); }

/* =============================================================
   9) BREADCRUMBS — pleine largeur sous le header, aligné container
============================================================= */
.breadcrumb-wrap {
	background: var(--fx-bg-deep);
	border-bottom: 1px solid var(--fx-border);
	width: 100%;
	padding: 0;
	margin: 0;
}
.breadcrumb {
	max-width: var(--wpz-container, 1200px); /* ✅ même largeur que .header-inner */
	margin: 0 auto;
	padding: 0.7rem var(--fx-gutter);
	box-sizing: border-box;                  /* ✅ padding compris → alignement parfait avec le logo */
	font-family: var(--fx-font-body);
	font-size: 0.84rem;
	line-height: 1.6;
}
.breadcrumb-list,
.flixeo-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15em;
	padding: 0;
	margin: 0;
	list-style: none;
	color: var(--fx-text-mute);
}
.breadcrumb-list .bc-item,
.flixeo-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.breadcrumb-list .bc-link,
.flixeo-breadcrumbs a,
.breadcrumb a {
	color: var(--fx-text-soft) !important;
	text-decoration: none !important;
	background: none !important;
	transition: color var(--fx-fast) var(--fx-ease-out);
	padding: 0.2em 0;
}
.breadcrumb-list .bc-link:hover,
.flixeo-breadcrumbs a:hover,
.breadcrumb a:hover {
	color: var(--fx-red-bright) !important;
}
.breadcrumb-list .bc-current,
.flixeo-breadcrumbs [aria-current="page"] {
	color: var(--fx-text);
	font-weight: 600;
}
.breadcrumb-list .bc-sep,
.flixeo-breadcrumbs .sep {
	margin: 0 0.5em;
	color: var(--fx-text-dim);
	font-weight: 400;
}

/* Mobile : breadcrumb scrollable horizontalement si très long */
@media (max-width: 600px) {
	.breadcrumb {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.breadcrumb::-webkit-scrollbar { display: none; }
	.breadcrumb-list {
		flex-wrap: nowrap;
		min-width: max-content;
	}
}

/* Si la toolbar est juste sous le breadcrumb, pas de double border */
.breadcrumb-wrap + .flixeo-toolbar { border-top: 0; }

/* =============================================================
   9bis) HEADER NAV & SUB-MENU — pas de puces sur les listes
============================================================= */
#main-nav .menu,
#main-nav .menu li,
#main-nav .menu ul,
#main-nav .sub-menu,
#main-nav .sub-menu li,
.main-nav ul,
.main-nav li,
.site-header nav ul,
.site-header nav li,
nav.main-nav ul,
nav.main-nav ul ul,
.wp-block-navigation ul,
.wp-block-navigation li,
.wp-block-navigation__container,
.wp-block-navigation-item {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}
#main-nav .menu li::marker,
#main-nav .sub-menu li::marker,
.main-nav li::marker,
.site-header nav li::marker { content: '' !important; display: none; }

/* Sous-menus desktop : style premium */
@media (min-width: 1025px) {
	#main-nav .sub-menu,
	#main-nav .menu-item-has-children > ul {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--fx-bg-deep);
		border: 1px solid var(--fx-border-strong);
		border-radius: var(--fx-radius-sm);
		box-shadow: var(--fx-shadow-lg);
		padding: 0.4rem;
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity var(--fx-base) var(--fx-ease-out), transform var(--fx-base) var(--fx-ease-out);
		z-index: 200;
		height: auto !important;
		overflow: visible !important;
	}
	#main-nav .menu-item-has-children:hover > .sub-menu,
	#main-nav .menu-item-has-children:hover > ul,
	#main-nav .menu-item-has-children:focus-within > .sub-menu,
	#main-nav .menu-item-has-children:focus-within > ul {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	#main-nav .sub-menu li,
	#main-nav .menu-item-has-children > ul > li { margin: 0; padding: 0; }
	#main-nav .sub-menu li a,
	#main-nav .menu-item-has-children > ul > li > a {
		display: block;
		padding: 0.5rem 0.85rem;
		color: var(--fx-text-soft) !important;
		text-decoration: none;
		border-radius: var(--fx-radius-xs);
		font-size: 0.9rem;
		font-weight: 500;
		background: transparent !important;
		border: 0 !important;
		text-transform: none;
		letter-spacing: 0;
	}
	#main-nav .sub-menu li a:hover,
	#main-nav .menu-item-has-children > ul > li > a:hover {
		background: var(--fx-surface) !important;
		color: var(--fx-red-bright) !important;
	}
	#main-nav .sub-menu li.current-menu-item a,
	#main-nav .sub-menu li.current_page_item a {
		background: var(--fx-red-tint) !important;
		color: var(--fx-red-bright) !important;
	}
}

/* =============================================================
   9ter) BOUTON COOKIE MINI — z-index sous les toolbars
       Position d'origine (bas-gauche collé), juste z-index plus faible.
============================================================= */
.wpz-ck-mini,
.wpz-ck-mini-btn,
.wpz-cookie-mini,
#wpz-cookie-mini,
[data-wpz-ck-open] {
	z-index: 60 !important;
}

/* =============================================================
  10) TOOLBAR ARCHIVE — style premium AlloCiné dark, full-bleed
       avec contenu intérieur aligné au container max-width.
============================================================= */
.flixeo-toolbar {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(13, 13, 15, 0.92);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--fx-border);
	padding: 0;
	margin: 0;
	width: 100%;
	transition: box-shadow var(--fx-fast) var(--fx-ease-out);
}
.flixeo-toolbar.is-stuck {
	box-shadow: var(--fx-shadow-md);
	border-bottom-color: var(--fx-border-strong);
}
/* Wrapper interne : limite la largeur au container max-w, ALIGNÉ avec le header */
.flixeo-toolbar__inner,
.flixeo-toolbar__chips {
	max-width: var(--fx-max-w);
	margin: 0 auto;
	padding-left: var(--fx-gutter);
	padding-right: var(--fx-gutter);
	width: 100%;
}
.flixeo-toolbar__inner {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	flex-wrap: nowrap;
	padding-top: 0.7rem;
	padding-bottom: 0.4rem;
}
.flixeo-toolbar__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	padding: 0 0.8rem 0 1rem;
	height: 44px;
	transition: border-color var(--fx-fast) var(--fx-ease-out),
	            box-shadow var(--fx-fast) var(--fx-ease-out);
	min-width: 0;
}
.flixeo-toolbar__search:focus-within {
	border-color: var(--fx-red);
	box-shadow: 0 0 0 3px var(--fx-red-glow);
}
.flixeo-toolbar__search svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--fx-text-mute);
}
.flixeo-toolbar__search input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--fx-text);
	font-size: 0.95rem;
	height: 100%;
	padding: 0;
	min-height: 0;
	min-width: 0;
}
.flixeo-toolbar__search input:focus {
	outline: none;
	box-shadow: none;
	background: transparent;
}
.flixeo-toolbar__search-clear {
	background: transparent;
	color: var(--fx-text-mute);
	width: 26px;
	height: 26px;
	min-height: 0;
	border-radius: var(--fx-radius-full);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.flixeo-toolbar__search-clear:hover { color: var(--fx-text); background: var(--fx-surface-hover); }

.flixeo-toolbar__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--fx-surface);
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	padding: 0 1.1rem;
	height: 44px;
	font-family: var(--fx-font-body);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
	text-transform: none;
	box-shadow: none;
	min-height: 0;
}
.flixeo-toolbar__btn:hover {
	background: var(--fx-surface-hover);
	border-color: var(--fx-red);
	color: var(--fx-red-bright) !important;
	transform: none;
}
.flixeo-toolbar__btn--primary {
	background: var(--fx-red);
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red);
}
.flixeo-toolbar__btn--primary:hover {
	background: var(--fx-red-bright);
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red-bright);
	box-shadow: var(--fx-shadow-red);
}
.flixeo-toolbar__btn .count {
	background: rgba(0,0,0,0.30);
	color: inherit;
	font-size: 0.74rem;
	padding: 0.1em 0.5em;
	border-radius: var(--fx-radius-full);
	font-weight: 700;
}

.flixeo-toolbar__chips {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-top: 0;
	padding-bottom: 0.55rem;
}
.flixeo-toolbar__chips::-webkit-scrollbar { display: none; }
.flixeo-toolbar__chip {
	flex-shrink: 0;
	background: var(--fx-surface);
	color: var(--fx-text-soft) !important;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-full);
	padding: 0.4rem 0.95rem;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none !important;
	background-image: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
	white-space: nowrap;
}
.flixeo-toolbar__chip:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-text) !important;
	border-color: var(--fx-border-red);
}
.flixeo-toolbar__chip.is-active {
	background: var(--fx-red);
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red);
}

.flixeo-toolbar__search-mobile {
	display: none;
}

/* =============================================================
   📱 MOBILE — Toolbar fixed bottom (bottom-navigation pattern)
   La toolbar quitte la position sticky-top et passe en bas
   d'écran, fixe, opaque, avec safe-area iPhone et chips
   scrollables au-dessus des boutons d'action.
============================================================= */
@media (max-width: 720px) {
	.flixeo-toolbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		z-index: 90;
		margin: 0;
		padding: 0.55rem var(--fx-gutter);
		padding-bottom: calc(0.55rem + env(safe-area-inset-bottom));
		background: rgba(8, 9, 12, 0.96);
		backdrop-filter: saturate(180%) blur(18px);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		border-top: 1px solid var(--fx-border-strong);
		border-bottom: 0;
		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
		display: flex;
		flex-direction: column;
	}
	/* 🚫 Sur mobile, on masque les chips "recherche rapide" (encombrent la bottom bar) */
	.flixeo-toolbar__chips {
		display: none !important;
	}
	.flixeo-toolbar__inner {
		gap: 0.55rem;
		flex-wrap: nowrap;
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Champ texte desktop caché → bouton loupe ouvre le modal fullscreen */
	.flixeo-toolbar__search { display: none !important; }
	.flixeo-toolbar__search-mobile {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 1;
		gap: 0.55em;
		background: var(--fx-surface);
		color: var(--fx-text) !important;
		border: 1px solid var(--fx-border-strong);
		border-radius: var(--fx-radius-sm);
		width: auto;
		height: 48px;
		padding: 0 1rem;
		min-height: 0;
		cursor: pointer;
		font-family: var(--fx-font-body);
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		box-shadow: none;
		text-transform: none;
		transform: none;
	}
	.flixeo-toolbar__search-mobile::after {
		content: 'Rechercher';
		color: var(--fx-text-soft);
		font-weight: 500;
	}
	.flixeo-toolbar__search-mobile:hover {
		color: var(--fx-red-bright) !important;
		border-color: var(--fx-border-red);
		transform: none;
		filter: none;
		box-shadow: none;
	}
	.flixeo-toolbar__btn {
		flex: 1;
		height: 48px;
		padding: 0 1rem;
		font-size: 0.9rem;
		justify-content: center;
		border-radius: var(--fx-radius-sm);
	}
	.flixeo-toolbar__btn .label-long {
		display: inline;
	}

	/* Padding-bottom du body pour ne pas masquer le contenu derrière la toolbar fixe.
	   Hauteur réservée : chips (~36) + inner (~48) + padding (~22) + safe-area */
	body.flixeo-themed.flixeo-archive-films,
	body.flixeo-themed.flixeo-archive-acteurs,
	body.flixeo-themed.archive,
	body.flixeo-themed.page-template-liste-acteurs,
	body.flixeo-themed.page-template-page-liste-quiz,
	body.flixeo-themed.page-template-page-liste-quiz-php,
	body.flixeo-themed.page-template-recherche-par-film,
	body.flixeo-themed.page-template-recherche-par-film-php,
	body.flixeo-themed.search,
	body.flixeo-themed.blog,
	body.flixeo-themed.category,
	body.flixeo-themed.tag,
	body.flixeo-themed.tax-genre_film,
	body.flixeo-themed.tax-plateforme,
	body.flixeo-themed.tax-realisateur {
		padding-bottom: calc(118px + env(safe-area-inset-bottom));
	}

	/* Quand le modal recherche fullscreen est ouvert, on cache la toolbar fixée */
	body.flixeo-search-open .flixeo-toolbar {
		opacity: 0;
		pointer-events: none;
	}

	/* Quand le panel filtres offcanvas est ouvert, on cache aussi la toolbar */
	body.wpz-no-scroll .flixeo-toolbar {
		opacity: 0;
		pointer-events: none;
	}

	/* Ombre plus marquée si on scroll sous la toolbar */
	.flixeo-toolbar.is-stuck {
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
	}
}

/* Très petit écran : réduit les paddings et heights */
@media (max-width: 360px) {
	.flixeo-toolbar {
		padding: 0.45rem 0.7rem;
		padding-bottom: calc(0.45rem + env(safe-area-inset-bottom));
	}
	.flixeo-toolbar__inner { gap: 0.45rem; }
	.flixeo-toolbar__btn,
	.flixeo-toolbar__search-mobile {
		height: 44px;
		font-size: 0.82rem;
		padding: 0 0.8rem;
	}
	.flixeo-toolbar__search-mobile::after {
		display: none; /* juste l'icône loupe sur très petit écran */
	}
}

/* =============================================================
  11) RECHERCHE FULLSCREEN MOBILE
============================================================= */
.flixeo-search-modal {
	position: fixed;
	inset: 0;
	background: var(--fx-bg);
	z-index: 200;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform var(--fx-base) var(--fx-ease-out);
	overscroll-behavior: contain;
}
.flixeo-search-modal.is-open { transform: translateY(0); }
.flixeo-search-modal__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg);
}
.flixeo-search-modal__back {
	background: transparent;
	color: var(--fx-text);
	width: 44px;
	height: 44px;
	border-radius: var(--fx-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	min-height: 0;
}
.flixeo-search-modal__back:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-red-bright);
}
.flixeo-search-modal__input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	padding: 0 1rem;
	height: 44px;
}
.flixeo-search-modal__input-wrap:focus-within { border-color: var(--fx-red); }
.flixeo-search-modal__input-wrap svg { color: var(--fx-text-mute); flex-shrink: 0; }
.flixeo-search-modal__input-wrap input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--fx-text);
	height: 100%;
	padding: 0;
	font-size: 1rem;
	min-height: 0;
	min-width: 0;
}
.flixeo-search-modal__input-wrap input:focus { outline: none; box-shadow: none; background: transparent; }
.flixeo-search-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}
.flixeo-search-modal__hint {
	color: var(--fx-text-mute);
	font-size: 0.92rem;
	padding: 1rem 0;
	text-align: center;
}
.flixeo-search-modal__results { display: flex; flex-direction: column; gap: 0.4rem; }
.flixeo-search-modal__result {
	display: flex;
	gap: 0.8rem;
	padding: 0.6rem;
	border-radius: var(--fx-radius-sm);
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	color: var(--fx-text) !important;
	text-decoration: none !important;
	background-image: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.flixeo-search-modal__result:hover {
	background: var(--fx-surface-hover);
	border-color: var(--fx-border-red);
}
.flixeo-search-modal__result img {
	width: 48px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--fx-radius-xs);
	flex-shrink: 0;
	background: var(--fx-surface-high);
}
.flixeo-search-modal__result-meta { flex: 1; min-width: 0; }
.flixeo-search-modal__result-title {
	color: var(--fx-text);
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.flixeo-search-modal__result-sub {
	color: var(--fx-text-mute);
	font-size: 0.82rem;
	margin-top: 0.15em;
}

body.flixeo-search-open { overflow: hidden; touch-action: none; }

@media (min-width: 721px) {
	.flixeo-search-modal {
		inset: 0;
		background: var(--fx-overlay);
		backdrop-filter: blur(8px);
	}
	.flixeo-search-modal__bar {
		max-width: 720px;
		margin: 5vh auto 0;
		border-radius: var(--fx-radius-lg) var(--fx-radius-lg) 0 0;
		border: 1px solid var(--fx-border-strong);
		border-bottom: 0;
	}
	.flixeo-search-modal__body {
		max-width: 720px;
		margin: 0 auto;
		background: var(--fx-bg);
		border-radius: 0 0 var(--fx-radius-lg) var(--fx-radius-lg);
		border: 1px solid var(--fx-border-strong);
		border-top: 0;
	}
}

/* =============================================================
  12) FILTRES OFFCANVAS — restyle AlloCiné
============================================================= */
.wpz-multi { margin-bottom: 0.6rem; }
.wpz-multi__label {
	font-family: var(--fx-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--fx-red-bright);
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}
.wpz-multi__control {
	background: var(--fx-surface);
	color: var(--fx-text);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	padding: 0.7rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: border-color var(--fx-fast) var(--fx-ease-out);
}
.wpz-multi__control:hover { border-color: var(--fx-red); }
.wpz-multi__placeholder { color: var(--fx-text-mute); }
.wpz-multi__caret { color: var(--fx-red-bright); }

.wpz-multi__dropdown {
	background: var(--fx-surface);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	margin-top: 0.4rem;
	overflow: hidden;
}
.wpz-multi__actions {
	display: flex;
	gap: 0.3rem;
	padding: 0.6rem;
	border-bottom: 1px solid var(--fx-border);
}
.wpz-multi__actions button {
	background: var(--fx-surface-hover);
	color: var(--fx-text-soft);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-xs);
	padding: 0.4rem 0.7rem;
	font-size: 0.78rem;
	font-family: var(--fx-font-body);
	cursor: pointer;
	flex: 1;
	min-height: 0;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
.wpz-multi__actions button:hover {
	background: var(--fx-surface-high);
	color: var(--fx-red-bright);
	border-color: var(--fx-border-red);
	box-shadow: none;
	transform: none;
}
.wpz-multi__search { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--fx-border); }
.wpz-multi__search input {
	border: 1px solid var(--fx-border);
	background: var(--fx-bg);
	border-radius: var(--fx-radius-xs);
	padding: 0.45rem 0.7rem;
	min-height: 0;
	height: 36px;
	font-size: 0.85rem;
}
.wpz-multi__options {
	max-height: 320px;
	overflow-y: auto;
	padding: 0.3rem;
}
.wpz-multi__opt {
	display: flex !important;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.7rem !important;
	border-radius: var(--fx-radius-xs);
	cursor: pointer;
	color: var(--fx-text-soft);
	transition: background var(--fx-fast) var(--fx-ease-out);
}
.wpz-multi__opt:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-text);
}
.wpz-multi__opt input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--fx-red);
	flex-shrink: 0;
}
.wpz-multi__opt span { color: inherit; font-size: 0.92rem; }

/* Skeleton shimmer pour filtres lazy */
.wpz-multi__options[data-filter-state="pending"]::before {
	content: '';
	display: block;
	height: 90px;
	background: linear-gradient(110deg,
		var(--fx-surface) 25%,
		var(--fx-surface-high) 50%,
		var(--fx-surface) 75%);
	background-size: 200% 100%;
	animation: fx-shimmer 1.4s linear infinite;
	border-radius: var(--fx-radius-xs);
}
.wpz-multi__options[data-filter-state="loaded"]::before,
.wpz-multi__options[data-filter-state="empty"]::before { display: none; }
@keyframes fx-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =============================================================
  12bis) 🎯 PATTERN UNIFIÉ : SIDEBAR DROITE (réutilisable)
  ─────────────────────────────────────────────────────────────
  Tous les panels qui s'ouvrent depuis la droite sur desktop
  utilisent le MÊME comportement :
   - Mobile : plein écran (slide depuis la droite)
   - Desktop : sidebar 420px fixée à droite + backdrop dim flou
  ─────────────────────────────────────────────────────────────
  Pour ajouter un futur panel : ajoute la classe `.fx-sidebar`
  sur ton conteneur. Tout le styling sidebar est hérité.
============================================================= */

/* Largeur sidebar unifiée — utiliser cette variable pour tout panel droit */
:root { --fx-sidebar-width: 420px; }

/* Classe utilitaire .fx-sidebar — futur-proof */
.fx-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: 100vw;  /* mobile : plein écran */
	height: 100vh;
	height: 100dvh;
	background: var(--fx-bg-deep);
	border-left: 1px solid var(--fx-border-strong);
	box-shadow: -24px 0 50px -12px rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.32s var(--fx-ease-out);
}
.fx-sidebar.is-open { transform: translateX(0); }
.fx-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5, 5, 5, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s var(--fx-ease-out);
}
.fx-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }

@media (min-width: 1025px) {
	.fx-sidebar {
		width: min(var(--fx-sidebar-width), 90vw);
		max-width: var(--fx-sidebar-width);
	}
}

/* ─────────────────────────────────────────────────────────────
   Applications concrètes du pattern sur les panels existants
───────────────────────────────────────────────────────────── */

/* === NOTIF CANVAS : sidebar droite sur desktop === */
@media (min-width: 1025px) {
	.flixeo-notif-canvas {
		width: min(var(--fx-sidebar-width), 90vw) !important;
		max-width: var(--fx-sidebar-width) !important;
	}
}

/* =============================================================
  13) PANEL FILTRE OFFCANVAS — sidebar 420px desktop, fullscreen mobile
       Le template inline-CSS du thème met var(--couleur-blanc) partout,
       d'où le "blanc sur blanc" avant nos overrides. On force tout en
       dark cohérent AlloCiné avec !important pour battre l'inline.
============================================================= */
.wpz-filter-panel {
	background: var(--fx-bg-deep) !important;
	color: var(--fx-text) !important;
	border-left: 1px solid var(--fx-border-strong) !important;
}

/* === DESKTOP : sidebar 420px à droite (largeur unifiée) === */
@media (min-width: 1025px) {
	.wpz-filter-panel {
		width: min(var(--fx-sidebar-width), 90vw) !important;
		max-width: var(--fx-sidebar-width) !important;
		left: auto !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		height: 100vh !important;
		height: 100dvh !important;
		box-shadow: -24px 0 50px -12px rgba(0, 0, 0, 0.7) !important;
		border-left: 1px solid var(--fx-border-strong) !important;
	}
	/* Overlay sombre + flou unifié */
	.wpz-filter-overlay {
		background: rgba(5, 5, 5, 0.45) !important;
		backdrop-filter: blur(3px) !important;
		-webkit-backdrop-filter: blur(3px) !important;
	}
}

/* === Animations slide propre === */
.wpz-filter-panel {
	transition: transform 0.32s var(--fx-ease-out) !important;
}
.wpz-filter-panel * { color: inherit; }
.wpz-filter-overlay {
	background: rgba(5, 5, 5, 0.72) !important;
	backdrop-filter: blur(4px);
}

/* Header sticky du panel */
.wpz-filter-panel__head {
	background: var(--fx-bg) !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
.wpz-filter-panel__title {
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body);
	font-weight: 800 !important;
	font-size: 1rem !important;
	letter-spacing: 0.02em;
}
.wpz-filter-panel__close {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-full) !important;
	width: 36px;
	height: 36px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	min-height: 0;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transform: none;
}
.wpz-filter-panel__close:hover {
	background: var(--fx-surface-hover) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-border-red) !important;
	transform: none;
}

/* Footer (bouton appliquer) */
.wpz-filter-panel__foot {
	background: var(--fx-bg) !important;
	border-top: 1px solid var(--fx-border) !important;
}

/* Body */
.wpz-filter-panel__body {
	background: var(--fx-bg-deep) !important;
	color: var(--fx-text) !important;
}

/* Recherche sticky dans le panel */
.wpz-panel-search-sticky {
	background: var(--fx-bg-deep) !important;
	border-bottom: 1px solid var(--fx-border) !important;
}

/* Bande "X résultats" */
.wpz-panel-meta {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	color: var(--fx-text-soft) !important;
	border-radius: var(--fx-radius-sm) !important;
}
.wpz-panel-meta strong,
.wpz-panel-meta b { color: var(--fx-text) !important; }

/* TOUS les inputs et selects DANS le panel */
.wpz-filter-panel input[type="text"],
.wpz-filter-panel input[type="search"],
.wpz-filter-panel input[type="number"],
.wpz-filter-panel select,
.wpz-filter-grid input[type="text"],
.wpz-filter-grid select {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
}
.wpz-filter-panel input::placeholder,
.wpz-filter-grid input::placeholder {
	color: var(--fx-text-dim) !important;
	opacity: 1 !important;
}
.wpz-filter-panel input:focus,
.wpz-filter-panel select:focus,
.wpz-filter-grid input:focus,
.wpz-filter-grid select:focus {
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 3px var(--fx-red-glow) !important;
	background: var(--fx-surface-hover) !important;
}

/* Bouton "effacer" dans le champ recherche du panel */
.wpz-clearbtn {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text-soft) !important;
}
.wpz-clearbtn:hover {
	background: var(--fx-surface-hover) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-border-red) !important;
}

/* Multi-select control (chips affichés quand sélection) */
.wpz-filter-panel .wpz-multi__control {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
}
.wpz-filter-panel .wpz-multi__control:hover { border-color: var(--fx-red) !important; }
.wpz-filter-panel .wpz-multi__placeholder { color: var(--fx-text-mute) !important; opacity: 1 !important; font-weight: 500 !important; }
.wpz-filter-panel .wpz-multi__caret { color: var(--fx-red-bright) !important; opacity: 1 !important; }

/* Chips de sélection (genre sélectionné, plateforme sélectionnée…) */
.wpz-multi__chip {
	background: var(--fx-red-tint) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-red) !important;
	border-radius: var(--fx-radius-xs) !important;
	font-weight: 600 !important;
}
.wpz-multi__chip-remove,
.wpz-multi__chip button {
	background: transparent !important;
	color: var(--fx-text-soft) !important;
	border: 0;
}
.wpz-multi__chip-remove:hover,
.wpz-multi__chip button:hover { color: var(--fx-red-bright) !important; background: transparent !important; }

/* Labels uppercase rouge */
.wpz-filter-panel .wpz-multi__label,
.wpz-filter-grid .wpz-multi__label,
.wpz-filter-panel label {
	color: var(--fx-red-bright) !important;
	opacity: 1 !important;
	font-weight: 700 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* Dropdown ouvert + ses items */
.wpz-filter-panel .wpz-multi__dropdown,
.wpz-multi__dropdown {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text) !important;
}
.wpz-filter-panel .wpz-multi__actions,
.wpz-multi__actions { border-bottom-color: var(--fx-border) !important; }
.wpz-filter-panel .wpz-multi__opt,
.wpz-multi__opt { color: var(--fx-text-soft) !important; }
.wpz-filter-panel .wpz-multi__opt:hover,
.wpz-multi__opt:hover { background: var(--fx-surface-hover) !important; color: var(--fx-text) !important; }
.wpz-filter-panel .wpz-multi__opt span,
.wpz-multi__opt span { color: inherit !important; }

/* Boutons d'action (Effacer / Tout sélectionner / Cinéma) */
.wpz-filterbtn,
.wpz-btn--cinema {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 600 !important;
	transform: none !important;
}
.wpz-filterbtn:hover,
.wpz-btn--cinema:hover {
	background: var(--fx-surface-hover) !important;
	border-color: var(--fx-border-red) !important;
	color: var(--fx-red-bright) !important;
	transform: none !important;
	box-shadow: none !important;
}
.wpz-btn--cinema.is-active,
.wpz-btn--cinema[aria-pressed="true"],
.wpz-filterbtn.is-active {
	background: var(--fx-red) !important;
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red) !important;
}

/* Bouton "Tout effacer" (badge arrondi en bas) */
.wpz-reset-pill {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
}
.wpz-reset-pill:hover {
	background: var(--fx-red) !important;
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red) !important;
}

/* Bouton "Rechercher" du footer (override le hover bizarre) */
.wpz-filter-panel__foot .wpz-btn--primary {
	background: var(--fx-red) !important;
	color: var(--fx-text-on-red) !important;
	border: 0;
	box-shadow: var(--fx-shadow-sm);
}
.wpz-filter-panel__foot .wpz-btn--primary:hover {
	background: var(--fx-red-bright) !important;
	box-shadow: var(--fx-shadow-red) !important;
	color: var(--fx-text-on-red) !important;
}

/* Séparateurs (hr) éventuels */
.wpz-filter-panel hr { border-color: var(--fx-border) !important; }

/* Texte info / aide */
.wpz-filter-panel small,
.wpz-filter-panel .help,
.wpz-filter-panel .wpz-help {
	color: var(--fx-text-mute) !important;
}

/* Couleurs de fond directes appliquées par le thème (force override) */
.wpz-filter-panel [style*="background:#fff"],
.wpz-filter-panel [style*="background: #fff"],
.wpz-filter-panel [style*="background:rgba(0,0,0,.02)"] {
	background: var(--fx-surface) !important;
}

/* =============================================================
  14) VIGNETTES FILMS / ACTEURS — style AlloCiné
============================================================= */
.film-card,
.acteur-card,
.wpz-tile,
.films-grid > article,
article.film,
article.acteur {
	position: relative;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-sm);
	overflow: hidden;
	transition: transform var(--fx-base) var(--fx-ease-out),
	            box-shadow var(--fx-base) var(--fx-ease-out),
	            border-color var(--fx-fast) var(--fx-ease-out);
}
.film-card:hover,
.acteur-card:hover,
.wpz-tile:hover,
.films-grid > article:hover,
article.film:hover,
article.acteur:hover {
	transform: translateY(-3px);
	box-shadow: var(--fx-shadow-lg);
	border-color: var(--fx-border-red);
}
.film-card img,
.acteur-card img,
.wpz-tile img,
.films-grid img {
	transition: transform var(--fx-slow) var(--fx-ease-out);
	display: block;
	width: 100%;
	height: auto;
}
.film-card:hover img,
.acteur-card:hover img,
.wpz-tile:hover img,
.films-grid > article:hover img {
	transform: scale(1.04);
}

/* Badges sur vignettes (cinéma, nouveauté, futur, âge) */
.badge-cinema,
.badge-nouveau {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: var(--fx-red);
	color: var(--fx-text-on-red);
	font-family: var(--fx-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.3em 0.7em;
	border-radius: var(--fx-radius-xs);
	text-transform: uppercase;
	box-shadow: var(--fx-shadow-sm);
	z-index: 3;
}
.badge-nouveau { background: var(--fx-red-bright); }
.badge-decompte {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: rgba(0,0,0,0.7);
	color: var(--fx-red-bright);
	font-family: var(--fx-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.3em 0.7em;
	border-radius: var(--fx-radius-xs);
	border: 1px solid var(--fx-border-red);
	backdrop-filter: blur(8px);
	z-index: 3;
}
.badge-futur {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: rgba(0,0,0,0.7);
	color: var(--fx-text);
	font-family: var(--fx-font-body);
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.3em 0.7em;
	border-radius: var(--fx-radius-xs);
	border: 1px solid var(--fx-border-strong);
	backdrop-filter: blur(8px);
	z-index: 3;
}
.wpz-badge-age {
	position: absolute;
	bottom: 0.6rem;
	right: 0.6rem;
	background: rgba(0,0,0,0.78);
	color: var(--fx-red-bright);
	font-family: var(--fx-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.18em 0.5em;
	border-radius: var(--fx-radius-xs);
	border: 1px solid var(--fx-border-red);
	z-index: 3;
	letter-spacing: 0.02em;
}

/* Note étoile sous l'affiche (style AlloCiné) */
.note-stars,
.acteur-card .acteur-note,
.film-card .film-note {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-weight: 700;
	color: var(--fx-text);
	font-size: 0.9rem;
}
.note-stars .etoile,
.film-card .film-note::before,
.acteur-card .acteur-note::before {
	color: var(--fx-star);
}

/* =============================================================
  15) PAGINATION
============================================================= */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: center;
	margin: 2rem 0;
}
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.7rem;
	border-radius: var(--fx-radius-sm);
	background: var(--fx-surface);
	color: var(--fx-text-soft) !important;
	text-decoration: none !important;
	font-weight: 600;
	border: 1px solid var(--fx-border);
	transition: all var(--fx-fast) var(--fx-ease-out);
	background-image: none !important;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-text) !important;
	border-color: var(--fx-border-red);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--fx-red);
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red);
	box-shadow: 0 0 0 3px var(--fx-red-glow);
}

/* =============================================================
  16) BADGES / NOTES
============================================================= */
.note-badge,
.score-badge,
.flixeo-badge,
.wpz-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.25em 0.6em;
	border-radius: var(--fx-radius-xs);
	background: var(--fx-red-tint);
	color: var(--fx-red-bright);
	border: 1px solid var(--fx-border-red);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.note-badge .etoile,
.score-badge .etoile { color: var(--fx-star); }

/* =============================================================
  17) FAQ / ACCORDION / QUOTES / TABLES
============================================================= */
.schema-faq-section {
	background: var(--fx-surface);
	padding: 1.2rem 1.4rem;
	margin: 0.8rem 0;
	border-radius: var(--fx-radius-sm);
	border: 1px solid var(--fx-border);
	transition: border-color var(--fx-fast) var(--fx-ease-out);
}
.schema-faq-section:hover { border-color: var(--fx-border-red); }
.schema-faq-question {
	display: block;
	color: var(--fx-red-bright);
	font-family: var(--fx-font-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}
.schema-faq-answer { color: var(--fx-text-soft); }

.wp-block-accordion-item {
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-sm);
	margin: 0.5rem 0;
	overflow: hidden;
}
.wp-block-accordion-heading__toggle {
	background: transparent;
	color: var(--fx-text) !important;
	padding: 1rem 1.4rem;
	width: 100%;
	text-align: left;
	font-family: var(--fx-font-body);
	font-weight: 600;
	min-height: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: none;
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}
.wp-block-accordion-heading__toggle:hover {
	background: var(--fx-surface-hover);
	transform: none;
	color: var(--fx-red-bright) !important;
}
.wp-block-accordion-heading__toggle-icon {
	color: var(--fx-red-bright);
	font-size: 1.4em;
	transition: transform var(--fx-base) var(--fx-ease-out);
}
.wp-block-accordion-item[open] .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
}
.wp-block-accordion-panel { padding: 0 1.4rem 1.2rem; color: var(--fx-text-soft); }

.wp-block-quote,
.wp-block-pullquote,
.entry-content blockquote {
	position: relative;
	padding: 1.5rem 2rem;
	margin: 2rem 0;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-left: 3px solid var(--fx-red);
	border-radius: 0 var(--fx-radius-sm) var(--fx-radius-sm) 0;
	font-family: var(--fx-font-serif);
	font-style: italic;
	color: var(--fx-text-soft);
	font-size: 1.05rem;
	line-height: 1.7;
}
.wp-block-quote p, .entry-content blockquote p { color: var(--fx-text-soft); }
.wp-block-quote cite, .entry-content blockquote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-size: 0.85rem;
	color: var(--fx-text-mute);
	font-family: var(--fx-font-body);
}
.wp-block-quote cite::before, .entry-content blockquote cite::before {
	content: '— ';
	color: var(--fx-red);
}

.entry-content table,
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-sm);
	overflow: hidden;
}
.entry-content th,
.wp-block-table th {
	background: var(--fx-surface-high);
	color: var(--fx-red-bright);
	font-family: var(--fx-font-body);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--fx-border-strong);
	font-size: 0.9rem;
	text-transform: uppercase;
}
.entry-content td,
.wp-block-table td {
	padding: 0.8rem 1rem;
	border-top: 1px solid var(--fx-border);
	color: var(--fx-text-soft);
}
.entry-content tr:hover td,
.wp-block-table tr:hover td { background: var(--fx-surface-hover); }

/* =============================================================
  18) DRAPEAUX
============================================================= */
.flixeo-flag-img {
	display: inline-block;
	width: 1.4em;
	height: 1em;
	vertical-align: -0.15em;
	margin-right: 0.25em;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 1px 2px rgba(0,0,0,0.4);
}
.flixeo-flag-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.acteur-flag .flixeo-flag-img,
.country-flag .flixeo-flag-img { width: 1.6em; height: 1.15em; }

/* =============================================================
  19) SPINNER / LOADER
============================================================= */
.wpz-infinite-loader,
.flixeo-spinner {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--fx-text-mute);
	font-size: 0.9rem;
	padding: 1rem;
	font-family: var(--fx-font-body);
}
.wpz-infinite-loader::before,
.flixeo-spinner::before {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--fx-border-strong);
	border-top-color: var(--fx-red);
	animation: fx-spin 0.8s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* =============================================================
  20) MICROPROFIL ACTEUR / FILM
============================================================= */
.acteur-microprofil,
.film-microprofil {
	font-family: var(--fx-font-body);
	font-size: 1.02rem;
	color: var(--fx-text-soft);
	line-height: 1.6;
	margin: 0.8rem 0;
}

/* =============================================================
  21) TAG / CHIP / FILTRE PILL
============================================================= */
.tag,
.wpz-chip,
.acteur-film-filters [role="tab"] {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border-radius: var(--fx-radius-full);
	background: var(--fx-surface);
	color: var(--fx-text-soft) !important;
	border: 1px solid var(--fx-border);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: all var(--fx-fast) var(--fx-ease-out);
	cursor: pointer;
	text-decoration: none !important;
	margin: 0.15rem;
	background-image: none !important;
}
.tag:hover,
.wpz-chip:hover,
.acteur-film-filters [role="tab"]:hover {
	background: var(--fx-surface-hover);
	color: var(--fx-text) !important;
	border-color: var(--fx-border-red);
}
.acteur-film-filters [role="tab"][aria-selected="true"],
.wpz-chip--active {
	background: var(--fx-red);
	color: var(--fx-text-on-red) !important;
	border-color: var(--fx-red);
}

/* =============================================================
  22) HERO + COVER overlays cinematic
============================================================= */
.hero-front,
.flixeo-hero { position: relative; }
.hero-front::after,
.flixeo-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center top, transparent 0%, var(--fx-bg) 100%);
	pointer-events: none;
	opacity: 0.55;
}
.wp-block-cover.has-vivid-cyan-blue-background-color { background-color: var(--fx-red) !important; }

/* =============================================================
  22b) HERO SLIDER — hauteur raisonnable, contenu contenu, swipe propre
       Desktop : ~62vh (assez pour voir la pochette + le titre)
       Mobile  : 100vh - header (image jusqu'au bas d'écran)
============================================================= */
.home .hero-slider,
.hero-slider.hero-slider--full {
	height: clamp(520px, 62vh, 720px) !important;
	max-height: 720px !important;
	min-height: 480px !important;
	margin-top: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: hidden !important;
}
@media (max-width: 720px) {
	.home .hero-slider,
	.hero-slider.hero-slider--full {
		/* Mobile : image jusqu'à la fin de l'écran (sous le header sticky 60px) */
		height: calc(100vh - 60px) !important;
		max-height: none !important;
		min-height: 480px !important;
	}
}

/* TRACK : flex strict, no wrap, scroll horizontal — swipe natif autorisé */
.home .hero-slider-track,
.hero-slider.hero-slider--full .hero-slider-track {
	height: 100% !important;
	width: 100% !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	scroll-snap-stop: always !important;
	-webkit-overflow-scrolling: touch !important;
	/* ✅ pan-x ET pan-y : autorise le swipe horizontal du slider + scroll vertical de la page */
	touch-action: pan-x pan-y !important;
	overscroll-behavior-x: contain !important;
	scrollbar-width: none !important;
}
.home .hero-slider-track::-webkit-scrollbar,
.hero-slider.hero-slider--full .hero-slider-track::-webkit-scrollbar { display: none !important; }

/* SLIDE : 100% du parent, pas de débordement, scroll-snap aligné */
.home .hero-slide,
.hero-slider.hero-slider--full .hero-slide {
	height: 100% !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	scroll-snap-align: start !important;
	scroll-snap-stop: always !important;
	position: relative !important;
	overflow: hidden !important;
}
.home .hero-bg,
.hero-slider.hero-slider--full .hero-bg {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;
	transform: none !important;  /* pas de scale qui déborde */
	/* Flou + saturation pour atténuer les images bg de mauvaise qualité TMDb */
	filter: blur(3px) saturate(1.15) brightness(0.92);
	clip-path: inset(0); /* coupe net les bords flous */
}
/* Le poster (affiche) reste NET et croustillant */
.home .hero-poster,
.hero-slider.hero-slider--full .hero-poster {
	filter: none !important;
}

/* OVERLAY : positionné en bas, capé à 1200px, centré horizontalement */
.home .hero-overlay,
.hero-slider.hero-slider--full .hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	padding: var(--fx-gutter) var(--fx-gutter) clamp(1.5rem, 4vh, 3rem);
	box-sizing: border-box;
	z-index: 2;
}
.home .hero-overlay-inner,
.hero-slider.hero-slider--full .hero-overlay-inner,
.home .hero-content,
.hero-slider.hero-slider--full .hero-content {
	max-width: min(720px, 100%);
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

/* Poster mobile : empilé au-dessus du titre, taille généreuse (x1.5) */
.home .hero-poster-wrap,
.hero-slider.hero-slider--full .hero-poster-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: auto;
	flex-shrink: 0;
	margin: 0 0 12px;
}
.home .hero-poster,
.hero-slider.hero-slider--full .hero-poster {
	height: clamp(360px, 90vw, 520px);
	width: auto;
	max-width: 90vw;
	aspect-ratio: 2 / 3;
	transform: none;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
	display: block;
}

/* Desktop : poster + texte côte à côte, centrés verticalement,
   container ALIGNÉ EXACTEMENT sur .header-inner (max 1200px + gutter) */
@media (min-width: 900px) {
	.home .hero-overlay,
	.hero-slider.hero-slider--full .hero-overlay {
		flex-direction: row;
		align-items: center; /* ✅ poster + contenu centrés verticalement */
		gap: clamp(24px, 3.2vw, 48px);
		width: 100%;
		max-width: var(--wpz-container, 1200px); /* ✅ même largeur que .header-inner */
		left: 50%;
		right: auto;
		top: 50%;       /* ✅ centré verticalement dans la slide */
		bottom: auto;
		transform: translate(-50%, -50%);
		padding: 0 var(--fx-gutter); /* ✅ même padding que .header-inner */
		box-sizing: border-box;       /* ✅ padding compris dans max-width = alignement parfait */
	}
	.home .hero-poster-wrap,
	.hero-slider.hero-slider--full .hero-poster-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex: 0 0 auto;
		width: auto;
		margin: 0;
	}
	.home .hero-poster,
	.hero-slider.hero-slider--full .hero-poster {
		height: clamp(300px, 34vw, 460px);
		width: auto;
		aspect-ratio: 2 / 3;
		border-radius: 14px;
		box-shadow: 0 24px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
	}
	.home .hero-content,
	.hero-slider.hero-slider--full .hero-content {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 720px;
		align-self: center; /* ✅ contenu centré verticalement face à la pochette */
	}
}

/* TITRE : tailles raisonnables, jamais de débordement */
.home .hero-slide-title,
.hero-slider.hero-slider--full .hero-slide-title {
	font-size: clamp(1.5rem, 3.4vw, 2.5rem) !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	margin: 0 0 0.4em !important;
	color: #fff !important;
	text-shadow: 0 3px 12px rgba(0,0,0,0.7);
	letter-spacing: -0.01em;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Overlay sombre adouci pour voir la pochette */
.home .hero-slide::before,
.hero-slider.hero-slider--full .hero-slide::before {
	background: linear-gradient(
		180deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0.10) 40%,
		rgba(0,0,0,0.55) 75%,
		rgba(0,0,0,0.85) 100%
	) !important;
	z-index: 1;
}

/* Empêche tout élément de déborder */
.home .hero-slider *,
.hero-slider.hero-slider--full * { max-width: 100%; box-sizing: border-box; }

/* =============================================================
  22d) 📱 HERO MOBILE — hauteur auto, image fond entière visible
============================================================= */
@media (max-width: 720px) {
	/* SLIDER : largeur viewport, HAUTEUR AUTO (s'adapte au contenu) */
	.home .hero-slider,
	.hero-slider.hero-slider--full {
		position: relative !important;
		width: 100vw !important;
		max-width: 100vw !important;
		left: 50%;
		right: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		margin-top: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: hidden !important;
		contain: paint;
	}

	/* TRACK : flex row pour le swipe, hauteur auto */
	.home .hero-slider-track,
	.hero-slider.hero-slider--full .hero-slider-track {
		width: 100vw !important;
		max-width: 100vw !important;
		height: auto !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-snap-stop: always !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
		overscroll-behavior-x: contain !important;
		scrollbar-width: none !important;
	}

	/* SLIDE : 100vw, hauteur dictée par le contenu (image + overlay) */
	.home .hero-slide,
	.hero-slider.hero-slider--full .hero-slide {
		flex: 0 0 100vw !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 100vw !important;
		height: auto !important;
		scroll-snap-align: start !important;
		scroll-snap-stop: always !important;
		position: relative !important;
		overflow: hidden !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* IMAGE BG : devient une image normale dans le flow (entière visible) */
	.home .hero-bg,
	.hero-slider.hero-slider--full .hero-bg {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
		object-fit: cover !important;
		object-position: center center !important;
		aspect-ratio: 16 / 10 !important; /* ratio paysage qui montre bien l'image */
		transform: none !important;
		filter: saturate(1.1) brightness(0.95);
	}

	/* Gradient assombrissement subtil sur l'image pour lisibilité éventuelle */
	.home .hero-slide::before,
	.hero-slider.hero-slider--full .hero-slide::before {
		content: "";
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		height: auto !important;
		aspect-ratio: 16 / 10 !important;
		z-index: 1;
		background: linear-gradient(180deg,
			rgba(0,0,0,.10) 0%,
			rgba(0,0,0,.35) 65%,
			rgba(0,0,0,.65) 100%) !important;
		pointer-events: none;
	}

	/* OVERLAY : SOUS l'image en flow normal (pas absolute) */
	.home .hero-overlay,
	.hero-slider.hero-slider--full .hero-overlay {
		position: relative !important;
		inset: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 16px 16px 20px !important;
		margin: 0 !important;
		transform: none !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		z-index: 2;
		overflow: visible !important;
		background: linear-gradient(180deg, #0a0b0e 0%, #0e1014 100%);
	}

	/* CONTENT : strictement contenu */
	.home .hero-content,
	.hero-slider.hero-slider--full .hero-content {
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		margin: 0 !important;
	}

	/* ✅ Poster visible au-dessus du titre sur mobile (x1.5) */
	.home .hero-poster-wrap,
	.hero-slider.hero-slider--full .hero-poster-wrap {
		display: flex !important;
		align-items: flex-end !important;
		justify-content: flex-start !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		flex-shrink: 0 !important;
	}
	.home .hero-poster,
	.hero-slider.hero-slider--full .hero-poster {
		height: clamp(360px, 90vw, 520px) !important;
		width: auto !important;
		max-width: 90vw !important;
		aspect-ratio: 2 / 3 !important;
		transform: none !important;
		border-radius: 12px !important;
		box-shadow: 0 18px 50px rgba(0,0,0,.65) !important;
	}

	/* TITRE : taille raisonnable, jamais de débordement */
	.home .hero-slide-title,
	.hero-slider.hero-slider--full .hero-slide-title {
		font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
		line-height: 1.15 !important;
		font-weight: 800 !important;
		margin: 0 0 0.3em !important;
		color: #fff !important;
		max-width: 100% !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto;
		text-shadow: 0 3px 12px rgba(0,0,0,0.8);
	}

	/* TOPLINE & badges : flex wrap propre */
	.home .wpz-hero-topline,
	.hero-slider.hero-slider--full .wpz-hero-topline {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}
	.home .wpz-hero-kind-badge,
	.home .wpz-hero-date-badge,
	.home .wpz-hero-genre,
	.home .hero-slide-meta,
	.home .wpz-hero-meta,
	.home .wpz-hero-genres {
		max-width: 100% !important;
		font-size: 0.7rem !important;
		padding: 4px 9px !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	.home .wpz-hero-kind-txt {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		max-width: calc(100vw - 80px) !important;
		display: inline-block;
		vertical-align: middle;
	}

	/* Meta (note, genres) : peut wrapper */
	.home .hero-slide-meta,
	.home .wpz-hero-meta {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		max-width: 100% !important;
	}

	/* Overlay sombre adouci pour bien lire le contenu en bas */
	.home .hero-slide::before,
	.hero-slider.hero-slider--full .hero-slide::before {
		background: linear-gradient(
			180deg,
			rgba(0,0,0,0.20) 0%,
			rgba(0,0,0,0.30) 50%,
			rgba(0,0,0,0.92) 100%
		) !important;
		z-index: 1;
	}

	/* Plateforme inline */
	.home .wpz-hero-platform,
	.hero-slider.hero-slider--full .wpz-hero-platform {
		max-width: 80px !important;
	}

	/* Sécurité : empêche TOUT enfant du hero de dépasser */
	.home .hero-slider,
	.home .hero-slider *,
	.hero-slider.hero-slider--full,
	.hero-slider.hero-slider--full * {
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}
}

/* =============================================================
  22c) FLÈCHES NAVIGATION HERO (desktop)
============================================================= */
.hero-nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: all var(--fx-fast) var(--fx-ease-out);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
	.hero-nav-arrow { display: flex; }
}
.hero-nav-arrow:hover {
	background: var(--fx-red);
	border-color: var(--fx-red);
	transform: translateY(-50%) scale(1.05);
}
.hero-nav-arrow--prev { left: 1rem; }
.hero-nav-arrow--next { right: 1rem; }
.hero-nav-arrow svg { width: 22px; height: 22px; }

/* Dots de navigation (sous le slider) */
.hero-nav-dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 10;
	padding: 0.4rem 0.6rem;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
}
.hero-nav-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.hero-nav-dot.is-active {
	background: var(--fx-red-bright);
	width: 18px;
}
.hero-nav-dot:hover { background: rgba(255, 255, 255, 0.6); }

/* =============================================================
  23) HEADER PREMIUM — refonte aérée + icônes SVG accent rouge AlloCiné
============================================================= */

/* Anciennes vars green mappées sur rouge pour compatibilité ascendante */
:root {
	--fx-green:        var(--fx-red);
	--fx-green-bright: var(--fx-red-bright);
	--fx-green-dim:    var(--fx-red-dim);
	--fx-green-glow:   var(--fx-red-glow);
	--fx-green-tint:   var(--fx-red-tint);
}

.site-header {
	border-bottom: 1px solid var(--fx-border-strong);
	background: rgba(8, 9, 12, 0.92);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ✅ Le header est sticky : pas besoin du padding-top du body que le thème ajoute.
   On l'annule pour éviter le "trou noir" au-dessus du header. */
body.flixeo-themed { padding-top: 0 !important; }
html { margin-top: 0 !important; }
.site-header .header-inner {
	display: flex !important;
	align-items: center !important;
	gap: 1rem;
	max-width: var(--wpz-container, 1200px); /* ✅ même largeur que le contenu de page */
	margin: 0 auto;
	padding: 0.6rem var(--fx-gutter);
	min-height: 64px;
	height: 64px;
}

/* 🎯 ALIGNEMENT VERTICAL STRICT — tous les éléments du header sont centrés
   à la même hauteur (50% du header) via flex + align-items:center cascade. */
.site-header .header-inner > * {
	align-self: center !important;
	display: flex !important;
	align-items: center !important;
	height: auto;
}
.site-header .header-inner .logo,
.site-header .header-inner .site-logo {
	display: flex !important;
	align-items: center !important;
}
.site-header .header-inner .site-logo img {
	display: block;
	vertical-align: middle;
}
/* Search wrap centré — desktop uniquement (caché sur mobile par FIX-4) */
@media (min-width: 1025px) {
	.site-header .header-actions__search-wrap {
		display: flex !important;
		align-items: center !important;
		height: 42px;
	}
}
/* Bloc droite centré */
.site-header .header-actions {
	display: flex !important;
	align-items: center !important;
	height: 42px;
}
/* Méga-menu centré */
.site-header .header-megamenu {
	display: flex !important;
	align-items: center !important;
	height: 42px;
}
.site-header .header-megamenu__list {
	display: flex !important;
	align-items: center !important;
	height: 42px;
}
.site-header .header-megamenu__item {
	display: flex !important;
	align-items: center !important;
	height: 42px;
}
@media (max-width: 1024px) {
	.site-header .header-megamenu,
	.site-header .header-megamenu__list,
	.site-header .header-megamenu__item,
	.site-header .header-megamenu__link { display: none !important; }
}

/* Desktop ≥ 1025px : on cache le menu thème original (#main-nav) pour ne garder
   QUE notre méga-menu propre. Le burger reste caché aussi. */
@media (min-width: 1025px) {
	#main-nav.main-nav,
	.site-header .main-nav,
	body.flixeo-themed #main-nav { display: none !important; }
	#menu-overlay { display: none !important; }
}

/* Mobile < 1025px : le #main-nav du thème RESTE caché par défaut (offcanvas).
   Il ne s'ouvre qu'avec la classe .open (au clic sur burger).
   Sécurité : force le translateX(105%) au cas où autre chose le casse. */
@media (max-width: 1024px) {
	#main-nav.main-nav:not(.open) {
		transform: translateX(105%) !important;
		visibility: hidden;
	}
	#main-nav.main-nav.open {
		transform: translateX(0) !important;
		visibility: visible;
	}
}

/* Logo : taille raisonnable, marge à droite généreuse */
.site-header .site-logo {
	flex-shrink: 0;
}
.site-header .custom-logo-link img,
.site-header .site-logo__link img {
	max-height: 40px;
	width: auto;
}

/* ============ MÉGA-MENU DESKTOP UNIQUEMENT (caché < 1025px) ============ */
.header-megamenu,
.header-megamenu__list,
.header-megamenu__item,
.header-megamenu__link { display: none !important; }

@media (min-width: 1025px) {
	.header-megamenu { display: flex !important; align-items: center; }
	.header-megamenu__list { display: flex !important; }
	.header-megamenu__item { display: flex !important; }
	.header-megamenu__link { display: inline-flex !important; }
}
.header-megamenu { height: 42px; }
/* display géré dans le bloc spécifique ci-dessus avec !important */
.header-megamenu__list {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.15rem;
	align-items: center;
	height: 42px;
}
.header-megamenu__item {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	height: 42px;
}
.header-megamenu__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5em;
	height: 42px;
	min-height: 42px;
	padding: 0 0.95rem;
	color: var(--fx-text) !important;
	text-decoration: none !important;
	font-family: var(--fx-font-body);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 5px;
	transition: all var(--fx-fast) var(--fx-ease-out);
	background-image: none !important;
	white-space: nowrap;
	line-height: 1 !important;
	vertical-align: middle;
	box-sizing: border-box;
}

/* Icônes SVG rouges premium dans le méga-menu */
.header-megamenu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--fx-red) !important;
	transition: color var(--fx-fast) var(--fx-ease-out),
	            transform var(--fx-fast) var(--fx-ease-out);
}
.header-megamenu__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.header-megamenu__link:hover .header-megamenu__icon {
	color: var(--fx-red-bright) !important;
	transform: scale(1.12);
}
.header-megamenu__link:hover .header-megamenu__caret {
	color: var(--fx-red-bright) !important;
}
.header-megamenu__caret {
	color: var(--fx-text-mute);
	transition: transform var(--fx-fast) var(--fx-ease-out), color var(--fx-fast) var(--fx-ease-out);
}
.header-megamenu__link:hover {
	background: var(--fx-surface);
	color: var(--fx-red-bright) !important;
}
.header-megamenu__link:hover .header-megamenu__caret {
	transform: rotate(180deg);
	color: var(--fx-red-bright);
}
.header-megamenu__item.is-current > .header-megamenu__link {
	color: var(--fx-red-bright) !important;
	background: var(--fx-red-tint);
}

/* Panel méga-menu PLEINE LARGEUR du header (style AlloCiné/Netflix)
   Pour ça on positionne par rapport au .site-header (relative), pas à l'item. */
@media (min-width: 1025px) {
	.site-header { position: sticky; }
	/* Le panel est positionné relativement au header, pas à l'item */
	.header-megamenu__item--has-panel { position: static !important; }
}

.header-megamenu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--fx-bg-deep);
	border-top: 1px solid var(--fx-border-strong);
	border-bottom: 1px solid var(--fx-border-strong);
	box-shadow: 0 24px 40px -8px rgba(0,0,0,0.6);
	padding: 1.8rem var(--fx-gutter) 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(0);
	transition: opacity 180ms var(--fx-ease-out), visibility 0ms linear 180ms;
	z-index: 110;
	max-width: var(--fx-max-w);
	margin: 0 auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
/* Wrapper qui simule la pleine largeur visuelle (fond) */
.header-megamenu__panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	bottom: 0;
	background: var(--fx-bg-deep);
	border-top: 1px solid var(--fx-border-strong);
	border-bottom: 1px solid var(--fx-border-strong);
	box-shadow: 0 24px 40px -8px rgba(0,0,0,0.6);
	z-index: -1;
}
/* Ouverture : delay 0 (instant), Fermeture : delay 250ms (le temps d'aller à la souris) */
.header-megamenu__item--has-panel:hover > .header-megamenu__panel,
.header-megamenu__item--has-panel:focus-within > .header-megamenu__panel,
.header-megamenu__panel:hover {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition: opacity 180ms var(--fx-ease-out), visibility 0ms linear 0ms;
}

/* Une zone invisible "pont" entre l'item et le panel pour empêcher la fermeture
   quand la souris traverse l'espace */
.header-megamenu__item--has-panel::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
	background: transparent;
}
.header-megamenu__col {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.header-megamenu__title {
	font-family: var(--fx-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-red-bright);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--fx-border);
	margin-bottom: 0.5rem;
}
.header-megamenu__col a {
	color: var(--fx-text-soft) !important;
	text-decoration: none !important;
	background: none !important;
	background-image: none !important;
	padding: 0.4rem 0.6rem;
	border-radius: var(--fx-radius-sm);
	font-size: 0.85rem;
	font-weight: 500;
	transition: all var(--fx-fast) var(--fx-ease-out);
	display: block;
}
.header-megamenu__col a:hover {
	background: var(--fx-surface);
	color: var(--fx-red-bright) !important;
	padding-left: 0.85rem;
}

/* ============ STRUCTURE HEADER : [LOGO] [SEARCH flex:1] [MENU 🔔 👤] ============ */
.site-header .header-inner > .logo,
.site-header .header-inner > .site-logo { flex-shrink: 0; }

/* Search wrap : prend TOUTE la place entre logo et bloc droite */
.header-actions__search-wrap {
	display: none;
}
@media (min-width: 1025px) {
	.header-actions__search-wrap {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto !important;
		min-width: 0;
		max-width: none;
		margin: 0 1rem;
	}
	.header-actions__search-wrap form {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		position: relative;
	}
	.header-actions__search-wrap .moteur-recherche-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.header-actions__search-wrap input[type="text"],
	.header-actions__search-wrap input[type="search"],
	.header-actions__search-wrap input#search-input {
		background: #f7f7f8 !important;
		border: 1px solid rgba(0,0,0,0.08) !important;
		color: #1a1a1a !important;
		border-radius: 5px !important;
		padding: 0 3rem 0 2.6rem !important;
		font-size: 0.93rem !important;
		min-height: 42px !important;
		height: 42px !important;
		line-height: 42px !important;
		width: 100% !important;
		font-weight: 500 !important;
		transition: all var(--fx-fast) var(--fx-ease-out);
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
		box-sizing: border-box;
		display: block;
	}
	.header-actions__search-wrap input::placeholder { color: #6b6b75 !important; opacity: 1; font-weight: 400; }
	.header-actions__search-wrap input:focus {
		background: #fff !important;
		border-color: var(--fx-red) !important;
		box-shadow: 0 0 0 3px var(--fx-red-glow), inset 0 1px 2px rgba(0,0,0,0.05) !important;
		outline: none !important;
	}
	/* Icône loupe rouge à gauche */
	.header-actions__search-wrap .moteur-recherche-wrapper::before {
		content: '';
		position: absolute;
		left: 0.95rem;
		top: 50%;
		transform: translateY(-50%);
		width: 18px;
		height: 18px;
		background-color: var(--fx-red);
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		pointer-events: none;
		z-index: 2;
	}
	/* Bouton submit dans le champ */
	.header-actions__search-wrap .search-button {
		position: absolute !important;
		right: 0.4rem !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		width: 34px !important;
		height: 34px !important;
		min-height: 0 !important;
		border-radius: 5px !important;
		background: var(--fx-red) !important;
		color: #fff !important;
		border: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: none !important;
		cursor: pointer;
	}
	.header-actions__search-wrap .search-button::before {
		content: '';
		width: 16px; height: 16px;
		background-color: #fff;
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.header-actions__search-wrap .search-close { display: none !important; }
}

/* ============ HEADER ACTIONS (bloc DROITE : menu → cloche → user) ============ */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
	margin-left: auto;  /* colle à droite */
	height: 42px; /* aligne avec le champ search */
}

/* Tous les enfants direct du header-actions sont alignés et même hauteur */
.header-actions > * { align-self: center; }
.header-actions > .header-megamenu,
.header-actions > .flixeo-notif-bell,
.header-actions > .header-action-btn { display: inline-flex; align-items: center; }

@media (min-width: 1025px) {
	.header-actions__search-mobile,
	.header-action-btn--search-mobile { display: none !important; }
	.header-actions > .burger { display: none !important; }
}

/* ============ SUGGESTIONS LIST — design premium dark ============ */
.header-actions__search-wrap .suggestions-list,
#suggestions-list,
.suggestions-list {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	right: 0 !important;
	max-height: 480px !important;
	overflow-y: auto !important;
	background: #1a1a1d !important;
	border: 1px solid rgba(255,255,255,0.10) !important;
	border-radius: var(--fx-radius) !important;
	box-shadow: 0 20px 50px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0.5rem !important;
	z-index: 200 !important;
	color: var(--fx-text) !important;
}
.suggestions-list:empty { display: none; }
.suggestions-list li,
.suggestions-list a,
.suggestions-list .suggestion-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.7rem !important;
	padding: 0.55rem 0.7rem !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	text-decoration: none !important;
	background: transparent !important;
	background-image: none !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
	transition: background var(--fx-fast) var(--fx-ease-out) !important;
	border: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.suggestions-list li:hover,
.suggestions-list a:hover,
.suggestions-list .suggestion-item:hover,
.suggestions-list li.is-active,
.suggestions-list li[aria-selected="true"] {
	background: rgba(239, 14, 45, 0.12) !important;
	color: var(--fx-red-bright) !important;
}
.suggestions-list img {
	width: 36px !important;
	height: 50px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	background: #14161b;
	flex-shrink: 0;
}
.suggestions-list .suggestion-title,
.suggestions-list strong { color: var(--fx-text) !important; font-weight: 600 !important; font-size: 0.92rem; }
.suggestions-list .suggestion-meta,
.suggestions-list small { color: var(--fx-text-mute) !important; font-size: 0.78rem !important; display: block; }
.suggestions-list li::before,
.suggestions-list a::before {
	content: '';
	width: 14px;
	height: 14px;
	background-color: var(--fx-red);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
	-webkit-mask-size: contain; mask-size: contain;
	flex-shrink: 0;
	opacity: 0.5;
	transition: opacity var(--fx-fast) var(--fx-ease-out), transform var(--fx-fast) var(--fx-ease-out);
	margin-left: auto;
	order: 99; /* en bout de ligne */
}
.suggestions-list li:hover::before,
.suggestions-list a:hover::before {
	opacity: 1;
	transform: translateX(3px);
}

/* Bouton d'action header (rond, icône SVG rouge) — aligné même hauteur */
.header-action-btn,
.flixeo-notif-bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 999px;
	background: var(--fx-surface);
	color: var(--fx-red) !important;
	border: 1px solid var(--fx-border-strong);
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
	padding: 0;
	flex-shrink: 0;
	text-decoration: none !important;
	background-image: none !important;
	min-height: 0 !important;
	vertical-align: middle;
}
.header-action-btn:hover,
.flixeo-notif-bell:hover {
	background: var(--fx-green-tint);
	color: var(--fx-green-bright) !important;
	border-color: var(--fx-green);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(39, 192, 132, 0.25);
}
.header-action-btn[aria-expanded="true"],
.flixeo-notif-bell[aria-expanded="true"] {
	background: var(--fx-green);
	color: var(--fx-bg-deep) !important;
	border-color: var(--fx-green);
}

/* Le badge cloche reste rouge (sang AlloCiné) pour distinction "alerte" */
.flixeo-notif-bell__badge {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-bg-deep) !important;
}

/* Bouton search mobile (visible < 1025px) */
.header-action-btn--search-mobile {
	display: inline-flex;
}
@media (min-width: 1025px) {
	.header-action-btn--search-mobile { display: none; }
}

/* Burger : afficher seulement sur < 1025px (méga-menu desktop visible sinon) */
.header-action-btn.burger {
	display: inline-flex;
}
@media (min-width: 1025px) {
	.header-action-btn.burger { display: none; }
}

/* Override burger original (3 spans) si le HTML utilise encore l'ancien format */
.burger span { display: none; }

/* =============================================================
   NAV OFFCANVAS MOBILE — Premium refonte (icônes rouges + cascade)
============================================================= */
#main-nav.main-nav {
	background: linear-gradient(180deg, #0a0b0e 0%, #08090c 100%) !important;
	border-left: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text);
	padding: 0 !important;
	box-shadow: -24px 0 50px -12px rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
}

/* ❌ HEADER DU PANEL VIRÉ — le burger du header ferme le canvas */
#main-nav .nav-head { display: none !important; }

/* Body scrollable — relatif pour positionner les sous-menus en slide */
#main-nav .menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 1.2rem 0.8rem 2rem !important;
	padding-top: calc(1.2rem + env(safe-area-inset-top)) !important;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	position: relative !important;
	height: 100%;
}

/* Item du menu */
#main-nav .menu > li,
#main-nav .menu li {
	list-style: none !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	position: relative;
}

/* Lien de l'item */
#main-nav .menu li > a {
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	padding: 0.85rem 1rem !important;
	padding-right: 56px !important;  /* place pour le toggle */
	color: var(--fx-text) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background var(--fx-fast) var(--fx-ease-out),
	            color var(--fx-fast) var(--fx-ease-out),
	            transform var(--fx-fast) var(--fx-ease-out);
	background-image: none !important;
	line-height: 1.3 !important;
}
#main-nav .menu li > a:hover,
#main-nav .menu li > a:active {
	background: var(--fx-surface) !important;
	color: var(--fx-red-bright) !important;
	transform: translateX(2px);
}
#main-nav .menu li.current-menu-item > a {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
}

/* Sous-menu : pas de padding-right inutile */
#main-nav .menu li.menu-item-has-children > a {
	padding-right: 56px !important;
}
#main-nav .menu li:not(.menu-item-has-children) > a {
	padding-right: 1rem !important;
}

/* === ICÔNES SVG ROUGES (par URL) === */
#main-nav .menu li > a::before {
	content: '';
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: var(--fx-red) !important;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform var(--fx-fast) var(--fx-ease-out), background-color var(--fx-fast) var(--fx-ease-out);
}
#main-nav .menu li > a:hover::before {
	transform: scale(1.15);
	background-color: var(--fx-red-bright) !important;
}
/* Home / Accueil */
#main-nav .menu a[href="https://flixeo.fr/"]::before,
#main-nav .menu a[href$="://flixeo.fr"]::before,
#main-nav .menu a[href="/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}
/* Films */
#main-nav .menu a[href*="/films/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M2 8h20M2 16h20M6 4v16M18 4v16'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M2 8h20M2 16h20M6 4v16M18 4v16'/></svg>");
}
/* Acteurs */
#main-nav .menu a[href*="/liste-des-acteurs/"]::before,
#main-nav .menu a[href*="/acteurs/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>");
}
/* Quiz */
#main-nav .menu a[href*="/tous-les-quiz/"]::before,
#main-nav .menu a[href*="/quiz/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.5 9a2.5 2.5 0 1 1 5 0c0 1.5-2.5 2-2.5 4'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.5 9a2.5 2.5 0 1 1 5 0c0 1.5-2.5 2-2.5 4'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
/* Blog */
#main-nav .menu a[href*="/blog/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14,2 14,8 20,8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='13' y2='17'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14,2 14,8 20,8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='13' y2='17'/></svg>");
}
/* Mon compte / Connexion / Inscription */
#main-nav .menu a[href*="/mon-compte/"]::before,
#main-nav .menu a[href*="login"]::before,
#main-nav .menu a[href*="connexion"]::before,
#main-nav .menu a[href*="inscription"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
/* Forum */
#main-nav .menu a[href*="/forum/"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}
/* Icône par défaut (étoile) si rien ne matche */
#main-nav .menu li > a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/></svg>");
}

/* === SOUS-MENU : SLIDE LATÉRAL (depuis la droite) === */
#main-nav .menu-item-has-children > ul,
#main-nav .menu-item-has-children > .sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 1.2rem 0.8rem 2rem !important;
	padding-top: calc(1.2rem + env(safe-area-inset-top)) !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 100% !important;
	width: 100% !important;
	background: linear-gradient(180deg, #0a0b0e 0%, #08090c 100%) !important;
	border-left: 0 !important;
	overflow-y: auto !important;
	transform: translateX(100%);
	transition: transform 0.32s var(--fx-ease-out);
	z-index: 10;
	visibility: hidden;
}
#main-nav .menu-item-has-children.open > ul,
#main-nav .menu-item-has-children.open > .sub-menu {
	transform: translateX(0);
	visibility: visible;
}

/* Items du sous-menu : même style que les items principaux */
#main-nav .menu-item-has-children > ul > li,
#main-nav .menu-item-has-children > .sub-menu > li {
	margin: 0 0 4px !important;
}
#main-nav .menu-item-has-children > ul > li > a,
#main-nav .menu-item-has-children > .sub-menu > li > a {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0.85rem 1rem !important;
	color: var(--fx-text) !important;
}

/* === BOUTON RETOUR (injecté par JS en haut du sous-menu) === */
.flixeo-submenu-back {
	display: flex !important;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text) !important;
	padding: 0.75rem 1rem !important;
	border-radius: 10px;
	margin-bottom: 0.8rem !important;
	font-family: var(--fx-font-body);
	font-weight: 700 !important;
	font-size: 0.88rem !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.flixeo-submenu-back::before {
	content: '';
	width: 18px;
	height: 18px;
	background-color: var(--fx-red);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><polyline points='12,19 5,12 12,5'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><polyline points='12,19 5,12 12,5'/></svg>");
	-webkit-mask-size: contain; mask-size: contain;
}
.flixeo-submenu-back:hover {
	background: var(--fx-red-tint) !important;
	border-color: var(--fx-red) !important;
	color: var(--fx-red-bright) !important;
}
.flixeo-submenu-back:hover::before {
	background-color: var(--fx-red-bright);
	transform: translateX(-3px);
}

/* Bouton toggle (+) → flèche droite (indicateur de slide) */
#main-nav .submenu-toggle,
#main-nav .menu-item-has-children > .submenu-toggle {
	position: absolute !important;
	top: 0 !important;
	right: 8px !important;
	width: 44px !important;
	height: 50px;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--fx-red) !important;
	font-size: 0 !important;
	z-index: 2;
	transition: transform var(--fx-base) var(--fx-ease-out);
}
#main-nav .submenu-toggle::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
}
#main-nav .submenu-toggle:hover { background: var(--fx-surface) !important; border-radius: 8px; }

/* Sur les items qui ont des enfants : ajoute une flèche → à droite (si pas de submenu-toggle natif) */
#main-nav .menu-item-has-children > a::after {
	content: '';
	margin-left: auto;
	width: 16px;
	height: 16px;
	background-color: var(--fx-red);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}

/* Overlay mobile */
#menu-overlay {
	background: rgba(5, 5, 5, 0.55) !important;
	backdrop-filter: blur(3px) !important;
	-webkit-backdrop-filter: blur(3px) !important;
}

/* =============================================================
   BURGER HEADER : devient ROUGE ACTIF quand le canvas est ouvert
   (et reste cliquable pour fermer le canvas)
============================================================= */
#burger-menu[aria-expanded="true"],
.burger.is-active,
body.menu-open #burger-menu,
body.wpz-no-scroll #burger-menu {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 4px var(--fx-red-glow);
}
#burger-menu[aria-expanded="true"] svg,
body.menu-open #burger-menu svg {
	color: #fff !important;
}

/* Surcouche cloche front : conserve l'icône en vert dans header */
.header-actions .flixeo-notif-bell {
	color: var(--fx-green) !important;
}

/* ============ CANVAS NOTIF — premium */
.flixeo-notif-canvas {
	background: var(--fx-bg-deep) !important;
	border: 1px solid var(--fx-border-strong) !important;
	box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.8) !important;
}

/* === DESKTOP : SIDEBAR à droite (drawer plein hauteur) === */
@media (min-width: 1025px) {
	.flixeo-notif-canvas {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: min(420px, 90vw) !important;
		max-height: 100vh !important;
		height: 100vh !important;
		border-radius: 0 !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-right: 0 !important;
		border-left: 1px solid var(--fx-border-strong) !important;
		box-shadow: -20px 0 50px -15px rgba(0, 0, 0, 0.7) !important;
		transform: translateX(100%);
		transition: transform 0.32s var(--fx-ease-out);
		display: flex !important;
	}
	.flixeo-notif-canvas[hidden] {
		display: flex !important;
		transform: translateX(100%);
		pointer-events: none;
	}
	.flixeo-notif-canvas:not([hidden]) {
		transform: translateX(0);
		pointer-events: auto;
	}
	/* Body Y inchangé sur desktop (sidebar n'overlap pas) */
	.flixeo-notif-canvas__body {
		flex: 1 !important;
		max-height: none !important;
	}
	/* Backdrop derrière la sidebar pour focus visuel */
	.flixeo-notif-canvas-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(5, 5, 5, 0.35);
		backdrop-filter: blur(2px);
		z-index: 9989;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.32s var(--fx-ease-out);
	}
	.flixeo-notif-canvas-backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}
}
.flixeo-notif-canvas__head {
	background: linear-gradient(180deg, var(--fx-surface) 0%, var(--fx-bg) 100%) !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
.flixeo-notif-canvas__tab.is-active {
	color: var(--fx-green-bright) !important;
	border-bottom-color: var(--fx-green) !important;
	background: var(--fx-green-tint) !important;
}
.fxn-tab-badge {
	background: var(--fx-green-tint) !important;
	color: var(--fx-green-bright) !important;
}
.flixeo-notif-canvas__mark-all:hover {
	color: var(--fx-green-bright) !important;
	background: var(--fx-green-tint) !important;
}
.flixeo-notif-canvas__foot a {
	color: var(--fx-green-bright) !important;
}
.flixeo-notif-canvas__send summary {
	color: var(--fx-green-bright) !important;
}
.flixeo-notif-canvas__send-form input:focus,
.flixeo-notif-canvas__send-form select:focus,
.flixeo-notif-canvas__send-form textarea:focus {
	border-color: var(--fx-green) !important;
	box-shadow: 0 0 0 2px var(--fx-green-glow) !important;
}
.fxn-form-send {
	background: var(--fx-green) !important;
	color: var(--fx-bg-deep) !important;
}
.fxn-form-send:hover {
	background: var(--fx-green-bright) !important;
}

/* Canvas mobile : occupe presque tout l'écran avec design premium */
@media (max-width: 720px) {
	.flixeo-notif-canvas {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-height: 85vh;
		border-radius: 18px 18px 0 0 !important;
		border-bottom: 0 !important;
		animation: fxn-canvas-up 0.28s var(--fx-ease-out);
	}
	@keyframes fxn-canvas-up {
		from { transform: translateY(100%); opacity: 0; }
		to   { transform: translateY(0); opacity: 1; }
	}
	.flixeo-notif-canvas::before {
		content: '';
		display: block;
		width: 42px;
		height: 4px;
		background: var(--fx-border-strong);
		border-radius: 999px;
		margin: 0.7rem auto 0;
	}
}

/* =============================================================
  24) SECTION TITLES uppercase AlloCiné
============================================================= */
.section-title,
.flixeo-section-title,
.entry-content > h2:first-of-type {
	font-family: var(--fx-font-body);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 800;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: var(--fx-text);
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--fx-red);
	margin: 2rem 0 1.2rem;
	display: inline-block;
}

/* =============================================================
  25) PRINT + REDUCED MOTION
============================================================= */
@media print {
	body.flixeo-themed { background: #fff !important; color: #000 !important; }
	body.flixeo-themed h1, body.flixeo-themed h2, body.flixeo-themed h3, body.flixeo-themed p { color: #000 !important; }
	.flixeo-breadcrumbs, .acteur-film-filters, .wpz-multi, .wpz-infinite-loader,
	.flixeo-toolbar, .flixeo-search-modal { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================
  26) UTILITAIRES
============================================================= */
.flixeo-container {
	max-width: var(--fx-max-w);
	margin: 0 auto;
	padding: 0 var(--fx-gutter);
}
.flixeo-sr-only,
.wpz-sr-only,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
img { max-width: 100%; height: auto; }

/* =============================================================
   ==============================================================
   FIX BLOCK — 2026-05-20
   Corrections regroupées : header alignment, mobile menu plein
   écran, slide latéral des sous-menus, recherche mobile, hero.
   Tout en dernier du fichier pour primer sur la cascade.
   ==============================================================
============================================================= */

/* =============================================================
   FIX-1 — Menu offcanvas mobile plein écran
   - Le panneau remplit 100% de la largeur et 100dvh de la hauteur
   - Overlay supprimé (inutile quand le menu prend tout l'écran)
   - .nav-head réactivé : logo "Menu" à gauche + bouton fermer à droite
   - Le menu passe au-dessus du header (top:0) et propose son
     propre bouton de fermeture
============================================================= */
@media (max-width: 1024px) {

	/* Panneau plein écran */
	#main-nav.main-nav {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		/* fallback puis 100dvh pour gérer la barre URL mobile */
		height: 100vh !important;
		height: 100dvh !important;
		border-left: 0 !important;
		box-shadow: none !important;
		z-index: 10000;
	}

	/* Header du panneau : titre + bouton fermer (réactivé) */
	#main-nav .nav-head {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 0.8rem;
		padding: 0.85rem 1rem;
		padding-top: calc(env(safe-area-inset-top, 0px) + 0.85rem);
		border-bottom: 1px solid var(--fx-border);
		background: var(--fx-bg-deep);
		flex-shrink: 0;
		margin: 0;
	}
	#main-nav .nav-title {
		font-family: var(--fx-font-body);
		font-weight: 800;
		font-size: 1rem;
		letter-spacing: 0.04em;
		color: var(--fx-text);
		text-transform: uppercase;
	}
	#main-nav .nav-close {
		width: 42px;
		height: 42px;
		min-width: 42px;
		border-radius: var(--fx-radius-full);
		background: var(--fx-surface);
		border: 1px solid var(--fx-border-strong);
		color: var(--fx-red);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all var(--fx-fast) var(--fx-ease-out);
		padding: 0;
	}
	#main-nav .nav-close:hover,
	#main-nav .nav-close:focus-visible {
		background: var(--fx-red);
		color: #fff;
		border-color: var(--fx-red);
		outline: none;
	}
	#main-nav .nav-close svg { width: 22px; height: 22px; }

	/* Padding du menu sans safe-area en haut (le nav-head s'en occupe) */
	#main-nav .menu {
		padding-top: 1.2rem !important;
	}

	/* Overlay : inutile quand le menu prend toute la place */
	#menu-overlay,
	#menu-overlay.active {
		display: none !important;
	}

	/* Pas de scroll horizontal possible quand menu ouvert */
	html.no-scroll,
	body.no-scroll,
	body.menu-open {
		overflow-x: hidden !important;
	}
}

/* =============================================================
   FIX-2 — Slide latéral des sous-menus (style iOS/Android natif)
   - Le sous-menu glisse depuis la droite et remplit toute la
     hauteur du panneau (pas seulement la hauteur du <li> parent)
   - Le menu parent glisse légèrement à gauche (parallaxe iOS)
   - Récursif : fonctionne pour les sous-sous-menus
   - Le bouton "← {parent}" injecté par JS gère le retour
============================================================= */
@media (max-width: 1024px) {

	/* Sous-menus : position:fixed par rapport au viewport pour remplir
	   toute la hauteur du panneau (sinon limités au <li> parent ~50px) */
	#main-nav .menu-item-has-children > ul,
	#main-nav .menu-item-has-children > .sub-menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		height: 100dvh !important;
		z-index: 10001;
		/* fond opaque pour masquer le menu parent derrière */
		background: linear-gradient(180deg, #0a0b0e 0%, #08090c 100%) !important;
		padding: 1.2rem 0.8rem 2rem !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 1.2rem) !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem) !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform 0.32s var(--fx-ease-out);
		visibility: hidden;
		/* aria-hidden true par défaut, sera false quand ouvert */
	}
	#main-nav .menu-item-has-children.open > ul,
	#main-nav .menu-item-has-children.open > .sub-menu {
		transform: translateX(0);
		visibility: visible;
	}

	/* Parallaxe iOS : le menu parent glisse légèrement à gauche
	   quand un sous-menu est ouvert (effet "deck") */
	#main-nav .menu {
		transform: translateX(0);
		transition: transform 0.32s var(--fx-ease-out), opacity 0.32s var(--fx-ease-out);
		will-change: transform;
	}
	#main-nav .menu:has(> .menu-item-has-children.open) {
		transform: translateX(-15%);
		opacity: 0.55;
		pointer-events: none;
	}
	/* Récursif sur les sous-menus (sous-sous-menus) */
	#main-nav .menu-item-has-children > ul,
	#main-nav .menu-item-has-children > .sub-menu {
		transition: transform 0.32s var(--fx-ease-out), opacity 0.32s var(--fx-ease-out);
	}
	#main-nav .menu-item-has-children > ul:has(> .menu-item-has-children.open),
	#main-nav .menu-item-has-children > .sub-menu:has(> .menu-item-has-children.open) {
		transform: translateX(-15%) !important;
		opacity: 0.55;
		pointer-events: none;
	}

	/* Neutralise l'accordéon legacy : si menu.js (thème) injecte
	   un style="height:0px" inline, on l'ignore (héritage !important). */
	#main-nav .menu-item-has-children > ul[style*="height"],
	#main-nav .menu-item-has-children > .sub-menu[style*="height"] {
		height: 100dvh !important;
	}

	/* Le bouton retour reste cliquable même quand le sous-menu parent
	   contient un sous-menu ouvert (pointer-events ne se propage pas
	   via :has(), mais on s'assure que le bouton retour du parent ne
	   soit pas désactivé) — le pointer-events:none ci-dessus est appliqué
	   au menu lui-même, pas au sous-menu ouvert. */
}

/* =============================================================
   FIX-3 — Alignement vertical strict du header desktop
   - Tous les éléments du .header-inner sont alignés sur l'axe
     horizontal central (50% du header) : logo, search, menu, cloche, avatar.
   - Reset des margin/padding/line-height parasites sur ul/li/a du megamenu.
   - Hauteur uniforme 42px sur tous les éléments interactifs.
============================================================= */

/* Reset large des listes dans le megamenu (sur tous les viewports) */
.site-header .header-megamenu,
.site-header .header-megamenu ul,
.site-header .header-megamenu li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Le conteneur du header reste centré verticalement */
.site-header .header-inner {
	min-height: 64px;
	align-items: center !important;
}
.site-header .header-inner > * {
	align-self: center !important;
}

@media (min-width: 1025px) {

	/* Megamenu : alignement strict + hauteur uniforme */
	.site-header .header-megamenu,
	.site-header .header-megamenu__list,
	.site-header .header-megamenu__item {
		display: flex !important;
		align-items: center !important;
		height: 42px !important;
		line-height: 1 !important;
		margin: 0 !important;
	}

	.site-header .header-megamenu__link {
		display: inline-flex !important;
		align-items: center !important;
		height: 42px !important;
		min-height: 42px !important;
		line-height: 1 !important;
		vertical-align: middle;
		margin: 0 !important;
		box-sizing: border-box;
	}

	/* Enfants directs du link : pas de line-height parasite */
	.site-header .header-megamenu__link > span,
	.site-header .header-megamenu__icon,
	.site-header .header-megamenu__caret {
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center !important;
		vertical-align: middle;
		margin: 0;
	}

	/* Items à droite du header : champ search, cloche, avatar — même hauteur */
	.site-header .header-actions__search-wrap,
	.site-header .header-actions {
		height: 42px !important;
		display: flex !important;
		align-items: center !important;
	}
	.site-header .header-actions > * {
		align-self: center !important;
	}
	/* Boutons visibles SUR DESKTOP uniquement : cloche + avatar.
	   On exclut volontairement .burger et .header-action-btn--search-mobile
	   qui doivent rester cachés desktop (gérés par FIX-4 ci-dessous). */
	.site-header .header-actions .flixeo-notif-bell,
	.site-header .header-actions .header-action-btn--account {
		height: 42px !important;
		min-height: 42px !important;
		width: 42px;
		min-width: 42px;
		align-self: center !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	/* Les autres .header-action-btn (non burger / non search-mobile) :
	   même dimensions, mais sans forcer display (laissé à la règle qui leur est propre). */
	.site-header .header-actions .header-action-btn:not(.burger):not(.header-action-btn--search-mobile) {
		height: 42px !important;
		min-height: 42px !important;
		width: 42px;
		min-width: 42px;
		align-self: center !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Le champ texte search a déjà height:42px imposé plus haut,
	   on s'assure juste qu'il reste aligné */
	.site-header .header-actions__search-wrap input[type="text"],
	.site-header .header-actions__search-wrap input[type="search"],
	.site-header .header-actions__search-wrap input#search-input {
		align-self: center !important;
		vertical-align: middle;
	}

	/* Logo : aligné vertical center */
	.site-header .header-inner .logo,
	.site-header .header-inner .site-logo {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		height: 42px;
	}
	.site-header .site-logo img,
	.site-header .custom-logo-link img,
	.site-header .site-logo__link img {
		display: block;
		vertical-align: middle;
		max-height: 40px;
		width: auto;
	}
}

/* =============================================================
   FIX-4 — Visibilité champ recherche / loupe / burger
   - Desktop (≥1025px) : champ recherche visible | loupe + burger CACHÉS
   - Mobile  (≤1024px) : champ recherche CACHÉ  | loupe + burger visibles
   - Tap sur la loupe (mobile) → ouvre flixeo-search-modal (data-open-search)
   - Règles "bétonnées" avec !important pour résister à tout override
============================================================= */

/* === MOBILE (≤1024px) === */
@media (max-width: 1024px) {
	/* Champ recherche : caché */
	.site-header .header-actions__search-wrap {
		display: none !important;
	}
	/* Sécurité : si le shortcode injecte quelque chose dans le wrapper */
	.site-header .header-actions__search-wrap #moteur-recherche-suggestions,
	.site-header .header-actions__search-wrap form,
	.site-header .header-actions__search-wrap input[type="text"],
	.site-header .header-actions__search-wrap input[type="search"] {
		display: none !important;
	}

	/* Loupe : visible */
	.site-header .header-action-btn--search-mobile,
	.site-header .header-actions__search-mobile {
		display: inline-flex !important;
		height: 42px !important;
		min-height: 42px !important;
		width: 42px;
		min-width: 42px;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Burger : visible */
	.site-header .header-action-btn.burger,
	.site-header #burger-menu {
		display: inline-flex !important;
		height: 42px !important;
		min-height: 42px !important;
		width: 42px;
		min-width: 42px;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* === DESKTOP (≥1025px) === */
@media (min-width: 1025px) {
	/* Champ recherche : visible (FIX-3 + règle existante DS ligne 2755 gèrent la mise en page) */

	/* Loupe : CACHÉE */
	.site-header .header-action-btn--search-mobile,
	.site-header .header-actions__search-mobile {
		display: none !important;
	}

	/* Burger : CACHÉ */
	.site-header .header-action-btn.burger,
	.site-header #burger-menu {
		display: none !important;
	}
}

/* =============================================================
   FIX-5 — Hero slider mobile sans débordement
   - Hauteur mobile réduite (60-70dvh) pour éviter le slider géant
   - Layout overlay aligné sur var(--fx-gutter) (cohérence container)
   - Badges en flex-wrap pour ne jamais déborder
   - Titre et chip dimensionnés pour le mobile
   - Sécurise overflow-x:hidden sur body pour absorber width:100vw
============================================================= */

/* Sécurité : pas de scroll horizontal sur mobile.
   On ne le met PAS sur desktop pour ne pas casser le position:sticky du header.
   overflow-x:clip serait idéal mais Safari <16 ne le supporte pas, donc on
   se limite à clip sur les navigateurs qui le comprennent + hidden sur le reste. */
@supports (overflow: clip) {
	html, body { overflow-x: clip; }
}
@supports not (overflow: clip) {
	@media (max-width: 1024px) {
		html, body { overflow-x: hidden; }
	}
}
/* Le hero lui-même garantit déjà overflow:hidden interne */

@media (max-width: 1024px) {
	/* Hauteur mobile raisonnable (60-70% de la hauteur du viewport) */
	.hero-slider {
		height: clamp(420px, 65dvh, 560px) !important;
		max-height: 70dvh !important;
	}

	/* Overlay : padding aligné sur le gutter du DS, jamais hors écran */
	.hero-overlay {
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 var(--fx-gutter);
		box-sizing: border-box;
		bottom: clamp(18px, 5vw, 40px);
		align-items: flex-start;
	}
	.hero-content {
		width: 100%;
		max-width: 100%;
	}

	/* Titre : taille mobile lisible mais contenue */
	.hero-slide-title {
		font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
		line-height: 1.1 !important;
		letter-spacing: -0.02em;
		word-break: break-word;
	}

	/* Badges et meta : wrap obligatoire pour ne jamais déborder */
	.wpz-hero-topline,
	.hero-slider .wpz-hero-genres,
	.hero-slider .wpz-hero-meta {
		flex-wrap: wrap !important;
		gap: 6px !important;
		max-width: 100%;
	}

	/* Tailles de badges réduites mobile (gain de place) */
	.hero-slider .wpz-hero-kind-badge,
	.hero-slider .wpz-hero-date-badge,
	.hero-slider .wpz-hero-genre {
		font-size: 0.72rem !important;
		padding: 4px 9px !important;
		white-space: nowrap;
	}
	.hero-slider .wpz-hero-chip {
		font-size: 0.82rem !important;
		padding: 5px 10px !important;
	}

	/* Flèches du slider : cachées mobile (swipe tactile suffit) */
	.hero-slider .carousel-nav,
	.hero-slider .hero-nav-arrow {
		display: none !important;
	}

	/* Dots du slider (s'ils existent via flixeo-hero.js) :
	   visibles mais petits + centrés en bas */
	.hero-slider .hero-nav-dots {
		bottom: 8px;
	}
}

/* Très petits écrans : layout encore plus compact */
@media (max-width: 480px) {
	.hero-slider {
		height: clamp(380px, 60dvh, 480px) !important;
	}
	.hero-slide-title {
		font-size: clamp(1.35rem, 5.5vw, 1.9rem) !important;
	}
	.hero-overlay {
		gap: 10px !important;
	}
}

/* =============================================================
   FIX-6 — REFONTE COMPLÈTE DU CANVAS MOBILE (style Eurécard)
   Remplace les FIX-1 et FIX-2 sur les points critiques :
   - Panneau VRAIMENT plein écran (100vw × 100dvh, inset:0)
   - Header minimaliste : juste un bouton X en haut à droite
   - Burger caché quand le menu est ouvert
   - Items grand format, lisibles, tap area généreuse
   - Une seule flèche par item parent (pas de doublon)
   - Sous-menus cliquables (annule le pointer-events:none parent)
============================================================= */

@media (max-width: 1024px) {

	/* === 1. PANNEAU PLEIN ÉCRAN — bétonné === */
	#main-nav.main-nav,
	body #main-nav.main-nav,
	body.menu-open #main-nav.main-nav,
	#main-nav.main-nav.open {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		border: 0 !important;
		border-left: 0 !important;
		box-shadow: none !important;
		z-index: 99999 !important;
		background: #0a0b0e !important;
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
	}

	/* === 2. HEADER DU PANNEAU — minimaliste === */
	#main-nav .nav-head {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 0;
		width: 100% !important;
		padding: 14px 16px !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var(--fx-border) !important;
		flex-shrink: 0 !important;
		min-height: 56px;
		box-sizing: border-box;
	}
	/* Le titre "Menu" : on le cache, plus moderne sans */
	#main-nav .nav-title {
		display: none !important;
	}
	/* Bouton fermer : reset propre, rond rouge à droite */
	#main-nav .nav-close {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		border-radius: 999px !important;
		background: var(--fx-surface) !important;
		border: 1px solid var(--fx-border-strong) !important;
		color: var(--fx-text) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		padding: 0 !important;
		flex-shrink: 0 !important;
		transition: all var(--fx-fast) var(--fx-ease-out);
	}
	#main-nav .nav-close:hover,
	#main-nav .nav-close:active,
	#main-nav .nav-close:focus-visible {
		background: var(--fx-red) !important;
		color: #fff !important;
		border-color: var(--fx-red) !important;
		outline: none;
	}
	#main-nav .nav-close svg {
		width: 20px;
		height: 20px;
		stroke: currentColor;
	}

	/* === 3. BURGER CACHÉ quand menu ouvert === */
	body.menu-open #burger-menu,
	body.no-scroll #burger-menu,
	body.menu-open .site-header .header-action-btn.burger,
	body.no-scroll .site-header .header-action-btn.burger {
		display: none !important;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
	/* Et tant qu'on y est : pas de header par-dessus le menu plein écran */
	body.menu-open .site-header,
	body.no-scroll .site-header {
		z-index: 99 !important;
	}

	/* === 4. LISTE DU MENU — Eurécard-like === */
	#main-nav .menu {
		flex: 1 !important;
		min-height: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 8px 0 32px !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
		list-style: none !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		position: relative !important;
		background: transparent !important;
		/* On retire le translateX -15% et opacity du parallaxe : trop confusing */
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		box-sizing: border-box;
	}

	/* Items principaux */
	#main-nav .menu > li {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		position: relative !important;
		border-bottom: 1px solid rgba(255,255,255,0.04);
	}
	#main-nav .menu > li:last-child {
		border-bottom: 0;
	}

	/* Lien des items : grand format, tap-friendly */
	#main-nav .menu > li > a {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100% !important;
		padding: 18px 20px !important;
		padding-right: 56px !important;
		margin: 0 !important;
		color: var(--fx-text) !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-family: var(--fx-font-body) !important;
		font-weight: 600 !important;
		font-size: 1rem !important;
		line-height: 1.2 !important;
		text-decoration: none !important;
		text-transform: none !important;
		transition: background var(--fx-fast) var(--fx-ease-out);
		box-sizing: border-box;
	}
	#main-nav .menu > li > a:hover,
	#main-nav .menu > li > a:active,
	#main-nav .menu > li.current-menu-item > a,
	#main-nav .menu > li.current_page_item > a {
		background: rgba(239, 14, 45, 0.08) !important;
		color: var(--fx-text) !important;
		transform: none !important;
	}

	/* Icône SVG rouge à gauche : taille réduite, propre */
	#main-nav .menu > li > a::before {
		width: 22px !important;
		height: 22px !important;
		flex-shrink: 0;
		background-color: var(--fx-red) !important;
	}

	/* === 5. UNE SEULE FLÈCHE par item parent (pas de doublon) === */
	/* On cache le bouton .submenu-toggle natif (qui contenait sa propre flèche) */
	#main-nav .submenu-toggle,
	#main-nav .menu-item-has-children > .submenu-toggle {
		display: none !important;
		visibility: hidden;
	}
	/* On garde UNIQUEMENT le ::after sur le lien parent (chevron droit) */
	#main-nav .menu-item-has-children > a::after {
		content: '' !important;
		position: absolute !important;
		right: 20px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		background-color: var(--fx-red) !important;
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") !important;
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") !important;
		-webkit-mask-size: contain !important;
		mask-size: contain !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		opacity: 0.85;
		pointer-events: none;
	}

	/* === 6. SOUS-MENUS — cliquables, plein écran === */
	/* On NEUTRALISE le pointer-events:none du parent quand sous-menu ouvert
	   (le parent reste invisible en arrière-plan, mais on n'en a pas besoin
	   car le sous-menu plein écran couvre tout) */
	#main-nav .menu:has(> .menu-item-has-children.open) {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	#main-nav .menu-item-has-children > ul:has(> .menu-item-has-children.open),
	#main-nav .menu-item-has-children > .sub-menu:has(> .menu-item-has-children.open) {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Le sous-menu lui-même : VRAIMENT cliquable */
	#main-nav .menu-item-has-children > ul,
	#main-nav .menu-item-has-children > .sub-menu {
		pointer-events: auto !important;
		background: #0a0b0e !important;
		padding: 0 !important;
		padding-top: calc(env(safe-area-inset-top, 0px)) !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
	}
	#main-nav .menu-item-has-children.open > ul,
	#main-nav .menu-item-has-children.open > .sub-menu {
		pointer-events: auto !important;
	}

	/* Items des sous-menus : même format que les items principaux */
	#main-nav .menu-item-has-children > ul > li,
	#main-nav .menu-item-has-children > .sub-menu > li {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		border-bottom: 1px solid rgba(255,255,255,0.04);
	}
	#main-nav .menu-item-has-children > ul > li:last-child,
	#main-nav .menu-item-has-children > .sub-menu > li:last-child {
		border-bottom: 0;
	}
	#main-nav .menu-item-has-children > ul > li > a,
	#main-nav .menu-item-has-children > .sub-menu > li > a {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		width: 100% !important;
		padding: 18px 20px !important;
		margin: 0 !important;
		font-size: 1rem !important;
		font-weight: 600 !important;
		color: var(--fx-text) !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		text-decoration: none !important;
		box-sizing: border-box;
	}
	#main-nav .menu-item-has-children > ul > li > a:hover,
	#main-nav .menu-item-has-children > ul > li > a:active {
		background: rgba(239, 14, 45, 0.08) !important;
	}

	/* === 7. BOUTON RETOUR — design clean en haut du sous-menu === */
	#main-nav .menu-item-has-children > ul > li:first-child,
	#main-nav .menu-item-has-children > .sub-menu > li:first-child {
		border-bottom: 1px solid var(--fx-border) !important;
		background: var(--fx-surface);
	}
	.flixeo-submenu-back {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
		padding: 18px 20px !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		color: var(--fx-text) !important;
		font-family: var(--fx-font-body) !important;
		font-weight: 700 !important;
		font-size: 0.95rem !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		cursor: pointer !important;
		text-align: left;
		box-sizing: border-box;
		transition: background var(--fx-fast) var(--fx-ease-out);
	}
	.flixeo-submenu-back::before {
		width: 18px !important;
		height: 18px !important;
		background-color: var(--fx-red) !important;
		flex-shrink: 0;
		margin: 0 !important;
	}
	.flixeo-submenu-back:hover,
	.flixeo-submenu-back:active {
		background: rgba(239, 14, 45, 0.08) !important;
		color: var(--fx-text) !important;
		border-color: transparent !important;
	}
	.flixeo-submenu-back:hover::before,
	.flixeo-submenu-back:active::before {
		background-color: var(--fx-red-bright) !important;
		transform: none !important;
	}
}

/* =============================================================
   FIX-7 — Panneau filtres : UX refonte (multi-select, toolbar, X)
   - Champ search dropdown : fond blanc cassé, texte noir
   - Options checkbox : texte noir, fond blanc, bordure rouge
   - Boutons "Tout effacer" / "Tout sélectionner" rendus visibles
   - Scroll-to-top à l'ouverture d'un select (JS dans flixeo-ui.js)
   - Bouton X du panneau : rond rouge proéminent
   - Toolbar : icônes rouges + badge compteur rouge/blanc
   - Mobile : bouton "Filtres" toolbar caché (doublon avec wpz-filterbar)
   - "Films au cinéma" déplacé en première position du panneau (JS)
============================================================= */

/* === 1. BOUTON X DU PANNEAU FILTRES — rouge proéminent === */
.wpz-filter-panel__close,
#wpzCloseFilters {
	background: var(--fx-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-shadow: 0 4px 14px rgba(239,14,45,0.35) !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.wpz-filter-panel__close:hover,
.wpz-filter-panel__close:focus-visible,
#wpzCloseFilters:hover,
#wpzCloseFilters:focus-visible {
	background: var(--fx-red-bright) !important;
	transform: scale(1.05);
	outline: none !important;
	box-shadow: 0 6px 18px rgba(239,14,45,0.5) !important;
}

/* === 2. INPUT "Rechercher une plateforme..." dans .wpz-multi__search === */
.wpz-filter-panel .wpz-multi__search,
.wpz-multi__search {
	padding: 10px !important;
	background: transparent !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
.wpz-filter-panel .wpz-multi__search input,
.wpz-multi__search input,
.wpz-filter-panel .wpz-multi__search input[type="text"],
.wpz-filter-panel .wpz-multi__search input[type="search"] {
	width: 100% !important;
	background: #f5f6f8 !important;
	color: #111 !important;
	border: 1px solid rgba(0,0,0,0.12) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.wpz-filter-panel .wpz-multi__search input::placeholder,
.wpz-multi__search input::placeholder {
	color: #6b6b75 !important;
	opacity: 1 !important;
	font-weight: 400 !important;
}
.wpz-filter-panel .wpz-multi__search input:focus,
.wpz-multi__search input:focus {
	background: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 3px var(--fx-red-glow), inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* === 3. OPTIONS CHECKBOX — texte noir, fond clair === */
.wpz-filter-panel .wpz-multi__options {
	background: #fff !important;
	color: #111 !important;
}
/* IMPORTANT : pas de !important sur "display" — le JS du thème utilise
   style.display = 'none' inline pour filtrer (.wpz-multi__search input)
   et un !important casserait la recherche dynamique. */
.wpz-filter-panel .wpz-multi__opt,
.wpz-multi__opt {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 12px !important;
	margin: 0 !important;
	background: transparent !important;
	color: #111 !important;
	cursor: pointer !important;
	transition: background var(--fx-fast) var(--fx-ease-out);
}
.wpz-filter-panel .wpz-multi__opt span,
.wpz-multi__opt span {
	color: #111 !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}
.wpz-filter-panel .wpz-multi__opt:hover,
.wpz-multi__opt:hover {
	background: rgba(239,14,45,0.06) !important;
}
.wpz-filter-panel .wpz-multi__opt:hover span,
.wpz-multi__opt:hover span {
	color: var(--fx-red) !important;
}

/* === 4. CHECKBOXES — blanc avec bordure rouge === */
.wpz-filter-panel .wpz-multi__opt input[type="checkbox"],
.wpz-multi__opt input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	background: #fff !important;
	border: 2px solid var(--fx-red) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	position: relative !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
	outline: none !important;
	box-shadow: none !important;
}
.wpz-filter-panel .wpz-multi__opt input[type="checkbox"]:hover,
.wpz-multi__opt input[type="checkbox"]:hover {
	border-color: var(--fx-red-bright) !important;
	background: rgba(239,14,45,0.05) !important;
}
.wpz-filter-panel .wpz-multi__opt input[type="checkbox"]:checked,
.wpz-multi__opt input[type="checkbox"]:checked {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
}
/* Coche blanche au centre quand checked */
.wpz-filter-panel .wpz-multi__opt input[type="checkbox"]:checked::after,
.wpz-multi__opt input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -55%) rotate(45deg) !important;
	width: 5px !important;
	height: 10px !important;
	border-right: 2px solid #fff !important;
	border-bottom: 2px solid #fff !important;
	background: transparent !important;
}
.wpz-filter-panel .wpz-multi__opt input[type="checkbox"]:focus-visible,
.wpz-multi__opt input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 3px var(--fx-red-glow) !important;
}

/* === 5. BOUTONS "Tout effacer" / "Tout sélectionner" === */
.wpz-filter-panel .wpz-multi__actions,
.wpz-multi__actions {
	display: flex !important;
	gap: 8px !important;
	padding: 10px !important;
	margin: 0 !important;
	background: var(--fx-surface) !important;
	border-bottom: 1px solid var(--fx-border) !important;
	grid-template-columns: none !important;
}
.wpz-filter-panel .wpz-multi__actions button,
.wpz-multi__actions button {
	flex: 1 1 50% !important;
	background: var(--fx-bg) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: 6px !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	padding: 9px 12px !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
	visibility: visible !important;
	opacity: 1 !important;
}
/* "Tout effacer" → style outline rouge */
.wpz-filter-panel .wpz-multi__actions button[data-action="clear"],
.wpz-multi__actions button[data-action="clear"] {
	border-color: var(--fx-red) !important;
	color: var(--fx-red) !important;
}
.wpz-filter-panel .wpz-multi__actions button[data-action="clear"]:hover,
.wpz-multi__actions button[data-action="clear"]:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
}
/* "Tout sélectionner" → style plein rouge */
.wpz-filter-panel .wpz-multi__actions button[data-action="all"],
.wpz-multi__actions button[data-action="all"] {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
}
.wpz-filter-panel .wpz-multi__actions button[data-action="all"]:hover,
.wpz-multi__actions button[data-action="all"]:hover {
	background: var(--fx-red-bright) !important;
	border-color: var(--fx-red-bright) !important;
}

/* === 6. TOOLBAR — Icônes rouges + badge compteur === */
.flixeo-toolbar svg,
.flixeo-toolbar__search-form > svg,
.flixeo-toolbar__search-mobile svg,
.flixeo-toolbar__btn svg,
.flixeo-toolbar__search-clear svg {
	color: var(--fx-red) !important;
	stroke: var(--fx-red) !important;
}
/* Compteur de filtres actifs : bulle rouge texte blanc */
.flixeo-toolbar__btn .count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 22px !important;
	height: 22px !important;
	padding: 0 7px !important;
	background: var(--fx-red) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	font-family: var(--fx-font-body) !important;
	line-height: 1 !important;
	margin-left: 8px !important;
	box-shadow: 0 2px 6px rgba(239,14,45,0.4);
}

/* === 7. MOBILE : on garde le bouton "Filtres" DANS LA TOOLBAR
       et on cache .wpz-filterbar (doublon, dans le contenu).
       Le bouton "🎬 Films au cinéma" de .wpz-filterbar est déplacé
       par le JS dans le canvas avant que la barre soit cachée. === */
@media (max-width: 1024px) {
	/* Cache la barre filtre dupliquée dans le contenu */
	.wpz-filterbar {
		display: none !important;
	}
	/* Le bouton filtre de la TOOLBAR reste visible AVEC son label "Filtres" */
	.flixeo-toolbar__btn--primary,
	.flixeo-toolbar__btn[data-open-filters] {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
	}
	.flixeo-toolbar__btn--primary .label-long,
	.flixeo-toolbar__btn[data-open-filters] .label-long {
		display: inline !important;
	}
}

/* === 10. BADGES "FILTRES ACTIFS" — texte rouge sur fond clair ===
       Les badges affichés en haut de la page archive (`.filtres-actifs-inline`
       > `.badge-filtre`) avaient texte hérité (--fx-text = blanc) sur fond clair
       (#fefefe / #f0f0f0) → blanc sur blanc, illisible.
       On force le texte en rouge AlloCiné + harmonise un peu le visuel. */
.filtres-actifs-inline {
	background: var(--fx-surface) !important;
	border-color: var(--fx-border-strong) !important;
}
.filtres-actifs-inline .titre-filtres,
.titre-filtres {
	color: var(--fx-red-bright) !important;
	font-weight: 700 !important;
}
.filtres-actifs-inline .badge-filtre,
.badge-filtre {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-border-red) !important;
	font-weight: 600 !important;
}
.filtres-actifs-inline .badge-filtre a,
.filtres-actifs-inline .badge-filtre span,
.badge-filtre a,
.badge-filtre span {
	color: var(--fx-red-bright) !important;
}
.filtres-actifs-inline .badge-filtre .remove-filtre,
.badge-filtre .remove-filtre {
	color: var(--fx-red) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}
.filtres-actifs-inline .badge-filtre .remove-filtre:hover,
.badge-filtre .remove-filtre:hover {
	color: var(--fx-red-bright) !important;
	text-decoration: none !important;
}

/* ===== .wpz-badge--mini (filtres actifs toolbar films) ===== */
.wpz-badge,
.wpz-badge--mini,
.wpz-badge--mini.wpz-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 9px !important;
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-border-red) !important;
	border-radius: var(--fx-radius-sm) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}
.wpz-badge strong,
.wpz-badge--mini strong {
	color: var(--fx-red-bright) !important;
	font-weight: 800 !important;
}
.wpz-badge a,
.wpz-badge--mini a,
.wpz-badge a:visited,
.wpz-badge--mini a:visited {
	color: var(--fx-red-bright) !important;
	text-decoration: none !important;
	background: none !important;
}
.wpz-badge__x {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 999px !important;
	background: rgba(239,14,45,0.15) !important;
	color: var(--fx-red) !important;
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	margin-left: 2px;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.wpz-badge__x:hover {
	background: var(--fx-red) !important;
	color: #fff !important;
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  FIX-13 — SINGLE FILM : refonte premium                    ║
   ║  Refait visuellement TOUTES les sections de la page film   ║
   ║  (hero, galerie, description, acteurs, infos, critiques,   ║
   ║  suggestions, float actions, modal trailer).               ║
   ║  Le PHP reste intact — pure surcouche DS.                  ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* =============================================================
   1) HERO FILM — Cinematic dark + backdrop premium
============================================================= */
body.flixeo-film-page .film-hero,
body.single-film .film-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: calc(-1 * var(--header-height, 64px));
	padding-top: calc(var(--header-height, 64px) + clamp(28px, 4vw, 56px));
	padding-bottom: clamp(40px, 6vw, 80px);
	overflow: hidden;
	background: var(--fx-bg-deep);
	color: var(--fx-text);
	isolation: isolate;
}

/* Backdrop image en couche basse */
body.flixeo-film-page .film-hero .film-hero-bg,
body.single-film .film-hero .film-hero-bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 18% !important;
	z-index: 0 !important;
	opacity: 0.65 !important;
	filter: saturate(1.1) contrast(1.05);
	transform: scale(1.04);
	will-change: transform, opacity;
}

/* Voiles superposés : vignettage + gradient bas → opacité 100% */
body.flixeo-film-page .film-hero::before,
body.single-film .film-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(120% 80% at 50% 30%, rgba(5,5,7,0) 0%, rgba(5,5,7,0.55) 60%, rgba(5,5,7,0.85) 100%),
		linear-gradient(180deg, rgba(5,5,7,0.4) 0%, rgba(5,5,7,0.85) 70%, var(--fx-bg-deep) 100%);
	pointer-events: none;
}

/* Conteneur interne (poster + contenu) */
body.flixeo-film-page .film-hero-inner,
body.single-film .film-hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--wpz-container, 1200px); /* ✅ même largeur que .header-inner + .breadcrumb */
	margin: 0 auto;
	padding: 0 var(--fx-gutter);
	box-sizing: border-box;                  /* ✅ alignement parfait avec le logo */
	display: grid !important;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch !important;
}

/* Poster premium : ombre profonde + ring rouge subtil */
body.flixeo-film-page .film-hero-poster,
body.single-film .film-hero-poster {
	position: relative !important;
	width: 100% !important;
	max-width: 320px !important;
	min-width: 0 !important;
	aspect-ratio: 2/3 !important;
	height: auto !important;
	max-height: none !important;
	border-radius: var(--fx-radius-lg) !important;
	overflow: visible !important;
	flex: 0 0 auto !important;
	align-self: start !important;
	display: block !important;
}
body.flixeo-film-page .film-hero-poster-img,
body.single-film .film-hero-poster-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 2/3 !important;
	max-height: none !important;
	border-radius: var(--fx-radius-lg) !important;
	overflow: hidden !important;
	align-items: initial !important;   /* annule le flex stretch du thème */
	box-shadow:
		0 30px 70px -20px rgba(0,0,0,0.85),
		0 0 0 1px var(--fx-border-strong),
		0 12px 40px -10px var(--fx-red-glow);
}
body.flixeo-film-page .film-hero-poster-img img,
body.single-film .film-hero-poster-img img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;       /* neutralise max-height du thème */
	min-height: 0 !important;
	aspect-ratio: auto !important;     /* sinon double aspect-ratio = écrasement */
	object-fit: cover !important;
	display: block !important;
	border-radius: var(--fx-radius-lg) !important;
	background: #000;
}

/* Bouton favori du hero — premium glass */
body.flixeo-film-page .film-hero-poster .action-btn.js-fav-hero,
body.single-film .film-hero-poster .action-btn.js-fav-hero {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 5;
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.1) 0%, transparent 60%),
		rgba(8,8,11,0.78) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	color: #fff !important;
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	box-shadow:
		0 6px 18px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.08);
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.flixeo-film-page .film-hero-poster .action-btn.js-fav-hero:hover,
body.single-film .film-hero-poster .action-btn.js-fav-hero:hover {
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.2) 0%, transparent 65%),
		linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border-color: var(--fx-red-bright) !important;
	transform: scale(1.08);
	box-shadow: 0 10px 26px var(--fx-red-glow), 0 0 0 4px rgba(239,14,45,0.2) !important;
}
body.flixeo-film-page .film-hero-poster .action-btn.js-fav-hero.is-fav,
body.single-film .film-hero-poster .action-btn.js-fav-hero.is-fav {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 8px 22px var(--fx-red-glow), 0 0 0 4px rgba(239,14,45,0.15) !important;
}

/* CONTENU droit du hero */
body.flixeo-film-page .film-hero-content,
body.single-film .film-hero-content {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 18px);
	min-width: 0;
}

/* Topline : pills (année, durée, genres) */
body.flixeo-film-page .film-hero-topline,
body.single-film .film-hero-topline {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}
body.flixeo-film-page .film-hero-pill,
body.single-film .film-hero-pill {
	display: inline-flex !important;
	align-items: center;
	padding: 6px 12px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--fx-radius-full);
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	backdrop-filter: blur(8px);
	white-space: nowrap;
}
body.flixeo-film-page .film-hero-pill a,
body.single-film .film-hero-pill a {
	color: var(--fx-text-soft) !important;
	text-decoration: none !important;
	transition: color var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .film-hero-pill a:hover,
body.single-film .film-hero-pill a:hover {
	color: var(--fx-red-bright) !important;
}

/* Badge "Au cinéma" hero — rouge premium gradient */
body.flixeo-film-page .film-hero-cinema-badge,
body.single-film .film-hero-cinema-badge {
	display: inline-flex !important;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 8px 14px;
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--fx-radius);
	font-family: var(--fx-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: 0 8px 24px var(--fx-red-glow);
}
body.flixeo-film-page .film-hero-cinema-badge::before,
body.single-film .film-hero-cinema-badge::before {
	content: '🎬';
	font-size: 0.95rem;
}

/* Titre du film — display font impact */
body.flixeo-film-page .film-hero-title,
body.single-film .film-hero-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-size: clamp(2rem, 5vw, 3.6rem) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: -0.025em;
	color: var(--fx-text) !important;
	text-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
body.flixeo-film-page .film-hero-title .film-hero-year,
body.single-film .film-hero-title .film-hero-year {
	color: var(--fx-text-mute) !important;
	font-weight: 600 !important;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem) !important;
	letter-spacing: 0 !important;
	margin-left: 8px;
	vertical-align: middle;
}

/* Note + étoiles */
body.flixeo-film-page .film-hero-rating,
body.single-film .film-hero-rating {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.flixeo-film-page .film-hero-rating .etoiles,
body.single-film .film-hero-rating .etoiles {
	display: inline-flex;
	gap: 2px;
}
body.flixeo-film-page .film-hero-rating .etoile,
body.single-film .film-hero-rating .etoile {
	color: var(--fx-star) !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	text-shadow: 0 2px 8px rgba(255, 184, 0, 0.35);
}
body.flixeo-film-page .film-hero-rating .etoile.vide,
body.single-film .film-hero-rating .etoile.vide {
	color: var(--fx-star-dim) !important;
	text-shadow: none;
}
body.flixeo-film-page .film-hero-rating .etoile.demi,
body.single-film .film-hero-rating .etoile.demi {
	position: relative;
	color: var(--fx-star-dim) !important;
}
body.flixeo-film-page .film-hero-rating .etoile.demi::before,
body.single-film .film-hero-rating .etoile.demi::before {
	content: '★';
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	color: var(--fx-star);
	text-shadow: 0 2px 8px rgba(255, 184, 0, 0.35);
}
body.flixeo-film-page .film-hero-rating .note,
body.single-film .film-hero-rating .note {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
}
body.flixeo-film-page .film-hero-rating .votes,
body.single-film .film-hero-rating .votes {
	color: var(--fx-text-mute) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
}

/* Tagline */
body.flixeo-film-page .film-hero-tagline,
body.single-film .film-hero-tagline {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-serif) !important;
	font-style: italic !important;
	font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
	line-height: 1.45 !important;
	max-width: 64ch;
}

/* TMDb source */
body.flixeo-film-page .tmdb-source,
body.single-film .tmdb-source {
	color: var(--fx-text-mute) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.02em;
}
body.flixeo-film-page .tmdb-source a,
body.single-film .tmdb-source a {
	color: var(--fx-red-bright) !important;
	text-decoration: none !important;
}
body.flixeo-film-page .tmdb-source a:hover,
body.single-film .tmdb-source a:hover {
	text-decoration: underline !important;
}

/* Plateformes hero */
body.flixeo-film-page .film-hero-platforms,
body.single-film .film-hero-platforms {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 4px 0 !important;
	padding: 12px 14px !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.07) !important;
	border-radius: var(--fx-radius);
	backdrop-filter: blur(6px);
}
body.flixeo-film-page .film-hero-platforms-label,
body.single-film .film-hero-platforms-label {
	color: var(--fx-text-mute) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
body.flixeo-film-page .film-hero-platforms-logos,
body.single-film .film-hero-platforms-logos {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap;
}
body.flixeo-film-page .film-hero-platform,
body.single-film .film-hero-platform {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 5px;
	background: #fff;
	border-radius: var(--fx-radius-sm);
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .film-hero-platform:hover,
body.single-film .film-hero-platform:hover {
	transform: translateY(-2px) scale(1.08);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
body.flixeo-film-page .film-hero-platform img,
body.single-film .film-hero-platform img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* CTA buttons hero — bande-annonce + séances */
body.flixeo-film-page .film-hero-cta,
body.single-film .film-hero-cta {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px !important;
	margin-top: 6px;
}
body.flixeo-film-page .btn-trailer-desktop,
body.single-film .btn-trailer-desktop {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	border: 0 !important;
	border-radius: var(--fx-radius);
	color: #fff !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	font-size: 0.92rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer !important;
	box-shadow: 0 8px 26px var(--fx-red-glow);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-film-page .btn-trailer-desktop:hover,
body.single-film .btn-trailer-desktop:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px var(--fx-red-glow);
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
}
body.flixeo-film-page .btn-trailer-desktop::before,
body.single-film .btn-trailer-desktop::before {
	content: '▶';
	font-size: 0.85rem;
}
body.flixeo-film-page .btn-seances-cinema,
body.single-film .btn-seances-cinema {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	border-radius: var(--fx-radius);
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	backdrop-filter: blur(8px);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-film-page .btn-seances-cinema:hover,
body.single-film .btn-seances-cinema:hover {
	background: rgba(255,255,255,0.12) !important;
	border-color: var(--fx-red-bright) !important;
	color: var(--fx-red-bright) !important;
	transform: translateY(-2px);
}

/* MOBILE hero : stack vertical, poster grand + image entière, tout à gauche */
@media (max-width: 768px) {
	body.flixeo-film-page .film-hero-inner,
	body.single-film .film-hero-inner {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
		text-align: left !important;
		padding: 14px var(--fx-gutter, 16px) !important;
		justify-items: start !important;
	}

	/* ✅ Poster mobile : grand, aligné à gauche, image entière (contain) */
	body.flixeo-film-page .film-hero-poster,
	body.single-film .film-hero-poster {
		width: 100% !important;
		max-width: min(320px, 70vw) !important;
		margin: 0 !important;
		justify-self: start !important;
		align-self: start !important;
		aspect-ratio: 2 / 3 !important;
	}

	/* ✅ Le wrap remplit le poster sans bande noire visible */
	body.flixeo-film-page .film-hero-poster-img,
	body.single-film .film-hero-poster-img {
		aspect-ratio: 2 / 3 !important;
		background: transparent !important;
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		overflow: hidden !important;
		border-radius: var(--fx-radius-lg, 14px) !important;
	}

	/* ✅ L'image remplit le container avec le radius, sans déformation */
	body.flixeo-film-page .film-hero-poster-img img,
	body.single-film .film-hero-poster-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
		background: transparent !important;
		display: block !important;
		border-radius: var(--fx-radius-lg, 14px) !important;
	}

	body.flixeo-film-page .film-hero-content,
	body.single-film .film-hero-content {
		text-align: left !important;
		align-items: flex-start !important;
		width: 100% !important;
	}

	/* ✅ tous les enfants du content alignés à gauche, pas étirés */
	body.flixeo-film-page .film-hero-content > *,
	body.single-film .film-hero-content > * {
		align-self: flex-start !important;
		text-align: left !important;
	}

	/* ✅ Rating : étoiles + note l'un en dessous de l'autre, alignés à gauche */
	body.flixeo-film-page .film-hero-rating,
	body.single-film .film-hero-rating {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
		text-align: left !important;
		width: 100% !important;
	}
	body.flixeo-film-page .film-hero-rating .etoiles,
	body.flixeo-film-page .film-hero-rating .note,
	body.flixeo-film-page .film-hero-rating .votes,
	body.single-film .film-hero-rating .etoiles,
	body.single-film .film-hero-rating .note,
	body.single-film .film-hero-rating .votes {
		text-align: left !important;
		align-self: flex-start !important;
		justify-content: flex-start !important;
	}

	/* ✅ Plateformes (label + logos) tout à gauche */
	body.flixeo-film-page .film-hero-platforms,
	body.single-film .film-hero-platforms {
		align-items: flex-start !important;
		text-align: left !important;
		width: 100% !important;
	}
	body.flixeo-film-page .film-hero-platforms-logos,
	body.single-film .film-hero-platforms-logos {
		justify-content: flex-start !important;
	}

	/* ✅ Topline (pills année / durée / genres) à gauche */
	body.flixeo-film-page .film-hero-topline,
	body.single-film .film-hero-topline {
		justify-content: flex-start !important;
		align-items: center !important;
		width: 100% !important;
	}

	/* ✅ Titre + date à gauche */
	body.flixeo-film-page .film-hero-title,
	body.flixeo-film-page .film-hero-year,
	body.flixeo-film-page .film-hero-date,
	body.single-film .film-hero-title,
	body.single-film .film-hero-year,
	body.single-film .film-hero-date {
		text-align: left !important;
		align-self: flex-start !important;
		width: 100% !important;
	}

	body.flixeo-film-page .film-hero-cta,
	body.single-film .film-hero-cta {
		flex-direction: column;
		align-self: stretch !important;
	}
	body.flixeo-film-page .btn-trailer-desktop,
	body.flixeo-film-page .btn-seances-cinema,
	body.single-film .btn-trailer-desktop,
	body.single-film .btn-seances-cinema {
		width: 100%;
		justify-content: center;
	}
}

/* ✅ DESKTOP : tout le contenu strictement aligné à gauche */
@media (min-width: 769px) {
	body.flixeo-film-page .film-hero-content,
	body.single-film .film-hero-content {
		align-items: flex-start !important;
		text-align: left !important;
	}
	body.flixeo-film-page .film-hero-content > *,
	body.single-film .film-hero-content > * {
		align-self: flex-start !important;
		text-align: left !important;
	}

	/* ✅ Bloc rating (étoiles + note + votes) collé à gauche */
	body.flixeo-film-page .film-hero-rating,
	body.single-film .film-hero-rating {
		justify-content: flex-start !important;
		align-self: flex-start !important;
		align-items: center !important;
		text-align: left !important;
		width: auto !important;
		margin-right: auto !important; /* pousse l'espace à droite, pas au centre */
	}
	body.flixeo-film-page .film-hero-rating .etoiles,
	body.flixeo-film-page .film-hero-rating .note,
	body.flixeo-film-page .film-hero-rating .votes,
	body.single-film .film-hero-rating .etoiles,
	body.single-film .film-hero-rating .note,
	body.single-film .film-hero-rating .votes {
		text-align: left !important;
		justify-content: flex-start !important;
	}

	body.flixeo-film-page .film-hero-platforms,
	body.single-film .film-hero-platforms {
		align-items: flex-start !important;
	}
	body.flixeo-film-page .film-hero-platforms-logos,
	body.single-film .film-hero-platforms-logos {
		justify-content: flex-start !important;
	}

	/* Titre, topline, tagline, source TMDb : strict gauche */
	body.flixeo-film-page .film-hero-title,
	body.flixeo-film-page .film-hero-topline,
	body.flixeo-film-page .film-hero-tagline,
	body.flixeo-film-page .tmdb-source,
	body.single-film .film-hero-title,
	body.single-film .film-hero-topline,
	body.single-film .film-hero-tagline,
	body.single-film .tmdb-source {
		text-align: left !important;
		align-self: flex-start !important;
	}
}

/* =============================================================
   2) GALERIE BACKDROPS — scroll horizontal premium
============================================================= */
body.flixeo-film-page .film-backdrops,
body.single-film .film-backdrops {
	max-width: var(--fx-max-w);
	margin: clamp(36px, 5vw, 56px) auto !important;
	padding: 0 var(--fx-gutter);
}
body.flixeo-film-page .film-backdrops h2,
body.single-film .film-backdrops h2 {
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.01em;
	margin: 0 0 16px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fx-red);
	display: inline-block;
}
body.flixeo-film-page .backdrops-scroll-wrapper,
body.single-film .backdrops-scroll-wrapper {
	display: flex !important;
	gap: 14px !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--fx-red) transparent;
}
body.flixeo-film-page .backdrops-scroll-wrapper::-webkit-scrollbar,
body.single-film .backdrops-scroll-wrapper::-webkit-scrollbar {
	height: 6px;
}
body.flixeo-film-page .backdrops-scroll-wrapper::-webkit-scrollbar-thumb,
body.single-film .backdrops-scroll-wrapper::-webkit-scrollbar-thumb {
	background: var(--fx-red);
	border-radius: 999px;
}
body.flixeo-film-page .backdrop-slide,
body.single-film .backdrop-slide {
	flex: 0 0 clamp(280px, 38vw, 520px);
	aspect-ratio: 16/9;
	scroll-snap-align: start;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	background: var(--fx-surface);
	box-shadow: 0 10px 28px -8px rgba(0,0,0,0.6);
	transition: transform var(--fx-base) var(--fx-ease-out);
}
body.flixeo-film-page .backdrop-slide:hover,
body.single-film .backdrop-slide:hover {
	transform: scale(1.02);
}
body.flixeo-film-page .backdrop-slide a,
body.single-film .backdrop-slide a {
	display: block;
	width: 100%;
	height: 100%;
}
body.flixeo-film-page .backdrop-slide img,
body.single-film .backdrop-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--fx-slow) var(--fx-ease-out);
}
body.flixeo-film-page .backdrop-slide:hover img,
body.single-film .backdrop-slide:hover img {
	transform: scale(1.05);
}

/* =============================================================
   3) DESCRIPTION (synopsis) — typo lisible serif élégante
============================================================= */
body.flixeo-film-page .film-description,
body.single-film .film-description {
	max-width: 880px;
	margin: clamp(28px, 4vw, 48px) auto !important;
	padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px) !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg);
	border-left: 4px solid var(--fx-red) !important;
}
body.flixeo-film-page .film-description__inner,
body.single-film .film-description__inner {
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.025rem !important;
	line-height: 1.75 !important;
	letter-spacing: 0.005em;
}
body.flixeo-film-page .film-description p,
body.single-film .film-description p {
	margin: 0 0 1em !important;
	color: var(--fx-text-soft) !important;
}
body.flixeo-film-page .film-description p:last-child,
body.single-film .film-description p:last-child {
	margin-bottom: 0 !important;
}
body.flixeo-film-page .film-description a,
body.single-film .film-description a {
	color: var(--fx-red-bright) !important;
}

/* =============================================================
   4) CONTAINER + section titles cohérents
============================================================= */
body.flixeo-film-page .film-container,
body.single-film .film-container {
	max-width: var(--fx-max-w);
	margin: 0 auto;
	padding: 0 var(--fx-gutter);
}
body.flixeo-film-page .films-block__title,
body.flixeo-film-page .film-infos-meta .section-title,
body.single-film .films-block__title,
body.single-film .film-infos-meta .section-title {
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.01em;
	margin: 0 0 18px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fx-red);
	display: inline-block;
	text-transform: none;
}

/* =============================================================
   5) ACTEURS CAROUSEL — wrap propre + flèches rouges
============================================================= */
body.flixeo-film-page .film-casting,
body.single-film .film-casting,
body.flixeo-film-page .films-block,
body.single-film .films-block {
	margin: clamp(32px, 5vw, 56px) 0 !important;
}
body.flixeo-film-page .carousel-wrapper,
body.single-film .carousel-wrapper {
	position: relative;
}
body.flixeo-film-page .carousel-arrow,
body.single-film .carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(8,8,11,0.78) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	color: #fff !important;
	font-size: 1.4rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.5);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .carousel-arrow:hover,
body.single-film .carousel-arrow:hover {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-50%) scale(1.08);
}
body.flixeo-film-page .carousel-arrow-left,
body.single-film .carousel-arrow-left { left: -16px; }
body.flixeo-film-page .carousel-arrow-right,
body.single-film .carousel-arrow-right { right: -16px; }

@media (max-width: 768px) {
	body.flixeo-film-page .carousel-arrow,
	body.single-film .carousel-arrow {
		display: none !important;
	}
}

body.flixeo-film-page .films-carousel,
body.single-film .films-carousel,
body.flixeo-film-page .suggestions-scroll-wrapper,
body.single-film .suggestions-scroll-wrapper {
	display: flex !important;
	gap: 16px !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--fx-red) transparent;
}
body.flixeo-film-page .films-carousel > *,
body.single-film .films-carousel > *,
body.flixeo-film-page .suggestions-scroll-wrapper > *,
body.single-film .suggestions-scroll-wrapper > * {
	flex: 0 0 clamp(160px, 22vw, 220px);
	scroll-snap-align: start;
}
body.flixeo-film-page .films-carousel::-webkit-scrollbar,
body.flixeo-film-page .suggestions-scroll-wrapper::-webkit-scrollbar,
body.single-film .films-carousel::-webkit-scrollbar,
body.single-film .suggestions-scroll-wrapper::-webkit-scrollbar {
	height: 6px;
}
body.flixeo-film-page .films-carousel::-webkit-scrollbar-thumb,
body.flixeo-film-page .suggestions-scroll-wrapper::-webkit-scrollbar-thumb,
body.single-film .films-carousel::-webkit-scrollbar-thumb,
body.single-film .suggestions-scroll-wrapper::-webkit-scrollbar-thumb {
	background: var(--fx-red);
	border-radius: 999px;
}

/* =============================================================
   6) INFOS DE PRODUCTION — table premium dark
============================================================= */
body.flixeo-film-page .film-infos-meta,
body.single-film .film-infos-meta {
	margin: clamp(32px, 5vw, 56px) 0 !important;
}
body.flixeo-film-page .film-infos-extra-table,
body.single-film .film-infos-extra-table {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
}
body.flixeo-film-page .table-infos-production,
body.single-film .table-infos-production {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	background: transparent !important;
}
body.flixeo-film-page .table-infos-production tr,
body.single-film .table-infos-production tr {
	background: transparent !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
body.flixeo-film-page .table-infos-production tr:last-child,
body.single-film .table-infos-production tr:last-child {
	border-bottom: 0 !important;
}
body.flixeo-film-page .table-infos-production th,
body.single-film .table-infos-production th {
	width: 200px;
	min-width: 140px;
	padding: 14px 18px !important;
	background: var(--fx-bg-deep) !important;
	color: var(--fx-red-bright) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	vertical-align: top !important;
	border: 0 !important;
}
body.flixeo-film-page .table-infos-production td,
body.single-film .table-infos-production td {
	padding: 14px 18px !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
	line-height: 1.5 !important;
	border: 0 !important;
	vertical-align: top !important;
}
body.flixeo-film-page .table-infos-production td a,
body.single-film .table-infos-production td a {
	color: var(--fx-red-bright) !important;
	text-decoration: none !important;
	border-bottom: 1px dashed var(--fx-border-red);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .table-infos-production td a:hover,
body.single-film .table-infos-production td a:hover {
	color: var(--fx-red) !important;
	border-bottom-color: var(--fx-red);
}
body.flixeo-film-page .table-infos-production .meta-note,
body.single-film .table-infos-production .meta-note {
	color: var(--fx-text-mute) !important;
	font-size: 0.82rem !important;
	font-style: italic;
}

@media (max-width: 600px) {
	body.flixeo-film-page .table-infos-production th,
	body.flixeo-film-page .table-infos-production td,
	body.single-film .table-infos-production th,
	body.single-film .table-infos-production td {
		display: block;
		width: 100% !important;
		padding: 10px 14px !important;
	}
	body.flixeo-film-page .table-infos-production th,
	body.single-film .table-infos-production th {
		padding-bottom: 4px !important;
		background: var(--fx-surface) !important;
	}
}

/* =============================================================
   7) CRITIQUES — cartes glassmorphism
============================================================= */
body.flixeo-film-page .film-critiques,
body.single-film .film-critiques {
	margin: clamp(32px, 5vw, 56px) 0 !important;
}
body.flixeo-film-page .film-critique-card,
body.single-film .film-critique-card {
	flex: 0 0 clamp(280px, 40vw, 460px) !important;
	scroll-snap-align: start;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-film-page .film-critique-card:hover,
body.single-film .film-critique-card:hover {
	border-color: var(--fx-red);
	box-shadow: 0 18px 40px -14px rgba(0,0,0,0.7), 0 0 0 1px var(--fx-red-glow);
	transform: translateY(-3px);
}
body.flixeo-film-page .film-critique-card__inner,
body.single-film .film-critique-card__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	height: 100%;
}
body.flixeo-film-page .film-critique-card__title,
body.single-film .film-critique-card__title {
	margin: 0 !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
body.flixeo-film-page .film-critique-card__content,
body.single-film .film-critique-card__content {
	color: var(--fx-text-soft) !important;
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	max-height: 220px;
	overflow: hidden;
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
body.flixeo-film-page .film-critique-card__content p,
body.single-film .film-critique-card__content p {
	margin: 0 0 0.7em !important;
	color: var(--fx-text-soft) !important;
}
body.flixeo-film-page .film-critique-card__footer,
body.single-film .film-critique-card__footer {
	margin-top: auto;
	padding-top: 4px;
}
body.flixeo-film-page .wpz-btn.wpz-btn--soft,
body.single-film .wpz-btn.wpz-btn--soft {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 7px 14px !important;
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-border-red) !important;
	border-radius: var(--fx-radius-sm) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .wpz-btn.wpz-btn--soft:hover,
body.single-film .wpz-btn.wpz-btn--soft:hover {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
}

/* =============================================================
   8) SUGGESTIONS (saga, par acteur, par réal, par genre)
============================================================= */
body.flixeo-film-page .film-suggestions,
body.single-film .film-suggestions {
	margin: clamp(32px, 5vw, 56px) 0 !important;
}
body.flixeo-film-page .film-suggestions h3,
body.single-film .film-suggestions h3 {
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
	font-weight: 800 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.01em;
	margin: 0 0 18px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fx-red);
	display: inline-block;
}

/* =============================================================
   9) FLOAT ACTIONS MOBILE — sticky bottom premium
============================================================= */
body.flixeo-film-page .wpz-float-actions,
body.single-film .wpz-float-actions {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 9000;
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
body.flixeo-film-page .wpz-float-actions > *,
body.single-film .wpz-float-actions > * {
	pointer-events: auto;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .btn-trailer-float,
body.single-film .btn-trailer-float {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 1.3rem;
	font-weight: 700;
	padding-left: 4px; /* compense le triangle */
}
body.flixeo-film-page .btn-trailer-float:hover,
body.flixeo-film-page .btn-trailer-float:active,
body.single-film .btn-trailer-float:hover,
body.single-film .btn-trailer-float:active {
	transform: scale(1.08);
	box-shadow: 0 12px 32px var(--fx-red-glow);
}
body.flixeo-film-page .btn-seances-float,
body.single-film .btn-seances-float {
	background: rgba(8,8,11,0.85) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	color: var(--fx-red-bright) !important;
	backdrop-filter: blur(10px);
}
body.flixeo-film-page .btn-seances-float svg,
body.single-film .btn-seances-float svg {
	width: 24px;
	height: 24px;
}
body.flixeo-film-page .btn-seances-float:hover,
body.single-film .btn-seances-float:hover {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	transform: scale(1.08);
}

@media (min-width: 769px) {
	body.flixeo-film-page .wpz-float-actions,
	body.single-film .wpz-float-actions {
		display: none !important;
	}
}

/* =============================================================
   10) MODAL TRAILER — cinematic dark fullscreen
============================================================= */
body.flixeo-film-page .modal-trailer,
body.single-film .modal-trailer {
	background: rgba(5,5,7,0.96) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
body.flixeo-film-page .modal-trailer-content,
body.single-film .modal-trailer-content {
	position: relative;
	width: min(92vw, 1080px);
	aspect-ratio: 16/9;
	background: #000;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 80px -10px rgba(0,0,0,0.9);
}
body.flixeo-film-page .modal-trailer iframe,
body.single-film .modal-trailer iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}
body.flixeo-film-page .modal-trailer .close-modal,
body.single-film .modal-trailer .close-modal {
	position: absolute !important;
	top: -52px !important;
	right: 0 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	background: var(--fx-red) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 20px var(--fx-red-glow);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-film-page .modal-trailer .close-modal:hover,
body.single-film .modal-trailer .close-modal:hover {
	background: var(--fx-red-bright) !important;
	transform: scale(1.08) rotate(90deg);
}

/* =============================================================
   11) PERFORMANCE — content-visibility (rendu différé sections basses)
   Le navigateur n'affiche / paint que ce qui est proche du viewport
============================================================= */
body.flixeo-film-page .film-backdrops,
body.flixeo-film-page .film-casting,
body.flixeo-film-page .film-infos-meta,
body.flixeo-film-page .film-critiques,
body.flixeo-film-page .film-suggestions,
body.single-film .film-backdrops,
body.single-film .film-casting,
body.single-film .film-infos-meta,
body.single-film .film-critiques,
body.single-film .film-suggestions {
	content-visibility: auto;
	contain-intrinsic-size: 500px;
}

/* =============================================================
   FIX-14a — Description : PLEINE LARGEUR du container (single-film)
   On override le max-width 880px de la refonte initiale
============================================================= */
body.flixeo-film-page .film-description,
body.flixeo-film-page .film-description--below-hero,
body.single-film .film-description,
body.single-film .film-description--below-hero {
	max-width: var(--fx-max-w) !important;
	width: auto !important;
}

/* =============================================================
   FIX-14b — Forum context : texte lisible, design premium dark
============================================================= */
body.flixeo-themed .wpz-forum-context {
	max-width: var(--fx-max-w);
	margin: clamp(32px, 5vw, 56px) auto !important;
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg);
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpz-forum-context__head {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fx-border);
}
body.flixeo-themed .wpz-forum-context__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	border: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
body.flixeo-themed .wpz-forum-context__title::before {
	content: '💬';
	font-size: 0.95em;
}
body.flixeo-themed .wpz-forum-context__cta {
	display: inline-flex;
}
body.flixeo-themed .wpz-forum-context__list {
	color: var(--fx-text-soft) !important;
}
body.flixeo-themed .wpz-forum-muted {
	margin: 0 !important;
	padding: 18px 16px !important;
	background: var(--fx-bg-deep) !important;
	border: 1px dashed var(--fx-border-strong) !important;
	border-radius: var(--fx-radius);
	color: var(--fx-text-mute) !important;
	font-style: italic;
	font-size: 0.92rem;
	text-align: center;
}

/* Boutons forum */
body.flixeo-themed .wpz-forum-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 18px !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.02em;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpz-forum-btn:hover {
	background: var(--fx-surface-hover) !important;
	border-color: var(--fx-red) !important;
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .wpz-forum-btn--primary,
body.flixeo-themed button.wpz-forum-btn--primary {
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px var(--fx-red-glow);
}
body.flixeo-themed .wpz-forum-btn--primary:hover,
body.flixeo-themed button.wpz-forum-btn--primary:hover {
	background: linear-gradient(135deg, var(--fx-red-bright) 0%, var(--fx-red) 100%) !important;
	border-color: var(--fx-red-bright) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px var(--fx-red-glow);
}

/* Modal forum (création topic) */
body.flixeo-themed .wpz-forum-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(5,5,7,0.85);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
body.flixeo-themed .wpz-forum-modal[hidden] {
	display: none !important;
}
body.flixeo-themed .wpz-forum-modal__box {
	width: min(560px, 100%);
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-lg);
	box-shadow: 0 30px 80px -10px rgba(0,0,0,0.9);
	overflow: hidden;
}
body.flixeo-themed .wpz-forum-modal__head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px !important;
	background: var(--fx-bg-deep) !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
body.flixeo-themed .wpz-forum-modal__head strong {
	color: var(--fx-text) !important;
	font-weight: 800 !important;
	font-size: 1rem;
	letter-spacing: -0.01em;
}
body.flixeo-themed .wpz-forum-modal__close {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--fx-red) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpz-forum-modal__close:hover {
	background: var(--fx-red-bright) !important;
	transform: scale(1.08) rotate(90deg);
}
body.flixeo-themed .wpz-forum-modal__body {
	padding: 20px !important;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.flixeo-themed .wpz-forum-field {
	display: flex !important;
	flex-direction: column;
	gap: 6px;
}
body.flixeo-themed .wpz-forum-field > span {
	color: var(--fx-red-bright) !important;
	font-size: 0.74rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
body.flixeo-themed .wpz-forum-input,
body.flixeo-themed .wpz-forum-textarea {
	width: 100% !important;
	background: var(--fx-bg-deep) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	padding: 10px 12px !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
	line-height: 1.5 !important;
	box-sizing: border-box;
}
body.flixeo-themed .wpz-forum-input::placeholder,
body.flixeo-themed .wpz-forum-textarea::placeholder {
	color: var(--fx-text-mute) !important;
	opacity: 1;
}
body.flixeo-themed .wpz-forum-actions {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
body.flixeo-themed .wpz-forum-msg {
	color: var(--fx-text-mute) !important;
	font-size: 0.85rem;
}

/* =============================================================
   FIX-14c — Drapeaux : taille fixe + pas de rotation + contain
   (anti héritage : certains drapeaux apparaissaient déformés
   ou tournés à cause d'un transform parent). Avec object-fit:contain
   et un rapport correct, ils s'affichent toujours à l'endroit.
============================================================= */
.flixeo-flag-img,
.acteur-flag .flixeo-flag-img,
.country-flag .flixeo-flag-img {
	transform: none !important;
	rotate: 0deg !important;
	-webkit-transform: none !important;
	writing-mode: horizontal-tb !important;
	backface-visibility: visible !important;
	overflow: hidden;
}
.flixeo-flag-img img,
.acteur-flag .flixeo-flag-img img {
	transform: none !important;
	rotate: 0deg !important;
	-webkit-transform: none !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
}

/* Cas spécifique : conteneur .acteur-flag est ROND (border-radius:999px
   avec width=height=30px), mais le drapeau a un ratio ~3:2 → il était
   cropé. On retire le rond et on garde un rectangle propre du drapeau. */
.film-card .acteur-flag,
a.acteur-card.carousel-film-card.film-card .acteur-flag {
	width: 32px !important;
	height: 22px !important;
	border-radius: var(--fx-radius-sm) !important;
	padding: 0 !important;
	background: rgba(0,0,0,0.45) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
	overflow: hidden !important;
}
.film-card .acteur-flag .flixeo-flag-img,
a.acteur-card.carousel-film-card.film-card .acteur-flag .flixeo-flag-img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* =============================================================
   FIX-15 — Canvas "Mon compte" (drawer mobile + desktop premium)
   Ouvert via [data-open-account]. Style cohérent avec offcanvas
   menu et canvas notif. Icônes SVG rouges Lucide-style.
============================================================= */

/* Backdrop (overlay sombre derrière) */
.flixeo-account-canvas-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9988;
	background: rgba(5, 5, 7, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s var(--fx-ease-out);
}
.flixeo-account-canvas-backdrop[hidden] {
	display: block;
}
.flixeo-account-canvas-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Canvas */
.flixeo-account-canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 90vw);
	height: 100vh;
	height: 100dvh;
	z-index: 9990;
	background: linear-gradient(180deg, #0a0b0e 0%, #08090c 100%);
	border-left: 1px solid var(--fx-border-strong);
	box-shadow: -24px 0 60px -15px rgba(0,0,0,0.85);
	transform: translateX(100%);
	transition: transform 0.34s var(--fx-ease-out);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.flixeo-account-canvas[hidden] {
	display: flex !important;
	transform: translateX(100%);
	pointer-events: none;
}
.flixeo-account-canvas.is-open {
	transform: translateX(0);
	pointer-events: auto;
}

/* === HEAD : Profil + bouton fermer === */
.flixeo-account-canvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 16px;
	padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
	background: linear-gradient(180deg,
		rgba(239, 14, 45, 0.08) 0%,
		rgba(239, 14, 45, 0.02) 60%,
		transparent 100%);
	border-bottom: 1px solid var(--fx-border);
	flex-shrink: 0;
}

.flixeo-account-canvas__profile {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1;
}
.flixeo-account-canvas__avatar {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--fx-surface);
	border: 2px solid var(--fx-red);
	box-shadow: 0 4px 14px var(--fx-red-glow);
	flex-shrink: 0;
}
.flixeo-account-canvas__avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fx-red-bright);
}
.flixeo-account-canvas__user {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.flixeo-account-canvas__name {
	color: var(--fx-text);
	font-family: var(--fx-font-body);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.flixeo-account-canvas__email {
	color: var(--fx-text-mute);
	font-size: 0.78rem;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Bouton fermer (X rouge premium) */
.flixeo-account-canvas__close {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 999px;
	background: var(--fx-surface);
	border: 1px solid var(--fx-border-strong);
	color: var(--fx-text);
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.flixeo-account-canvas__close:hover,
.flixeo-account-canvas__close:focus-visible {
	background: var(--fx-red);
	color: #fff;
	border-color: var(--fx-red);
	outline: none;
	transform: scale(1.05) rotate(90deg);
}
.flixeo-account-canvas__close svg {
	width: 20px;
	height: 20px;
}

/* === NAV : items avec icônes SVG rouges === */
.flixeo-account-canvas__nav {
	flex: 1;
	min-height: 0;
	padding: 8px 0 24px;
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.flixeo-account-canvas__item {
	display: flex !important;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 20px;
	color: var(--fx-text) !important;
	background: transparent !important;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	font-family: var(--fx-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.96rem !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background var(--fx-fast) var(--fx-ease-out),
	            transform var(--fx-fast) var(--fx-ease-out);
}
.flixeo-account-canvas__item:hover,
.flixeo-account-canvas__item:focus-visible {
	background: rgba(239, 14, 45, 0.08) !important;
	color: var(--fx-text) !important;
	outline: none;
}
.flixeo-account-canvas__item:hover .flixeo-account-canvas__ico,
.flixeo-account-canvas__item:focus-visible .flixeo-account-canvas__ico {
	transform: scale(1.1);
	background: var(--fx-red);
	color: #fff;
}
.flixeo-account-canvas__item:hover .flixeo-account-canvas__caret,
.flixeo-account-canvas__item:focus-visible .flixeo-account-canvas__caret {
	transform: translateX(3px);
	color: var(--fx-red-bright);
}

/* Icône à gauche (rond rouge tinted) */
.flixeo-account-canvas__ico {
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 999px;
	background: var(--fx-red-tint);
	color: var(--fx-red);
	border: 1px solid var(--fx-border-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.flixeo-account-canvas__ico svg {
	width: 18px;
	height: 18px;
}

/* Label */
.flixeo-account-canvas__label {
	flex: 1;
	min-width: 0;
	color: inherit;
}

/* Caret (chevron à droite) */
.flixeo-account-canvas__caret {
	color: var(--fx-text-mute);
	flex-shrink: 0;
	transition: all var(--fx-fast) var(--fx-ease-out);
}

/* Séparateur entre items principaux et déconnexion */
.flixeo-account-canvas__divider {
	height: 1px;
	background: var(--fx-border);
	margin: 16px 20px;
}

/* Item Déconnexion : style spécifique rouge */
.flixeo-account-canvas__item--logout {
	color: var(--fx-red-bright) !important;
}
.flixeo-account-canvas__item--logout .flixeo-account-canvas__ico {
	background: var(--fx-red);
	color: #fff;
	border-color: var(--fx-red);
}
.flixeo-account-canvas__item--logout:hover,
.flixeo-account-canvas__item--logout:focus-visible {
	background: var(--fx-red) !important;
	color: #fff !important;
}
.flixeo-account-canvas__item--logout:hover .flixeo-account-canvas__ico,
.flixeo-account-canvas__item--logout:focus-visible .flixeo-account-canvas__ico {
	background: #fff;
	color: var(--fx-red);
	border-color: #fff;
}

/* Item CTA (guest) */
.flixeo-account-canvas__item--cta {
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	color: #fff !important;
	margin: 12px 16px;
	border-radius: var(--fx-radius);
	border-bottom: 0;
	box-shadow: 0 6px 20px var(--fx-red-glow);
}
.flixeo-account-canvas__item--cta:hover,
.flixeo-account-canvas__item--cta:focus-visible {
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.flixeo-account-canvas__item--cta .flixeo-account-canvas__ico {
	background: rgba(255,255,255,0.15);
	color: #fff;
	border-color: rgba(255,255,255,0.25);
}

/* MOBILE : canvas plein écran */
@media (max-width: 600px) {
	.flixeo-account-canvas {
		width: 100vw !important;
		max-width: 100vw !important;
		border-left: 0 !important;
	}
}

/* État actif du bouton account header (quand canvas ouvert) */
.site-header .header-action-btn--account[aria-expanded="true"] {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 4px var(--fx-red-glow) !important;
}
.site-header .header-action-btn--account[aria-expanded="true"] svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* =============================================================
   FIX-16 — Boutons header uniformes (rond cercle cohérent)
   - Burger : rond surface + icône BLANCHE
   - Loupe mobile : rond surface + icône ROUGE
   - Bouton compte : rond surface + icône ROUGE
   Le thème surcharge avec background:none / border:none → on force.
============================================================= */

/* Base commune (rond cercle) — tous les boutons d'action du header */
.site-header .header-action-btn,
.site-header .header-action-btn.burger,
.site-header .header-action-btn--search-mobile,
.site-header .header-action-btn--account,
.site-header #burger-menu {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	border-radius: 999px !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	cursor: pointer !important;
	box-shadow:
		0 4px 12px rgba(0,0,0,0.35),
		inset 0 1px 0 rgba(255,255,255,0.05);
	transition: all var(--fx-fast) var(--fx-ease-out);
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}

/* Hover commun : effet rouge soft + lift */
.site-header .header-action-btn:hover,
.site-header .header-action-btn.burger:hover,
.site-header .header-action-btn--search-mobile:hover,
.site-header .header-action-btn--account:hover,
.site-header #burger-menu:hover {
	background: var(--fx-red-tint) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-1px);
	box-shadow:
		0 6px 16px var(--fx-red-glow),
		inset 0 1px 0 rgba(255,255,255,0.08);
}

/* === BURGER : icône BLANCHE === */
.site-header .header-action-btn.burger,
.site-header #burger-menu {
	color: #fff !important;
}
.site-header .header-action-btn.burger svg,
.site-header #burger-menu svg {
	color: #fff !important;
	stroke: #fff !important;
	width: 22px;
	height: 22px;
}
.site-header .header-action-btn.burger:hover svg,
.site-header #burger-menu:hover svg {
	color: var(--fx-red-bright) !important;
	stroke: var(--fx-red-bright) !important;
}

/* Burger : neutralise les 3 spans legacy + flex-direction du thème */
.site-header .header-action-btn.burger {
	flex-direction: row !important;
	gap: 0 !important;
}
.site-header .header-action-btn.burger > span,
.site-header #burger-menu > span {
	display: none !important;
}

/* === LOUPE MOBILE : icône ROUGE === */
.site-header .header-action-btn--search-mobile,
.site-header .header-actions__search-mobile {
	color: var(--fx-red) !important;
}
.site-header .header-action-btn--search-mobile svg,
.site-header .header-actions__search-mobile svg {
	color: var(--fx-red) !important;
	stroke: var(--fx-red) !important;
	width: 20px;
	height: 20px;
}
.site-header .header-action-btn--search-mobile:hover svg,
.site-header .header-actions__search-mobile:hover svg {
	color: var(--fx-red-bright) !important;
	stroke: var(--fx-red-bright) !important;
}

/* === BOUTON COMPTE : icône ROUGE === */
.site-header .header-action-btn--account {
	color: var(--fx-red) !important;
}
.site-header .header-action-btn--account svg {
	color: var(--fx-red) !important;
	stroke: var(--fx-red) !important;
	width: 20px;
	height: 20px;
}
.site-header .header-action-btn--account:hover svg {
	color: var(--fx-red-bright) !important;
	stroke: var(--fx-red-bright) !important;
}

/* État actif (menu ouvert) : burger ROUGE plein, icône BLANCHE */
.site-header #burger-menu[aria-expanded="true"],
body.menu-open .site-header #burger-menu,
body.no-scroll .site-header #burger-menu {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	box-shadow: 0 0 0 4px var(--fx-red-glow) !important;
}
.site-header #burger-menu[aria-expanded="true"] svg,
body.menu-open .site-header #burger-menu svg,
body.no-scroll .site-header #burger-menu svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  FIX-17 — REFONTE 4 PAGES COMPTE                                ║
   ║  /mon-compte, /mes-preferences, /mes-favoris, /evolution        ║
   ║  Cohérence dark + rouge AlloCiné, animations premium.           ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* =============================================================
   COMMON — wrapper sombre uniforme pour les pages compte
============================================================= */
body.flixeo-themed.page-template-page-mon-compte,
body.flixeo-themed.page-template-page-favoris,
body.flixeo-themed.page-template-page-preferences-cine,
body.flixeo-themed.page-template-page-gaming-evolution,
body.flixeo-themed .mc-container,
body.flixeo-themed .pref-container,
body.flixeo-themed .wpz-favoris-page,
body.flixeo-themed .wpzge {
	color: var(--fx-text);
}

/* =============================================================
   1) MON COMPTE — .mc-* (page-mon-compte.php)
   Profil, formulaires, cards
============================================================= */

body.flixeo-themed .mc-container {
	max-width: var(--fx-max-w) !important;
	margin: 0 auto !important;
	padding: clamp(20px, 4vw, 40px) var(--fx-gutter) clamp(40px, 6vw, 80px) !important;
	color: var(--fx-text) !important;
}

/* Head : titre principal */
body.flixeo-themed .mc-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--fx-border);
}
body.flixeo-themed .mc-title {
	margin: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
	font-weight: 900 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
body.flixeo-themed .mc-subtitle {
	margin: 0 !important;
	color: var(--fx-text-mute) !important;
	font-size: 0.95rem !important;
	font-weight: 500;
	line-height: 1.4;
}

/* Profil : avatar + infos */
body.flixeo-themed .mc-profile {
	display: flex;
	align-items: center;
	gap: 16px;
}
body.flixeo-themed .mc-avatar {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--fx-surface);
	border: 2px solid var(--fx-red);
	box-shadow: 0 6px 18px var(--fx-red-glow);
	flex-shrink: 0;
}
body.flixeo-themed .mc-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Grid pour les cards */
body.flixeo-themed .mc-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0 0 clamp(20px, 3vw, 32px);
}

/* CARD — Premium dark */
body.flixeo-themed .mc-card {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg) !important;
	padding: clamp(20px, 2.5vw, 28px) !important;
	box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .mc-card:hover {
	border-color: var(--fx-border-strong);
	box-shadow: 0 12px 32px -10px rgba(0,0,0,0.7);
}
body.flixeo-themed .mc-card--wide {
	grid-column: 1 / -1;
}

body.flixeo-themed .mc-card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fx-border);
}
body.flixeo-themed .mc-card__head--split {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
body.flixeo-themed .mc-card__title {
	margin: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.01em;
	display: inline-block;
	border-bottom: 2px solid var(--fx-red);
	padding-bottom: 4px;
}
body.flixeo-themed .mc-card__hint,
body.flixeo-themed .mc-note {
	margin: 0 !important;
	color: var(--fx-text-mute) !important;
	font-size: 0.85rem !important;
	line-height: 1.5;
}

/* FORM — labels + inputs */
body.flixeo-themed .mc-form,
body.flixeo-themed .mc-form--profile {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.flixeo-themed .mc-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.flixeo-themed .mc-label {
	color: var(--fx-red-bright) !important;
	font-size: 0.74rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin: 0;
}
body.flixeo-themed .mc-input {
	background: var(--fx-bg-deep) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	padding: 11px 14px !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	width: 100% !important;
	box-sizing: border-box;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .mc-input::placeholder {
	color: var(--fx-text-mute) !important;
	opacity: 1;
}
body.flixeo-themed .mc-input:focus {
	background: var(--fx-surface) !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 3px var(--fx-red-glow) !important;
	outline: none !important;
}
body.flixeo-themed .mc-check {
	display: flex !important;
	align-items: center;
	gap: 10px;
	color: var(--fx-text-soft) !important;
	font-size: 0.92rem;
	cursor: pointer;
}
body.flixeo-themed .mc-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fx-red);
	flex-shrink: 0;
}

/* BUTTONS */
body.flixeo-themed .mc-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px !important;
	border-radius: var(--fx-radius-sm) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	font-size: 0.88rem !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer !important;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .mc-btn--primary {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 6px 18px var(--fx-red-glow);
}
body.flixeo-themed .mc-btn--primary:hover {
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--fx-red-glow);
}
body.flixeo-themed .mc-btn--ghost {
	background: transparent !important;
	color: var(--fx-text) !important;
	border-color: var(--fx-border-strong) !important;
}
body.flixeo-themed .mc-btn--ghost:hover {
	background: var(--fx-surface-hover) !important;
	border-color: var(--fx-red) !important;
	color: var(--fx-red-bright) !important;
	transform: translateY(-1px);
}

body.flixeo-themed .mc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
body.flixeo-themed .mc-link {
	color: var(--fx-red-bright) !important;
	text-decoration: none !important;
	font-weight: 600;
	border-bottom: 1px dashed var(--fx-border-red);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .mc-link:hover {
	color: var(--fx-red) !important;
	border-bottom-color: var(--fx-red);
}

/* ALERTS (succès / erreur) */
body.flixeo-themed .mc-alert {
	padding: 12px 16px;
	border-radius: var(--fx-radius-sm);
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 16px;
	border-left: 4px solid;
}
body.flixeo-themed .mc-alert--success {
	background: var(--success-soft) !important;
	color: var(--success) !important;
	border-left-color: var(--success);
}
body.flixeo-themed .mc-alert--error {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-left-color: var(--fx-red);
}

/* =============================================================
   2) MES PRÉFÉRENCES — .pref-* (page-preferences-cine.php)
   Suggestions tags interactifs
============================================================= */
body.flixeo-themed .pref-container {
	max-width: var(--fx-max-w) !important;
	margin: 0 auto !important;
	padding: clamp(20px, 4vw, 40px) var(--fx-gutter) clamp(40px, 6vw, 80px) !important;
	color: var(--fx-text) !important;
}
body.flixeo-themed .pref-container h1,
body.flixeo-themed .pref-container h2 {
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
}
body.flixeo-themed .pref-container h1 {
	font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}
body.flixeo-themed .pref-container h2 {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important;
	font-weight: 800 !important;
	margin: clamp(24px, 4vw, 36px) 0 14px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--fx-red);
	display: inline-block;
}
body.flixeo-themed .pref-container p {
	color: var(--fx-text-soft) !important;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Notifications */
body.flixeo-themed .pref-notice {
	padding: 14px 18px !important;
	border-radius: var(--fx-radius) !important;
	font-weight: 600 !important;
	margin: 0 0 20px !important;
	border-left: 4px solid !important;
}
body.flixeo-themed .pref-notice--ok {
	background: var(--success-soft) !important;
	color: var(--success) !important;
	border-left-color: var(--success) !important;
}
body.flixeo-themed .pref-notice--err {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-left-color: var(--fx-red) !important;
}

/* Tags (genres préférés, plateformes, etc.) */
body.flixeo-themed .pref-tags,
body.flixeo-themed .pref-suggestion-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 24px;
	padding: 0;
	list-style: none;
}
body.flixeo-themed .pref-tag,
body.flixeo-themed .pref-suggestion-wrap a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-full) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .pref-tag:hover,
body.flixeo-themed .pref-suggestion-wrap a:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}
body.flixeo-themed .pref-tag.is-active,
body.flixeo-themed .pref-tag[data-active="1"],
body.flixeo-themed .pref-tag.is-selected {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 6px 16px var(--fx-red-glow);
}

/* Inputs / formulaires de préférences */
body.flixeo-themed .pref-container input[type="text"],
body.flixeo-themed .pref-container input[type="search"],
body.flixeo-themed .pref-container select,
body.flixeo-themed .pref-container textarea {
	background: var(--fx-bg-deep) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	padding: 10px 14px !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
}
body.flixeo-themed .pref-container button[type="submit"],
body.flixeo-themed .pref-container .pref-save {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 12px 24px !important;
	border-radius: var(--fx-radius-sm) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 0 6px 18px var(--fx-red-glow);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .pref-container button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--fx-red-glow);
}

/* =============================================================
   3) MES FAVORIS — .wpz-favoris-* (page-favoris.php)
   Toolbar + grille de films favoris
============================================================= */
body.flixeo-themed .wpz-favoris-page,
body.flixeo-themed .site-container.wpz-favoris-page {
	max-width: var(--fx-max-w) !important;
	margin: 0 auto !important;
	padding: clamp(20px, 4vw, 40px) var(--fx-gutter) clamp(40px, 6vw, 80px) !important;
}

body.flixeo-themed .wpz-favoris-wrap {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2.5vw, 28px);
}

/* Toolbar */
body.flixeo-themed .wpz-favoris-toolbar {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg) !important;
}
body.flixeo-themed .wpz-favoris-toolbar-top {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
/* Toolbar filtres : Genre / Année / X sur la MÊME LIGNE
   Layout : grid 1fr 1fr auto → genre et année largeurs égales, X taille naturelle */
body.flixeo-themed .wpz-favoris-toolbar-filters {
	display: grid !important;
	grid-template-columns: 1fr 1fr auto !important;
	gap: 10px !important;
	align-items: center !important;
	width: 100%;
}
/* Les selects prennent toute la largeur de leur colonne */
body.flixeo-themed .wpz-favoris-toolbar-filters .wpz-favoris-select {
	width: 100% !important;
}
/* X reset : carré taille TOP (= hauteur des selects ~42px) */
body.flixeo-themed .wpz-favoris-toolbar-filters .wpz-favoris-reset {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1rem !important;
	gap: 0 !important;
}

body.flixeo-themed .wpz-favoris-count {
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
}
body.flixeo-themed .wpz-favoris-count strong {
	color: var(--fx-red-bright) !important;
	font-weight: 800 !important;
	font-size: 1.05em;
}

body.flixeo-themed .wpz-favoris-select {
	background: var(--fx-bg-deep) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text) !important;
	padding: 9px 14px !important;
	padding-right: 36px !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ef0e2d' d='M6 8L0 0h12z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpz-favoris-select:focus {
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 3px var(--fx-red-glow) !important;
	outline: none !important;
}

body.flixeo-themed .wpz-favoris-reset {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 9px 14px !important;
	background: transparent !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpz-favoris-reset:hover {
	background: var(--fx-red-tint) !important;
	border-color: var(--fx-red) !important;
	color: var(--fx-red-bright) !important;
}

body.flixeo-themed .wpz-favoris-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 22px !important;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border: 0 !important;
	border-radius: var(--fx-radius-sm) !important;
	color: #fff !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.86rem !important;
	text-decoration: none !important;
	box-shadow: 0 6px 18px var(--fx-red-glow);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .wpz-favoris-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--fx-red-glow);
}

/* Empty state */
body.flixeo-themed .wpz-favoris-empty {
	text-align: center;
	padding: 48px 24px !important;
	background: var(--fx-surface) !important;
	border: 1px dashed var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-lg) !important;
	color: var(--fx-text-mute) !important;
	font-size: 1rem;
	line-height: 1.5;
}
body.flixeo-themed .wpz-favoris-empty::before {
	content: '💔';
	display: block;
	font-size: 2.4rem;
	margin-bottom: 10px;
	filter: grayscale(0.3);
}
body.flixeo-themed .wpz-favoris-empty strong {
	color: var(--fx-text) !important;
	font-size: 1.15rem;
	display: block;
	margin-bottom: 6px;
}

body.flixeo-themed .wpz-favoris-status,
body.flixeo-themed .wpz-favoris-meta {
	color: var(--fx-text-mute) !important;
	font-size: 0.85rem;
}

/* Grille favoris (utilise .films-grid + .film-card déjà stylé par FIX-10) */
body.flixeo-themed .wpz-favoris-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap: 18px !important;
	margin: 0 !important;
}

/* === MOBILE : on cache la rangée de filtres native (Genre/Année/X)
   et on affiche une toolbar mobile avec un bouton "Filtres"
   injectée par JS (.wpz-favoris-mobile-toolbar). === */
@media (max-width: 768px) {
	body.flixeo-themed .wpz-favoris-toolbar-filters {
		display: none !important;
	}
	/* Quand l'utilisateur tape "Filtres", on affiche les filtres en panel */
	body.flixeo-themed .wpz-favoris-wrap.is-filters-open .wpz-favoris-toolbar-filters {
		display: grid !important;
		grid-template-columns: 1fr 1fr auto !important;
		gap: 10px !important;
		padding: 14px 16px !important;
		background: var(--fx-surface) !important;
		border: 1px solid var(--fx-border) !important;
		border-radius: var(--fx-radius-lg) !important;
		margin-top: -8px !important;
		animation: fxfav-slide-down 0.28s var(--fx-ease-out);
	}
	@keyframes fxfav-slide-down {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* =============================================================
   FIX-26 — Canvas notifications premium
   - Titre avec icône SVG cloche rouge (cohérent avec header)
   - Bouton "Marquer tout lu" en badge transparent vert avec check
   - Bouton fermer rouge cohérent
   - Liste : icônes SVG colorées (rendues par front.js TYPE_SVGS)
   - Padding cohérent sur tous les items du fil
============================================================= */

/* Titre du canvas avec icône cloche SVG rouge */
.flixeo-notif-canvas__head strong,
.flixeo-notif-canvas__title {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	letter-spacing: -0.01em;
}
.flixeo-notif-canvas__title-ico {
	color: var(--fx-red-bright) !important;
	stroke: var(--fx-red-bright) !important;
	flex-shrink: 0;
}

/* "Marquer tout lu" : badge transparent vert avec check SVG */
.flixeo-notif-canvas__mark-all {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	background: transparent !important;
	border: 1px solid var(--success) !important;
	border-radius: var(--fx-radius-full) !important;
	color: var(--success) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.74rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer !important;
	transition: all var(--fx-fast) var(--fx-ease-out) !important;
}
.flixeo-notif-canvas__mark-all svg {
	color: var(--success) !important;
	stroke: var(--success) !important;
	flex-shrink: 0;
}
.flixeo-notif-canvas__mark-all:hover,
.flixeo-notif-canvas__mark-all:focus-visible {
	background: var(--success) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(39, 192, 132, 0.35);
	outline: none;
}
.flixeo-notif-canvas__mark-all:hover svg,
.flixeo-notif-canvas__mark-all:focus-visible svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* Bouton fermer : rond rouge cohérent */
.flixeo-notif-canvas__close {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--fx-red) !important;
	border: 0 !important;
	color: #fff !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 14px var(--fx-red-glow);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.flixeo-notif-canvas__close:hover,
.flixeo-notif-canvas__close:focus-visible {
	background: var(--fx-red-bright) !important;
	transform: scale(1.08) rotate(90deg);
	outline: none;
}
.flixeo-notif-canvas__close svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* Header actions : alignement */
.flixeo-notif-canvas__head-actions {
	display: flex !important;
	align-items: center;
	gap: 8px !important;
	flex-shrink: 0;
}

/* === LISTE DES NOTIFS : padding cohérent + icônes SVG === */
.flixeo-notif-canvas__body {
	padding: 8px !important;
}

.flixeo-notif-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	border-radius: var(--fx-radius) !important;
	color: var(--fx-text) !important;
	text-decoration: none !important;
	transition: background var(--fx-fast) var(--fx-ease-out);
	border-bottom: 1px solid var(--fx-border);
}
.flixeo-notif-row:last-child {
	border-bottom: 0;
}
.flixeo-notif-row:hover,
.flixeo-notif-row:focus-visible {
	background: rgba(255,255,255,0.04) !important;
	outline: none;
}
.flixeo-notif-row.is-unread {
	background: rgba(239, 14, 45, 0.04);
	border-left: 3px solid var(--fx-red);
	padding-left: 11px !important;
}

/* Icône de la notif : rond coloré + SVG blanc à l'intérieur */
.flixeo-notif-row__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 999px !important;
	color: #fff !important;
	flex-shrink: 0 !important;
	font-size: 0 !important; /* cache tout texte/emoji fallback */
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.flixeo-notif-row__icon svg {
	width: 20px !important;
	height: 20px !important;
	color: #fff !important;
	stroke: #fff !important;
}

/* Image (si la notif a une image au lieu d'icône) */
.flixeo-notif-row__img {
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--fx-radius-sm) !important;
	object-fit: cover !important;
	flex-shrink: 0;
}

/* Body de la notif */
.flixeo-notif-row__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.flixeo-notif-row__title {
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.92rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.flixeo-notif-row__msg {
	color: var(--fx-text-soft) !important;
	font-size: 0.82rem !important;
	line-height: 1.4 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.flixeo-notif-row__time {
	color: var(--fx-text-mute) !important;
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 2px;
}

/* État vide */
.flixeo-notif-canvas__empty,
.flixeo-notif-canvas__loading {
	padding: 32px 16px !important;
	text-align: center;
	color: var(--fx-text-mute) !important;
	font-size: 0.92rem;
	font-style: italic;
}

/* === Toolbar mobile pour favoris (style "flixeo-toolbar" cohérent) === */
body.flixeo-themed .wpz-favoris-mobile-toolbar {
	display: none;
}
@media (max-width: 768px) {
	body.flixeo-themed .wpz-favoris-mobile-toolbar {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		margin: 0 0 14px;
		padding: 10px 14px;
		background: var(--fx-surface);
		border: 1px solid var(--fx-border);
		border-radius: var(--fx-radius);
	}
}
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright));
	border: 0;
	border-radius: var(--fx-radius-sm);
	color: #fff;
	font-family: var(--fx-font-body);
	font-weight: 800;
	font-size: 0.84rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 14px var(--fx-red-glow);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn:hover,
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px var(--fx-red-glow);
	outline: none;
}
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn svg {
	width: 16px;
	height: 16px;
	color: #fff;
	stroke: #fff;
}
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn[aria-expanded="true"] {
	background: var(--fx-red) !important;
	box-shadow: 0 0 0 4px var(--fx-red-glow), 0 6px 18px var(--fx-red-glow);
}
/* Badge compteur de filtres actifs */
body.flixeo-themed .wpz-favoris-mobile-toolbar__btn .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: #fff;
	color: var(--fx-red);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	margin-left: 4px;
}

/* =============================================================
   4) ÉVOLUTION (GAMING) — .wpzge-* (page-gaming-evolution.php)
   Dashboard XP / niveau / badges / quêtes
============================================================= */

body.flixeo-themed .wpzge {
	max-width: var(--fx-max-w) !important;
	margin: 0 auto !important;
	padding: clamp(20px, 4vw, 40px) var(--fx-gutter) clamp(40px, 6vw, 80px) !important;
	color: var(--fx-text) !important;
}

/* H1 */
body.flixeo-themed .wpzge-h1 {
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	font-weight: 900 !important;
	color: var(--fx-text) !important;
	margin: 0 0 24px !important;
	letter-spacing: -0.02em;
}

/* HERO XP/LEVEL */
body.flixeo-themed .wpzge-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--fx-radius-xl);
	background: linear-gradient(135deg, #1a0509 0%, #2a0712 50%, #1a0509 100%) !important;
	border: 1px solid var(--fx-border-strong);
	padding: clamp(20px, 3vw, 36px) !important;
	display: grid;
	grid-template-columns: minmax(auto, 1fr) 1fr;
	gap: clamp(20px, 3vw, 32px);
	align-items: center;
	margin-bottom: clamp(24px, 4vw, 40px);
	box-shadow:
		0 16px 40px -12px rgba(239,14,45,0.25),
		inset 0 1px 0 rgba(255,255,255,0.06);
}
body.flixeo-themed .wpzge-hero__bg {
	position: absolute !important;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, var(--fx-red-glow) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(239,14,45,0.15) 0%, transparent 50%);
	pointer-events: none;
	opacity: 0.8;
}
body.flixeo-themed .wpzge-hero__left,
body.flixeo-themed .wpzge-hero__right {
	position: relative;
	z-index: 1;
}

/* Avatar gaming avec ring animé */
body.flixeo-themed .wpzge-avatar {
	position: relative;
	width: clamp(96px, 12vw, 140px);
	height: clamp(96px, 12vw, 140px);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 auto 12px;
	box-shadow: 0 12px 36px var(--fx-red-glow);
}
body.flixeo-themed .wpzge-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 999px;
}
body.flixeo-themed .wpzge-avatar__ring {
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 3px solid transparent;
	background:
		linear-gradient(135deg, var(--fx-red), var(--fx-red-bright), var(--fx-red)) border-box;
	-webkit-mask:
		linear-gradient(#fff 0 0) padding-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: wpzge-spin 8s linear infinite;
	pointer-events: none;
}
@keyframes wpzge-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Badge de niveau */
body.flixeo-themed .wpzge-level {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}
body.flixeo-themed .wpzge-level__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 14px !important;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright));
	color: #fff !important;
	border-radius: var(--fx-radius-full);
	font-family: var(--fx-font-body);
	font-weight: 900 !important;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px var(--fx-red-glow);
}

/* Barre XP */
body.flixeo-themed .wpzge-bar {
	position: relative;
	height: 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px;
	overflow: hidden;
	margin: 12px 0;
}
body.flixeo-themed .wpzge-bar::after {
	content: '';
	display: block;
	height: 100%;
	width: var(--xp, 50%);
	background: linear-gradient(90deg, var(--fx-red), var(--fx-red-bright));
	border-radius: 999px;
	box-shadow:
		0 0 16px var(--fx-red-glow),
		inset 0 1px 0 rgba(255,255,255,0.25);
	transition: width 0.8s var(--fx-ease-out);
}
body.flixeo-themed .wpzge-bar__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
	transform: translateX(-100%);
	animation: wpzge-shine 2.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}
@keyframes wpzge-shine {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* KPI grid (statistiques principales) */
body.flixeo-themed .wpzge-kpi {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}
body.flixeo-themed .wpzge-kpi__item {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: var(--fx-radius);
	padding: 14px 16px !important;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .wpzge-kpi__item:hover {
	border-color: var(--fx-red);
	background: var(--fx-red-tint) !important;
	transform: translateY(-2px);
}
body.flixeo-themed .wpzge-kpi__ico {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--fx-red-tint);
	color: var(--fx-red-bright);
	border: 1px solid var(--fx-border-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
body.flixeo-themed .wpzge-kpi__ico svg,
body.flixeo-themed .wpzge-kpi__ico .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
}
body.flixeo-themed .wpzge-kpi__lab {
	display: block;
	color: var(--fx-text-mute) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
body.flixeo-themed .wpzge-kpi__num {
	display: block;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.25rem !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Grid principal */
body.flixeo-themed .wpzge-grid {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(16px, 2vw, 24px);
}
body.flixeo-themed .wpzge-col-5 { grid-column: span 5; }
body.flixeo-themed .wpzge-col-7 { grid-column: span 7; }
@media (max-width: 900px) {
	body.flixeo-themed .wpzge-col-5,
	body.flixeo-themed .wpzge-col-7 { grid-column: 1 / -1; }
	body.flixeo-themed .wpzge-hero {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* Cards évolution */
body.flixeo-themed .wpzge-card {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg) !important;
	overflow: hidden;
	box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .wpzge-card:hover {
	border-color: var(--fx-border-strong);
	box-shadow: 0 14px 36px -10px rgba(0,0,0,0.7);
}
body.flixeo-themed .wpzge-card__head {
	padding: 16px 20px !important;
	background: var(--fx-bg-deep) !important;
	border-bottom: 1px solid var(--fx-border) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.flixeo-themed .wpzge-card__title {
	margin: 0 !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
body.flixeo-themed .wpzge-card__body {
	padding: 16px 20px !important;
}

/* Chip / Badge dans evolution */
body.flixeo-themed .wpzge-chip {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-border-red);
	border-radius: var(--fx-radius-full);
	font-size: 0.74rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
body.flixeo-themed .wpzge-chip.is-muted {
	background: rgba(255,255,255,0.06) !important;
	color: var(--fx-text-mute) !important;
	border-color: rgba(255,255,255,0.1);
}

/* Items "mini" et "micro" */
body.flixeo-themed .wpzge-mini,
body.flixeo-themed .wpzge-micro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.flixeo-themed .wpzge-mini__item,
body.flixeo-themed .wpzge-micro__item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: var(--fx-radius-sm);
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .wpzge-mini__item:hover,
body.flixeo-themed .wpzge-micro__item:hover {
	background: var(--fx-red-tint);
	border-color: var(--fx-red);
}
body.flixeo-themed .wpzge-mini__ico {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--fx-red-tint);
	color: var(--fx-red-bright);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.85rem;
}

/* Quêtes (cards--quest) : style spécial */
body.flixeo-themed .wpzge-card--quest .wpzge-card__head {
	background: linear-gradient(135deg, var(--fx-red-tint), transparent) !important;
}
body.flixeo-themed .wpzge-card--quest .wpzge-card__title::before {
	content: '⚔️';
	font-size: 1.1em;
}
body.flixeo-themed .wpzge-card--lists .wpzge-card__title::before {
	content: '📋';
	font-size: 1.1em;
}

body.flixeo-themed .wpzge-divider {
	height: 1px;
	background: var(--fx-border);
	margin: 16px 0;
	border: 0;
}
body.flixeo-themed .wpzge-muted {
	color: var(--fx-text-mute) !important;
	font-size: 0.85rem;
}
body.flixeo-themed .wpzge-empty {
	text-align: center;
	padding: 32px 20px;
	color: var(--fx-text-mute) !important;
	font-style: italic;
	border: 1px dashed var(--fx-border-strong);
	border-radius: var(--fx-radius);
	background: var(--fx-bg-deep);
}
body.flixeo-themed .wpzge-date {
	color: var(--fx-text-mute) !important;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
body.flixeo-themed .wpzge-like {
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .up {
	color: var(--success) !important;
}
body.flixeo-themed .down {
	color: var(--fx-red) !important;
}

/* Badges (gaming) */
body.flixeo-themed .wpzge-badge-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 1rem;
}
body.flixeo-themed .wpzge-badge-txt {
	font-weight: 700;
	color: var(--fx-text) !important;
}

/* PERFORMANCES — content-visibility sur les sections lourdes */
body.flixeo-themed .wpzge-card,
body.flixeo-themed .mc-card,
body.flixeo-themed .wpz-favoris-grid {
	content-visibility: auto;
	contain-intrinsic-size: 400px;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  FIX-18 — REFONTE TEMPLATES ACTEURS                              ║
   ║  - Vignettes (cards dans carousels) : raffinage                  ║
   ║  - Single acteur : hero, bio, galerie, filmographie, navigation  ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* =============================================================
   1) VIGNETTES ACTEURS — Cards premium (déjà via FIX-10 base)
   .acteur-card / .acteur-thumb / .acteur-name / .acteur-meta
============================================================= */

body.flixeo-themed a.acteur-card.film-card,
body.flixeo-themed a.carousel-film-card.acteur-card {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg) !important;
	overflow: hidden !important;
	color: inherit !important;
	text-decoration: none !important;
	display: flex !important;
	flex-direction: column !important;
	transition: all var(--fx-base) var(--fx-ease-out);
	box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5);
}
body.flixeo-themed a.acteur-card:hover {
	border-color: var(--fx-red);
	box-shadow:
		0 16px 36px -12px rgba(0,0,0,0.7),
		0 0 0 1px var(--fx-red-glow);
	transform: translateY(-3px);
}

body.flixeo-themed .acteur-thumb.film-thumb {
	overflow: hidden !important;
}
body.flixeo-themed .acteur-card .acteur-thumb img,
body.flixeo-themed a.acteur-card.film-card .acteur-thumb img {
	transition: transform var(--fx-slow) var(--fx-ease-out),
	            filter var(--fx-slow) var(--fx-ease-out);
}
body.flixeo-themed a.acteur-card:hover .acteur-thumb img {
	transform: scale(1.06);
	filter: brightness(1.05) saturate(1.08);
}

/* Nom + âge */
body.flixeo-themed .acteur-card .film-card__title.acteur-name,
body.flixeo-themed .film-card__title.acteur-name {
	margin: 0 !important;
	padding: 12px 14px 4px !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.98rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	color: var(--fx-text) !important;
	line-height: 1.2 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	min-height: 0 !important;
}
body.flixeo-themed a.acteur-card:hover .acteur-name {
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .acteur-card .acteur-age,
body.flixeo-themed .film-card__title .acteur-age {
	display: inline-block !important;
	color: var(--fx-text-mute) !important;
	font-size: 0.78em !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
}

/* Meta (nationalité, naissance) */
body.flixeo-themed .acteur-card .acteur-meta {
	padding: 0 14px 14px !important;
	color: var(--fx-text-mute) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	letter-spacing: 0.01em;
	margin-top: auto;
}

/* =============================================================
   2) SINGLE ACTEUR — Container
============================================================= */
body.flixeo-themed .acteur-container {
	max-width: var(--fx-max-w) !important;
	margin: 0 auto !important;
	padding: 0 var(--fx-gutter) !important;
	color: var(--fx-text) !important;
}

/* =============================================================
   3) HERO ACTEUR — fullbleed + glassmorphism premium
============================================================= */
body.flixeo-themed .acteur-hero-fullbleed {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: calc(-1 * var(--header-height, 64px));
	padding-top: calc(var(--header-height, 64px) + clamp(32px, 5vw, 64px));
	padding-bottom: clamp(40px, 5vw, 72px);
	background-color: var(--fx-bg-deep);
	background-size: cover;
	background-position: center 18%;
	background-repeat: no-repeat;
	overflow: hidden;
	isolation: isolate;
}

body.flixeo-themed .acteur-hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	background:
		radial-gradient(120% 80% at 50% 30%, rgba(5,5,7,0) 0%, rgba(5,5,7,0.55) 55%, rgba(5,5,7,0.9) 100%),
		linear-gradient(180deg, rgba(5,5,7,0.45) 0%, rgba(5,5,7,0.85) 70%, var(--fx-bg-deep) 100%) !important;
	pointer-events: none !important;
}

body.flixeo-themed .acteur-hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--fx-max-w);
	margin: 0 auto;
	padding: 0 var(--fx-gutter);
}

body.flixeo-themed .acteur-hero-card {
	display: grid !important;
	grid-template-columns: minmax(180px, 260px) 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: end;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* Photo : portrait rond avec ring rouge */
body.flixeo-themed .acteur-hero-photo {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 3/4;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	background: var(--fx-surface);
	box-shadow:
		0 28px 60px -20px rgba(0,0,0,0.85),
		0 0 0 1px var(--fx-border-strong),
		0 12px 36px -10px var(--fx-red-glow);
}
body.flixeo-themed .acteur-hero-photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Meta */
body.flixeo-themed .acteur-hero-meta {
	display: flex !important;
	flex-direction: column;
	gap: clamp(10px, 1.5vw, 18px);
	min-width: 0;
}
body.flixeo-themed .acteur-hero-meta h1 {
	margin: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-size: clamp(2rem, 5vw, 3.4rem) !important;
	font-weight: 900 !important;
	color: var(--fx-text) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	text-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
body.flixeo-themed .acteur-hero-meta h2 {
	margin: 0 !important;
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-serif) !important;
	font-style: italic !important;
	font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
	font-weight: 500 !important;
}

/* Microprofil (nationalité, naissance...) */
body.flixeo-themed .acteur-microprofil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--fx-radius-full);
	color: var(--fx-text-soft) !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	backdrop-filter: blur(8px);
}

/* Socials : icônes ronds rouges */
body.flixeo-themed .acteur-socials {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
}
body.flixeo-themed .acteur-socials a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	color: var(--fx-text) !important;
	text-decoration: none !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
	backdrop-filter: blur(8px);
}
body.flixeo-themed .acteur-socials a:hover {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px var(--fx-red-glow);
}
body.flixeo-themed .acteur-socials a svg,
body.flixeo-themed .acteur-socials a img {
	width: 18px;
	height: 18px;
}

/* CTA */
body.flixeo-themed .acteur-hero-cta {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px !important;
	margin-top: 8px;
}
body.flixeo-themed .acteur-cta-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 22px !important;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border: 0 !important;
	border-radius: var(--fx-radius) !important;
	color: #fff !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	font-size: 0.88rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 8px 24px var(--fx-red-glow);
	transition: all var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .acteur-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px var(--fx-red-glow);
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
}
body.flixeo-themed .acteur-cta-btn.acteur-cta-secondary {
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	color: var(--fx-text) !important;
	box-shadow: none;
	backdrop-filter: blur(8px);
}
body.flixeo-themed .acteur-cta-btn.acteur-cta-secondary:hover {
	background: rgba(255,255,255,0.14) !important;
	border-color: var(--fx-red-bright) !important;
	color: var(--fx-red-bright) !important;
	box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* MOBILE hero acteur */
@media (max-width: 768px) {
	body.flixeo-themed .acteur-hero-card {
		grid-template-columns: 1fr;
		text-align: left;
	}
	body.flixeo-themed .acteur-hero-photo {
		max-width: 200px;
		margin: 0 auto 4px;
	}
	body.flixeo-themed .acteur-hero-cta {
		flex-direction: column;
	}
	body.flixeo-themed .acteur-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* =============================================================
   4) GALERIE PHOTOS — scroll horizontal premium
============================================================= */
body.flixeo-themed .acteur-gallery {
	max-width: var(--fx-max-w);
	margin: clamp(32px, 5vw, 48px) auto !important;
	padding: 0 var(--fx-gutter);
}
body.flixeo-themed .acteur-gallery-track {
	display: flex !important;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--fx-red) transparent;
}
body.flixeo-themed .acteur-gallery-track::-webkit-scrollbar {
	height: 6px;
}
body.flixeo-themed .acteur-gallery-track::-webkit-scrollbar-thumb {
	background: var(--fx-red);
	border-radius: 999px;
}
body.flixeo-themed .acteur-gallery-item {
	flex: 0 0 clamp(180px, 22vw, 280px);
	aspect-ratio: 3/4;
	scroll-snap-align: start;
	border-radius: var(--fx-radius-lg);
	overflow: hidden;
	background: var(--fx-surface);
	box-shadow: 0 10px 28px -8px rgba(0,0,0,0.6);
	transition: all var(--fx-base) var(--fx-ease-out);
	display: block;
}
body.flixeo-themed .acteur-gallery-item:hover {
	transform: scale(1.02);
	border-color: var(--fx-red);
	box-shadow: 0 14px 36px -8px rgba(0,0,0,0.8), 0 0 0 2px var(--fx-red-glow);
}
body.flixeo-themed .acteur-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--fx-slow) var(--fx-ease-out);
}
body.flixeo-themed .acteur-gallery-item:hover img {
	transform: scale(1.06);
}

/* =============================================================
   5) BIO ACTEUR — bloc lecture premium
============================================================= */
body.flixeo-themed .acteur-bio {
	max-width: var(--fx-max-w);
	margin: clamp(28px, 4vw, 48px) auto !important;
	padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 32px) !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg);
	border-left: 4px solid var(--fx-red) !important;
}
body.flixeo-themed .acteur-bio-content,
body.flixeo-themed .acteur-bio-excerpt,
body.flixeo-themed .acteur-bio-full {
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 1.025rem !important;
	line-height: 1.75 !important;
	letter-spacing: 0.005em;
}
body.flixeo-themed .acteur-bio p {
	margin: 0 0 1em !important;
	color: var(--fx-text-soft) !important;
}
body.flixeo-themed .acteur-bio p:last-child {
	margin-bottom: 0 !important;
}
body.flixeo-themed .acteur-bio a {
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .acteur-bio-more {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 8px 14px !important;
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-border-red) !important;
	border-radius: var(--fx-radius-sm) !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.02em;
	cursor: pointer !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .acteur-bio-more:hover {
	background: var(--fx-red) !important;
	color: #fff !important;
}

/* =============================================================
   6) SECTION HEAD — Titres des sections (filmographie, etc.)
============================================================= */
body.flixeo-themed .acteur-section-head {
	max-width: var(--fx-max-w);
	margin: clamp(28px, 4vw, 48px) auto 16px !important;
	padding: 0 var(--fx-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.flixeo-themed .acteur-section-head h2,
body.flixeo-themed .acteur-section-head h3 {
	margin: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	color: var(--fx-text) !important;
	letter-spacing: -0.01em;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--fx-red);
	display: inline-block;
}

/* =============================================================
   7) FILTRES FILMOGRAPHIE — tabs cohérents
============================================================= */
body.flixeo-themed .acteur-film-filters {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
}
body.flixeo-themed .acteur-filter-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 16px !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-full) !important;
	color: var(--fx-text-soft) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .acteur-filter-btn:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-1px);
}
body.flixeo-themed .acteur-filter-btn.is-active {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px var(--fx-red-glow);
}

/* =============================================================
   8) NAVIGATION — prev/next + navdock (random)
============================================================= */
body.flixeo-themed .acteur-prevnext {
	max-width: var(--fx-max-w);
	margin: clamp(32px, 5vw, 48px) auto !important;
	padding: 0 var(--fx-gutter);
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}
body.flixeo-themed .acteur-prevnext .acteur-prev,
body.flixeo-themed .acteur-prevnext .acteur-next {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius) !important;
	color: var(--fx-text) !important;
	text-decoration: none !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.92rem !important;
	transition: all var(--fx-base) var(--fx-ease-out);
	max-width: 50%;
}
body.flixeo-themed .acteur-prevnext .acteur-prev::before {
	content: '←';
	color: var(--fx-red);
	font-weight: 900;
	font-size: 1.1em;
}
body.flixeo-themed .acteur-prevnext .acteur-next::after {
	content: '→';
	color: var(--fx-red);
	font-weight: 900;
	font-size: 1.1em;
}
body.flixeo-themed .acteur-prevnext a:hover {
	border-color: var(--fx-red) !important;
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

/* NAVDOCK : barre flottante de navigation */
body.flixeo-themed .acteur-navdock {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: rgba(8,8,11,0.85);
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-full);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
body.flixeo-themed .acteur-navdock .dock-btn {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .acteur-navdock .dock-btn:hover {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	transform: scale(1.06);
}
body.flixeo-themed .acteur-navdock .dock-btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}
body.flixeo-themed .acteur-navdock .dock-random {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px var(--fx-red-glow);
}

/* FAB random : bouton flottant */
body.flixeo-themed .acteur-fab-random {
	position: fixed;
	right: 14px;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border: 0 !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 28px var(--fx-red-glow);
	cursor: pointer;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .acteur-fab-random:hover {
	transform: scale(1.08) rotate(15deg);
	box-shadow: 0 14px 36px var(--fx-red-glow);
}
body.flixeo-themed .acteur-fab-random svg {
	width: 24px;
	height: 24px;
}

/* =============================================================
   9) PERFORMANCES — content-visibility sur sections lourdes
============================================================= */
body.flixeo-themed .acteur-gallery,
body.flixeo-themed .acteur-bio,
body.flixeo-themed .filmographie-carousel,
body.flixeo-themed .films-avenir-carousel {
	content-visibility: auto;
	contain-intrinsic-size: 400px;
}

/* =============================================================
   FIX-19 — Cacher le burger sur ordinateur
   (Mon FIX-16 forçait display:inline-flex sur TOUS les boutons
   header, y compris le burger qui ne devait pas s'afficher desktop)
============================================================= */
@media (min-width: 1025px) {
	.site-header .header-action-btn.burger,
	.site-header #burger-menu,
	.site-header .burger,
	body .site-header .header-action-btn.burger,
	/* + loupe mobile : à cacher aussi sur desktop */
	.site-header .header-action-btn--search-mobile,
	.site-header .header-actions__search-mobile,
	body .site-header .header-action-btn--search-mobile {
		display: none !important;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		width: 0 !important;
		height: 0 !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		overflow: hidden;
	}
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  FIX-20 — Override styles inline pages compte (preferences,    ║
   ║  evolution, mon-compte) + avatar canvas amélioré.              ║
   ║  Les PHP injectent des <style> inline en mode LIGHT (fond blanc║
   ║  rgba(255,255,255,.X)) qui battaient la cascade. On les neutralise║
   ║  via override !important + remap des variables --wpzge-*.      ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* =============================================================
   1) /mes-preferences/ — Override total du <style> inline
============================================================= */
body.flixeo-themed .pref-container {
	background: var(--fx-bg) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-family: var(--fx-font-body) !important;
	color: var(--fx-text) !important;
}
body.flixeo-themed .pref-container h1,
body.flixeo-themed .pref-container h2,
body.flixeo-themed .pref-container h3 {
	color: var(--fx-text) !important;
}
body.flixeo-themed .pref-container label {
	color: var(--fx-red-bright) !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	margin-top: 18px !important;
}
body.flixeo-themed .pref-container input[type="text"],
body.flixeo-themed .pref-container input[type="search"],
body.flixeo-themed .pref-container input[type="number"],
body.flixeo-themed .pref-container input[type="email"],
body.flixeo-themed .pref-container select,
body.flixeo-themed .pref-container textarea {
	background: var(--fx-bg-deep) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-sm) !important;
}
body.flixeo-themed .pref-container input:focus,
body.flixeo-themed .pref-container select:focus,
body.flixeo-themed .pref-container textarea:focus {
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 3px var(--fx-red-glow) !important;
}

/* Tags (genres préférés) : neutralise le background:#333 et :#007bff */
body.flixeo-themed .pref-tag,
body.flixeo-themed #acteurs-selection .pref-tag,
body.flixeo-themed .pref-tags label {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-full) !important;
	transition: all var(--fx-fast) var(--fx-ease-out) !important;
	font-weight: 600 !important;
}
body.flixeo-themed .pref-tag:hover,
body.flixeo-themed #acteurs-selection .pref-tag:hover,
body.flixeo-themed .pref-tags label:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-1px);
}
body.flixeo-themed .pref-tags input[type="checkbox"]:checked + label,
body.flixeo-themed .pref-tags input[type="radio"]:checked + label,
body.flixeo-themed #acteurs-selection .pref-tag {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 4px 12px var(--fx-red-glow);
}

/* Suggestions list (dropdown autocomplete) */
body.flixeo-themed .pref-suggestion-list {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border-strong) !important;
	color: var(--fx-text) !important;
	box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
	border-radius: var(--fx-radius) !important;
}
body.flixeo-themed .pref-suggestion-list li {
	color: var(--fx-text) !important;
	border-bottom: 1px solid var(--fx-border) !important;
}
body.flixeo-themed .pref-suggestion-list li:last-child {
	border-bottom: 0 !important;
}
body.flixeo-themed .pref-suggestion-list li:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .pref-suggestion-empty {
	color: var(--fx-text-mute) !important;
}

/* Bouton submit */
body.flixeo-themed .pref-container button[type="submit"] {
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 6px 18px var(--fx-red-glow) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--fx-radius-sm) !important;
}
body.flixeo-themed .pref-container button[type="submit"]:hover {
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--fx-red-glow) !important;
}

/* Notices */
body.flixeo-themed .pref-notice--ok {
	background: var(--success-soft) !important;
	color: var(--success) !important;
	border: 1px solid var(--success) !important;
}
body.flixeo-themed .pref-notice--err {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border: 1px solid var(--fx-red) !important;
}

/* =============================================================
   2) /evolution/ — Remap des variables --wpzge-* vers dark
   Le <style> inline du PHP utilise rgba(255,255,255,.9X) = blanc.
   On remap les variables locales pour que tout devienne dark.
============================================================= */
body.flixeo-themed .wpzge {
	/* Remap des variables CSS du composant gaming */
	--wpzge-bg:          var(--fx-bg) !important;
	--wpzge-bg2:         var(--fx-bg-deep) !important;
	--wpzge-text:        var(--fx-text) !important;
	--wpzge-muted:       var(--fx-text-mute) !important;
	--wpzge-border:      var(--fx-border) !important;
	--wpzge-shadow:      0 12px 30px -10px rgba(0,0,0,0.5) !important;
	--wpzge-accent:      var(--fx-red) !important;

	background: var(--fx-bg) !important;
	color: var(--fx-text) !important;
}

/* Override des backgrounds blancs hardcoded */
body.flixeo-themed .wpzge-hero {
	background: linear-gradient(180deg, var(--fx-surface), var(--fx-bg-deep)) !important;
	border: 1px solid var(--fx-border-strong) !important;
}
body.flixeo-themed .wpzge-hero__bg {
	background:
		radial-gradient(closest-side, var(--fx-red-glow) 0%, transparent 70%),
		radial-gradient(closest-side, rgba(239,14,45,0.15) 0%, transparent 60%) !important;
	opacity: 1 !important;
}

/* Tag / chips avec fond blanc → dark */
body.flixeo-themed .wpzge-tag,
body.flixeo-themed .wpzge-sub__chip,
body.flixeo-themed .wpzge-score {
	background: var(--fx-surface) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong);
}
body.flixeo-themed .wpzge-tag svg,
body.flixeo-themed .wpzge-sub__chip svg,
body.flixeo-themed .wpzge-score svg {
	color: var(--fx-red-bright) !important;
}
body.flixeo-themed .wpzge-sub__chip strong,
body.flixeo-themed .wpzge-score strong,
body.flixeo-themed .wpzge-score .k {
	color: var(--fx-text) !important;
}

/* Profile name / sub-meta */
body.flixeo-themed .wpzge-name,
body.flixeo-themed .wpzge-profile__name,
body.flixeo-themed .wpzge-profile__meta {
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge-sub,
body.flixeo-themed .wpzge-profile__sub {
	color: var(--fx-text-mute) !important;
}

/* Tous les SVG dans wpzge passent en rouge */
body.flixeo-themed .wpzge svg:not(.wpzge-vote-ico),
body.flixeo-themed .wpzge .dashicons {
	color: var(--fx-red-bright) !important;
}
/* Les dashicons WP (icônes "icomoon" verts) : neutralise et passe rouge */
body.flixeo-themed .wpzge .dashicons {
	color: var(--fx-red-bright) !important;
}

/* Progress bars */
body.flixeo-themed .wpzge-progress,
body.flixeo-themed .wpzge-progress__top {
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge-bar {
	background: rgba(255,255,255,0.06) !important;
	border-color: rgba(255,255,255,0.1) !important;
}

/* Cards génériques */
body.flixeo-themed .wpzge-card {
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
}
body.flixeo-themed .wpzge-card__head,
body.flixeo-themed .wpzge-card__body {
	background: transparent !important;
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge-card__title {
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge-card__head {
	border-bottom: 1px solid var(--fx-border) !important;
}

/* Vote / like icons */
body.flixeo-themed .wpzge-vote-ico {
	color: var(--fx-red-bright) !important;
}

/* Cas spéciaux : .t, .v, .k (textes dans des stats) */
body.flixeo-themed .wpzge .t,
body.flixeo-themed .wpzge .v {
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge .k,
body.flixeo-themed .wpzge .d {
	color: var(--fx-text-mute) !important;
}
body.flixeo-themed .wpzge .i,
body.flixeo-themed .wpzge .ico,
body.flixeo-themed .wpzge .txt {
	color: var(--fx-text) !important;
}
body.flixeo-themed .wpzge .sep {
	color: var(--fx-border) !important;
}

/* Wrap général */
body.flixeo-themed .wpzge-wrap {
	background: transparent !important;
	color: var(--fx-text) !important;
}

/* =============================================================
   3) /mon-compte/ — Améliorations + plus de structure visuelle
============================================================= */
body.flixeo-themed .mc-container {
	background: var(--fx-bg) !important;
}

/* Avatar amélioré (mon compte page) */
body.flixeo-themed .mc-avatar {
	position: relative;
	width: 80px !important;
	height: 80px !important;
}
body.flixeo-themed .mc-avatar::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 999px;
	background: conic-gradient(from 0deg, var(--fx-red), var(--fx-red-bright), var(--fx-red));
	z-index: -1;
	animation: mc-avatar-spin 6s linear infinite;
	filter: blur(0.5px);
}
@keyframes mc-avatar-spin {
	to { transform: rotate(360deg); }
}

/* Section titles dans mon-compte plus marqués */
body.flixeo-themed .mc-title {
	background: linear-gradient(135deg, var(--fx-text) 50%, var(--fx-red-bright) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
}

/* Inputs : focus ring rouge plus marqué */
body.flixeo-themed .mc-input:focus {
	border-color: var(--fx-red-bright) !important;
	box-shadow:
		0 0 0 3px var(--fx-red-glow),
		0 0 24px -8px var(--fx-red-glow) !important;
}

/* =============================================================
   4) AVATAR CANVAS ACCOUNT — taille fixe 44×44 (img directe, pas wrapper)
   Le markup utilise <img class="flixeo-account-canvas__avatar"> sans wrapper :
   donc on style l'IMG elle-même avec width/height fixes (pas 100%).
============================================================= */
img.flixeo-account-canvas__avatar,
.flixeo-account-canvas__avatar {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	border-radius: 999px !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	display: block !important;
	background: var(--fx-bg-deep);
	border: 2px solid var(--fx-red);
	box-shadow: 0 4px 12px var(--fx-red-glow);
	padding: 0 !important;
	margin: 0 !important;
}

/* Variante placeholder (div avec SVG dedans pour utilisateurs sans avatar) */
.flixeo-account-canvas__avatar.flixeo-account-canvas__avatar--placeholder {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--fx-red-bright);
	background: var(--fx-surface);
}

/* =============================================================
   5) NEUTRALISE LES ICÔNES DASHICONS (couleurs natives WP) sur compte
   Les dashicons sont des fonts-icons, .color tient compte de --c-fg
============================================================= */
body.flixeo-themed .dashicons,
body.flixeo-themed .dashicons-before:before {
	color: var(--fx-red-bright) !important;
}

/* Annule les fonds blancs WP par défaut sur les pages compte */
body.flixeo-themed.page-template-page-preferences-cine,
body.flixeo-themed.page-template-page-gaming-evolution,
body.flixeo-themed.page-template-page-mon-compte,
body.flixeo-themed.page-template-page-favoris {
	background: var(--fx-bg) !important;
}

/* =============================================================
   FIX-21 — Bannière push notif (.fxpush-banner) — style FliXeo
   Cloche emoji 🔔 → SVG rouge en mask-image (cache l'emoji texte)
   Fond glassmorphism dark, boutons cohérents avec le DS
============================================================= */

#fxpush-banner.fxpush-banner,
.fxpush-banner {
	display: flex !important;
	align-items: center !important;
	gap: clamp(12px, 2vw, 18px) !important;
	max-width: min(720px, calc(100vw - 24px)) !important;
	margin: 0 auto !important;
	padding: 14px 18px !important;
	background:
		radial-gradient(circle at 20% 20%, rgba(239,14,45,0.10) 0%, transparent 60%),
		rgba(8,8,11,0.88) !important;
	border: 1px solid var(--fx-border-strong) !important;
	border-radius: var(--fx-radius-lg) !important;
	color: var(--fx-text) !important;
	box-shadow:
		0 16px 40px -12px rgba(0,0,0,0.7),
		0 0 0 1px var(--fx-red-glow),
		inset 0 1px 0 rgba(255,255,255,0.06) !important;
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	font-family: var(--fx-font-body) !important;
	z-index: 9500;
	position: fixed !important;
	left: 12px !important;
	right: 12px !important;
	bottom: 12px !important;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
	animation: fxpush-slide-up 0.42s var(--fx-ease-out);
}
@keyframes fxpush-slide-up {
	from { transform: translateY(120%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
/* Bétonné : spécificité ≥ #fxpush-banner.fxpush-banner ci-dessus
   + ciblage attribut [hidden] + style inline display:none du JS */
#fxpush-banner.fxpush-banner.fxpush-banner--hidden,
#fxpush-banner.fxpush-banner--hidden,
.fxpush-banner.fxpush-banner--hidden,
.fxpush-banner--hidden,
#fxpush-banner[hidden],
.fxpush-banner[hidden],
#fxpush-banner[style*="display: none"],
.fxpush-banner[style*="display: none"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transform: translateY(120%) !important;
	animation: none !important;
}

/* Cloche : on cache l'emoji et on dessine un SVG rouge dans le span */
.fxpush-banner .fxpush-banner__bell,
#fxpush-banner .fxpush-banner__bell {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	border-radius: 999px !important;
	background: var(--fx-red-tint) !important;
	border: 1px solid var(--fx-border-red) !important;
	color: var(--fx-red-bright) !important;
	flex-shrink: 0 !important;
	font-size: 0 !important;             /* cache l'emoji texte 🔔 */
	overflow: hidden;
	position: relative;
}
.fxpush-banner .fxpush-banner__bell::before,
#fxpush-banner .fxpush-banner__bell::before {
	content: '';
	width: 22px;
	height: 22px;
	background-color: var(--fx-red-bright);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: fxpush-bell-ring 3s ease-in-out infinite;
}
@keyframes fxpush-bell-ring {
	0%, 50%, 100% { transform: rotate(0deg); }
	10%, 30%      { transform: rotate(-12deg); }
	20%, 40%      { transform: rotate(12deg); }
}

/* Texte */
.fxpush-banner .fxpush-banner__text,
#fxpush-banner .fxpush-banner__text {
	flex: 1;
	min-width: 0;
	margin: 0 !important;
	color: var(--fx-text) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.005em;
}

/* Bloc actions */
.fxpush-banner .fxpush-banner__actions,
#fxpush-banner .fxpush-banner__actions {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0;
}

/* Bouton "Activer" : gradient rouge premium */
.fxpush-banner .fxpush-banner__btn--allow,
#fxpush-banner .fxpush-banner__btn--allow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 18px !important;
	background: linear-gradient(135deg, var(--fx-red), var(--fx-red-bright)) !important;
	border: 0 !important;
	border-radius: var(--fx-radius-sm) !important;
	color: #fff !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 800 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer !important;
	white-space: nowrap;
	box-shadow: 0 6px 16px var(--fx-red-glow);
	transition: all var(--fx-base) var(--fx-ease-out);
}
.fxpush-banner .fxpush-banner__btn--allow:hover,
#fxpush-banner .fxpush-banner__btn--allow:hover {
	background: linear-gradient(135deg, var(--fx-red-bright), var(--fx-red)) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px var(--fx-red-glow);
}

/* Bouton "Fermer" (✕) : rond glassy */
.fxpush-banner .fxpush-banner__btn--later,
#fxpush-banner .fxpush-banner__btn--later {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	color: var(--fx-text-mute) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.fxpush-banner .fxpush-banner__btn--later:hover,
#fxpush-banner .fxpush-banner__btn--later:hover {
	background: var(--fx-red) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	transform: scale(1.06) rotate(90deg);
}

/* Mobile : passe le contenu en colonne */
@media (max-width: 600px) {
	#fxpush-banner.fxpush-banner,
	.fxpush-banner {
		flex-wrap: wrap !important;
	}
	.fxpush-banner .fxpush-banner__text,
	#fxpush-banner .fxpush-banner__text {
		font-size: 0.85rem !important;
		flex-basis: calc(100% - 56px);
	}
	.fxpush-banner .fxpush-banner__actions,
	#fxpush-banner .fxpush-banner__actions {
		width: 100%;
		justify-content: stretch;
	}
	.fxpush-banner .fxpush-banner__btn--allow,
	#fxpush-banner .fxpush-banner__btn--allow {
		flex: 1;
	}
}

/* === 8. CTA "🎬 Films au cinéma" intégré au panneau filtres === */
/*    Le JS (flixeo-ui.js) déplace le <a class="wpz-btn--cinema">
      de .wpz-filterbar vers le haut du .wpz-filter-panel__body
      en lui ajoutant la classe .wpz-filter-panel__cinema-cta */
.wpz-filter-panel__cinema-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 14px 18px !important;
	margin: 0 0 16px 0 !important;
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	color: #fff !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(239,14,45,0.25);
	transition: all var(--fx-base) var(--fx-ease-out);
	cursor: pointer;
}
.wpz-filter-panel__cinema-cta:hover,
.wpz-filter-panel__cinema-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(239,14,45,0.4);
	background: linear-gradient(135deg, var(--fx-red-bright) 0%, var(--fx-red) 100%) !important;
	color: #fff !important;
	outline: none;
}

/* === 9. Header du panneau filtres : alignement strict === */
.wpz-filter-panel__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 18px !important;
	padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
}
.wpz-filter-panel__title {
	margin: 0 !important;
	font-family: var(--fx-font-body) !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	color: var(--fx-text) !important;
	letter-spacing: 0.01em;
}

/* =============================================================
   FIX-8 — Cloche notif : blanche sur fond rouge quand active
   - Default : icône rouge sur surface sombre (cohérent avec les
     autres boutons du header)
   - Hover   : background rouge léger + icône rouge bright
   - Active (aria-expanded="true" ou panneau notifs ouvert) :
     icône BLANCHE sur fond ROUGE PLEIN
============================================================= */

/* État par défaut : icône rouge sur fond surface */
.site-header .header-actions .flixeo-notif-bell,
.flixeo-notif-bell {
	background: var(--fx-surface) !important;
	color: var(--fx-red) !important;
	border: 1px solid var(--fx-border-strong) !important;
	transition: all var(--fx-fast) var(--fx-ease-out);
}
.site-header .header-actions .flixeo-notif-bell svg,
.flixeo-notif-bell svg {
	stroke: currentColor !important;
	color: inherit !important;
}

/* Hover : effet rouge subtil */
.site-header .header-actions .flixeo-notif-bell:hover,
.flixeo-notif-bell:hover {
	background: var(--fx-red-tint) !important;
	color: var(--fx-red-bright) !important;
	border-color: var(--fx-red) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(239, 14, 45, 0.25);
}

/* ACTIVE : icône BLANCHE sur FOND ROUGE PLEIN */
.site-header .header-actions .flixeo-notif-bell[aria-expanded="true"],
.flixeo-notif-bell[aria-expanded="true"],
.flixeo-notif-bell.is-open,
body.flixeo-notif-open .flixeo-notif-bell {
	background: var(--fx-red) !important;
	color: #fff !important;
	border-color: var(--fx-red) !important;
	box-shadow: 0 0 0 4px var(--fx-red-glow), 0 6px 16px rgba(239, 14, 45, 0.35) !important;
	transform: translateY(-1px);
}
.site-header .header-actions .flixeo-notif-bell[aria-expanded="true"] svg,
.flixeo-notif-bell[aria-expanded="true"] svg,
.flixeo-notif-bell.is-open svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* Badge compteur : reste rouge avec bord sombre (au-dessus du fond rouge actif,
   on passe en blanc/rouge pour rester visible) */
.flixeo-notif-bell[aria-expanded="true"] .flixeo-notif-bell__badge,
.flixeo-notif-bell.is-open .flixeo-notif-bell__badge {
	background: #fff !important;
	color: var(--fx-red) !important;
	border-color: #fff !important;
}

/* =============================================================
   FIX-9 — Search modal : supprime le double bord rouge
   - Le wrapper .flixeo-search-modal__input-wrap a déjà son propre
     focus-within (border rouge) → on le GARDE.
   - L'<input> à l'intérieur héritait du focus global
     "body.flixeo-themed input:focus" (border rouge + halo + bg) qui
     créait un SECOND bord → on le neutralise.
============================================================= */
body.flixeo-themed .flixeo-search-modal__input-wrap input:focus,
body.flixeo-themed .flixeo-search-modal__input:focus,
.flixeo-search-modal__input-wrap input:focus,
.flixeo-search-modal__input:focus {
	border: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	background: transparent !important;
	outline: none !important;
}

/* =============================================================
   FIX-10 — Film card premium (refonte complète vignette)
   - Design dark AlloCiné cohérent avec --fx-*
   - Hover : zoom subtil + shadow rouge + glow
   - Plateformes en overlay bas de l'affiche (gradient)
   - Bouton favori : glassmorphism + animation pulse à l'activation
   - Étoiles or AlloCiné + note chiffrée
   - Année / durée / genre en chips minimalistes
============================================================= */

/* === STRUCTURE DE LA CARD === */
body.flixeo-themed .film-card,
body.flixeo-themed .wpz-film-card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--fx-surface) !important;
	border: 1px solid var(--fx-border) !important;
	border-radius: var(--fx-radius-lg) !important;
	overflow: hidden !important;
	text-align: left !important;
	height: 100% !important;
	transition: transform var(--fx-base) var(--fx-ease-out),
	            box-shadow var(--fx-base) var(--fx-ease-out),
	            border-color var(--fx-base) var(--fx-ease-out);
	isolation: isolate;
}
body.flixeo-themed .film-card:hover,
body.flixeo-themed .wpz-film-card:hover {
	transform: translateY(-4px);
	border-color: var(--fx-red);
	box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7),
	            0 0 0 1px var(--fx-red-glow),
	            0 8px 24px -8px var(--fx-red-glow);
}

/* === LIEN ENGLOBANT === */
body.flixeo-themed .film-card__link {
	display: flex !important;
	flex-direction: column !important;
	color: inherit !important;
	text-decoration: none !important;
	height: 100%;
	background: none !important;
	background-image: none !important;
}

/* === AFFICHE (image) === */
body.flixeo-themed .film-card .film-thumb {
	position: relative;
	width: 100% !important;
	aspect-ratio: 2/3 !important;
	overflow: hidden !important;
	background: #000 !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
body.flixeo-themed .film-card .film-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--fx-slow) var(--fx-ease-out),
	            filter var(--fx-slow) var(--fx-ease-out);
}
body.flixeo-themed .film-card:hover .film-thumb img {
	transform: scale(1.06);
	filter: brightness(1.05);
}

/* Placeholder sans affiche */
body.flixeo-themed .film-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%) !important;
	color: var(--fx-text-mute);
}
body.flixeo-themed .film-thumb__noposter {
	color: var(--fx-text-mute);
	font-size: 0.78rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* === OVERLAY PLATEFORMES (bas de l'affiche) === */
body.flixeo-themed .film-thumb__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 10px 10px;
	background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.85) 100%);
	pointer-events: none;
	z-index: 2;
}
body.flixeo-themed .film-thumb .plateformes-icons,
body.flixeo-themed .film-thumb__overlay .plateformes-icons {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: auto;
	background: transparent !important;
}
body.flixeo-themed .film-thumb .plateforme-icon,
body.flixeo-themed .film-thumb__overlay .plateforme-icon {
	width: 26px !important;
	height: 26px !important;
	border-radius: var(--fx-radius-sm) !important;
	background: rgba(255,255,255,0.95) !important;
	padding: 3px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	border: 0 !important;
	transition: transform var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .film-thumb .plateforme-icon:hover,
body.flixeo-themed .film-thumb__overlay .plateforme-icon:hover {
	transform: scale(1.08);
}
body.flixeo-themed .film-thumb .plateforme-icon img,
body.flixeo-themed .film-thumb__overlay .plateforme-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

/* === BADGES (cinéma / sortie / nouveauté) === */
body.flixeo-themed .film-card .badge-cinema,
body.flixeo-themed .film-card .badge-nouveau,
body.flixeo-themed .film-card .badge-decompte,
body.flixeo-themed .film-card .badge-futur,
body.flixeo-themed .film-card .badge-salle {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 3 !important;
	padding: 5px 10px !important;
	border-radius: var(--fx-radius-sm) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 0 !important;
	white-space: nowrap;
}
body.flixeo-themed .film-card .badge-cinema {
	background: linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
}
body.flixeo-themed .film-card .badge-nouveau {
	background: linear-gradient(135deg, #27c084 0%, #1ea674 100%) !important;
}
body.flixeo-themed .film-card .badge-decompte {
	background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
}
body.flixeo-themed .film-card .badge-futur {
	background: rgba(15,15,18,0.92) !important;
	color: var(--fx-text) !important;
	border: 1px solid var(--fx-border-strong) !important;
}

/* Badge âge — TOUJOURS À GAUCHE DU BOUTON LIKE (même ligne, même taille) */
body.flixeo-themed .film-card .wpz-badge-age {
	position: absolute !important;
	top: 10px !important;
	right: 56px !important;     /* 10 (offset like) + 38 (like) + 8 (gap) */
	left: auto !important;
	bottom: auto !important;
	z-index: 4 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: rgba(15,15,18,0.92) !important;
	color: var(--fx-red-bright) !important;
	border: 1.5px solid var(--fx-red) !important;
	font-family: var(--fx-font-body) !important;
	font-size: 0.82rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* === BOUTON FAVORI (cœur Lucide-style premium) === */
body.flixeo-themed .film-card .action-btn[data-action="favoris"] {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	z-index: 4 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	/* Glassmorphism premium : double layer dark + subtle inner glow */
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08) 0%, transparent 60%),
		rgba(8,8,11,0.72) !important;
	border: 1px solid rgba(255,255,255,0.16) !important;
	color: #fff !important;
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow:
		0 4px 14px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.08);
	transition:
		background var(--fx-base) var(--fx-ease-out),
		border-color var(--fx-base) var(--fx-ease-out),
		transform var(--fx-fast) var(--fx-ease-out),
		box-shadow var(--fx-base) var(--fx-ease-out);
}
body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-heart,
body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-x {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	overflow: visible;
	transition: transform var(--fx-fast) var(--fx-ease-out);
}
/* Stroke net même quand le bouton scale */
body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-heart path,
body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-x path {
	vector-effect: non-scaling-stroke;
}

/* Hover : gradient rouge AlloCiné premium + halo */
body.flixeo-themed .film-card .action-btn[data-action="favoris"]:hover {
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18) 0%, transparent 65%),
		linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	border-color: var(--fx-red-bright) !important;
	color: #fff !important;
	transform: scale(1.1) !important;
	box-shadow:
		0 8px 22px var(--fx-red-glow),
		0 0 0 4px rgba(239,14,45,0.18),
		inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
body.flixeo-themed .film-card .action-btn[data-action="favoris"]:hover .icon-heart {
	transform: scale(1.08);
}

/* Le bouton like reste fixé en top-right.
   Le badge "Interdit au moins de -X" se place TOUJOURS à sa gauche (cf. règle .wpz-badge-age). */

/* === État ACTIF (favori en cours) — rouge plein gradient + halo === */
body.flixeo-themed .film-card .action-btn.is-fav {
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22) 0%, transparent 65%),
		linear-gradient(135deg, var(--fx-red) 0%, var(--fx-red-bright) 100%) !important;
	border-color: var(--fx-red) !important;
	color: #fff !important;
	box-shadow:
		0 6px 20px var(--fx-red-glow),
		0 0 0 3px rgba(239,14,45,0.15),
		inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
body.flixeo-themed .film-card .action-btn.is-fav .icon-heart {
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
body.flixeo-themed .film-card .action-btn.is-fav .icon-heart path,
body.flixeo-themed .film-card .action-btn.is-fav .icon-heart--full path {
	fill: #fff !important;
	stroke: #fff !important;
}
body.flixeo-themed .film-card .action-btn.is-fav:hover {
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.28) 0%, transparent 65%),
		linear-gradient(135deg, var(--fx-red-bright) 0%, var(--fx-red) 100%) !important;
	border-color: var(--fx-red-bright) !important;
	transform: scale(1.14) !important;
	box-shadow:
		0 10px 26px var(--fx-red-glow),
		0 0 0 4px rgba(239,14,45,0.22) !important;
	animation: fx-heart-pulse 0.55s var(--fx-ease-out);
}
@keyframes fx-heart-pulse {
	0%   { transform: scale(1.14); }
	30%  { transform: scale(1.28); }
	60%  { transform: scale(1.04); }
	100% { transform: scale(1.14); }
}

/* Active (clic en cours) — légère réduction pour feedback tactile */
body.flixeo-themed .film-card .action-btn[data-action="favoris"]:active {
	transform: scale(0.96) !important;
	transition-duration: 80ms;
}

/* État loading */
body.flixeo-themed .film-card .action-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* === BODY DE LA CARD (sous l'image) === */
body.flixeo-themed .film-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 12px 14px;
	flex: 1;
	min-height: 0;
}

/* === TITRE === */
body.flixeo-themed .film-card__title {
	font-family: var(--fx-font-body) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--fx-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: -0.01em;
	/* Limite à 2 lignes pour cohérence visuelle */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em; /* réserve l'espace même si titre court */
	transition: color var(--fx-fast) var(--fx-ease-out);
}
body.flixeo-themed .film-card:hover .film-card__title {
	color: var(--fx-red-bright) !important;
}

/* === META (année + durée + genre) === */
body.flixeo-themed .film-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	font-size: 0.72rem;
	color: var(--fx-text-mute);
	font-weight: 500;
	line-height: 1;
}
body.flixeo-themed .film-card__year {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 7px !important;
	margin: 0 !important;
	background: rgba(255,255,255,0.06) !important;
	color: var(--fx-text-soft) !important;
	border-radius: var(--fx-radius-sm) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 0 !important;
}
body.flixeo-themed .film-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 7px;
	background: rgba(255,255,255,0.04);
	color: var(--fx-text-mute);
	border-radius: var(--fx-radius-sm);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
body.flixeo-themed .film-card__duration svg {
	color: var(--fx-text-mute);
	flex-shrink: 0;
}
body.flixeo-themed .film-card__genre {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	background: var(--fx-red-tint);
	color: var(--fx-red-bright);
	border-radius: var(--fx-radius-sm);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid rgba(239, 14, 45, 0.18);
}

/* === NOTE (étoiles + chiffre) === */
body.flixeo-themed .film-card .etoile-vignette,
body.flixeo-themed .film-card__rating {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--fx-text-soft) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}
body.flixeo-themed .film-card .etoile-vignette .etoiles {
	display: inline-flex;
	gap: 1px;
	line-height: 1;
}
body.flixeo-themed .film-card .etoile-vignette .etoile {
	color: var(--fx-star) !important;
	font-size: 0.95rem !important;
	line-height: 1 !important;
	text-shadow: 0 1px 4px rgba(255, 184, 0, 0.25);
}
body.flixeo-themed .film-card .etoile-vignette .etoile.vide {
	color: var(--fx-star-dim) !important;
	text-shadow: none;
}
body.flixeo-themed .film-card .etoile-vignette .etoile.demi {
	position: relative;
	color: var(--fx-star-dim) !important;
}
body.flixeo-themed .film-card .etoile-vignette .etoile.demi::before {
	content: '★';
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	color: var(--fx-star);
	text-shadow: 0 1px 4px rgba(255, 184, 0, 0.25);
}
body.flixeo-themed .film-card .etoile-vignette .note {
	color: var(--fx-text) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* === RESPONSIVE (mobile : padding compact) === */
@media (max-width: 600px) {
	body.flixeo-themed .film-card__body {
		padding: 10px 10px 12px;
		gap: 5px;
	}
	body.flixeo-themed .film-card__title {
		font-size: 0.88rem !important;
		line-height: 1.2 !important;
		min-height: 2.2em;
	}
	body.flixeo-themed .film-card__meta {
		font-size: 0.68rem;
		gap: 4px;
	}
	body.flixeo-themed .film-card__year,
	body.flixeo-themed .film-card__duration,
	body.flixeo-themed .film-card__genre {
		font-size: 0.66rem !important;
		padding: 3px 6px !important;
	}
	body.flixeo-themed .film-card .action-btn[data-action="favoris"] {
		width: 34px !important;
		height: 34px !important;
	}
	body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-heart,
	body.flixeo-themed .film-card .action-btn[data-action="favoris"] .icon-x {
		width: 18px !important;
		height: 18px !important;
	}
	/* Badge âge mobile : même taille que le like (34×34) + collé à sa gauche */
	body.flixeo-themed .film-card .wpz-badge-age {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		right: 50px !important;   /* 10 (offset like) + 34 (like) + 6 (gap) */
		font-size: 0.74rem !important;
	}
}

/* =============================================================
   FliXeo — Correctifs page Blog (2026-06-07)
   1) Masque la toolbar LEGACY du thème (.wpz-filterbar) qui
      faisait doublon avec la flixeo-toolbar (2 champs de recherche).
      ⚠️ On la garde dans le DOM (pas de suppression) : le bouton
      #wpzOpenFilters qu'elle contient reste cliquable par JS — le
      bouton « Filtres » de la flixeo-toolbar le déclenche via
      data-open-filters (flixeo-ui.js → getElementById('wpzOpenFilters').click()).
   2) Date des cartes articles : .wpz-post-date n'est stylé que dans
      vignettes-post.css, NON chargé sur /blog/ → texte invisible.
      On redonne ici un style lisible (puce sombre + texte blanc).
============================================================= */
.wpz-posts-archive .wpz-filterbar { display: none !important; }

/* Contexte de positionnement de la puce date (au cas où le CSS d'origine manque) */
.wpz-posts-archive .wpz-post-thumb__inner,
.wpz-post-card .wpz-post-thumb__inner { position: relative; }

.wpz-posts-archive .wpz-post-date,
.wpz-post-card .wpz-post-date {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: var(--fx-radius-full, 9999px);
	font-size: 12px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .2px;
	color: #fff !important;
	background: rgba(0, 0, 0, .72) !important;
	border: 1px solid var(--fx-border-strong, rgba(255, 255, 255, .18));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	pointer-events: none;
}
@media (max-width: 520px) {
	.wpz-posts-archive .wpz-post-date,
	.wpz-post-card .wpz-post-date {
		right: 8px;
		bottom: 8px;
		padding: 5px 9px;
		font-size: 11px;
	}
}