/* =========================================================================
   RAINURE · feuille de style
   Sommaire
   1. Couleurs (jour / nuit)          8. Pochette générative (la signature)
   2. Base et accessibilité           9. Cartes, grilles, étagères
   3. En-tête, logo, navigation      10. Article : en-tête, fiche, lecteur, partage
   4. Grand titre de l'accueil       11. Commentaires, formulaires
   5. Titres de section, étiquettes  12. Pages de genre / rubrique, filtres
   6. Boutons et liens « → »         13. Salon (aperçu), au hasard
   7. Texte des articles             14. Pied de page
                                     15. Transitions de page, mouvement réduit
   ========================================================================= */

/* 1. Couleurs ------------------------------------------------------------- */
:root {
	--bg: var(--wp--preset--color--bg);
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--accent: var(--wp--preset--color--accent);
	--accent-ink: var(--wp--preset--color--accent-ink);
	--vinyl: #141216;
	--shadow: 0 1px 0 rgba(24, 21, 29, .04), 0 18px 40px -24px rgba(24, 21, 29, .45);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1); /* « expo out », la courbe des pages Apple */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);
	--header-h: 64px;
	color-scheme: light;
}

/* Mode nuit : un noir chaud, comme une pièce éclairée par la platine. */
:root[data-theme="dark"] {
	--wp--preset--color--bg: #121015;
	--wp--preset--color--paper: #1C1921;
	--wp--preset--color--ink: #F2EFF5;
	--wp--preset--color--muted: #ABA3B5;
	--wp--preset--color--line: #2F2B36;
	--wp--preset--color--accent: #F0679A;
	--wp--preset--color--accent-ink: #18151D;
	--shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
	color-scheme: dark;
}

/* 2. Base et accessibilité ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
body.has-genre { --accent-g: var(--gc); }
::selection { background: var(--gc, var(--accent)); color: var(--gc-ink, #fff); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg, iframe { max-width: 100%; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	background: var(--ink); color: var(--bg); padding: 12px 18px; z-index: 1000; top: 8px; left: 8px;
	font-family: var(--font-mono); font-stretch: var(--label-stretch);
}

.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .fb-single, .wp-site-blocks > .fb-home { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* 3. En-tête -------------------------------------------------------------- */
.fb-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, box-shadow .3s ease;
	view-transition-name: fb-header;
}
.admin-bar .fb-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Menu mobile ouvert : le flou de l'en-tête empêcherait le menu de couvrir l'écran. */
.fb-header:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); view-transition-name: none; }
.fb-header.is-scrolled { border-bottom-color: var(--line); }
.fb-header__inner { min-height: var(--header-h); gap: 16px; }
.fb-header__right { gap: clamp(8px, 2vw, 24px) !important; }

.fb-logo { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.fb-logo a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .06em; }
.fb-logo__vinyl { width: .86em; height: .86em; }

.fb-vinyl { display: block; flex: none; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .25)); overflow: visible; }
.fb-vinyl__spin { transform-origin: 50px 50px; }
.fb-vinyl__groove { fill: none; stroke: #2B2830; stroke-width: .6; }
.fb-vinyl__b { font-family: var(--font-display); font-weight: 900; font-size: 22px; fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.fb-vinyl__spin { animation: fb-spin 6s linear infinite; }
	.fb-logo a:hover .fb-vinyl__spin, .fb-mast:hover .fb-vinyl__spin { animation-duration: 1.6s; }
	.fb-logo__vinyl .fb-vinyl__spin { animation-play-state: paused; }
	.fb-logo a:hover .fb-logo__vinyl .fb-vinyl__spin, .fb-logo a:focus-visible .fb-logo__vinyl .fb-vinyl__spin { animation-play-state: running; }
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* Navigation (bloc Navigation de WordPress, menu plein écran sur mobile) */
.fb-nav { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em; }
.fb-nav .wp-block-navigation__container { gap: clamp(14px, 2vw, 28px); }
.fb-nav .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; padding-block: 6px; position: relative; }
.fb-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.fb-nav .wp-block-navigation-item__content:hover::after,
.fb-nav .current-menu-item > .wp-block-navigation-item__content::after,
.fb-nav [aria-current="page"]::after { transform: scaleX(1); }
/* Sur téléphone, la navigation laisse la place au menu du téléphone (section 40). */

.fb-night {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink);
	display: grid; place-items: center; cursor: pointer; flex: none; padding: 0;
	transition: background .25s ease, border-color .25s ease, transform .4s var(--ease);
}
.fb-night:hover { background: var(--paper); border-color: var(--ink); }
.fb-night svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .5s var(--ease), opacity .3s ease; }
.fb-night__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="dark"] .fb-night__moon { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="dark"] .fb-night__sun { opacity: 1; transform: none; }

/* Barre de lecture */
.fb-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.admin-bar .fb-progress { top: var(--wp-admin--admin-bar--height, 32px); }
.fb-progress span { display: block; height: 100%; background: var(--gc, var(--accent)); transform: scaleX(0); transform-origin: left; }
@supports (animation-timeline: scroll()) {
	.fb-progress span { animation: fb-grow linear both; animation-timeline: scroll(root); }
}
@keyframes fb-grow { to { transform: scaleX(1); } }

/* Sur fond nuit, un fin liseré garde la forme du vinyle lisible. */
[data-theme="dark"] .fb-vinyl__spin > circle:first-child { stroke: #3B3641; stroke-width: 1.2; }
[data-theme="dark"] .fb-cover__disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), -6px 10px 24px -6px rgba(0, 0, 0, .7); }

/* 4. Grand titre de l'accueil -------------------------------------------- */
.fb-mast {
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(16px, 4vw, 48px); align-items: end;
	padding-block: clamp(20px, 5vw, 48px) clamp(18px, 3vw, 28px);
	border-bottom: 3px solid var(--ink);
}
.fb-mast__title {
	margin: 0; display: flex; align-items: center; gap: .06em;
	font-size: clamp(96px, 27vw, 260px); font-weight: 900; line-height: .8; letter-spacing: -.005em;
	margin-left: -.04em;
}
.fb-mast__vinyl { width: .84em; height: .84em; }
.fb-mast__side { display: grid; gap: 14px; justify-items: end; text-align: right; padding-bottom: .6em; }
.fb-mast__tag { margin: 0; font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.fb-mast__tag span { color: var(--muted); }
.fb-catalog { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
	.fb-mast__l { display: inline-block; animation: fb-letter 1s var(--ease) calc(var(--i) * 70ms) both; }
	.fb-mast__deck { animation: fb-roll-in 1.2s var(--ease) .25s both; }
	.fb-mast__side { animation: fb-rise .9s var(--ease) .3s both; }
}
@keyframes fb-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes fb-roll-in { from { opacity: 0; transform: translateX(-60%) rotate(-200deg); } }

/* 5. Titres de section et étiquettes ------------------------------------- */
.fb-kicker {
	margin: 0; display: inline-flex; gap: 10px; align-items: center;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; font-weight: 500; text-transform: lowercase; letter-spacing: .005em; color: var(--muted);
}
.fb-kicker > span:first-child:not(:only-child) {
	color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; font-size: 11.5px;
}
.fb-section { padding-block: clamp(40px, 7vw, 88px) 0; }
.fb-section + .fb-section { border-top: 1px solid var(--line); margin-top: clamp(40px, 7vw, 88px); }
.fb-section__head { gap: 12px 24px; margin-bottom: clamp(20px, 3vw, 36px); }
.fb-section-title, .fb-section .wp-block-heading.fb-section-title {
	margin: 0; display: grid; gap: 10px; font-size: clamp(42px, 7vw, 76px); font-weight: 800; line-height: .9;
}
.fb-section-title .fb-kicker { line-height: 1.4; }
.fb-section--une { padding-top: clamp(24px, 4vw, 40px); }
.fb-section--une > .fb-kicker { margin-bottom: 18px; }

/* 6. Boutons et liens --------------------------------------------------- */
.fb-more { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em; }
.fb-more a, a.fb-more { color: var(--accent); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.fb-arrow { display: inline-block; transition: transform .35s var(--ease); }
a:hover > .fb-arrow, a:focus-visible > .fb-arrow, .fb-card:hover .fb-arrow { transform: translateX(5px); }

.fb-btn, .wp-element-button, .wp-block-button__link, .fb-random__pick, .comment-form .submit {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
	padding: .85rem 1.5rem; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13.5px; font-weight: 500; text-transform: lowercase; letter-spacing: .005em;
	text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease;
}
.fb-btn:hover, .wp-element-button:hover, .fb-random__pick:hover, .comment-form .submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--accent); }
.fb-btn:active, .fb-random__pick:active { transform: translateY(0); }

/* 7. Texte des articles et des pages ----------------------------------- */
.fb-content { font-size: var(--wp--preset--font-size--md); }
.fb-content > * { margin-block: 0; }
.fb-content > * + * { margin-block-start: 1.15em; }
.fb-content p { text-wrap: pretty; hyphens: auto; }
.fb-content h2, .fb-content h3 {
	font-size: clamp(32px, 5vw, 44px); line-height: .95; margin-block-start: 1.8em !important; margin-block-end: -.2em;
	position: relative;
}
.fb-content h2::before {
	content: ""; display: block; width: 36px; height: 3px; background: var(--gc, var(--accent)); margin-bottom: 14px;
}
.fb-content h3 { font-size: clamp(26px, 4vw, 32px); }
.fb-content a { color: var(--gc, var(--accent)); }
[data-theme="dark"] .fb-content a { color: var(--accent); }
.fb-content ul, .fb-content ol { padding-left: 1.2em; }
.fb-content li + li { margin-top: .4em; }
.fb-content li::marker { color: var(--accent); }
.is-style-chapo, .fb-content > .is-style-chapo {
	font-size: var(--wp--preset--font-size--lg); line-height: 1.42; font-weight: 500; color: var(--ink);
	letter-spacing: -.005em; text-wrap: balance;
}
.fb-content > .is-style-chapo:first-child { margin-bottom: 1.6em; padding-bottom: 1.2em; border-bottom: 1px solid var(--line); }
.fb-content > .is-style-chapo + p::first-letter {
	float: left; font-family: var(--font-display); font-weight: 900; font-size: 4.4em; line-height: .78;
	margin: .06em .1em 0 0; color: var(--gc, var(--accent));
}
.fb-small { font-size: 16px; color: var(--muted); }
.fb-todo {
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em;
	background: #FFF4D6; color: #6B4E00; padding: 12px 16px; border-radius: 6px; border-left: 4px solid #E39B17;
}
[data-theme="dark"] .fb-todo { background: #2D2410; color: #F2D58A; }

/* 8. Pochette générative ----------------------------------------------- */
/* La pochette (à gauche) cache une partie du disque ; le disque dépasse à
   droite. Au survol, il glisse encore plus et tourne. Les tailles des textes
   suivent la taille de la pochette (unités « cqw » = % de la largeur de la pochette). */
.fb-cover {
	--label: #C2185B;
	position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate;
	container-type: inline-size;
	border-radius: 4px;
	background:
		radial-gradient(120% 90% at 100% 50%, rgba(255, 255, 255, .10), transparent 60%),
		color-mix(in oklab, var(--gc) 58%, #000);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.fb-cover__disc {
	position: absolute; z-index: 1; width: 76%; aspect-ratio: 1; top: 12%;
	left: calc(var(--cut) + var(--shift) - 38%);
	border-radius: 50%;
	background:
		conic-gradient(from 20deg, rgba(255, 255, 255, .14), transparent 9%, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 60%, transparent 92%, rgba(255, 255, 255, .14)),
		repeating-radial-gradient(circle at 50% 50%, #17141A 0 1.1%, #0E0C10 1.1% 1.9%, #1D1A21 1.9% 2.2%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), -6px 10px 24px -6px rgba(0, 0, 0, .55);
	transform: rotate(var(--tilt));
	transition: transform .8s var(--ease), left .8s var(--ease);
}
.fb-cover__grooves { position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .03); }
.fb-cover__label {
	position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--label) 80%, #fff), var(--label) 60%);
	box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .25);
}
.fb-cover__label span { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 10cqw; line-height: 1; transform: translateY(.04em); }
.fb-cover__label::after { content: ""; position: absolute; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--bg); top: 50%; left: 50%; transform: translate(-50%, -50%); }

.fb-cover__sleeve {
	position: absolute; z-index: 2; inset: 0 auto 0 0; width: var(--cut);
	background: var(--gc); color: var(--gc-ink);
	box-shadow: 1px 0 0 rgba(0, 0, 0, .12), 10px 0 18px -10px rgba(0, 0, 0, .55);
	overflow: hidden;
}
/* Grain de papier très léger */
.fb-cover__sleeve::after {
	content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: soft-light; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fb-cover__pattern { position: absolute; inset: 0; --p: color-mix(in srgb, var(--gc-ink) 15%, transparent); }
/* Cinq motifs, choisis par la face elle-même */
.fb-pat-0 .fb-cover__pattern { background: repeating-radial-gradient(circle at 100% 100%, transparent 0 7cqw, var(--p) 7cqw 7.8cqw); }
.fb-pat-1 .fb-cover__pattern { background: repeating-linear-gradient(-45deg, transparent 0 4cqw, var(--p) 4cqw 5.2cqw); }
.fb-pat-2 .fb-cover__pattern { background: radial-gradient(circle, var(--p) 0 .9cqw, transparent 1cqw) 0 0 / 4.4cqw 4.4cqw; mask: linear-gradient(200deg, #000 10%, transparent 75%); }
.fb-pat-3 .fb-cover__pattern { background: radial-gradient(circle at 15% 108%, transparent 0 27cqw, var(--p) 27cqw 28.4cqw, transparent 28.4cqw 33cqw, var(--p) 33cqw 34.4cqw, transparent 34.4cqw); }
.fb-pat-4 .fb-cover__pattern { background: repeating-linear-gradient(0deg, var(--p) 0 .7cqw, transparent .7cqw 3.2cqw) bottom / 100% 42% no-repeat; }

.fb-cover__genre {
	position: absolute; left: 6cqw; top: 5.5cqw; right: 5cqw;
	font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
	font-size: 11.5cqw; line-height: .84; letter-spacing: -.005em; text-wrap: balance;
	hyphens: none; overflow-wrap: normal;
}
.fb-cover__side {
	position: absolute; right: 2.4cqw; bottom: 6cqw; writing-mode: vertical-rl; transform: rotate(180deg);
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 2.5cqw; letter-spacing: .005em; text-transform: lowercase; opacity: .7;
}
.fb-cover__cat {
	position: absolute; left: 6cqw; bottom: 5cqw;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 500; font-size: 3.6cqw; letter-spacing: .005em;
}

/* Au survol (ou au focus clavier) : le disque glisse hors de la pochette et tourne */
@media (prefers-reduced-motion: no-preference) {
	.fb-card:hover .fb-cover__disc, .fb-card:focus-within .fb-cover__disc {
		transform: translateX(15%) rotate(calc(var(--tilt) + 140deg));
	}
	.fb-card .fb-cover { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
	.fb-card:hover .fb-cover, .fb-card:focus-within .fb-cover { transform: translateY(-4px); box-shadow: var(--shadow); }
	/* Lecture lancée : le disque sort et tourne comme sur une platine */
	.fb-is-listening .fb-cover--hero .fb-cover__disc { animation: fb-play 2.4s linear infinite; left: calc(var(--cut) + var(--shift) - 22%); }
}
@keyframes fb-play { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 9. Cartes, grilles, étagères ----------------------------------------- */
.fb-grid, .wp-block-post-template.fb-grid, .fb-shelf__row {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(18px, 2.4vw, 32px);
	list-style: none; padding: 0; margin: 0;
}
.wp-block-post-template.fb-grid > li, .fb-une-list > li { margin: 0; min-width: 0; }
.fb-une-list { list-style: none; padding: 0; margin: 0; }

.fb-card { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; }
.fb-card__body { display: grid; gap: 8px; min-width: 0; }
.fb-card__title { margin: 0; font-size: clamp(28px, 2.6vw, 34px); line-height: .94; font-weight: 800; text-wrap: balance; }
.fb-card__title a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
.fb-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* toute la carte est cliquable */
.fb-card:hover .fb-card__title a, .fb-card__title a:focus-visible { color: var(--accent); }
.fb-card__title a:focus-visible { outline: none; }
.fb-card:has(.fb-card__title a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.fb-card__artist { margin: 0; font-style: italic; color: var(--ink); font-size: 17px; }
.fb-card__chapo { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.fb-meta {
	margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted);
}
.fb-meta__rub { color: var(--accent); font-weight: 500; }
.fb-meta__genre { display: inline-flex; align-items: center; gap: 6px; }
.fb-meta__genre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }

/* La une : grand format */
.fb-card--une { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.fb-card--une .fb-card__body { gap: 16px; }
.fb-card--une .fb-card__title { font-size: clamp(48px, 7.4vw, 104px); line-height: .86; }
.fb-card--une .fb-card__chapo { font-size: clamp(19px, 1.8vw, 23px); color: var(--ink); line-height: 1.45; -webkit-line-clamp: 5; }
.fb-card--une .fb-card__artist { font-size: 20px; }
.fb-card__more { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em; color: var(--accent); display: inline-flex; gap: 8px; }

/* Étagères de rubrique */
.fb-section--shelves > .fb-kicker { margin-bottom: 8px; }
.fb-shelf { padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); }
.fb-shelf:last-child { border-bottom: 0; }
.fb-shelf__head { display: grid; align-content: start; gap: 12px; }
.fb-shelf__index { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; color: var(--accent); }
.fb-shelf__title { margin: 0; font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: .9; }
.fb-shelf__intro { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.fb-shelf__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb-shelf__empty {
	margin: 0; align-self: center; display: flex; gap: 18px; align-items: center; color: var(--muted); font-style: italic;
	border: 1px dashed var(--line); border-radius: 6px; padding: 22px;
}
.fb-shelf__sleeve { width: 54px; height: 54px; flex: none; border-radius: 3px; background: repeating-radial-gradient(circle at 100% 50%, var(--line) 0 3px, transparent 3px 6px); border: 1px solid var(--line); }
.fb-empty { color: var(--muted); font-style: italic; padding-block: 24px; }

/* 10. Article ------------------------------------------------------------ */
.fb-single { padding-bottom: clamp(48px, 8vw, 96px); }
.fb-hero {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: center;
	padding-block: clamp(28px, 5vw, 64px) clamp(32px, 5vw, 64px);
	border-bottom: 3px solid var(--ink); margin-bottom: clamp(32px, 5vw, 56px);
}
.fb-hero__text { display: grid; gap: clamp(16px, 2.4vw, 28px); align-content: center; }
.fb-hero__rub { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em; margin: 0; }
.fb-hero__rub a { color: var(--accent); text-decoration: none; }
.fb-hero__title { margin: 0; font-size: clamp(54px, 9vw, 128px) !important; line-height: .84; font-weight: 900; text-wrap: balance; }
.fb-hero__media { display: grid; gap: 16px; }
.fb-hero__media .fb-cover { box-shadow: var(--shadow); view-transition-name: fb-cover; }
.fb-cover.is-opening { view-transition-name: fb-cover; }

/* Dos de pochette : la fiche technique */
.fb-spine {
	list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: 14px 0;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em;
}
.fb-spine li { display: grid; gap: 2px; padding-inline: 0 18px; margin-right: 18px; border-right: 1px solid var(--line); }
.fb-spine li:last-child { border-right: 0; }
.fb-spine__k { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }
.fb-spine a { color: var(--ink); text-decoration: none; }
.fb-spine a:hover { color: var(--accent); }
.fb-spine__cat { color: var(--accent); font-weight: 500; }
.fb-spine__genre a { display: inline-flex; align-items: center; gap: 6px; }
.fb-spine__genre a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }

/* Lecteur d'écoute */
.fb-listen { display: grid; gap: 8px; }
.fb-listen__btn, .fb-listen__out {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
	background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 22px 10px 10px;
	font: inherit; text-decoration: none; transition: transform .3s var(--ease), background .3s ease;
}
.fb-listen__btn:hover, .fb-listen__out:hover { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink); }
.fb-listen__play {
	width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
	background: var(--gc, var(--accent)); position: relative;
}
.fb-listen__play::before { content: ""; border-left: 13px solid var(--gc-ink, #fff); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.fb-listen__btn:hover .fb-listen__play { background: var(--bg); }
.fb-listen__btn:hover .fb-listen__play::before { border-left-color: var(--accent); }
.fb-listen__txt { display: grid; line-height: 1.25; }
.fb-listen__txt strong { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 500; font-size: 13.5px; text-transform: lowercase; letter-spacing: .005em; }
.fb-listen__txt span { font-style: italic; font-size: 16px; opacity: .8; }
.fb-listen__note { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.fb-listen__note a { color: inherit; }
.fb-listen__frame { width: 100%; border: 0; border-radius: 12px; background: var(--paper); }
.fb-listen--youtube .fb-listen__frame { aspect-ratio: 16 / 9; height: auto; }
.fb-listen:not(.fb-listen--youtube) .fb-listen__frame { height: var(--player); }
.fb-listen { --player: 152px; }
.fb-listen[style*="height"] .fb-listen__frame { height: auto; }
.fb-listen.is-loaded .fb-listen__note { display: none; }

/* Après l'article : partage */
.fb-after { margin-top: clamp(40px, 6vw, 64px); }
.fb-share { border-top: 3px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; }
.fb-share__k { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.fb-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-share__list a, .fb-share__list button {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
	background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fb-share__list a:hover, .fb-share__list button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fb-share__status { margin: 0; min-height: 1.4em; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; color: var(--accent); }

/* Faces du même genre */
.fb-related { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(28px, 4vw, 40px); border-top: 3px solid var(--ink); }
.fb-related .fb-section-title { margin-bottom: clamp(24px, 3vw, 36px); }

/* 11. Commentaires et formulaires ------------------------------------- */
.fb-discuss { margin-top: clamp(48px, 7vw, 80px); }
.fb-comments .wp-block-comments-title { font-size: clamp(32px, 5vw, 44px); margin: 0 0 24px; }
.fb-comments .wp-block-comment-template { list-style: none; padding: 0; margin: 0 0 32px; }
.fb-comments .wp-block-comment-template ol { list-style: none; padding-left: clamp(16px, 4vw, 40px); border-left: 2px solid var(--line); }
.fb-comment { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fb-comment__meta { gap: 6px 14px !important; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em; }
.fb-comment__meta .wp-block-comment-author-name { color: var(--ink); font-weight: 500; }
.fb-comment__meta a { color: var(--muted); text-decoration: none; }
.fb-comment .wp-block-comment-content p { margin: 6px 0 0; font-size: 18px; }
.fb-comment__actions { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; gap: 14px !important; margin-top: 8px; }
.fb-comment__actions a { color: var(--accent); text-decoration: none; }

.comment-respond { background: var(--paper); border-radius: 10px; padding: clamp(18px, 4vw, 32px); margin-top: 24px; }
.comment-reply-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; margin: 0 0 8px; }
.comment-reply-title small a { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; margin-left: 10px; }
.comment-notes, .logged-in-as { font-size: 15px; color: var(--muted); }
.comment-form label, .fb-field label, .wp-block-search__label {
	display: block; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); margin-bottom: 6px;
}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea,
.fb-field input, .fb-field textarea, .fb-field select, .wp-block-search__input {
	width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
	padding: 12px 14px; font: inherit; font-size: 17px; transition: border-color .2s ease, box-shadow .2s ease;
}
.comment-form input:focus, .comment-form textarea:focus, .fb-field input:focus, .fb-field textarea:focus, .fb-field select:focus, .wp-block-search__input:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 15px; color: var(--muted); margin: 0; }
.comment-form-url { display: none; } /* Champ « site web » masqué : il n'attire que le spam. */

.fb-contact { display: grid; gap: 4px; background: var(--paper); border-radius: 10px; padding: clamp(18px, 4vw, 32px); }
.fb-field { margin: 0 0 14px; }
.fb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fb-contact__legal { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.fb-contact__done { font-family: var(--font-display); font-weight: 800; font-size: 32px; text-transform: uppercase; line-height: 1; margin: 0; color: var(--accent); }
.fb-contact__error { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: 6px; margin: 0 0 14px; }

.fb-search .wp-block-search__inside-wrapper { gap: 8px; }
.fb-search .wp-block-search__button { margin: 0; }

/* Pages simples */
.fb-page { padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.fb-page__head { border-bottom: 3px solid var(--ink); padding-bottom: 18px; margin-bottom: clamp(24px, 4vw, 40px); }
.fb-page__title { margin: 0; font-size: clamp(52px, 10vw, 104px) !important; font-weight: 900; line-height: .86; }
.fb-404 { padding-block: clamp(48px, 10vw, 120px); }
.fb-404__title { font-size: clamp(56px, 12vw, 120px); line-height: .86; margin: 12px 0 20px; }

/* 12. Pages de genre / rubrique, filtres -------------------------------- */
.fb-list { padding-bottom: clamp(56px, 8vw, 96px); }
.fb-list__head { padding-block: clamp(28px, 5vw, 56px) 20px; border-bottom: 3px solid var(--ink); display: grid; gap: 12px; }
.fb-list__title { margin: 0; font-size: clamp(56px, 11vw, 140px) !important; font-weight: 900; line-height: .84; }

.fb-term {
	position: relative; overflow: hidden; isolation: isolate;
	margin-top: clamp(16px, 3vw, 28px); border-radius: 6px;
	padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px) clamp(24px, 4vw, 40px);
	display: grid; gap: 12px;
	background: var(--paper); color: var(--ink);
}
.fb-term--genre { background: var(--gc); color: var(--gc-ink); }
.fb-term__k { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em; opacity: .85; }
.fb-term__name { margin: 0; font-size: clamp(60px, 13vw, 168px); font-weight: 900; line-height: .82; max-width: 12ch; text-wrap: balance; }
.fb-term__intro { margin: 6px 0 0; max-width: 44ch; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; }
.fb-term__n { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em; opacity: .85; }
.fb-term__disc {
	position: absolute; z-index: -1; width: min(52vw, 520px); aspect-ratio: 1; right: -12%; top: 50%; transform: translateY(-50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, #C2185B 0 16%, transparent 16.2%),
		repeating-radial-gradient(circle, #17141A 0 1.1%, #0E0C10 1.1% 1.9%, #1D1A21 1.9% 2.2%);
	box-shadow: -10px 14px 40px -10px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: no-preference) { .fb-term__disc { animation: fb-spin 14s linear infinite; } }
.fb-term--rubrique .fb-term__name { color: var(--accent); }

.fb-filters > *, .fb-chips, .fb-tabs { min-width: 0; }
.fb-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 44px); }
.fb-tabs ul, .fb-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fb-tabs ul { gap: 4px 22px; }
.fb-tabs a {
	display: inline-block; padding: 4px 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase;
	color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.fb-tabs a:hover { color: var(--ink); }
.fb-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.fb-chips ul { gap: 8px; position: relative; }
.fb-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; letter-spacing: .005em;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.fb-chip:hover { border-color: var(--gc); transform: translateY(-1px); }
.fb-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); flex: none; }
.fb-chip__n { color: var(--muted); font-size: 11px; }
.fb-chip[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fb-chip[aria-current="page"] .fb-chip__n { color: inherit; opacity: .7; }
.fb-section--genres .fb-chips ul { gap: 10px; }
.fb-section--genres .fb-section-title { margin-bottom: 24px; }

.fb-pagination { margin-top: 48px; gap: 10px; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 14px; text-transform: lowercase; }
.fb-pagination a, .fb-pagination .current { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); }
.fb-pagination .current { background: var(--ink); color: var(--bg); }

/* 13. Au hasard, Salon ------------------------------------------------- */
.fb-section--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); }
.fb-section--split > * { min-width: 0; }
.fb-crate .fb-section-title, .fb-salon-teaser .fb-section-title { margin-bottom: 24px; }
.fb-random { display: grid; gap: 18px; justify-items: start; }
.fb-random__stage { width: 100%; }
.fb-random .fb-card--une { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fb-random .fb-card--une .fb-card__title { font-size: clamp(36px, 4.4vw, 60px); }
.fb-random__pick { background: var(--ink); color: var(--bg); }
.fb-random__pick:hover { background: var(--accent); color: var(--accent-ink); }
.fb-random__icon { width: 16px; height: 16px; border-radius: 50%; background: repeating-radial-gradient(circle, currentColor 0 1.5px, transparent 1.5px 3px); }
@media (prefers-reduced-motion: no-preference) {
	.fb-random__pick:hover .fb-random__icon { animation: fb-spin .8s linear infinite; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

.fb-activity { list-style: none; margin: 0 0 20px; padding: 0; display: grid; }
.fb-activity__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fb-activity__item:first-child { padding-top: 0; }
.fb-avatar {
	width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	background: var(--av, var(--accent)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 20px;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25);
}
.fb-activity__body { min-width: 0; }
.fb-activity__who { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }
.fb-activity__who strong { color: var(--ink); font-weight: 500; }
.fb-activity__text { margin: 2px 0; font-size: 17px; line-height: 1.45; }
.fb-activity__text a { color: var(--ink); text-decoration: none; }
.fb-activity__text a:hover { color: var(--accent); text-decoration: underline; }
.fb-activity__when { margin: 0; font-size: 13px; color: var(--muted); }
.fb-activity__empty { color: var(--muted); font-style: italic; border: 1px dashed var(--line); border-radius: 6px; padding: 22px; margin: 0 0 20px; }

/* 14. Pied de page ------------------------------------------------------ */
.fb-footer { margin-top: clamp(56px, 8vw, 104px); border-top: 3px solid var(--ink); padding-block: clamp(32px, 5vw, 56px) 28px; font-size: 16px; color: var(--muted); }
.fb-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.fb-footer__about p { max-width: 38ch; }
.fb-footer__about .fb-logo { font-size: 44px; margin-bottom: 12px; }
.fb-footer__rhythm, .fb-footer__k { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; }
.fb-footer__rhythm { color: var(--accent); }
.fb-footer__k { color: var(--ink); margin: 0 0 10px; }
.fb-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fb-footer a { color: var(--ink); text-decoration: none; }
.fb-footer a:hover { color: var(--accent); text-decoration: underline; }
.fb-footer__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; gap: 8px 24px; }
.fb-footer__bottom p { margin: 0; }

/* 15. Transitions de page et mouvement réduit --------------------------- */
@view-transition { navigation: auto; }
::view-transition-group(fb-cover) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: fb-vt-out .25s ease both; }
::view-transition-new(root) { animation: fb-vt-in .4s var(--ease) both; }
.fb-theme-switching::view-transition-old(root), .fb-theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.fb-theme-switching::view-transition-new(root) { animation: fb-iris .6s var(--ease) both; }
@keyframes fb-vt-out { to { opacity: 0; } }
@keyframes fb-vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fb-iris { from { clip-path: circle(0 at calc(100% - 40px) 32px); } to { clip-path: circle(150% at calc(100% - 40px) 32px); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Responsive : le mobile d'abord ------------------------------------------ */
@media (max-width: 1100px) {
	.fb-shelf { grid-template-columns: minmax(0, 1fr); }
	.fb-section--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.fb-grid, .wp-block-post-template.fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fb-hero { grid-template-columns: minmax(0, 1fr); }
	.fb-hero__media { grid-row: 1; max-width: 520px; }
	.fb-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fb-footer__about { grid-column: 1 / -1; }
	/* Étagères : on fait défiler les faces au doigt */
	.fb-shelf__row {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 62%);
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: 8px;
		margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px);
		scrollbar-width: thin;
	}
	.fb-shelf__row > * { scroll-snap-align: start; }
}
@media (max-width: 700px) {
	:root { --header-h: 58px; }
	.fb-logo { font-size: 27px; }
	.fb-mast { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.fb-mast__title { font-size: clamp(88px, 31vw, 200px); }
	.fb-mast__side { justify-items: start; text-align: left; padding-bottom: 0; }
	.fb-card--une, .fb-random .fb-card--une { grid-template-columns: minmax(0, 1fr); }
	.fb-card--une .fb-card__title { font-size: clamp(46px, 13vw, 72px); }
	.fb-grid, .wp-block-post-template.fb-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	/* Sur téléphone, cartes de grille en « pochette + texte » côte à côte */
	.fb-grid .fb-card, .wp-block-post-template.fb-grid .fb-card { grid-template-columns: 38% minmax(0, 1fr); gap: 16px; align-items: start; }
	.fb-grid .fb-card__title { font-size: 26px; }
	.fb-grid .fb-card__chapo { -webkit-line-clamp: 2; font-size: 16px; }
	.fb-grid .fb-meta { font-size: 11px; }
	.fb-hero__title { font-size: clamp(48px, 14vw, 80px) !important; }
	.fb-hero { padding-top: 20px; gap: 22px; }
	.fb-hero__media { max-width: min(100%, 70vw); }
	.fb-spine li { padding-inline: 0 12px; margin-right: 12px; }
	.fb-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
	.fb-tabs a { font-size: 22px; }
	.fb-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding: 2px clamp(16px, 4vw, 40px) 8px; scrollbar-width: none; }
	.fb-chips ul::-webkit-scrollbar { display: none; }
	.fb-chip { white-space: nowrap; }
	.fb-section--genres .fb-chips ul { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
	.fb-term__disc { width: 58vw; right: -22%; top: auto; bottom: -34%; transform: none; }
	.fb-term__name { max-width: 9ch; }
}

/* =========================================================================
   16. Mouvement : révélations, titres mot à mot, 3D, aimants
   (les classes fb-rv / fb-w ne sont posées que par motion.js : sans
   JavaScript ou avec « réduire les animations », tout reste visible)
   ========================================================================= */
.fb-rv {
	opacity: 0; transform: translateY(32px) scale(.985); filter: blur(6px);
	transition: opacity 1s var(--ease-out) var(--rv-d, 0ms), transform 1.2s var(--ease-out) var(--rv-d, 0ms), filter 1s var(--ease-out) var(--rv-d, 0ms);
}
.fb-rv.is-in { opacity: 1; transform: none; filter: none; }

.fb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; padding-inline: .02em; margin-inline: -.02em; }
.fb-w__i {
	display: inline-block; transform: translateY(105%) rotate(3deg); transform-origin: 0 100%;
	transition: transform 1.2s var(--ease-out) calc(var(--wi, 0) * 60ms + var(--rv-d, 0ms));
}
.fb-splitted.is-in .fb-w__i { transform: none; }

/* Grand titre : lettres qui tombent en place, bras de platine qui se pose */
@keyframes fb-letter { from { opacity: 0; transform: translateY(.35em) rotate(-6deg) scale(.9); filter: blur(8px); } }
.fb-mast__title { position: relative; }
.fb-mast__word { display: inline-flex; }
.fb-mast__deck { position: relative; display: block; width: .84em; height: .84em; flex: none; }
.fb-mast__deck .fb-mast__vinyl { width: 100%; height: 100%; }
.fb-mast__arm {
	position: absolute; width: 42%; right: -20%; top: -16%; overflow: visible; pointer-events: none;
	filter: drop-shadow(-.02em .04em .04em rgba(0, 0, 0, .3));
}
.fb-mast__arm-g { transform-origin: 46px 12px; transform: rotate(22deg); }
@media (prefers-reduced-motion: no-preference) {
	.fb-mast__arm-g { animation: fb-arm 1.6s var(--ease) 1.1s both, fb-arm-wobble 7s ease-in-out 2.7s infinite; }
	.fb-mast:hover .fb-mast__arm-g { animation-play-state: running, paused; }
}
@keyframes fb-arm { from { transform: rotate(22deg); } 70% { transform: rotate(-3deg); } to { transform: rotate(0); } }
@keyframes fb-arm-wobble { 50% { transform: rotate(1.2deg); } }

/* Pochettes : inclinaison 3D et reflet qui suivent la souris */
.fb-card .fb-cover, .fb-hero__media .fb-cover { transform-style: preserve-3d; }
.fb-cover::before {
	content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .38), transparent 55%);
	mix-blend-mode: soft-light; transition: opacity .4s ease;
}
.fb-cover.is-tilting::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.fb-card:hover .fb-cover, .fb-card:focus-within .fb-cover,
	.fb-hero__media:hover .fb-cover {
		transform: perspective(900px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	}
	.fb-cover.is-tilting { transition: transform .12s linear, box-shadow .6s var(--ease); }
	.fb-hero__media .fb-cover { transition: transform .6s var(--ease); }
}

/* Boutons aimantés : ils suivent un peu le pointeur */
.fb-mag { translate: var(--mx, 0px) var(--my, 0px); transition: translate .35s var(--ease), transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .25s ease; }

/* En-tête qui s'efface quand on lit, revient quand on remonte */
.fb-header { transition: border-color .3s ease, box-shadow .3s ease, transform .45s var(--ease); }
.fb-header.is-hidden { transform: translateY(-100%); }

/* Petit égaliseur (étiquettes « en direct ») */
.fb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.fb-eq i { width: 3px; height: 100%; background: var(--gc, var(--accent)); border-radius: 1px; transform-origin: bottom; transform: scaleY(.4); }
@media (prefers-reduced-motion: no-preference) {
	.fb-eq i { animation: fb-eq .9s ease-in-out infinite alternate; }
	.fb-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
	.fb-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
	.fb-eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
}
@keyframes fb-eq { to { transform: scaleY(1); } }

/* Grain de papier très léger sur tout le site */
body::after {
	content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }

/* =========================================================================
   17. Ruban défilant
   ========================================================================= */
.fb-marquee {
	width: 100vw; max-width: none !important; margin-inline: calc(50% - 50vw) !important; overflow: hidden;
	background: var(--ink); color: var(--bg); padding-block: .85rem;
	font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3vw, 34px); line-height: 1;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fb-marquee__track { display: flex; width: max-content; }
.fb-marquee__group { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.fb-marquee__group li { display: flex; align-items: center; white-space: nowrap; }
.fb-marquee__group li::after { content: "✦"; margin-inline: .7em; color: var(--accent); font-size: .55em; }
.fb-marquee a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; transition: color .2s ease; }
.fb-marquee a:hover { color: var(--gc, var(--accent)); }
.fb-marquee__dot { width: .42em; height: .42em; border-radius: 50%; background: var(--gc); flex: none; }
.fb-marquee__cat { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 500; font-size: .42em; letter-spacing: .005em; margin-right: .3em; opacity: .7; }
.fb-marquee--big { background: var(--accent); color: var(--accent-ink); font-size: clamp(30px, 5vw, 64px); transform: rotate(-1.6deg); margin-block: clamp(32px, 5vw, 64px); padding-block: 1rem; }
.fb-marquee--big .fb-marquee__group li::after { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
	.fb-marquee__track { animation: fb-marquee var(--speed, 40s) linear infinite; }
	.fb-marquee:hover .fb-marquee__track, .fb-marquee.is-paused .fb-marquee__track { animation-play-state: paused; }
}
@keyframes fb-marquee { to { transform: translateX(-50%); } }
.fb-home .fb-mast + .fb-marquee { margin-top: 0; }

/* =========================================================================
   18. Bac à disques (carrousel 3D à ressorts)
   ========================================================================= */
.fb-crate { --w: clamp(210px, 24vw, 320px); position: relative; }
.fb-crate__stage { list-style: none; margin: 0; padding: 0; }
/* Sans JavaScript : une simple rangée qui défile au doigt */
.fb-crate:not(.is-ready) .fb-crate__stage { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.fb-crate:not(.is-ready) .fb-crate__item { flex: 0 0 var(--w); scroll-snap-align: start; }
.fb-crate:not(.is-ready) .fb-crate__ui { display: none; }

.fb-crate.is-ready .fb-crate__stage {
	position: relative; height: calc(var(--w) + 150px);
	perspective: 1500px; perspective-origin: 50% 35%; transform-style: preserve-3d;
	touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.fb-crate.is-dragging .fb-crate__stage { cursor: grabbing; }
.fb-crate.is-ready .fb-crate__item {
	position: absolute; left: 50%; top: 8px; width: var(--w); margin-left: calc(var(--w) / -2);
	transform-style: preserve-3d; will-change: transform, opacity;
}
.fb-crate__link { display: block; border-radius: 4px; -webkit-user-drag: none; }
.fb-crate__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.fb-crate .fb-cover {
	box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .6);
	transform: translateY(calc(var(--lift, 0) * -14px));
	-webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(0, 0, 0, .14));
}
.fb-crate .fb-cover__disc { transition: transform 1s var(--ease), left 1s var(--ease); }
.fb-crate__item.is-active .fb-cover__disc { left: calc(var(--cut) + var(--shift) - 20%); }
@media (prefers-reduced-motion: no-preference) {
	.fb-crate__item.is-active .fb-cover__disc { animation: fb-play 3s linear infinite; }
}
.fb-crate__cap { padding-top: 22px; display: grid; gap: 6px; text-align: center; justify-items: center; }
.fb-crate.is-ready .fb-crate__cap { opacity: 0; transform: translateY(10px); filter: blur(5px); transition: opacity .4s ease, transform .5s var(--ease), filter .4s ease; pointer-events: none; }
.fb-crate.is-ready .fb-crate__item.is-active .fb-crate__cap { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.fb-crate__title { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 32px); line-height: .95; text-wrap: balance; }
.fb-crate__artist { margin: 0; font-style: italic; color: var(--muted); font-size: 16px; }
.fb-crate .fb-meta { justify-content: center; }
.fb-crate__ui { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.fb-crate__btn {
	width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
	font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.fb-crate__btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fb-crate__count { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 14px; letter-spacing: .005em; min-width: 7ch; text-align: center; }
.fb-crate__count span { color: var(--accent); font-weight: 500; }
.fb-crate__hint { flex-basis: 100%; text-align: center; margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11.5px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }
.fb-section--crate { overflow: hidden; overflow: clip; padding-bottom: 8px; }
@media (max-width: 700px) {
	.fb-crate { --w: 62vw; }
	.fb-crate__hint { display: none; }
}

/* =========================================================================
   19. Compositions et styles de blocs
   ========================================================================= */
/* Grand manifeste */
.fb-manifest { padding-block: clamp(48px, 9vw, 120px) clamp(32px, 5vw, 56px); }
.fb-manifest > * + * { margin-top: clamp(18px, 2.4vw, 28px); }
.fb-manifest__title { margin: 0; font-size: clamp(56px, 10.5vw, 150px) !important; font-weight: 900; line-height: .84; max-width: 14ch; text-wrap: balance; }
.fb-manifest__lede { margin: 0; max-width: 40ch; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.4; }
.fb-manifest .wp-block-buttons { gap: 12px; }

/* Bouton contour */
.wp-block-button.is-style-contour .wp-block-button__link { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.wp-block-button.is-style-contour .wp-block-button__link:hover { background: var(--ink); color: var(--bg); }

/* Titres : contour et surligné */
.is-style-contour.wp-block-heading { color: transparent; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.is-style-contour.wp-block-heading:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); transition: color .4s ease; }
.is-style-surligne.wp-block-heading { display: inline; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--gc, var(--accent)) 35%, transparent) 58% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Étiquette */
.is-style-etiquette {
	display: inline-flex; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; letter-spacing: .005em; color: var(--accent);
}

/* Groupes : papier, vinyle, sticker */
.wp-block-group.is-style-papier { background: var(--paper); border-radius: 10px; padding: clamp(20px, 4vw, 36px); }
.wp-block-group.is-style-vinyle {
	position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; padding: clamp(24px, 5vw, 48px);
	background: #141216; color: #F2EFF5;
}
.wp-block-group.is-style-vinyle::after {
	content: ""; position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; right: -160px; bottom: -200px; border-radius: 50%;
	background: radial-gradient(circle, var(--gc, #C2185B) 0 15%, transparent 15.3%), repeating-radial-gradient(circle, #1D1A21 0 1.2%, #0E0C10 1.2% 2.1%);
	opacity: .9;
}
@media (prefers-reduced-motion: no-preference) { .wp-block-group.is-style-vinyle::after { animation: fb-spin 16s linear infinite; } }
.wp-block-group.is-style-vinyle .is-style-etiquette { color: #F0679A; }
.wp-block-group.is-style-sticker {
	background: var(--bg); border: 2px solid var(--ink); border-radius: 10px; padding: clamp(20px, 4vw, 32px);
	box-shadow: 8px 8px 0 var(--gc, var(--accent)); transform: rotate(-.6deg);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wp-block-group.is-style-sticker:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 12px 12px 0 var(--gc, var(--accent)); }

/* Tracklist : A1, A2… B1, B2 avec les durées à droite */
.wp-block-list.is-style-tracklist { list-style: none; padding: 0; margin: 0; counter-reset: fb-track; }
.wp-block-list.is-style-tracklist li {
	counter-increment: fb-track; display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
	padding: 11px 0; border-bottom: 1px dashed var(--line); margin: 0 !important;
}
.wp-block-list.is-style-tracklist li::before { content: "A" counter(fb-track); font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; color: var(--accent); }
.wp-block-list.is-style-tracklist.fb-tracks--b li::before { content: "B" counter(fb-track); }
.wp-block-list.is-style-tracklist li::marker { content: none; }
.wp-block-list.is-style-tracklist em { font-style: normal; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; color: var(--muted); }
.wp-block-list.is-style-tracklist li:hover { color: var(--accent); }
.fb-tracks__side { font-size: 28px !important; margin: 0 0 6px !important; }
.fb-tracks__side::before { display: none !important; }

/* Citation géante */
.wp-block-quote.is-style-geante, .wp-block-pullquote.is-style-geante blockquote {
	border: 0 !important; padding: 0 !important; margin-block: clamp(32px, 5vw, 56px) !important; position: relative; font-style: normal;
}
.wp-block-quote.is-style-geante p, .wp-block-pullquote.is-style-geante p {
	font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 5.6vw, 72px); line-height: .92; text-wrap: balance; margin: 0;
}
.wp-block-quote.is-style-geante::before {
	content: "“"; display: block; font-family: var(--font-display); font-weight: 900; color: var(--gc, var(--accent));
	font-size: clamp(120px, 14vw, 200px); line-height: .6; height: .45em;
}
.wp-block-quote.is-style-geante cite { display: block; margin-top: 16px; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; font-style: normal; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }

/* Séparateur sillon */
.wp-block-separator.is-style-sillon {
	border: 0 !important; height: 14px; opacity: 1; background: repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 4px);
	-webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Image pochette : un disque dépasse au survol */
.wp-block-image.is-style-pochette { position: relative; isolation: isolate; }
.wp-block-image.is-style-pochette img { position: relative; z-index: 1; aspect-ratio: 1; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow); }
.wp-block-image.is-style-pochette::after {
	content: ""; position: absolute; z-index: 0; top: 6%; left: 18%; width: 88%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, var(--gc, #C2185B) 0 16%, transparent 16.3%), repeating-radial-gradient(circle, #17141A 0 1.1%, #0E0C10 1.1% 1.9%);
	transition: transform .9s var(--ease);
}
.wp-block-image.is-style-pochette:hover::after { transform: translateX(22%) rotate(120deg); }

/* Le disque en bref */
.fb-fiche__grid { gap: 12px !important; margin: 0 0 14px !important; }
.fb-fiche__k { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }
.fb-fiche__v { margin: 2px 0 0 !important; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.fb-fiche__like { margin: 0; font-size: 17px; }

/* Le verdict */
.fb-verdict__score { margin: 0 !important; font-family: var(--font-display); font-weight: 900; font-size: clamp(72px, 10vw, 120px); line-height: .8; color: #F0679A; }
.fb-verdict__line { margin: 10px 0 !important; color: #fff; font-size: clamp(30px, 4vw, 44px) !important; max-width: 16ch; }
.fb-verdict__line::before { display: none !important; }
.fb-verdict__first { margin: 0 !important; color: #CFC8D8; }
.fb-verdict__first strong { color: #fff; }

/* Appel au Salon */
.fb-cta-salon {
	position: relative; overflow: hidden; isolation: isolate; background: #141216; color: #F2EFF5;
	padding-block: clamp(56px, 10vw, 128px); margin-block: clamp(48px, 8vw, 96px);
}
.fb-cta-salon::after {
	content: ""; position: absolute; z-index: -1; width: min(70vw, 720px); aspect-ratio: 1; right: -18%; top: 50%; translate: 0 -50%; border-radius: 50%;
	background:
		conic-gradient(from 30deg, rgba(255, 255, 255, .1), transparent 10%, transparent 45%, rgba(255, 255, 255, .07) 52%, transparent 60%),
		radial-gradient(circle, #C2185B 0 15%, transparent 15.2%),
		repeating-radial-gradient(circle, #1D1A21 0 1.1%, #0E0C10 1.1% 1.9%, #24202A 1.9% 2.2%);
}
@media (prefers-reduced-motion: no-preference) { .fb-cta-salon::after { animation: fb-spin 12s linear infinite; } }
.fb-cta-salon .fb-kicker { color: #CFC8D8; }
.fb-cta-salon__title { margin: 14px 0 !important; color: #fff; font-size: clamp(52px, 9vw, 128px) !important; font-weight: 900; line-height: .84; max-width: 11ch; }
.fb-cta-salon__text { max-width: 40ch; font-size: clamp(19px, 2vw, 23px); color: #CFC8D8; }
.fb-cta-salon .wp-block-button__link { background: #F0679A; color: #18151D; }

/* Chiffres */
.fb-stats { padding-block: clamp(32px, 5vw, 56px); border-block: 3px solid var(--ink); }
.fb-stats__grid { gap: clamp(20px, 4vw, 48px) !important; margin: 0 !important; }
.fb-stats__n { margin: 0 !important; font-family: var(--font-display); font-weight: 900; font-size: clamp(88px, 13vw, 180px); line-height: .8; color: var(--accent); font-variant-numeric: tabular-nums; }
.fb-stats__k { margin: 8px 0 0 !important; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); max-width: 22ch; }

/* Playlist commentée : numéros géants */
.fb-playlist { counter-reset: fb-pl; display: grid; gap: 0; }
.fb-playlist__item { counter-increment: fb-pl; position: relative; padding: 22px 0 22px clamp(72px, 10vw, 120px); border-bottom: 1px solid var(--line); margin: 0 !important; }
.fb-playlist__item::before {
	content: counter(fb-pl, decimal-leading-zero); position: absolute; left: 0; top: 14px;
	font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 8vw, 96px); line-height: .8;
	color: transparent; -webkit-text-stroke: 1.5px var(--gc, var(--accent)); transition: color .35s ease;
}
.fb-playlist__item:hover::before { color: var(--gc, var(--accent)); }
.fb-playlist__title { margin: 0 !important; font-size: clamp(28px, 3.4vw, 38px) !important; }
.fb-playlist__title::before { display: none !important; }
.fb-playlist__artist { margin: 4px 0 8px !important; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; letter-spacing: .005em; color: var(--muted); }
.fb-playlist__item p:last-child { margin-bottom: 0; }

/* Qui écrit ici */
.fb-about-intro { gap: clamp(24px, 5vw, 72px) !important; align-items: start; }
.fb-about-intro .is-style-contour { font-size: clamp(56px, 9vw, 120px); line-height: .84; margin: 0; }

/* =========================================================================
   20. Pied de page : le grand « RAINURE » qui se remplit au défilement
   ========================================================================= */
.fb-bigword {
	margin: clamp(24px, 4vw, 40px) 0 -.08em; text-align: center; user-select: none;
	font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(80px, 21vw, 330px); line-height: .8; letter-spacing: -.01em; white-space: nowrap;
	/* Pas de contour (il dessinait les chevauchements internes des lettres) : un fond pâle,
	   et la couleur qui le recouvre de gauche à droite. */
	color: transparent;
	background:
		linear-gradient(90deg, var(--accent), var(--accent)) 0 0 / 0% 100% no-repeat,
		linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent), color-mix(in srgb, var(--ink) 9%, transparent));
	-webkit-background-clip: text; background-clip: text;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Rempli dès que le mot est entièrement à l'écran : il est tout en bas de la page. */
		.fb-bigword { animation: fb-fill linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}
@supports not (animation-timeline: view()) { .fb-bigword { background-size: 100% 100%, auto; } }
@media (prefers-reduced-motion: reduce) { .fb-bigword { background-size: 100% 100%, auto; } }
@keyframes fb-fill { to { background-size: 100% 100%, auto; } }

/* Grand titre : le vinyle tourne plus vite quand on fait défiler */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.fb-mast__deck { animation: fb-roll-in 1.2s var(--ease) .25s both; }
		.fb-mast__word { animation: fb-mast-out linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
	}
}
@keyframes fb-mast-out { to { transform: translateY(-12%); opacity: .25; filter: blur(2px); } }

@media (max-width: 700px) {
	.fb-mast__arm { width: 44%; right: -16%; }
	.fb-stats__grid { flex-direction: column; }
}

/* Sections pleine largeur : le texte s'aligne à gauche de la colonne (1240 px), au lieu d'être centré. */
.fb-cta-salon > *, .fb-manifest > * {
	margin-left: max(0px, calc((100% - 1240px) / 2)) !important; margin-right: auto !important;
}
.fb-cta-salon__title { margin-block: 14px !important; }

/* =========================================================================
   21. Photos d'artistes
   - Dans la pochette : la photo en bichromie, à la couleur du genre.
   - Derrière l'en-tête de l'article : la photo en grand, qui apparaît en se
     découpant puis zoome doucement au défilement, avec un halo qui suit la
     souris et un grain argentique (inspiré des composants « Zoom Parallax »,
     « Smooth Scroll Hero » et « Grainy Light Leak » de 21st.dev).
   ========================================================================= */
.fb-cover.has-photo .fb-cover__pattern { display: none; }
.fb-cover__photo {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
	/* Gris + « produit » sur la couleur du genre = bichromie façon pochette imprimée */
	filter: grayscale(1) contrast(1.15) brightness(1.05);
	mix-blend-mode: multiply;
}
.fb-cover.has-photo .fb-cover__sleeve { width: max(var(--cut), 62%); }
.fb-cover.has-photo .fb-cover__sleeve::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 70%, transparent) 0, transparent 38%, transparent 70%, rgba(0, 0, 0, .45));
}
.fb-cover.has-photo .fb-cover__genre, .fb-cover.has-photo .fb-cover__side, .fb-cover.has-photo .fb-cover__cat { z-index: 2; }
.fb-cover.has-photo .fb-cover__cat, .fb-cover.has-photo .fb-cover__side { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.fb-cover.has-photo .fb-cover__disc { left: calc(max(var(--cut), 62%) + var(--shift) - 38%); }
@media (prefers-reduced-motion: no-preference) {
	.fb-cover__photo { transition: filter .7s var(--ease), transform 1.2s var(--ease); }
	.fb-card:hover .fb-cover__photo, .fb-card:focus-within .fb-cover__photo { transform: scale(1.06); filter: grayscale(.2) contrast(1.05); }
}

/* Fond de l'article ------------------------------------------------------ */
.has-artist-photo .fb-hero { position: relative; isolation: isolate; border-bottom-color: transparent; }
.has-artist-photo .fb-hero::after { /* le filet noir, posé au-dessus de la photo */
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--ink); z-index: 1;
}
.fb-backdrop {
	position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
	top: calc(-1 * var(--header-h) - 40px); bottom: 0;
	left: 50%; width: 100vw; transform: translateX(-50%);
	--bp: 0; --gx: 70%; --gy: 40%;
	/* Fondu en bas : la photo se dissout dans la page */
	-webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%);
	mask: linear-gradient(180deg, #000 55%, transparent 100%);
}
.fb-backdrop__img {
	position: absolute; inset: 0 0 0 38%;
	background-size: cover; background-position: 50% 20%; background-repeat: no-repeat;
	filter: grayscale(.9) contrast(1.08);
	transform: translateY(calc(var(--bp) * 10%)) scale(calc(1.02 + var(--bp) * .14));
	transform-origin: 70% 30%;
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 45%);
	mask: linear-gradient(90deg, transparent 0, #000 45%);
	opacity: calc(.65 - var(--bp) * .4); /* mode jour : plus présente (le mode nuit a sa propre règle juste dessous) */
	will-change: transform, opacity;
}
:root[data-theme="dark"] .fb-backdrop__img { opacity: calc(.5 - var(--bp) * .32); filter: grayscale(.9) contrast(1.1) brightness(.9); }
/* Teinte du genre : la photo prend la couleur de la face */
.fb-backdrop__tint {
	position: absolute; inset: 0; mix-blend-mode: color; opacity: .42;
	background: linear-gradient(100deg, transparent 35%, var(--gc) 80%);
}
/* Halo qui suit la souris (lumière de projecteur) */
.fb-backdrop__glow {
	position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .9;
	background: radial-gradient(38vmax 30vmax at var(--gx) var(--gy), color-mix(in srgb, var(--gc) 70%, #fff), transparent 70%);
	transition: background-position .2s linear;
}
/* Grain argentique, qui « bouille » doucement */
.fb-backdrop__grain {
	position: absolute; inset: -50%; opacity: .16; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
	/* Entrée : la photo se découpe de droite à gauche, sort du flou et recule */
	.fb-backdrop__img { animation: fb-bd-in 1.8s cubic-bezier(.16, 1, .3, 1) .1s both; }
	.fb-backdrop__tint, .fb-backdrop__glow { animation: fb-bd-fade 2.4s ease .5s both; }
	.fb-backdrop__grain { animation: fb-grain .9s steps(6) infinite; }
}
@keyframes fb-bd-in {
	from { clip-path: inset(0 0 0 100%); filter: grayscale(.9) blur(14px); scale: 1.18; }
	60% { clip-path: inset(0 0 0 0); }
	to { clip-path: inset(0 0 0 0); scale: 1; }
}
@keyframes fb-bd-fade { from { opacity: 0; } }
@keyframes fb-grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(4%, -8%); }
	60% { transform: translate(-3%, 7%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
@media (max-width: 900px) {
	.fb-backdrop__img { inset: 0; -webkit-mask: none; mask: none; opacity: calc(.4 - var(--bp) * .26); }
}

/* Crédit photo sous l'article */
.fb-credit { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11px; letter-spacing: .005em; text-transform: lowercase; color: var(--muted); margin: 0 0 18px; }
.fb-credit a { color: inherit; }
.fb-credit a:hover { color: var(--accent); }

/* =========================================================================
   22. La scène : photo de fond de tout le site
   Bob Marley & The Wailers en concert à Zürich, mai 1980 (tournée Uprising).
   En noir et blanc, très discrète, elle dérive lentement comme une caméra
   de concert et glisse un peu au défilement.
   ========================================================================= */
.fb-stage {
	position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
	--sy: 0;
}
.fb-stage__img {
	position: absolute; inset: -6%;
	background: url("../img/stage-marley-zurich-1980.jpg") 62% 40% / cover no-repeat;
	filter: grayscale(1) contrast(1.25);
	opacity: .22; mix-blend-mode: multiply; /* mode jour : bien visible, sans gêner la lecture */
	transform: translateY(calc(var(--sy) * -4%)) scale(1.04);
	-webkit-mask: radial-gradient(120% 90% at 65% 35%, #000 30%, transparent 85%);
	mask: radial-gradient(120% 90% at 65% 35%, #000 30%, transparent 85%);
}
:root[data-theme="dark"] .fb-stage__img { opacity: .2; mix-blend-mode: screen; filter: grayscale(1) contrast(1.35) brightness(.85); }
/* Faisceau de projecteur qui balaie lentement la scène */
.fb-stage::after {
	content: ""; position: absolute; inset: -20%; opacity: .3; mix-blend-mode: soft-light;
	background: conic-gradient(from 200deg at 62% -10%, transparent 0 40deg, color-mix(in srgb, var(--accent) 40%, transparent) 46deg, transparent 54deg 360deg);
}
@media (prefers-reduced-motion: no-preference) {
	.fb-stage__img { animation: fb-stage-drift 70s ease-in-out infinite alternate; }
	.fb-stage::after { animation: fb-spot 18s ease-in-out infinite alternate; transform-origin: 62% -10%; }
}
@keyframes fb-stage-drift { to { background-position: 54% 46%; scale: 1.08; } }
@keyframes fb-spot { from { rotate: -14deg; } to { rotate: 16deg; } }
/* Sur un article avec photo d'artiste, l'artiste prend la scène */
.has-artist-photo .fb-stage__img { opacity: .04; }
:root[data-theme="dark"] .has-artist-photo .fb-stage__img { opacity: .08; }
.fb-footer__stage { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11px; letter-spacing: .005em; text-transform: lowercase; color: var(--muted); margin-top: 6px !important; margin-bottom: 0 !important; }
.fb-footer__stage a { color: inherit; }

/* Titre avec un mot très long (« Ménilmontant ») : on réduit pour ne jamais couper un mot. */
.fb-hero__title.is-long { font-size: clamp(44px, 6.6vw, 100px) !important; }
@media (max-width: 700px) { .fb-hero__title.is-long { font-size: clamp(36px, 10.5vw, 64px) !important; } }

/* =========================================================================
   23. Identité « Affiche de concert »
   Une seule famille, Anybody, dont la largeur varie de 50 % à 150 % :
   serrée et noire pour les titres, large et en minuscules pour les
   étiquettes, comme les lignes d'une affiche de soirée. Le texte courant
   reste en Newsreader. Quand le son du club joue, les grands mots battent
   la mesure (123 BPM, un tempo de house).
   ========================================================================= */
:root {
	--display-stretch: 56%;
	--label-stretch: 125%;
	--bpm: 0.4878s; /* 60 / 123 */
}
body { font-stretch: var(--display-stretch); } /* Newsreader n'a pas de largeurs : il n'est pas touché */
h1, h2, h3, h4, h5, h6 { letter-spacing: -.005em; font-optical-sizing: auto; }
.fb-logo { font-stretch: 62%; letter-spacing: 0; }

/* Le grand FACE : chaque lettre a sa largeur, comme composé à la main */
.fb-mast__word { gap: .035em; }
.fb-mast__l { display: inline-block; font-stretch: var(--w, 56%); }
.fb-mast__title { font-size: clamp(80px, 15.5vw, 210px); }
.fb-mast__l:nth-child(1) { --w: 68%; }
.fb-mast__l:nth-child(2) { --w: 52%; }
.fb-mast__l:nth-child(3) { --w: 56%; }
.fb-mast__l:nth-child(4) { --w: 56%; }
.fb-mast__l:nth-child(5) { --w: 96%; }
.fb-mast__l:nth-child(6) { --w: 64%; }
.fb-mast__l:nth-child(7) { --w: 78%; }

/* Les titres « s'impriment » : chaque mot arrive maigre et serré puis prend son encre */
.fb-w__i { font-weight: 850; }
@media (prefers-reduced-motion: no-preference) {
	/* Les mots montent de leur ligne, sortent du flou et prennent leur encre.
	   Seuls transform, opacity et filter bougent : la largeur des mots ne
	   change jamais, donc un titre ne passe plus d'une ligne à deux pendant
	   l'animation (et la carte graphique fait tout le travail : c'est fluide). */
	.fb-splitted:not(.is-in) .fb-w__i { opacity: 0; filter: blur(10px); }
	.fb-w__i {
		transition: transform 1.2s var(--ease-out) calc(var(--wi, 0) * 60ms + var(--rv-d, 0ms)),
			opacity .9s var(--ease-out) calc(var(--wi, 0) * 60ms + var(--rv-d, 0ms)),
			filter 1s var(--ease-out) calc(var(--wi, 0) * 60ms + var(--rv-d, 0ms));
	}
	/* Survol d'une carte : le titre prend la couleur du genre (sans changer de largeur) */
	.fb-card__title a { transition: color .35s ease; }
	.fb-card:hover .fb-card__title a { color: var(--gc, var(--accent)); }

	/* Le son joue : les lettres du grand FACE et du logo battent en décalé */
	/* Les lettres pulsent en hauteur, comme les barres d'un égaliseur.
	   On anime « transform » (et non la largeur) : rien ne bouge autour. */
	.fb-beat .fb-mast__l { transform-origin: 50% 100%; animation: fb-beat var(--bpm) cubic-bezier(.3, 0, .2, 1) infinite alternate; animation-delay: calc(var(--i, 0) * var(--bpm) / 4); }
	.fb-beat .fb-logo__word { display: inline-block; transform-origin: 50% 100%; animation: fb-beat-logo var(--bpm) ease-in-out infinite alternate; }
}
@keyframes fb-beat { from { transform: scaleY(1); } to { transform: scaleY(1.07); } }
@keyframes fb-beat-logo { from { transform: scaleY(1); } to { transform: scaleY(1.1); } }

/* Étiquettes : larges, minuscules, un peu plus grasses pour rester nettes.
   Les valeurs de la fiche (nom d'artiste, date) gardent leurs majuscules. */
.fb-spine li { text-transform: none; }
.fb-spine__k { text-transform: lowercase; letter-spacing: .01em; }
.fb-nav, .fb-kicker, .fb-hero__rub, .fb-spine, .fb-card__meta { font-weight: 560; }
.fb-nav { font-size: 14px; }

/* =========================================================================
   24. Le son du club : la platine flottante
   ========================================================================= */
.fb-sound {
	position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 60;
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-mono); font-stretch: var(--label-stretch);
}
.fb-sound__btn {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink);
	-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: var(--shadow);
	font: inherit; font-size: 13px; font-weight: 560; text-transform: lowercase;
	transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.fb-sound__btn:hover { transform: translateY(-2px); }
.fb-sound__disc {
	width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative;
	background:
		radial-gradient(circle, var(--accent) 0 22%, transparent 23%),
		repeating-radial-gradient(circle, #1a171d 0 1.5px, #0d0b0f 1.5px 3px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.fb-sound__disc::after { content: ""; position: absolute; inset: 45%; border-radius: 50%; background: var(--bg); }
.fb-sound__eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.fb-sound__eq i { width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; transform: scaleY(.3); }
.fb-sound[data-state="on"] .fb-sound__eq, .fb-sound[data-state="excerpt"] .fb-sound__eq { display: inline-flex; }
.fb-sound[data-state="on"] .fb-sound__btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fb-sound[data-state="waiting"] .fb-sound__btn { box-shadow: 0 0 0 0 var(--accent); animation: fb-sound-ping 1.6s ease-out infinite; }
@keyframes fb-sound-ping { to { box-shadow: 0 0 0 14px transparent; } }

/* Le crédit apparaît au survol ou au focus */
.fb-sound__what {
	margin: 0; display: grid; gap: 2px; font-size: 11px; line-height: 1.3; color: var(--muted); text-transform: lowercase;
	padding: 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease);
}
.fb-sound__what a { color: inherit; }
.fb-sound:hover .fb-sound__what, .fb-sound:focus-within .fb-sound__what, .fb-sound[data-state="on"]:hover .fb-sound__what { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
	.fb-sound[data-state="on"] .fb-sound__disc, .fb-sound[data-state="excerpt"] .fb-sound__disc { animation: fb-play 1.8s linear infinite; }
	.fb-sound[data-state="on"] .fb-sound__eq i, .fb-sound[data-state="excerpt"] .fb-sound__eq i { animation: fb-eq var(--bpm) ease-in-out infinite alternate; }
	.fb-sound__eq i:nth-child(2) { animation-delay: calc(var(--bpm) * -.5) !important; }
	.fb-sound__eq i:nth-child(3) { animation-delay: calc(var(--bpm) * -.25) !important; animation-duration: calc(var(--bpm) / 2) !important; }
	.fb-sound__eq i:nth-child(4) { animation-delay: calc(var(--bpm) * -.75) !important; }
}
@keyframes fb-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (max-width: 700px) {
	/* Sur téléphone : une pastille « disque + activer le son », bien lisible.
	   Quand on descend dans la page, elle se replie sur le disque seul (toujours visible). */
	.fb-sound__btn { padding: 5px 14px 5px 5px; gap: 8px; font-size: 12.5px; }
	.fb-sound__state {
		display: inline-block; max-width: 13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		transition: max-width .35s var(--ease), opacity .25s ease;
	}
	.fb-sound__what { display: none; }
}
@media print { .fb-sound, .fb-stage { display: none; } }
@media (max-width: 700px) {
	/* Sur téléphone, le grand FACE se resserre pour tenir avec son vinyle */
	.fb-mast__title { font-size: clamp(54px, 17vw, 130px); }
	.fb-mast__l { --w: 54% !important; }
}

/* =========================================================================
   25. Extrait au survol d'une pochette
   ========================================================================= */
.fb-cover[data-extrait] { cursor: pointer; }
.fb-cover.is-sampling .fb-cover__disc { left: calc(max(var(--cut), 62%) + var(--shift) - 20%); animation: fb-play 1.8s linear infinite; }
.fb-cover:not(.has-photo).is-sampling .fb-cover__disc { left: calc(var(--cut) + var(--shift) - 20%); }
.fb-cover::after {
	content: ""; position: absolute; z-index: 5; left: 50%; bottom: 10%; translate: -50% 8px;
	max-width: 86%; padding: .5em .9em; border-radius: 999px;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: max(11px, 3.4cqw); font-weight: 560; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background: rgba(14, 12, 16, .82); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; pointer-events: none; transition: opacity .3s ease, translate .4s var(--ease);
}
.fb-cover.is-sampling::after { content: "♪ " var(--sample-title, "extrait") " · deezer"; opacity: 1; translate: -50% 0; }
.fb-cover.is-locked::after { content: "cliquez une fois sur la page pour écouter au survol"; white-space: normal; text-align: center; opacity: 1; translate: -50% 0; }

/* =========================================================================
   26. Premier Sillon : la rubrique des artistes qui commencent
   Sa couleur : un vert acide, comme une pastille collée sur un disque neuf.
   Son objet : le « pressage test », vinyle à étiquette blanche annotée.
   ========================================================================= */
:root { --ps: #D4F04A; --ps-ink: #121014; --ps-bg: #121015; }

/* Le bandeau (accueil) et l'en-tête (page de la rubrique) */
.fb-ps {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--ps-bg); color: #F2EFF5;
	padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 40px);
	margin-block: clamp(40px, 7vw, 88px);
}
.fb-ps--page { margin-top: 0; }
.fb-ps::before { /* grain + halo vert */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60% 80% at 85% 40%, color-mix(in srgb, var(--ps) 22%, transparent), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.fb-ps__inner, .fb-ps__row { max-width: 1240px; margin-inline: auto; }
.fb-ps__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fb-ps__text { display: grid; gap: clamp(14px, 2vw, 22px); align-content: center; }
.fb-ps__k { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 560; font-size: 14px; text-transform: lowercase; color: #ABA3B5; }
.fb-ps__k span { display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px; background: var(--ps); color: var(--ps-ink); }
.fb-ps__title {
	margin: 0; color: #fff; font-size: clamp(60px, 8.6vw, 136px) !important; line-height: .82; font-weight: 900; text-transform: uppercase;
}
/* « PREMIER » large, « SILLON » serré : deux lignes d'affiche */
.fb-ps__title .fb-w:first-of-type .fb-w__i, .fb-ps__title:not(.fb-splitted) { font-stretch: 112%; }
.fb-ps__title .fb-w:last-of-type .fb-w__i { font-stretch: 58%; color: var(--ps); }
.fb-ps__title .fb-ws { display: flex; flex-direction: column; }
.fb-ps__lede { margin: 0; max-width: 34ch; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: #DCD6E3; }
.fb-ps__cta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.fb-ps .fb-btn { background: var(--ps); color: var(--ps-ink); }
.fb-ps .fb-btn:hover { background: #fff; color: var(--ps-ink); }
.fb-ps__propose { color: #fff; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 560; font-size: 15px; text-transform: lowercase; text-decoration-color: var(--ps); text-decoration-thickness: 2px; }
.fb-ps__propose:hover { color: var(--ps); }
.fb-ps__n { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; color: #8F879A; }

/* Le pressage test */
.fb-ps__media { display: grid; place-items: center; }
.fb-ps__disc {
	position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%;
	background:
		conic-gradient(from 30deg, rgba(255, 255, 255, .12), transparent 10%, transparent 45%, rgba(255, 255, 255, .08) 52%, transparent 62%, transparent 92%, rgba(255, 255, 255, .12)),
		repeating-radial-gradient(circle, #17141A 0 1.1%, #0E0C10 1.1% 1.9%, #1D1A21 1.9% 2.2%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -30px color-mix(in srgb, var(--ps) 55%, transparent);
}
.fb-ps__grooves { position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.fb-ps__label {
	position: absolute; inset: 32%; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px;
	background: #F4F1EA; color: #1a171d; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
	transform: rotate(-8deg);
}
.fb-ps__label::after { content: ""; position: absolute; width: 4%; aspect-ratio: 1; border-radius: 50%; background: var(--ps-bg); top: 50%; left: 50%; translate: -50% -50%; }
.fb-ps__label em { font-family: var(--font-display); font-style: italic; font-weight: 800; font-stretch: 80%; font-size: clamp(22px, 3vw, 34px); line-height: .9; text-transform: uppercase; color: #1a171d; padding-bottom: 14%; }
.fb-ps__label em sup { font-size: .5em; }
.fb-ps__label small { position: absolute; bottom: 18%; left: 0; right: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: clamp(8px, .8vw, 10px); text-transform: lowercase; color: #6d6676; }
@media (prefers-reduced-motion: no-preference) {
	.fb-ps__disc { animation: fb-play 9s linear infinite; }
	.fb-beat .fb-ps__disc { animation-duration: calc(var(--bpm) * 4); }
}

/* Les trois promesses (page de la rubrique) */
.fb-ps__promises { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: ps; }
.fb-ps__promises li { counter-increment: ps; display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ps); }
.fb-ps__promises li::before { content: "0" counter(ps); font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; color: var(--ps); }
.fb-ps__promises strong { font-family: var(--font-display); font-weight: 850; font-size: 22px; line-height: 1; text-transform: uppercase; color: #fff; }
.fb-ps__promises span { font-size: 16px; line-height: 1.45; color: #C9C2D2; }

/* Les dernières faces sous le bandeau (accueil) */
.fb-ps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin-top: clamp(40px, 6vw, 72px); }
.fb-ps .fb-card, .fb-ps .fb-card a { color: #F2EFF5; }
.fb-ps .fb-card__meta, .fb-ps .fb-card__chapo { color: #ABA3B5; }

/* La pastille « 1er sillon » sur les pochettes */
.fb-cover__sticker {
	position: absolute; z-index: 4; top: 5%; right: 5%; width: 24cqw; aspect-ratio: 1; border-radius: 50%;
	display: grid; place-content: center; text-align: center; line-height: .9;
	background: var(--ps); color: var(--ps-ink); transform: rotate(14deg);
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-weight: 600; font-size: 3.4cqw; text-transform: lowercase;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5), inset 0 0 0 .5cqw rgba(0, 0, 0, .08);
}
.fb-cover__sticker b { display: block; font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-size: 9cqw; line-height: .85; }
.fb-cover__sticker sup { font-size: .45em; }

/* Lien du menu */
.fb-nav .fb-nav__ps > a { position: relative; }
.fb-nav .fb-nav__ps > a::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ps); box-shadow: 0 0 0 2px var(--ink); vertical-align: .08em; }

/* Soutenir l'artiste */
.fb-soutenir {
	display: grid; gap: 10px; margin: 0 0 28px; padding: 22px 24px; border-radius: 14px;
	background: var(--ps-bg); color: #F2EFF5; border-left: 6px solid var(--ps);
}
.fb-soutenir__k { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; font-weight: 560; text-transform: lowercase; color: var(--ps); }
.fb-soutenir__t { margin: 0; font-size: 18px; line-height: 1.45; }
.fb-soutenir__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fb-soutenir .fb-btn { background: var(--ps); color: var(--ps-ink); }
.fb-soutenir__alt { color: #fff; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 14px; text-transform: lowercase; }

/* Proposer ma musique */
.fb-ps-submit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fb-ps-submit__intro { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 24px); }
.fb-ps-submit__intro p { margin: 0; font-size: 19px; line-height: 1.5; }
.fb-ps-steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 14px; }
.fb-ps-steps li { counter-increment: st; position: relative; min-height: 44px; padding: 9px 0 0 58px; font-size: 17px; line-height: 1.45; }
.fb-ps-steps li::before {
	content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--ps); color: var(--ps-ink); font-family: var(--font-display); font-weight: 900; font-size: 22px;
}
.fb-ps-submit__free { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 14px !important; text-transform: none; color: var(--muted); }
.fb-proposer { display: grid; gap: 14px; padding: clamp(20px, 3vw, 36px); border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.fb-proposer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.fb-proposer .fb-field--wide { grid-column: 1 / -1; }
.fb-proposer label span { color: var(--muted); }
.fb-proposer select { width: 100%; }
.fb-proposer__check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.fb-proposer__check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.fb-proposer .fb-btn { background: var(--ps); color: var(--ps-ink); }

@media (max-width: 900px) {
	.fb-ps__inner, .fb-ps-submit { grid-template-columns: minmax(0, 1fr); }
	.fb-ps__media { order: -1; }
	.fb-ps__disc { width: min(70vw, 320px); }
	.fb-ps__promises, .fb-ps__row { grid-template-columns: minmax(0, 1fr); }
	.fb-ps-submit__intro { position: static; }
	.fb-proposer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Premier Sillon, encore plus en avant ------------------------------------ */
/* Le ruban tout en haut du site */
.fb-ribbon {
	position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; gap: 12px;
	padding: 9px 48px 9px 16px; background: var(--ps); color: var(--ps-ink);
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13.5px; font-weight: 520; text-transform: lowercase;
}
.fb-ribbon[hidden] { display: none; }
.fb-ribbon p { margin: 0; text-align: center; line-height: 1.35; }
.fb-ribbon strong { font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; }
.fb-ribbon a { color: var(--ps-ink); font-weight: 650; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.fb-ribbon a:hover { text-decoration-thickness: 3px; }
.fb-ribbon__dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--ps-ink); vertical-align: .06em; }
@media (prefers-reduced-motion: no-preference) { .fb-ribbon__dot { animation: fb-sound-ping-dot 1.6s ease-out infinite; } }
@keyframes fb-sound-ping-dot { 0% { box-shadow: 0 0 0 0 rgba(18, 16, 20, .5); } 100% { box-shadow: 0 0 0 9px rgba(18, 16, 20, 0); } }
.fb-ribbon__close { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ps-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.fb-ribbon__close:hover { background: rgba(0, 0, 0, .08); }
@media (max-width: 700px) { .fb-ribbon__txt, .fb-ribbon__sep { display: none; } .fb-ribbon p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; } }

/* L'onglet de rubrique */
.fb-tabs .fb-tabs__ps a { background: var(--ps); color: var(--ps-ink) !important; border-color: var(--ps) !important; }

/* L'encart sous chaque article */
.fb-ps-mini {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: center;
	max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto; padding: clamp(24px, 4vw, 48px); border-radius: 22px;
	background: var(--ps-bg); color: #F2EFF5; position: relative; overflow: hidden; isolation: isolate;
}
.fb-ps-mini::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 100% 0, color-mix(in srgb, var(--ps) 25%, transparent), transparent 70%); }
.fb-ps-mini__text { display: grid; gap: 14px; }
.fb-ps-mini__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 64%; text-transform: uppercase; font-size: clamp(32px, 4.4vw, 60px); line-height: .9; color: #fff; }
.fb-ps-mini__lede { margin: 0; font-size: 18px; color: #DCD6E3; max-width: 44ch; }
.fb-ps-mini .fb-card, .fb-ps-mini .fb-card a { color: #F2EFF5; }
.fb-ps-mini .fb-btn { background: var(--ps); color: var(--ps-ink); }
.fb-ps-mini .fb-btn:hover { background: #fff; color: var(--ps-ink); }
.fb-ps-mini .fb-card__meta, .fb-ps-mini .fb-card__chapo { color: #ABA3B5; }
@media (max-width: 800px) { .fb-ps-mini { grid-template-columns: minmax(0, 1fr); margin-inline: 0; } }

/* =========================================================================
   27. Le label : « Rejoindre le label », plumes invitées
   ========================================================================= */
.fb-join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block: 32px 48px; }
.fb-join__card {
	position: relative; display: grid; gap: 10px; align-content: start; overflow: hidden;
	padding: 26px 26px 24px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line);
	transition: transform .4s var(--ease), border-color .3s ease;
}
.fb-join__card:hover { transform: translateY(-3px); border-color: var(--ink); }
.fb-join__card:first-child { background: var(--ps-bg); color: #F2EFF5; border-color: var(--ps-bg); }
.fb-join__card:first-child .fb-more a, .fb-join__card:first-child .fb-more { color: var(--ps); }
.fb-join__n { position: absolute; right: 18px; top: 6px; font-family: var(--font-display); font-weight: 900; font-stretch: 60%; font-size: 72px; line-height: 1; color: currentColor; opacity: .08; }
.fb-join__title { margin: 0; font-size: clamp(24px, 2.6vw, 32px) !important; line-height: .95; }
.fb-join__card p { margin: 0; font-size: 17px; line-height: 1.5; }
.fb-join__card .fb-more { margin-top: 6px; }
.fb-spine__guest { color: var(--accent); }
@media (max-width: 700px) { .fb-join { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   28. Visuels des rubriques : une photo dans une pochette, le disque qui
   dépasse. Au survol, la photo reprend ses couleurs, le disque sort et
   tourne ; quand la musique du site joue, il tourne en rythme.
   (inspiré des cartes « vinyle » et des révélations au curseur de 21st.dev)
   ========================================================================= */
.fb-term.has-art {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: end; column-gap: clamp(24px, 4vw, 56px);
}
.fb-term.has-art > :not(.fb-term__art) { grid-column: 1; }
.fb-term.has-art .fb-term__name { max-width: none; }
.fb-term.has-art::before {           /* halo de couleur qui suit le curseur derrière la pochette */
	content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background: radial-gradient(520px circle at var(--hx, 78%) var(--hy, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
	opacity: .9; transition: opacity .6s ease;
}
.fb-term__art {
	grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: center;
	position: relative; margin: 0; width: min(100%, 360px); padding-right: 22%;
	display: grid; gap: 10px;
}
.fb-term__tilt {
	position: relative; aspect-ratio: 1;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d; transition: transform .7s var(--ease);
}
.fb-term__art.is-tilting .fb-term__tilt { transition: transform .12s linear; }

/* La pochette */
.fb-term__sleeve {
	position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 4px;
	background: #0E0C10;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -24px rgba(0, 0, 0, .65), 0 8px 18px -8px rgba(0, 0, 0, .45);
}
.fb-term__sleeve img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.12) translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -10px));
	filter: grayscale(1) contrast(1.15) brightness(.92);
	transition: filter .8s ease, transform .7s var(--ease);
}
.fb-term__sleeve::before {          /* bichromie : la photo prend la couleur du label */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(160deg, var(--accent), #2A1630);
	mix-blend-mode: color; opacity: .78; transition: opacity .8s ease;
}
.fb-term__sleeve::after {           /* grain de papier */
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fb-term__shine {                    /* reflet qui suit la souris */
	position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light;
	background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .7), transparent 55%);
	opacity: .55; transition: opacity .5s ease;
}
.fb-term__cat {
	position: absolute; z-index: 4; left: 12px; bottom: 10px;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11px; letter-spacing: .01em;
	color: #fff; background: rgba(14, 12, 16, .55); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 99px;
}

/* Le disque, glissé derrière la pochette */
.fb-term__record {
	position: absolute; z-index: 1; top: 3%; left: 3%; width: 94%; aspect-ratio: 1; border-radius: 50%;
	transform: translateX(32%); transition: transform .9s var(--ease);
	background:
		conic-gradient(from 20deg, transparent 0 10%, rgba(255, 255, 255, .09) 14%, transparent 20% 60%, rgba(255, 255, 255, .06) 65%, transparent 72%),
		repeating-radial-gradient(circle, #17141A 0 .9%, #0E0C10 .9% 1.6%, #1F1B24 1.6% 1.9%);
	box-shadow: -8px 10px 30px -8px rgba(0, 0, 0, .6);
}
.fb-term__label {
	position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle, #0E0C10 0 6%, transparent 6.5%), var(--accent);
	color: #fff; font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(22px, 2.6vw, 34px); line-height: 1;
}
.fb-term__label::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.fb-term__credit { margin: 0; width: 128%; text-align: left; }

/* Survol : couleurs, disque qui sort */
.fb-term.has-art:hover .fb-term__sleeve img { filter: none; transform: scale(1.06) translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px)); }
.fb-term.has-art:hover .fb-term__sleeve::before { opacity: .12; }
.fb-term.has-art:hover .fb-term__shine { opacity: .8; }
.fb-term.has-art:hover .fb-term__record { transform: translateX(48%); }

@media (prefers-reduced-motion: no-preference) {
	.fb-term__label { animation: fb-spin 9s linear infinite; }
	.fb-term.has-art:hover .fb-term__label, .fb-beat .fb-term__label { animation-duration: 1.8s; }   /* 33 tours */
	.fb-term__art { animation: fb-art-in 1s var(--ease) backwards .15s; }
	.fb-term__record { animation: fb-record-out 1.1s var(--ease) backwards .7s; }
}
@keyframes fb-art-in { from { opacity: 0; transform: translateY(26px) rotate(-3deg); } }
@keyframes fb-record-out { from { transform: translateX(0); } }

:root[data-theme="dark"] .fb-term__record { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), -8px 10px 30px -8px rgba(0, 0, 0, .8); }

@media (max-width: 900px) {
	.fb-term.has-art { grid-template-columns: minmax(0, 1fr); }
	.fb-term__art { grid-column: 1; grid-row: auto; justify-self: start; width: min(78vw, 330px); margin-top: 18px; }
}
@media (hover: none) {   /* sur écran tactile, pas de survol : le disque sort tout seul */
	.fb-term.has-art .fb-term__sleeve img { filter: grayscale(.2) contrast(1.05); }
	.fb-term.has-art .fb-term__sleeve::before { opacity: .35; }
	.fb-term.has-art .fb-term__record { transform: translateX(44%); }
}

/* =========================================================================
   29. Genres en familles : pastilles des sous-genres, page « Tous les genres »
   ========================================================================= */
.fb-chip.is-empty { opacity: .5; }
.fb-chip.is-empty:hover { opacity: .85; }
.fb-chip--all { border-style: dashed; }
.fb-chip--all .fb-arrow { transition: transform .3s var(--ease); }
.fb-chip--all:hover .fb-arrow { transform: translateX(3px); }
.fb-chips__subs {
	list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
	border-top: 1px dashed var(--line);
}
.fb-chips__subs .fb-chip { font-size: 13px; padding-block: 6px; }
.fb-term__k a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.fb-gtree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: 28px 64px; }
.fb-gtree__family {
	position: relative; display: grid; align-content: start; gap: 14px; overflow: hidden;
	border-radius: 14px; background: var(--paper); border: 1px solid var(--line);
	padding: 0 0 20px; transition: border-color .3s ease, transform .4s var(--ease);
}
.fb-gtree__family:hover { border-color: var(--gc); transform: translateY(-3px); }
.fb-gtree__head {
	position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 4px; min-height: 130px; align-content: end;
	padding: 20px 20px 16px; background: var(--gc); color: var(--gc-ink); text-decoration: none;
}
.fb-gtree__name { margin: 0; font-size: clamp(30px, 3.2vw, 44px) !important; line-height: .9; color: inherit; max-width: 70%; }
.fb-gtree__n { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; opacity: .85; }
.fb-gtree__disc {                      /* le disque qui dépasse du bac, à la couleur de la famille */
	position: absolute; z-index: -1; right: -46px; top: 50%; width: 150px; aspect-ratio: 1; border-radius: 50%;
	transform: translateY(-50%) translateX(0); transition: transform .8s var(--ease);
	background:
		radial-gradient(circle, var(--gc) 0 15%, #0E0C10 15.5% 17%, transparent 17.5%),
		repeating-radial-gradient(circle, #17141A 0 1.1%, #0E0C10 1.1% 1.9%, #1D1A21 1.9% 2.2%);
	box-shadow: -8px 8px 24px -8px rgba(0, 0, 0, .5);
}
.fb-gtree__family:hover .fb-gtree__disc { transform: translateY(-50%) translateX(-22px) rotate(140deg); }
.fb-gtree__intro { margin: 0; padding-inline: 20px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.fb-gtree__subs { list-style: none; margin: 0; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.fb-gtree__subs .fb-chip { font-size: 12.5px; padding-block: 5px; }
@media (max-width: 1000px) { .fb-gtree { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fb-gtree { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
	.fb-chips__subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
	.fb-chips__subs .fb-chip { white-space: nowrap; }
}
/* La page « Tous les genres » sort de la colonne de texte, et garde ses propres couleurs. */
.fb-gtree { width: min(1240px, 100vw - 2 * clamp(16px, 4vw, 40px)); margin-inline: calc(50% - min(1240px, 100vw - 2 * clamp(16px, 4vw, 40px)) / 2) !important; max-width: none !important; }
.fb-gtree a.fb-chip, [data-theme="dark"] .fb-gtree a.fb-chip { color: var(--ink); text-decoration: none; }
.fb-gtree a.fb-gtree__head, [data-theme="dark"] .fb-gtree a.fb-gtree__head { color: var(--gc-ink); text-decoration: none; }
.fb-gtree .fb-gtree__name { color: var(--gc-ink) !important; font-size: clamp(30px, 3.2vw, 44px) !important; }
.fb-gtree__subs li, .fb-gtree li { margin: 0 !important; }

/* =========================================================================
   27. Confort sur téléphone
   Tout ce qui suit ne touche que les écrans tactiles ou étroits :
   zones de doigt d'au moins 44 px, platine qui ne cache plus le texte,
   Premier Sillon qui défile au doigt, textes de service plus lisibles.
   ========================================================================= */
@media (hover: none) {
	a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
@media (max-width: 700px) {
	/* La platine flottante passe à droite, sous le pouce, et laisse de la place en bas de page */
	.fb-sound { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); transition: transform .45s var(--ease), opacity .3s ease; }
	.fb-sound__btn { min-height: 44px; transition: padding .35s var(--ease), background .3s ease, color .3s ease; }
	.fb-sound__disc { width: 32px; height: 32px; }
	/* Elle se replie sur le disque quand on descend, et se déplie quand on remonte */
	body:has(.fb-header.is-hidden) .fb-sound__btn { padding-right: 5px; gap: 0; }
	body:has(.fb-header.is-hidden) .fb-sound__state { max-width: 0; opacity: 0; }
	body.fb-menu-open .fb-sound { opacity: 0; pointer-events: none; }
	/* Contour rose : on voit qu'on peut toucher, même en mode nuit */
	.fb-sound__btn { border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); }
	/* Tant que le son est coupé, un triangle « lecture » au centre du disque */
	.fb-sound[data-state="off"] .fb-sound__disc::before, .fb-sound[data-state="waiting"] .fb-sound__disc::before {
		content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; z-index: 1;
		background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 2.6v4.8L7.6 5z' fill='%23fff'/%3E%3C/svg%3E") center / 10px no-repeat;
	}
	.fb-sound[data-state="off"] .fb-sound__disc::after, .fb-sound[data-state="waiting"] .fb-sound__disc::after { display: none; }
	/* En attente d'un toucher : on le dit clairement */
	.fb-sound[data-state="waiting"] .fb-sound__state, .fb-sound[data-state="off"] .fb-sound__state { font-weight: 600; }
	.fb-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

	/* Le ruban du haut tient sur une ligne */
	.fb-ribbon { padding-block: 4px !important; padding-left: max(12px, env(safe-area-inset-left)) !important; }
	.fb-ribbon p { flex-wrap: nowrap !important; gap: 8px !important; font-size: 13.5px; white-space: nowrap; min-width: 0; overflow: hidden; }
	.fb-ribbon strong { font-size: 14px; }
	.fb-ribbon p a ~ a { display: none; }
	.fb-ribbon a { display: inline-flex; align-items: center; min-height: 40px; }
	.fb-ribbon__close { min-width: 44px; min-height: 44px; font-size: 22px; }

	/* Premier Sillon à l'accueil : un carrousel au doigt plutôt qu'une longue colonne */
	.fb-ps__row {
		grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 78%;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding: 0 clamp(16px, 4vw, 40px) 12px;
		scroll-padding-inline: clamp(16px, 4vw, 40px); scrollbar-width: none;
	}
	.fb-ps__row::-webkit-scrollbar { display: none; }
	.fb-ps__row > * { scroll-snap-align: start; }
	.fb-shelf__row { grid-auto-columns: minmax(220px, 72%); overscroll-behavior-x: contain; }

	/* Zones de doigt : 44 px minimum */
	.fb-chip { min-height: 44px; }
	.fb-pagination a, .fb-pagination .current, .fb-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.fb-footer__links { gap: 0; }
	.fb-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
	.fb-footer__legal a, .fb-footer p a { display: inline-block; padding-block: 6px; }
	.fb-share__list a, .fb-share__list button { min-height: 44px; }
	.fb-more a, a.fb-more { min-height: 44px; }
	.fb-tabs a { padding-block: 8px; }
	.fb-spine a { display: inline-block; padding-block: 6px; }
	.bbp-breadcrumb a { display: inline-block; padding-block: 8px; }
	input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: none; }
	input[type="submit"], button[type="submit"], .wp-block-button__link, .fb-btn { min-height: 48px; }
	.comment-form textarea, .bbp-the-content, #bbp_reply_content, #bbp_topic_content { min-height: 140px; height: 160px; }

	/* Textes de service un peu plus grands */
	.fb-grid .fb-meta, .fb-meta, .fb-meta__rub, .fb-meta__genre, .fb-card__meta time { font-size: 12.5px; }
	.fb-footer__rhythm, .fb-footer__k { font-size: 13px; }
	.fb-credit, .fb-footer__stage { font-size: 12px; line-height: 1.5; }
	label, .comment-form label { font-size: 13.5px; }
	.fb-chip__n { font-size: 12px; }

	/* Lecture : un peu plus d'air et des césures propres sur les grands titres */
	.fb-content { font-size: 18px; line-height: 1.65; }
	.fb-hero__title, .fb-page__title, .fb-section-title, .fb-card__title { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
}

/* =========================================================================
   30. Accueil « page produit » : manifeste, à la une plein écran, tuiles.
   Les animations suivent le défilement (variable --p, de 0 à 1, posée par
   motion.js). Sans JavaScript ou avec « réduire les animations », --p vaut 1
   et les sections s'affichent à plat.
   Inspiration : pages produit d'Apple ; 21st.dev « Reading Text Reveal »,
   « Scroll Media Expansion », « Bento Grid ».
   ========================================================================= */
.fb-manifeste, .fb-une { --p: 1; --e: 1; --t: 1; position: relative; }
.fb-manifeste__stick, .fb-une__stick { position: relative; overflow: hidden; }
.fb-scrolly .fb-manifeste { height: 260vh; }
.fb-scrolly .fb-une { height: 230vh; }
.fb-scrolly .fb-manifeste__stick, .fb-scrolly .fb-une__stick { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* Manifeste ----------------------------------------------------------- */
.fb-manifeste { margin-block: clamp(40px, 8vw, 100px) 0; }
.fb-manifeste__stick {
	display: grid; align-content: center; gap: clamp(18px, 2.6vh, 32px);
	padding: clamp(90px, 13vh, 130px) max(clamp(16px, 4vw, 40px), calc((100vw - 1240px) / 2));
}
.fb-manifeste__disc {
	position: absolute; z-index: -1; right: -14vw; top: 50%; width: min(96vh, 78vw); aspect-ratio: 1;
	transform: translateY(-50%) translateX(calc((1 - var(--p)) * 12vw)) rotate(calc(var(--p) * 600deg)) scale(calc(.72 + var(--p) * .3));
	opacity: calc(.25 + var(--p) * .45);
	filter: drop-shadow(-30px 40px 60px rgba(0, 0, 0, .45));
}
.fb-manifeste__vinyl { width: 100%; height: 100%; }
.fb-manifeste__vinyl .fb-vinyl__spin { animation: none !important; }
.fb-manifeste__k {
	margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase; color: var(--muted);
}
.fb-manifeste__text {
	margin: 0; max-width: 25ch;
	font-family: var(--font-display); font-weight: 900; font-stretch: 62%; text-transform: uppercase;
	font-size: min(5vw, 8.4vh, 84px); line-height: .94; letter-spacing: -.005em; text-wrap: pretty;
}
.fb-mw {
	/* --l : 0 (éteint) → 1 (allumé). Le front de lumière couvre ~4 mots, comme un dégradé qui avance. */
	--l: clamp(0, (var(--p) * 1.18 * (var(--n) + 4) - var(--i)) / 4, 1);
	display: inline-block;
	opacity: calc(.14 + .86 * var(--l));
	transform: translateY(calc((1 - var(--l)) * .08em));
	filter: blur(calc((1 - var(--l)) * 1.5px));
}
.fb-mw.is-accent { color: var(--accent); }
.fb-mw.is-ps { color: var(--ps); }
:root[data-theme="light"] .fb-mw.is-ps, :root:not([data-theme]) .fb-mw.is-ps { color: #5F7A00; }
.fb-mw.is-strong { font-style: italic; }
.fb-manifeste__stats {
	list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 980px;
	opacity: clamp(0, (var(--p) - .72) * 5, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - .72) * 5, 1)) * 30px));
}
.fb-manifeste__stats li { display: grid; gap: 4px; margin: 0; }
.fb-manifeste__num { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: min(4.6vw, 7vh, 72px); line-height: .9; }
.fb-manifeste__lbl { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; color: var(--muted); }

/* À la une plein écran ---------------------------------------------------- */
.fb-une { margin-block: clamp(30px, 6vw, 80px) 0; }
.fb-une__stick { display: grid; align-items: end; color: #fff; }
.fb-une__media {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; display: block; background: #0E0C10;
	clip-path: inset(calc((1 - var(--e)) * 16vh) calc((1 - var(--e)) * 24vw) round calc((1 - var(--e)) * 40px + 0px));
	will-change: clip-path;
}
.fb-une__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(calc(1.22 - var(--e) * .22));
	filter: brightness(calc(1 - var(--t) * .42)) saturate(calc(.6 + var(--e) * .5));
}
.fb-une__media::after {           /* voile coloré du genre, en bas, pour lire le texte */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--gc) 35%, rgba(10, 8, 12, .85)) 100%);
	opacity: var(--t);
}
.fb-une__k {
	position: absolute; z-index: 2; top: clamp(80px, 12vh, 120px); left: max(clamp(16px, 4vw, 40px), calc((100vw - 1240px) / 2));
	margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; text-transform: lowercase;
	color: var(--ink); opacity: calc(1 - var(--e));
}
.fb-une__k span { color: var(--accent); margin-right: 6px; }
.fb-une__body {
	position: relative; z-index: 2; display: grid; gap: 16px; max-width: min(1180px, 100%);
	padding: 0 max(clamp(16px, 4vw, 40px), calc((100vw - 1240px) / 2)) clamp(48px, 9vh, 96px);
	opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 60px));
}
.fb-une__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; }
.fb-une__meta span { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.fb-une__meta .fb-une__genre { background: var(--gc); color: var(--gc-ink, #fff); }
.fb-une__title { margin: 0; max-width: 18ch; font-size: min(6.4vw, 10vh, 100px) !important; line-height: .9; color: #fff; text-wrap: balance; }
.fb-une__sub {                        /* l'accroche, après le « : » du titre */
	display: block; margin-top: .3em; font-family: var(--font-body, Newsreader, serif); font-weight: 400; font-style: italic;
	text-transform: none; font-stretch: normal; letter-spacing: 0; font-size: .42em; line-height: 1.1; color: rgba(255, 255, 255, .92);
}
.fb-une__title a { color: inherit; text-decoration: none; }
.fb-une__chapo { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 56ch; color: rgba(255, 255, 255, .88); }
.fb-une__cta { margin: 6px 0 0; }
.fb-une__cta .fb-btn { background: #fff; color: #121014; }
.fb-une__credit { position: absolute; z-index: 2; right: max(clamp(16px, 4vw, 40px), calc((100vw - 1240px) / 2)); bottom: 18px; opacity: calc(var(--t) * .8); }
.fb-une__credit, .fb-une__credit a { color: rgba(255, 255, 255, .75) !important; }
.fb-une__credit .fb-credit { margin: 0; }

/* Tuiles des rubriques ---------------------------------------------------- */
.fb-bento {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 240px);
	gap: clamp(10px, 1.2vw, 16px); margin-block: 28px clamp(48px, 7vw, 88px);
}
.fb-bento__tile {
	position: relative; isolation: isolate; overflow: hidden; border-radius: 26px;
	display: grid; align-content: end; gap: 4px; padding: clamp(18px, 2vw, 26px);
	background: var(--paper); color: #fff; text-decoration: none;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
	transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.fb-bento__tile:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.fb-bento__tile.is-ps { grid-column: span 2; grid-row: span 2; }
.fb-bento__tile.is-wide, .fb-bento__tile.is-genres { grid-column: span 2; }
.fb-bento__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease), filter .8s ease; filter: saturate(.85); }
.fb-bento__tile:hover .fb-bento__img { transform: scale(1.12); filter: saturate(1.1); }
.fb-bento__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 12, 0) 30%, rgba(10, 8, 12, .82) 100%); }
.fb-bento__n { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; opacity: .85; }
.fb-bento__name { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 48px); line-height: .9; }
.fb-bento__desc { font-size: 15.5px; line-height: 1.4; opacity: .88; max-width: 34ch; }
.fb-bento__go {
	position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); font-size: 18px;
	transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform .5s var(--ease), opacity .3s ease;
}
.fb-bento__tile:hover .fb-bento__go { transform: none; opacity: 1; }
.fb-bento__tile.is-ps { box-shadow: 0 0 0 2px var(--ps) inset; }
.fb-bento__tile.is-ps .fb-bento__name { color: var(--ps); font-size: clamp(44px, 5.4vw, 88px); }
.fb-bento__tile.is-ps .fb-bento__go { background: var(--ps); color: var(--ps-ink); }
.fb-bento__tile.is-genres { color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
.fb-bento__dots { position: absolute; top: 22px; left: 22px; right: 70px; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-bento__dots span { width: 26px; height: 26px; border-radius: 50%; background: var(--gc); transition: transform .5s var(--ease); }
.fb-bento__tile.is-genres:hover .fb-bento__dots span { transform: translateY(-4px); }
.fb-bento__tile.is-genres:hover .fb-bento__dots span:nth-child(odd) { transform: translateY(4px); }
.fb-bento__tile.is-genres .fb-bento__go { background: var(--ink); color: var(--bg); }

@media (max-width: 900px) {
	.fb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
	.fb-manifeste__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.fb-scrolly .fb-manifeste { height: 220vh; }
	.fb-scrolly .fb-une { height: 190vh; }
	.fb-manifeste__disc { right: auto; left: 30%; width: 120vw; opacity: calc(.12 + var(--p) * .18); }
	.fb-manifeste__text { font-size: min(9.4vw, 5.6vh, 52px); }
	.fb-manifeste__num { font-size: 40px; }
	.fb-une__media { clip-path: inset(calc((1 - var(--e)) * 14vh) calc((1 - var(--e)) * 7vw) round calc((1 - var(--e)) * 28px)); }
	.fb-bento__tile.is-ps { grid-row: span 2; }
	.fb-bento__name { font-size: 28px; }
	.fb-bento__desc { font-size: 14px; }
}
.fb-manifeste__stick { isolation: isolate; }
.fb-manifeste__stats, .fb-manifeste__text { position: relative; z-index: 1; }
@media (max-width: 700px) {
	.fb-une__body { padding-bottom: 76px; }
	.fb-une__title { font-size: min(11vw, 6.4vh, 52px) !important; }
	.fb-une__credit { left: 16px; right: 16px; bottom: 12px; }
	.fb-une__credit .fb-credit { font-size: 12px; line-height: 1.4; }
}

/* Titre en deux temps : l'accroche après le « : » (cartes, pages d'article) */
.fb-title-sub {
	display: block; margin-top: .25em;
	font-family: var(--font-body); font-weight: 400; font-style: italic; font-stretch: normal;
	text-transform: none; letter-spacing: 0; line-height: 1.15; font-size: .5em; opacity: .9;
}
.fb-card__title .fb-title-sub { font-size: .56em; }
.fb-hero__title .fb-title-sub { font-size: .36em; margin-top: .45em; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
	.fb-splitted .fb-title-sub { transition: opacity 1s var(--ease-out) .35s, transform 1.2s var(--ease-out) .35s, filter 1s var(--ease-out) .35s; }
	.fb-splitted:not(.is-in) .fb-title-sub { opacity: 0; transform: translateY(14px); filter: blur(8px); }
}
.fb-cover__genre.is-long { font-size: 9.6cqw; }
.fb-cover__genre.is-xlong { font-size: 8cqw; }

/* =========================================================================
   31. Rainure : le grand titre, une largeur par lettre (façon affiche).
   ========================================================================= */
.fb-mast__l:nth-child(1) { --w: 70%; }  /* R */
.fb-mast__l:nth-child(2) { --w: 62%; }  /* A */
.fb-mast__l:nth-child(3) { --w: 50%; }  /* I */
.fb-mast__l:nth-child(4) { --w: 60%; }  /* N */
.fb-mast__l:nth-child(5) { --w: 92%; }  /* U, la plus large : la rainure */
.fb-mast__l:nth-child(6) { --w: 66%; }  /* R */
.fb-mast__l:nth-child(7) { --w: 76%; }  /* E */
.fb-mast__side .fb-catalog { white-space: nowrap; }

/* =========================================================================
   32. La face de la semaine : la lettre par e-mail (formulaire Jetpack).
   ========================================================================= */
.fb-news {
	position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
	background: var(--paper); border-radius: 14px; padding: clamp(24px, 5vw, 56px); margin: clamp(48px, 7vw, 96px) 0;
}
.fb-news--article { grid-template-columns: 1fr; margin: 40px 0 0; padding: clamp(22px, 4vw, 36px); }
.fb-news--article .fb-news__disc { position: absolute; right: -60px; top: -60px; opacity: .5; }
.fb-news__disc {
	width: clamp(120px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, var(--accent) 0 21%, transparent 21.5%), repeating-radial-gradient(circle, #1d1a21 0 2px, #141216 2px 5px);
	display: grid; place-items: center; box-shadow: var(--shadow);
}
.fb-news__disc span { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 3vw, 38px); color: #fff; line-height: 1; }
@media (prefers-reduced-motion: no-preference) { .fb-news__disc { animation: fb-spin 9s linear infinite; } }
.fb-news__body { position: relative; max-width: 620px; }
.fb-news__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 6vw, 72px) !important; line-height: .9; margin: 10px 0 12px; }
.fb-news--article .fb-news__title { font-size: clamp(30px, 5vw, 44px) !important; }
.fb-news__text { font-size: 18px; color: var(--muted); margin: 0 0 18px; }
.fb-news__legal { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.fb-news__legal a { color: inherit; }
.fb-news__admin { font-size: 13.5px; color: var(--accent); margin: 10px 0 0; }

/* Le formulaire (aperçu local et formulaire Jetpack en ligne) : champ + bouton sur une ligne. */
.fb-news__preview, .fb-news .wp-block-jetpack-subscriptions form, .fb-news .wp-block-jetpack-subscriptions__form {
	display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important;
}
.fb-news .wp-block-jetpack-subscriptions p, .fb-news .wp-block-jetpack-subscriptions__form-elements { margin: 0 !important; display: contents; }
.fb-news input[type="email"] {
	flex: 1 1 240px; min-width: 0; width: auto !important; background: var(--bg) !important; color: var(--ink) !important;
	border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 14px 20px !important; font: inherit !important; font-size: 17px !important; margin: 0 !important;
}
.fb-news input[type="email"]:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.fb-news button, .fb-news .wp-block-button__link {
	flex: 0 0 auto; background: var(--accent) !important; color: var(--accent-ink) !important; border: 0 !important; border-radius: 999px !important;
	padding: 14px 24px !important; font-family: var(--font-mono) !important; font-stretch: var(--label-stretch); font-size: 14px !important; font-weight: 600 !important;
	text-transform: lowercase; cursor: pointer; margin: 0 !important; width: auto !important;
}
.fb-news button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
	.fb-news { grid-template-columns: 1fr; }
	.fb-news--home .fb-news__disc { position: absolute; right: -50px; top: -50px; width: 150px; opacity: .45; }
	.fb-news button { flex: 1 1 100%; }
}

/* =========================================================================
   33. Vendredi, nouveautés : la rubrique rangée par vendredi de sortie.
   ========================================================================= */
.fb-fridays { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: clamp(24px, 4vw, 40px); }
.fb-friday__head { display: grid; gap: 6px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.fb-friday__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 5vw, 56px) !important; line-height: .9; margin: 0; }
.fb-friday__n { margin: 0; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; color: var(--muted); }
.fb-shelf__friday {
	justify-self: start; width: fit-content;
	display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 7px 14px; border-radius: 12px; background: var(--paper); line-height: 1.4;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12.5px; text-transform: lowercase; color: var(--ink);
}
.fb-shelf__friday-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .fb-shelf__friday-dot { animation: fb-blink 1.6s ease-in-out infinite; } }
@keyframes fb-blink { 50% { opacity: .25; } }

/* =========================================================================
   34. La playlist Rainure sur Deezer (bouton, visible une fois le lien saisi).
   ========================================================================= */
.wp-block-faceb-deezer-playlist { margin: 18px 0 0; }
.fb-deezer {
	display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px;
	background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .3s var(--ease-out);
}
.fb-deezer:hover, .fb-deezer:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.fb-deezer__disc { width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--accent) 0 26%, transparent 27%), repeating-radial-gradient(circle, #1d1a21 0 2px, #141216 2px 4px); }
@media (prefers-reduced-motion: no-preference) { .fb-deezer:hover .fb-deezer__disc { animation: fb-spin 2s linear infinite; } }
.fb-deezer__txt { display: grid; line-height: 1.2; }
.fb-deezer__txt strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 17px; }
.fb-deezer__txt small { white-space: nowrap; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11.5px; text-transform: lowercase; color: var(--muted); }

/* =========================================================================
   35. Premier Sillon : la carte des scènes (SVG dessiné par le site).
   ========================================================================= */
.fb-carte__intro { color: var(--muted); font-size: 18px; max-width: 60ch; margin: 10px 0 0; }
.fb-carte__wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 24px; }
.fb-carte__map { width: 100%; height: auto; display: block; background: var(--paper); border-radius: 14px; }
.fb-carte__n { fill: color-mix(in srgb, var(--ink) 5%, var(--paper)); stroke: var(--line); stroke-width: .8; }
.fb-carte__ch { fill: color-mix(in srgb, var(--ink) 8%, var(--paper)); stroke: var(--line); stroke-width: .8; }
.fb-carte__fr { fill: color-mix(in srgb, var(--ink) 13%, var(--paper)); stroke: color-mix(in srgb, var(--ink) 35%, var(--paper)); stroke-width: 1; }
.fb-carte__dot { fill: #D4F04A; stroke: var(--bg); stroke-width: 2; transition: r .3s var(--ease-out); }
.fb-carte__pulse { fill: #D4F04A; opacity: .35; transform-box: fill-box; transform-origin: center; }
.fb-carte__pin text { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; text-transform: lowercase; pointer-events: none; }
.fb-carte__pin:hover .fb-carte__dot, .fb-carte__pin:focus-visible .fb-carte__dot { fill: var(--accent); }
.fb-carte__pin:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
	.fb-carte__pulse { animation: fb-carte-pulse 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * .3s); }
}
@keyframes fb-carte-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.8); opacity: 0; } }
.fb-carte__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fb-carte__scene { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); transition: border-color .3s ease, background .3s ease; }
.fb-carte__scene:target { border-color: #D4F04A; background: color-mix(in srgb, #D4F04A 8%, transparent); }
.fb-carte__scene h3 { margin: 0 0 8px; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; font-weight: 500; text-transform: lowercase; color: var(--muted); }
.fb-carte__scene ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fb-carte__scene a { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; }
.fb-carte__scene a:hover strong { color: var(--accent); }
.fb-carte__scene strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; }
.fb-carte__scene small { font-size: 14px; color: var(--muted); }
.fb-carte__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); flex: none; align-self: center; }
.fb-carte__credit { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 860px) { .fb-carte__wrap { grid-template-columns: 1fr; } }

/* =========================================================================
   36. Modèles d'articles : interview en 5 questions, carte blanche.
   ========================================================================= */
.fb-itw__intro, .fb-cb__welcome { font-size: 1.15em; color: var(--muted); font-style: italic; }
.fb-itw__q { display: flex; gap: 14px; align-items: baseline; margin-top: 2em !important; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1; }
.fb-itw__q span { flex: none; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; font-weight: 500; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; transform: translateY(-3px); }
.fb-cb__bio { margin-top: 2.4em; }
@media (max-width: 640px) {
	.fb-carte__pin text { font-size: 21px; stroke-width: 6px; }
	.fb-carte__pin text.is-left { transform: translate(14px, 26px); }
	.fb-carte__dot, .fb-carte__pulse { r: 11px; }
	.fb-carte__map { margin-inline: -8px; width: calc(100% + 16px); border-radius: 10px; }
}

/* =========================================================================
   37. La playlist Rainure : les disques qui roulent sur une ligne inclinée
       (inspiration 21st.dev « 3D CD Disc Carousel », refait à la main).
   ========================================================================= */
.fb-pl {
	--roll: 0; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 56px); align-items: center;
	background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, #A238FF 22%, transparent), transparent 60%), var(--paper);
	border-radius: 14px; padding: clamp(24px, 5vw, 56px); margin: clamp(48px, 7vw, 96px) 0;
}
.fb-pl__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6.5vw, 84px) !important; line-height: .88; margin: 10px 0 14px; }
.fb-pl__intro { color: var(--muted); font-size: 18px; margin: 0 0 20px; max-width: 42ch; }
.fb-pl__btn { display: inline-flex; gap: 8px; }
.fb-pl__deck { --roll: inherit; position: relative; min-width: 0; }
.fb-pl__track {
	list-style: none; margin: 0; padding: 20px 18px 70px; scroll-padding-inline: 18px; display: flex; gap: clamp(10px, 2vw, 22px);
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; user-select: none;
	mask-image: linear-gradient(90deg, transparent, #000 18px, #000 88%, transparent);
}
.fb-pl__track::-webkit-scrollbar { display: none; }
.fb-pl__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.fb-pl__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.fb-pl__item { flex: 0 0 clamp(150px, 17vw, 210px); scroll-snap-align: start; transform: translateY(calc(var(--i) * 7px)); }
.fb-pl__disc { display: grid; gap: 12px; color: var(--ink); text-decoration: none; -webkit-user-drag: none; }
.fb-pl__disc::before {
	content: ""; grid-area: 1 / 1; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9);
	background:
		radial-gradient(circle, transparent 0 36%, rgba(255,255,255,.07) 36.5% 37%, transparent 37.5%),
		conic-gradient(from 30deg, transparent 0 40deg, rgba(255,255,255,.09) 55deg, transparent 70deg 220deg, rgba(255,255,255,.06) 235deg, transparent 250deg),
		repeating-radial-gradient(circle, #1d1a21 0 2px, #141216 2px 4px);
}
.fb-pl__label {
	grid-area: 1 / 1; place-self: center; width: 44%; aspect-ratio: 1; border-radius: 50%;
	background: var(--gc) center / cover; filter: grayscale(.25) contrast(1.05);
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gc) 80%, #000), 0 0 0 1px rgba(255,255,255,.08);
	transform: rotate(calc(var(--roll) * .9deg + var(--i) * 37deg));
	transition: transform .5s var(--ease-out);
}
.fb-pl__label::after { content: ""; position: absolute; inset: 46%; border-radius: 50%; background: var(--paper); }
.fb-pl__label { position: relative; }
.fb-pl__disc:hover .fb-pl__label, .fb-pl__disc:focus-visible .fb-pl__label { filter: none; }
.fb-pl__disc:focus-visible { outline: none; }
.fb-pl__disc:focus-visible::before { box-shadow: 0 0 0 3px var(--accent); }
.fb-pl__name { display: grid; gap: 2px; line-height: 1.15; }
.fb-pl__name strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 18px; }
.fb-pl__name small { font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11px; text-transform: lowercase; color: var(--muted); }
.fb-pl__hint { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 11.5px; text-transform: lowercase; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
	.fb-pl__disc:hover::before { animation: fb-spin 3s linear infinite; }
}
@media (max-width: 860px) {
	.fb-pl { grid-template-columns: 1fr; }
	.fb-pl__item { flex-basis: 150px; }
}

/* =========================================================================
   38. Le mur des visages : les photos du catalogue en perspective, qui
       défilent (inspiration 21st.dev « 3D Marquee », refait à la main).
   ========================================================================= */
.fb-mur__intro { color: var(--muted); font-size: 18px; max-width: 60ch; margin: 10px 0 0; }
.fb-mur__stage {
	position: relative; height: clamp(420px, 52vw, 640px); margin: 28px calc(50% - 50vw) 0; overflow: hidden; perspective: 1400px;
	mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-composite: intersect; -webkit-mask-composite: source-in;
}
.fb-mur__plane {
	position: absolute; left: 50%; top: 50%; width: min(1800px, 135vw); display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.6vw, 22px);
	transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg) scale(1.05); transform-style: preserve-3d;
}
.fb-mur__col { display: grid; gap: clamp(10px, 1.6vw, 22px); align-content: start; height: 1600px; }
.fb-mur__run { display: grid; gap: clamp(10px, 1.6vw, 22px); }
.fb-mur__tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--gc); box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); }
.fb-mur__tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: .9; transition: filter .5s var(--ease-out), opacity .5s ease, mix-blend-mode .5s; }
.fb-mur__tile span {
	position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(18,16,21,.82); color: #fff;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s var(--ease-out);
}
.fb-mur__stage:hover .fb-mur__run { animation-play-state: paused; }
.fb-mur__tile:hover img { filter: none; mix-blend-mode: normal; opacity: 1; }
.fb-mur__tile:hover span { opacity: 1; transform: none; }
.fb-mur__stage { pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
	.fb-mur__col .fb-mur__run { animation: fb-mur-up 70s linear infinite; }
	.fb-mur__col:nth-child(even) .fb-mur__run { animation-name: fb-mur-down; animation-duration: 85s; }
}
@keyframes fb-mur-up { from { transform: translateY(0); } to { transform: translateY(calc(-100% - clamp(10px, 1.6vw, 22px))); } }
@keyframes fb-mur-down { from { transform: translateY(calc(-100% - clamp(10px, 1.6vw, 22px))); } to { transform: translateY(0); } }
.fb-mur__credits { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.fb-mur__credits summary { cursor: pointer; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; text-transform: lowercase; }
.fb-mur__credits ul { columns: 2 320px; gap: 28px; padding-left: 18px; margin: 12px 0 0; }
.fb-mur__credits li { break-inside: avoid; margin-bottom: 4px; }
.fb-mur__credits a { color: var(--ink); }
@media (max-width: 640px) { .fb-mur__plane { width: 260vw; } }

/* =========================================================================
   39. Pages de genre : trois photos d'artistes en pochettes éventaillées.
   ========================================================================= */
.fb-term--genre { position: relative; }
.fb-term__photos { position: absolute; right: clamp(120px, 19vw, 300px); top: 50%; width: clamp(130px, 15vw, 210px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.fb-term__photo {
	position: absolute; inset: 0; border-radius: 6px; overflow: hidden; pointer-events: auto; background: var(--gc);
	box-shadow: 0 26px 40px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
	transform: translate(calc(var(--k) * -34%), calc(var(--k) * 6%)) rotate(calc(-6deg + var(--k) * -7deg));
	transition: transform .6s var(--ease-out);
}
.fb-term__photo:nth-child(1) { z-index: 3; } .fb-term__photo:nth-child(2) { z-index: 2; } .fb-term__photo:nth-child(3) { z-index: 1; }
.fb-term__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; }
.fb-term__photo:hover { transform: translate(calc(var(--k) * -34%), calc(var(--k) * 6% - 8%)) rotate(calc(-3deg + var(--k) * -7deg)); }
.fb-term__photo:hover img { filter: none; mix-blend-mode: normal; }
@media (max-width: 860px) {
	.fb-term__photos { right: 18%; width: 110px; top: auto; bottom: 18px; transform: none; }
}
@media (max-width: 520px) { .fb-term__photos { display: none; } }

/* =========================================================================
   40. Menu du téléphone : un écran plein, avec le logo et une croix en haut.
   Rubriques en lignes compactes, liens du label en pastilles, puis
   « Proposer ma musique » et le mode nuit. Aucun geste ne le ferme.
   ========================================================================= */
.fb-menu-btn { display: none; }
@media (max-width: 960px) {
	.fb-header .fb-nav { display: none !important; }
	.fb-menu-btn {
		display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none; cursor: pointer;
		border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink);
	}
	.fb-menu-btn__bars { display: grid; gap: 5px; width: 18px; }
	.fb-menu-btn__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
	.fb-menu-btn__bars span:last-child { width: 12px; justify-self: end; }
}
.fb-menu {
	position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
	border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
/* L'écran du menu : il recouvre tout, la page dessous ne bouge plus. */
.fb-menu {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000;
	width: 100%; height: 100vh; height: 100dvh;
	display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
	opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .35s var(--ease-out);
}
.fb-menu[hidden] { display: none; }
.fb-menu.is-open { opacity: 1; transform: none; }
body.fb-menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Barre du haut : le logo et la croix, à la place exacte du bouton menu */
.fb-menu__bar {
	flex: none; display: flex; align-items: center; justify-content: space-between;
	min-height: var(--header-h); padding: env(safe-area-inset-top) clamp(16px, 4vw, 40px) 0;
	border-bottom: 1px solid var(--line);
}
.fb-menu__bar .fb-logo { font-size: 27px; }
.fb-menu__close {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink);
	font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
/* Le contenu défile normalement, comme une page */
.fb-menu__body {
	flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	padding: 4px clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom));
}
.fb-menu__body > * { max-width: 560px; margin-inline: auto; }
.fb-menu__kicker {
	margin-top: 20px !important; margin-bottom: 6px !important; font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; font-weight: 560;
	letter-spacing: .005em; text-transform: lowercase; color: var(--muted);
}
.fb-menu ul { list-style: none; margin: 0; padding: 0; }
.fb-menu__rubs { display: grid; gap: 2px; }
.fb-menu__rub {
	display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	min-height: 56px; padding: 8px 12px; margin-inline: -12px; border-radius: 14px; color: inherit; text-decoration: none;
	-webkit-tap-highlight-color: transparent; transition: background .2s ease;
}
.fb-menu__rub:active { background: var(--paper); }
.fb-menu__rub[aria-current="page"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
.fb-menu__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.fb-menu__all .fb-menu__dot { background: var(--ink); }
.fb-menu__r--premier-sillon .fb-menu__dot { background: var(--ps); box-shadow: 0 0 0 2px var(--ink); width: 8px; height: 8px; margin-left: 1px; }
.fb-menu__txt { display: grid; min-width: 0; }
.fb-menu__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.fb-menu__intro {
	font-family: var(--font-body); font-style: italic; font-size: 14.5px; line-height: 1.3; color: var(--muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-menu__n {
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 12px; color: var(--muted);
	padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line);
}
.fb-menu__links { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-menu__links a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 99px;
	border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; font-weight: 560; text-transform: lowercase;
}
.fb-menu__foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.fb-menu__cta {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
	border-radius: 99px; background: var(--ps); color: var(--ps-ink); text-decoration: none;
	font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 14px; font-weight: 600; text-transform: lowercase;
}
.fb-menu .fb-night { width: 48px; height: 48px; }
@media (prefers-reduced-motion: reduce) { .fb-menu { transition: none; transform: none; } }
@media (min-width: 961px) { .fb-menu { display: none !important; } }

/* Onglets des rubriques sur téléphone : une rangée de pastilles qui glisse. */
@media (max-width: 700px) {
	.fb-tabs ul {
		flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
		margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding: 2px clamp(16px, 4vw, 40px) 4px;
	}
	.fb-tabs ul::-webkit-scrollbar { display: none; }
	.fb-tabs li { flex: none; scroll-snap-align: start; }
	.fb-tabs a {
		display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px;
		font-family: var(--font-mono); font-stretch: var(--label-stretch); font-size: 13px; font-weight: 560; text-transform: lowercase;
		color: var(--ink); background: var(--paper);
	}
	.fb-tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
	.fb-tabs .fb-tabs__ps a { border-color: var(--ps) !important; }
}

/* Tablettes et petits ordinateurs : le grand titre de l'accueil passe au-dessus
   de sa phrase, sinon la phrase déborde de l'écran (vu à 1024 px). */
@media (min-width: 701px) and (max-width: 1180px) {
	.fb-mast { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.fb-mast__side { justify-items: start; text-align: left; padding-bottom: 0; }
}

/* Téléphone : le ruban Premier Sillon reste sur l'accueil seulement
   (le menu donne déjà Premier Sillon et « Proposer ma musique » partout). */
@media (max-width: 700px) {
	body:not(.home) .fb-ribbon { display: none; }
}

/* Rangées qui glissent sur le côté (genres, rubriques) : un fondu au bord
   montre qu'il y a d'autres pastilles. Il disparaît quand on arrive au bout. */
.fb-scrollfade { --fl: 0px; --fr: 0px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.fb-scrollfade.has-more-right { --fr: 44px; }
.fb-scrollfade.has-more-left { --fl: 28px; }

/* Le logo du pied de page reste sur une ligne (la règle des zones de doigt des liens le cassait sur téléphone). */
.fb-footer .fb-logo a { display: inline-flex; padding-block: 0; white-space: nowrap; }