/* ==========================================================================
   Blocs EV Film (compositions Kadence)
   Les couleurs et polices suivent les réglages globaux de Kadence.
   ========================================================================== */

/* ---------- Carrousel de cartes portrait ---------- */
.hz-portrait-slider {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hz-portrait-slider .wp-block-kadence-advancedheading {
	margin: 0 0 1.75rem;
}

/* Place pour les flèches sous le carrousel.
   --hz-arrows-gap = espace supplémentaire entre le bas des cartes et les flèches. */
.hz-portrait-slider { --hz-arrows-gap: 20px; }
.hz-portrait-slider .wp-block-kadence-advancedgallery {
	margin-bottom: 1.5rem;
	padding-bottom: calc(3.5rem + var(--hz-arrows-gap, 0px));
}

/* Cartes */
.hz-portrait-slider .kadence-blocks-gallery-item-inner {
	border-radius: 14px;
	overflow: hidden;
}
.hz-portrait-slider .kadence-blocks-gallery-item-inner img {
	transition: transform .5s ease;
}
.hz-portrait-slider .kadence-blocks-gallery-item:hover .kadence-blocks-gallery-item-inner img {
	transform: scale(1.04);
}

/* Légende : badge (italique), titre (gras), sous-titre */
.hz-portrait-slider .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption {
	padding: 3.5rem 1.1rem 1.1rem !important;
	text-align: left;
	overflow: visible;
	font-size: .9rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .88);
}
.hz-portrait-slider .kadence-blocks-gallery-item__caption strong {
	display: inline-block;
	margin: .15rem 0 .1rem;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}
.hz-portrait-slider .kadence-blocks-gallery-item__caption em {
	display: inline-block;
	margin-bottom: .35rem;
	font-style: normal;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--global-palette3, #1b2b2a);
	background: rgba(255, 255, 255, .95);
	padding: .25rem .65rem;
	border-radius: 999px;
}

/* Flèches rondes, en bas à droite.
   Sélecteurs renforcés : ils l'emportent sur ceux de Kadence (coins de 3 px)
   quel que soit l'ordre de chargement des feuilles de style.
   « !important » sur l'arrondi : certains thèmes enfants forcent des flèches carrées
   (ex. « .splide .splide__arrow { border-radius: 0 !important } »). */
.hz-portrait-slider .wp-block-kadence-advancedgallery .splide .splide__arrows .splide__arrow {
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50% !important;
	border: 1.5px solid var(--global-palette6, #d9d4ca);
	background: var(--global-palette9, #fff);
	color: var(--global-palette3, #1b2b2a);
	box-shadow: none;
	opacity: 1;
	transition: border-color .2s, opacity .2s;
}
.hz-portrait-slider .wp-block-kadence-advancedgallery .splide .splide__arrows .splide__arrow:hover,
.hz-portrait-slider .wp-block-kadence-advancedgallery .splide .splide__arrows .splide__arrow:focus {
	border-color: var(--global-palette3, #1b2b2a);
	background: var(--global-palette9, #fff);
	color: var(--global-palette3, #1b2b2a);
}
.hz-portrait-slider .wp-block-kadence-advancedgallery .splide .splide__arrows .splide__arrow:disabled {
	opacity: .35;
}
.hz-portrait-slider .wp-block-kadence-advancedgallery .splide .splide__arrows .splide__arrow svg {
	fill: currentColor;
	width: 14px;
	height: 14px;
}
.hz-portrait-slider .splide.kb-slider-arrow-position-outside-bottom-right .splide__arrows {
	right: 0;
	bottom: calc(-3.5rem - var(--hz-arrows-gap, 0px));
}

/* Bouton « Voir plus » */
.hz-portrait-slider .wp-block-kadence-advancedbtn {
	margin-top: .5rem;
}

@media (max-width: 767px) {
	.hz-portrait-slider .wp-block-kadence-advancedheading { margin-bottom: 1.25rem; }
	.hz-portrait-slider .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption { padding: 3rem 1rem 1rem !important; }
}

/* Les légendes sont dans le lien de la carte : pas de soulignement hérité du thème. */
.hz-portrait-slider .kadence-blocks-gallery-item a,
.hz-portrait-slider .kadence-blocks-gallery-item a:hover,
.hz-portrait-slider .kadence-blocks-gallery-item__caption,
.hz-portrait-slider .kadence-blocks-gallery-item__caption * {
	text-decoration: none !important;
}

/* ---------- Variante « légende sous l'image » (3 lignes centrées) ----------
   Ligne 1 = H4 et ligne 2 = H5 : style des titres du thème (Personnaliser > Typographie de Kadence).
   Ligne 3 = texte courant du thème, en capitales avec 1 px d'approche. */
.hz-caption-below .kadence-blocks-gallery-item-inner {
	border-radius: 0;
	overflow: visible;
}
.hz-caption-below .kb-gal-image-radius {
	border-radius: 14px;
	overflow: hidden;
}
/* Annule les réglages de légende de Kadence (13 px, blanc, fond) pour hériter du thème. */
.hz-caption-below .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption,
.hz-portrait-slider.hz-caption-below .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 8px 0 !important;
	margin: 0;
	max-height: none;
	overflow: visible;
	text-align: center;
	background: none !important;
	opacity: 1 !important;
	transform: none !important;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--global-palette4, inherit);
}
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l1,
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l2 {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
}
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l3 {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
}
/* Titre et sous-titre cliquables : même apparence que sans lien. */
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-card-link {
	display: block;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
/* Lien ajouté sur la ligne 3 : même apparence que le reste de la ligne (ni couleur de lien, ni soulignement). */
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l3 a,
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l3 a:hover,
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l3 a:focus,
.hz-caption-below .kadence-blocks-gallery-item__caption .hz-l3 a:visited {
	color: inherit !important;
	text-decoration: none !important;
}

/* Éditeur : la légende sous l'image reste lisible pendant la mise en page.
   (Kadence l'affiche en blanc 13 px ; le fond étant transparent, elle devenait invisible.)
   Aperçu approché : 1re ligne au style des titres, lignes suivantes en texte courant.
   Le rendu exact H4 / H5 / texte s'affiche sur la page publiée et en prévisualisation. */
.editor-styles-wrapper .hz-cards-below .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figcaption.kadence-blocks-gallery-item__caption {
	position: static !important;
	max-height: none !important;
	overflow: visible !important;
	padding: 18px 8px 0 !important;
	background: none !important;
	color: var(--global-palette4, #3a4a48) !important;
	font-family: var(--global-body-font-family, inherit);
	font-size: inherit;
	line-height: 1.6;
	text-align: center;
}
.editor-styles-wrapper .hz-cards-below .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figcaption.kadence-blocks-gallery-item__caption::first-line {
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.5em;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: var(--global-palette3, #1b2b2a);
}
.editor-styles-wrapper .hz-cards-below .kadence-blocks-gallery-item figcaption a,
.editor-styles-wrapper .hz-cards-below .kadence-blocks-gallery-item figcaption .block-editor-rich-text a {
	color: inherit !important;
	text-decoration: none !important;
}

/* ---------- Carrousel de films : légende = titre H3 + lieu + mention ----------
   Ligne 1 au style H3 du thème, ligne 2 au style des titres (police des titres, plus petite),
   ligne 3 en petites capitales espacées. */
.hz-caption-below .hz-cards-films .kadence-blocks-gallery-item__caption .hz-l1 {
	margin: 0 0 .15em;
}
.hz-caption-below .hz-cards-films .kadence-blocks-gallery-item__caption .hz-l2 {
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.05em;
	line-height: 1.4;
	color: var(--global-palette3, inherit);
}
.hz-caption-below .hz-cards-films .kadence-blocks-gallery-item__caption .hz-l3 {
	margin: .35em 0 0;
	font-size: .8em;
}

/* ---------- Vidéo au survol (toutes les Galeries avancées Kadence) ---------- */
.kadence-blocks-gallery-item-inner.hz-has-video .kb-gallery-image-contain {
	position: relative;
}
.kadence-blocks-gallery-item-inner video.hz-hover-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.kadence-blocks-gallery-item-inner.hz-video-playing video.hz-hover-video {
	opacity: 1;
}
.kadence-blocks-gallery-item-inner.hz-has-video .kadence-blocks-gallery-item__caption {
	z-index: 2;
}

/* ---------- Aperçu de la carte suivante (« peek ») ----------
   Le rail du carrousel est raccourci à droite et laissé débordant vers la droite
   seulement : la carte suivante apparaît en partie, la précédente jamais.
   --hz-peek-ratio = part visible de la carte suivante (0.1 = 1/10).
   --hz-cols       = cartes entières visibles (doit correspondre aux colonnes de la galerie).
   --hz-gap        = espacement entre cartes (doit correspondre au réglage de la galerie). */
.hz-portrait-slider {
	--hz-peek-ratio: 0.1;
	--hz-cols: 4;
	--hz-gap: 18px;
}
.hz-portrait-slider.hz-cols-3 { --hz-cols: 3; }          /* Variante 3 cartes : ordinateur et iPad */
.hz-portrait-slider.hz-cols-2 { --hz-cols: 2; }          /* Variante paysage 16:9 : ordinateur et iPad */
@media (max-width: 1199px) {
	.hz-portrait-slider { --hz-cols: 3; --hz-gap: 16px; }
}
@media (max-width: 767px) {
	.hz-portrait-slider.hz-portrait-slider { --hz-cols: 2; --hz-gap: 12px; }
}
@media (max-width: 767px) {
	.hz-portrait-slider.hz-cols-2 { --hz-cols: 1; }           /* Paysage : 1 carte dès 767 px */
}
@media (max-width: 543px) {
	.hz-portrait-slider.hz-portrait-slider { --hz-cols: 1; }  /* Mobile : 1 carte + 1/10 */
}
.hz-portrait-slider .wp-block-kadence-advancedgallery {
	overflow: hidden;
}
.hz-portrait-slider .wp-block-kadence-advancedgallery .kt-blocks-carousel {
	overflow: visible;
}
.hz-portrait-slider .kt-blocks-carousel .splide__track {
	overflow: visible;
	/* Coupe tout ce qui dépasse à gauche du rail, laisse dépasser à droite. */
	clip-path: inset(-20px -100vw -20px 0);
	/* n cartes entières + p de la suivante : marge = (p × (100% − (n−1)·gap) + n·gap) / (n + p) */
	margin-right: calc((var(--hz-peek-ratio) * (100% - (var(--hz-cols) - 1) * var(--hz-gap)) + var(--hz-cols) * var(--hz-gap)) / (var(--hz-cols) + var(--hz-peek-ratio)));
}

/* Mobile, petites tablettes et téléphones à l'horizontale (≤ 767 px) :
   la carte suivante dépasse d'une largeur fixe (--hz-peek-mobile) au lieu d'une fraction.
   Marge = partie visible + espacement entre cartes. */
.hz-portrait-slider { --hz-peek-mobile: 20px; }
@media (max-width: 767px) {
	.hz-portrait-slider .kt-blocks-carousel .splide__track {
		margin-right: calc(var(--hz-peek-mobile) + var(--hz-gap));
	}
}

/* ---------- Lightbox vidéo ---------- */
html.hz-lightbox-open { overflow: hidden; }
.hz-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(10, 14, 14, .92);
	opacity: 0;
	transition: opacity .25s ease;
}
.hz-lightbox[hidden] { display: none; }
.hz-lightbox.is-visible { opacity: 1; }
.hz-lightbox__frame {
	/* --hz-ratio = largeur / hauteur de la vidéo (16:9 par défaut, 0.5625 pour une vidéo verticale) */
	position: relative;
	width: min(1200px, 100%, calc((100vh - 120px) * var(--hz-ratio, 1.7778)));
	width: min(1200px, 100%, calc((100svh - 120px) * var(--hz-ratio, 1.7778)));
	aspect-ratio: var(--hz-ratio, 1.7778);
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.hz-lightbox__frame iframe,
.hz-lightbox__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.hz-lightbox .hz-lightbox__close,
.hz-lightbox .hz-lightbox__close:hover,
.hz-lightbox .hz-lightbox__close:focus,
.hz-lightbox .hz-lightbox__close:active {
	/* Neutralise les styles de boutons du thème (couleur, marges, ombres) */
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid #fff !important;
	background: #fff !important;
	color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: background-color .2s ease, color .2s ease !important;
}
.hz-lightbox .hz-lightbox__close:hover,
.hz-lightbox .hz-lightbox__close:focus-visible {
	background: #000 !important;
	color: #fff !important;
}
.hz-lightbox .hz-lightbox__close:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 3px !important;
}
.hz-lightbox .hz-lightbox__close svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	flex: none !important;
}

/* ---------- Curseur « play » sur les cartes vidéo ---------- */
.wp-block-kadence-advancedgallery a.hz-has-play-cursor,
.wp-block-kadence-advancedgallery a.hz-has-play-cursor * {
	cursor: none !important;
}
.hz-play-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 53px;
	height: 53px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .3); /* cercle noir à 30 % d'opacité */
	color: #fff;
	pointer-events: none;
	opacity: 0;
	scale: .4;
	transition: opacity .2s ease, scale .25s ease;
	will-change: transform;
}
.hz-play-cursor svg {
	display: block;
	margin-left: 2px; /* centrage optique du triangle */
}
.hz-play-cursor.is-active { opacity: 1; scale: 1; }
.hz-play-cursor.is-active.is-pressed { scale: .88; }
@media (prefers-reduced-motion: reduce) {
	.hz-play-cursor { transition: opacity .2s ease; }
}

/* ---------- Icône play fixe sur écran tactile (pas de curseur) ---------- */
@media (hover: none) {
	.wp-block-kadence-advancedgallery a.hz-video-link .kb-gal-image-radius {
		position: relative;
	}
	.wp-block-kadence-advancedgallery a.hz-video-link .kb-gal-image-radius::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		width: 53px;
		height: 53px;
		margin: -26.5px 0 0 -26.5px;
		border-radius: 50%;
		pointer-events: none;
		/* même rendu que le curseur : cercle noir à 30 % d'opacité, triangle blanc */
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23fff'/%3E%3C/svg%3E") calc(50% + 2px) 50% / 21px 21px no-repeat,
			rgba(0, 0, 0, .3);
	}
}

/* Indique visuellement qu'une carte ouvre une vidéo */
.wp-block-kadence-advancedgallery a[href*="vimeo.com"],
.wp-block-kadence-advancedgallery a[href*="youtu"],
.wp-block-kadence-advancedgallery a[href$=".mp4"] { cursor: pointer; }

/* ---------- Films Vimeo : image cliquable avant le chargement du lecteur ---------- */
.bevf-vfacade {
	position: relative;
	width: 100%;
	aspect-ratio: var(--bevf-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
	cursor: pointer;
}
.wp-has-aspect-ratio .wp-block-embed__wrapper .bevf-vfacade {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}
.bevf-vfacade__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bevf-vfacade__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	cursor: pointer;
}
/* Icône centrale : identique à l'icône play du carrousel de films (cercle noir à 30 %, triangle blanc). */
.bevf-vfacade__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	transition: opacity .2s ease, scale .25s ease;
}
.bevf-vfacade__icon svg {
	display: block;
	margin-left: 2px; /* centrage optique du triangle */
}
/* Ordinateur : au survol, l'icône centrale laisse place au curseur « play » qui suit la souris. */
.bevf-vfacade.has-play-cursor,
.bevf-vfacade.has-play-cursor * {
	cursor: none !important;
}
.bevf-vfacade.has-play-cursor .bevf-vfacade__icon {
	opacity: 0;
	scale: .4;
}
.bevf-vfacade__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}
@media (prefers-reduced-motion: reduce) {
	.bevf-vfacade__icon { transition: opacity .2s ease; }
}
.bevf-vfacade__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}