/**
 * AFAM — Visionneuse des pages projets
 *
 * Portée : la classe .mfp-afam, posée par le script sur cette visionneuse-là
 * uniquement. Les autres fenêtres Magnific du site (vidéos, formulaires,
 * galeries du thème) ne sont pas touchées.
 *
 * Attention : Magnific pose sa mainClass SUR .mfp-wrap et SUR .mfp-bg.
 * Un sélecteur « .mfp-afam .mfp-wrap » ne correspondrait donc à rien.
 */

/* --------------------------------------------------------------------------
   1. Aucun fond peint autour de la photo.
   Le voile de fond translucide (.mfp-bg), les chevrons et la croix de
   fermeture viennent du thème et restent intacts — c'est voulu.
   -------------------------------------------------------------------------- */

.mfp-afam .mfp-container,
.mfp-afam .mfp-content,
.mfp-afam .mfp-figure,
.mfp-afam .mfp-figure figure,
.mfp-afam .mfp-figure figcaption,
.mfp-afam .mfp-bottom-bar {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Magnific dessine le carton sombre derrière la photo avec un pseudo-élément ;
   les thèmes en ajoutent souvent d'autres. On les neutralise tous. */
.mfp-afam .mfp-content:before,
.mfp-afam .mfp-content:after,
.mfp-afam .mfp-figure:before,
.mfp-afam .mfp-figure:after,
.mfp-afam .mfp-figure figure:before,
.mfp-afam .mfp-figure figure:after,
.mfp-afam .mfp-figure figcaption:before,
.mfp-afam .mfp-figure figcaption:after {
	display: none !important;
	content: none !important;
}

.mfp-afam .mfp-content {
	max-width: none !important;
}

.mfp-afam .mfp-figure,
.mfp-afam .mfp-figure figure,
.mfp-afam .mfp-figure figcaption {
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Taille de la photo.
   Magnific calcule la hauteur maximale en soustrayant le padding CSS de
   .mfp-img : un padding généreux rétrécit donc la photo. On le met à zéro et
   on impose les plafonds ici, en !important — ces règles l'emportent sur la
   hauteur maximale que Magnific écrit en style en ligne.
   -------------------------------------------------------------------------- */

.mfp-afam img.mfp-img {
	padding: 0 !important;
	margin: 0 auto !important;
	width: auto !important;
	height: auto !important;
	max-width: calc(100vw - 130px) !important;
	max-height: calc(100vh - 80px) !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Sous la photo : le compteur seul, pas de légende.
   -------------------------------------------------------------------------- */

.mfp-afam .mfp-bottom-bar {
	margin: 0 !important;
	padding: 8px 0 0 !important;
	min-height: 0 !important;
}

.mfp-afam .mfp-title {
	display: none !important;
}

.mfp-afam .mfp-counter {
	color: #6B6B6B !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   4. Arrière-plan flou.

   backdrop-filter floute ce qui est peint DERRIÈRE l'élément : la page, jamais
   la photo, qui est au-dessus. C'est la seule méthode raisonnable — appliquer
   filter: blur() à la page elle-même la ferait recalculer entièrement et
   casserait tout élément en position fixe.

   Posé sur .mfp-container et non sur .mfp-bg : le voile du thème porte une
   opacité, et opacité plus backdrop-filter sur le même élément donne un rendu
   inégal selon les navigateurs. Le voile reste donc intact, on floute par
   dessus.

   Un seul nombre à régler : le rayon. 8px est un flou léger, on reconnaît la
   page sans la lire. 4px est presque subliminal, 16px efface tout.
   -------------------------------------------------------------------------- */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.mfp-afam .mfp-container {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	/* Sur téléphone, un flou plein écran coûte cher au moment de l'ouverture :
	   rayon réduit. Les appareils qui ne suivent pas gardent le voile seul. */
	@media (max-width: 767px) {
		.mfp-afam .mfp-container {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
		}
	}
}

/* --------------------------------------------------------------------------
   5. Téléphone : les chevrons passent sous la photo, on lui rend la largeur.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.mfp-afam img.mfp-img {
		max-width: calc(100vw - 20px) !important;
		max-height: calc(100vh - 110px) !important;
	}
}