/* =========================================================
   Aquatiqa – Schémas techniques en lightbox.
   Couleurs reprises de la palette du thème, avec repli.
   ========================================================= */

.adg-figure {
	--adg-lb-ink: var(--theme-palette-color-1, #082338);
	--adg-lb-accent: var(--theme-palette-color-2, #16407D);
	--adg-lb-line: var(--theme-palette-color-6, #D6E4EC);
	--adg-lb-soft: var(--theme-palette-color-7, #EAF4F8);
	--adg-lb-white: var(--theme-palette-color-8, #ffffff);
	margin: 0;
}

/* Texte réservé aux lecteurs d'écran. */
.adg-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Bouton d'ouverture ---------- */
.adg-figure__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 12px 22px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--adg-lb-white);
	background: var(--adg-lb-accent);
	border: 1.5px solid var(--adg-lb-accent);
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.adg-figure__trigger:hover,
.adg-figure__trigger:focus-visible {
	color: var(--adg-lb-accent);
	background: var(--adg-lb-soft);
}
.adg-figure__trigger:focus-visible {
	outline: 2px solid var(--adg-lb-ink);
	outline-offset: 2px;
}
.adg-figure__icon { flex: 0 0 auto; }
.adg-figure__label { min-width: 0; }

@media (max-width: 689.98px) {
	.adg-figure__trigger {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Fenêtre modale ---------- */
.adg-lightbox {
	display: flex;
	flex-direction: column;
	width: min(1180px, calc(100vw - 32px));
	max-width: min(1180px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	color: var(--theme-palette-color-1, #082338);
	background: var(--theme-palette-color-8, #ffffff);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 30px 70px -30px rgba(8, 35, 56, 0.6);
	overflow: hidden;
}
@supports (height: 100dvh) {
	.adg-lightbox { max-height: calc(100dvh - 32px); }
}
/* Repli si <dialog> n'est pas géré : la fenêtre ne doit jamais s'afficher en ligne. */
.adg-lightbox:not([open]) { display: none; }

.adg-lightbox::backdrop { background: rgba(8, 35, 56, 0.72); }

.adg-lightbox__head {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--theme-palette-color-6, #D6E4EC);
}
.adg-lightbox__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}
.adg-lightbox__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: inherit;
	background: var(--theme-palette-color-7, #EAF4F8);
	border: 1px solid var(--theme-palette-color-6, #D6E4EC);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.18s ease;
}
.adg-lightbox__close:hover { background: var(--theme-palette-color-6, #D6E4EC); }
.adg-lightbox__close:focus-visible {
	outline: 2px solid var(--theme-palette-color-2, #16407D);
	outline-offset: 2px;
}

.adg-lightbox__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--theme-palette-color-8, #ffffff);
	text-align: center;
}
.adg-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	/* Se cale sur la hauteur reelle du corps, pas sur celle de la fenetre :
	   le schema n'est jamais tronque par l'overflow:hidden du dialogue. */
	max-height: 100%;
	height: auto;
	margin: 0 auto;
}

.adg-lightbox__caption {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 18px 16px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--theme-palette-color-5, #5A6B7B);
	border-top: 1px solid var(--theme-palette-color-6, #D6E4EC);
}

@media (max-width: 689.98px) {
	.adg-lightbox { border-radius: 8px; }
	.adg-lightbox__head { padding: 12px 14px; }
	.adg-lightbox__body { padding: 12px; }
	.adg-lightbox__caption { padding: 10px 14px 14px; }
}

/* Ecran etroit ou peu haut (paysage sur telephone) : plutot que de reduire le
   schema jusqu'a l'illisible, on lui laisse sa largeur et on fait defiler le corps. */
@media (max-width: 689.98px), (max-height: 600px) {
	.adg-lightbox__image { max-height: none; }
}

/* Tres peu de hauteur : la legende passe en retrait pour laisser la place au schema. */
@media (max-height: 420px) {
	.adg-lightbox__head { padding-block: 8px; }
	.adg-lightbox__caption {
		padding-block: 8px;
		font-size: 0.8rem;
	}
}

/* Repli sans <dialog> natif : ::backdrop n'existe pas, la fenetre est positionnee
   a la main et le fond est un vrai element (voir .adg-lightbox-backdrop). */
.adg-lightbox--fallback[open] {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	margin: 0;
}

/* Fond du repli : element reel, donc cible des evenements. Il intercepte clics,
   survol et defilement, ce qu'une box-shadow ne pouvait pas faire. */
.adg-lightbox-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background: rgba(8, 35, 56, 0.72);
	overscroll-behavior: contain;
	touch-action: none;
}