/* Povobia Galerie — affichage public */



.pg-galerie {

	display: grid;

	grid-template-columns: repeat(var(--pg-cols-pc, 4), minmax(0, 1fr));

	gap: var(--pg-gap, 10px);

	margin: 1.5em 0;

	padding: 0;

	list-style: none;

}



.pg-galerie .pg-cell {

	margin: 0;

	padding: 0;

	min-width: 0;

}



.pg-galerie .pg-cadre {

	position: relative;

	display: block;

	width: 100%;

	overflow: hidden;

	background: var(--pg-fond, #f2f0eb);

	border-radius: var(--pg-radius, 6px);

}



/* Mode intelligent : un format pour les portraits, un autre pour les paysages. */

.pg-mode-intelligent .pg-portrait .pg-cadre { aspect-ratio: var(--pg-ratio-p, 3/4); }

.pg-mode-intelligent .pg-paysage  .pg-cadre { aspect-ratio: var(--pg-ratio-l, 3/2); }

.pg-mode-intelligent .pg-paysage  { grid-column: span 2; }



/* Mode uniforme : un cadre unique pour toute la galerie. */

.pg-mode-uniforme .pg-cadre { aspect-ratio: var(--pg-ratio-u, 1/1); }



.pg-galerie .pg-img {

	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	border: 0;

	border-radius: inherit;

	transition: transform .45s ease, opacity .3s ease;

}



.pg-fit-cover .pg-img { object-fit: cover; object-position: center; }

.pg-fit-contain .pg-img { object-fit: contain; }



/* Effets de survol */

.pg-survol-zoom .pg-cadre:hover .pg-img { transform: scale(1.06); }

.pg-survol-fondu .pg-cadre:hover .pg-img { opacity: .8; }



.pg-galerie[data-visionneuse="1"] .pg-cadre { cursor: zoom-in; }



.pg-legende {

	margin: .4em 0 0;

	font-size: .85em;

	line-height: 1.35;

	opacity: .8;

}



/* Protection du clic droit */

.pg-protege .pg-img,

.pg-visionneuse.pg-protege .pg-v-img {

	-webkit-user-select: none;

	user-select: none;

	-webkit-touch-callout: none;

	pointer-events: auto;

}



.pg-erreur {

	padding: .8em 1em;

	border-left: 4px solid #d63638;

	background: #fcf0f1;

	font-size: .9em;

}



/* Tablette */

@media (max-width: 1024px) {

	.pg-galerie { grid-template-columns: repeat(var(--pg-cols-tab, 3), minmax(0, 1fr)); }

	.pg-tab-1col.pg-mode-intelligent .pg-paysage { grid-column: span 1; }

}



/* Téléphone */

@media (max-width: 600px) {

	.pg-galerie { grid-template-columns: repeat(var(--pg-cols-mob, 2), minmax(0, 1fr)); }

	.pg-mob-1col.pg-mode-intelligent .pg-paysage { grid-column: span 1; }

	.pg-legende { font-size: .8em; }

}



/* ---- Visionneuse ---- */



.pg-visionneuse {

	position: fixed;

	inset: 0;

	z-index: 99999;

	display: flex;

	align-items: center;

	justify-content: center;

	background: rgba(15, 15, 17, .94);

	opacity: 0;

	visibility: hidden;

	transition: opacity .25s ease, visibility .25s ease;

}



.pg-visionneuse.pg-ouverte {

	opacity: 1;

	visibility: visible;

}



.pg-v-scene {

	position: relative;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 56px 64px;

	box-sizing: border-box;

}



.pg-v-img {

	max-width: 100%;

	max-height: 100%;

	width: auto;

	height: auto;

	object-fit: contain;

	border-radius: 4px;

	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);

	transition: opacity .2s ease;

}



.pg-v-img.pg-charge { opacity: .25; }



.pg-visionneuse button {

	position: absolute;

	display: flex;

	align-items: center;

	justify-content: center;

	margin: 0;

	padding: 0;

	border: 0;

	color: #fff;

	background: rgba(0, 0, 0, .45);

	border-radius: 999px;

	cursor: pointer;

	line-height: 1;

	transition: background .2s ease;

	box-shadow: none;

}



.pg-visionneuse button:hover,

.pg-visionneuse button:focus-visible {

	background: rgba(255, 255, 255, .22);

	outline: 2px solid rgba(255, 255, 255, .6);

	outline-offset: 2px;

}



.pg-v-fermer {

	top: 14px;

	right: 16px;

	width: 42px;

	height: 42px;

	font-size: 26px;

}



.pg-v-prec,

.pg-v-suiv {

	top: 50%;

	transform: translateY(-50%);

	width: 48px;

	height: 48px;

	font-size: 24px;

}



.pg-v-prec { left: 14px; }

.pg-v-suiv { right: 14px; }



.pg-v-compteur {

	position: absolute;

	top: 20px;

	left: 20px;

	color: rgba(255, 255, 255, .8);

	font-size: 14px;

	letter-spacing: .04em;

}



.pg-v-legende {

	position: absolute;

	left: 50%;

	bottom: 16px;

	transform: translateX(-50%);

	max-width: 80%;

	color: rgba(255, 255, 255, .9);

	font-size: 14px;

	line-height: 1.4;

	text-align: center;

}



.pg-message {

	position: fixed;

	left: 50%;

	bottom: 28px;

	z-index: 100000;

	transform: translate(-50%, 12px);

	padding: 10px 18px;

	border-radius: 999px;

	background: rgba(15, 15, 17, .92);

	color: #fff;

	font-size: 14px;

	opacity: 0;

	pointer-events: none;

	transition: opacity .25s ease, transform .25s ease;

}



.pg-message.pg-visible {

	opacity: 1;

	transform: translate(-50%, 0);

}



html.pg-bloque { overflow: hidden; }



@media (max-width: 600px) {

	.pg-v-scene { padding: 52px 12px 76px; }

	.pg-v-prec, .pg-v-suiv { width: 40px; height: 40px; font-size: 20px; }

	.pg-v-prec { left: 6px; }

	.pg-v-suiv { right: 6px; }

}



@media (prefers-reduced-motion: reduce) {

	.pg-galerie .pg-img,

	.pg-visionneuse,

	.pg-message { transition: none; }

	.pg-survol-zoom .pg-cadre:hover .pg-img { transform: none; }

}



/* ---- Carrousel ---- */

/* Selecteurs doubles (.pg-galerie.pg-carrousel) : la specificite reste

   superieure aux regles de grille quel que soit l'ordre apres minification. */



.pg-galerie.pg-carrousel {

	display: block;

	position: relative;

	max-width: var(--pg-largeur, 900px);

	margin-left: auto;

	margin-right: auto;

}



/* Fenetre fixe : elle seule decoupe, elle n'est jamais deplacee. */

.pg-galerie.pg-carrousel .pg-piste {

	position: relative;

	display: block;

	width: 100%;

	overflow: hidden;

	border-radius: var(--pg-radius, 6px);

}



/* Rail mobile : c'est lui qui glisse. */

.pg-galerie.pg-carrousel .pg-rail {

	display: flex;

	width: 100%;

	transform: translate3d(0, 0, 0);

}



.pg-galerie.pg-carrousel .pg-cell {

	/* Indispensable : sans cela, les figcaption en position absolue

	   s'ancrent toutes sur la piste et se superposent au meme endroit. */

	position: relative;

	flex: 0 0 100%;

	width: 100%;

	max-width: 100%;

	min-width: 0;

	margin: 0;

}



.pg-galerie.pg-carrousel .pg-cadre {

	aspect-ratio: var(--pg-ratio-c, 4/3);

	border-radius: var(--pg-radius, 6px);

}



/* Glissement lateral */

.pg-galerie.pg-trans-glissement .pg-rail {

	transition: transform .55s cubic-bezier(.22, .61, .36, 1);

	will-change: transform;

}



/* Fondu : les diapositives se superposent */

.pg-galerie.pg-trans-fondu .pg-rail { display: grid; }

.pg-galerie.pg-trans-fondu .pg-cell {

	grid-area: 1 / 1;

	opacity: 0;

	transition: opacity .5s ease;

	pointer-events: none;

}

.pg-galerie.pg-trans-fondu .pg-cell.pg-visible {

	opacity: 1;

	pointer-events: auto;

}



/* Ombre portee sous la photo.

   Deux couches : une large et diffuse pour le volume, une courte et dense

   au ras du bord bas pour detacher la photo du fond. */

.pg-galerie.pg-ombre-douce .pg-piste {

	box-shadow: 0 14px 28px -6px rgba(0, 0, 0, .30),

	            0 5px 10px -3px rgba(0, 0, 0, .22);

}



.pg-galerie.pg-ombre-marquee .pg-piste {

	box-shadow: 0 28px 50px -8px rgba(0, 0, 0, .55),

	            0 10px 18px -4px rgba(0, 0, 0, .38);

}



/* L'ombre doit rester visible : sans marge, elle deborde sur le contenu voisin. */

.pg-galerie.pg-ombre-douce,

.pg-galerie.pg-ombre-marquee { margin-bottom: 2.2em; }



/* Fleches */

.pg-galerie.pg-carrousel .pg-nav {

	position: absolute;

	top: 50%;

	z-index: 3;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 44px;

	height: 44px;

	transform: translateY(-50%);

	padding: 0;

	border: 0;

	border-radius: 50%;

	background: rgba(20, 20, 22, .45);

	color: #fff;

	font-size: 24px;

	line-height: 1;

	cursor: pointer;

	transition: background .2s ease, opacity .2s ease;

}



.pg-galerie.pg-carrousel .pg-nav:hover { background: rgba(20, 20, 22, .78); }

.pg-galerie.pg-carrousel .pg-nav[disabled] { opacity: .3; cursor: default; }

.pg-galerie.pg-carrousel .pg-prec { left: 10px; }

.pg-galerie.pg-carrousel .pg-suiv { right: 10px; }



/* Bouton lecture / pause */

.pg-galerie.pg-carrousel .pg-lecture {

	position: absolute;

	top: 10px;

	right: 10px;

	z-index: 3;

	width: 34px;

	height: 34px;

	padding: 0;

	border: 0;

	border-radius: 50%;

	background: rgba(20, 20, 22, .45);

	color: #fff;

	cursor: pointer;

	transition: background .2s ease;

}



.pg-galerie.pg-carrousel .pg-lecture:hover { background: rgba(20, 20, 22, .78); }



.pg-icone-pause {

	display: inline-block;

	width: 10px;

	height: 12px;

	border-left: 3px solid currentColor;

	border-right: 3px solid currentColor;

	vertical-align: middle;

}



.pg-en-pause .pg-icone-pause {

	width: 0;

	height: 0;

	border-left: 11px solid currentColor;

	border-right: 0;

	border-top: 7px solid transparent;

	border-bottom: 7px solid transparent;

	margin-left: 3px;

}



/* Numeros */

.pg-galerie.pg-carrousel .pg-puces {

	display: flex;

	flex-wrap: wrap;

	gap: 4px;

	z-index: 3;

}



.pg-galerie.pg-num-dedans .pg-puces {

	position: absolute;

	left: 50%;

	bottom: 12px;

	transform: translateX(-50%);

	max-width: 92%;

	justify-content: center;

}



.pg-galerie.pg-num-dessous .pg-puces {

	justify-content: center;

	margin-top: 10px;

}



.pg-galerie.pg-carrousel .pg-puce {

	min-width: 26px;

	height: 26px;

	padding: 0 6px;

	border: 0;

	border-radius: 4px;

	background: rgba(20, 20, 22, .6);

	color: #fff;

	font-size: 12px;

	line-height: 26px;

	cursor: pointer;

	transition: background .2s ease;

}



.pg-galerie.pg-num-dessous .pg-puce { background: rgba(20, 20, 22, .35); }

.pg-galerie.pg-carrousel .pg-puce:hover { background: rgba(20, 20, 22, .85); }

.pg-galerie.pg-carrousel .pg-puce.pg-active { background: #7c3aed; }



/* ------------------------------------------------------------------

   Texte sous les photos, en carrousel

   ------------------------------------------------------------------ */



/* Variante « sur la photo » : texte blanc en surimpression. */

.pg-galerie.pg-carrousel.pg-leg-sur .pg-legende {

	position: absolute;

	left: 0;

	right: 0;

	bottom: 46px;

	margin: 0;

	padding: 0 16px;

	text-align: center;

	z-index: 2;

}



.pg-galerie.pg-carrousel.pg-leg-sur .pg-legende span {

	display: inline-block;

	max-width: 100%;

	padding: 4px 12px;

	border-radius: 4px;

	background: rgba(20, 20, 22, .55);

	color: #fff;

	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);

}



.pg-galerie.pg-carrousel.pg-leg-sur.pg-num-dessous .pg-legende { bottom: 12px; }



/* Variante « sous la photo » : le cadre clair se prolonge sous l'image

   et porte le texte en noir. La photo est alors encadree de tous cotes. */

.pg-galerie.pg-carrousel.pg-leg-sous .pg-cell {

	background: var(--pg-fond, #fff);

}



.pg-galerie.pg-carrousel.pg-leg-sous .pg-cadre {

	border-radius: 0;

}



.pg-galerie.pg-carrousel.pg-leg-sous .pg-legende {

	position: static;

	margin: 0;

	padding: 10px 16px 14px;

	background: var(--pg-fond, #fff);

	color: #1d2327;

	text-align: center;

	text-shadow: none;

	opacity: 1;

	font-size: .9em;

	line-height: 1.35;

}



.pg-galerie.pg-carrousel.pg-leg-sous .pg-legende span {

	display: inline-block;

	max-width: 100%;

	overflow-wrap: anywhere;

}



/* Marge claire autour de la photo : elle transforme le cadre en

   passe-partout, comme un encadrement d'atelier. */

.pg-galerie.pg-carrousel .pg-cadre {

	padding: var(--pg-marge, 0);

	box-sizing: border-box;

}



@media (max-width: 600px) {

	.pg-galerie.pg-carrousel .pg-nav { width: 36px; height: 36px; font-size: 20px; }

	.pg-galerie.pg-carrousel .pg-prec { left: 4px; }

	.pg-galerie.pg-carrousel .pg-suiv { right: 4px; }

	.pg-galerie.pg-carrousel .pg-puce { min-width: 22px; height: 22px; font-size: 11px; line-height: 22px; }

}



@media (prefers-reduced-motion: reduce) {

	.pg-galerie.pg-trans-glissement .pg-rail,

	.pg-galerie.pg-trans-fondu .pg-cell { transition: none; }

}



/* Compteur de diapositives (remplace les pastilles quand elles sont trop nombreuses) */

.pg-galerie.pg-carrousel .pg-compteur-diapo {

	z-index: 3;

	display: inline-flex;

	align-items: baseline;

	gap: 3px;

	padding: 4px 12px;

	border-radius: 999px;

	background: rgba(20, 20, 22, .6);

	color: #fff;

	font-size: 13px;

	line-height: 20px;

	font-variant-numeric: tabular-nums;

	white-space: nowrap;

}



.pg-galerie.pg-carrousel .pg-actuelle { font-weight: 700; }

.pg-galerie.pg-carrousel .pg-sep { opacity: .6; }

.pg-galerie.pg-carrousel .pg-total { opacity: .85; }



.pg-galerie.pg-num-dedans .pg-compteur-diapo {

	position: absolute;

	left: 50%;

	bottom: 12px;

	transform: translateX(-50%);

}



.pg-galerie.pg-num-dessous .pg-compteur-diapo {

	position: relative;

	display: flex;

	width: fit-content;

	margin: 10px auto 0;

	background: rgba(20, 20, 22, .38);

}