/* #PRODUIRE{fond=css/dsfr_diaporama.css}
   md5:cd8e4868b18d2ad9405f566765ced224 */

/**
 * Styles du diaporama : PhotoSwipe
 *
 * @author		Jonathan OCHEJ
 * @license		GPL - https://www.gnu.org/licenses/gpl-3.0.html
 **/
.pswp {
	/*
		attention pour des raisons de performance ne pas mettre d'opacité dans le CSS 
		mais dans les options de PhotoSwipe (`bgOpacity`).
	*/
	--pswp-bg:#161616; /* même background-color que `body` en thème sombre */
	--pswp-icon-color: #f6f6f6;
	--pswp-error-text-color: #f6f6f6;
}
.pswp__img--placeholder { display: none; } /* désactive le placeholder */
.pswp__error-msg {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: bold;
	margin: auto 80px;
	text-align: center;
}
.pswp__top-bar {
	height: 60px;
}
/* compteur */
.pswp__counter {
	/* reset des styles PhotoSwipe */
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	opacity: 1;
	margin: 0;
	text-shadow: none;
	height: auto;
	white-space: nowrap;

	/* reprise des styles DSFR */
	font-family: "Marianne", arial, sans-serif;
	text-decoration: none;

	/* reprise de la class `.fr-btn` */
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	width: -moz-fit-content;
	width: fit-content;
	font-weight: 500;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);

	/* reprise de la class `.fr-btn--sm` */
	font-size: 0.875rem;
	line-height: 1.5rem;
	min-height: 2rem;
	padding: 0.25rem 0.75rem;
}
@media (max-width: 48em) {
	/* repositionne le compteur à gauche sur les écrans de petite taille */
	.pswp__counter {
		position: relative;
		transform: inherit;
		left: inherit;
		top: inherit;
		align-self: center !important;
		margin-left: 10px;
	}
}
/* lien de téléchargement */
.pswp__telecharger {
	height: auto !important;
	align-self: center !important;
	margin-right: 2px;
}
/* taille des boutons */
button.pswp__button {
	width: 60px;
	height: 60px;
	opacity: 1;
}
/* couleur DSFR lors du survole/focus des boutons */
button.pswp__button:focus {
	--pswp-icon-color: var(--text-inverted-blue-france);
	background-color: var(--background-action-high-blue-france);
}
button.pswp__button:hover {
	--pswp-icon-color: var(--text-inverted-blue-france);
	background-color: var(--background-action-high-blue-france-hover);
}
/* pas d'ombrage des icônes */
.pswp__icn-shadow {
	display: none;
}
/* centrage des icônes DSFR */
.pswp__button .pswp__icn,
.pswp__button--arrow--prev .pswp__icn,
.pswp__button--arrow--next .pswp__icn {
	margin: 0;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translateX(-50%) translateY(-50%);
}
/* flèche suivante inversée */
.pswp__button--arrow--next .pswp__icn {
	transform: translateX(-50%) translateY(-50%) scale(-1, 1);
}
.pswp__button.pswp__button--arrow {
	width: 75px;
	height: 100px;
}
.pswp__button--close {
	margin: 0;
}
.pswp__button--zoom .zoom-out-fill {
	display: none;
}
.pswp--zoomed-in .pswp__button--zoom .zoom-out-fill {
	display: block;
}
/* image suivante lors du clic */
.pswp__img {
	cursor: pointer !important;
}
.pswp--zoomed-in .pswp__img {
	cursor: grab !important;
}
/* css du plugin de légendes dynamiques */
.pswp__dynamic-caption {
  color: #fff;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transition: opacity 120ms linear !important; /* override default */
}

.pswp-caption-content {
  display: none;
}

.pswp__dynamic-caption a {
  color: #fff;
}

.pswp__dynamic-caption--faded {
  opacity: 0 !important;
}

.pswp__dynamic-caption--aside {
  width: auto;
  max-width: 300px;
  padding: 20px 15px 20px 20px;
  margin-top: 70px;
}

.pswp__dynamic-caption--below {
  width: auto;
  max-width: 700px;
  padding: 15px 0 0;
}

.pswp__dynamic-caption--on-hor-edge {
  padding-left: 15px;
  padding-right: 15px;
}

.pswp__dynamic-caption--mobile {
  width: 100%;
  background: rgba(0,0,0,0.5);
  padding: 10px 15px;

  right: 0;
  bottom: 0;

  /* override styles that were set via JS.
    as they interfere with size measurement */
  top: auto !important; 
  left: 0 !important;
}

.pswp__dynamic-caption .titre {
	color: #fff !important;
}
.pswp__dynamic-caption .descriptif {
	color: #fff !important;
}
.pswp__dynamic-caption .credits {
	color: #fff !important;
	font-style: italic;
}
.pswp__dynamic-caption > *:last-child {
	margin-bottom: 0 !important;
}