/* ==========================================================================
   Variante « le carnet » — charte CRMTL 2026, proposition 2.
   Chargée après player.css et embed.css : elle ne change que l'habit.

   Papier, encre, rouge vielle. Le dock est une bande de papier ombré sous
   un filet d'encre ; la progression est une vague rouge tracée à la main ;
   la piste en cours a son numéro entouré au crayon. Le panneau s'ouvre
   comme un carnet : Fraunces pour lire, Martian Mono pour les notes de marge.
   Les images gardent leur couleur naturelle.
   Le mode sombre du thème échange papier et encre : le dock devient une
   bande d'ardoise, le rouge s'éclaire en corail.
   ========================================================================== */

:root {
	/* alias du thème d'abord : il les échange en mode sombre (<html data-mode>) */
	--cwp-ink: var(--kaolin, var(--wp--preset--color--kaolin, #F6F3EE));
	--cwp-ink-2: var(--kaolin-2, var(--wp--preset--color--kaolin-2, #EDE7DD));
	--cwp-paper: var(--suie, var(--wp--preset--color--suie, #0E0D0C));
	--cwp-accent: var(--rouge, var(--wp--preset--color--rouge, #B2161F));
	--cwp-serif: var(--wp--preset--font-family--titre, Fraunces, Georgia, serif);
	--cwp-sans: var(--wp--preset--font-family--texte, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
	--cwp-mono: var(--wp--preset--font-family--mono, "Martian Mono", ui-monospace, monospace);
	--cwp-ease: cubic-bezier(.65, 0, .2, 1);
	--cwp-ease-out: cubic-bezier(.2, .7, .1, 1);
	--cwp-radius: 0;
	--cwp-suie-2: var(--suie-2, var(--wp--preset--color--suie-2, #3B3733));
	--cwp-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 7.2C9 2.4 15.6 2.6 22.3 6.4s13.1 4.9 20.8.6 14.4-4.8 21.3-.4 13.3 4.6 20.4.3 9.8-3.2 13.7-1.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--cwp-cercle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Cpath d='M33 4.5C18 3 4.6 9.6 4 20.3c-.6 10.9 13.4 16.6 27.6 15.6 14.6-1 25.6-7.9 24.6-17.3C55.4 9.3 42.7 3.3 27.5 5.6 21 6.6 15.6 8.6 12 11' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- le papier ne s'arrondit pas, et n'a pas d'ombre ---------------------- */
#crmtl-player,
#crmtl-player *,
#crmtl-player *::before,
#crmtl-player *::after,
.crmtl-embed:not(#_),
.crmtl-embed:not(#_) *,
.crmtl-embed:not(#_) *::before,
.crmtl-note:not(#_) * {
	border-radius: 0;
	box-shadow: none;
}

/* le grain du papier, comme sur le site */
#crmtl-player .cwp-panel__grain { opacity: .5; mix-blend-mode: multiply; }

#crmtl-player :focus-visible { outline: 2px solid var(--cwp-accent); outline-offset: 3px; }

/* ---- le dock : une bande de papier ombré sous un filet d'encre ------------ */
#crmtl-player .cwp-dock {
	bottom: 0;
	width: 100vw;
	height: 76px;
	padding: 0 clamp(12px, 3vw, 32px);
	background: var(--cwp-ink-2);
	color: var(--cwp-paper);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-top: 1px solid var(--cwp-paper);
}

#crmtl-player .cwp-dock__fill { display: none; }

#crmtl-player .cwp-dock__title {
	font-family: var(--cwp-serif);
	font-weight: 420;
	font-size: 17px;
	font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 1;
}

#crmtl-player .cwp-dock__sub,
#crmtl-player .cwp-time,
#crmtl-player .cwp-time__cur,
#crmtl-player .cwp-time__dur {
	font-family: var(--cwp-mono);
	font-stretch: 87.5%;
	letter-spacing: 0;
	text-transform: lowercase;
	color: var(--cwp-suie-2);
}

/* lecture : un carré d'encre ; l'encre rouge monte du bas au survol */
#crmtl-player .cwp-playbtn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--cwp-paper);
	color: var(--cwp-ink);
}

#crmtl-player .cwp-playbtn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cwp-accent);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .36s var(--cwp-ease);
}

#crmtl-player .cwp-playbtn:hover::before { transform: scaleY(1); }
#crmtl-player .cwp-playbtn__ring { display: none; }

#crmtl-player .cwp-prev,
#crmtl-player .cwp-next,
#crmtl-player .cwp-dock__read,
#crmtl-player .cwp-dock__toggle { color: var(--cwp-paper); }

/* la progression : une vague rouge tracée à la main */
#crmtl-player .cwp-seek { height: 22px; }

#crmtl-player .cwp-seek::before {
	height: 1px;
	background: color-mix(in srgb, var(--cwp-paper) 25%, transparent);
}

#crmtl-player .cwp-seek__buf {
	height: 1px;
	background: color-mix(in srgb, var(--cwp-paper) 45%, transparent);
}

#crmtl-player .cwp-seek__bar {
	height: 10px;
	background: var(--cwp-accent);
	-webkit-mask: var(--cwp-vague) left center / 140px 100% repeat-x;
	mask: var(--cwp-vague) left center / 140px 100% repeat-x;
}

#crmtl-player .cwp-seek:hover .cwp-seek__bar { height: 12px; }

#crmtl-player .cwp-seek__hover {
	font-family: var(--cwp-mono);
	background: var(--cwp-paper);
	color: var(--cwp-ink);
}

/* volume, au trait */
#crmtl-player .cwp-vol__range { accent-color: var(--cwp-accent); }

/* ---- le lanceur ------------------------------------------------------------ */
#crmtl-player .cwp-launcher {
	background: var(--cwp-ink);
	color: var(--cwp-paper);
	outline: 1px solid var(--cwp-paper);
}

#crmtl-player .cwp-launcher__ring text {
	font-family: var(--cwp-mono);
	text-transform: lowercase;
	fill: var(--cwp-paper);
}

#crmtl-player .cwp-launcher__core { background: var(--cwp-paper); color: var(--cwp-ink); }

/* ---- le panneau : un carnet ouvert ---------------------------------------- */
#crmtl-player .cwp-panel {
	background: var(--cwp-ink);
	color: var(--cwp-paper);
	--mute: color-mix(in srgb, var(--cwp-paper) 72%, transparent);
	--line: color-mix(in srgb, var(--cwp-paper) 22%, transparent);
	--faint: color-mix(in srgb, var(--cwp-paper) 6%, transparent);
}

#crmtl-player .cwp-panel__top { border-bottom: 2px solid var(--cwp-paper); }

#crmtl-player .cwp-brand em {
	font-family: var(--cwp-serif);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}

/* onglets : la vague rouge sous l'actif */
#crmtl-player .cwp-tab {
	font-family: var(--cwp-sans);
	font-weight: 600;
	font-size: clamp(17px, 1.6vw, 21px);
	text-transform: lowercase;
	padding-bottom: 8px;
}

#crmtl-player .cwp-tab[aria-current="true"] span { font-style: normal; }

#crmtl-player .cwp-tab::before {
	left: -2%;
	top: auto;
	bottom: -2px;
	width: 104%;
	height: 10px;
	margin: 0;
	background: var(--cwp-accent);
	-webkit-mask: var(--cwp-vague) center / 100% 100% no-repeat;
	mask: var(--cwp-vague) center / 100% 100% no-repeat;
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .36s var(--cwp-ease-out);
}

#crmtl-player .cwp-tab[aria-current="true"]::before,
#crmtl-player .cwp-tab:hover::before { clip-path: inset(0 0 0 0); }

#crmtl-player .cwp-tab__count { font-family: var(--cwp-mono); color: var(--cwp-suie-2); }

/* en écoute : Fraunces, grand, et son souffle */
#crmtl-player .cwp-now__title,
#crmtl-player .cwp-detail__title {
	font-family: var(--cwp-serif);
	font-weight: 360;
	letter-spacing: -.03em;
	line-height: .95;
	font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

#crmtl-player.is-playing .cwp-now__title { animation: cwp-souffle 3.6s ease-in-out infinite alternate; }

@keyframes cwp-souffle {
	from { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
	to { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
}

#crmtl-player .cwp-now__artist,
#crmtl-player .cwp-detail__sub {
	font-family: var(--cwp-serif);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cwp-suie-2);
}

#crmtl-player .cwp-now__kicker,
#crmtl-player .cwp-detail__meta,
#crmtl-player .cwp-row__meta {
	font-family: var(--cwp-mono);
	font-stretch: 87.5%;
	text-transform: lowercase;
	letter-spacing: 0;
	color: var(--cwp-suie-2);
}

/* pistes réglées ; la piste en cours a son numéro entouré au crayon */
#crmtl-player .cwp-tracks { border-top: 2px solid var(--cwp-paper); }
#crmtl-player .cwp-track { border-bottom: 1px solid color-mix(in srgb, var(--cwp-paper) 18%, transparent); }

#crmtl-player .cwp-track__n,
#crmtl-player .cwp-track__d { font-family: var(--cwp-mono); font-stretch: 75%; color: var(--cwp-suie-2); }

#crmtl-player .cwp-track__n { position: relative; }

#crmtl-player .cwp-track.is-current .cwp-track__n::after {
	content: "";
	position: absolute;
	inset: -6px -10px;
	background: var(--cwp-accent);
	-webkit-mask: var(--cwp-cercle) center / 100% 100% no-repeat;
	mask: var(--cwp-cercle) center / 100% 100% no-repeat;
	pointer-events: none;
}

#crmtl-player .cwp-track__title {
	font-family: var(--cwp-serif);
	font-weight: 420;
	font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 1;
}

#crmtl-player .cwp-track.is-current .cwp-track__title { color: var(--cwp-accent); }
#crmtl-player .cwp-eq i { background: var(--cwp-accent); }

/* archives : recherche sur une ligne de cahier, catégories après une barre oblique */
#crmtl-player .cwp-search {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cwp-paper);
}

#crmtl-player .cwp-search:focus-within { border-bottom: 2px solid var(--cwp-accent); }

#crmtl-player .cwp-search input {
	background: transparent;
	color: var(--cwp-paper);
	font-family: var(--cwp-serif);
	font-style: normal;
	font-weight: 380;
}

#crmtl-player .cwp-search input::placeholder { color: color-mix(in srgb, var(--cwp-paper) 45%, transparent); font-style: italic; }

#crmtl-player .cwp-cat {
	font-family: var(--cwp-mono);
	font-stretch: 87.5%;
	font-size: 12px;
	text-transform: lowercase;
	background: none;
	padding: 4px 0;
}

#crmtl-player .cwp-cat::before { content: "/ "; color: var(--cwp-accent); }
#crmtl-player .cwp-cat[aria-pressed="true"], #crmtl-player .cwp-cat.is-active { color: var(--cwp-accent); }

#crmtl-player .cwp-row { border-bottom: 1px solid color-mix(in srgb, var(--cwp-paper) 18%, transparent); }

#crmtl-player .cwp-row__title {
	font-family: var(--cwp-serif);
	font-weight: 420;
	font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}

#crmtl-player .cwp-row:hover .cwp-row__title { color: var(--cwp-accent); }

#crmtl-player .cwp-cta {
	background: var(--cwp-paper);
	color: var(--cwp-ink);
	font-family: var(--cwp-sans);
	font-weight: 600;
	text-transform: lowercase;
}

#crmtl-player .cwp-empty,
#crmtl-player .cwp-lib__body > p {
	font-family: var(--cwp-serif);
	font-style: italic;
	color: var(--cwp-suie-2);
}

/* lire : un carnet — Fraunces au corps de lecture, notes en mono */
#crmtl-player .cwp-read__text {
	font-family: var(--cwp-serif);
	font-weight: 380;
	font-variation-settings: "opsz" 18, "SOFT" 40, "WONK" 0;
}

#crmtl-player .cwp-read__text :where(h1, h2, h3) {
	font-family: var(--cwp-serif);
	font-weight: 400;
	font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

#crmtl-player .cwp-read__text :where(blockquote, .wp-block-quote)::before {
	content: "«";
	font-family: var(--cwp-serif);
	color: var(--cwp-accent);
}

#crmtl-player .cwp-read__text figcaption,
#crmtl-player .cwp-read__text .crmtl-note__n,
#crmtl-player .cwp-read__text .crmtl-note__d {
	font-family: var(--cwp-mono);
	font-stretch: 87.5%;
	font-style: normal;
	color: var(--cwp-suie-2);
}

#crmtl-player .cwp-read__text a { text-decoration-color: var(--cwp-accent); }

/* ---- intégrations dans la page : des lignes de carnet --------------------- */
.crmtl-embed:not(#_) {
	--e-accent: var(--cwp-accent);
	--e-serif: var(--cwp-serif);
	--e-mono: var(--cwp-mono);
	--e-tint: transparent;
}

.crmtl-embed--track:not(#_),
.crmtl-embed--compact:not(#_) {
	background: transparent;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	padding: 12px 0;
}

.crmtl-embed:not(#_) .crmtl-embed__cover { background: var(--cwp-ink-2); }

.crmtl-embed:not(#_) .crmtl-embed__glyph,
.crmtl-embed:not(#_) .crmtl-embed__barplay {
	background: var(--cwp-paper);
	color: var(--cwp-ink);
	transition: background-color .36s var(--cwp-ease);
}

.crmtl-embed:not(#_) .crmtl-embed__cover:hover .crmtl-embed__glyph,
.crmtl-embed:not(#_) .crmtl-embed__barplay:hover,
.crmtl-embed:not(#_).is-playing .crmtl-embed__glyph { background: var(--cwp-accent); }

.crmtl-embed:not(#_) :is(.crmtl-embed__title, .crmtl-embed__bartitle, .crmtl-embed__t-title) {
	font-family: var(--cwp-serif);
	font-style: normal;
	font-weight: 420;
	letter-spacing: -.005em;
	font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 1;
}

.crmtl-embed:not(#_) .crmtl-embed__title { font-style: italic; font-weight: 380; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

.crmtl-embed:not(#_) :is(.crmtl-embed__kicker, .crmtl-embed__meta, .crmtl-embed__subtitle, .crmtl-embed__t-artist, .crmtl-embed__d, .crmtl-embed__n, .crmtl-embed__duration) {
	font-family: var(--cwp-mono);
	font-style: normal;
	font-stretch: 87.5%;
	letter-spacing: 0;
	text-transform: lowercase;
}

.crmtl-embed:not(#_).is-active :is(.crmtl-embed__title, .crmtl-embed__bartitle),
.crmtl-embed:not(#_) .crmtl-embed__track.is-current .crmtl-embed__t-title { color: var(--cwp-accent); }

.crmtl-embed:not(#_) .crmtl-embed__tracks { border-top: 1px solid currentColor; }

.crmtl-embed:not(#_) .crmtl-embed__track {
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	background: transparent;
}

.crmtl-embed:not(#_) .crmtl-embed__track:hover { background: var(--cwp-ink-2); }

.crmtl-embed:not(#_) .crmtl-embed__track.is-current .crmtl-embed__n-num { position: relative; color: var(--cwp-accent); }

.crmtl-embed:not(#_) .crmtl-embed__track.is-current .crmtl-embed__n-num::after {
	content: "";
	position: absolute;
	inset: -5px -9px;
	background: var(--cwp-accent);
	-webkit-mask: var(--cwp-cercle) center / 100% 100% no-repeat;
	mask: var(--cwp-cercle) center / 100% 100% no-repeat;
}

.crmtl-embed:not(#_) .crmtl-embed__play {
	background: var(--cwp-paper);
	color: var(--cwp-ink);
	font-family: var(--cwp-sans);
	font-weight: 600;
	text-transform: lowercase;
	padding: 12px 18px;
}

.crmtl-embed:not(#_) .crmtl-embed__read {
	font-family: var(--cwp-sans);
	text-transform: lowercase;
	text-decoration: underline;
	text-underline-offset: .3em;
}

.crmtl-note:not(#_) { border-top: 2px solid currentColor; background: transparent; }

.crmtl-note:not(#_) .crmtl-note__title {
	font-family: var(--cwp-serif);
	font-weight: 420;
	font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}

@media (prefers-reduced-motion: reduce) {
	#crmtl-player.is-playing .cwp-now__title { animation: none; }
}

/* ---- contrôles natifs assortis au mode ------------------------------------ */
html[data-mode="sombre"] #crmtl-player,
html[data-mode="sombre"] .crmtl-embed:not(#_) { color-scheme: dark; }
html:not([data-mode="sombre"]) #crmtl-player,
html:not([data-mode="sombre"]) .crmtl-embed:not(#_) { color-scheme: light; }