/* ASAP – Visionneuse catalogue.
   Le bloc porte aussi la classe .container du thème (largeur de contenu). */

.asap-cv {
	/* Couleur du CTA : à aligner sur le jaune de la charte Cybel. */
	--asap-cv-cta-bg: #f7b217;
	--asap-cv-cta-bg-hover: #e0a012;
	--asap-cv-cta-fg: #1a1a1a;

	margin-block: 6rem;
}

.asap-cv__title {
	margin-bottom: 1rem;
	text-align: center;
}

/* --- Scène : flèches de part et d'autre du livre --- */
.asap-cv__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.asap-cv__book {
	display: flex;
	justify-content: center; /* centre la vue quand une seule page est affichée */
	align-items: flex-start;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

/* Ombre portée : sur le livre en double page, sur la page seule sinon. */
.asap-cv__book:not(.is-single):not(.is-teaser) {
	background: #ddd;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.asap-cv__book.is-single .asap-cv__page {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.asap-cv__page {
	display: block;
	height: auto;
	max-width: 100%;
	background: #fff;
}
.asap-cv__book:not(.is-single) .asap-cv__page--left {
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Flèches --- */
.asap-cv__nav {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.1s ease;
}
.asap-cv__nav:hover:not(:disabled) { transform: scale(1.08); }
.asap-cv__nav:disabled { opacity: 0.25; cursor: default; }
.asap-cv__nav:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* --- Teaser : image déjà floutée + voile + CTA --- */
.asap-cv__book.is-teaser {
	position: relative;
	background: #222;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.asap-cv__teaser {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
}
.asap-cv__teaser-img {
	display: block;
	width: 100%;
	height: auto;
	/* L'image source est DÉJÀ floutée (sécurité) ; ceci n'est que du confort visuel. */
	filter: blur(2px);
	opacity: 0.85;
}
.asap-cv__teaser-veil {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
	color: #fff;
	padding: 1.5rem;
}
.asap-cv__teaser-count {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* --- Pager --- */
.asap-cv__pager {
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	color: #666;
}

.asap-cv__loading {
	text-align: center;
	padding: 2rem;
	color: #666;
}

/* --- CTA --- */
.asap-cv__cta { margin-top: 1.5rem; text-align: center; }
.asap-cv__cta-text { margin-bottom: 0.75rem; font-size: 0.95rem; color: #555; }

.asap-cv__cta-btn {
	display: inline-block;
	padding: 0.9rem 1.8rem;
	background: var(--asap-cv-cta-bg);
	color: var(--asap-cv-cta-fg);
	border: none;
	border-radius: 4px;
	font: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.asap-cv__cta-btn:hover { background: var(--asap-cv-cta-bg-hover); }
.asap-cv__cta-btn:focus-visible { outline: 2px solid var(--asap-cv-cta-fg); outline-offset: 3px; }

/* --- Modale du formulaire --- */
.asap-cv__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.asap-cv__modal[hidden] { display: none !important; }

/* Sécurité : jamais de modale plein écran dans l'éditeur Gutenberg. */
.editor-styles-wrapper .asap-cv__modal,
.block-editor-block-list__layout .asap-cv__modal {
	display: none !important;
}

.asap-cv__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}
.asap-cv__modal-panel {
	position: relative;
	background: #fff;
	border-radius: 6px;
	width: min(760px, 100%);
	max-height: 90vh;
	overflow: hidden auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	-webkit-overflow-scrolling: touch;
}
.asap-cv__modal-panel iframe {
	display: block;
	width: 100%;
	min-height: 70vh;
	border: 0;
}
.asap-cv__modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.asap-cv__modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bloque le scroll de la page quand la modale est ouverte */
html.asap-cv-modal-open { overflow: hidden; }

/* --- Mobile --- */
@media (max-width: 680px) {
	.asap-cv__stage { gap: 0.25rem; }
	.asap-cv__nav { width: 36px; height: 36px; font-size: 1.25rem; }

	.asap-cv__cta-btn {
		display: block;
		width: 100%;
		max-width: 340px;
		margin-inline: auto;
		padding: 0.9rem 1rem;
		font-size: 1rem;
		white-space: normal; /* le libellé peut passer sur 2 lignes sans déborder */
	}

	.asap-cv__teaser-count { font-size: 1.05rem; }

	.asap-cv__modal { padding: 0; }
	.asap-cv__modal-panel {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}
	.asap-cv__modal-panel iframe { min-height: 100vh; }
}

/* --- États d'édition --- */
.asap-cv--empty,
.asap-cv--error {
	padding: 1.5rem;
	border-radius: 4px;
	background: #fff8e5;
	border: 1px solid #e6d28a;
}
.asap-cv--error { background: #fdecea; border-color: #f5c6cb; }