/* Hot Milk Magazine : lecteur PDF. Jetons du thème (--hm-*) avec repli sur la charte. */
.hmm-lecteur {
	--hmm-encre: var(--hm-encre, #16202b);
	--hmm-lagune: var(--hm-lagune, #1d6b67);
	--hmm-surface: var(--hm-surface, #fff);
	--hmm-fond: var(--hm-brume-fonce, #22364a);
	position: relative;
	background: var(--hmm-fond);
	border-radius: var(--hm-rayon-3, 18px);
	overflow: hidden;
	color: #fff;
	margin: 0 0 32px;
	outline: none;
}
.hmm-lecteur:focus-visible { box-shadow: 0 0 0 3px var(--hm-lagune-2, #2f8a85); }
.hmm-lecteur--reserve { padding: 32px 24px; text-align: center; background: var(--hm-lagune-brume, #edf5f4); color: var(--hmm-encre); }
.hmm-lecteur--reserve p { margin: 0 0 12px; }
.hmm-lecteur__barre { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(0, 0, 0, 0.25); flex-wrap: wrap; }
.hmm-lecteur__groupe { display: flex; align-items: center; gap: 6px; }
.hmm-lecteur__btn { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.hmm-lecteur__btn:hover { background: rgba(255, 255, 255, 0.15); }
.hmm-lecteur__btn:focus-visible { background: rgba(255, 255, 255, 0.15); outline: 3px solid #fff; outline-offset: 2px; }
.hmm-lecteur__btn:disabled { opacity: 0.35; cursor: default; }
.hmm-lecteur__btn--texte { font-size: 15px; font-weight: 600; background: var(--hmm-lagune); border-color: var(--hmm-lagune); }
.hmm-lecteur__btn--texte:hover { background: var(--hm-lagune-2, #2f8a85); }
.hmm-lecteur__indic { min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; }
.hmm-lecteur__scene { height: 70vh; min-height: 360px; overflow: auto; display: grid; place-items: center; padding: 8px; }
.hmm-lecteur.is-plein-ecran .hmm-lecteur__scene { height: calc(100vh - 66px); }
.hmm-lecteur.is-zoom .hmm-lecteur__scene { place-items: start center; }
.hmm-lecteur__scene { position: relative; }
.hmm-lecteur__pages { display: grid; place-items: center; width: 100%; }
.hmm-lecteur.is-zoom .hmm-lecteur__pages { place-items: start center; }
.hmm-lecteur__planche { display: flex; gap: 8px; justify-content: center; align-items: flex-start; }
/* Livre animé (StPageFlip, revue UX du 11/10/2026) : la feuille se courbe, l'ombre suit le pli. */
.hmm-lecteur.is-livre .hmm-lecteur__scene { overflow: hidden; }
.hmm-livre { width: 100%; margin: 0 auto; transition: transform 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .hmm-livre { transition: none; } }
.hmm-feuille { background: #fff; overflow: hidden; }
.hmm-feuille img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.25s; }
.hmm-feuille.is-dessinee img { opacity: 1; }
/* Page pas encore dessinée : un papier blanc qui respire doucement */
.hmm-feuille:not(.is-dessinee) { background: linear-gradient(100deg, #fff 30%, #f1f1f1 50%, #fff 70%) 0 0 / 300% 100%; animation: hmm-papier 1.4s linear infinite; }
@keyframes hmm-papier { to { background-position: -150% 0; } }
.hmm-livre .stf__block { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45)); }
.hmm-lecteur.is-livre .hmm-lecteur__zone { display: none; }
/* Zones cliquables : moitié gauche = page précédente, moitié droite = page suivante */
.hmm-lecteur__zone { position: absolute; top: 0; bottom: 0; z-index: 3; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hmm-lecteur__zone--precedent { left: 0; cursor: pointer; }
.hmm-lecteur__zone--suivant { right: 0; cursor: pointer; }
.hmm-lecteur__zone::after { content: ""; position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(0, 0, 0, 0.45) no-repeat center / 22px; opacity: 0; transition: opacity 0.2s; }
.hmm-lecteur__zone--precedent::after { left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.hmm-lecteur__zone--suivant::after { right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.hmm-lecteur__zone:hover::after { opacity: 1; }
.hmm-lecteur.is-zoom .hmm-lecteur__zone, .hmm-lecteur:not(.is-pret) .hmm-lecteur__zone { display: none; }
.hmm-lecteur__planche canvas { background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); max-width: 100%; }
.hmm-lecteur__etat { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; padding: 0 24px; font-size: 15px; pointer-events: none; }
.hmm-lecteur__etat a { color: #fff; pointer-events: auto; }
.hmm-lecteur__etat[hidden] { display: none; }
.hmm-lecteur.is-pret .hmm-lecteur__etat:not([hidden]) { background: rgba(0, 0, 0, 0.5); padding: 12px 24px; }
@media (max-width: 599px) {
	.hmm-lecteur__scene { height: 62vh; }
	.hmm-lecteur__btn--texte span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.hmm-lecteur__planche canvas { transition: opacity 0.2s; }
}

/* Une seule page (11/10/2026) : flèches, compteur et zones de clic n'ont pas lieu d'être. */
.hmm-lecteur.is-une-page [data-hmm-lecteur="precedent"], .hmm-lecteur.is-une-page [data-hmm-lecteur="suivant"], .hmm-lecteur.is-une-page [data-hmm-lecteur="indic"], .hmm-lecteur.is-une-page .hmm-lecteur__zone { display: none; }