/**
 * Music Source — Partenariat « L’Huile de Beauté Colette »
 * Feuille de style des pages /colette/ et /colette/ecoute/.
 * Chargée uniquement sur ces deux templates (cf. includes/colette.php).
 *
 * Mobile-first : la quasi-totalité du trafic arrive par un QR code
 * scanné au smartphone.
 */

/* ---------------------------------------------------------------
 *  1. Neutralisation du conteneur Astra
 *     Le template custom rend sa propre mise en page pleine largeur ;
 *     on désamorce le .ast-container et l’éventuel bandeau de titre.
 * ------------------------------------------------------------- */

body.ms-colette #content .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Au-delà de 1200px, Astra pose 60px de marge verticale sur #primary via
   `.ast-plain-container.ast-no-sidebar #primary` (1 id + 2 classes), qui
   l'emporte sur `body.ms-colette #primary` (1 id + 1 classe + 1 élément).
   D'où le !important sur les deux propriétés concernées : la page gère
   elle-même ses espacements dans .ms-colette-main. */
body.ms-colette #primary {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	float: none;
}

body.ms-colette .ast-single-entry-banner,
body.ms-colette .entry-header,
body.ms-colette .ast-breadcrumbs-wrapper {
	display: none;
}

/* ---------------------------------------------------------------
 *  2. Base
 * ------------------------------------------------------------- */

.ms-colette-page {
	/* Palette Music Source (or/beige) — cf. e-mails transactionnels. */
	--ms-ink: #2f2a22;
	--ms-ink-soft: #6c6355;
	--ms-gold: #a29267;
	--ms-gold-dark: #877a55;
	--ms-cream: #f1ede4;
	--ms-paper: #ffffff;
	--ms-line: rgba(162, 146, 103, 0.28);
	--ms-shadow: 0 1px 2px rgba(47, 42, 34, 0.05), 0 8px 24px rgba(47, 42, 34, 0.06);

	/* Une seule ligne à changer pour hériter de la typo du site. */
	--ms-serif: Georgia, "Gentium Basic", "Times New Roman", serif;

	--ms-gutter: 20px;
	--ms-max: 1120px;

	background: var(--ms-cream);
	color: var(--ms-ink);
}

.ms-colette-main {
	max-width: var(--ms-max);
	margin: 0 auto;
	padding: 32px var(--ms-gutter) 56px;
	box-sizing: border-box;
}

.ms-colette-page :where(h1, h2, p, ol, li) {
	margin: 0;
}

.ms-colette-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ms-gold-dark);
	margin-bottom: 14px;
}

.ms-colette-title {
	font-family: var(--ms-serif);
	font-weight: 400;
	font-size: clamp(2rem, 7.5vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ms-ink);
	margin-bottom: 18px;
}

.ms-colette-lede {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ms-ink-soft);
	max-width: 54ch;
}

.ms-colette-signature {
	font-family: var(--ms-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ms-gold-dark);
	margin-top: 28px;
}

.ms-colette-signature em {
	font-style: italic;
	color: var(--ms-ink-soft);
}

.ms-colette-signature--large {
	font-size: clamp(1.125rem, 4vw, 1.5rem);
	text-align: center;
	margin: 0;
}

/* ---------------------------------------------------------------
 *  3. Hero
 * ------------------------------------------------------------- */

.ms-colette-hero {
	display: grid;
	gap: 28px;
	align-items: center;
}

.ms-colette-hero__media {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(162, 146, 103, 0.1);
	box-shadow: var(--ms-shadow);
}

.ms-colette-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ms-colette-hero--listen {
	gap: 24px;
}

.ms-colette-hero--listen .ms-colette-hero__media img {
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------
 *  4. Boutons / choix du parcours
 * ------------------------------------------------------------- */

.ms-colette-choice {
	display: grid;
	gap: 14px;
	margin-top: 30px;
}

.ms-colette-btn {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 22px;
	border-radius: 4px;
	border: 1px solid transparent;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ms-colette-btn:hover,
.ms-colette-btn:focus-visible {
	text-decoration: none;
	transform: translateY(-1px);
}

/* Astra pose `a:focus { outline: thin dotted }` : au clic souris on héritait
   d'un liseré pointillé. On le retire sur :focus et on garde un vrai anneau
   sur :focus-visible, donc visible au clavier et invisible à la souris.
   Ordre volontaire : à spécificité égale, :focus-visible doit venir après. */
.ms-colette-page .ms-colette-btn:focus {
	outline: none;
}

.ms-colette-page .ms-colette-btn:focus-visible {
	outline: 2px solid var(--ms-gold-dark);
	outline-offset: 3px;
}

.ms-colette-btn__label {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.ms-colette-btn__hint {
	font-size: 0.8125rem;
	line-height: 1.4;
	opacity: 0.82;
}

/* Astra colore les liens en #191970 sur `a:focus, a:hover` (main.min.css)
   et en --ast-global-color-1 via le CSS dynamique — sélecteurs à 0-1-1.
   `:focus-visible` ne suffisait pas : il ne se déclenche qu'au clavier,
   alors qu'un clic souris pose `:focus`, d'où le texte qui virait au bleu
   après le clic. On énumère donc tous les états, préfixés .ms-colette-page
   (0-3-0) pour repasser devant. */

.ms-colette-page .ms-colette-btn--primary,
.ms-colette-page .ms-colette-btn--primary:link,
.ms-colette-page .ms-colette-btn--primary:visited {
	background: var(--ms-gold);
	color: #fff;
}

.ms-colette-page .ms-colette-btn--primary:hover,
.ms-colette-page .ms-colette-btn--primary:focus,
.ms-colette-page .ms-colette-btn--primary:focus-visible,
.ms-colette-page .ms-colette-btn--primary:active {
	background: var(--ms-gold-dark);
	color: #fff;
}

.ms-colette-page .ms-colette-btn--ghost,
.ms-colette-page .ms-colette-btn--ghost:link,
.ms-colette-page .ms-colette-btn--ghost:visited {
	background: transparent;
	border-color: var(--ms-line);
	color: var(--ms-ink);
}

.ms-colette-page .ms-colette-btn--ghost:hover,
.ms-colette-page .ms-colette-btn--ghost:focus,
.ms-colette-page .ms-colette-btn--ghost:focus-visible,
.ms-colette-page .ms-colette-btn--ghost:active {
	background: var(--ms-paper);
	border-color: var(--ms-gold);
	color: var(--ms-ink);
}

.ms-colette-btn--compact {
	display: inline-flex;
	padding: 14px 26px;
}

/* ---------------------------------------------------------------
 *  5. Lecteurs
 * ------------------------------------------------------------- */

.ms-colette-player {
	margin-top: 48px;
}

.ms-colette-section-title {
	font-family: var(--ms-serif);
	font-weight: 400;
	font-size: clamp(1.375rem, 5vw, 1.75rem);
	margin-bottom: 20px;
	color: var(--ms-ink);
}

.ms-colette-tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.ms-colette-track {
	display: grid;
	/* Mobile : pochette + titre sur une ligne, contrôles sur toute la largeur
	   en dessous — indispensable dès qu’une durée passe l’heure (h:mm:ss). */
	grid-template-columns: 76px 1fr;
	grid-template-areas:
		"cover body"
		"controls controls";
	column-gap: 16px;
	row-gap: 12px;
	align-items: center;
	padding: 14px;
	background: var(--ms-paper);
	border: 1px solid var(--ms-line);
	border-radius: 6px;
	box-shadow: var(--ms-shadow);
	transition: border-color 0.2s ease;
}

.ms-colette-track.is-playing {
	border-color: var(--ms-gold);
}

.ms-colette-track.has-error {
	opacity: 0.7;
}

/* Pochette + indicateur de lecture */

.ms-colette-track__cover {
	grid-area: cover;
	position: relative;
	width: 76px;
	height: 76px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ms-cream);
}

.ms-colette-track__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-colette-track__bars {
	position: absolute;
	inset: auto 0 0 0;
	display: none;
	justify-content: center;
	align-items: flex-end;
	gap: 3px;
	height: 26px;
	padding-bottom: 6px;
	background: linear-gradient(to top, rgba(47, 42, 34, 0.55), transparent);
}

.ms-colette-track.is-playing .ms-colette-track__bars {
	display: flex;
}

.ms-colette-track__bars i {
	width: 3px;
	height: 6px;
	border-radius: 2px;
	background: #fff;
	animation: ms-colette-bar 1s ease-in-out infinite;
}

.ms-colette-track__bars i:nth-child(2) { animation-delay: 0.15s; }
.ms-colette-track__bars i:nth-child(3) { animation-delay: 0.3s; }
.ms-colette-track__bars i:nth-child(4) { animation-delay: 0.45s; }

@keyframes ms-colette-bar {
	0%, 100% { height: 5px; }
	50%      { height: 14px; }
}

/* Textes de la piste */

.ms-colette-track__body {
	grid-area: body;
	min-width: 0;
}

.ms-colette-track__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ms-ink);
}

.ms-colette-track__subtitle {
	font-size: 0.8125rem;
	color: var(--ms-ink-soft);
	margin-top: 2px;
}

.ms-colette-track__error {
	font-size: 0.8125rem;
	color: #a4472f;
	margin-top: 8px;
}

/* Contrôles
   ------------------------------------------------------------------
   Astra habille `input[type=range]` de bout en bout (piste ombrée, pouce
   bleu #0274be) dans main.min.css, et ajoute un box-shadow + un :hover
   coloré à tout `button` via le CSS dynamique du Customizer, imprimé en
   fin de <head> — donc APRÈS cette feuille. Ces sélecteurs pèsent 0-1-1
   et battent une simple classe (0-1-0), d'où le préfixe `.ms-colette-page`
   sur tous les contrôles : on repasse devant par la spécificité, sans
   !important. Les propriétés qu'Astra pose et qu'on ne veut pas
   (box-shadow, bordures, marges) sont neutralisées explicitement. */

.ms-colette-page .ms-colette-track__controls {
	grid-area: controls;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.ms-colette-page .ms-colette-play {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-width: 0;
	min-height: 0;
	flex: 0 0 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ms-gold);
	box-shadow: none;
	color: #fff;
	font-size: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}

/* Mêmes états que les boutons du parcours : un clic souris pose `:focus`,
   pas `:focus-visible`. Sans `:focus` et `:active`, le bouton reprenait
   les couleurs de bouton d'Astra le temps du clic. */
.ms-colette-page .ms-colette-play:hover,
.ms-colette-page .ms-colette-play:focus,
.ms-colette-page .ms-colette-play:focus-visible,
.ms-colette-page .ms-colette-play:active {
	background: var(--ms-gold-dark);
	box-shadow: none;
	color: #fff;
}

.ms-colette-page .ms-colette-play:focus {
	outline: none;
}

.ms-colette-page .ms-colette-play:focus-visible {
	outline: 2px solid var(--ms-gold-dark);
	outline-offset: 3px;
}

.ms-colette-page .ms-colette-play:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ms-colette-page .ms-colette-icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ms-colette-page .ms-colette-icon--play { margin-left: 2px; }
.ms-colette-page .ms-colette-icon--pause { display: none; }

.ms-colette-page .ms-colette-play[aria-pressed="true"] .ms-colette-icon--play { display: none; }
.ms-colette-page .ms-colette-play[aria-pressed="true"] .ms-colette-icon--pause { display: block; }

/* Chargement */

.ms-colette-page .ms-colette-spinner {
	position: absolute;
	inset: 0;
	display: none;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: ms-colette-spin 0.8s linear infinite;
}

.ms-colette-page .ms-colette-play.is-loading .ms-colette-icon { visibility: hidden; }
.ms-colette-page .ms-colette-play.is-loading .ms-colette-spinner { display: block; }

@keyframes ms-colette-spin {
	to { transform: rotate(360deg); }
}

/* Barre de progression */

.ms-colette-page .ms-colette-seek {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.ms-colette-page .ms-colette-seek:disabled {
	cursor: default;
	opacity: 0.55;
}

/* Le doublon `:focus` n'est pas décoratif : Astra repeint la piste en
   `rgba(255,255,255,.2)` sur `input[type=range]:focus::-webkit-slider-runnable-track`
   (0-2-1), donc la barre blanchissait au clic. Le sélecteur ci-dessous
   pèse 0-3-0 et reprend la main sur l'état focus. */
.ms-colette-page .ms-colette-seek::-webkit-slider-runnable-track,
.ms-colette-page .ms-colette-seek:focus::-webkit-slider-runnable-track,
.ms-colette-page .ms-colette-seek:active::-webkit-slider-runnable-track {
	height: 4px;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	background: linear-gradient(
		to right,
		var(--ms-gold) var(--ms-progress, 0%),
		var(--ms-line) var(--ms-progress, 0%)
	);
}

.ms-colette-page .ms-colette-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ms-gold-dark);
	box-shadow: 0 1px 3px rgba(47, 42, 34, 0.3);
}

.ms-colette-page .ms-colette-seek::-moz-range-track {
	height: 4px;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	background: var(--ms-line);
}

.ms-colette-page .ms-colette-seek::-moz-range-progress {
	height: 4px;
	border-radius: 2px;
	background: var(--ms-gold);
}

.ms-colette-page .ms-colette-seek::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ms-gold-dark);
	box-shadow: none;
}

.ms-colette-page .ms-colette-seek:focus-visible {
	outline: 2px solid var(--ms-gold-dark);
	outline-offset: 2px;
}

.ms-colette-track__time {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--ms-ink-soft);
	white-space: nowrap;
}

.ms-colette-hint {
	font-size: 0.8125rem;
	color: var(--ms-ink-soft);
	margin-top: 16px;
	text-align: center;
}

/* ---------------------------------------------------------------
 *  6. Outro + rappel professionnel
 * ------------------------------------------------------------- */

.ms-colette-outro {
	margin-top: 48px;
	padding: 32px 20px;
	border-top: 1px solid var(--ms-line);
	border-bottom: 1px solid var(--ms-line);
}

.ms-colette-cta {
	margin-top: 40px;
	padding: 28px 22px;
	background: var(--ms-paper);
	border: 1px solid var(--ms-line);
	border-radius: 6px;
	text-align: center;
}

.ms-colette-cta__title {
	font-family: var(--ms-serif);
	font-size: 1.25rem;
	margin-bottom: 8px;
}

.ms-colette-cta__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ms-ink-soft);
	max-width: 46ch;
	margin: 0 auto 20px;
}

/* ---------------------------------------------------------------
 *  7. Tablette / desktop
 * ------------------------------------------------------------- */

@media (min-width: 700px) {

	.ms-colette-main {
		padding: 56px 32px 80px;
	}

	.ms-colette-hero--landing {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}

	.ms-colette-hero--landing .ms-colette-hero__media {
		order: 2;
	}

	/* Plafonne le visuel produit : en 3/4 sur une demi-colonne, il occupait
	   tout l’écran et repoussait les deux boutons sous la ligne de flottaison. */
	.ms-colette-hero--landing .ms-colette-hero__media img {
		aspect-ratio: auto;
		height: min(620px, 72vh);
	}

	.ms-colette-hero--listen {
		grid-template-columns: 5fr 6fr;
		gap: 44px;
	}

	.ms-colette-hero--listen .ms-colette-hero__media {
		order: 2;
	}

	.ms-colette-track {
		grid-template-columns: 96px 1fr;
		grid-template-areas:
			"cover body"
			"cover controls";
		column-gap: 20px;
		row-gap: 10px;
		padding: 16px;
	}

	.ms-colette-track__cover {
		width: 96px;
		height: 96px;
	}

	.ms-colette-track__title {
		font-size: 1.0625rem;
	}
}

/* Les deux boutons côte à côte seulement quand la colonne est assez large :
   en dessous, les libellés se cassent sur trois lignes. */
@media (min-width: 600px) {

	.ms-colette-choice {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ---------------------------------------------------------------
 *  8. Préférences d’animation réduite
 * ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ms-colette-page * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.ms-colette-track__bars i {
		height: 10px;
	}
}