/* Prisma Gallery - styles du front (grille carree + en-tete + logos partenaires + lightbox).
   Les couleurs viennent de variables surchargeables via "Prisma Gallery > Reglages"
   ou par widget Elementor. Valeurs par defaut portees ici. */

.pgal {
	--pgal-primary: #111318;
	--pgal-accent: #E10600;
	margin: 0 0 1.5em;
}

/* ---------- En-tete d'album ---------- */
.pgal-header {
	display: flex;
	align-items: center;          /* logos partenaires centres verticalement avec le titre + la date */
	justify-content: space-between;
	flex-wrap: wrap;              /* sur mobile, les logos passent dessous */
	gap: 12px 16px;
	margin: 0 0 1em;
}
.pgal-header__text { flex: 1 1 auto; min-width: 0; }
.pgal-header__title {
	margin: 0 0 .25em;
	color: var(--pgal-primary);
	line-height: 1.15;
}
.pgal-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	font-size: .95em;
	opacity: .85;
	margin: .25em 0 .5em;
}
.pgal-header__sep { opacity: .5; }
.pgal-header__loc { color: var(--pgal-accent); text-decoration: none; }
.pgal-header__loc:hover { text-decoration: underline; }
.pgal-header__desc { margin: .5em 0 0; }
.pgal-header--compact { margin-top: 1em; }

/* ---------- Logos partenaires (format 1:1) ---------- */
.pgal-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;              /* place a droite du bloc titre/date (voir .pgal-header) */
	/* "0 1 auto" + min-width:0 : le bloc peut RETRECIR sous sa largeur naturelle.
	   Avec l'ancien "0 0 auto", quinze logos imposaient 1200 px au conteneur et
	   poussaient toute la page en largeur sur telephone. */
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
.pgal-partner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
	transition: transform .2s, box-shadow .2s;
}
.pgal-partner:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.pgal-partner__logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.pgal-partner__name { font-size: .8em; padding: 0 6px; text-align: center; color: var(--pgal-primary); }

/* ---------- Beaucoup de partenaires : carrousel ----------
   Au-dela du seuil (5 par defaut), les logos prennent une ligne a eux et
   defilent horizontalement au doigt, a la molette et aux fleches, au lieu de
   s'empiler sur cinq rangees ou de deborder de l'ecran. */
.pgal-partners--carousel {
	flex: 1 1 100%;         /* ligne dediee, sous le titre et la date */
	width: 100%;
	flex-wrap: nowrap;
	gap: 6px;
}
.pgal-partners__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	/* Le defilement doux est demande par le script, au coup par coup (voir
	   assets/js/partners.js) : pas de "scroll-behavior: smooth" ici, sinon la molette
	   et le doigt heriteraient eux aussi de l'inertie. Pas de scroll-snap non plus :
	   sur une bande de logos il n'apporte rien et decale le rail de quelques pixels,
	   ce qui laisse la fleche "precedent" active alors qu'on est deja au debut. */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* anciens Edge */
	padding: 4px 2px;               /* laisse respirer l'ombre des tuiles */
}
.pgal-partners__viewport::-webkit-scrollbar { display: none; }
.pgal-partners__viewport:focus-visible { outline: 2px solid var(--pgal-accent); outline-offset: 2px; }
.pgal-partners__track {
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
}
.pgal-partners--carousel .pgal-partner { flex: 0 0 auto; }
/* Les fleches sont DANS le flux, pas en surimpression : posees par-dessus le rail,
   elles masquaient le premier et le dernier logo sur telephone. */
.pgal-partners__nav {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(17, 19, 24, .72);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, opacity .2s;
}
.pgal-partners__nav:hover { background: var(--pgal-accent); }
.pgal-partners__nav[disabled] { opacity: .3; cursor: default; }
.pgal-partners__nav[disabled]:hover { background: rgba(17, 19, 24, .72); }
/* Rien a faire defiler (peu de logos sur un grand ecran) : pas de fleches.
   display explicite : un simple attribut ne suffirait pas face au display:flex ci-dessus. */
.pgal-partners--static .pgal-partners__nav { display: none; }

@media (max-width: 560px) {
	.pgal-partners--carousel .pgal-partner { width: 56px; height: 56px; }
	.pgal-partners__nav { width: 26px; height: 26px; font-size: .85rem; }
}

/* ---------- Grille de photos (carrees) ---------- */
.pgal-grid {
	--pgal-cols: 4;
	--pgal-gap: 8px;
	--pgal-radius: 8px;
	display: grid;
	grid-template-columns: repeat(var(--pgal-cols), 1fr);
	gap: var(--pgal-gap);
}
@media (max-width: 900px) { .pgal-grid { --pgal-cols: 3; } }
@media (max-width: 560px) { .pgal-grid { --pgal-cols: 2; } }

.pgal-cell {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--pgal-radius);
	cursor: zoom-in;
	background: #0000000d;
}
.pgal-cell__img,
.pgal-cell img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.pgal-cell:hover img { transform: scale(1.06); }

/* ---------- Overlay sur les photos ---------- */
.pgal-cell__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px 12px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none; /* le clic passe a travers vers le lien (lightbox) */
	color: #fff;
}
.pgal-cell:hover .pgal-cell__overlay,
.pgal-grid--ov-always .pgal-cell__overlay { opacity: 1; }
.pgal-cell__ovinner { width: 100%; }
.pgal-cell__title {
	display: block;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pgal-cell__desc {
	display: block;
	font-size: .85em;
	opacity: .95;
	margin-top: .15em;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ---------- Cartes d'albums (index / fiche partenaire) ---------- */
.pgal-cards {
	--pgal-cols: 3;
	--pgal-gap: 16px;
	display: grid;
	grid-template-columns: repeat(var(--pgal-cols), 1fr);
	gap: var(--pgal-gap);
}
@media (max-width: 900px) { .pgal-cards { --pgal-cols: 2; } }
@media (max-width: 560px) { .pgal-cards { --pgal-cols: 1; } }

.pgal-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	overflow: hidden;
	background: #00000008;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
	transition: transform .2s, box-shadow .2s;
}
.pgal-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.pgal-card__media { flex-shrink: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #00000012; }
.pgal-card__img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.pgal-card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 40px; opacity: .4; }
.pgal-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: .7em .8em; }
.pgal-card__title { margin: 0; font-size: inherit; line-height: 1.25; font-weight: 600; color: var(--pgal-primary); }
.pgal-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em; margin-top: .15em; font-size: .85em; opacity: .75; }
.pgal-card__sep { opacity: .6; }
.pgal-card__excerpt { display: block; margin-top: .45em; font-size: .9em; line-height: 1.5; }
.pgal-card__more { display: inline-block; align-self: flex-start; margin-top: .55em; font-weight: 600; color: var(--pgal-primary); }

.pgal-empty { opacity: .7; font-style: italic; }
.pgal-partner__albums-title { color: var(--pgal-primary); margin-top: 1.2em; }

/* ---------- Fiche etablissement : coordonnees + reseaux ---------- */
.pgal-contact { margin: 0 0 1.4em; }
.pgal-contact__list {
	list-style: none;
	margin: 0 0 .8em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.4em;
}
.pgal-contact__item {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.4;
}
.pgal-contact__item a { color: var(--pgal-accent); text-decoration: none; font-weight: 600; }
.pgal-contact__item a:hover { text-decoration: underline; }
.pgal-contact__item::before {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.05em;
	line-height: 1.35;
}
.pgal-contact__site::before     { content: "\1F310"; }  /* globe */
.pgal-contact__address::before  { content: "\1F4CD"; }  /* pin */
.pgal-contact__email::before    { content: "\2709"; }   /* enveloppe */
.pgal-contact__whatsapp::before { content: "\1F4AC"; }  /* bulle */

.pgal-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pgal-social {
	display: inline-flex;
	align-items: center;
	padding: .35em .8em;
	border-radius: 999px;
	font-size: .85em;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--pgal-primary);
	transition: transform .15s, opacity .15s;
}
.pgal-social:hover { transform: translateY(-1px); opacity: .9; }
.pgal-social--facebook  { background: #1877f2; }
.pgal-social--instagram { background: #d6249f; background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.pgal-social--twitter   { background: #000; }
.pgal-social--youtube   { background: #ff0000; }
.pgal-social--tiktok    { background: #010101; }

/* ---------- Lightbox (slider) ---------- */
.pgal-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--pgal-primary) 92%, #000);
	background: rgba(10, 10, 14, .94); /* repli si color-mix indisponible */
	touch-action: pan-y;
}
.pgal-lightbox.is-open { display: flex; }
.pgal-lightbox__stage {
	max-width: 92vw;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pgal-lightbox__img {
	max-width: 92vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
	user-select: none;
}
.pgal-lightbox__caption {
	color: #fff;
	margin-top: .6em;
	font-size: .95em;
	text-align: center;
	max-width: 80vw;
	opacity: .9;
}
.pgal-lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}
.pgal-lightbox__btn:hover { background: var(--pgal-accent); }
.pgal-lightbox__prev { left: 16px; }
.pgal-lightbox__next { right: 16px; }
.pgal-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
}
.pgal-lightbox__close:hover { background: var(--pgal-accent); }
.pgal-lightbox__count {
	position: absolute;
	top: 22px;
	left: 20px;
	color: #fff;
	opacity: .8;
	font-size: .9em;
	letter-spacing: .05em;
}
@media (max-width: 560px) {
	.pgal-lightbox__btn { width: 42px; height: 42px; font-size: 22px; }
	.pgal-lightbox__prev { left: 6px; }
	.pgal-lightbox__next { right: 6px; }
}