/* ABC2SVG Player - styles
 * Variables surchargeables par le theme. */
.a2p-player,
.a2p-simple,
.a2p-abc {
	--a2p-bg: #ffffff;
	--a2p-bar-bg: #f4f5f7;
	--a2p-fg: #222;
	--a2p-accent: #1a73e8;
	--a2p-accent-fg: #fff;
	--a2p-border: #dcdfe4;
	--a2p-hl: #d21e1e;
	margin: 1em 0;
}

/* --- Rendu SVG responsive --- */
.a2p-simple svg,
.a2p-player .a2p-score svg,
.a2p-player .a2p-scores svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- Lecteur complet --- */
.a2p-player {
	border: 1px solid var(--a2p-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--a2p-bg);
}
/* Mode « nu » ([abc] simple) : aspect natif, sans cadre ni fond */
.a2p-player.a2p-bare {
	border: none;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.a2p-player.a2p-bare .a2p-stage { padding: 0; }
.a2p-player.a2p-bare .a2p-tune { padding: 2px 0; }
.a2p-player.a2p-bare .a2p-tune + .a2p-tune { border-top: none; }

/* Barre supérieure (navigation livre + plein écran) */
.a2p-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 10px;
	background: var(--a2p-bar-bg);
	border-bottom: 1px solid var(--a2p-border);
}
.a2p-topbar .a2p-fs { margin-left: auto; }

.a2p-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--a2p-border);
	border-radius: 6px;
	background: #fff;
	color: var(--a2p-fg);
	cursor: pointer;
	line-height: 0;
	transition: background .15s, color .15s, border-color .15s;
}
.a2p-btn:hover:not(:disabled) { border-color: var(--a2p-accent); color: var(--a2p-accent); }
.a2p-btn:disabled { opacity: .4; cursor: default; }
.a2p-btn.a2p-mini { width: 30px; height: 30px; border-radius: 5px; }

.a2p-play {
	background: var(--a2p-accent);
	color: var(--a2p-accent-fg);
	border-color: var(--a2p-accent);
}
.a2p-play:hover:not(:disabled) { filter: brightness(1.08); color: var(--a2p-accent-fg); }

/* Décompte : bouton bascule (on = accentué) */
.a2p-ci.a2p-on-btn {
	background: var(--a2p-accent);
	color: var(--a2p-accent-fg);
	border-color: var(--a2p-accent);
}

/* Barre compacte, superposée en haut à gauche de la partition
   (à la hauteur du compositeur ; position verticale calculée en JS). */
.a2p-tunebar {
	position: absolute;
	left: 4px;
	top: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}
/* Contrôles « lecteur » (navigation + plein écran) : tout en haut à droite,
   au-dessus du texte (n'empiète pas sur le compositeur). */
.a2p-rightbar {
	left: auto;
	right: 4px;
	top: 2px;
}

/* Vitesse */
.a2p-speed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 150px;
	min-width: 130px;
	max-width: 340px;
}
.a2p-speed input[type="range"] { flex: 1 1 auto; min-width: 70px; accent-color: var(--a2p-accent); }
.a2p-speed-label {
	font-size: 12px;
	color: var(--a2p-fg);
	white-space: nowrap;
	min-width: 92px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Métronome : bouton compact + popover (vitesse horizontale + case décompte) */
.a2p-metro-wrap { position: relative; display: inline-flex; }
.a2p-speedpop {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid var(--a2p-border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
	padding: 10px 12px;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	min-width: 190px;
}
.a2p-metro-wrap.a2p-open .a2p-speedpop { display: flex; }
.a2p-speedpop .a2p-speed-label {
	min-width: 0;
	text-align: left;
	white-space: nowrap;
	line-height: 1.3;
}
.a2p-hrange {
	width: 100%;
	margin: 0;
	accent-color: var(--a2p-accent);
}
.a2p-ci-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--a2p-fg);
	cursor: pointer;
	white-space: nowrap;
}
.a2p-ci-check input { accent-color: var(--a2p-accent); }

/* Navigation livre (flèches serrées autour du « n sur N ») */
.a2p-nav { display: inline-flex; align-items: center; gap: 3px; }
.a2p-nav .a2p-index-btn { margin-left: 8px; }
.a2p-pos { font-size: 13px; color: var(--a2p-fg); min-width: auto; padding: 0 4px; text-align: center; white-space: nowrap; }

/* --- Scène / partitions --- */
.a2p-stage { padding: 10px; background: var(--a2p-bg); }
.a2p-scores { overflow: auto; }
.a2p-tune { position: relative; padding: 4px 0 12px; }
.a2p-tune + .a2p-tune { border-top: 1px solid var(--a2p-border); }
.a2p-score { overflow: auto; }

/* Rectangles de suivi (surlignage de la note jouee) */
.a2p-hl {
	fill: var(--a2p-hl);
	fill-opacity: 0;
	pointer-events: all;
	cursor: pointer;
	transition: fill-opacity .04s linear;
}
.a2p-hl.a2p-on { fill-opacity: .30; }

/* --- Index (page de garde mode livre) --- */
.a2p-index { padding: 6px 4px; }
.a2p-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.a2p-index-item {
	padding: 4px 10px;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 4px;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.a2p-index-item:hover { background: var(--a2p-bar-bg); color: var(--a2p-accent); }
/* Index encore agrandi en plein écran */
.a2p-player:fullscreen .a2p-index-item,
.a2p-player.a2p-fs-soft .a2p-index-item { font-size: 22px; padding: 6px 14px; }

/* --- Fallback / erreurs --- */
.a2p-fallback { padding: 16px; color: #888; font-style: italic; }
.a2p-error { padding: 16px; color: #b00; }

/* --- Plein ecran --- */
.a2p-player:fullscreen,
.a2p-player.a2p-fs-soft {
	background: var(--a2p-bg);
	display: flex;
	flex-direction: column;
}
.a2p-player:fullscreen .a2p-stage,
.a2p-player.a2p-fs-soft .a2p-stage {
	flex: 1 1 auto;
	overflow: auto;
	display: block;
}
/* Plein écran : chaque partition occupe toute la largeur ; la musique est
   agrandie par « zoom » côté JS pour remplir (hauteur recalculée, pas de coupe). */
.a2p-player:fullscreen .a2p-scores,
.a2p-player.a2p-fs-soft .a2p-scores { width: 100%; max-width: none; }
.a2p-player:fullscreen .a2p-score,
.a2p-player.a2p-fs-soft .a2p-score { width: 100%; }
.a2p-player:fullscreen .a2p-scores svg,
.a2p-player.a2p-fs-soft .a2p-scores svg { max-width: 100%; }

/* Repli plein ecran logiciel */
.a2p-player.a2p-fs-soft {
	position: fixed;
	inset: 0;
	z-index: 99999;
	border-radius: 0;
	margin: 0;
}

/* --- Tâche 2/3 : bloc natif + un bouton Play PAR MORCEAU (fine couche sur abc2svg) --- */
.a2p-abc { margin: 1em 0; position: relative; }
/* Léger cadre autour du LECTEUR COMPLET uniquement (pas l'affichage simple [abc]).
   box-sizing:border-box → le cadre + padding N'AUGMENTENT PAS la largeur (marges et
   layout inchangés). Le padding décale musique ET boutons de la même quantité, donc
   la gouttière reste alignée (positionPlay recalcule au chargement/resize). */
.a2p-abc.a2p-ctl {
	box-sizing: border-box;
	border: 1px solid var(--a2p-border, #e3e5e8);
	border-radius: 8px;
	padding: 8px 12px;
}
/* Pas de cadre en plein écran (vrai ou repli iPhone). */
.a2p-abc.a2p-ctl:fullscreen,
.a2p-abc.a2p-ctl:-webkit-full-screen,
.a2p-abc.a2p-ctl.a2p-fs-soft { border: 0; border-radius: 0; }
.a2p-abc-music svg { display: block; max-width: 100%; height: auto; }
.a2p-abc .a2p-render-loading {
	padding: 14px 8px;
	color: var(--a2p-muted, #646970);
	font-size: 13px;
	font-weight: 600;
}
/* Largeur élargie (attribut width) : le max-width réel est posé en JS (plafonné à
   l'écran, avant le rendu abcweb). On centre le bloc dans la zone de contenu. */
.a2p-abc[data-width] { margin-left: auto; margin-right: auto; }
/* Bouton play/stop par morceau : injecté en JS, dans la gouttière (gauche, hauteur portée) */
.a2p-abc .a2p-play { position: absolute; left: 0; z-index: 4; border-radius: 50%; }
/* Numéro X: par morceau (data-numeros) : dans la gouttière, cliquable (= play). */
.a2p-abc .a2p-num {
	position: absolute; left: 0; z-index: 4;
	background: none; border: 0; padding: 0 2px; min-width: 18px;
	cursor: pointer; text-align: center;
	font-weight: 700; font-size: 16px; line-height: 1;
	color: var(--a2p-fg); font-variant-numeric: tabular-nums;
}
.a2p-abc .a2p-num:hover { color: var(--a2p-accent); }
.a2p-abc:fullscreen .a2p-num,
.a2p-abc.a2p-fs-soft .a2p-num { font-size: 22px; }
/* Icône stop quand la lecture est en cours */
.a2p-play.a2p-on { background: var(--a2p-hl); border-color: var(--a2p-hl); }
/* Icône métronome discrète (grise), cliquable : ouvre le réglage de vitesse. */
.a2p-abc .a2p-metro-icon {
	position: absolute;
	left: 0;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #8a8f98;
	opacity: .75;
	cursor: pointer;
}
.a2p-abc .a2p-metro-icon:hover { color: #555; opacity: 1; }

/* Popover vitesse (métronome) */
.a2p-abc .a2p-mpop {
	position: absolute;
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: 6px;
	min-width: 170px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--a2p-border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}
.a2p-abc .a2p-mpop.a2p-open { display: flex; }
.a2p-abc .a2p-mpop { min-width: 240px; }
/* Ligne : curseur de tempo + case Décompte, sur une seule ligne */
.a2p-abc .a2p-mpop .a2p-mrow { display: flex; align-items: center; gap: 10px; }
.a2p-abc .a2p-mpop .a2p-mrow .a2p-hrange { flex: 1 1 auto; width: auto; min-width: 70px; }
.a2p-abc .a2p-mpop .a2p-hrange { margin: 0; accent-color: var(--a2p-accent); }
.a2p-abc .a2p-mpop .a2p-speed-label {
	font-size: 12px;
	color: var(--a2p-fg);
	white-space: nowrap;
	text-align: left;
	font-variant-numeric: tabular-nums;
}
.a2p-abc .a2p-mpop .a2p-ci-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--a2p-fg);
	cursor: pointer;
	white-space: nowrap;
}
.a2p-abc .a2p-mpop .a2p-ci-check input { accent-color: var(--a2p-accent); }
.a2p-abc .a2p-loading {
	position: absolute;
	right: 10px;
	top: 48px;
	z-index: 8;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--a2p-bar-bg);
	border: 1px solid var(--a2p-border, #d0d3d8);
	color: var(--a2p-fg);
	font-size: 13px;
	font-weight: 600;
}
.a2p-abc .a2p-loading.a2p-loading-error {
	background: #fcf3d6;
	border-color: #f0d97a;
	color: #6a5300;
}

/* --- Barre du haut : navigation (mode livre) + plein écran ---
   Bandeau DÉDIÉ dans le flux (au-dessus de la musique), aligné à droite. */
.a2p-abc .a2p-topbar {
	display: flex; justify-content: flex-end; align-items: center; gap: 6px;
	margin-bottom: 6px;
	position: relative; z-index: 5;
}
.a2p-abc .a2p-topbar .a2p-fs { border-radius: 6px; margin-left: 0; } /* annule un vieux margin-left:auto qui écartait les boutons */
/* Titre optionnel du lecteur : à gauche du bandeau, pousse les contrôles à droite. */
.a2p-abc .a2p-topbar .a2p-title {
	margin-right: auto; font-weight: 700; font-size: 24px; color: var(--a2p-fg);
	line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px;
}
.a2p-abc .a2p-topbar .a2p-pos {
	font-size: 13px; color: var(--a2p-fg);
	padding: 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; /* chiffres à chasse fixe */
}
/* boutons="overlay" : barre SUPERPOSÉE en haut à droite (par-dessus la musique). */
.a2p-abc[data-boutons="overlay"] .a2p-topbar {
	position: absolute; top: 4px; right: 4px;
	margin-bottom: 0;
}
html.a2p-fs-lock { overflow: hidden; }

/* Plein écran natif (desktop / Android) */
.a2p-abc:fullscreen,
.a2p-abc:-webkit-full-screen {
	background: var(--a2p-bg);
	width: 100vw !important; height: 100vh;
	max-width: none !important;
	overflow-y: auto; overflow-x: hidden;
	margin: 0; padding: 56px 0 24px; /* dégage la barre épinglée en haut */
}
.a2p-abc:fullscreen .a2p-topbar,
.a2p-abc:-webkit-full-screen .a2p-topbar { position: fixed; top: 8px; right: 8px; }
.a2p-abc:fullscreen .a2p-abc-music svg,
.a2p-abc:-webkit-full-screen .a2p-abc-music svg { width: 100%; height: auto; }

/* Plein écran « logiciel » (iPhone et repli) */
.a2p-abc.a2p-fs-soft {
	position: fixed; inset: 0; z-index: 99999;
	width: 100vw !important; max-width: none !important;
	background: var(--a2p-bg);
	overflow-y: auto; overflow-x: hidden;
	margin: 0; padding: 56px 0 24px; /* dégage la barre épinglée en haut */
	-webkit-overflow-scrolling: touch;
}
.a2p-abc.a2p-fs-soft .a2p-topbar { position: fixed; top: 8px; right: 8px; }
.a2p-abc.a2p-fs-soft .a2p-abc-music svg { width: 100%; height: auto; }

/* --- Index cliquable (mode livre) --- */
.a2p-abc .a2p-index { padding: 10px 4px 6px; }
.a2p-abc .a2p-index-list { list-style: none; margin: 0; padding: 0; }
.a2p-abc .a2p-index-chapter {
	margin: 20px 0 8px;
	padding: 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--a2p-fg);
}
.a2p-abc .a2p-index-item {
	padding: 6px 12px;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 4px;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.a2p-abc .a2p-index-item:hover { background: var(--a2p-bar-bg); color: var(--a2p-accent); }

/* Disposition « colonnes » responsive selon la largeur DU LECTEUR (requête de
   conteneur, pas de la fenêtre → s'adapte aux blocs width=).
   colonnes2 = max 2 colonnes ; colonnes3 = max 3 colonnes. */
.a2p-abc .a2p-index { container-type: inline-size; }
.a2p-abc .a2p-index-list.a2p-index-cols2,
.a2p-abc .a2p-index-list.a2p-index-cols3 { display: grid; grid-template-columns: 1fr; gap: 2px 18px; }
.a2p-abc .a2p-index-list.a2p-index-cols2 .a2p-index-chapter,
.a2p-abc .a2p-index-list.a2p-index-cols3 .a2p-index-chapter { grid-column: 1 / -1; }
@container (min-width: 420px) {
	.a2p-abc .a2p-index-list.a2p-index-cols2,
	.a2p-abc .a2p-index-list.a2p-index-cols3 { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 600px) {
	.a2p-abc .a2p-index-list.a2p-index-cols3 { grid-template-columns: repeat(3, 1fr); }
}

/* Disposition « grille » : carrés numérotés (X:) à la suite. */
.a2p-abc .a2p-index-list.a2p-index-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.a2p-abc .a2p-index-list.a2p-index-grid .a2p-index-chapter {
	flex: 0 0 100%;
	margin: 22px 0 2px;
	padding: 0;
}
.a2p-abc .a2p-index-list.a2p-index-grid .a2p-index-item {
	width: 44px; height: 44px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--a2p-border, #d0d3d8); border-radius: 8px;
	font-weight: 600; font-variant-numeric: tabular-nums;
}
.a2p-abc .a2p-index-list.a2p-index-grid .a2p-index-item:hover { border-color: var(--a2p-accent); }
.a2p-abc:fullscreen .a2p-index-list.a2p-index-grid .a2p-index-item,
.a2p-abc.a2p-fs-soft .a2p-index-list.a2p-index-grid .a2p-index-item { width: 60px; height: 60px; }

/* Index agrandi en plein écran */
.a2p-abc:fullscreen .a2p-index-item,
.a2p-abc:-webkit-full-screen .a2p-index-item,
.a2p-abc.a2p-fs-soft .a2p-index-item { font-size: 22px; padding: 8px 16px; }
.a2p-abc:fullscreen .a2p-topbar .a2p-title,
.a2p-abc:-webkit-full-screen .a2p-topbar .a2p-title,
.a2p-abc.a2p-fs-soft .a2p-topbar .a2p-title { font-size: 30px; }
.a2p-abc:fullscreen .a2p-index-chapter,
.a2p-abc:-webkit-full-screen .a2p-index-chapter,
.a2p-abc.a2p-fs-soft .a2p-index-chapter { font-size: 26px; }