/* =====================================================================
   Music Styles List — le bac de disquaire
   Un seul fichier de styles. Mode clair uniquement.
   ===================================================================== */

@font-face { font-family: "Truculenta"; src: url("../fonts/truculenta-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Labrada"; src: url("../fonts/labrada-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Labrada"; src: url("../fonts/labrada-italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
	--carton: #EADCC0;
	--blanc: #FFFDF8;
	--kraft: #DCC8A0;
	--noir: #17141A;
	--sillon: #5C5348;
	--sillon-k: #4B4338;
	--pastille: #FF5A1F;
	--pastille-f: #A32F08;
	--orange-t: #F24E14;
	--filet: #D8CAAE;
	--rub: #FF5A1F;
	--rubt: #17141A;
	--titres: "Truculenta", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--lecture: "Labrada", Georgia, "Times New Roman", serif;
	--o1: 0 10px 24px rgba(40, 20, 40, .14);
	--o2: 0 28px 60px rgba(40, 20, 40, .22);
	--o3: 0 16px 40px rgba(40, 20, 40, .16);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--sillons: repeating-radial-gradient(circle at 50% 50%, #17141A 0 2px, #2A242F 2px 3px);

	/* habillage des blocs d'article */
	--sb-fond: var(--blanc);
	--sb-encre: var(--noir);
	--sb-doux: var(--sillon);
	--sb-filet: var(--filet);
	--sb-accent: var(--pastille-f);
	--sb-accent-fort: #7E2306;
	--sb-accent-2: #8A3A0A;
	--sb-surf: #F6EEDC;
	--sb-surf2: #EFE2C8;
	--sb-rayon: 6px;
	--sb-ombre: 0 2px 4px rgba(40, 20, 40, .06), 0 8px 22px rgba(40, 20, 40, .1);
	--sb-ombre-haut: var(--o3);
	--sb-titre: var(--titres);
	--sb-lecture: var(--lecture);
	--sb-aside-largeur: 320px;
	--sb-haut-collant: 92px;
	--sb-faq-largeur: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--carton); background-image: var(--grain); color: var(--noir); font: 400 18px/1.6 var(--lecture); -webkit-font-smoothing: antialiased; }
.msl-main { flex: 1 0 auto; min-width: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--pastille-f); }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 800; font-stretch: 80%; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
ol, ul { padding: 0; }
:focus-visible { outline: 3px solid var(--pastille); outline-offset: 3px; }
.msl-fond-noir :focus-visible, .msl-pied :focus-visible, .msl-platine :focus-visible { outline-color: #FFB08F; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.msl-evite:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; padding: 12px 18px; background: var(--pastille); color: var(--noir); z-index: 100; border-radius: 999px; font: 700 15px var(--titres); }
.sb-cadre { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.msl-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------- fonds de section ------------------------- */
.msl-fond-carton { background-color: var(--carton); background-image: var(--grain); }
.msl-fond-kraft { background-color: var(--kraft); background-image: var(--grain); --sillon: var(--sillon-k); }
.msl-fond-blanc { background: var(--blanc); }
.msl-fond-noir { background: var(--noir); color: #F4ECDD; --sillon: #BDB3A3; }
.msl-sec { position: relative; padding: clamp(36px, 4.2vw, 60px) 0; }

/* ------------------------- boutons, onglets, pastilles ------------------------- */
.msl-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--noir); background: var(--noir); color: #fff; font: 700 16px/1 var(--titres); font-stretch: 100%; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.msl-bouton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(40, 20, 40, .22); }
.msl-bouton--p { background: var(--pastille); color: var(--noir); }
.msl-fond-noir .msl-bouton { border-color: #F4ECDD; }

.msl-onglet { display: inline-block; padding: 6px 10px 5px; border-radius: 6px 6px 0 0; background: var(--rub); color: var(--rubt); font: 600 12.5px/1.15 var(--titres); font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.msl-onglet--p { padding: 3px 8px 2px; font-size: 11.5px; }
.msl-onglet--g { font-size: 14px; padding: 8px 14px 7px; }

.msl-pastille { position: absolute; z-index: 4; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--pastille); color: var(--noir); font: 800 16px/1.05 var(--titres); font-stretch: 90%; text-align: center; transform: rotate(9deg); box-shadow: 0 6px 14px rgba(40, 20, 40, .28); }
.msl-pastille--h { position: absolute; width: auto; height: auto; padding: 7px 12px 6px; border-radius: 999px; font: 700 13px/1 var(--titres); font-stretch: 100%; transform: rotate(-3deg); }
.msl-pastille--n1 { top: -16px; right: -12px; }

/* ------------------------- titres de section = onglets d'intercalaire ------------------------- */
.msl-sec-titre { --st: clamp(28px, 2.8vw, 46px); display: flex; margin: 0 0 clamp(22px, 2.6vw, 34px); border-bottom: 4px solid var(--rub, var(--noir)); font-size: var(--st); line-height: 1; }
.msl-tab { display: inline-block; margin-bottom: -4px; padding: .22em .6em .17em; background: var(--rub, var(--noir)); color: var(--rubt, #fff); border-radius: 14px 14px 0 0; }
.msl-tab a { color: inherit; text-decoration: none; }
.msl-tab a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.msl-fond-noir .msl-sec-titre { --rub: var(--pastille); --rubt: var(--noir); }

/* ------------------------- pochettes ------------------------- */
.msl-carte { margin: 0; position: relative; }
.msl-carte-lien { display: block; color: inherit; text-decoration: none; }
.msl-cadre { position: relative; display: block; margin-top: 8px; aspect-ratio: 1; }
.msl-img { position: absolute; inset: 0; z-index: 2; border-radius: 6px; overflow: hidden; background: var(--rub); box-shadow: var(--o1); transition: box-shadow .3s ease, transform .3s ease; }
.msl-img img, .msl-vign { display: block; width: 100%; height: 100%; object-fit: cover; }
.msl-unie { display: grid; align-content: end; width: 100%; height: 100%; padding: 14px; background: radial-gradient(circle at 82% 22%, rgba(255,255,255,.18) 0 18%, transparent 18.5%), var(--rub); color: var(--rubt); }
.msl-unie b { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font: 800 clamp(17px, 1.8vw, 26px)/1.05 var(--titres); font-stretch: 80%; }
.msl-disque { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; background: var(--sillons); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; place-items: center; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.msl-disque i { display: grid; place-items: center; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--rub); color: var(--rubt); font: 700 12px/1.1 var(--titres); font-style: normal; font-stretch: 100%; text-align: center; box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
.msl-cadre .msl-disque { width: 92%; top: 4%; right: 0; }
.msl-cadre .msl-onglet { position: absolute; z-index: 3; left: 0; top: 0; border-radius: 6px 0 6px 0; }
.msl-carte-lien:hover .msl-img, .msl-carte-lien:focus-visible .msl-img { transform: translateY(-4px); box-shadow: var(--o2); }
.msl-carte-lien:hover .msl-disque, .msl-carte-lien:focus-visible .msl-disque { transform: translateX(28px); }
.msl-carte-texte { display: block; padding-top: 12px; }
.msl-carte-titre { font: 600 19px/1.22 var(--lecture); font-stretch: 100%; letter-spacing: 0; margin: 0; text-wrap: pretty; }
.msl-carte-lien:hover .msl-carte-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.msl-heure { display: block; margin-top: 5px; font: 600 13px/1.3 var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-carte-chapo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font: 400 15.5px/1.45 var(--lecture); color: var(--sillon); }
.msl-carte--g .msl-carte-titre { font-size: 26px; line-height: 1.15; }
.msl-carte--h .msl-carte-lien { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 22px; align-items: start; }
.msl-carte--h .msl-carte-texte { padding-top: 6px; }
.msl-carte--b .msl-carte-lien { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 20px; align-items: start; }
.msl-carte--b .msl-carte-texte { padding-top: 6px; }
.msl-carte--s { width: 190px; }
.msl-carte--s .msl-carte-titre { font-size: 17px; }

/* ------------------------- listes de pistes ------------------------- */
.msl-pistes { list-style: none; margin: 0; padding: 0; }
.msl-piste-lien { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--filet); color: var(--noir); text-decoration: none; transition: background .15s; }
.msl-fond-kraft .msl-piste-lien { border-color: #C2AC82; }
.msl-piste-lien:hover { background: rgba(255, 90, 31, .1); }
.msl-piste-n { flex: 0 0 2.4em; font: 700 15px/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; color: var(--sillon); }
.msl-piste-vign { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 10px rgba(40, 20, 40, .18); background: var(--rub); }
.msl-piste-vign .msl-unie { padding: 6px; }
.msl-piste-vign .msl-unie b { font-size: 10px; -webkit-line-clamp: 3; }
.msl-piste-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.msl-piste-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 19px/1.2 var(--lecture); }
.msl-piste-lien:hover .msl-piste-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.msl-piste-chapo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 15.5px/1.45 var(--lecture); color: var(--sillon); }
.msl-piste-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font: 600 13px/1.2 var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-piste-duree { flex: 0 0 auto; font: 700 15px/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; color: var(--sillon); }

/* ------------------------- bandeau « sur la platine » ------------------------- */
.msl-platine { background: var(--noir); color: #EFE6D2; font: 600 13px/1 var(--titres); font-stretch: 100%; }
.msl-platine-in { width: min(1280px, 100% - 2.5rem); margin: 0 auto; display: flex; align-items: center; gap: 12px; height: 36px; }
.msl-platine-disque { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--pastille) 0 24%, transparent 25%), repeating-radial-gradient(circle, #3a3340 0 1.5px, #1f1a24 1.5px 3px); animation: msl-tourne 7s linear infinite; }
.msl-platine-lib { color: var(--pastille); white-space: nowrap; }
.msl-platine-titre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-decoration: none; }
.msl-platine-titre:hover { text-decoration: underline; }
.msl-platine-maj, .msl-platine-date { white-space: nowrap; color: #CFC6B6; }
.msl-platine-date { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
@keyframes msl-tourne { to { transform: rotate(360deg); } }

/* ------------------------- en-tête collant ------------------------- */
.msl-entete { position: sticky; top: 0; z-index: 50; background: var(--blanc); border-bottom: 3px solid var(--noir); }
.msl-entete-in { width: min(1280px, 100% - 2.5rem); margin: 0 auto; display: flex; align-items: flex-end; gap: 22px; height: 78px; transition: height .2s ease; }
.msl-entete.is-pose .msl-entete-in { height: 58px; }
.msl-h1 { align-self: center; margin: 0; font: inherit; flex: none; }
.msl-logo { display: flex; align-items: center; gap: 10px; color: var(--noir); text-decoration: none; }
.msl-signe { flex: none; width: 51px; height: 35px; }
.msl-logo-mots { display: flex; flex-direction: column; font: 800 19px/.95 var(--titres); font-stretch: 80%; letter-spacing: -.005em; }
.msl-entete.is-pose .msl-logo-mots { flex-direction: row; gap: .26em; font-size: 20px; line-height: 1; }
.msl-entete.is-pose .msl-signe { width: 44px; height: 30px; }
.msl-onglets { flex: 1 1 auto; min-width: 0; align-self: flex-end; }
.msl-onglets ul { display: flex; align-items: flex-end; gap: 3px; margin: 0; padding: 0; list-style: none; }
.msl-ong { display: block; padding: 14px 12px 12px; border-top: 4px solid var(--rub); border-radius: 6px 6px 0 0; color: var(--noir); font: 600 13px/1 var(--titres); font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
.msl-onglets li:nth-child(even) .msl-ong { padding-top: 9px; }
.msl-ong:hover { background: var(--rub); color: var(--rubt); transform: translateY(-3px); }
.msl-ong.is-actif { background: var(--rub); color: var(--rubt); }
.msl-ong--s { display: inline-block; padding: 9px 13px 8px; border: 2px solid var(--noir); border-bottom: 0; background: var(--blanc); color: var(--noir); border-radius: 6px 6px 0 0; font-size: 12.5px; }
.msl-ong--s:hover { background: var(--noir); color: #fff; transform: none; }
.msl-chercher { display: flex; align-self: center; flex: none; border: 2px solid var(--noir); border-radius: 999px; overflow: hidden; background: #fff; }
.msl-chercher input { width: 120px; min-height: 40px; padding: 0 4px 0 16px; border: 0; background: transparent; font: 600 14px var(--titres); font-stretch: 100%; color: var(--noir); transition: width .2s; }
.msl-chercher input:focus { width: 180px; outline: none; }
.msl-chercher:focus-within { box-shadow: 0 0 0 3px var(--pastille); }
.msl-chercher button { width: 42px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.msl-chercher svg, .msl-loupe svg { width: 20px; height: 20px; fill: none; stroke: var(--noir); stroke-width: 2.2; stroke-linecap: round; }
.msl-loupe { display: none; width: 44px; height: 44px; align-self: center; margin-left: auto; place-items: center; border-radius: 50%; border: 2px solid var(--noir); }

@media (max-width: 1279px) {
	.msl-chercher { display: none; }
	.msl-loupe { display: grid; }
}
@media (max-width: 1099px) {
	.msl-entete-in { flex-wrap: wrap; align-items: center; height: auto; gap: 0 14px; }
	.msl-entete.is-pose .msl-entete-in { height: auto; }
	.msl-h1 { height: 56px; display: flex; align-items: center; }
	.msl-loupe { margin-left: auto; }
	.msl-logo-mots, .msl-entete.is-pose .msl-logo-mots { flex-direction: row; gap: .26em; font-size: 20px; line-height: 1; }
	.msl-onglets { order: 3; flex: 0 0 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -1.25rem; padding-inline: 1.25rem; }
	.msl-onglets::-webkit-scrollbar { display: none; }
	.msl-onglets ul { min-width: max-content; }
	.msl-ong { padding: 15px 12px 12px; min-height: 44px; }
	.msl-onglets li:nth-child(even) .msl-ong { padding-top: 15px; }
	.msl-entete.is-pose .msl-onglets { display: none; }
}

/* ------------- menu sur téléphone : suite visible + « Toutes les rubriques » ------------- */
.msl-mbande { display: contents; }
.msl-toutes { display: none; }
@media (max-width: 1099px) {
	.msl-mbande { order: 3; flex: 0 0 calc(100% + 2.5rem); width: calc(100% + 2.5rem); min-width: 0; box-sizing: border-box; display: flex; align-items: flex-end; position: relative; margin-inline: -1.25rem; }
	.msl-mbande .msl-onglets { order: 0; flex: 1 1 auto; min-width: 0; margin-inline: 0; padding-inline: 1.25rem 44px; }
	.msl-mbande::after { content: ""; position: absolute; top: 0; bottom: 0; right: 112px; width: 44px; background: linear-gradient(to right, rgba(255, 253, 248, 0), var(--blanc)); pointer-events: none; }
	.msl-toutes { display: block; flex: none; width: 112px; align-self: stretch; }
	.msl-toutes-bt { list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: 100%; min-height: 48px; height: 100%; padding: 6px 10px 6px 12px; margin: 0; background: var(--noir); color: #fff; border-radius: 6px 6px 0 0; cursor: pointer; font: 700 11.5px/1.15 var(--titres); font-stretch: 100%; letter-spacing: .05em; text-transform: uppercase; text-align: left; -webkit-tap-highlight-color: transparent; }
	.msl-toutes-bt::-webkit-details-marker { display: none; }
	.msl-toutes-bt::marker { content: ""; }
	.msl-toutes-bt svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
	.msl-toutes[open] .msl-toutes-bt { background: var(--pastille); color: var(--noir); }
	.msl-toutes[open] .msl-toutes-bt svg { transform: rotate(180deg); }
	.msl-toutes-bt:focus-visible { outline: 3px solid var(--pastille-f); outline-offset: -3px; }
	.msl-panneau { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60; max-height: calc(100vh - 150px); overflow-y: auto; padding: 8px 1.25rem 14px; background: var(--blanc); border-bottom: 3px solid var(--noir); box-shadow: var(--o1); }
	.msl-panneau ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
	.msl-pan-lien { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 6px 12px; border-left: 6px solid var(--rub); border-radius: 0 6px 6px 0; background: var(--carton); color: var(--noir); text-decoration: none; font: 700 14px/1.15 var(--titres); font-stretch: 100%; letter-spacing: .03em; text-transform: uppercase; }
	.msl-pan-lien.is-actif { background: var(--rub); color: var(--rubt); }
	.msl-pan-lien:focus-visible { outline: 3px solid var(--noir); outline-offset: 2px; }
	.msl-pan-n { flex: none; font: 600 12px/1 var(--titres); font-stretch: 100%; letter-spacing: 0; opacity: .75; }
	.msl-entete.is-pose .msl-mbande { display: none; }
}
@media (max-width: 359px) { .msl-panneau ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .msl-toutes-bt svg { transition: none; } }

/* ------------------------- 1. le bac du jour -------------------------
   Un seul objet : la bande de papier (à gauche) chevauche le tiers gauche de la pochette, le disque sort à droite.
   Tout est visible dès l'arrivée ; le mouvement part d'un état visible (léger glissement). */
.msl-une { --pmax: 560px; --bw: 540px; --tmax: 68px; --vois: clamp(70px, 7vw, 150px); --p: min(var(--pmax), max(340px, calc(100svh - 270px)), calc((100vw - 2 * var(--vois) - 72px - var(--bw)) / 1.09)); --ov: calc(var(--p) * .3); --st: calc(var(--p) * .39); --bi: calc(var(--bw) - 64px); --t1: clamp(30px, calc(8 * var(--bi) / var(--n, 40)), var(--tmax)); padding: clamp(28px, 3.2vw, 46px) 0 clamp(34px, 3.8vw, 54px); overflow: hidden; background-color: var(--carton); background-image: var(--grain); }
@media (min-width: 1700px) { .msl-une { --pmax: 660px; --bw: 600px; --tmax: 84px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .msl-une { --bw: 440px; } }
.msl-scene { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: min(1280px, 100% - 2.5rem); margin: 0 auto; }
.msl-bande { position: relative; z-index: 3; order: -1; flex: 0 0 var(--bw); width: var(--bw); margin-right: calc(var(--ov) * -1); padding: 24px 32px 26px; background: var(--blanc); border-top: 7px solid var(--rub); border-radius: 0 0 6px 6px; box-shadow: var(--o3); animation: msl-pose .45s cubic-bezier(.2,.8,.2,1) both; }
.msl-bande::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: repeating-linear-gradient(to bottom, var(--noir) 0 10px, transparent 10px 16px); opacity: .85; }
.msl-une-titre { margin: 12px 0 14px; font-size: var(--t1); line-height: 1.04; letter-spacing: -.01em; text-wrap: wrap; }
.msl-une-titre a { color: var(--noir); text-decoration: none; }
.msl-t1 { display: block; text-wrap: balance; }
.msl-t2 { display: block; font-family: var(--lecture); font-style: italic; font-weight: 600; font-stretch: 100%; font-size: .9em; color: var(--orange-t); letter-spacing: -.015em; line-height: 1.08; margin-top: .08em; text-wrap: balance; }
.msl-une-chapo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 18px; font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--lecture); color: var(--noir); }
.msl-une-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 18px; }
.msl-une-auteur { display: flex; align-items: center; gap: 12px; color: var(--noir); text-decoration: none; }
.msl-une-auteur-txt { display: flex; flex-direction: column; font: 600 13px/1.3 var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-une-auteur-txt b { font: 800 16px/1.2 var(--titres); font-stretch: 90%; color: var(--noir); }
.msl-pochette-geante { position: relative; flex: 0 0 var(--p); width: var(--p); height: var(--p); margin-right: var(--st); }
.msl-pg-img { position: absolute; inset: 0; z-index: 2; display: block; border-radius: 6px; overflow: hidden; background: var(--rub); box-shadow: var(--o2); }
.msl-pg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msl-pochette-geante .msl-pastille { top: -18px; right: -18px; }
.msl-disque--geant { z-index: 1; top: 5%; right: calc(var(--st) * -1); height: 90%; width: auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 30px rgba(40,20,40,.25); animation: msl-sort .5s cubic-bezier(.2,.8,.2,1) both; }
.msl-disque--geant::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--carton); }
.msl-disque--geant i { position: absolute; right: 5%; top: 50%; width: 31%; margin-top: -15.5%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; font-size: clamp(12px, 1.25vw, 18px); box-shadow: 0 0 0 4px rgba(0,0,0,.4); }
.msl-disque--geant i b { font: 800 1.55em/1 var(--titres); font-stretch: 90%; }
.msl-disque--geant i em { font: 600 .78em/1.1 var(--titres); font-style: normal; font-stretch: 100%; padding: 0 .3em; }
@keyframes msl-sort { from { transform: translateX(-14%) rotate(-18deg); } to { transform: none; } }
@keyframes msl-pose { from { transform: translateY(-10px) rotate(-1deg); } to { transform: none; } }

.msl-voisin { position: absolute; z-index: 1; top: 50%; display: none; width: clamp(200px, 19vw, 300px); aspect-ratio: 1; transition: margin .3s ease; }
.msl-voisin-img { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--rub); box-shadow: var(--o1); }
@media (min-width: 1100px) { .msl-voisin { display: block; } }
.msl-voisin--g { left: calc(var(--vois) - clamp(200px, 19vw, 300px)); transform: translateY(-50%) rotate(-3deg); }
.msl-voisin--d { right: calc(var(--vois) - clamp(200px, 19vw, 300px)); transform: translateY(-50%) rotate(3deg); }
.msl-voisin--g:hover { margin-left: 10px; }
.msl-voisin--d:hover { margin-right: 10px; }

@media (max-width: 1023px) {
	.msl-une { --st: 34px; --bi: calc(min(100vw, 620px) - 72px); --t1: clamp(24px, calc(8 * var(--bi) / var(--n, 40)), 34px); padding: 18px 0 32px; }
	.msl-scene { display: block; width: 100%; max-width: 620px; padding-inline: 18px; }
	.msl-pochette-geante { flex: none; width: calc(100% - 34px); height: auto; aspect-ratio: 354 / 262; max-height: 46svh; margin: 0; }
	.msl-disque--geant { top: 6%; height: 88%; }
	.msl-disque--geant i { display: none; }
	.msl-pochette-geante .msl-pastille { width: 66px; height: 66px; font-size: 13px; top: -10px; right: -6px; }
	.msl-bande { display: flex; flex-direction: column; flex: none; width: auto; margin: -28px 0 0; padding: 12px 18px 18px; border-top-width: 6px; }
	.msl-bande::after { display: none; }
	.msl-bande .msl-onglet { align-self: flex-start; }
	.msl-une-titre { order: 2; margin: 8px 0 12px; line-height: 1.05; }
	.msl-une-pied { order: 3; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
	.msl-une-pied .msl-bouton { width: 100%; }
	.msl-une-chapo { order: 4; margin: 14px 0 0; font-size: 17px; }
}

/* ------------------------- 2. la liste du jour ------------------------- */
.msl-faces2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.msl-facex-nom { margin: 0 0 6px; padding: 0 0 8px; border-bottom: 3px solid var(--noir); font-size: 22px; font-stretch: 100%; font-weight: 700; }
.msl-retourner { display: none; margin-top: 18px; }
@media (max-width: 879px) {
	.msl-faces2 { grid-template-columns: 1fr; }
	.msl-js .msl-facex[data-face="b"] { display: none; }
	.msl-js .msl-faces2.is-retourne .msl-facex[data-face="a"] { display: none; }
	.msl-js .msl-faces2.is-retourne .msl-facex[data-face="b"] { display: block; }
	.msl-js .msl-retourner:not([hidden]) { display: inline-flex; width: 100%; }
}

/* ------------------------- 3. le bac Musique ------------------------- */
.msl-musique-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; }
.msl-intercalaire { padding: 30px 28px 32px; background: var(--rub); color: var(--rubt); border-radius: 14px 14px 6px 6px; box-shadow: var(--o3); }
.msl-intercalaire .msl-sec-titre { border: 0; margin-bottom: 10px; }
.msl-intercalaire .msl-tab { background: none; color: inherit; padding: 0; margin: 0; border-radius: 0; }
.msl-intercalaire-n { margin: 0 0 22px; font: 600 20px/1.2 var(--titres); font-stretch: 100%; }
.msl-styles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.msl-musique-bac { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 26px; align-items: start; }
.msl-musique-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.msl-musique-m .msl-carte-titre { font-size: 17px; }

/* ------------------------- 4. le disque de la semaine ------------------------- */
.msl-immersion { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: clamp(460px, 44vw, 620px); padding: clamp(40px, 5vw, 72px) 0; color: #fff; background: var(--noir); overflow-x: clip; overflow-y: visible; }
.msl-immersion-photo { position: absolute; inset: 0; background: var(--photo, none) center / cover no-repeat, var(--noir); }
.msl-immersion-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,26,.9) 0%, rgba(23,20,26,.62) 36%, rgba(23,20,26,0) 68%); }
.msl-immersion-in { position: relative; z-index: 2; }
.msl-immersion-lib { margin: 14px 0 6px; font: 600 clamp(17px, 1.5vw, 22px)/1.2 var(--lecture); font-style: italic; color: #FFD6C2; }
.msl-immersion-titre { max-width: min(18ch, 70%); margin-bottom: 14px; font-size: clamp(36px, 5.4vw, 80px); line-height: 1; max-width: 62%; }
.msl-immersion-titre a { color: #fff; text-decoration: none; }
.msl-immersion-chapo { max-width: 46em; margin: 0 0 22px; font: 400 clamp(17px, 1.4vw, 21px)/1.5 var(--lecture); color: #F1E9DA; }
.msl-quart { position: absolute; z-index: 3; right: -150px; bottom: -60px; width: min(46vw, 620px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 20deg, rgba(255,255,255,.1), transparent 18%, rgba(255,255,255,.07) 40%, transparent 58%, rgba(255,255,255,.1) 78%, transparent), var(--sillons); box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 30px 70px rgba(0,0,0,.5); animation: msl-tourne 90s linear infinite; pointer-events: none; }
.msl-quart::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--pastille); box-shadow: 0 0 0 6px rgba(0,0,0,.4); }
.msl-hit { z-index: 1; padding-top: clamp(52px, 6vw, 84px); }

/* ------------------------- 5. le hit-parade ------------------------- */
.msl-hit-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.msl-hit-un { position: relative; max-width: 380px; }
.msl-hit-un-lien { display: block; color: #fff; text-decoration: none; }
.msl-hit-un-texte { display: block; padding-top: 16px; }
.msl-hit-un .msl-carte-titre { margin-top: 10px; font-size: 26px; line-height: 1.15; }
.msl-hit-un .msl-pastille--n1 { width: 92px; height: 92px; font-size: 20px; }
.msl-hit-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 28px; margin: 0; list-style: none; }
.msl-hit-ligne a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(244,236,221,.2); color: #F4ECDD; text-decoration: none; }
.msl-hit-ligne a:hover .msl-hit-titre { text-decoration: underline; }
.msl-hit-n { flex: 0 0 1.25em; font: 700 clamp(40px, 4.2vw, 60px)/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; color: var(--pastille); text-align: right; }
.msl-hit-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.msl-hit-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 17px/1.25 var(--lecture); }
.msl-hit .msl-piste-vign { flex-basis: 56px; width: 56px; height: 56px; }
.msl-fl { font: 700 14px/1 var(--titres); color: #F4ECDD; }
.msl-fl--haut { color: #8FE3A5; }
.msl-fl--bas { color: #FFB1A8; }

/* ------------------------- 6, 7, 7 bis. les bacs groupés ------------------------- */
.msl-bacs { display: grid; gap: clamp(32px, 4vw, 52px); align-items: start; }
.msl-bacs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msl-bacs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.msl-bacs--3 .msl-bac:nth-child(2) .msl-sec-titre { margin-top: 20px; }
.msl-bacs--3 .msl-bac:nth-child(3) .msl-sec-titre { margin-top: 40px; }
.msl-bac .msl-sec-titre { --st: clamp(26px, 2.5vw, 38px); }
.msl-bac-corps { display: block; }
.msl-bac-tete { margin-bottom: 14px; }
.msl-bac--trio .msl-carte--b .msl-carte-lien { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: 16px; }
.msl-bac--trio .msl-carte--b .msl-carte-titre { font-size: 18px; }
.msl-voirbac { display: inline-block; margin-top: 14px; font: 700 15px/1.2 var(--titres); font-stretch: 100%; color: var(--noir); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.msl-voirbac:hover { color: var(--pastille-f); }
.msl-bac--cote .msl-bac-corps { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 24px; align-items: start; }
.msl-bac--cote .msl-bac-tete { margin: 0; }
.msl-bac--cote .msl-carte--b .msl-carte-lien { display: block; }
.msl-bac--cote .msl-carte--b .msl-carte-chapo { display: none; }
.msl-bac--cote .msl-pistes { margin-top: 8px; }

/* ------------------------- 8. dernier pressage ------------------------- */
.msl-sillon-zone { overflow-x: auto; padding: 8px 0 24px; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.msl-sillon { position: relative; display: flex; gap: 26px; width: max-content; min-width: 100%; margin: 0; padding: 0 max(1.25rem, calc((100% - 1280px) / 2)); list-style: none; }
.msl-sillon::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 7px; border-top: 2px solid var(--noir); border-bottom: 2px solid var(--noir); }
.msl-sillon-item { position: relative; flex: 0 0 190px; padding-top: 46px; scroll-snap-align: start; }
.msl-sillon-item .msl-pastille--h { z-index: 5; top: 6px; left: 8px; }

/* ------------------------- 9. la maison ------------------------- */
.msl-maison-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.msl-maison-texte { max-width: 38em; margin: 0 0 12px; font-size: 19px; }
.msl-disques-portraits { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 22px 0 26px; list-style: none; }
.msl-disques-portraits a { display: flex; align-items: center; gap: 10px; color: var(--noir); text-decoration: none; font: 700 15px/1.2 var(--titres); font-stretch: 100%; }
.msl-disques-portraits a:hover .msl-nom-court { text-decoration: underline; }
.msl-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin: 0; list-style: none; }
.msl-chiffres li { padding-top: 12px; border-top: 4px solid var(--noir); }
.msl-chiffre { display: block; font: 700 clamp(48px, 6vw, 92px)/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.msl-chiffres span { display: block; margin-top: 6px; font: 600 18px/1.3 var(--lecture); }

/* ------------------------- portraits : posés comme l'étiquette d'un disque ------------------------- */
.msl-portrait { display: inline-block; flex: none; width: 56px; height: 56px; padding: 4px; border-radius: 50%; background: var(--sillons); box-shadow: 0 6px 14px rgba(40, 20, 40, .22); }
.msl-portrait--s { width: 52px; height: 52px; }
.msl-portrait--m { width: 68px; height: 68px; }
.msl-portrait--g { width: 124px; height: 124px; padding: 6px; }
.msl-portrait .sb-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--blanc); box-shadow: none; background: var(--blanc); }
.msl-portrait .sb-avatar-symbole { display: grid; place-items: center; }
.msl-signe--rond { width: 78%; height: auto; }

/* ------------------------- pied de page : dos de pochette ------------------------- */
.sb-pied { background: var(--noir); background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,.07) 0 22%, transparent 22.5%), repeating-radial-gradient(circle at 100% 0%, rgba(255,255,255,.05) 0 1px, transparent 1px 7px); color: #fff; padding-top: 48px; }
.sb-pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.18); }
.sb-pied-marque { display: flex; align-items: center; gap: 16px; }
.msl-signe--pied { width: 64px; height: 44px; }
.sb-pied-nom { margin: 0; font: 800 26px/1 var(--titres); font-stretch: 80%; }
.sb-pied-baseline { margin: 6px 0 0; max-width: 44ch; font: 400 15px/1.5 var(--lecture); color: rgba(255,255,255,.72); }
.sb-pied-loupe { display: flex; border: 2px solid rgba(255,255,255,.4); border-radius: 6px; overflow: hidden; }
.sb-pied-loupe input { min-width: 220px; padding: 11px 16px; border: 0; background: transparent; color: #fff; font: 500 15px var(--lecture); }
.sb-pied-loupe input::placeholder { color: rgba(255,255,255,.62); }
.sb-pied-loupe button { padding: 0 20px; border: 0; background: var(--pastille); color: var(--noir); font: 700 15px var(--titres); font-stretch: 100%; cursor: pointer; }
.sb-pied-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 36px; padding-block: 34px; }
.sb-pied-titre { margin: 0 0 14px; font: 700 15px/1.2 var(--titres); font-stretch: 100%; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.msl-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.msl-face-nom { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.2); font: 700 15px/1 var(--titres); font-stretch: 100%; color: var(--pastille); }
.sb-pied-rubriques { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-pied-rubrique { display: flex; min-height: 36px; align-items: center; color: #fff; text-decoration: none; }
.sb-pied-rubrique-tete { display: flex; align-items: center; gap: 8px; font: 600 15px var(--titres); font-stretch: 100%; flex-wrap: wrap; }
.msl-face-n { flex: 0 0 2em; font: 700 13px var(--titres); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.sb-pied-rubrique-point { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sb-pied-rubrique:hover .sb-pied-rubrique-nom { text-decoration: underline; text-underline-offset: 3px; }
.sb-pied-compte { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.7); }
.sb-pied-fil, .sb-pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sb-pied-liste a { display: inline-block; padding: 4px 0; color: rgba(255,255,255,.9); text-decoration: none; font: 500 15px var(--titres); font-stretch: 100%; }
.sb-pied-liste a:hover, .msl-pied-fil a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.msl-pied-fil a { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.92); text-decoration: none; font: 600 15px/1.3 var(--lecture); }
.msl-pied-vign { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--sillon); }
.msl-pied-vign .msl-unie { padding: 4px; }
.msl-pied-vign .msl-unie b { font-size: 8px; }
.msl-pied-fil-txt { display: block; min-width: 0; }
.msl-pied-fil time { display: block; margin-bottom: 2px; font: 600 12px var(--titres); font-stretch: 100%; color: rgba(255,255,255,.72); }
.sb-ours { padding-block: 20px; border-top: 1px solid rgba(255,255,255,.18); font: 500 13.5px/1.5 var(--titres); font-stretch: 100%; color: rgba(255,255,255,.72); }

/* ------------------------- rubriques : l'intercalaire géant ------------------------- */
.msl-inter { background: var(--rub); color: var(--rubt); padding-top: clamp(30px, 4.4vw, 60px); }
.msl-inter-nom { font-size: clamp(54px, 9.2vw, 140px); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.msl-inter-n { margin: 12px 0 28px; font: 600 clamp(18px, 1.7vw, 24px)/1.2 var(--titres); font-stretch: 100%; }
.msl-inter-ongs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.msl-inter-ongs .msl-ong--s { background: var(--carton); border-color: var(--carton); padding: 13px 18px 11px; border-radius: 14px 14px 0 0; }
.msl-inter-ongs .msl-ong--s:hover { background: var(--noir); border-color: var(--noir); color: #fff; }
.msl-inter-ongs--vide { height: 14px; }
.msl-bac-page { padding: clamp(34px, 4.4vw, 60px) 0 clamp(52px, 6vw, 84px); }
.msl-rang1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.msl-rang1-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
.msl-rang1-m .msl-carte-titre { font-size: 17px; }
.msl-lot { list-style: none; margin: 0; padding: 0; }
.msl-lot--grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.msl-lot--mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 44px; }
.msl-lot--pistes .msl-piste-vign { flex-basis: 96px; width: 96px; height: 96px; }
.msl-lot--pistes .msl-piste-lien { padding: 16px 6px; gap: 20px; }
.msl-lot--pistes .msl-piste-titre { font-size: 22px; }
.msl-lot-pied { display: flex; justify-content: center; margin-top: 42px; }
.msl-intro { margin-top: 56px; padding: 18px 24px; background: var(--blanc); border-radius: 6px; box-shadow: var(--o1); max-width: 56rem; }
.msl-intro summary { cursor: pointer; font: 700 17px/1.3 var(--titres); font-stretch: 100%; min-height: 44px; display: flex; align-items: center; }
.msl-intro div { padding: 8px 0 6px; }

/* ------------------------- article : pochette ouverte ------------------------- */
.msl-ouverte { padding: clamp(26px, 3.8vw, 50px) 0 clamp(36px, 4.4vw, 62px); background-color: var(--carton); background-image: var(--grain); overflow-x: clip; }
.msl-ouverte-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(30px, 6vw, 110px); align-items: center; padding-right: 90px; }
.msl-rabat { position: relative; z-index: 2; padding: 28px 34px 30px; background: var(--blanc); border-left: 10px solid var(--rub); border-radius: 6px; box-shadow: var(--o3); margin-right: -50px; }
.sb-article-ariane { margin-bottom: 16px; font: 600 13px/1.3 var(--titres); font-stretch: 100%; color: var(--sillon); }
.sb-article-ariane a { color: var(--sillon); }
.sb-article-ariane span { margin: 0 6px; }
.sb-article-titre { margin: 14px 0 0; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.04; color: var(--noir); }
.sb-article-chapo { max-width: 40em; margin: 16px 0 0; font: 500 clamp(18px, 1.45vw, 21px)/1.5 var(--lecture); color: var(--noir); }
.sb-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--noir); font: 600 14px/1.4 var(--titres); font-stretch: 100%; color: var(--sillon); }
.sb-article-auteur { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; color: var(--noir); text-decoration: none; }
.sb-article-auteur-nom { font: 800 17px/1.2 var(--titres); font-stretch: 90%; color: var(--noir); }
.sb-article-auteur:hover .sb-article-auteur-nom { text-decoration: underline; }
.sb-article-infos { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.msl-pochette-ouverte { position: relative; z-index: 1; margin: 0; aspect-ratio: 1; max-height: 480px; }
.msl-pochette-ouverte .msl-img { z-index: 2; box-shadow: var(--o2); }
.msl-pochette-ouverte .msl-disque { width: 84%; top: 8%; right: -90px; }
.msl-pochette-ouverte .msl-disque i { position: absolute; right: 12px; top: 50%; width: 66px; margin-top: -33px; font-size: 13px; box-shadow: 0 0 0 3px rgba(0,0,0,.4); }
.msl-pochette-ouverte .msl-pastille { top: -22px; left: -22px; z-index: 5; width: 92px; height: 92px; transform: rotate(-8deg); font-size: 15px; }
.msl-ouverte--sans { }
.msl-ouverte--sans .msl-ouverte-grille { grid-template-columns: minmax(0, 900px); padding-right: 0; }
.msl-ouverte--sans .msl-rabat { margin-right: 0; }
@media (max-width: 960px) {
	.msl-ouverte-grille { grid-template-columns: 1fr; padding-right: 0; gap: 22px; }
	.msl-rabat { margin-right: 0; padding: 22px 20px 22px; }
	.msl-pochette-ouverte { order: -1; aspect-ratio: 16 / 10; max-height: 240px; margin-right: 56px; }
	.msl-pochette-ouverte .msl-disque { width: auto; height: 86%; right: -56px; }
	.msl-pochette-ouverte .msl-pastille { width: 70px; height: 70px; font-size: 12px; top: -14px; left: -8px; }
}

/* corps d'article */
.sb-art-corps { display: grid; grid-template-columns: minmax(0, 1fr) var(--sb-aside-largeur); gap: 44px; align-items: start; margin-top: 44px; }
.sb-art-corps--seul { grid-template-columns: minmax(0, 860px); }
.sb-art-principal { min-width: 0; max-width: 860px; padding: clamp(22px, 4vw, 54px); background: var(--blanc); border-radius: 6px; box-shadow: var(--o1); }
.sb-art-aside { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 20px; }
.sb-colle-zone { position: relative; }
.sb-colle[data-colle="true"] { position: sticky; top: var(--sb-haut-collant); }
.sb-texte { max-width: 42rem; font: 400 18px/1.65 var(--lecture); color: var(--noir); }
.sb-texte > * + * { margin-top: 1.1em; }
.sb-texte p { margin: 0 0 1.1em; }
.sb-texte h2 { margin: 1.9em 0 .6em; padding-top: .45em; border-top: 3px solid var(--noir); font-size: clamp(28px, 2.9vw, 40px); line-height: 1.05; }
.sb-texte h3 { margin: 1.6em 0 .5em; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.12; font-stretch: 85%; }
.sb-texte h2:first-child { margin-top: 0; }
.sb-texte a:not([class]) { color: var(--sb-accent-fort); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pastille) 70%, transparent); transition: text-decoration-color .15s, background-color .15s; }
.sb-texte a:not([class]):hover { text-decoration-color: var(--pastille); background: color-mix(in srgb, var(--sb-surf2) 80%, transparent); }
.sb-texte img { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--o1); }
.sb-texte figure { margin: 1.8em 0; }
.sb-texte figure img, .sb-texte p > img { width: 100%; aspect-ratio: 3 / 2; max-height: 480px; object-fit: cover; }
.sb-texte figcaption { margin-top: 8px; font: 500 14px/1.4 var(--titres); font-stretch: 100%; color: var(--sillon); }
.sb-texte blockquote { position: relative; margin: 2.2em 0 1.8em; padding: 1.5em 0 1.1em; border-top: 2px solid var(--noir); border-bottom: 2px solid var(--noir); font: italic 600 clamp(20px, 2.2vw, 25px)/1.4 var(--lecture); }
.sb-texte blockquote::before { content: "\201C"; position: absolute; top: -22px; left: 0; display: grid; place-items: start center; width: 42px; height: 42px; border-radius: 50%; background: var(--pastille); color: var(--noir); font: 800 34px/50px var(--titres); font-style: normal; }
.sb-texte blockquote p { margin: 0; }
.sb-texte blockquote cite { display: block; margin-top: 10px; font: 600 14px var(--titres); font-style: normal; font-stretch: 100%; color: var(--sillon); }
.sbs_tableau { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.sbs_tableau table { width: 100%; min-width: 520px; border-collapse: collapse; font: 500 16px/1.4 var(--lecture); }
.sbs_tableau th { background: var(--noir); color: #fff; text-align: left; font: 700 14px var(--titres); font-stretch: 100%; padding: 10px 12px; }
.sbs_tableau td { padding: 10px 12px; border-bottom: 1px solid var(--filet); }

/* barre latérale : le sommaire en liste de pistes */
.sb-kicker { display: block; font: 800 22px/1.15 var(--titres); font-stretch: 80%; letter-spacing: -.005em; text-transform: none; color: var(--noir); margin: 0; }
.sb-sommaire { position: relative; overflow: hidden; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: 1.2rem 1.15rem .8rem; box-shadow: var(--sb-ombre); }
.sb-sommaire::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sb-rub, var(--pastille)); }
.sb-sommaire-tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 4px; }
.sb-sommaire-duree { padding: .4rem .65rem; border-radius: 999px; background: var(--rub, var(--pastille)); color: var(--rubt, var(--noir)); font: 700 12.5px/1 var(--titres); font-stretch: 100%; white-space: nowrap; }
.sb-sommaire-barre { height: 4px; margin: .85rem 0 .4rem; border-radius: 4px; background: var(--sb-surf2); overflow: hidden; }
.sb-sommaire-barre span { display: block; height: 100%; border-radius: inherit; background: var(--noir); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear; }
.sb-sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sb-sommaire li { counter-increment: s; }
.sb-sommaire li + li { border-top: 1px solid var(--filet); }
.sb-sommaire a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .2rem; align-items: start; margin: 0 -.5rem; padding: .55rem .5rem; border-radius: 4px; font: 600 15.5px/1.32 var(--lecture); color: var(--noir); text-decoration: none; transition: background .15s; }
.sb-sommaire a::before { content: counter(s, decimal-leading-zero); font: 700 13.5px/1.7 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; color: var(--sb-accent-2); }
.sb-sommaire a:hover { background: var(--sb-surf); }
.sb-sommaire a[aria-current="true"] { background: var(--sb-surf2); box-shadow: inset 4px 0 0 var(--pastille); font-weight: 700; }
.sb-sommaire-mobile { display: none; }
.msl-souffle { margin-top: 16px; padding: 16px 16px 18px; border-radius: 6px; background: var(--noir); color: #fff; box-shadow: var(--o1); }
.msl-souffle-titre { margin: 0 0 10px; font: 800 20px/1.15 var(--titres); font-stretch: 80%; }
.msl-champ { display: block; width: 100%; min-height: 46px; margin: 0 0 8px; padding: 10px 14px; border: 2px solid var(--noir); border-radius: 6px; background: #fff; color: var(--noir); font: 500 16px/1.4 var(--lecture); }
.msl-souffle .msl-champ { border-color: transparent; }
.msl-souffle textarea.msl-champ { min-height: 64px; resize: vertical; }
.msl-souffle .msl-bouton { width: 100%; }
.msl-retour { margin: 10px 0 0; font: 600 15px/1.4 var(--titres); font-stretch: 100%; }
.msl-souffle .msl-retour { color: #FFD6C2; }

@media (max-width: 980px) { .sb-art-corps { grid-template-columns: minmax(0, 1fr) 270px; gap: 30px; } }
@media (max-width: 860px) {
	.sb-art-corps { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
	.sb-art-principal { padding: 22px 18px; }
	.sb-art-aside { display: none; }
	.sb-sommaire-mobile { display: block; position: relative; overflow: hidden; margin: 0 0 1.4rem; border: 1px solid var(--filet); border-radius: 6px; background: var(--blanc); box-shadow: var(--sb-ombre); }
	.sb-sommaire-mobile::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--sb-rub, var(--pastille)); }
	.sb-sommaire-mobile summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .35rem 1rem 0; font: 800 18px/1.2 var(--titres); font-stretch: 85%; cursor: pointer; }
	.sb-sommaire-mobile summary::-webkit-details-marker { display: none; }
	.sb-sommaire-mobile summary em { padding: .35rem .6rem; border-radius: 999px; background: var(--sb-surf); font: 700 12.5px/1 var(--titres); font-style: normal; font-stretch: 100%; color: var(--sillon); }
	.sb-sommaire-mobile ol { list-style: none; counter-reset: s; margin: 0; padding: .2rem 1rem .8rem; }
	.sb-sommaire-mobile li { counter-increment: s; border-top: 1px solid var(--filet); }
	.sb-sommaire-mobile a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; min-height: 44px; padding: .5rem 0; font: 600 16px/1.35 var(--lecture); color: var(--noir); text-decoration: none; }
	.sb-sommaire-mobile a::before { content: counter(s, decimal-leading-zero); font: 700 13px/1 var(--titres); color: var(--sb-accent-2); }
}

/* encadrés : fiches cartonnées */
.sb-texte .sb-steps, .sb-texte .sb-cards { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: .85rem; }
.sb-texte .sb-steps { counter-reset: sbetape; }
.sb-texte .sb-steps > li { position: relative; margin: 0; padding: .95rem 1.1rem .95rem 3.9rem; background: var(--sb-surf); border-radius: var(--sb-rayon); line-height: 1.55; }
.sb-texte .sb-steps > li::before { counter-increment: sbetape; content: counter(sbetape); position: absolute; left: 1rem; top: .85rem; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--noir); color: #fff; font: 700 15px/2.1rem var(--titres); font-stretch: 100%; text-align: center; }
.sb-texte .sb-cards { display: block; margin: 1.6rem 0; padding: .35rem 1.3rem; background: var(--sb-surf); border: 1px solid var(--filet); border-top: 6px solid var(--sb-rub, var(--pastille)); border-radius: var(--sb-rayon); }
.sb-texte .sb-cards > li { position: relative; margin: 0; padding: .8rem 0 .8rem 2.1rem; font: 500 16.5px/1.55 var(--lecture); color: var(--noir); }
.sb-texte .sb-cards > li + li { border-top: 1px solid var(--filet); }
.sb-texte .sb-cards > li::before { content: ""; position: absolute; left: 0; top: 1.02rem; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.sb-compare { display: grid; grid-template-columns: repeat(var(--sb-compare-cols, auto-fit), minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1.75rem 0; }
.sb-compare-card { padding: 1.25rem 1.35rem; background: var(--sb-surf); border: 1px solid var(--filet); border-top: 6px solid var(--sb-rub, var(--pastille)); border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre); }
.sb-compare-card h3 { margin: 0 0 .8rem; font: 800 20px/1.2 var(--titres); font-stretch: 85%; }
.sb-compare-row { padding: .6rem 0; border-top: 1px solid var(--filet); }
.sb-compare-row:first-child { border-top: 0; padding-top: 0; }
.sb-compare-row dt { margin: 0 0 .2rem; font: 700 12.5px/1.4 var(--titres); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; color: var(--sillon); }
.sb-compare-row dd { margin: 0; font: 400 15.5px/1.5 var(--lecture); }
.sb-sources { margin: 32px 0; padding: 24px 28px; background: var(--sb-surf); border-top: 4px solid var(--noir); border-radius: 0 0 6px 6px; }
.sb-sources-titre { margin: 0 0 14px; font: 700 14px var(--titres); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; color: var(--noir); }
.sb-sources ul, .sb-sources ol { list-style: none; margin: 0; padding: 0; counter-reset: sbsrc; }
.sb-sources ol li { counter-increment: sbsrc; }
.sb-sources ol li::before { content: counter(sbsrc); flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--noir); color: #fff; font: 700 12px/24px var(--titres); text-align: center; }
.sb-sources li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); font-size: 15.5px; line-height: 1.45; }
.sb-sources li:first-child { border-top: 0; }
.sb-alire { margin: 2.4rem 0 1.6rem; padding: 1.2rem 1.3rem .6rem; border: 1px solid var(--filet); border-top: 6px solid var(--sb-rub, var(--pastille)); border-radius: 6px; background: var(--blanc); box-shadow: var(--sb-ombre); }
.sb-alire ul { list-style: none; margin: 0; padding: 0; }
.sb-alire li { border-top: 1px solid var(--filet); }
.sb-alire li:first-child { border-top: 0; }
.sb-alire a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .75rem 0; font: 700 17px/1.3 var(--titres); font-stretch: 90%; color: var(--noir); text-decoration: none; }
.sb-alire a:hover { color: var(--pastille-f); text-decoration: underline; }
.sb-alire a svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sb-encadre-cle { margin: 40px 0; padding: 6px 28px 20px; background: var(--sb-surf); border-radius: var(--sb-rayon); border-top: 6px solid var(--noir); }
.sb-encadre-cle h2 { border-top: 0 !important; }
.sb-encadre-essentiel { margin: 28px 0; padding: 18px 22px 8px; background: var(--sb-surf2); border-left: 6px solid var(--noir); border-radius: var(--sb-rayon); }
.sb-encadre-essentiel > .sb-kicker, .sb-encadre-chiffre > .sb-kicker, .sb-encadre-pratique > .sb-kicker, .sb-duo > .sb-kicker { margin: 0 0 8px; font: 700 14px/1.2 var(--titres); font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; color: var(--noir); }
.sb-encadre-essentiel ul { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
.sb-encadre-essentiel li { position: relative; padding: 8px 0 10px 28px; border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); font: 400 16.5px/1.5 var(--lecture); }
.sb-encadre-essentiel li:first-child { border-top: 0; }
.sb-encadre-essentiel li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 12px; height: 7px; border-left: 3px solid var(--pastille-f); border-bottom: 3px solid var(--pastille-f); transform: rotate(-45deg); }
.sb-encadre-chiffre { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; margin: 32px 0; padding: 20px 24px; background: var(--noir); color: #fff; border-radius: var(--sb-rayon); }
.sb-encadre-chiffre > .sb-kicker { grid-column: 1 / -1; color: rgba(255,255,255,.85); }
.sb-encadre-chiffre-valeur { font: 700 clamp(40px, 5.2vw, 64px)/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; color: var(--pastille); }
.sb-encadre-chiffre-libelle { margin: 0; font: 400 17px/1.45 var(--lecture); }
.sb-encadre-chiffre-source { grid-column: 1 / -1; margin: 4px 0 0; font: 500 12.5px var(--titres); color: rgba(255,255,255,.8); }
.sb-exergue { margin: 36px 0; padding: 6px 0 6px 26px; border-left: 6px solid var(--pastille); }
.sb-exergue p { margin: 0; font: 600 clamp(20px, 2.4vw, 26px)/1.35 var(--lecture); text-wrap: balance; }
.sb-exergue p::before { content: "\00AB\00A0"; color: var(--pastille-f); }
.sb-exergue p::after { content: "\00A0\00BB"; color: var(--pastille-f); }
.sb-exergue p:has(> cite)::before, .sb-exergue p:has(> cite)::after { content: none; }
.sb-exergue cite { display: block; margin-top: 10px; font: 600 14px var(--titres); font-style: normal; font-stretch: 100%; color: var(--sillon); }
.sb-encadre-pratique { margin: 30px 0; padding: 18px 22px 10px; background: var(--sb-surf); border-top: 6px solid var(--noir); border-radius: var(--sb-rayon); }
.sb-encadre-pratique ol { list-style: none; counter-reset: sbprat; margin: 0; padding: 0; }
.sb-encadre-pratique li { counter-increment: sbprat; position: relative; padding: 8px 0 10px 40px; border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); font: 400 16.5px/1.5 var(--lecture); }
.sb-encadre-pratique li:first-child { border-top: 0; }
.sb-encadre-pratique li::before { content: counter(sbprat); position: absolute; left: 0; top: 8px; width: 27px; height: 27px; border-radius: 50%; background: var(--noir); color: #fff; font: 700 13px/27px var(--titres); text-align: center; }
.sb-duo { margin: 32px 0; }
.sb-duo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sb-duo-col { padding: 16px 18px 8px; background: var(--sb-surf); border-top: 6px solid var(--noir); border-radius: var(--sb-rayon); }
.sb-duo-col + .sb-duo-col { border-top-color: var(--pastille); }
.sb-duo-titre { margin: 0 0 6px; font: 800 18px var(--titres); font-stretch: 85%; }
.sb-duo-col ul { list-style: none; margin: 0; padding: 0; }
.sb-duo-col li { position: relative; padding: 7px 0 9px 18px; border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); font: 400 15.5px/1.5 var(--lecture); }
.sb-duo-col li:first-child { border-top: 0; }
.sb-duo-col li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
@media (max-width: 600px) { .sb-duo-grille, .sb-encadre-chiffre { grid-template-columns: 1fr; } }

/* FAQ : liste de pistes qui se déplient */
.sb-faq { max-width: var(--sb-faq-largeur); margin: 3rem auto 0; }
.sb-faq-titre { margin-bottom: 1.2rem; font-size: clamp(28px, 2.9vw, 40px); }
.sb-faq-liste { display: grid; gap: .7rem; }
.sb-faq-carte { padding: 4px 20px; background: var(--sb-surf); border: 1px solid var(--filet); border-left: 6px solid var(--noir); border-radius: 6px; }
.sb-faq-carte summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; font: 600 18px/1.35 var(--lecture); color: var(--noir); }
.sb-faq-carte summary::-webkit-details-marker { display: none; }
.sb-faq-carte summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pastille); color: var(--noir); font: 700 20px/1 var(--titres); }
.sb-faq-carte[open] summary::after { content: "\2013"; }
.sb-faq-carte p { margin: 0 0 14px; font: 400 16.5px/1.6 var(--lecture); color: var(--noir); }

/* signature d'auteur */
.sb-auteur-carte { display: grid; grid-template-columns: 124px 1fr; gap: 26px; align-items: center; margin: 46px 0 10px; padding: 26px 28px; background: var(--sb-surf); border-top: 6px solid var(--noir); border-radius: 0 0 6px 6px; }
.sb-auteur-nom { margin: 4px 0 2px; font: 800 28px/1.15 var(--titres); font-stretch: 85%; }
.sb-auteur-nom a { color: var(--noir); text-decoration: none; }
.sb-auteur-nom a:hover { text-decoration: underline; }
.sb-auteur-role { margin: 0 0 10px; font: 600 14px/1.4 var(--titres); font-stretch: 100%; color: var(--pastille-f); }
.sb-auteur-bio { margin: 0 0 16px; font: 400 16.5px/1.65 var(--lecture); }
.sb-auteur-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-auteur-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--noir); border-radius: 999px; color: var(--noir); font: 700 14px/1 var(--titres); font-stretch: 100%; text-decoration: none; }
.sb-auteur-liens a:first-child { background: var(--noir); color: #fff; }
@media (max-width: 760px) { .sb-auteur-carte { grid-template-columns: 76px 1fr; gap: 16px; padding: 20px 18px; } .msl-portrait--g { width: 76px; height: 76px; padding: 4px; } .sb-auteur-nom { font-size: 23px; } .sb-auteur-bio { font-size: 15.5px; } }

/* dans le même bac */
.related { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 110px); margin-top: clamp(40px, 5vw, 64px); }
.related .msl-lot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.sb-article-commentaires { margin-top: 40px; }

/* ------------------------- pages annexes ------------------------- */
.msl-dos { padding: clamp(30px, 4.4vw, 62px) 0 clamp(52px, 6vw, 90px); }
.msl-dos-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.msl-dos-photo { position: sticky; top: 112px; margin: 0; }
.msl-dos-photo .msl-img { position: relative; inset: auto; display: block; aspect-ratio: 1; background: var(--rub); }
.msl-dos-photo .msl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msl-dos-photo .msl-img--motif { display: grid; place-items: center; background: var(--noir); }
.msl-dos-photo .msl-img--motif .msl-disque { position: relative; width: 62%; box-shadow: 0 0 0 10px rgba(255,255,255,.05); }
.msl-dos-photo .msl-img--motif .msl-disque i { width: 40%; font-size: 13px; }
.msl-dos-titre { font-size: clamp(40px, 5.6vw, 84px); line-height: .96; margin-bottom: 22px; }
.msl-dos-intro { max-width: 36em; margin: 0 0 26px; font: 500 clamp(19px, 1.7vw, 23px)/1.5 var(--lecture); }
.msl-credits { margin: 0 0 34px; padding: 16px 0 0; border-top: 3px solid var(--noir); display: grid; grid-template-columns: 9em 1fr; gap: 10px 20px; }
.msl-credits dt { font: 700 14px/1.5 var(--titres); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; color: var(--sillon); }
.msl-credits dd { margin: 0; font: 600 17px/1.5 var(--lecture); }
.msl-credits a { color: var(--noir); }
.msl-dos h2 { margin: 40px 0 16px; padding-top: 12px; border-top: 3px solid var(--noir); font-size: clamp(28px, 2.9vw, 40px); }
.msl-dos .sb-texte { max-width: 40rem; }
.msl-rub-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.msl-rub-fiche { display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; padding: 14px 16px 12px; border-top: 8px solid var(--rub); border-radius: 6px; background: var(--blanc); box-shadow: var(--o1); color: var(--noir); text-decoration: none; }
.msl-rub-fiche:hover { transform: translateY(-3px); }
.msl-rub-fiche b { font: 800 22px/1.05 var(--titres); font-stretch: 80%; }
.msl-rub-fiche span { font: 600 14px var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 20px; margin: 0; padding: 0; list-style: none; }
.msl-equipe a { display: flex; align-items: center; gap: 14px; color: var(--noir); text-decoration: none; }
.msl-equipe b { display: block; font: 800 19px/1.15 var(--titres); font-stretch: 85%; }
.msl-equipe small { display: block; font: 500 14px/1.35 var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-equipe a:hover b { text-decoration: underline; }
.msl-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.msl-etapes li { position: relative; padding: 0 0 30px 84px; counter-increment: etape; }
.msl-etapes li::before { content: counter(etape); position: absolute; left: 0; top: -6px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--sillons); color: #fff; font: 700 28px/1 var(--titres); font-stretch: 100%; box-shadow: inset 0 0 0 12px rgba(0,0,0,.0); }
.msl-etapes li::after { content: ""; position: absolute; left: 30px; top: 60px; bottom: 6px; border-left: 3px dotted var(--noir); }
.msl-etapes li:last-child::after { display: none; }
.msl-etapes h3 { margin-bottom: 6px; font-size: 26px; }
.msl-etapes p { margin: 0; max-width: 34em; }
@media (max-width: 860px) {
	.msl-dos-grille { grid-template-columns: 1fr; }
	.msl-dos-g { display: contents; }
	.msl-dos-g > * { order: 3; }
	.msl-dos-g > .msl-dos-photo { order: 0; }
	.msl-dos-grille > div:not(.msl-dos-g) { order: 1; }
	.msl-dos-photo { position: static; max-width: 320px; }
	.msl-credits { grid-template-columns: 1fr; gap: 2px; }
	.msl-credits dd { margin-bottom: 10px; }
}

/* contact */
.msl-contact { padding: clamp(24px, 3.6vw, 48px) 0 clamp(48px, 6vw, 84px); }
.msl-contact-scene { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.msl-contact-photo { grid-column: 1 / 9; grid-row: 1; align-self: stretch; min-height: 420px; margin: 0; border-radius: 6px; overflow: hidden; background: var(--noir) center / cover no-repeat; box-shadow: var(--o2); position: relative; }
.msl-contact-photo--motif::after { content: ""; position: absolute; left: 12%; top: 50%; width: 52%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, var(--pastille) 0 17%, transparent 17.5%), var(--sillons); }
.msl-fiche { position: relative; grid-column: 6 / 13; grid-row: 1; z-index: 2; margin-top: 28px; padding: 30px 32px 30px; background: var(--blanc); border-top: 8px solid var(--pastille); border-radius: 0 0 6px 6px; box-shadow: var(--o2); }
.msl-fiche::before { content: "Contact"; position: absolute; left: 24px; top: -38px; padding: 9px 16px 7px; border-radius: 14px 14px 0 0; background: var(--pastille); color: var(--noir); font: 700 13px/1 var(--titres); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; }
.msl-fiche h1 { margin: 0 0 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; }
.msl-fiche-intro { margin: 0 0 16px; font: 500 17px/1.45 var(--lecture); color: var(--sillon); }
.msl-form { display: grid; gap: 12px; }
.msl-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.msl-form label { display: block; margin: 0 0 4px; font: 700 14px/1.2 var(--titres); font-stretch: 100%; }
.msl-form .msl-champ { margin: 0; }
.msl-form textarea.msl-champ { min-height: 112px; resize: vertical; }
.msl-form .msl-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 400 14.5px/1.45 var(--lecture); color: var(--sillon); }
.msl-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--noir); }
.msl-consent a { color: var(--noir); }
.msl-form .msl-bouton { width: 100%; }
.msl-retour--ok { padding: 14px 16px; border-radius: 6px; background: #E6F3E8; color: #123D20; border-left: 6px solid #1E7A46; }
.msl-retour--err { padding: 14px 16px; border-radius: 6px; background: #FBE6E3; color: #6A1410; border-left: 6px solid #C2273D; }
@media (max-width: 860px) {
	.msl-contact-scene { display: block; }
	.msl-contact-photo { display: none; }
	.msl-fiche { margin-top: 38px; padding: 20px 18px 22px; }
	.msl-fiche-intro { display: none; }
	.msl-form-2 { grid-template-columns: 1fr; gap: 10px; }
	.msl-form { gap: 10px; }
	.msl-form textarea.msl-champ { min-height: 88px; }
}

/* page simple */
.msl-page-tete { padding: clamp(30px, 4.6vw, 64px) 0 0; background: var(--noir); color: #fff; }
.msl-page-tete h1 { font-size: clamp(40px, 6vw, 88px); line-height: .95; padding-bottom: 28px; }
.msl-page-tete::after { content: ""; display: block; height: 14px; background: var(--pastille); }
.msl-page-corps { padding: clamp(30px, 4vw, 56px) 0 clamp(56px, 7vw, 100px); }
.msl-page-corps .sb-texte { max-width: 44rem; padding: clamp(20px, 3.4vw, 44px); background: var(--blanc); border-radius: 6px; box-shadow: var(--o1); }

/* recherche, 404, auteur */
.msl-chercher-page { display: flex; max-width: 640px; margin: 22px 0 0; border: 3px solid var(--noir); border-radius: 6px; overflow: hidden; background: #fff; }
.msl-chercher-page input { flex: 1; min-width: 0; min-height: 56px; padding: 0 18px; border: 0; background: transparent; font: 600 19px var(--lecture); }
.msl-chercher-page button { padding: 0 26px; border: 0; background: var(--noir); color: #fff; font: 700 16px var(--titres); font-stretch: 100%; cursor: pointer; }
.msl-vide { padding: 8px 0 30px; }
.msl-vide p { max-width: 38em; font-size: 19px; }
.msl-404 { padding: clamp(36px, 5vw, 72px) 0 clamp(52px, 6vw, 90px); }
.msl-404-scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 76px); align-items: center; margin-bottom: clamp(40px, 5vw, 70px); }
.msl-404-bac { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--noir) center / cover no-repeat; box-shadow: var(--o2); overflow: hidden; }
.msl-404-bac::before { content: ""; position: absolute; left: 14%; bottom: -8%; width: 46%; aspect-ratio: 1; transform: rotate(-14deg); border-radius: 6px; background: radial-gradient(circle at 78% 24%, rgba(255,255,255,.2) 0 16%, transparent 16.5%), var(--pastille); box-shadow: var(--o1); }
.msl-404-bac--photo::before { display: none; }
.msl-404 h1 { font-size: clamp(40px, 6vw, 88px); line-height: .95; }
.msl-404-texte { max-width: 34em; margin: 18px 0 22px; font-size: 20px; }
.msl-auteur-tete { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 34px; align-items: center; padding: clamp(30px, 4.6vw, 60px) 0; }
.msl-auteur-tete .msl-portrait--g { width: 160px; height: 160px; padding: 8px; }
.msl-auteur-tete h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: .98; }
.msl-auteur-role { margin: 8px 0 0; font: 600 18px var(--titres); font-stretch: 100%; color: var(--sillon); }
.msl-auteur-bio { max-width: 40em; margin: 12px 0 0; font-size: 19px; }
@media (max-width: 760px) {
	.msl-404-scene { grid-template-columns: 1fr; }
	.msl-auteur-tete { grid-template-columns: 96px 1fr; gap: 18px; }
	.msl-auteur-tete .msl-portrait--g { width: 96px; height: 96px; padding: 5px; }
}

/* ------------------------- infographies des articles ------------------------- */
sbs-lieu, sbs-tarifs, sbs-frise, sbs-jauges { display: block; margin: 1.8em 0; padding: 18px 20px 14px; background: var(--sb-surf); border-top: 6px solid var(--noir); border-radius: 0 0 6px 6px; }
.sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre, .sbs_lieu_nom { display: block; margin-bottom: 12px; font: 800 22px/1.15 var(--titres); font-stretch: 85%; color: var(--noir); }
sbs-tarif { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--filet); }
.sbs_tarif_libelle { grid-column: 1 / -1; font: 600 15.5px/1.35 var(--lecture); color: var(--noir); }
.sbs_tarif_barre { width: 100%; height: 12px; border: 0; border-radius: 6px; background: #E3D5B8; -webkit-appearance: none; appearance: none; }
.sbs_tarif_barre::-webkit-meter-bar { height: 12px; border: 0; border-radius: 6px; background: #E3D5B8; }
.sbs_tarif_barre::-webkit-meter-optimum-value, .sbs_tarif_barre::-webkit-meter-suboptimum-value, .sbs_tarif_barre::-webkit-meter-even-less-good-value { border-radius: 6px; background: var(--noir); }
.sbs_tarif_barre::-moz-meter-bar { border-radius: 6px; background: var(--noir); }
.sbs_tarif_prix { font: 700 20px/1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; }
.sbs_tarifs_notes, .sbs_source { display: block; margin-top: 10px; font: 500 13.5px/1.4 var(--titres); font-stretch: 100%; color: var(--sillon); }
sbs-etape { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--filet); }
.sbs_etape_date { font: 700 15px/1.4 var(--titres); font-stretch: 100%; color: var(--pastille-f); }
.sbs_etape_titre { font: 700 17px/1.35 var(--lecture); }
.sbs_etape_desc { grid-column: 2; font: 400 15px/1.45 var(--lecture); color: var(--sillon); }
sbs-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 20px; }
.sbs_jauges_titre { grid-column: 1 / -1; }
sbs-jauge { display: block; padding: 8px 0; border-top: 1px solid var(--filet); }
.sbs_jauge_libelle { display: block; font: 600 14.5px/1.3 var(--lecture); color: var(--sillon); }
.sbs_jauge_valeur { font: 700 clamp(34px, 4vw, 48px)/1.1 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; }
.sbs_jauge_unite { margin-left: 4px; font: 600 15px var(--titres); }
sbs-lieu address { margin: 0 0 6px; font-style: normal; font: 500 16px/1.5 var(--lecture); }
.sbs_lieu_acces { display: block; font: 500 14px/1.4 var(--titres); color: var(--sillon); }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font: 700 15px var(--titres); font-stretch: 100%; color: var(--noir); }
.sbs_icone_repere { fill: none; stroke: currentColor; stroke-width: 2; }

/* ------------------------- réglages mesurés : chaque section d'accueil tient dans la fenêtre ------------------------- */
.msl-onglet--p { padding: 4px 9px 3px; font-size: 12px; }
.msl-fond-noir .msl-onglet { box-shadow: 0 0 0 1px rgba(244, 236, 221, .5); }
.msl-carte--m .msl-carte-titre, .msl-carte--s .msl-carte-titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 2. la liste : six pistes par face, lignes serrées */
.msl-liste { padding-block: clamp(30px, 3.2vw, 46px); }
.msl-liste .msl-sec-titre { margin-bottom: 18px; }
.msl-facex-nom span { margin-left: .35em; font: italic 500 17px/1 var(--lecture); letter-spacing: 0; color: var(--sillon); }
.msl-liste .msl-piste-lien { padding: 6px 6px; }
.msl-liste .msl-piste-vign { flex-basis: 56px; width: 56px; height: 56px; }
.msl-liste .msl-piste-txt { gap: 4px; }
.msl-liste .msl-piste-titre { font-size: 17.5px; }

/* 3. le bac Musique : l'intercalaire a la hauteur du bac et porte quatre titres */
.msl-musique { padding-block: clamp(32px, 3.4vw, 50px); }
.msl-musique-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 824px); gap: 36px; align-items: stretch; }
.msl-musique-bac { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; }
.msl-musique-m { gap: 18px; }
.msl-musique-m .msl-carte-titre { -webkit-line-clamp: 2; }
.msl-musique-g .msl-carte-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msl-intercalaire { display: flex; flex-direction: column; padding: 26px 28px 28px; }
.msl-intercalaire-n { margin-bottom: 16px; }
.msl-intercalaire .msl-styles { margin-bottom: 18px; }
.msl-intercalaire-suite { flex: 1 1 auto; display: flex; flex-direction: column; list-style: none; margin: 0 0 22px; padding: 0; border-top: 3px solid currentColor; }
.msl-intercalaire-suite li { flex: 1 1 auto; display: flex; }
.msl-intercalaire-suite a { flex: 1 1 auto; }
.msl-intercalaire-suite a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(23, 20, 26, .4); color: inherit; text-decoration: none; font: 600 17.5px/1.25 var(--lecture); }
.msl-intercalaire-suite a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msl-intercalaire-suite a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.msl-intercalaire-suite em { flex: none; font: 700 14px/1 var(--titres); font-style: normal; font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; }
.msl-intercalaire .msl-bouton { margin-top: auto; align-self: flex-start; }

/* 5. le hit-parade : le n° 1 a la largeur de sa pochette, la liste a la même hauteur que lui */
.msl-hit { padding: clamp(56px, 5.2vw, 72px) 0 clamp(34px, 3.6vw, 50px); }
.msl-hit .msl-sec-titre { margin-bottom: 24px; }
.msl-hit-grille { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: stretch; }
.msl-hit-un { max-width: none; }
.msl-hit-un .msl-carte-titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 23px; }
.msl-hit-chapo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font: 400 15.5px/1.45 var(--lecture); color: #D6CDBD; }
.msl-hit-liste { grid-template-rows: repeat(5, minmax(78px, 1fr)); }
.msl-hit-ligne a { height: 100%; padding: 8px 0; }
.msl-hit-n { flex-basis: 1.2em; }

/* 6, 7. les bacs : tête compacte, pistes serrées */
.msl-duo, .msl-trio, .msl-bis { padding-block: clamp(32px, 3.4vw, 48px); }
.msl-bac .msl-sec-titre { margin-bottom: 20px; }
.msl-bac--duo .msl-carte--b .msl-carte-lien { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; }
.msl-carte--b .msl-carte-titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msl-pistes--bac .msl-piste-lien { padding: 7px 4px; }
.msl-pistes--bac .msl-piste-vign { flex-basis: 52px; width: 52px; height: 52px; }
.msl-pistes--bac .msl-piste-titre { font-size: 17px; }
.msl-pistes--bac .msl-piste-txt { gap: 3px; }
.msl-voirbac { margin-top: 12px; }

/* 9. la maison : marge franche avant le pied */
.msl-maison { padding-bottom: clamp(56px, 6vw, 84px); }
.msl-chiffres li { min-width: 0; }

/* article : panneau et colonne groupés, gouttière de 56 px, texte centré dans son panneau */
.sb-art-corps { gap: 56px; }
.sb-art-principal { max-width: none; }
.sb-texte { max-width: 44rem; margin-inline: auto; }
.sb-art-principal > .sb-sommaire-mobile, .sb-art-principal > .sb-auteur-carte { max-width: 44rem; margin-inline: auto; }
.sb-art-principal > .sb-auteur-carte { margin-top: 46px; }

/* listes du corps : des fiches, jamais des puces serrées */
.sb-texte > ul:not([class]), .sb-texte > ol:not([class]) { list-style: none; display: grid; gap: 10px; margin: 1.6rem 0; padding: 0; counter-reset: fiche; }
.sb-texte > ul:not([class]) > li, .sb-texte > ol:not([class]) > li { position: relative; margin: 0; padding: 14px 18px 14px 56px; background: var(--sb-surf); border: 1px solid var(--filet); border-left: 5px solid var(--sb-rub, var(--pastille)); border-radius: 6px; font: 500 17px/1.55 var(--lecture); }
.sb-texte > ul:not([class]) > li::before { content: ""; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--pastille) 0 24%, transparent 25%), var(--sillons); }
.sb-texte > ol:not([class]) > li { counter-increment: fiche; }
.sb-texte > ol:not([class]) > li::before { content: counter(fiche); position: absolute; left: 16px; top: 13px; width: 28px; font: 700 22px/1.3 var(--titres); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; text-align: center; color: var(--sb-accent-fort); }
.sb-texte .sb-cards { display: grid; gap: 10px; padding: 0; background: none; border: 0; }
.sb-texte .sb-cards > li { padding: 14px 18px 14px 58px; background: var(--sb-surf); border: 1px solid var(--filet); border-left: 5px solid var(--sb-rub, var(--pastille)); border-radius: 6px; font-size: 17px; }
.sb-texte .sb-cards > li + li { border-top: 1px solid var(--filet); }
.sb-texte .sb-cards > li::before { left: 18px; top: 15px; width: 1.55rem; height: 1.55rem; background-size: .9rem; }
.sb-sources { padding: 24px 26px 22px; }
.sb-sources ul, .sb-sources ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sb-sources li, .sb-sources li:first-child { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; font: 500 15.5px/1.5 var(--lecture); overflow-wrap: anywhere; }
.sb-sources ol li::before { flex: 0 0 28px; height: 28px; font: 700 14px/28px var(--titres); }
.sb-compare-card { min-width: 0; }
.sb-compare-card h3, .sb-compare-row dt, .sb-compare-row dd { overflow-wrap: anywhere; }
.sbs_tableau:has(> .sb-compare) { overflow: visible; }
@media (max-width: 700px) {
	.sb-compare { grid-template-columns: minmax(0, 1fr); }
	.sb-sources ul, .sb-sources ol { grid-template-columns: minmax(0, 1fr); }
	.sb-sources { padding: 20px 16px 16px; }
	.sb-texte > ul:not([class]) > li, .sb-texte > ol:not([class]) > li, .sb-texte .sb-cards > li { padding-left: 52px; font-size: 16.5px; }
}

/* barre latérale trop haute pour la fenêtre : elle se resserre, elle ne défile jamais à l'intérieur */
.sb-colle[data-dense] .sb-sommaire { padding: .95rem 1rem .45rem; }
.sb-colle[data-dense] .sb-sommaire-barre { margin: .6rem 0 .25rem; }
.sb-colle[data-dense] .sb-sommaire a { padding: .34rem .5rem; font-size: 14.5px; line-height: 1.26; }
.sb-colle[data-dense] .sb-sommaire a::before { font-size: 12.5px; }
.sb-colle[data-dense] .msl-souffle { margin-top: 12px; padding: 12px 14px 14px; }
.sb-colle[data-dense] .msl-souffle-titre { margin-bottom: 8px; font-size: 18px; }
.sb-colle[data-dense="2"] .msl-souffle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sb-colle[data-dense="2"] .msl-souffle > .msl-souffle-titre, .sb-colle[data-dense="2"] .msl-souffle > .msl-retour { grid-column: 1 / -1; margin-bottom: 0; }
.sb-colle[data-dense="2"] .msl-souffle .msl-champ { margin: 0; }
.sb-colle[data-dense="2"] .msl-souffle textarea.msl-champ { display: none; grid-column: 1 / -1; order: 3; }
.sb-colle[data-dense="2"] .msl-souffle:focus-within textarea.msl-champ { display: block; }
.sb-colle[data-dense="2"] .msl-souffle .msl-bouton { width: auto; min-height: 46px; padding: 0 18px; }
.sb-alire a svg { display: none; }

/* pages annexes : la colonne de la photo porte aussi du contenu */
.msl-dos-grille { align-items: start; }
.msl-dos-photo { position: static; }
.msl-dos-g > h2:first-of-type { margin-top: 34px; }
.msl-dos-g .msl-equipe { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.msl-dos .msl-etapes li { padding-bottom: 20px; }
.msl-dos-g .sb-texte p { margin-bottom: .8em; }
.msl-dos-g .sb-texte .msl-voirbac { margin: 0 0 0 14px; }

/* les bacs côte à côte de la section à deux rubriques */
.msl-trio .msl-bac--cote .msl-bac-corps { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
.msl-bac--cote .msl-carte--b .msl-heure { display: none; }

/* pied : le compteur reste sur la ligne de sa rubrique */
.sb-pied-rubrique-tete { flex-wrap: nowrap; width: 100%; }
.sb-pied-compte { margin-left: auto; white-space: nowrap; }

/* menu : neuf onglets sur une seule ligne dès 1100 px */
.msl-onglets ul { flex-wrap: nowrap; }
@media (min-width: 1100px) and (max-width: 1400px) {
	.msl-entete-in { gap: 16px; }
	.msl-ong { padding-inline: 9px; font-size: 12.5px; letter-spacing: .03em; }
}

/* pied : deux colonnes de hauteurs proches (rubriques + le site, derniers titres) */
.sb-pied-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
.msl-pied-site { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); }
.msl-pied-site .sb-pied-liste { display: flex; flex-wrap: wrap; gap: 2px 26px; }
.msl-pied-site .sb-pied-liste a { min-height: 40px; display: inline-flex; align-items: center; }

/* ------------------------- tablettes et mobiles ------------------------- */
@media (max-width: 1099px) {
	.msl-musique-grille { grid-template-columns: 1fr; }
	.msl-intercalaire { display: grid; grid-template-columns: 1fr; }
	.msl-bacs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msl-bacs--3 .msl-bac:nth-child(n) .msl-sec-titre { margin-top: 0; }
	.msl-lot--grille, .related .msl-lot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-pied-grille { grid-template-columns: 1fr 1fr; gap: 36px; }
	.msl-musique-grille { grid-template-columns: 1fr; }
	.msl-musique-bac { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
	.msl-intercalaire .msl-bouton { margin-top: 0; }
}
@media (max-width: 879px) {
	body { font-size: 17px; }
	.msl-platine { display: none; }
	.msl-musique-bac { grid-template-columns: 1fr; }
	.msl-musique-g { max-width: 440px; }
	.msl-immersion { min-height: 440px; }
	.msl-immersion-titre { max-width: 100%; font-size: 34px; }
	.msl-quart { width: 70vw; right: -26vw; bottom: -30px; }
	.msl-hit-grille { grid-template-columns: 1fr; }
	.msl-hit-un { max-width: 320px; }
	.msl-hit-liste { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
	.msl-hit-ligne a { height: auto; }
	.msl-bacs--2, .msl-bacs--3 { grid-template-columns: 1fr; }
	.msl-bac--cote .msl-bac-corps { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; }
	.msl-maison-grille { grid-template-columns: 1fr; }
	.msl-rang1 { grid-template-columns: 1fr; }
	.msl-lot--mosaique { grid-template-columns: 1fr; }
	.msl-lot--grille, .related .msl-lot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.msl-carte--h .msl-carte-lien { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 14px; }
	.sb-pied-grille { grid-template-columns: 1fr; }
	.msl-faces { grid-template-columns: 1fr 1fr; }
	.sb-pied-loupe { width: 100%; }
	.sb-pied-loupe input { flex: 1; min-width: 0; }
	.msl-bac--duo .msl-carte--b .msl-carte-lien { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px; }
	.msl-contact { padding-top: 12px; }
	.msl-fiche { margin-top: 34px; padding: 16px 16px 18px; }
	.msl-fiche h1 { margin-bottom: 10px; font-size: 27px; }
	.msl-form, .msl-form-2 { gap: 8px; }
	.msl-form label { margin-bottom: 3px; }
	.msl-form .msl-champ { min-height: 44px; padding: 8px 12px; }
	.msl-form textarea.msl-champ { min-height: 60px; }
	.msl-form .msl-consent { font-size: 13.5px; line-height: 1.35; }
}
@media (max-width: 520px) {
	.msl-carte--b .msl-carte-lien { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px; }
	.msl-carte-titre { font-size: 17px; }
	.msl-piste-vign { flex-basis: 56px; width: 56px; height: 56px; }
	.msl-piste-titre { font-size: 17px; }
	.msl-piste-duree { font-size: 13px; }
	.msl-chiffre { font-size: 48px; }
	.msl-faces { grid-template-columns: 1fr; }
	.msl-lot--pistes .msl-piste-vign { flex-basis: 72px; width: 72px; height: 72px; }
	.msl-lot--pistes .msl-piste-titre { font-size: 18px; }
	.msl-inter-ongs .msl-ong--s { padding: 12px 14px 10px; }
}

/* =====================================================================
   PASSE DE CORRECTIONS n°2 (09/10/2026), défauts relevés par le juge visuel
   ===================================================================== */

/* A. tableau comparatif : jamais une fiche tranchée par le bord. Le cadre qui défile (extension) ne rogne plus ;
   les fiches passent à la ligne quand trois ne tiennent pas dans la colonne de texte. */
.sb-texte [class*="__tbl"]:has(.sb-compare), .sb-texte .sbs_tableau:has(.sb-compare) { overflow: visible; border: 0; border-radius: 0; margin: 0; padding: 0; background: none; box-shadow: none; }
.sb-texte [class*="__tbl"]:has(.sb-compare) { margin: 1.75rem 0; }
.sb-compare { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.sb-compare-card { overflow-wrap: break-word; }

/* B. le disque de la semaine sur téléphone : un petit disque dans le coin bas droit, hors du texte */
.msl-immersion-chapo { max-width: min(46em, calc(100% - 420px)); }
@media (max-width: 879px) {
	.msl-immersion-chapo { max-width: 46em; }
	.msl-quart { width: 128px; right: -34px; bottom: -34px; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.45); }
	.msl-quart::after { inset: 34%; box-shadow: 0 0 0 3px rgba(0,0,0,.4); }
	.msl-immersion { padding-bottom: 56px; }
}

/* C. titres entiers sur téléphone : les bacs à pochette à gauche passent en une colonne, photo en haut, titres sur toute la largeur */
@media (max-width: 879px) {
	.msl-bac--cote .msl-bac-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.msl-bac--cote .msl-carte--b .msl-cadre { aspect-ratio: 16 / 10; }
	.msl-bac--cote .msl-cadre .msl-disque { width: auto; height: 92%; }
	.msl-bac--cote .msl-carte--b .msl-carte-titre { font-size: 20px; -webkit-line-clamp: 3; }
	.msl-bac--cote .msl-pistes { margin-top: 0; }
	.msl-pistes--bac .msl-piste-titre, .msl-liste .msl-piste-titre, .msl-hit-titre, .msl-carte--s .msl-carte-titre, .msl-carte--m .msl-carte-titre { -webkit-line-clamp: 3; }
}
@media (max-width: 879px) {
	.msl-pistes--bac .msl-piste-titre, .msl-liste .msl-piste-titre, .msl-hit-titre, .msl-carte--s .msl-carte-titre, .msl-carte--m .msl-carte-titre, .msl-lot--pistes .msl-piste-titre { -webkit-line-clamp: 4; }
}
@media (max-width: 520px) {
	.msl-piste-titre, .msl-carte--b .msl-carte-titre, .msl-musique-g .msl-carte-titre, .msl-musique-m .msl-carte-titre { -webkit-line-clamp: 4; }
	.msl-piste-lien { gap: 10px; }
	.msl-pistes--bac .msl-piste-vign, .msl-lot--pistes .msl-piste-vign { flex-basis: 48px; width: 48px; height: 48px; }
}

/* 11. les trois rubriques : alignement net, titres de une plus longs */
.msl-bacs--3 .msl-bac:nth-child(2) .msl-sec-titre, .msl-bacs--3 .msl-bac:nth-child(3) .msl-sec-titre { margin-top: 0; }
@media (min-width: 880px) { .msl-bac--trio .msl-carte--b .msl-carte-titre { -webkit-line-clamp: 5; } }

/* D. en-têtes de rubrique : la phrase sous le nom, la pochette de la rubrique à droite avec son disque */
.msl-inter { position: relative; z-index: 3; padding-top: clamp(28px, 3.4vw, 50px); }
.msl-inter-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: end; }
.msl-inter-texte { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.msl-inter-nom { font-size: clamp(52px, 7.2vw, 112px); }
.msl-inter-desc { max-width: 30em; margin: 14px 0 0; font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--lecture); }
.msl-inter-n { margin: 12px 0 24px; }
.msl-inter-ongs { margin-top: auto; }
.msl-inter-objet { --so: clamp(190px, 20vw, 290px); position: relative; width: var(--so); height: var(--so); margin: 0 calc(var(--so) * .58) calc(var(--so) * -.17) 0; align-self: end; z-index: 4; transform: rotate(2.5deg); }
.msl-inter-objet .msl-disque { z-index: 0; top: 4%; right: calc(var(--so) * -.56); width: auto; height: 92%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 30px rgba(40,20,40,.3); }
.msl-inter-objet .msl-disque i { width: 36%; font: 800 clamp(18px, 2vw, 28px)/1 var(--titres); font-stretch: 90%; }
.msl-inter-objet .msl-img { z-index: 2; background: rgba(0,0,0,.18); box-shadow: var(--o2); }
.msl-inter-objet .msl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msl-inter:not(.msl-inter--objet) .msl-inter-objet { margin: 0 clamp(20px, 4vw, 60px) calc(var(--so) * -.1) 0; transform: none; }
.msl-inter:not(.msl-inter--objet) .msl-inter-objet .msl-img { display: none; }
.msl-inter:not(.msl-inter--objet) .msl-inter-objet .msl-disque { right: 0; top: 0; height: 100%; }
.msl-inter--objet + .msl-bac-page { padding-top: clamp(60px, 6vw, 92px); }
@media (max-width: 879px) { .msl-inter-objet { --so: 150px; margin-right: calc(var(--so) * .5); } }
@media (max-width: 700px) {
	.msl-inter-grille { display: block; }
	.msl-inter:not(.msl-inter--objet) .msl-inter-objet { display: none; }
	.msl-inter-grille { position: relative; }
	.msl-inter--objet .msl-inter-objet { --so: 84px; position: absolute; top: 0; right: 6px; margin: 0; transform: rotate(3deg); }
	.msl-inter--objet .msl-inter-objet .msl-disque { display: none; }
	.msl-inter--objet .msl-inter-nom { max-width: calc(100% - 104px); }
	.msl-inter--objet + .msl-bac-page { padding-top: clamp(34px, 4.4vw, 60px); }
	.msl-inter-n { margin-bottom: 20px; }
}

/* E. articles anciens : listes longues = liste simple et aérée ; blocs de liens = liste sobre ; « Source » discret */
.sb-texte ul.sb-liste-simple { display: block; margin: 1.5rem 0; padding: 0; background: none; border: 0; }
.sb-texte ul.sb-liste-simple > li { position: relative; margin: 0; padding: .5rem 0 .5rem 1.7rem; background: none; border: 0; border-radius: 0; font: 400 17.5px/1.6 var(--lecture); }
.sb-texte ul.sb-liste-simple > li + li { border-top: 0; }
.sb-texte ul.sb-liste-simple > li::before { left: 4px; top: 1.08em; width: 9px; height: 9px; background: var(--pastille); background-image: none; box-shadow: 0 0 0 3px rgba(23,20,26,.88); }
.sb-texte ul.sb-liste-liens { display: block; margin: 1.3rem 0; padding: 0; background: none; border: 0; }
.sb-texte ul.sb-liste-liens > li { margin: 0; padding: .5rem 0; background: none; border: 0; border-bottom: 1px dotted var(--filet); border-radius: 0; font: 500 15.5px/1.5 var(--lecture); color: var(--sillon); }
.sb-texte ul.sb-liste-liens > li:last-child { border-bottom: 0; }
.sb-texte ul.sb-liste-liens > li::before { content: none; }
.sb-texte ul.sb-liste-liens > li a { font-weight: 700; overflow-wrap: anywhere; }
.sb-texte a.msl-src { margin-left: .2em; font: 600 12.5px/1 var(--titres); font-stretch: 100%; letter-spacing: .02em; color: var(--sillon); text-decoration: none; border-bottom: 1px dotted currentColor; white-space: nowrap; }
.sb-texte a.msl-src:hover, .sb-texte a.msl-src:focus-visible { color: var(--sb-accent-fort); border-bottom-style: solid; }

/* F. « La maison » : trois chiffres de même largeur, l'un sous l'autre */
.msl-chiffres { grid-template-columns: minmax(0, 1fr); gap: 0; }
.msl-chiffres li { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px); padding: 12px 0 10px; border-top: 4px solid var(--noir); }
.msl-chiffres li + li { margin-top: 12px; }
.msl-chiffre { flex: 0 0 3.3ch; min-width: 0; font-size: clamp(52px, 5.4vw, 84px); }
.msl-chiffres span { margin: 0; font: 600 20px/1.3 var(--lecture); }

/* G. Qui sommes-nous : la photo en portrait équilibre les deux colonnes */
.msl-dos--propos .msl-dos-photo .msl-img { aspect-ratio: 4 / 5; }

/* 9. en-tête d'article sur téléphone : la durée est déjà écrite sous l'auteur, le disque n'en porte plus */
@media (max-width: 960px) { .msl-pochette-ouverte .msl-disque i { display: none; } }

/* 12. dernier pressage : la pastille porte le jour et l'heure */
.msl-pastille--h { white-space: nowrap; }

/* 14. pied de page : le point de la rubrique Actualité (noir) reste visible sur le fond noir */
.sb-pied-rubrique-point { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }

/* ------------------------- mouvement réduit ------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.msl-carte-lien:hover .msl-disque { transform: none; }
}

/* Titres jamais coupés par « … » : une ligne de plus plutôt qu'un mot tronqué (accueil, rubriques, listes). */
.msl .msl-carte-titre, .msl .msl-piste-titre, .msl .msl-hit-titre, .msl .msl-intercalaire-suite a span {
	display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; max-height: none; text-overflow: clip;
}