@charset "UTF-8";

/* ==========================================================
   IPM TOOLS-DESIGN | marque-lalibre.css
   Surcouche La Libre de la fiche marque (marque.css).
   Polices self-hostées, nuanciers, rubriques, composants,
   bloc développeurs. Aucune valeur DH ne fuit ici.
   ========================================================== */

/* ---------- Polices (Fontsource, OFL) ---------- */
@font-face { font-family: "Manuale"; src: url("../fonts/Manuale-VF.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manuale"; src: url("../fonts/Manuale-Italic-VF.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/LibreFranklin-VF.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Thème de marque ---------- */
.marque-shell[data-brand="lalibre"] {
  --b-primary: #061e4d;
  --b-accent: #ac115d;
  --b-accent2: #f7b500;
  --llb-title: "Manuale", Georgia, serif;
  --llb-base: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[data-theme="dark"] .marque-shell[data-brand="lalibre"] { --b-accent: #f06aa9; }

[data-brand="lalibre"] ::selection { background: #ac115d; color: #fff; }

/* ---------- Hero ---------- */
.llb-hero__logo { width: auto; height: auto; margin-bottom: 34px; display: block; }
.llb-hero__logo img { height: 64px; width: auto; max-height: none; }
.llb-hero__logo .is-dark { display: none; }
[data-theme="dark"] .llb-hero__logo .is-light { display: none; }
[data-theme="dark"] .llb-hero__logo .is-dark { display: block; }
.llb-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: flex; }
.llb-hero__bar span { flex: 1; }

.llb-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.llb-meta li { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.llb-meta b { color: var(--ink); font-weight: 600; }

/* ---------- Statut des infos ---------- */
.llb-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line-strong); color: var(--ink-soft); vertical-align: middle; margin-left: 8px; }
.llb-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.llb-status--ok { color: #2f8f4e; border-color: currentColor; }
.llb-status--todo { color: #c47a00; border-color: currentColor; }
[data-theme="dark"] .llb-status--ok { color: #5fd18a; }
[data-theme="dark"] .llb-status--todo { color: #f2c93d; }

.llb-note { border-left: 3px solid var(--b-accent); padding: 14px 18px; background: var(--bg-2); font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; margin: 18px 0 26px; }
.llb-note strong { color: var(--ink); }

/* ---------- Logo ---------- */
.logo-board--llb { min-height: 280px; }
.logo-board--llb img { height: 96px; width: auto; max-height: none; }

.llb-clear { position: relative; display: inline-block; padding: 28px; outline: 1px dashed var(--b-accent); outline-offset: 0; }
.llb-clear img { height: 72px; width: auto; }
.llb-clear__tag { position: absolute; top: -10px; left: 12px; background: var(--bg-2); padding: 0 6px; font-family: var(--f-mono); font-size: 11px; color: var(--b-accent); }

.logo-variant--magenta { background: #ac115d; }
.logo-variant--marine { background: #061e4d; }
.logo-variant--graphite { background: #262729; }
.logo-variant--photo { background: linear-gradient(160deg, rgba(6,30,77,.15), rgba(6,30,77,.75)), linear-gradient(135deg, #8a7b6a, #3a3f4a 60%, #1c2029); }
.logo-variant img { max-height: 34px; max-width: 72%; width: auto; }
.logo-variant { position: relative; }
.logo-variant__cap { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,.75); }
.logo-variant--light .logo-variant__cap { color: #686868; }

/* ---------- Nuancier ---------- */
.swatches--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .swatches--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swatches--4 { grid-template-columns: 1fr; } }
.swatch__chip { position: relative; display: flex; align-items: flex-end; padding: 12px 14px; }
.swatch__chip--line { border-bottom: 1px solid var(--line); }
.swatch__var { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.85); }
.swatch__chip--light .swatch__var { color: rgba(0,0,0,.6); }
.swatch__aa { font-family: var(--f-mono); font-size: 10px; margin-top: 8px; color: var(--muted); }

button.copy { all: unset; cursor: pointer; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); border-bottom: 1px dotted var(--line-strong); }
button.copy:hover, button.copy:focus-visible { color: var(--b-accent); border-color: var(--b-accent); }
button.copy.is-copied { color: #2f8f4e; border-color: transparent; }

.shades { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); margin: 20px 0 8px; }
.shade { height: 92px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-family: var(--f-mono); font-size: 11px; color: #fff; }
.shade b { font-weight: 600; }
.shade--ink { color: #262729; }
@media (max-width: 640px) { .shade { height: 74px; font-size: 10px; padding: 6px; } }

.gradient-demo--llb { background: linear-gradient(270deg, #08619b, #061e4d); }

/* Puces de couleur (générées, pas de style inline) */
.c-magenta { background: #ac115d; } .c-magenta-dark { background: #930a4d; } .c-magenta-darker { background: #630734; }
.c-magenta-light { background: #bc407d; } .c-magenta-vivid { background: #ef147f; }
.c-marine { background: #061e4d; } .c-marine-accent { background: #08619b; }
.c-graphite { background: #262729; } .c-black { background: #111111; } .c-grey { background: #686868; }
.c-grey-light { background: #bdbdbd; } .c-grey-lighter { background: #e0e0e0; } .c-warm-grey { background: #e3e0e0; }
.c-surface { background: #f2f2f2; } .c-white { background: #ffffff; }
.c-pay { background: #f2c93d; } .c-pay-dark { background: #f7b500; } .c-pay-darker { background: #5d3c10; } .c-pay-light { background: #ffe559; }

/* ---------- Rubriques ---------- */
.rubs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0; }
@media (max-width: 760px) { .rubs { grid-template-columns: 1fr; } }
.rub { border: 1px solid var(--line); display: grid; grid-template-columns: 112px 1fr; overflow: hidden; }
.rub__chips { display: grid; grid-template-rows: 2fr 1fr 1fr; }
.rub__chips span { display: block; }
.rub__body { padding: 14px 16px; }
.rub__name { font-family: var(--llb-title); font-weight: 800; font-size: 22px; line-height: 1.1; margin: 0 0 10px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.rub__name::before { content: ""; width: 4px; height: 20px; background: var(--rub); }
.rub__row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); padding: 3px 0; border-top: 1px solid var(--line); }
.rub__row span:first-child { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.rub__aa { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; padding: 1px 6px; border: 1px solid currentColor; }
.rub__aa--ko { color: #c0392b; } .rub__aa--ok { color: #2f8f4e; }
[data-theme="dark"] .rub__aa--ko { color: #ff8a7a; } [data-theme="dark"] .rub__aa--ok { color: #5fd18a; }

.rub-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.rub-pill { font-family: var(--llb-base); font-weight: 600; font-size: 13px; color: #fff; padding: 6px 12px; border-radius: 0.25rem; }

/* ---------- Typographie ---------- */
.specimen--manuale .specimen__big { font-family: var(--llb-title); font-weight: 800; letter-spacing: -0.015em; }
.specimen--manuale .specimen__set { font-family: var(--llb-title); font-weight: 600; }
.specimen--franklin .specimen__big { font-family: var(--llb-base); font-weight: 700; letter-spacing: -0.02em; }
.specimen--franklin .specimen__set { font-family: var(--llb-base); font-weight: 500; }
.specimen__meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.type-role__w { flex: 0 0 280px; }
.type-role__w--m8 { font-family: var(--llb-title); font-weight: 800; font-size: 20px; }
.type-role__w--m8i { font-family: var(--llb-title); font-weight: 800; font-style: italic; font-size: 20px; }
.type-role__w--m6 { font-family: var(--llb-title); font-weight: 600; font-size: 20px; }
.type-role__w--f7 { font-family: var(--llb-base); font-weight: 700; font-size: 18px; }
.type-role__w--f6 { font-family: var(--llb-base); font-weight: 600; font-size: 18px; }
.type-role__w--f5 { font-family: var(--llb-base); font-weight: 500; font-size: 18px; }
.type-role__w--f4 { font-family: var(--llb-base); font-weight: 400; font-size: 18px; }

.scale { margin: 26px 0; border-top: 1px solid var(--line); }
.scale__row { display: grid; grid-template-columns: 1fr 210px; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.scale__sample { color: var(--ink); overflow-wrap: anywhere; }
.scale__spec { font-family: var(--f-mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.scale__spec b { display: block; color: var(--ink-soft); font-weight: 600; font-size: 12px; }
.s-page { font-family: var(--llb-title); font-weight: 800; font-size: 36.8px; line-height: 40px; }
.s-chain { font-family: var(--llb-title); font-weight: 800; font-size: 30px; line-height: 40px; }
.s-story { font-family: var(--llb-title); font-weight: 800; font-size: 32px; line-height: 40px; }
.s-hero { font-family: var(--llb-title); font-weight: 700; font-size: 21px; line-height: 32px; }
.s-teaser { font-family: var(--llb-title); font-weight: 600; font-size: 18px; line-height: 22px; }
.s-chapo { font-family: var(--llb-base); font-weight: 500; font-size: 18px; line-height: 27px; }
.s-box { font-family: var(--llb-base); font-weight: 700; font-size: 21px; line-height: 22px; color: #ac115d; }
[data-theme="dark"] .s-box { color: #f06aa9; }
.s-menu { font-family: var(--llb-base); font-weight: 600; font-size: 13px; line-height: 18px; }
@media (max-width: 640px) { .scale__row { grid-template-columns: 1fr; gap: 6px; } .s-page { font-size: 30px; line-height: 34px; } }

/* ---------- Composants ---------- */
.comp-board { border: 1px solid var(--line); background: #fff; color: #262729; padding: 30px; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.comp-board--dark { background: #1f1e1c; color: #f1eded; }
.llb-btn { font-family: var(--llb-title); font-weight: 500; font-size: 16px; line-height: 1; padding: 0.5rem 0.75rem; border-radius: 0.25rem; border: 1px solid #bdbdbd; background: #fff; color: #262729; cursor: pointer; transition: all 0.3s cubic-bezier(.4,0,.2,1); }
.llb-btn--primary { background: #262729; border-color: #262729; color: #fff; box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.llb-btn--primary:hover { background: #111; border-color: #111; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.llb-btn--pay { font-family: var(--llb-base); font-weight: 600; background: #f2c93d; border-width: 0; color: #5d3c10; box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.llb-btn--pay:hover { background: #f7b500; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.llb-btn--brand { background: #ac115d; border-color: #ac115d; color: #fff; }
.llb-btn--brand:hover { background: #930a4d; border-color: #930a4d; }
.llb-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(172,17,93,.5); }
.llb-gift { background: #f7b500; color: #5d3c10; border-radius: 9999px; font-family: var(--llb-base); font-size: 13px; font-weight: 600; line-height: 1; padding: 0.3rem 0.75rem; }
.llb-tag { font-family: var(--llb-base); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #ac115d; border: 1px solid #ac115d; border-radius: 0.25rem; padding: 3px 8px; }

.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); background: #fff; color: #262729; margin: 22px 0; }
@media (max-width: 760px) { .teasers { grid-template-columns: 1fr; } }
.teaser { padding: 18px; border-right: 1px solid #e0e0e0; }
.teaser:last-child { border-right: 0; }
.teaser__img { aspect-ratio: 16/10; margin-bottom: 12px; position: relative; overflow: hidden; }
.teaser__img--1 { background: linear-gradient(135deg, #dfbb7c, #8a6c39); }
.teaser__img--2 { background: linear-gradient(135deg, #0f5fd5, #00327b); }
.teaser__img--3 { background: linear-gradient(135deg, #00b596, #00715e); }
.teaser__tags { font-family: var(--llb-base); font-size: 12px; font-weight: 600; text-transform: uppercase; color: #686868; margin-bottom: 6px; }
.teaser__tags b { color: var(--rub); font-weight: 700; }
.teaser__title { font-family: var(--llb-title); font-weight: 600; font-size: 18px; line-height: 22px; margin: 0; }
.teaser__title .lock { display: inline-block; background: #f2c93d; color: #5d3c10; font-family: var(--llb-base); font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 2px; vertical-align: 2px; margin-right: 4px; }

.chain-demo { border: 1px solid var(--line); margin: 22px 0; }
.chain-demo__head { background: var(--rub); color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--llb-title); font-weight: 800; font-size: 26px; }
.chain-demo__head small { font-family: var(--llb-base); font-weight: 600; font-size: 13px; opacity: .9; }
.chain-demo__body { background: var(--rub-dark); height: 10px; }

/* Les cartes rubriques portent leur couleur via des classes */
.r-belgique { --rub: #bd9e68; --rub-dark: #8a6c39; }
.r-economie { --rub: #0548aa; --rub-dark: #040533; }
.r-international { --rub: #0b57c7; --rub-dark: #00327b; }
.r-planete { --rub: #00a186; --rub-dark: #00715e; }
.r-culture { --rub: #f24f4f; --rub-dark: #bf2424; }
.r-debats { --rub: #969696; --rub-dark: #666666; }
.r-lifestyle { --rub: #d13c6e; --rub-dark: #800647; }
.r-sports { --rub: #66bb6a; --rub-dark: #389d3d; }
.r-regions { --rub: #f28237; --rub-dark: #d55d0d; }
.r-network { --rub: #298ece; --rub-dark: #005c97; }
.rub-pill { background: var(--rub); }
.rub__c1 { background: var(--rub); } .rub__c2 { background: var(--rub-dark); } .rub__c3 { background: var(--rub-2); }
.r-belgique { --rub-2: #dfbb7c; } .r-economie { --rub-2: #2e8bb0; } .r-international { --rub-2: #0f5fd5; }
.r-planete { --rub-2: #00b596; } .r-culture { --rub-2: #ff5656; } .r-debats { --rub-2: #a6a6a6; }
.r-lifestyle { --rub-2: #df3d73; } .r-sports { --rub-2: #70ce74; } .r-regions { --rub-2: #ff9955; } .r-network { --rub-2: #61c2ff; }

/* Rubriques app (AA) */
.app-rubs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0 8px; }
@media (max-width: 820px) { .app-rubs { grid-template-columns: repeat(3, 1fr); } }
.app-rub { aspect-ratio: 1; padding: 10px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--llb-base); }
.app-rub b { font-size: 13px; font-weight: 700; line-height: 1.15; }
.app-rub span { font-family: var(--f-mono); font-size: 11px; opacity: .9; }
.app-rub--ink { color: #262729; }
.a-belgique { background: #927035; } .a-international { background: #0b57c7; } .a-economie { background: #0548aa; }
.a-planete { background: #00846e; } .a-culture { background: #d53c3c; } .a-sports { background: #218625; }
.a-lifestyle { background: #d13c6e; } .a-debats { background: #757575; } .a-regions { background: #c55205; }
.a-network { background: #137bbe; } .a-selection { background: #f7b500; } .a-longs-formats { background: #752863; }

/* ---------- Développeurs ---------- */
.code { position: relative; border: 1px solid var(--line); background: #16171a; color: #e8e6e3; margin: 22px 0; }
.code pre { margin: 0; padding: 22px 22px 22px; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.65; }
.code .k { color: #f06aa9; } .code .v { color: #f2c93d; } .code .c { color: #8a8d93; }
.code__copy { position: absolute; top: 10px; right: 10px; font-family: var(--f-mono); font-size: 11px; color: #e8e6e3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: 5px 10px; cursor: pointer; }
.code__copy:hover { background: #ac115d; border-color: #ac115d; }

.dl-item__prev--magenta { background: #ac115d; }
.dl-item__prev--code { background: #16171a; color: #f06aa9; font-family: var(--f-mono); font-size: 22px; font-weight: 600; }
.dl-item__prev img { width: auto; max-height: 34px; }
a.dl-item { display: block; color: inherit; }

/* ---------- Easter egg 1915 ---------- */
.llb-1915 { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(20, 16, 10, .72); backdrop-filter: blur(4px); opacity: 0; transition: opacity .5s ease; }
.llb-1915.is-on { opacity: 1; }
.llb-1915__paper { max-width: 560px; width: 100%; background: #efe6d2; color: #2b2418; padding: 34px 32px 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transform: rotate(-1.2deg); font-family: "Manuale", Georgia, serif; }
.llb-1915__mast { text-align: center; border-top: 3px double #2b2418; border-bottom: 3px double #2b2418; padding: 10px 0; margin-bottom: 18px; }
.llb-1915__mast b { display: block; font-weight: 800; font-size: clamp(30px, 6vw, 44px); letter-spacing: -0.01em; line-height: 1; }
.llb-1915__mast small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.llb-1915__paper p { font-size: 16px; line-height: 1.55; margin: 0 0 12px; }
.llb-1915__paper q { font-style: italic; }
.llb-1915__close { margin-top: 10px; font-family: var(--f-mono); font-size: 12px; background: #2b2418; color: #efe6d2; border: 0; padding: 8px 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .llb-1915 { transition: none; } }

/* ---------- Utilitaires de page ---------- */
.llb-mt { margin-top: 48px; }
.marque-sec--last { border-bottom: 0; }
[data-brand="lalibre"] .marque-sec__text code, [data-brand="lalibre"] .llb-note code { font-family: var(--f-mono); font-size: 0.88em; padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--line); }
[data-brand="lalibre"] .dont { display: flex; flex-direction: column; align-items: center; gap: 4px; }
[data-brand="lalibre"] .dont__no { margin-bottom: 4px; }
[data-brand="lalibre"] .swatches + .marque-sec__title,
[data-brand="lalibre"] .llb-note + .marque-sec__title { margin-top: 48px; }
@media (max-width: 900px) {
  [data-brand="lalibre"] .marque-main { width: 100%; }
  [data-brand="lalibre"] .spec-list li { flex-wrap: wrap; gap: 4px 20px; }
  [data-brand="lalibre"] .spec-list li span:last-child { overflow-wrap: anywhere; }
  [data-brand="lalibre"] .rub { grid-template-columns: 72px 1fr; }
}
[data-brand="lalibre"] .dl-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { [data-brand="lalibre"] .dl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================
   v2 · DESIGN SYSTEM (méthode Refactoring UI)
   Principes, échelles, espacements, élévations, composants.
   ========================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.llb-h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.swatches--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .swatches--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swatches--3 { grid-template-columns: 1fr; } }

/* ---------- Sources (site / calc / proposition) ---------- */
.llb-src { display: inline-block; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border: 1px solid currentColor; line-height: 1.5; vertical-align: 1px; }
.llb-src--site { color: #2f8f4e; }
.llb-src--calc { color: #6b5bd2; }
.llb-src--prop { color: #c47a00; }
[data-theme="dark"] .llb-src--site { color: #5fd18a; }
[data-theme="dark"] .llb-src--calc { color: #a99cff; }
[data-theme="dark"] .llb-src--prop { color: #f2c93d; }
.llb-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; color: var(--ink-soft); margin: 0 0 30px; }
.llb-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Principes ---------- */
.llb-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px) { .llb-rules { grid-template-columns: 1fr; } }
.llb-rule { background: var(--bg); padding: 24px 26px 26px; position: relative; }
.llb-rule__n { font-family: var(--llb-title); font-weight: 800; font-size: 40px; line-height: 1; color: var(--b-accent); display: block; margin-bottom: 12px; }
.llb-rule__t { font-family: var(--llb-title); font-weight: 800; font-size: 21px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.llb-rule p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 52ch; }

/* ---------- Encadré Refactoring UI ---------- */
.llb-rui { position: relative; margin: 26px 0 30px; padding: 18px 22px 18px 58px; background: var(--bg-2); border: 1px solid var(--line); max-width: 78ch; }
.llb-rui::before { content: "RUI"; position: absolute; left: 14px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; background: var(--b-accent); color: #fff; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: 50%; }
.llb-rui p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8px; }
.llb-rui p:last-child { margin-bottom: 0; }
.llb-rui__k { font-family: var(--f-mono); font-size: 11px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-accent) !important; }
.llb-rui__w { border-top: 1px dashed var(--line-strong); padding-top: 8px; }
.llb-rui strong { color: var(--ink); }
[data-brand="lalibre"] .llb-rui code { font-family: var(--f-mono); font-size: 0.9em; }

/* ---------- Échelles de nuances ---------- */
.ds-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 0 0 8px; }
@media (max-width: 900px) { .ds-scale { grid-template-columns: repeat(5, 1fr); } }
.ds-step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-step__chip { height: 76px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; border-radius: 4px; }
.ds-step__chip i { font-family: var(--llb-title); font-style: normal; font-weight: 800; font-size: 20px; line-height: 1; }
.ds-step__chip em { font-family: var(--f-mono); font-style: normal; font-size: 10px; opacity: .85; }
.ds-step__chip--w { color: #fff; }
.ds-step__chip--g { color: #262729; }
.ds-step.is-base .ds-step__chip { outline: 2px solid var(--ink); outline-offset: 2px; }
.ds-step__n { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.ds-step .copy { font-size: 11px; justify-self: start; align-self: flex-start; }
.ds-step__foot { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ds-step__foot .llb-src { font-size: 9px; padding: 0 4px; }
.ds-step__aa { font-family: var(--f-mono); font-size: 9px; color: var(--muted); }

/* ---------- Contrastes ---------- */
.ds-contrast-wrap { overflow-x: auto; margin: 20px 0 8px; border: 1px solid var(--line); }
.ds-contrast { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 11px; min-width: 640px; }
.ds-contrast th { text-align: left; font-weight: 600; color: var(--ink); padding: 10px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ds-contrast th small { display: block; font-weight: 400; color: var(--muted); }
.ds-contrast tbody th { border-right: 1px solid var(--line); }
.ds-cx { padding: 10px; vertical-align: top; border: 1px solid rgba(0,0,0,.06); }
.ds-cx span { display: block; font-family: var(--llb-title); font-weight: 800; font-size: 22px; line-height: 1.1; }
.ds-cx b, .ds-cx small { display: inline-block; margin-top: 4px; padding: 1px 5px; background: rgba(255,255,255,.92); color: #262729; }
.ds-cx small { margin-left: 2px; font-weight: 700; }
.ds-cx--ok small { color: #2f7a43; }
.ds-cx--mid small { color: #8a5a00; }
.ds-cx--ko small { color: #b0283a; text-decoration: line-through; }
.ds-cx--na { color: var(--muted); text-align: center; background: var(--bg); }

/* ---------- Header de démonstration ---------- */
.ds-frame { border: 1px solid var(--line); background: #f2f2f2; padding: 0 0 18px; margin: 22px 0 14px; overflow: hidden; }
.ds-header { min-height: 59px; background: #ac115d; color: #fff; border-radius: 0 0 10px 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 16px; }
.ds-header--rub { background: var(--rub-dark); }
.ds-header__menu { all: unset; cursor: pointer; width: 20px; height: 16px; }
.ds-header__menu svg { width: 20px; height: 16px; stroke: #fff; stroke-width: 2; display: block; }
.ds-header__logo { height: 26px; width: auto; }
.ds-header__end { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.ds-header__login { font-family: var(--llb-base); font-weight: 600; font-size: 13px; line-height: 18px; }
.ds-btn-pay { font-family: var(--llb-base); font-weight: 600; font-size: 16px; line-height: 18px; background: #f2c93d; color: #5d3c10; border: 0; border-radius: 4px; padding: 8px 12px; cursor: pointer; transition: background .3s cubic-bezier(.4,0,.2,1); }
.ds-btn-pay:hover { background: #f7b500; }
@media (max-width: 560px) { .ds-header__login { display: none; } .ds-header__logo { height: 20px; } .ds-btn-pay { font-size: 14px; padding: 6px 10px; } }
.ds-subnav { display: flex; gap: 4px; padding: 12px 12px 0; overflow-x: auto; }
.ds-subnav a { font-family: var(--llb-base); font-weight: 600; font-size: 16px; line-height: 20px; color: #262729; padding: .5rem .75rem; border-radius: .25rem; white-space: nowrap; transition: background .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1); }
.ds-subnav a:hover { background: #e0e0e0; }
.ds-subnav a.is-active { background: var(--rub); color: #fff; }

/* ---------- Chaînes déco ---------- */
.ds-chains { display: grid; gap: 10px; margin: 22px 0 14px; }
.ds-chain { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 84px; padding: 0 48px; border-top: 3px solid var(--rub-2); background: radial-gradient(circle at 20% 30%, var(--rub-dark), var(--rub)); color: #fff; }
.ds-chain__t { font-family: var(--llb-title); font-weight: 800; font-size: 30px; line-height: 40px; }
.ds-chain__more { font-family: var(--llb-base); font-weight: 600; font-size: 13px; color: rgba(255,255,255,.85); }
.ds-chain__more::after { content: " \203A"; }
@media (max-width: 560px) { .ds-chain { padding: 0 20px; } .ds-chain__t { font-size: 24px; line-height: 32px; } }
.code--sm pre { font-size: 12px; padding: 16px 18px; }

/* ---------- Échelle des titres ---------- */
.ds-tscale { border-top: 1px solid var(--line); margin: 22px 0 6px; }
.ds-tscale__row { display: grid; grid-template-columns: 48px 1fr 130px; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ds-tscale__k { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--b-accent); }
.ds-tscale__s { font-family: var(--llb-title); font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.ds-tscale__v { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: right; }
.t-3xl { font-size: 30px; line-height: 40px; } .t-2xl { font-size: 27px; line-height: 38px; } .t-xl { font-size: 21px; line-height: 32px; }
.t-lg { font-size: 18px; line-height: 22px; } .t-md { font-size: 16px; line-height: 20px; } .t-sm { font-size: 13px; line-height: 18px; }
@media (max-width: 560px) { .ds-tscale__row { grid-template-columns: 36px 1fr; } .ds-tscale__v { grid-column: 2; text-align: left; } }

/* ---------- Page d'article ---------- */
.ds-article { background: #fff; color: #262729; border: 1px solid var(--line); padding: 40px clamp(20px, 5vw, 56px); margin: 22px 0 14px; }
.ds-article > * { max-width: 675px; }
.ds-article__kicker { font-family: var(--llb-base); font-weight: 600; font-size: 11px; line-height: 20px; text-transform: uppercase; letter-spacing: .04em; color: #686868; margin: 0 0 6px; }
.ds-article__h1 { font-family: var(--llb-title); font-weight: 800; font-size: 28px; line-height: 36px; margin: 0 0 16px; }
.ds-article__chapo { font-family: var(--llb-base); font-weight: 500; font-size: 18px; line-height: 27px; margin: 0 0 16px; }
.ds-article__author { font-family: var(--llb-base); font-size: 16px; line-height: 21px; color: #686868; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid #e0e0e0; }
.ds-article__author b { color: #262729; font-weight: 600; }
.ds-article__p { font-family: var(--llb-base); font-weight: 500; font-size: 18px; line-height: 27px; margin: 0 0 1.5rem; }
.ds-article__p a { color: inherit; font-weight: 600; }
.ds-quote { font-family: var(--llb-title); font-weight: 800; font-style: italic; font-size: 24px; line-height: 32px; margin: 2rem 0 0; padding-left: 20px; border-left: 3px solid #ac115d; }
@media (min-width: 768px) {
  .ds-article__h1 { font-size: 32px; line-height: 40px; }
  .ds-article__chapo, .ds-article__p { font-size: 21px; line-height: 32px; }
}

/* ---------- Espacement ---------- */
.ds-space { border-top: 1px solid var(--line); margin: 22px 0 8px; }
.ds-space__r { display: grid; grid-template-columns: 130px 1fr 120px 110px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ds-space__r code { font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.ds-space__bar { display: block; }
.ds-space__bar i { display: block; height: 14px; background: var(--b-accent); opacity: .85; }
.ds-space__v { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }
.ds-freq { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ds-freq--1, .ds-freq--2, .ds-freq--3, .ds-freq--4 { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .ds-space__r { grid-template-columns: 1fr auto; grid-template-areas: "t v" "b f"; row-gap: 6px; } .ds-space__r code { grid-area: t; } .ds-space__v { grid-area: v; } .ds-space__bar { grid-area: b; } .ds-freq { grid-area: f; text-align: right; } }

.ds-bp { position: relative; height: 54px; margin: 30px 0 10px; border-bottom: 2px solid var(--ink); }
.ds-bp__mk { position: absolute; bottom: -2px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--ink-soft); padding-bottom: 26px; }
.ds-bp__mk::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 20px; background: var(--b-accent); }
.bp-480 { left: 33.3%; } .bp-768 { left: 53.3%; } .bp-992 { left: 68.9%; } .bp-1024 { left: 71.1%; padding-bottom: 6px; } .bp-1200 { left: 83.3%; }
.bp-1024::after { height: 0; }

.ds-rhythm { background: #fff; color: #262729; border: 1px solid var(--line); padding: 24px; margin: 22px 0 8px; max-width: 560px; }
.ds-rhythm__blk { background: #f2f2f2; padding: 12px 14px; font-family: var(--llb-title); font-weight: 800; font-size: 16px; }
.ds-rhythm__blk small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 11px; color: #686868; margin-top: 4px; }
.ds-rhythm__gap { position: relative; background: repeating-linear-gradient(45deg, rgba(172,17,93,.14) 0 4px, transparent 4px 8px); }
.ds-rhythm__gap span { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 10px; color: #ac115d; }
.g-24 { height: 24px; } .g-32 { height: 32px; }

/* ---------- Rayons et élévation ---------- */
.ds-radii { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 22px 0 8px; }
@media (max-width: 860px) { .ds-radii { grid-template-columns: repeat(3, 1fr); } }
.ds-radius span { display: block; height: 72px; background: var(--bg-2); border: 2px solid var(--b-accent); margin-bottom: 8px; }
.ds-radius b { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.ds-radius small { font-size: 12px; color: var(--muted); }
.r-0 span { border-radius: 0; } .r-4 span { border-radius: 4px; } .r-8 span { border-radius: 8px; }
.r-10 span { border-radius: 0 0 10px 10px; } .r-15 span { border-radius: .925rem; } .r-pill span { border-radius: 9999px; height: 40px; margin-top: 16px; margin-bottom: 24px; }

.ds-elev { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 30px; background: #f2f2f2; border: 1px solid var(--line); margin: 22px 0 8px; }
@media (max-width: 860px) { .ds-elev { grid-template-columns: repeat(3, 1fr); padding: 20px; } }
.ds-elev__c { background: #fff; color: #262729; border-radius: 4px; height: 96px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.ds-elev__c b { font-family: var(--f-mono); font-size: 14px; }
.ds-elev__c small { font-size: 11px; color: #686868; line-height: 1.3; }
.e-0 { box-shadow: none; border: 1px solid #e0e0e0; }
.e-1 { box-shadow: 0 1px 1px 0 rgba(0,0,0,.15), 0 2px 3px 0 hsla(0,0%,40%,.12); }
.e-2 { box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.e-3 { box-shadow: 0 3px 10px 0 rgba(68,5,36,.2); }
.e-4 { box-shadow: 0 10px 20px 0 rgba(30,30,30,.05); }
.e-5 { box-shadow: 0 1px 15px 0 rgba(0,0,0,.3); }
.spec-list--code li span:last-child { font-size: 12px; text-align: right; }

/* ---------- Icônes ---------- */
.ds-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 22px 0 8px; }
@media (max-width: 760px) { .ds-icons { grid-template-columns: repeat(2, 1fr); } }
.ds-icon { background: #fff; color: #262729; padding: 26px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ds-icon > :first-child { margin-bottom: 8px; }
.ds-icon b { font-family: var(--llb-base); font-weight: 700; font-size: 14px; }
.ds-icon small { font-family: var(--f-mono); font-size: 11px; color: #686868; }
.ds-paying { display: inline-grid; place-items: center; width: 17px; height: 17px; background: #f7b500; color: #5d3c10; font-family: var(--llb-title); font-weight: 800; font-size: 13px; line-height: 1; border-radius: 2px; vertical-align: 1px; margin-right: 6px; flex: none; }
.ds-icon .ds-paying { width: 34px; height: 34px; font-size: 24px; margin: 0 0 8px; }
.ds-play { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ac115d; box-shadow: 0 3px 10px rgba(68,5,36,.3); }
.ds-play svg { width: 22px; height: 22px; fill: #fff; }
.ds-live { display: inline-flex; align-items: center; gap: 6px; background: #df0000; color: #fff; font-family: var(--llb-base); font-weight: 600; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; padding: 5px 8px; border-radius: 4px; }
.ds-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: llb-pulse 1.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes llb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.8); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.ds-chev { display: inline-block; width: 8px; height: 12px; }
.ds-chev svg { width: 8px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; display: block; }
.ds-icon .ds-chev { width: 18px; height: 28px; color: #ac115d; }
.ds-icon .ds-chev svg { width: 18px; height: 28px; }

/* ---------- Boutons : matrice d'états ---------- */
.ds-btns { border: 1px solid var(--line); background: #fff; color: #262729; margin: 22px 0 8px; overflow-x: auto; }
.ds-btns__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e0e0e0; min-width: 560px; }
.ds-btns__row:last-child { border-bottom: 0; }
.ds-btns__row--head { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #686868; padding-top: 10px; padding-bottom: 10px; background: #f7f7f7; }
.ds-btns__row > span:first-child { font-family: var(--llb-base); font-weight: 700; font-size: 14px; }
.ds-btns__row small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 10px; color: #686868; margin-top: 2px; }
.llb-btn:hover, .llb-btn.is-hover { background: #262729; border-color: #262729; color: #fff; }
.llb-btn--primary:hover, .llb-btn--primary.is-hover { background: #111; border-color: #111; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.llb-btn--brand { font-size: 18px; }
.llb-btn--brand:hover, .llb-btn--brand.is-hover { background: #930a4d; border-color: #930a4d; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.llb-btn--pay:hover, .llb-btn--pay.is-hover { background: #f7b500; color: #5d3c10; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.llb-btn.is-focus { outline: 0; box-shadow: 0 0 0 3px rgba(172,17,93,.5); }
.llb-btn--round { border-radius: 50px; padding: .5rem 1.25rem; }

/* ---------- Badges ---------- */
.ds-badge { display: inline-block; font-family: var(--llb-base); font-weight: 600; font-size: 12px; line-height: 1; padding: 5px 8px; border-radius: 4px; color: #262729; }
.ds-badge--new { background: #00fdc5; }
.ds-badge--sponsor { background: #e3e0e0; }
.ds-badge--app { background: #ac115d; color: #fff; border-radius: 9999px; padding: 5px 10px; }
.ds-paying-inline { display: inline-flex; align-items: center; font-family: var(--llb-title); font-weight: 600; font-size: 16px; }

/* ---------- Teasers v2 ---------- */
.ds-teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: #fff; color: #262729; border: 1px solid var(--line); padding: 24px; margin: 22px 0 14px; }
@media (max-width: 760px) { .ds-teasers { grid-template-columns: 1fr; } }
.ds-teaser__img { aspect-ratio: 16 / 10; border-radius: 4px; margin-bottom: 12px; position: relative; display: grid; place-items: center; }
.ds-teaser__t { font-family: var(--llb-title); font-weight: 600; font-size: 18px; line-height: 22px; margin: 0; }
.ds-teaser__t a { color: inherit; transition: color .3s cubic-bezier(.4,0,.2,1); }
.ds-teaser__t a:hover { color: #ac115d; }
.ds-teaser__meta { font-family: var(--llb-base); font-weight: 600; font-size: 11px; line-height: 20px; text-transform: uppercase; color: #686868; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #e0e0e0; }
.ds-teaser--sponsor .ds-teaser__t { color: #114a70; margin-top: 8px; }
.ds-overlays { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin: 0 0 8px; }
@media (max-width: 760px) { .ds-overlays { grid-template-columns: 1fr; } }
.ds-ov { position: relative; min-height: 240px; border-radius: 4px; display: flex; align-items: flex-end; padding: 22px; overflow: hidden; }
.ds-ov::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72)); }
.ds-ov__t { position: relative; font-family: var(--llb-title); font-weight: 800; color: #fff; margin: 0; }
.ds-ov--3xl .ds-ov__t { font-size: 27px; line-height: 38px; max-width: 22ch; }
.ds-ov--md .ds-ov__t { font-size: 16px; line-height: 20px; }
.teaser__img--4 { background: linear-gradient(135deg, #2e8bb0, #040533); }

/* ---------- Box, top 5 ---------- */
.ds-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 8px; align-items: start; }
@media (max-width: 760px) { .ds-two { grid-template-columns: 1fr; } }
.ds-box { background: #fff; color: #262729; padding: 20px; border: 1px solid var(--line); }
.ds-box--bordered { border: 1px solid #e0e0e0; border-radius: .25rem .25rem 0 0; }
.ds-box__t { font-family: var(--llb-base); font-weight: 700; font-size: 21px; line-height: 22px; color: #ac115d; margin: 0 0 14px; }
.ds-box__p { font-family: var(--llb-base); font-size: 15px; line-height: 1.5; margin: 0; color: #262729; }
.ds-top { list-style: none; margin: 0; padding: 0; }
.ds-top li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid #e0e0e0; }
.ds-top__n { font-family: var(--llb-base); font-weight: 600; font-size: 30px; line-height: 1; color: #ac115d; }
.ds-top a { font-family: var(--llb-title); font-weight: 600; font-size: 16px; line-height: 20px; color: #262729; transition: color .3s cubic-bezier(.4,0,.2,1); }
.ds-top a:hover { color: #ac115d; }

/* ---------- Fil d'Ariane, auteur ---------- */
.ds-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 14px 18px; margin: 22px 0 8px; font-family: var(--llb-base); font-size: 13px; }
.ds-crumb a { color: #686868; transition: color .15s cubic-bezier(.4,0,.2,1); }
.ds-crumb a:hover { color: #ac115d; }
.ds-crumb .ds-chev { color: #bdbdbd; }
.ds-crumb [aria-current] { color: #262729; font-weight: 600; }
.ds-author { background: #fff; color: #262729; border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; margin: 14px 0 8px; max-width: 420px; }
.ds-author__t { font-family: var(--llb-title); font-weight: 800; font-size: 18px; line-height: 22px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0; }
.ds-author__s { font-family: var(--llb-base); font-size: 13px; text-transform: uppercase; color: #686868; }

/* ---------- Lire aussi, liste de liens ---------- */
.ds-readalso { background: #ac115d; color: #fff; border-radius: .925rem; box-shadow: 0 3px 10px 0 rgba(68,5,36,.2); padding: 22px 24px; }
.ds-readalso__h { display: flex; align-items: center; gap: 8px; font-family: var(--llb-base); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.ds-readalso__i svg { width: 16px; height: 16px; fill: none; stroke: #f2c93d; stroke-width: 2.4; display: block; }
.ds-readalso__a { font-family: var(--llb-title); font-weight: 800; font-size: 25px; line-height: 36px; color: #fff; }
.ds-readalso__a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ds-linklist { background: #fff; color: #262729; border: 1px solid #e0e0e0; border-radius: .25rem; padding: .75rem; }
.ds-linklist__lbl { display: inline-block; background: #ac115d; color: #fff; font-family: var(--llb-base); font-weight: 600; font-size: 14px; line-height: 20px; padding: 0 8px; border-radius: 2px; }
.ds-linklist__h { font-family: var(--llb-title); font-weight: 800; font-size: 27px; line-height: 38px; color: #ac115d; margin: 6px 0 8px; }
.ds-linklist ul { list-style: none; margin: 0; padding: 0; }
.ds-linklist li { border-top: 1px solid #e0e0e0; }
.ds-linklist a { display: block; padding: 8px 0; font-family: var(--llb-title); font-weight: 600; font-size: 16px; line-height: 20px; color: #262729; }
.ds-linklist a:hover { color: #ac115d; }

/* ---------- Paywall ---------- */
.ds-paywall { background: #fff; color: #262729; border: 1px solid var(--line); padding: 30px clamp(18px, 5vw, 56px) 36px; margin: 22px 0 8px; }
.ds-paywall__fade { font-family: var(--llb-base); font-weight: 500; font-size: 18px; line-height: 27px; max-width: 675px; margin: 0; padding-bottom: 18px; border-bottom: 2px solid #ac115d; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
.ds-paywall__box { max-width: 675px; padding-top: 22px; }
.ds-paywall__h { display: flex; align-items: center; font-family: var(--llb-title); font-weight: 800; font-size: 21px; line-height: 32px; margin: 0 0 16px; }
.ds-paywall__offer { border: 1px solid #bdbdbd; border-radius: 4px; padding: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; background: #f7f7f7; }
.ds-paywall__o { font-family: var(--f-mono); font-size: 13px; color: #686868; margin: 0; }
.ds-paywall__cta { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }

/* ---------- Champs ---------- */
.ds-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: #fff; color: #262729; border: 1px solid var(--line); padding: 24px; margin: 22px 0 8px; }
@media (max-width: 760px) { .ds-fields { grid-template-columns: 1fr; } }
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field__l { font-family: var(--llb-base); font-weight: 600; font-size: 13px; }
.ds-input { font-family: var(--llb-base); font-size: 18px; line-height: 22px; color: #262729; background: #fff; border: 1px solid #e0e0e0; border-radius: .25rem; padding: .5rem; width: 100%; box-sizing: border-box; transition: box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1); }
.ds-input::placeholder { color: #999; }
.ds-input:focus, .ds-input.is-focus { outline: 0; border-color: #ac115d; box-shadow: 0 0 0 3px rgba(172,17,93,.5); }
.ds-input.is-error { border-color: #c73c49; }
.ds-field__err { font-family: var(--llb-base); font-size: 13px; color: #c73c49; font-weight: 600; }
.ds-field__err::before { content: "! "; }
@media (min-width: 992px) { .ds-input { padding: .75rem; } }

/* ---------- Notification ---------- */
.ds-notif-zone { background: #f2f2f2; border: 1px solid var(--line); min-height: 120px; display: flex; align-items: flex-end; justify-content: center; padding: 18px; margin: 22px 0 8px; }
.ds-notif { background: #ac115d; color: #fff; border-radius: .5rem; font-family: var(--llb-base); font-weight: 700; font-size: 13px; line-height: 18px; padding: 12px 16px; max-width: 20rem; box-shadow: 0 1px 15px 0 rgba(0,0,0,.3); }

/* ---------- Mouvement ---------- */
.ds-motion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 8px; }
@media (max-width: 760px) { .ds-motion { grid-template-columns: 1fr; } }
.ds-motion__c { position: relative; border: 1px solid var(--line); background: var(--bg-2); padding: 18px 18px 54px; min-height: 120px; }
.ds-motion__c b { display: block; font-family: var(--f-mono); font-size: 16px; color: var(--ink); }
.ds-motion__c small { font-size: 13px; color: var(--muted); }
.ds-motion__dot { position: absolute; left: 18px; bottom: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--b-accent); }
.m-fast .ds-motion__dot { transition: transform .15s cubic-bezier(.4,0,.2,1); }
.m-base .ds-motion__dot { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ds-motion__c:hover .ds-motion__dot, .ds-motion__c:focus-visible .ds-motion__dot { transform: translateX(150px); }
.m-live .ds-live { position: absolute; left: 18px; bottom: 16px; }

/* ---------- Accessibilité ---------- */
.ds-checks { display: grid; gap: 8px; margin: 22px 0 8px; }
.ds-check { display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--line); border-left-width: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.ds-check b { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ds-check--ok { border-left-color: #2f8f4e; } .ds-check--ok b { color: #2f8f4e; }
.ds-check--ko { border-left-color: #c73c49; } .ds-check--ko b { color: #c73c49; }
[data-theme="dark"] .ds-check--ok b { color: #5fd18a; } [data-theme="dark"] .ds-check--ko b { color: #ff8a7a; }

@media (prefers-reduced-motion: reduce) {
  .ds-live i { animation: none; }
  .ds-motion__dot, .llb-btn, .ds-input, .ds-teaser__t a { transition: none !important; }
}

/* ---------- Teasers : image à droite, titre seul ---------- */
.ds-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 8px; align-items: start; }
@media (max-width: 760px) { .ds-lists { grid-template-columns: 1fr; } }
.ds-box__t--center { text-align: center; }
.ds-row { border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; margin-bottom: 16px; }
.ds-row:last-child { margin-bottom: 0; }
.ds-row__a { display: flow-root; color: #262729; line-height: 20px; }
.ds-row__img { float: right; width: 140px; aspect-ratio: 3 / 2; margin: 0 0 7px 16px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.ds-row__t { display: block; font-family: var(--llb-title); font-weight: 600; font-size: 16px; line-height: 20px; transition: color .3s cubic-bezier(.4,0,.2,1); }
.ds-row__a:hover .ds-row__t { color: #ac115d; }
.ds-row__meta { border-top: 0; padding-top: 0; margin-top: 6px; }
.ds-play--sm { width: 30px; height: 30px; }
.ds-play--sm svg { width: 16px; height: 16px; }
.ds-titles { list-style: none; margin: 0; padding: 0; }
.ds-titles li { border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; margin-bottom: 16px; }
.ds-titles li:last-child { margin-bottom: 0; }
.ds-titles a { display: block; font-family: var(--llb-title); font-weight: 600; font-size: 16px; line-height: 20px; color: #262729; transition: color .3s cubic-bezier(.4,0,.2,1); }
.ds-titles a:hover { color: #ac115d; }
@media (max-width: 400px) { .ds-row__img { width: 112px; } }

/* GEN:START · généré par build_ds.py, ne pas éditer à la main */
.c-ok { background: #4d9e33; }
.c-err { background: #c73c49; }
.c-live { background: #df0000; }
.c-new { background: #00fdc5; }
.c-sponsor { background: #e3e0e0; }
.c-sponsor-ink { background: #114a70; }
.cx-f0 { color: #262729; }
.cx-f1 { color: #686868; }
.cx-f2 { color: #ac115d; }
.cx-f3 { color: #5d3c10; }
.cx-f4 { color: #ffffff; }
.cx-b0 { background: #ffffff; }
.cx-b1 { background: #f2f2f2; }
.cx-b2 { background: #f2c93d; }
.cx-b3 { background: #ac115d; }
.cx-b4 { background: #061e4d; }
.cx-b5 { background: #1f1e1c; }
.w-2 { width: 2px; }
.w-4 { width: 4px; }
.w-8 { width: 8px; }
.w-12 { width: 12px; }
.w-16 { width: 16px; }
.w-20 { width: 20px; }
.w-24 { width: 24px; }
.w-32 { width: 32px; }
.w-40 { width: 40px; }
.w-48 { width: 48px; }
.w-64 { width: 64px; }
.g-mag-50 .ds-step__chip { background: #fdf2f7; }
.g-mag-100 .ds-step__chip { background: #f9e1ec; }
.g-mag-200 .ds-step__chip { background: #f0c1d8; }
.g-mag-300 .ds-step__chip { background: #df90b6; }
.g-mag-400 .ds-step__chip { background: #bc407d; }
.g-mag-500 .ds-step__chip { background: #c21a6c; }
.g-mag-600 .ds-step__chip { background: #ac115d; }
.g-mag-700 .ds-step__chip { background: #930a4d; }
.g-mag-800 .ds-step__chip { background: #630734; }
.g-mag-900 .ds-step__chip { background: #3e0421; }
.g-mar-50 .ds-step__chip { background: #eff3fb; }
.g-mar-100 .ds-step__chip { background: #d7e1f4; }
.g-mar-200 .ds-step__chip { background: #9cc2e2; }
.g-mar-300 .ds-step__chip { background: #61a2d1; }
.g-mar-400 .ds-step__chip { background: #3482b6; }
.g-mar-500 .ds-step__chip { background: #08619b; }
.g-mar-600 .ds-step__chip { background: #0a2b6c; }
.g-mar-700 .ds-step__chip { background: #08245c; }
.g-mar-800 .ds-step__chip { background: #061e4d; }
.g-mar-900 .ds-step__chip { background: #03132b; }
.g-grey-50 .ds-step__chip { background: #f7f7f7; }
.g-grey-100 .ds-step__chip { background: #f2f2f2; }
.g-grey-200 .ds-step__chip { background: #e0e0e0; }
.g-grey-300 .ds-step__chip { background: #c6c6c6; }
.g-grey-400 .ds-step__chip { background: #bdbdbd; }
.g-grey-500 .ds-step__chip { background: #999999; }
.g-grey-600 .ds-step__chip { background: #686868; }
.g-grey-700 .ds-step__chip { background: #4b5568; }
.g-grey-800 .ds-step__chip { background: #262729; }
.g-grey-900 .ds-step__chip { background: #111111; }
/* GEN:END */