/**
 * Cuivro – applications web : page autour de l'outil (publicité, panneau « À propos »).
 * L'outil lui-même garde les feuilles du plugin (cuivro-common.css + la sienne).
 */

:root {
	--app-bg: #efeeeb;
	--app-text: #555;
	--app-gap: 8px;
	/* Emplacement publicitaire : 320 × 50 sur téléphone, 728 × 90 à partir de 768 px. */
	--app-ad-h: 50px;
	--app-safe-top: env(safe-area-inset-top, 0px);
}

@media (min-width: 500px) {
	:root {
		--app-ad-h: 60px;
	}
}

@media (min-width: 768px) {
	:root {
		--app-ad-h: 90px;
		--app-gap: 16px;
	}
}

/* Le fond de la page suit le thème choisi dans l'outil. */
body:has(.cu-tool[data-theme='dark']) {
	--app-bg: #121212;
	--app-text: #aaa;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--app-bg);
	color: var(--app-text);
	font-family: 'Poppins', 'lucida sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	transition: background 0.25s ease;
}

.app-shell {
	/* Hauteur occupée au-dessus et au-dessous de l'outil (encoche, publicité, marges). */
	--app-chrome: calc(var(--app-safe-top) + var(--app-ad-block) + var(--app-gap) + env(safe-area-inset-bottom, 0px));
	--app-ad-block: calc(var(--app-ad-h) + 2 * var(--app-gap));
	box-sizing: border-box;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--app-safe-top) max(var(--app-gap), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--app-gap), env(safe-area-inset-left, 0px));
}

/* Sans publicité (hors ligne, bloquée ou non configurée) : l'emplacement disparaît. */
.app-shell.app-no-ad {
	--app-ad-block: var(--app-gap);
}

/* Publicité en HAUT de l'écran, loin des commandes de l'outil (placées en bas, sous le pouce) :
   aucun risque de toucher une annonce en voulant lancer le métronome ou le micro. */
.app-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--app-ad-h);
	margin: var(--app-gap) 0;
	overflow: hidden;
}

.app-no-ad .app-ad {
	display: none;
}

.app-no-ad .app-tool {
	padding-top: var(--app-gap);
}

/* Taille exacte de l'annonce selon la largeur de l'écran (bloc d'annonces display, dimensions fixes). */
.app-ad-unit {
	display: inline-block;
	width: 320px;
	height: 50px;
}

@media (min-width: 500px) {
	.app-ad-unit {
		width: 468px;
		height: 60px;
	}
}

@media (min-width: 768px) {
	.app-ad-unit {
		width: 728px;
		height: 90px;
	}
}

.app .cu-tool {
	margin: 0;
}

/* Téléphone : l'outil occupe exactement le reste de l'écran. */
@container cuivro (max-width: 639.98px) {
	.app .cu-card {
		height: calc(100vh - var(--app-chrome));
		height: calc(100dvh - var(--app-chrome));
		min-height: 460px;
		max-height: none;
	}
}

/* Écran fixe, comme une application : pas de « tirer pour rafraîchir » ni de rebond,
   qui pourraient recharger la page ou la décaler pendant qu'on joue. */
html {
	overscroll-behavior-y: none;
}

/* Aucun zoom, comme une application : ni au double toucher (taper vite sur Tap Tempo ou les
   boutons ± zoomait la page), ni à deux doigts ; seul le défilement reste permis. Posé sur chaque
   élément : un panneau qui défile (Réglages) ne reprend pas celui de <html>. Complète la balise
   viewport (user-scalable=no) et le blocage des gestes de Safari (app.js). */
html,
body,
body * {
	touch-action: pan-x pan-y;
}

/* Bouton ⓘ ajouté au bandeau de l'outil, à côté du bouton de thème (même aspect). */
.cu-header .app-info-button {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid rgba(var(--cu-header-fg-rgb), 0.25);
	border-radius: 50%;
	background: rgba(var(--cu-header-fg-rgb), 0.08);
	color: rgb(var(--cu-header-fg-rgb));
	cursor: pointer;
	transition: transform var(--cu-transition), border-color var(--cu-transition), color var(--cu-transition);
}

.cu-header .app-info-button:hover {
	transform: scale(1.08);
	border-color: var(--cu-accent);
	color: var(--cu-accent);
}

.cu-header .app-info-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--cu-accent-rgb), 0.4);
}

.cu-header .app-info-button svg {
	width: 20px;
	height: 20px;
}

/* Titre de l'outil : lien vers le site (ajouté par build.js). */
.cu-header a.cu-title {
	color: var(--cu-header-title);
	text-decoration: none;
}

.cu-header a.cu-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cu-header a.cu-title:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: 0 0 0 3px rgba(var(--cu-accent-rgb), 0.4);
}

/* Panneau « À propos » : suit le thème de l'outil. */
.app-about {
	--about-bg: #fff;
	--about-text: #1a1a1a;
	--about-muted: #666;
	--about-line: rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 22px 22px 18px;
	border: 0;
	border-top: 4px solid #e8a93e;
	border-radius: 16px;
	background: var(--about-bg);
	color: var(--about-text);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	font-family: 'Poppins', 'lucida sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
}

body:has(.cu-tool[data-theme='dark']) .app-about {
	--about-bg: #262626;
	--about-text: #f5f5f5;
	--about-muted: #aaa;
	--about-line: rgba(255, 255, 255, 0.12);
}

.app-about::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.app-about[open] {
	animation: app-about-in 0.2s ease;
}

@keyframes app-about-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.app-about-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.app-about-head img {
	flex: 0 0 auto;
	border-radius: 12px;
}

.app-about-head h2 {
	margin: 0;
	font-size: 18px;
}

.app-about-head p {
	margin: 2px 0 0;
	color: var(--about-muted);
	font-size: 13px;
}

.app-install {
	margin-bottom: 14px;
	text-align: center;
}

.app-install-button {
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid #c98a1f;
	border-radius: 999px;
	background: #e8a93e;
	color: #262626;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.app-install-title {
	margin: 0 0 10px;
	font-weight: 700;
	outline: none;
}

.app-install-help {
	margin: 0;
	line-height: 1.5;
}

.app-install-help + .app-install-help,
.app-install-button + .app-install-help {
	margin-top: 10px;
}

.app-share-icon {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

/* Arrivée par un bouton « Installer » : l'installation est mise en avant dans le panneau. */
.app-about-installing .app-install {
	padding: 14px;
	border: 2px solid #e8a93e;
	border-radius: 14px;
}

.app-links {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--about-line);
}

.app-links a,
.app-consent {
	display: block;
	width: 100%;
	padding: 13px 2px;
	border: 0;
	border-bottom: 1px solid var(--about-line);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.app-links a:hover,
.app-consent:hover {
	color: #c98a1f;
}

.app-about form {
	margin: 16px 0 0;
}

.app-about-close {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--about-line);
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Une fois installée, l'application ne propose plus de s'installer. */
@media (display-mode: standalone) {
	.app-install {
		display: none;
	}
}

[hidden] {
	display: none !important;
}