/* Catalogue des instrus (page-templates/page-catalogue.php). Couleurs du tunnel. */
.oxz-cat {
	--oxz-ink: #23272b;
	--oxz-mute: #6b7177;
	--oxz-line: #dcdfe2;
	--oxz-bg: #ededed;
	--oxz-yes: #2f7d4f;
	font-family: Poppins, sans-serif;
	color: var(--oxz-ink);
	max-width: 960px;
	padding-top: 24px;
	padding-bottom: 32px;
}
/* La place du player se prend dans le pied de page, pas sous lui : sinon une
   bande grise apparait sous le pied. */
/* Bas de page net : contenu blanc jusqu'au pied (pas de bande grise), pied
   entier au-dessus du bandeau du player, et sous lui une marge blanche que le
   bandeau blanc recouvre sans raccord visible. */
/* body.oxz-lic-seul (licence.css, charge apres) fixe fond et marges : on le
   double ici pour l'emporter. */
body.oxz-lic-seul.oxz-cat-page { background: #fff; }
body.oxz-lic-seul.oxz-cat-page .oxz-lic { padding-bottom: 0; background: #fff; }
body.oxz-lic-seul.oxz-cat-avec-player { padding-bottom: calc(var(--oxz-player-h, 68px) + 24px); }

/* Petit hero (la page est isolee comme le tunnel, voir licence.css). */
.oxz-lic__hero.oxz-cat-hero { padding: 28px 0; margin-bottom: 0; }
.oxz-cat-hero .oxz-lic__h1 { margin: 0; }
/* Titre et liste sur la meme colonne de 960 px. */
.oxz-cat-hero .oxz-lic__wrap { max-width: 990px; padding-left: 15px; padding-right: 15px; }
/* Le contenu sur fond blanc, entre le hero et le pied gris du tunnel. */
.oxz-cat-page .oxz-cat { background: #fff; width: auto; max-width: none; padding-left: max(15px, calc((100% - 960px) / 2)); padding-right: max(15px, calc((100% - 960px) / 2)); }
.oxz-cat-exclu { margin: 28px 0 8px; text-align: center; font-size: 14px; color: var(--oxz-mute); }
.oxz-cat-exclu a { color: var(--oxz-ink); font-weight: 600; text-decoration: underline; }

/* Le bandeau sous le player : pleine largeur, du haut du player (moins sa marge)
   au bas de l'ecran. Le player ne bouge pas, il est simplement pose dessus. */
.oxz-cat-socle {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	height: calc(var(--oxz-player-h, 68px) + 24px);
	background: #ffffff;
	border-top: 1px solid #dcdfe2;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
.oxz-cat-socle[hidden] { display: none; }

/* La ligne d'information : l'essentiel, le detail est dans « En savoir plus ». */
.oxz-cat-bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 0 0 20px;
	padding: 12px 18px;
	background: var(--oxz-bg);
	border-radius: 12px; /* Meme arrondi que le player. */
	font-size: 15px;
}
.oxz-cat-bandeau span:not(:first-child)::before { content: "·"; margin: 0 10px; color: var(--oxz-mute); }
.oxz-cat-bandeau a { margin-left: auto; padding-left: 16px; font-weight: 600; color: var(--oxz-ink); text-decoration: underline; }

/* L'instru venue de YouTube, en tete de liste. */
.oxz-cat-prod.est-vedette { box-shadow: inset 4px 0 0 var(--oxz-ink); }

.oxz-cat-outils { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.oxz-cat-cherche,
.oxz-cat-select {
	height: 44px;
	border: 1px solid var(--oxz-line);
	border-radius: 8px;
	padding: 0 12px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--oxz-ink);
}
.oxz-cat-cherche { flex: 1 1 240px; min-width: 0; }
.oxz-cat-select { flex: 0 1 auto; }

.oxz-cat-styles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.oxz-cat-puce {
	border: 1px solid var(--oxz-line);
	background: #fff;
	color: var(--oxz-ink);
	border-radius: 8px;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	min-height: 36px;
	margin: 0;
	white-space: nowrap;
}
.oxz-cat-puce:hover { border-color: var(--oxz-ink); }
.oxz-cat-puce.est-active { background: var(--oxz-ink); border-color: var(--oxz-ink); color: #fff; }

.oxz-cat-compte { color: var(--oxz-mute); font-size: 14px; margin: 0 0 8px; }

.oxz-cat-liste { list-style: none; margin: 0; padding: 0; }
.oxz-cat-prod {
	display: grid;
	grid-template-columns: 64px 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 10px 8px;
	border-bottom: 1px solid var(--oxz-line);
	cursor: pointer;
	border-radius: 8px;
}
.oxz-cat-prod:hover { background: #f6f7f8; }
.oxz-cat-prod.est-jouee { background: var(--oxz-bg); }

.oxz-cat-prod__lire {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--oxz-ink);
	cursor: pointer;
}
.oxz-cat-prod__lire img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oxz-cat-prod__icone {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .15s;
}
.oxz-cat-prod__icone::before { content: "\25B6"; color: #fff; font-size: 22px; }
.oxz-cat-prod:hover .oxz-cat-prod__icone,
.oxz-cat-prod.est-jouee .oxz-cat-prod__icone { opacity: 1; }
.oxz-cat-liste.en-lecture .oxz-cat-prod.est-jouee .oxz-cat-prod__icone::before { content: "\275A\275A"; font-size: 16px; }

.oxz-cat-prod__texte { min-width: 0; }
.oxz-cat-prod__titre { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxz-cat-prod__info { color: var(--oxz-mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxz-cat-prod__bpm { color: var(--oxz-mute); font-size: 14px; white-space: nowrap; }

.oxz-cat-ajout {
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--oxz-ink);
	background: #fff;
	color: var(--oxz-ink);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.oxz-cat-ajout:hover { background: var(--oxz-ink); color: #fff; }
.oxz-cat-ajout.est-choisie { background: var(--oxz-yes); border-color: var(--oxz-yes); color: #fff; }

.oxz-cat-plus {
	display: block;
	margin: 20px auto 0;
	min-height: 44px;
	padding: 0 24px;
	border: 0;
	background: #e4e6e8;
	color: #000 !important; /* Hestia recolore le texte des boutons au survol. */
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.oxz-cat-plus[hidden] { display: none; } /* Sinon le display: block l'emporte et le bouton reste. */
.oxz-cat-plus:hover,
.oxz-cat-plus:focus { background: #d2d5d8; color: #000 !important; }

/* Player fixe en bas, centre : flottant, jamais plus large que 960 px. */
.oxz-cat-player {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	max-width: 960px;
	margin: 0 auto;
	border-radius: 12px;
	z-index: 9999;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
	align-items: center;
	gap: 16px;
	padding: 10px 20px 10px 12px;
	background: #23272b;
	color: #fff;
	font-family: Poppins, sans-serif;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
}
.oxz-cat-player[hidden] { display: none; }
.oxz-cat-player__piste { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oxz-cat-player__mini[hidden] { display: none; }
.oxz-cat-player__mini { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.oxz-cat-player__texte { min-width: 0; }
.oxz-cat-player__titre { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxz-cat-player__info { font-size: 12px; color: #b8bdc2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxz-cat-player__centre { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.oxz-cat-player__boutons { display: flex; align-items: center; gap: 12px; }
.oxz-cat-player__btn {
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.oxz-cat-player__btn:focus,
.oxz-cat-player__btn:active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.oxz-cat-player__btn:hover { background: rgba(255, 255, 255, .25) !important; }
/* Lecture en rouge fonce, rappel du rouge Oxydz (#e01b1b, DA-OXYDZ.md) qu'il prend au survol. */
/* !important : Hestia grise les boutons cliques (:focus, :active). */
.oxz-cat-player__btn--lire,
.oxz-cat-player__btn--lire:focus,
.oxz-cat-player__btn--lire:active { width: 48px; height: 48px; background: #a51616 !important; color: #fff !important; }
.oxz-cat-player__btn--lire:hover { background: #e01b1b !important; }
.oxz-cat-player__btn svg { display: block; margin: auto; }
.oxz-cat-player button,
.oxz-cat button { box-shadow: none !important; text-transform: none; letter-spacing: normal; } /* Hestia ombre tous les boutons. */
.oxz-cat-player__temps { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: #b8bdc2; }
.oxz-cat-player__barre { flex: 1; accent-color: #fff; }
.oxz-cat-player__achat { display: flex; align-items: center; gap: 10px; }
.oxz-cat-player .oxz-cat-ajout[hidden] { display: none; }
.oxz-cat-player .oxz-cat-ajout { background: transparent; color: #fff; border: 1px solid #fff !important; box-shadow: none !important; }
.oxz-cat-player .oxz-cat-ajout.est-choisie { background: var(--oxz-yes, #2f7d4f); border-color: #2f7d4f; }
.oxz-cat-panier {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	background: #fff;
	color: #23272b !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	white-space: nowrap;
}
.oxz-cat-panier[hidden] { display: none; }

/* Player compact (essai du 03/11) : memes places, tout un peu plus petit.
   Pour revenir a la version haute, supprimer ce bloc. */
.oxz-cat-player { padding: 6px 16px 6px 8px; gap: 12px; border-radius: 10px; }
.oxz-cat-player__mini { width: 40px; height: 40px; }
.oxz-cat-player__titre { font-size: 14px; line-height: 1.3; }
.oxz-cat-player__info { line-height: 1.3; }
.oxz-cat-player__centre { gap: 6px; }
.oxz-cat-player__boutons { gap: 8px; }
.oxz-cat-player__btn { width: 32px; height: 32px; }
.oxz-cat-player__btn--lire,
.oxz-cat-player__btn--lire:focus,
.oxz-cat-player__btn--lire:active { width: 38px; height: 38px; }
.oxz-cat-player__temps { line-height: 1; font-size: 11px; }
/* Barre dessinee a la main : la barre native de Chrome fait ~5 px, celle-ci 4
   (20 % plus fine). La partie jouee vient de --pos, pose par catalogue.js. */
.oxz-cat-player__barre {
	-webkit-appearance: none;
	appearance: none;
	height: 12px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.oxz-cat-player__barre::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(to right, #fff var(--pos, 0%), rgba(255, 255, 255, .25) var(--pos, 0%));
}
.oxz-cat-player__barre::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.oxz-cat-player__barre::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.oxz-cat-player__barre::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}
.oxz-cat-player__barre::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.oxz-cat-player .oxz-cat-ajout,
.oxz-cat-panier { min-height: 34px; font-size: 13px; }

@media (max-width: 700px) {
	.oxz-cat-prod { grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 4px; }
	.oxz-cat-prod__lire { width: 56px; height: 56px; }
	.oxz-cat-prod__bpm { font-size: 12px; text-align: right; line-height: 1.2; }
	.oxz-cat-prod .oxz-cat-ajout { padding: 0 12px; }
	.oxz-cat-player { left: 8px; right: 8px; bottom: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 6px 10px; }
	.oxz-cat-player__centre { grid-column: 1 / -1; grid-row: 2; flex-direction: row; }
	.oxz-cat-player__boutons { gap: 8px; }
	.oxz-cat-player__achat { grid-column: 2; grid-row: 1; }
	/* Faute de place, « Ajouter » cede la place au bouton de commande des qu'il y a une selection. */
	.oxz-cat-player__achat:has(.oxz-cat-panier:not([hidden])) .oxz-cat-ajout { display: none; }
	body.oxz-lic-seul.oxz-cat-avec-player { padding-bottom: calc(var(--oxz-player-h, 110px) + 16px); }
	.oxz-lic__hero.oxz-cat-hero { padding: 20px 0; }
	/* La recherche sur toute la ligne, tempo et ordre cote a cote en dessous. */
	.oxz-cat-cherche { flex: 1 1 100%; }
	.oxz-cat-select { flex: 1 1 0; min-width: 0; }
	.oxz-cat-socle { height: calc(var(--oxz-player-h, 110px) + 16px); }
	.oxz-cat-panier { padding: 0 12px; }
	.oxz-cat-panier__long { display: none; }
	.oxz-cat-bandeau { flex-direction: column; align-items: flex-start; font-size: 14px; }
	.oxz-cat-bandeau span:not(:first-child)::before { content: none; }
	.oxz-cat-bandeau a { margin-left: 0; padding-left: 0; flex-basis: 100%; }
	/* Les styles sur une ligne qui defile, pour garder la liste a l'ecran. */
	.oxz-cat-styles { flex-wrap: nowrap; overflow-x: auto; margin-left: -15px; margin-right: -15px; padding: 0 15px 4px; scrollbar-width: none; }
}

/* Etats survole et clique : Hestia grise les boutons (button:hover,
   button:focus : fond #999, texte blanc) avec un selecteur plus fort qu'une
   classe seule, et force le texte blanc au survol (body:not(.woocommerce-page)
   button:not(...):hover). D'ou les !important : chaque bouton garde ici ses
   couleurs au survol et apres un clic, active ou non. */
.oxz-cat button.oxz-cat-puce:hover,
.oxz-cat button.oxz-cat-puce:focus,
.oxz-cat button.oxz-cat-puce:active { background: #fff !important; color: var(--oxz-ink) !important; }
.oxz-cat button.oxz-cat-puce.est-active,
.oxz-cat button.oxz-cat-puce.est-active:hover,
.oxz-cat button.oxz-cat-puce.est-active:focus,
.oxz-cat button.oxz-cat-puce.est-active:active { background: var(--oxz-ink) !important; color: #fff !important; }
.oxz-cat button.oxz-cat-ajout:focus,
.oxz-cat button.oxz-cat-ajout:active { background: #fff !important; color: var(--oxz-ink) !important; }
.oxz-cat button.oxz-cat-ajout:hover { background: var(--oxz-ink) !important; color: #fff !important; }
.oxz-cat button.oxz-cat-ajout.est-choisie,
.oxz-cat button.oxz-cat-ajout.est-choisie:hover,
.oxz-cat button.oxz-cat-ajout.est-choisie:focus { background: var(--oxz-yes) !important; color: #fff !important; }
.oxz-cat button.oxz-cat-prod__lire:hover,
.oxz-cat button.oxz-cat-prod__lire:focus,
.oxz-cat button.oxz-cat-prod__lire:active { background: var(--oxz-ink) !important; }
.oxz-cat-player button.oxz-cat-ajout:hover,
.oxz-cat-player button.oxz-cat-ajout:focus,
.oxz-cat-player button.oxz-cat-ajout:active { background: transparent !important; color: #fff !important; }
.oxz-cat-player button.oxz-cat-ajout.est-choisie,
.oxz-cat-player button.oxz-cat-ajout.est-choisie:hover,
.oxz-cat-player button.oxz-cat-ajout.est-choisie:focus { background: var(--oxz-yes, #2f7d4f) !important; color: #fff !important; }