/* ax_loop — mode d'affichage "popup"
 * Ne style QUE l'overlay des popups (conteneur .ax-popups), la carte de contenu
 * (.ax-popup), les flèches et le bouton fermer. La grille, les tuiles et
 * les liens étirés (.stretched-link) restent gérés par les styles de base ax_loop.

/* Curseur sur les déclencheurs (tuile <article> via handler, ou lien étiré) */
[data-ax-popup-overlay] { 
	cursor: pointer; 
}


/* ----------------------------------------------------------------------
 * Grid display  <section class="ax-loop ax-popup">
 * -------------------------------------------------------------------- */
.ax-loop.ax-popup {
	grid-template-columns: repeat(auto-fill, minmax(min(17ch,100%), 1fr));
}
.ax-item.ax-popup{
	background: var(--ax-color-base);
	border-radius: var(--ax-radius);
	display: grid;
	overflow: hidden;
}
.ax-item.ax-popup .ax-img{
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center;
}
/* ----------------------------------------------------------------------
 * Conteneur overlay  <div class="ax-loop ax-popups" role="dialog">
 * -------------------------------------------------------------------- */

.ax-popups[hidden] { 
	display: none; 
}

.ax-popups {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 2rem);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.ax-popups.is-open { 
	opacity: 1; 
}

.ax-popups .ax-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 20, 0.65);
}

.ax-popups .ax-popup-close {
	position: absolute;
	top: var(--ax-gap);
	right: var(--ax-gap);
	z-index: 10;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50px;
	background: var(--ax-color-base);
	color: var(--ax-color-title);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.ax-popups .ax-popup-close:focus-visible { 
	outline: 2px solid var(--ax-color-base); 
	outline-offset: 2px; 
}

/* Zone du carrousel */
.ax-popups .ax-popup-splide { 
	position: relative; 
	width: min(820px, 92vw); 
}
.ax-popups .splide__slide{
	display: grid;
	align-items: center;
}

/* Carte de contenu = une popup */
.ax-popups .ax-popup {
	max-height: 88vh;
	overflow-y: auto;
	background: var(--ax-color-base);
	color: inherit;
	border-radius: var(--ax-radius);
	padding: clamp(var(--ax-gap), 4vw, 2.5rem);
}
/* Cas [ax_tile] : pas de carrousel, la carte porte elle-même la largeur */
.ax-popups.ax-popup-single .ax-popup { 
	width: min(820px, 92vw); 
}

/* Flèches Splide, une de chaque côté, dans la marge sombre */
.ax-popups .splide__arrow {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--ax-color-base);
	opacity: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ax-popups .splide__arrow svg { 
	width: 1.2em; 
	height: 1.2em; 
	fill: var(--ax-color-txt); 
}
.ax-popups .splide__arrow--prev { 
	left: -3.5rem; 
}
.ax-popups .splide__arrow--next { 
	right: -3.5rem; 
}

/* ----------------------------------------------------------------------
 * Contenu interne des popups (rendu par défaut + aides des handlers)
 * -------------------------------------------------------------------- */
.ax-popups .ax-popup-head { 
	margin-bottom: var(--ax-gap); 
	text-align: center;
	display: grid;
	justify-content: center;
}
.ax-popups .ax-popup .ax-img{
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
	object-position: center;
	margin-bottom: var(--ax-gap);
}
.ax-popups .ax-popup-head .ax-title { 
	margin: 0.25rem 0 0;
}
.ax-popups .popup-content { 
	margin: var(--ax-gap) 0; 
}
.ax-popups .ax-popup-foot { 
	margin-top: 1.5rem; 
	text-align: center;
}

.ax-popup-link {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	background: var(--ax-color-accent);
	color: var(--ax-color-base);
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.ax-popup-link:hover { 
	opacity: 0.85; 
	color: var(--ax-color-base); 
}

/* Blocs "libellé + valeur" produits par ax_popup_field() (handlers) */
.ax-popup-field { 
	margin: 1.25rem 0; 
}
.ax-popup-field-label {
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}
.ax-popup-field-value p:last-child { 
	margin-bottom: 0; 
}

/* Classes historiques encore utilisées par les handlers oc-winner / partner */
.ax-popups .ax-popup-media img { 
	display: block; 
	max-width: 220px; 
	height: auto; 
	margin-bottom: var(--ax-gap); 
}
.ax-popups .ax-popup-types { 
	margin: 0 0 var(--ax-gap); 
	font-size: var(--ax-sz-txt); 
	opacity: 0.75; 
}
.ax-popups .ax-popup-actions { 
	margin-top: var(--ax-gap); 
}

/* ----------------------------------------------------------------------
 * Divers
 * -------------------------------------------------------------------- */
body.ax-popup-open { 
	overflow: hidden; 
}

@media (max-width: 700px) {
	.ax-popups .splide__arrow--prev { 
		left: 0.25rem;
	}
	.ax-popups .splide__arrow--next { 
		right: 0.25rem; 
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-popups { 
		transition: none; 
	}
	.ax-popup-link { 
		transition: none; 
	}
}