/* =============================================================
   Modal réutilisable — .autogenese-modal
   -------------------------------------------------------------
   Principe : n'importe quel bloc Gutenberg portant la classe
   .autogenese-modal (avec un id d'ancre) est masqué dans la
   page et réaffiché dans une fenêtre <dialog> au clic sur un
   déclencheur :
     - un lien  <a href="#mon-ancre">
     - ou tout élément [data-autogenese-modal-open="mon-ancre"]
   Le JS (site.js) se charge du câblage.
   Chargé uniquement côté front (pas dans l'éditeur), donc le
   contenu reste éditable normalement dans Gutenberg.
   ============================================================= */

/* Masque le contenu dans le flux de la page tant que le JS
   ne l'a pas déplacé dans le dialog. */
.autogenese-modal:not(.autogenese-modal--ready) {
	display: none !important;
}

/* Overlay + centrage du dialog */
.autogenese-modal-dialog {
	width: min(720px, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--ag-color-white, #fff);
	color: var(--ag-color-text, #333);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.autogenese-modal-dialog::backdrop {
	background: rgba(20, 20, 25, 0.55);
}

/* Fallback navigateurs sans <dialog> (affichage via [open] seul) */
.autogenese-modal-dialog:not([open]) {
	display: none;
}

.autogenese-modal-dialog__body {
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	padding: 2.25rem 1.5rem 1.75rem;
	overscroll-behavior: contain;
}

.autogenese-modal-dialog__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ag-color-text-strong, #202020);
	background: var(--ag-color-yellow, #f9ca00);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease;
	z-index: 1;
}

.autogenese-modal-dialog__close:hover,
.autogenese-modal-dialog__close:focus-visible {
	background: var(--ag-color-yellow-dark, #e8b900);
}

/* Le contenu déplacé redevient visible à l'intérieur du dialog */
.autogenese-modal-dialog .autogenese-modal {
	display: block !important;
	margin: 0;
}

.autogenese-modal-dialog .autogenese-modal > *:first-child {
	margin-top: 0;
}

.autogenese-modal-dialog .autogenese-modal > *:last-child {
	margin-bottom: 0;
}

/* Verrou de défilement de la page quand un modal est ouvert */
body.autogenese-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.autogenese-modal-dialog {
		width: calc(100vw - 1rem);
		border-radius: 10px;
	}

	.autogenese-modal-dialog__body {
		padding: 2.5rem 1.1rem 1.4rem;
	}
}