/* Ebook Afrique — système visuel
   Mise en page : colonne éditoriale large, blocs encre noire et or pour les temps forts, cartes sobres pour le reste. */
:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --ink: #151513;
  --ink-2: #3b3a36;
  --muted: #6b675e;
  --line: #e4e1d8;
  --line-strong: #cfcabd;
  --gold: #fdb402;
  --gold-ink: #8a5c00;
  --gold-soft: #fff3d1;
  --on-gold: #1a1407;
  --block: #151513;
  --on-block: #f6f3ea;
  --on-block-muted: #b9b3a3;
  --ok: #1f7a4d; --ok-soft: #e3f3ea;
  --warn: #9a6100; --warn-soft: #fdf0d5;
  --err: #b3261e; --err-soft: #fbe6e4;
  --info: #23557f; --info-soft: #e4eef7;
  --shadow: 0 1px 2px rgba(20, 18, 10, .06), 0 8px 24px -12px rgba(20, 18, 10, .18);
  --shadow-lg: 0 24px 60px -24px rgba(20, 18, 10, .35);
  --f-display: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --logo-l: inline-block; --logo-d: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121211; --surface: #1b1b19; --surface-2: #242420; --ink: #f3f1ea; --ink-2: #d6d2c6; --muted: #a29d90;
    --line: #2e2d29; --line-strong: #44423b; --gold: #fdb402; --gold-ink: #ffc93f; --gold-soft: #2c2410; --on-gold: #1a1407;
    --block: #070706; --on-block: #f6f3ea; --on-block-muted: #a9a394;
    --ok: #5cc68f; --ok-soft: #14291e; --warn: #f0b54a; --warn-soft: #2d2410; --err: #f2877f; --err-soft: #321816; --info: #8bbbe6; --info-soft: #152331;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
    --logo-l: none; --logo-d: inline-block; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121211; --surface: #1b1b19; --surface-2: #242420; --ink: #f3f1ea; --ink-2: #d6d2c6; --muted: #a29d90;
  --line: #2e2d29; --line-strong: #44423b; --gold: #fdb402; --gold-ink: #ffc93f; --gold-soft: #2c2410; --on-gold: #1a1407;
  --block: #070706; --on-block: #f6f3ea; --on-block-muted: #a9a394;
  --ok: #5cc68f; --ok-soft: #14291e; --warn: #f0b54a; --warn-soft: #2d2410; --err: #f2877f; --err-soft: #321816; --info: #8bbbe6; --info-soft: #152331;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --logo-l: none; --logo-d: inline-block; color-scheme: dark;
}

/* ---------- Base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-body); margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.ic { flex: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 16px; }
.tnum, .price, .kpi__v, .summary dd, .tbl td { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.logo { display: inline-flex; }
.logo img { height: 40px; width: auto; }
.logo .logo-l { display: var(--logo-l); }
.logo .logo-d { display: var(--logo-d); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.view { container: view / inline-size; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 650; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink-2); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { filter: brightness(1.05); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--err); color: #fff; }
.btn--link { background: none; padding: 0; min-height: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; font-weight: 600; }
.btn--sm { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 13px 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.dot-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-gold); font: 700 11px/18px var(--f-body); text-align: center; font-style: normal; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions--center { justify-content: center; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; color: var(--ink); white-space: nowrap; }
.more-link:hover { color: var(--gold-ink); }

/* ---------- Badges, pastilles ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; width: fit-content; }
.badge--gold { background: var(--gold); color: var(--on-gold); }
.badge--ink { background: var(--ink); color: var(--bg); }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--error { background: var(--err-soft); color: var(--err); }
.badge--soft { background: var(--gold-soft); color: var(--gold-ink); }
.eyebrow { display: block; font: 700 12px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--error { background: var(--err-soft); color: var(--err); }
.pill--ink { background: var(--surface-2); color: var(--ink-2); }
.pill--muted { background: var(--surface-2); color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span:last-child { color: var(--ink-2); font-weight: 600; }

/* ---------- En-tête web ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.hdr__logo { flex: none; display: flex; }
.hdr__nav { display: flex; gap: 4px; }
.hdr__nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.hdr__nav a:hover { background: var(--surface-2); color: var(--ink); }
.hdr__nav a.on { color: var(--ink); background: var(--gold-soft); }
.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hdr__me { display: flex; border-radius: 50%; }
.hdr__burger { display: none; }
.cur-select { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 10px; height: 36px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.cur-select select { border: 0; background: transparent; font-weight: 650; color: var(--ink); padding: 4px 2px; cursor: pointer; }
.mnav { display: none; }
@media (max-width: 960px) {
  .hdr__nav, .hide-sm { display: none !important; }
  .hdr__burger { display: inline-grid; }
  .menu-open .mnav { display: grid; padding: 8px 20px 18px; border-top: 1px solid var(--line); }
  .mnav a { padding: 12px 4px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .hdr__in { gap: 10px; }
  .logo img { height: 32px; }
  .cur-select, .theme-btn { display: none !important; }
  .hdr__tools .icon-btn { width: 36px; }
}
.web .view { padding-block: 28px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-content: start; min-height: 60vh; }
.web .view > * { min-width: 0; }

/* ---------- Pied de page ---------- */
.ftr { background: var(--block); color: var(--on-block); padding-block: 48px 28px; }
.ftr .logo .logo-l { display: none; }
.ftr .logo .logo-d { display: inline-block; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 40px; }
.ftr__brand { display: grid; gap: 16px; align-content: start; }
.ftr__brand p { color: var(--on-block-muted); max-width: 40ch; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ftr__cols h4 { color: var(--gold); font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.ftr__cols div { display: grid; gap: 10px; align-content: start; }
.ftr__cols a, .ftr__bot a { color: var(--on-block); text-decoration: none; opacity: .86; }
.ftr__cols a:hover, .ftr__bot a:hover { opacity: 1; text-decoration: underline; }
.nl-mini { display: flex; gap: 8px; max-width: 380px; }
.nl-mini input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px solid #3a3933; background: #1f1f1c; color: #f6f3ea; padding: 0 16px; }
.ftr__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #2b2a26; color: var(--on-block-muted); font-size: 13px; }
.ftr__pay > span:first-child { margin-right: 6px; }
.paychip { border: 1px solid #3a3933; border-radius: 6px; padding: 3px 9px; font-weight: 600; color: #e7e2d4; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 13.5px; color: var(--on-block-muted); }
@media (max-width: 860px) { .ftr__top { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- En-têtes de page et sections ---------- */
.ph { display: grid; gap: 24px; }
.ph__main { display: grid; gap: 12px; justify-items: start; max-width: 760px; }
.ph__title { font-size: clamp(28px, 4.2cqi, 46px); font-weight: 800; letter-spacing: -.025em; }
.ph__text { font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.ph .actions { margin-top: 8px; }
.ph--center .ph__main { justify-items: center; text-align: center; margin-inline: auto; }
.ph--center .actions { justify-content: center; }
.ph--aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
@container view (max-width: 760px) { .ph--aside { grid-template-columns: 1fr; } .ph__text { font-size: 16.5px; } }
.sec { display: grid; gap: 22px; }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.sec__head > div { display: grid; gap: 8px; max-width: 680px; }
.sec__title { font-size: clamp(22px, 2.8cqi, 30px); font-weight: 800; }
.sec__text { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.panel { display: grid; gap: 16px; align-content: start; }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel__head h3 { font-size: 17px; font-weight: 700; }
.narrow { max-width: 680px; width: 100%; margin-inline: auto; display: grid; gap: 24px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 32px; align-items: start; }
.split__main, .split__side { display: grid; gap: 24px; min-width: 0; }
.split__side { position: sticky; top: 88px; }
@container view (max-width: 820px) { .split { grid-template-columns: 1fr; } .split__side { position: static; } }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@container view (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container view (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.stack-sm { display: grid; gap: 8px; align-content: start; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.prose { display: grid; gap: 14px; max-width: 68ch; color: var(--ink-2); }
.prose h3 { font-size: 19px; margin-top: 8px; }
.lead { font-size: 18px; color: var(--ink-2); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }

/* ---------- Bandeau d'appel ---------- */
.cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-radius: 24px; padding: clamp(24px, 4cqi, 44px); }
.cta__txt { display: grid; gap: 10px; max-width: 620px; }
.cta h2 { font-size: clamp(22px, 3cqi, 32px); font-weight: 800; }
.cta--ink { background: var(--block); color: var(--on-block); }
.cta--ink h2 { color: var(--on-block); }
.cta--ink p { color: var(--on-block-muted); }
.cta--ink .eyebrow { color: var(--gold); }
.cta--ink .btn--primary { background: var(--gold); color: var(--on-gold); }
.cta--ink .btn--secondary { background: transparent; color: var(--on-block); border-color: #4a4840; }
.cta--gold { background: var(--gold); color: var(--on-gold); }
.cta--gold h2, .cta--gold p, .cta--gold .eyebrow { color: var(--on-gold); }
.cta--gold .btn--primary { background: #151513; color: #f6f3ea; }
.cta--soft { background: var(--gold-soft); }
.cta--soft p { color: var(--ink-2); }

/* ---------- Couvertures générées ---------- */
.cover { --c1: hsl(var(--h) 62% 34%); --c2: hsl(var(--h) 72% 54%); --c3: hsl(calc(var(--h) + 30) 80% 62%);
  position: relative; aspect-ratio: 2 / 3; width: 100%; max-width: 100%; border-radius: 4px 10px 10px 4px; overflow: hidden; background: var(--c1); color: #fffaf0; container-type: inline-size;
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), inset 7px 0 0 rgba(255,255,255,.12), 0 10px 24px -14px rgba(0,0,0,.6); }
.cover__pat { position: absolute; inset: 0 0 auto 0; height: 38%; }
.cover--kente .cover__pat { background: repeating-linear-gradient(90deg, #151513 0 8%, var(--c2) 8% 18%, #fdb402 18% 22%, var(--c3) 22% 34%, #151513 34% 38%, var(--c2) 38% 50%); }
.cover--kente .cover__pat::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.25) 9px 12px); }
.cover--bands .cover__pat { background: linear-gradient(180deg, var(--c2) 0 30%, #fdb402 30% 40%, #151513 40% 58%, var(--c3) 58% 74%, transparent 74%); }
.cover--chevron .cover__pat { background: repeating-linear-gradient(135deg, var(--c2) 0 10px, #151513 10px 20px, #fdb402 20px 24px, #151513 24px 34px); -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.cover--dots .cover__pat { background: radial-gradient(circle at 50% 50%, #fdb402 0 3px, transparent 3.5px) 0 0 / 16px 16px, linear-gradient(var(--c2), var(--c1)); }
.cover__body { position: absolute; inset: 38% 0 0 0; padding: 9cqi 9cqi 0; display: grid; align-content: start; gap: 4cqi; }
.cover__cat { font: 700 6.2cqi/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #fdb402; }
.cover__title { font: 800 11.5cqi/1.08 var(--f-display); letter-spacing: -.02em; color: #fffaf0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cover__author { font: 500 6.6cqi/1.2 var(--f-body); color: rgba(255, 250, 240, .78); }
.cover__mark { position: absolute; bottom: 6cqi; left: 9cqi; font: 800 5.2cqi/1 var(--f-display); letter-spacing: .12em; color: rgba(255, 250, 240, .55); }
.cover--xs { width: 56px; flex: none; border-radius: 2px 6px 6px 2px; }
.cover--sm { width: 96px; flex: none; }

/* ---------- Cartes livre ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 28px 22px; }
@container view (max-width: 520px) { .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }
.bk { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; }
.bk[hidden] { display: none; }
.bk__cover { display: block; position: relative; text-decoration: none; transition: transform .2s; }
.bk:hover .bk__cover { transform: translateY(-3px); }
.bk__rank { position: absolute; z-index: 2; top: -10px; left: -8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 17px/1 var(--f-display); box-shadow: 0 0 0 3px var(--bg); }
.fav-btn { position: absolute; z-index: 2; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #151513; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.fav-btn.on { color: #d0342c; }
.bk__body { display: grid; gap: 7px; align-content: start; min-width: 0; }
.bk__cat { font: 700 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bk__title { font-size: 17px; font-weight: 750; line-height: 1.25; }
.bk__title a { text-decoration: none; }
.bk__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk__promise { color: var(--muted); font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk__author { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.bk__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.bk__meta > span:not(.rating)::before { content: '·'; margin-right: 10px; }
.bk__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bk__ctas { margin-top: 4px; gap: 8px; }
.bk__ctas .btn { flex: 1 1 auto; }
.rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.rating .ic { color: var(--gold); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.price { display: inline-flex; align-items: baseline; gap: 8px; }
.price b { font: 800 18px/1 var(--f-display); letter-spacing: -.01em; }
.price s { color: var(--muted); font-size: 14px; }
.bk--row { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.bk--row .bk__cover { width: 96px; }
.bk--row .fav-btn { left: 60px; right: auto; top: 6px; width: 30px; height: 30px; }
.bk--rank .bk__cover { margin-top: 6px; }
.bk--compact .bk__title { font-size: 15px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }

/* ---------- Pastilles, onglets ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 8px 15px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs { display: grid; gap: 20px; }
.tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { flex: none; border: 0; background: none; padding: 12px 14px; font-weight: 650; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--gold); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.toolbar .chips { flex: 1 1 320px; min-width: 0; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; }
.frow { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-weight: 650; font-size: 14.5px; }
.field > label em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, .pw input {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.hint { color: var(--muted); font-size: 13px; }
.err { display: none; color: var(--err); font-size: 13px; font-weight: 600; }
.is-invalid .err { display: block; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--err) !important; }
.with-icon { position: relative; }
.with-icon > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.with-icon input { padding-left: 44px !important; }
.pw { position: relative; }
.pw input { padding-right: 48px; }
.pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: transparent; transition: .15s; }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.check input:focus-visible + .check__box { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.check.is-invalid .check__box { border-color: var(--err); }
.check a { font-weight: 600; }
.radio-card { display: block; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-card__in { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); transition: .15s; }
.radio-card__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); }
.radio-card__txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.radio-card__txt small { color: var(--muted); font-size: 13.5px; }
.radio-card__right { font-weight: 700; white-space: nowrap; }
.radio-card__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.radio-card input:checked + .radio-card__in { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.radio-card input:checked + .radio-card__in .radio-card__dot { border: 7px solid var(--ink); }
.radio-card input:checked + .radio-card__in .radio-card__ic { background: var(--gold); color: var(--on-gold); }
.radio-card input:focus-visible + .radio-card__in { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.radios { display: grid; gap: 10px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle:last-child { border-bottom: 0; }
.toggle__txt { display: grid; gap: 2px; }
.toggle__txt small { color: var(--muted); font-size: 13.5px; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line-strong); position: relative; transition: .2s; }
.toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .2s; }
.toggle input:checked + .toggle__track { background: var(--ok); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle input:disabled + .toggle__track { opacity: .55; }
.toggle input:focus-visible + .toggle__track { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.file-drop { display: grid; justify-items: center; gap: 4px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); text-align: center; cursor: pointer; color: var(--muted); background: var(--surface); }
.file-drop span { color: var(--ink); font-weight: 650; }
.file-drop input { width: 100%; max-width: 100%; min-width: 0; font-size: 13px; margin-top: 6px; }
.searchbar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); max-width: 680px; width: 100%; }
.searchbar > .ic { color: var(--muted); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: none; min-height: 44px; font-size: 16px; outline: none; }
.searchbar:focus-within { border-color: var(--ink); }

/* ---------- Alertes, listes, résumés ---------- */
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; align-items: flex-start; }
.alert .ic { margin-top: 2px; }
.alert b { display: block; margin-bottom: 2px; }
.alert--info { background: var(--info-soft); color: var(--info); }
.alert--info p, .alert--ok p, .alert--warn p, .alert--error p, .alert--lock p { color: var(--ink-2); }
.alert--ok { background: var(--ok-soft); color: var(--ok); }
.alert--warn { background: var(--warn-soft); color: var(--warn); }
.alert--error { background: var(--err-soft); color: var(--err); }
.alert--lock { background: var(--surface-2); color: var(--ink); }
.summary { display: grid; margin: 0; }
.summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 650; text-align: right; }
.summary .is-total { border-top: 1.5px solid var(--ink); border-bottom: 0; margin-top: 4px; padding-top: 14px; }
.summary .is-total dt { color: var(--ink); font-weight: 700; }
.summary .is-total dd { font: 800 20px/1 var(--f-display); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .ic { color: var(--on-gold); background: var(--gold); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: 1px; }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.bullets li::marker { color: var(--gold-ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 24px; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 4px; width: 2px; background: var(--line); }
.steps__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 800 17px/1 var(--f-display); }
.steps li > div { padding-top: 9px; display: grid; gap: 4px; }
.steps p { color: var(--muted); }
.steps--track .steps__n { background: var(--surface-2); color: var(--muted); border: 1.5px solid var(--line-strong); }
.steps--track li.done .steps__n { background: var(--ok); color: #fff; border-color: var(--ok); }
.steps--track li.cur .steps__n { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.steps--track li.done::before { background: var(--ok); }
.co-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.co-steps li { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.co-steps li:not(:last-child)::after { content: ''; width: 22px; height: 1.5px; background: var(--line-strong); margin-left: 4px; }
.co-steps span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 12px; }
.co-steps .cur { color: var(--ink); }
.co-steps .cur span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.co-steps .done span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 2px; cursor: pointer; font-weight: 700; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .2s; flex: none; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq__a { padding: 0 2px 20px; color: var(--ink-2); max-width: 68ch; }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted); }
.empty[hidden] { display: none; }
.empty h3 { font-size: 19px; }
.empty p { max-width: 44ch; }
.empty .actions { margin-top: 8px; justify-content: center; }
.status { display: grid; justify-items: center; text-align: center; gap: 14px; max-width: 620px; width: 100%; margin: 12px auto; padding: clamp(24px, 5cqi, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.status__ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; }
.status--ok .status__ic { background: var(--ok-soft); color: var(--ok); }
.status--warn .status__ic { background: var(--warn-soft); color: var(--warn); }
.status--error .status__ic { background: var(--err-soft); color: var(--err); }
.status--info .status__ic { background: var(--surface-2); color: var(--ink); }
.status--gold .status__ic { background: var(--gold); color: var(--on-gold); }
.status__title { font-size: clamp(24px, 3.4cqi, 34px); font-weight: 800; }
.status__text { color: var(--ink-2); max-width: 52ch; font-size: 16.5px; }
.status__sum { width: 100%; text-align: left; background: var(--bg); border-radius: var(--r); padding: 6px 18px; }
.status .actions { margin-top: 6px; }
.status__note { color: var(--muted); font-size: 14px; }
.secure { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13.5px; }
.secure .ic { color: var(--ok); }

/* ---------- Éléments divers ---------- */
.media { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
a.media:hover { border-color: var(--ink); }
.media__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); }
.media__txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.media__txt small { color: var(--muted); font-size: 13.5px; }
.list { display: grid; gap: 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container view (max-width: 700px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.tile__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--gold); color: var(--on-gold); margin-bottom: 4px; }
.tile b { font-size: 16px; }
.tile small { color: var(--muted); font-size: 14px; }
@container view (max-width: 480px) { .tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .tile { padding: 16px; } }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 15px/1 var(--f-display); flex: none; }
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.avatar--md { width: 52px; height: 52px; }
.avatar--lg { width: 96px; height: 96px; font-size: 32px; }
.oline { display: flex; align-items: center; gap: 14px; }
.oline__txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.oline__txt small { color: var(--muted); font-size: 13.5px; }
.oline__amt { font: 800 17px/1 var(--f-display); white-space: nowrap; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.progress__l { color: var(--muted); font-size: 13px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.quote { display: grid; gap: 14px; align-content: start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.quote p { font-size: 16.5px; color: var(--ink-2); }
.quote footer { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.quote footer small { color: var(--muted); display: block; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font: 700 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: color-mix(in srgb, var(--gold-soft) 45%, transparent); }
.tbl .a-right { text-align: right; }
.tbl .a-center { text-align: center; }
.tbl__empty { text-align: center; color: var(--muted); padding: 32px !important; }
.tbl .cell-book { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.tbl .cell-book .cover--xs { width: 36px; }
.tbl .cell-actions { display: flex; gap: 4px; justify-content: flex-end; }
@container view (max-width: 640px) {
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  .tbl--stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tbl--stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .tbl--stack .cell-book { min-width: 0; }
}

/* ---------- Indicateurs et graphiques ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.kpi { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); position: relative; }
.kpi__ic { position: absolute; top: 16px; right: 16px; color: var(--muted); }
.kpi__l { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.kpi__v { font: 800 26px/1.1 var(--f-display); letter-spacing: -.02em; }
.kpi__d { font-size: 13px; font-weight: 700; }
.kpi__d.up { color: var(--ok); }
.kpi__d.down { color: var(--err); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-lbl { fill: var(--muted); font: 500 11px var(--f-body); }
.ch-area { fill: color-mix(in srgb, var(--gold) 22%, transparent); stroke: none; }
.ch-line { fill: none; stroke: var(--gold-ink); stroke-width: 2.5; stroke-linejoin: round; }
.ch-dot { fill: var(--gold); stroke: var(--surface); stroke-width: 2.5; }
.ch-bar { fill: color-mix(in srgb, var(--ink) 75%, transparent); }
.ch-bar.is-last { fill: var(--gold); }
.barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.barlist li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.barlist__l { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist__t { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barlist__t i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.barlist b { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* ---------- Toasts et fenêtres ---------- */
.toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px; background: var(--block); color: var(--on-block); box-shadow: var(--shadow-lg); font-weight: 600; font-size: 14.5px; animation: tin .25s ease-out; transition: opacity .35s, transform .35s; }
.toast--ok .ic { color: var(--gold); }
.toast--error .ic { color: #ff8d84; }
.toast--info .ic { color: #9cc7ee; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
.modal-host { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal-back { position: absolute; inset: 0; background: rgba(10, 10, 8, .55); }
.modal { position: relative; width: min(100%, 520px); max-height: 88vh; overflow: auto; background: var(--surface); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.modal--wide { width: min(100%, 760px); }
.modal__x { position: absolute; top: 12px; right: 12px; }
.modal h2 { font-size: 22px; padding-right: 32px; }

/* ---------- Application mobile (cadre téléphone) ---------- */
.mode-app body { min-height: 100vh; }
.stage { display: flex; gap: 48px; justify-content: center; align-items: center; min-height: 100vh; padding: 32px 20px; }
.stage__info { width: 300px; display: grid; gap: 14px; align-content: start; }
.stage__info h1 { font-size: 30px; font-weight: 800; }
.stage__info p { color: var(--muted); }
.stage__info select { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); padding: 8px 10px; }
.stage__links { display: flex; flex-wrap: wrap; gap: 8px; }
.stage__note { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.phone { width: 400px; height: min(860px, calc(100vh - 64px)); min-height: 640px; border-radius: 54px; background: #0b0b0a; padding: 12px; box-shadow: 0 0 0 2px #2a2925, var(--shadow-lg); flex: none; }
.phone__screen { position: relative; height: 100%; border-radius: 43px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; isolation: isolate; }
.phone__status { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font: 650 14px/1 var(--f-body); }
.phone__notch { width: 110px; height: 30px; border-radius: 20px; background: #0b0b0a; }
.phone__sys { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .02em; }
.phone__sys .ic { width: 0; }
.appbar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--bg); }
.appbar--home { padding-left: 16px; border-bottom: 0; }
.appbar__title { flex: 1; min-width: 0; font: 750 16px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.appbar__tools { margin-left: auto; display: flex; }
.logo--app img { height: 30px; }
.mode-app .view { grid-template-columns: minmax(0, 1fr); flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 28px; display: grid; gap: 32px; align-content: start; scrollbar-width: none; }
.mode-app .view::-webkit-scrollbar { display: none; }
.mode-app .view > * { min-width: 0; }
.tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: var(--surface); padding: 6px 4px calc(14px + env(safe-area-inset-bottom, 0px)); }
.tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0; text-decoration: none; font-size: 11px; font-weight: 600; color: var(--muted); }
.tabbar a.on { color: var(--ink); }
.tabbar a.on .ic { color: var(--gold-ink); }
.tabbar .dot-badge { top: 0; right: calc(50% - 22px); }
.mode-app .toasts { position: absolute; bottom: 96px; width: calc(100% - 32px); }
.mode-app .modal-host { position: absolute; align-items: end; padding: 0; }
.mode-app .modal { border-radius: 24px 24px 0 0; max-height: 82%; width: 100%; }
.mode-app .ph__title { font-size: 26px; }
.mode-app .ph__text { font-size: 16px; }
.mode-app .sec__title { font-size: 21px; }
.mode-app .split__side { position: static; }
.mode-app .cta { border-radius: 20px; padding: 22px; }
.mode-app .status { border: 0; padding: 8px 0; background: transparent; }
.mode-app .card { padding: 18px; }
@media (max-width: 860px) {
  .stage { padding: 0; display: block; }
  .stage__info { display: none; }
  .phone { width: 100%; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; padding: 0; box-shadow: none; background: var(--bg); }
  .phone__screen { border-radius: 0; }
  .phone__status { display: none; }
}

/* ---------- Administration ---------- */
.adm { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.adm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.adm-side__logo { display: grid; gap: 6px; padding: 4px 8px; text-decoration: none; }
.adm-side__logo .logo img { height: 34px; }
.adm-side__logo span { font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.adm-nav { display: grid; gap: 14px; }
.adm-nav__g { display: grid; gap: 2px; }
.adm-nav__g > span { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
.adm-nav a:hover { background: var(--surface-2); }
.adm-nav a.on { background: var(--ink); color: var(--bg); }
.adm-nav a.on .ic { color: var(--gold); }
.adm-side__exit { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.adm-top__sel { display: none; }
.adm-top__sel select { min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); padding: 6px 10px; font-weight: 650; max-width: 100%; }
.adm-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.adm-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }
.adm-top__me { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.adm-top__who { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.adm-top__who span { display: grid; line-height: 1.2; }
.adm-top__who small { color: var(--muted); font-size: 12.5px; }
.adm-view { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; container: view / inline-size; }
.adm-view > * { min-width: 0; }
.adm-view .ph__title { font-size: clamp(24px, 3cqi, 32px); }
.adm-view .ph__text { font-size: 16px; }
@media (max-width: 1000px) {
  .adm { grid-template-columns: 1fr; }
  .adm-side { display: none; }
  .adm-top { flex-wrap: wrap; padding: 10px 16px; }
  .adm-top__sel { display: block; flex: 1 1 220px; }
  .adm-search { order: 3; flex: 1 1 100%; max-width: none; }
  .adm-top__who span { display: none; }
  .adm-view { padding: 20px 16px; }
}
.mode-app .adm { display: block; min-height: 0; }
.mode-app .adm-side { display: none; }
.mode-app .adm-top { position: static; flex-wrap: wrap; padding: 0 0 4px; border: 0; background: none; backdrop-filter: none; }
.mode-app .adm-top__sel { display: block; flex: 1; }
.mode-app .adm-top__sel select { width: 100%; }
.mode-app .adm-search, .mode-app .adm-top__who span { display: none; }
.mode-app .adm-view { padding: 16px 0 0; }

/* ---------- Plan des écrans ---------- */
.plan-group { display: grid; gap: 12px; }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.plan-item { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.plan-item:hover { border-color: var(--ink); }
.plan-item .mono { color: var(--gold-ink); font-weight: 600; min-width: 34px; }
.plan-item span:last-child { font-weight: 600; font-size: 14.5px; }

/* ---------- Accueil ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 12px; }
.hero__txt { display: grid; gap: 18px; justify-items: start; }
.hero__title { font-size: clamp(34px, 5.4cqi, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.hero__text { font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.hero__search { margin-top: 6px; }
.hero__ex { font-size: 14px; color: var(--muted); }
.hero__ex span { font-weight: 600; margin-right: 4px; }
.hero__ex a { color: var(--ink-2); font-weight: 600; text-underline-offset: 3px; }
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 28px; background: var(--block); overflow: hidden; }
.hero__art::before { content: ''; position: absolute; inset: auto -10% -35% -10%; height: 70%; background: radial-gradient(closest-side, rgba(253, 180, 2, .55), transparent); }
.hero__art::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, #fdb402 0 22px, #151513 22px 30px, #c2410c 30px 44px, #151513 44px 50px); }
.hero__fan { position: absolute; inset: 14% 10% 10%; }
.hero__bk { position: absolute; width: 44%; top: 8%; left: 28%; transition: transform .4s; }
.hero__bk--0 { transform: rotate(-12deg) translate(-58%, 8%); }
.hero__bk--1 { z-index: 2; transform: translateY(-2%); }
.hero__bk--2 { transform: rotate(12deg) translate(58%, 8%); }
.hero__art:hover .hero__bk--0 { transform: rotate(-15deg) translate(-64%, 6%); }
.hero__art:hover .hero__bk--2 { transform: rotate(15deg) translate(64%, 6%); }
.hero__stat { position: absolute; z-index: 3; left: 6%; bottom: 7%; display: grid; padding: 10px 14px; border-radius: 14px; background: #fdb402; color: #1a1407; line-height: 1.1; }
.hero__stat b { font: 800 22px/1 var(--f-display); }
.hero__stat span { font-size: 12px; font-weight: 600; }
.hero__stat--2 { left: auto; right: 6%; background: #f6f3ea; }
.hero__stat--2 b { font-size: 15px; }
@container view (max-width: 820px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero__art { aspect-ratio: 4 / 3; } .hero__text { font-size: 17px; } }
@container view (max-width: 480px) { .hero__stat--2 { display: none; } .hero__art { aspect-ratio: 1 / 1; } }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.trust > div { display: grid; gap: 4px; padding: 20px; background: var(--surface); }
.trust .ic { color: var(--gold-ink); margin-bottom: 6px; }
.trust small { color: var(--muted); font-size: 13.5px; }
@container view (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; } }

/* ---------- Filtres catalogue ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sel { min-height: 42px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); padding: 6px 14px; font-weight: 600; font-size: 14px; max-width: 100%; cursor: pointer; }
.filters__n { margin-left: auto; font-size: 14px; }

/* ---------- Page de vente ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: start; }
.pdp__media { display: grid; gap: 16px; position: sticky; top: 92px; }
.pdp__cover { padding: 28px; background: var(--surface-2); border-radius: 24px; }
.pdp__cover .cover { box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.pdp__media-acts { justify-content: center; }
.pdp__info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pdp__title { font-size: clamp(30px, 4.6cqi, 48px); font-weight: 800; letter-spacing: -.03em; }
.pdp__sub { font-size: 20px; color: var(--ink-2); font-weight: 500; }
.pdp__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; color: var(--ink-2); font-size: 14.5px; padding-block: 6px; }
.pdp__meta > span { display: inline-flex; gap: 6px; align-items: center; }
.pdp__author { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; }
.pdp__meta .rating { text-decoration: none; gap: 6px; }
.pdp__buy { display: grid; gap: 16px; margin-top: 6px; }
.pdp__price { display: flex; align-items: center; gap: 12px; }
.pdp__price .price b { font-size: 32px; }
.pdp__buy .grow { flex: 1 1 220px; }
.fav-inline.on .ic { color: #d0342c; }
@container view (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 24px; } .pdp__media { position: static; } .pdp__cover { max-width: 300px; justify-self: center; width: 100%; } }
.subnav { display: flex; gap: 6px; overflow-x: auto; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); scrollbar-width: none; }
.subnav a { flex: none; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.subnav a:hover { background: var(--surface-2); color: var(--ink); }
.part { display: grid; gap: 10px; }
.part h3 { font-size: 18px; }
.status__search { width: 100%; display: flex; justify-content: center; }
.mode-app .pdp__title { font-size: 28px; }
.mode-app .pdp__buy { padding: 16px; }

/* Colonnes de grille rétrécissables (évite le débordement par le contenu min-content) */
.hero__txt, .ph__main, .sec, .narrow, .split__main, .split__side, .tabs, .form, .panel, .status, .stack-sm, .prose, .pdp__info, .pdp__buy, .bk__body, .cta__txt, .card, .ftr__brand, .stage__info { grid-template-columns: minmax(0, 1fr); }
/* Équipe Découverte & vente */
.dv-center { text-align: center; justify-self: center; }
.dv-small { font-size: 13.5px; }
.dv-block { display: block; margin-top: 4px; }
.dv-anchor { scroll-margin-top: 96px; }
.mode-app .dv-anchor { scroll-margin-top: 8px; }

/* Bascule d'états du prototype */
.dv-proto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1.5px dashed var(--line-strong); border-radius: 999px; font-size: 13px; width: fit-content; max-width: 100%; justify-self: center; color: var(--muted); }
.dv-proto > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; padding: 0 6px; }
.dv-proto a { padding: 4px 11px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.dv-proto a:hover { background: var(--surface-2); }
.dv-proto a.on { background: var(--ink); color: var(--bg); }

/* Recherche */
.dv-search-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
.dv-search-main > * { width: 100%; max-width: 680px; }
.dv-popular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; }
.dv-popular > span { font-size: 13.5px; font-weight: 650; }
.dv-popular__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dv-popular__list .chip { text-decoration: none; }
.dv-count { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.dv-tips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); text-align: left; }
.dv-tips li { display: flex; gap: 8px; align-items: center; }
.dv-tips .ic { color: var(--gold-ink); }
.dv-loading { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.dv-loading .ic { color: var(--gold-ink); animation: dvpulse 1s ease-in-out infinite alternate; }
@keyframes dvpulse { from { opacity: .35; transform: scale(.9); } }
[data-dv-results].is-loading .book-grid { opacity: .25; filter: grayscale(1); pointer-events: none; }
.dv-skel { display: grid; gap: 10px; }
.dv-skel i { display: block; aspect-ratio: 2 / 3; border-radius: 6px 10px 10px 6px; background: var(--surface-2); }
.dv-skel b { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); }
.dv-skel b:last-child { width: 60%; }

/* Catégories */
.dv-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.dv-cat { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.dv-cat:hover { border-color: var(--ink); }
.dv-cat__top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; }
.dv-cat__title { font-size: 19px; font-weight: 750; }
.dv-cat__title a { text-decoration: none; }
.dv-cat .actions { margin-top: 4px; }
.dv-cathead { display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--gold-soft); color: var(--gold-ink); }
.dv-cathead .kv { color: var(--ink); font-size: 14px; }

/* Classement populaire */
.dv-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 720px; }
.dv-podium__it { position: relative; display: grid; gap: 8px; text-decoration: none; }
.dv-podium__it .bk__rank { top: -10px; left: -8px; }
.dv-podium__it b { font-size: 15px; line-height: 1.25; }
.dv-podium__it small { font-size: 13px; }
.dv-ranks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.dv-rank { display: grid; grid-template-columns: 44px 84px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.dv-rank__n { font: 800 28px/1 var(--f-display); color: var(--gold-ink); text-align: center; }
.dv-rank__cover { display: block; }
.dv-rank__cover .cover--sm { width: 100%; }
.dv-rank__body { display: grid; gap: 6px; min-width: 0; }
.dv-rank__side { display: grid; gap: 10px; justify-items: end; }
@container view (max-width: 720px) {
  .dv-rank { grid-template-columns: 26px 64px minmax(0, 1fr); gap: 12px; align-items: start; }
  .dv-rank__n { font-size: 22px; padding-top: 4px; }
  .dv-rank__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .dv-rank__side .actions { gap: 8px; }
}

/* Nouveautés, conversion */
.dv-feature { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; background: var(--gold-soft); border-color: transparent; }
.dv-feature__cover { display: block; }
.dv-feature__txt { display: grid; gap: 10px; justify-items: start; }
.dv-feature__txt h2 { font-size: clamp(22px, 3cqi, 30px); font-weight: 800; }
@container view (max-width: 620px) { .dv-feature { grid-template-columns: 1fr; gap: 18px; } .dv-feature__cover { width: 150px; } }
.dv-conv { display: flex; gap: 24px; align-items: center; }
.dv-conv > .cover, .dv-conv > .avatar { flex: none; }
@container view (max-width: 560px) { .dv-conv { flex-direction: column; align-items: flex-start; } }

/* Gratuits */
.dv-free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px 28px; }
.dv-free .bk__cover { width: 96px; }
.bk__meta > .dv-nodot::before { content: none !important; margin: 0 !important; }
.dv-read { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--ink-2); }
.dv-read li::marker { color: var(--gold-ink); font-weight: 700; }

/* Auteurs */
.dv-author { display: flex; gap: 28px; align-items: center; }
.dv-author__meta { color: var(--ink-2); font-size: 14.5px; }
.dv-author__meta span { display: inline-flex; gap: 6px; align-items: center; }
@container view (max-width: 560px) { .dv-author { flex-direction: column; align-items: flex-start; gap: 16px; } .dv-author .avatar--lg { width: 76px; height: 76px; font-size: 26px; } }
.dv-author__about { align-items: start; }
.dv-acard { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.dv-acard:hover { border-color: var(--ink); }
.dv-acard > .stack-sm { flex: 1; min-width: 0; gap: 3px; }
.dv-acard small { font-size: 13.5px; }
.dv-acard > .ic { color: var(--muted); flex: none; }
.dv-about { align-items: start; }
.dv-sol__it { display: grid; gap: 8px; align-content: start; }

/* Collections */
.dv-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.dv-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.dv-col.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dv-col__fan { display: flex; padding: 6px 0 4px 6px; }
.dv-col__fan .cover--xs { width: 64px; margin-left: -14px; transform: rotate(-4deg); }
.dv-col__fan .cover--xs:first-child { margin-left: 0; }
.dv-col__fan .cover--xs:nth-child(2) { transform: translateY(-4px); z-index: 1; }
.dv-col__fan .cover--xs:nth-child(3) { transform: rotate(4deg); }
.dv-col__title { font-size: 19px; font-weight: 750; }
.dv-col p { font-size: 14px; }

/* Comparateur */
.dv-cmp { min-width: 520px; }
.dv-cmp th[scope=row] { width: 120px; background: var(--surface-2); font: 700 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding: 13px 16px; text-align: left; vertical-align: middle; }
.dv-cmp td { vertical-align: top; }
.dv-cmp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dv-cmp-add .sel { min-width: 240px; }
.dv-cmp .stack-sm .btn { width: 100%; }

/* Pour vous */
.dv-interests { display: grid; gap: 8px; }
.dv-interests > span { font-size: 13.5px; font-weight: 650; }
.dv-interests .chip { cursor: default; }
.dv-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }

/* Pages de vente */
.subnav a.dv-on { background: var(--ink); color: var(--bg); }
.dv-mini { display: flex; gap: 14px; align-items: center; }
.dv-mini > .cover, .dv-mini__cover { flex: none; }
.dv-mini__cover { display: block; }
.dv-mini__title { font: 750 17px/1.25 var(--f-display); text-decoration: none; color: var(--ink); }
.dv-aside { display: grid; gap: 16px; }
.dv-aside .actions .btn { flex: 1 1 100%; }
.ph__aside .dv-mini { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

.dv-reader { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface-2); }
.dv-reader__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }
.dv-pages { display: grid; }
.dv-page { position: relative; max-width: none; background: #fffdf7; color: #2b2a26; border-radius: 6px; padding: clamp(22px, 5cqi, 44px); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -24px rgba(0,0,0,.4); min-height: 380px; align-content: start; font-family: Georgia, 'Times New Roman', serif; font-size: 16.5px; line-height: 1.65; }
.dv-page[hidden] { display: none; }
.dv-page h3 { font-size: 22px; color: #151513; }
.dv-page .eyebrow { color: #8a5c00; }
.dv-page .muted { color: #6b675e; }
.dv-page ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.dv-page__n { position: absolute; bottom: 12px; right: 18px; font: 600 12px var(--f-body); color: #8b867a; }
.dv-page__cover { display: grid; place-items: center; }
.dv-page__cover .cover { max-width: 220px; }
.dv-reader__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dv-dots { display: flex; gap: 6px; }
.dv-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dv-dots i.on { background: var(--gold-ink); width: 20px; border-radius: 4px; }

.dv-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.dv-facts .ic { color: var(--gold-ink); }
.dv-toc { display: grid; gap: 18px; }
.dv-toc__part { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.dv-toc__part h3 { display: grid; gap: 4px; font-size: 19px; }
.dv-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dv-toc__list li { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; color: var(--ink-2); }
.dv-toc__n { font: 700 13px var(--f-mono); color: var(--gold-ink); }

.dv-method .card { display: grid; gap: 8px; align-content: start; }
.dv-method h3 { font-size: 17px; }
.dv-method__n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 15px/1 var(--f-display); }
.dv-quote-mini { margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--gold); }
.dv-quote-mini .lead { font-size: 16.5px; font-style: italic; }
.dv-benefits { display: grid; gap: 8px; margin-top: 6px; }
.dv-benefits span { display: flex; gap: 10px; align-items: center; color: var(--on-block); }
.dv-benefits .ic { color: var(--gold); flex: none; }

.dv-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.dv-score__big { display: grid; justify-items: start; gap: 4px; }
.dv-score__big > b { font: 800 52px/1 var(--f-display); letter-spacing: -.03em; }
.dv-score__big > span { color: var(--muted); font-weight: 600; margin-top: -6px; }
.dv-score__bars .barlist li { grid-template-columns: 70px minmax(0, 1fr) 32px; }
@container view (max-width: 760px) { .dv-score { grid-template-columns: 1fr; gap: 18px; } }
.dv-reviews .quote[hidden] { display: none; }

/* Offre */
.dv-offer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.dv-offer__txt { display: grid; gap: 16px; justify-items: start; }
.dv-offer__card { display: grid; gap: 8px; padding: 32px; border-radius: 24px; background: var(--block); color: var(--on-block); position: relative; overflow: hidden; }
.dv-offer__card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, #fdb402 0 22px, #151513 22px 30px, #c2410c 30px 44px, #151513 44px 50px); }
.dv-offer__k { font: 700 13px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.dv-offer__big { font: 800 clamp(56px, 9cqi, 88px)/1 var(--f-display); color: var(--gold); letter-spacing: -.04em; }
.dv-offer__prices { display: grid; gap: 4px; margin-top: 10px; padding-top: 14px; border-top: 1px solid #3a3933; }
.dv-offer__prices s { color: var(--on-block-muted); margin-left: 6px; }
.dv-offer__prices b { color: var(--gold); margin-left: 6px; font-size: 20px; }
.dv-offer__card small { color: var(--on-block-muted); }
@container view (max-width: 760px) { .dv-offer { grid-template-columns: 1fr; } }
.dv-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.dv-pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.dv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dv-pick .cover--xs { width: 40px; }
.dv-pick__txt { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14.5px; }
.dv-pick__txt small { font-size: 12.5px; }
.dv-pick__p { white-space: nowrap; font-size: 14.5px; }
.dv-pick__box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; }
.dv-pick:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dv-pick input:checked ~ .dv-pick__box { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dv-pick input:focus-visible ~ .dv-pick__box { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.dv-promo-sum { display: grid; gap: 14px; max-width: 460px; width: 100%; justify-self: end; }
@container view (max-width: 760px) { .dv-promo-sum { justify-self: stretch; max-width: none; } }
.dv-single { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
@container view (max-width: 620px) { .dv-single { grid-template-columns: 1fr; } .dv-single__cover { width: 150px; } }

/* Formats, devise, confirmation, partage */
.dv-format { display: grid; gap: 16px; align-content: start; }
.dv-format h2 { font-size: 21px; font-weight: 800; }
.dv-format.is-pick { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dv-format__price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.dv-format__price .price b { font-size: 26px; }
@container view (max-width: 900px) { .dv-formats { grid-template-columns: 1fr; } }
.dv-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.dv-legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 12px; }
.dv-next { width: 100%; text-align: left; display: grid; gap: 12px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); }
.dv-steps-sm li { padding-bottom: 12px; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.dv-steps-sm .steps__n { width: 32px; height: 32px; font-size: 14px; }
.dv-steps-sm li:not(:last-child)::before { left: 15px; top: 32px; }
.dv-steps-sm li > div { padding-top: 5px; }
.dv-share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dv-share__it { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13.5px; text-align: center; color: var(--ink); }
.dv-share__it:hover { border-color: var(--ink); }
.dv-share__it .ic { color: var(--gold-ink); }
@container view (max-width: 520px) { .dv-share { grid-template-columns: 1fr 1fr; } }
.dv-link { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.dv-link .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px; }
.dv-link .btn { flex: none; }
/* Équipe Compte & achat */
.ca-co { display: grid; gap: 28px; }
.ca-h1 { font-size: clamp(24px, 3.4cqi, 32px); font-weight: 800; letter-spacing: -.02em; }
.ca-h2 { font-size: 21px; font-weight: 800; }
.ca-center { text-align: center; }
.ca-center-self { justify-self: center; }
.ca-strong { font-weight: 700; }
.ca-break { overflow-wrap: anywhere; }
.ca-narrow { max-width: 560px; }
.ca-box { gap: 20px; }
.ca-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.ca-ic--warn { background: var(--warn-soft); color: var(--warn); }
.ca-err { display: flex; gap: 8px; align-items: center; color: var(--err); font-size: 14px; font-weight: 600; margin-top: 8px; }
.ca-cancel { justify-self: start; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.ca-cancel:hover { color: var(--err); }
.ca-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.ca-fs legend { font-weight: 650; font-size: 14.5px; margin-bottom: 10px; padding: 0; }

/* Connexion / inscription */
.ca-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
.ca-auth__brand { display: grid; gap: 18px; align-content: start; background: var(--block); color: var(--on-block); border-radius: 24px; padding: clamp(24px, 4cqi, 40px); position: relative; overflow: hidden; }
.ca-auth__brand h2 { color: var(--on-block); font-size: clamp(22px, 2.6cqi, 28px); font-weight: 800; }
.ca-auth__brand .eyebrow { color: var(--gold); }
.ca-auth__brand .checklist li { color: var(--on-block-muted); }
.ca-auth__brand .checklist .ic { color: var(--gold); }
.ca-auth__fan { display: flex; gap: 12px; margin-top: 8px; }
.ca-auth__fan > * { flex: 0 0 auto; transform: rotate(-3deg); }
.ca-auth__fan > *:nth-child(2) { transform: translateY(-10px) rotate(2deg); }
.ca-auth__card { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 4cqi, 36px); }
@container view (max-width: 820px) {
  .ca-auth { grid-template-columns: minmax(0, 1fr); }
  .ca-auth__brand { order: 2; }
  .ca-auth__fan { display: none; }
}

/* Panier */
.ca-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 18px; }
.ca-item__cover { width: 92px; }
.ca-item__cover .cover { width: 92px; }
.ca-item__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: space-between; }
.ca-item__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ca-item__title { font-size: 17px; font-weight: 750; }
.ca-item__title a { text-decoration: none; }
.ca-item__title a:hover { text-decoration: underline; }
.ca-item__price { font: 800 18px/1.2 var(--f-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-item__acts { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ca-sel { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); min-height: 36px; max-width: 100%; }
.ca-sel select { border: 0; background: none; font-size: 14px; font-weight: 600; min-height: 34px; padding-right: 4px; max-width: 100%; min-width: 0; cursor: pointer; }
.ca-sel select:focus { outline: none; }
.ca-sel:focus-within { border-color: var(--ink); }
.ca-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ca-inline .field input { min-height: 48px; }
.ca-inline > .btn { min-height: 48px; }
.ca-promo-on { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); font-size: 14.5px; }
.ca-promo-on span { flex: 1; color: var(--ink); }
@container view (max-width: 520px) {
  .ca-item { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .ca-item__cover, .ca-item__cover .cover { width: 72px; }
  .ca-item__top { flex-direction: column; gap: 6px; }
  .ca-sel { width: 100%; }
  .ca-sel select { flex: 1; }
  .ca-inline { grid-template-columns: minmax(0, 1fr); }
}

/* Récapitulatif et articles */
.ca-recap .secure { margin-top: 2px; }
.ca-lines { gap: 12px; }
.ca-art { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ca-art + .ca-art { padding-top: 16px; border-top: 1px dashed var(--line); }
.ca-art .cover--sm { width: 84px; }
.ca-art--sm { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.ca-tags { gap: 6px; margin-top: 4px; }
.ca-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
@container view (max-width: 520px) {
  .ca-art { grid-template-columns: 64px minmax(0, 1fr); }
  .ca-art .cover--sm { width: 64px; }
  .ca-art .ca-item__price { grid-column: 2; }
}
.ca-amount { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--gold-soft); }
.ca-amount span { font-weight: 650; }
.ca-amount b { font: 800 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ca-mini-steps li { padding-bottom: 10px; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.ca-mini-steps .steps__n { width: 30px; height: 30px; font-size: 14px; }
.ca-mini-steps li > div { padding-top: 4px; }
.ca-mini-steps li:not(:last-child)::before { left: 14px; top: 30px; }
.ca-mini-steps b { font-weight: 600; font-size: 15px; }
.ca-cards { display: flex; gap: 8px; }
.ca-cards .paychip { display: inline-flex; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ca-frow-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ca-guar { gap: 12px; }
.ca-guar .media { align-items: flex-start; }

/* Traitement simulé */
.ca-proc { display: grid; gap: 22px; justify-items: center; padding: 12px 0; }
.ca-proc .steps { width: 100%; max-width: 420px; }
.ca-proc .alert { width: 100%; }
.ca-proc__sub { font-weight: 650; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ca-spinner { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--gold); animation: ca-spin .9s linear infinite; flex: none; }
.ca-spinner--sm { width: 18px; height: 18px; border-width: 2.5px; display: inline-block; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ca-spinner { animation: ca-spin 2.4s linear infinite !important; } }
.ca-checking { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; }
.ca-check-slot { width: 100%; text-align: left; }

/* Écrans de statut */
.ca-quick { width: 100%; }
.ca-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
@container view (max-width: 560px) { .ca-tiles { grid-template-columns: minmax(0, 1fr); } }
.ca-mailbox { display: grid; gap: 6px; width: 100%; padding: 18px; border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line-strong); }
.ca-mailbox b { font: 750 18px/1.3 var(--f-display); }
.ca-q { font-weight: 650; margin-top: 6px; }
.ca-edit-mail { width: 100%; text-align: left; }
.ca-conf-cover { width: 120px; margin: 4px auto; }
.ca-conf-cover .cover { width: 120px; }
.ca-causes { width: 100%; text-align: left; display: grid; gap: 8px; padding: 16px 18px; background: var(--err-soft); border-radius: var(--r); }
.ca-causes .bullets { margin: 0; color: var(--ink-2); }
.ca-after { margin-top: 4px; }
.ca-after .cta { padding: 24px; }
.ca-help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; }
.ca-thanks { font-size: 14px; }
/* Éléments masqués (l'attribut hidden doit l'emporter sur display) */
.form-error[hidden], [data-ca-pay][hidden], [data-ca-proc][hidden], [data-ca-err][hidden], [data-ca-check][hidden], .ca-edit-mail[hidden] { display: none; }
.ca-co .more-link, .ca-box .more-link { white-space: normal; }
.ca-recap .summary dt, .ca-co .summary dt { white-space: nowrap; }
/* ===== Équipe Espace lecteur (el-) ===== */
.el-small { font-size: 14px; }
.el-small a { font-weight: 600; }
.el-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 13px; color: var(--muted); }
.el-demo span { font-weight: 600; }
.el-demo a { color: var(--ink-2); font-weight: 600; text-underline-offset: 3px; }
.el-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 12px; }
.el-lbl { font-weight: 650; font-size: 14.5px; }
.el-fs-reset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---------- Hub Mon compte ---------- */
.el-me { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.el-me__t { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; }
.el-me__t h1 { font-size: clamp(24px, 3.4cqi, 34px); font-weight: 800; }
.el-me__t p { color: var(--ink-2); overflow-wrap: anywhere; }
.el-me__t small { color: var(--muted); font-size: 13.5px; }
.el-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
.el-stats a { display: grid; justify-items: center; gap: 2px; padding: 14px 6px; text-decoration: none; }
.el-stats a + a { border-left: 1px solid var(--line); }
.el-stats b { font: 800 22px/1.1 var(--f-display); }
.el-stats span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.el-stats a:hover { background: var(--surface-2); }
.el-resume-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--block); color: var(--on-block); text-decoration: none; }
.el-resume-card__t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.el-resume-card__t b { color: var(--on-block); font: 750 16px/1.25 var(--f-display); }
.el-resume-card__t small { color: var(--on-block-muted); font-size: 12.5px; }
.el-resume-card__t small:first-child { color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.el-resume-card .progress { background: #34332e; height: 6px; }
.el-resume-card__go { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.el-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 24px; align-items: start; }
.el-group { display: grid; gap: 10px; }
.el-group__t { font: 700 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }
.el-list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.el-li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); min-height: 56px; }
.el-li + .el-li { border-top: 1px solid var(--line); }
.el-li:hover { background: var(--surface-2); }
.el-li__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); }
.el-li__t { flex: 1; min-width: 0; display: grid; }
.el-li__t b { font-weight: 600; font-size: 15px; }
.el-li__t small { color: var(--muted); font-size: 13px; }
.el-li__r { color: var(--muted); font-size: 14px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.el-li > .ic:last-child { color: var(--muted); }
.el-me__foot { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 420px; width: 100%; margin-inline: auto; }
.el-danger-link { color: var(--err); font-weight: 600; font-size: 14px; }
@container view (max-width: 520px) {
  .el-me { gap: 14px; }
  .el-me .avatar--lg { width: 72px; height: 72px; font-size: 24px; }
  .el-me > .btn { width: 100%; }
  .el-stats b { font-size: 19px; }
}

/* ---------- Bibliothèque ---------- */
.el-continue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border-radius: 22px; background: var(--block); color: var(--on-block); }
.el-continue__t { display: grid; gap: 8px; }
.el-continue h2 { color: var(--on-block); font-size: clamp(20px, 2.6cqi, 26px); font-weight: 800; }
.el-continue p { color: var(--on-block-muted); font-size: 14.5px; }
.el-continue .eyebrow { color: var(--gold); }
.el-continue .progress { background: #34332e; max-width: 420px; }
.el-continue .actions { margin-top: 6px; }
.el-continue .btn--secondary { background: transparent; color: var(--on-block); border-color: #4a4840; }
@container view (max-width: 520px) { .el-continue { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; } .el-continue .cover--sm { width: 72px; } .el-continue .actions { grid-column: 1 / -1; } }
.el-lib, .el-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.el-lcard, .el-fcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); align-items: start; }
.el-lcard[hidden] { display: none; }
.el-lcard--saved { background: transparent; border-style: dashed; }
.el-lcard__cover, .el-fcard__cover { display: block; text-decoration: none; }
.el-lcard__body, .el-fcard__body { display: grid; gap: 6px; min-width: 0; }
.el-lcard h3, .el-fcard h3 { font-size: 17px; font-weight: 750; line-height: 1.25; }
.el-lcard h3 a, .el-fcard h3 a { text-decoration: none; }
.el-lcard h3 a:hover, .el-fcard h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.el-lcard__by { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.el-lcard__fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.el-lcard__fmts span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 650; color: var(--ink-2); }
.el-lcard__prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 2px; }
.el-lcard__prog small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.el-lcard__meta { color: var(--muted); font-size: 13px; }
.el-lcard__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.el-lcard__meta a { color: var(--ink-2); font-weight: 650; white-space: nowrap; }
.el-fav { width: 36px; height: 36px; border: 1.5px solid var(--line-strong); }
.el-fav.on { color: #d0342c; border-color: transparent; background: var(--err-soft); }
.el-fcard__foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
@container view (max-width: 520px) {
  .el-lcard, .el-fcard { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .el-lcard .cover--sm, .el-fcard .cover--sm { width: 72px; }
  .el-lcard__acts, .el-fcard .el-lcard__acts { grid-column: 1 / -1; }
  .el-lcard__body { display: contents; }
  .el-lcard__body > :not(.el-lcard__acts) { grid-column: 2; }
  .el-lcard__cover { grid-row: 1 / span 5; }
  .el-lcard { row-gap: 6px; }
}
.el-reco { display: grid; gap: 14px; justify-items: start; padding: 20px; background: var(--gold-soft); border-radius: var(--r-lg); }
.el-reco .bk--row { border: 0; padding: 0; width: 100%; }

/* ---------- Achats ---------- */
.el-mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.el-mini-kpis div { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.el-mini-kpis b { font: 800 20px/1.15 var(--f-display); }
.el-mini-kpis span { color: var(--muted); font-size: 13px; }
.el-orders { display: grid; gap: 14px; }
.el-order { display: grid; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.el-order[hidden] { display: none; }
.el-order__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
.el-order__top .mono { font-weight: 600; }
.el-order__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.el-order__line { display: flex; align-items: center; gap: 14px; }
.el-order__line > div:not(.cover) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.el-order__line small { color: var(--muted); font-size: 13.5px; }
.el-order__amt { font: 800 18px/1 var(--f-display); white-space: nowrap; }
.el-order__note { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--warn); background: var(--warn-soft); padding: 10px 12px; border-radius: var(--r-sm); }
.el-order__note .ic { margin-top: 2px; }
.el-order__acts { gap: 8px; }
@container view (max-width: 520px) { .el-order { padding: 16px; } .el-order__pills { margin-left: 0; width: 100%; } .el-mini-kpis b { font-size: 16px; } .el-mini-kpis div { padding: 12px; } }
.el-prod { display: flex; gap: 18px; align-items: flex-start; }
.el-prod > .stack-sm { flex: 1; min-width: 0; }
.el-prod__t { font: 750 18px/1.25 var(--f-display); }
.el-prod__sum > div { padding: 7px 0; }
@container view (max-width: 520px) { .el-prod .cover--sm { width: 72px; } }

/* ---------- Téléchargement ---------- */
.el-dl { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; align-items: start; }
.el-dl__cover { padding: 26px; background: var(--surface-2); border-radius: 24px; }
.el-dl__main { display: grid; gap: 18px; justify-items: start; }
.el-dl__main > * { width: 100%; }
.el-dl__main > .row, .el-dl__main > .actions { width: auto; }
.el-dl__title { font-size: clamp(26px, 3.6cqi, 40px); font-weight: 800; letter-spacing: -.02em; }
.el-dl__book { display: grid; gap: 14px; padding: 18px 20px; }
.el-dl__book > div { display: grid; gap: 2px; }
.el-dl__book small { color: var(--muted); }
.el-dl__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.el-dl__facts div { background: var(--bg); border-radius: var(--r-sm); padding: 8px 10px; }
.el-dl__facts dt { color: var(--muted); font-size: 12px; }
.el-dl__facts dd { margin: 0; font-weight: 700; font-size: 14.5px; }
#el-dlzone { display: grid; gap: 12px; }
#el-dlzone:empty { display: none; }
.el-dlprog { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.el-dlprog[hidden] { display: none; }
.el-dlprog .progress i { transition: width .14s linear; }
.el-dlprog.is-done { border-color: var(--ok); background: var(--ok-soft); }
.el-dlprog.is-done .progress i { background: var(--ok); }
.el-dl__opts { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.el-opt { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border: 0; background: none; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); cursor: pointer; text-align: left; }
.el-opt .ic { color: var(--gold-ink); }
.el-opt:hover span { text-decoration: underline; text-underline-offset: 3px; }
@container view (max-width: 760px) {
  .el-dl { grid-template-columns: 1fr; gap: 20px; }
  .el-dl__cover { max-width: 200px; width: 100%; justify-self: center; padding: 18px; }
  .el-dl__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Lecteur PDF ---------- */
.el-reader { --rbar-top: 69px; position: relative; display: grid; grid-template-rows: auto 1fr auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.mode-app .view:has(> .el-reader) { padding: 0; gap: 0; grid-template-rows: minmax(100%, 1fr) auto; align-content: stretch; }
.mode-app .view:has(> .el-reader) > .el-demo { margin: 16px; }
.mode-app .el-reader { --rbar-top: 0px; border: 0; border-radius: 0; min-height: 100%; }
.el-fs .hdr, .el-fs .ftr, .el-fs .phone__status, .el-fs .appbar, .el-fs .tabbar, .el-fs .el-demo { display: none !important; }
.el-fs .el-reader { --rbar-top: 0px; border-radius: 0; border: 0; min-height: 100vh; }
.el-fs.mode-app .el-reader, .mode-app .el-fs .el-reader { min-height: 100%; }
.el-fs .web .view { padding: 0; max-width: none; }
.el-rbar { position: sticky; top: var(--rbar-top); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.el-rbar__back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 14px; flex: none; }
.el-rbar__back:hover { background: var(--surface-2); }
.el-rbar__t { flex: 1; min-width: 0; display: grid; text-align: center; }
.el-rbar__t b { font: 750 15px/1.25 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-rbar__t small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.el-rbar__tools { display: flex; flex: none; }
.el-rbar__tools .icon-btn.on { color: var(--gold-ink); }
.el-rbody { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.el-reader--notoc .el-rbody { grid-template-columns: minmax(0, 1fr); }
.el-reader--notoc .el-side { display: none; }
.el-side { border-right: 1px solid var(--line); background: var(--surface); }
.el-side .el-toc { position: sticky; top: calc(var(--rbar-top) + 58px); max-height: calc(100vh - var(--rbar-top) - 150px); overflow-y: auto; padding: 18px 14px; scrollbar-width: thin; }
.el-toc { display: grid; gap: 10px; align-content: start; }
.el-toc h3 { font: 700 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 0; }
.el-toc h3 + * { margin-bottom: 8px; }
.el-toc__list, .el-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.el-toc__part { font-weight: 700; font-size: 12.5px; color: var(--gold-ink); padding: 10px 8px 4px; }
.el-toc__list button { width: 100%; display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding: 8px 10px; border: 0; background: none; border-radius: 8px; text-align: left; cursor: pointer; font-size: 14px; color: var(--ink-2); border-left: 3px solid transparent; }
.el-toc__list button:hover { background: var(--surface-2); }
.el-toc__list button.on { background: var(--gold-soft); color: var(--ink); font-weight: 650; border-left-color: var(--gold); border-radius: 0 8px 8px 0; }
.el-toc__list small { color: var(--muted); font-variant-numeric: tabular-nums; }
.el-toc__empty { font-size: 13.5px; color: var(--muted); padding: 0 8px; }
.el-marks li { display: flex; align-items: center; gap: 4px; }
.el-marks li > button:first-child { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; }
.el-marks li > button:first-child:hover { background: var(--surface-2); }
.el-marks .ic { color: var(--gold-ink); flex: none; }
.el-marks span { display: grid; min-width: 0; font-size: 14px; }
.el-marks small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal .el-toc { gap: 6px; }
.el-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 14px; padding: 22px 20px 28px; overflow-x: auto; min-width: 0; --fit: min(100%, 640px, calc((100vh - 270px) / 1.414)); }
.mode-app .el-stage { padding: 14px 10px 18px; --fit: 100%; }
.el-fs .el-stage { --fit: min(100%, 760px, calc((100vh - 150px) / 1.414)); }
.el-resume { display: flex; align-items: center; gap: 10px; width: var(--fit); padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--block); color: var(--on-block); font-size: 13.5px; }
.el-resume .ic { color: var(--gold); flex: none; }
.el-resume span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-resume b { color: var(--gold); }
.el-resume .icon-btn { color: var(--on-block); width: 30px; height: 30px; }
.el-resume .icon-btn:hover { background: #2b2a26; }

/* Feuille de papier : toutes les tailles en unités de conteneur, le zoom ne change que la largeur */
.el-paper { --paper: #fffdf8; --pink: #1d1b16; --pmuted: #77705f; --prule: #e7e1d1; --pgold: #9a6a00; --pbox: #f6f1e4;
  container-type: inline-size; flex: none; width: calc(var(--fit) * var(--z, 1)); max-width: none; aspect-ratio: 1 / 1.414; background: var(--paper); color: var(--pink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px -20px rgba(0,0,0,.45); border-radius: 3px; overflow: clip; touch-action: pan-y; user-select: text; }
.pp { height: 100%; padding: 6.5cqi 8.5cqi 5cqi; display: flex; flex-direction: column; font: 400 3cqi/1.52 Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.el-reader--sepia .el-paper { --paper: #f4ead3; --pink: #3b2f1e; --pmuted: #85735a; --prule: #e0d2b2; --pbox: #ece0c3; }
.el-reader--sombre .el-paper { --paper: #1f1e1b; --pink: #dcd6c8; --pmuted: #958e7e; --prule: #34322c; --pgold: #e8b64a; --pbox: #2a2925; }
.el-reader--sombre .el-stage { background: #121210; }
.el-paper.turn-next { animation: el-turn-n .28s ease-out; }
.el-paper.turn-prev { animation: el-turn-p .28s ease-out; }
@keyframes el-turn-n { from { opacity: .3; transform: translateX(18px); } }
@keyframes el-turn-p { from { opacity: .3; transform: translateX(-18px); } }
.pp-run { display: flex; justify-content: space-between; gap: 4cqi; padding-bottom: 1.6cqi; margin-bottom: 4cqi; border-bottom: 1px solid var(--prule); font: 600 1.9cqi/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pmuted); }
.pp-run span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-run span:last-child { text-align: right; }
.pp-body { flex: 1; min-height: 0; overflow: hidden; display: grid; gap: 2.3cqi; align-content: start; }
.pp-body p { margin: 0; text-align: justify; hyphens: auto; }
.pp-num { margin-top: auto; padding-top: 3cqi; text-align: center; font: 600 2.2cqi/1 var(--f-body); color: var(--pmuted); font-variant-numeric: tabular-nums; }
.pp-label { font: 700 2cqi/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pgold); }
.pp-h { font: 800 5.4cqi/1.12 var(--f-display); color: var(--pink); letter-spacing: -.02em; margin-bottom: 1cqi; }
.pp-h--ch { font-size: 5.8cqi; padding-bottom: 2.4cqi; border-bottom: 0.6cqi solid var(--pgold); width: fit-content; max-width: 100%; }
.pp-body h3 { font: 750 3.5cqi/1.25 var(--f-display); color: var(--pink); margin-top: 1cqi; }
.pp-lead { font-size: 3.35cqi; line-height: 1.5; font-style: italic; color: var(--pink); }
.pp-list, .pp-steps, .pp-box ul, .pp-box ol { margin: 0; padding-left: 5cqi; display: grid; gap: 1.2cqi; }
.pp-list li::marker, .pp-box ul li::marker { color: var(--pgold); }
.pp-steps li::marker, .pp-box ol li::marker { color: var(--pgold); font-weight: 700; font-family: var(--f-body); }
.pp-box, .pp-case, .pp-tip { padding: 3cqi 3.6cqi; border-radius: 1.2cqi; background: var(--pbox); display: grid; gap: 1.4cqi; }
.pp-box > b, .pp-case > b, .pp-tip > b { font: 700 2.3cqi/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pgold); }
.pp-box--gold { background: transparent; border: 0.4cqi solid var(--pgold); }
.pp-case { border-left: 1cqi solid var(--pgold); border-radius: 0 1.2cqi 1.2cqi 0; }
.pp-case p { font-style: italic; }
.pp-tip { background: transparent; border: 1px dashed var(--pmuted); }
.pp-sign { font-style: italic; color: var(--pmuted); text-align: right !important; }
.pp-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5cqi; font-size: 2.85cqi; }
.pp-toc button { width: 100%; display: flex; align-items: baseline; gap: 1.5cqi; padding: 0.7cqi 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.pp-toc button:hover span { text-decoration: underline; }
.pp-toc i { flex: 1; border-bottom: 1px dotted var(--pmuted); transform: translateY(-0.6cqi); min-width: 3cqi; }
.pp-toc .is-part { margin-top: 1.6cqi; font-weight: 700; font-family: var(--f-body); font-size: 2.6cqi; letter-spacing: .04em; color: var(--pgold); }
.pp-toc li:not(.is-part) span { padding-left: 2cqi; }
.pp-mentions { display: grid; gap: 3.2cqi; font-size: 2.6cqi; color: var(--pmuted); margin-top: 18cqi; }
.pp-mentions b { color: var(--pink); font-size: 3cqi; }
.pp-owner { padding: 2.4cqi 3cqi; border: 1px solid var(--prule); border-radius: 1cqi; color: var(--pink); text-align: left !important; }
.pp-title { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 3.6cqi; position: relative; }
.pp-title__a { font: 600 2.6cqi/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pmuted); }
.pp-title__bar { width: 26cqi; height: 1.6cqi; background: repeating-linear-gradient(90deg, #fdb402 0 22%, #151513 22% 30%, #c2410c 30% 52%, #151513 52% 60%); }
.pp-title h1 { font: 800 8cqi/1.06 var(--f-display); letter-spacing: -.03em; color: var(--pink); max-width: 90%; }
.pp-title p { font-size: 3.6cqi; font-style: italic; color: var(--pmuted); max-width: 80%; text-align: center; }
.pp-title__ed { position: absolute; bottom: 0; font: 600 2.2cqi/1.5 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pmuted); }
.pp-part { flex: 1; display: grid; align-content: center; gap: 3.5cqi; padding-left: 4cqi; }
.pp-part .pp-label { font-size: 2.6cqi; }
.pp-part h2 { font: 800 8.5cqi/1.05 var(--f-display); color: var(--pink); letter-spacing: -.03em; }
.pp-part ol { list-style: none; margin: 4cqi 0 0; padding: 0; display: grid; gap: 2.4cqi; font-size: 3.3cqi; }
.pp-part ol span { display: block; font: 700 2cqi/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pmuted); }

.el-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(3px); transition: opacity .3s; }
.el-loading.out { opacity: 0; }
.el-loading small { color: var(--muted); }
.el-spin { width: 38px; height: 38px; border-radius: 50%; border: 3.5px solid var(--line-strong); border-top-color: var(--gold); animation: el-spin .8s linear infinite; }
@keyframes el-spin { to { transform: rotate(360deg); } }

.el-rfoot { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
.el-prog { display: grid; grid-template-columns: minmax(80px, 160px) auto; gap: 12px; align-items: center; flex: 1 1 300px; min-width: 0; }
.el-prog > span { display: grid; min-width: 0; }
.el-prog b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.el-prog small { color: var(--muted); font-size: 12px; }
.el-ctrl { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.el-ctrl__nav { border: 1.5px solid var(--line-strong); }
.el-ctrl__sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }
.el-pgin { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.el-pgin input { width: 54px; height: 36px; text-align: center; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
.el-pgin input::-webkit-inner-spin-button, .el-pgin input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.el-zoomv { min-width: 56px; height: 36px; border: 0; background: none; font-weight: 700; font-size: 13.5px; cursor: pointer; border-radius: 8px; font-variant-numeric: tabular-nums; }
.el-zoomv:hover { background: var(--surface-2); }
@container view (max-width: 900px) {
  .el-rbody { grid-template-columns: minmax(0, 1fr); }
  .el-side { display: none; }
}
@container view (max-width: 560px) {
  .el-rbar__back span { display: none; }
  .el-rbar { padding: 6px 4px; gap: 2px; }
  .el-rbar__tools .icon-btn { width: 38px; }
  .el-rfoot { padding: 8px 10px 10px; gap: 8px; }
  .el-prog { flex-basis: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .el-prog small { display: none; }
  .el-ctrl { width: 100%; justify-content: space-between; }
  .el-ctrl__sep { margin: 0 2px; }
  .el-hide-xs { display: none !important; }
  .el-pgin { margin: 0 2px; }
  .el-pgin input { width: 46px; }
}
.el-menu { display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: clip; }
.el-menu > * { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; background: var(--surface); text-align: left; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; color: var(--ink); }
.el-menu > * + * { border-top: 1px solid var(--line); }
.el-menu > *:hover { background: var(--surface-2); }
.el-menu span { flex: 1; }
.el-menu small { color: var(--muted); font-size: 13px; }
.el-menu .ic { color: var(--gold-ink); }
.el-lock-book { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px; border-radius: var(--r); background: var(--surface-2); width: 100%; max-width: 360px; }
.el-lock-book .cover--sm { width: 56px; }
.el-lock-book div:not(.cover) { display: grid; gap: 2px; }
.el-lock-book small { color: var(--muted); }

/* ---------- Lecteur audio ---------- */
.el-aud { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 44px; align-items: center; padding: 28px; border-radius: 26px; background: var(--block); color: var(--on-block); }
.el-aud__art { position: relative; display: grid; gap: 16px; }
.el-aud__art .cover { box-shadow: 0 30px 50px -24px rgba(0,0,0,.8); }
.el-eq { display: flex; justify-content: center; align-items: end; gap: 4px; height: 30px; }
.el-eq i { width: 5px; height: 20%; border-radius: 3px; background: var(--gold); opacity: .5; }
.el-aud.is-playing .el-eq i { opacity: 1; animation: el-eq 1s ease-in-out infinite alternate; }
.el-eq i:nth-child(3n) { animation-delay: -.3s !important; } .el-eq i:nth-child(3n+1) { animation-delay: -.6s !important; } .el-eq i:nth-child(4n) { animation-duration: .7s !important; } .el-eq i:nth-child(5n) { animation-duration: 1.3s !important; }
@keyframes el-eq { from { height: 15%; } to { height: 100%; } }
.el-aud__main { display: grid; gap: 14px; min-width: 0; }
.el-aud .eyebrow { color: var(--gold); }
.el-aud__title { color: var(--on-block); font-size: clamp(26px, 3.6cqi, 38px); font-weight: 800; letter-spacing: -.02em; }
.el-aud__by { color: var(--on-block-muted); }
.el-aud__ch { font: 700 16px/1.35 var(--f-display); color: var(--on-block); padding: 10px 14px; border-radius: 12px; background: #23221e; }
.el-seek { display: grid; gap: 6px; }
.el-seek input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--p, 0%), #3a3933 var(--p, 0%)); cursor: pointer; margin: 8px 0; }
.el-seek input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(253,180,2,.35); }
.el-seek input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.el-seek__t { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--on-block-muted); font-variant-numeric: tabular-nums; }
.el-acts { display: flex; align-items: center; justify-content: center; gap: 14px; }
.el-acts .icon-btn { color: var(--on-block); width: 46px; height: 46px; }
.el-acts .icon-btn:hover, .el-skip:hover { background: #2b2a26; }
.el-skip { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: none; color: var(--on-block); cursor: pointer; }
.el-skip small { position: absolute; bottom: 2px; font: 700 10.5px/1 var(--f-body); color: var(--on-block-muted); }
.el-play { width: 76px; height: 76px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); cursor: pointer; box-shadow: 0 10px 30px -10px rgba(253,180,2,.7); transition: transform .12s; }
.el-play:active { transform: scale(.96); }
.el-aopts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.el-aopt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid #44423b; background: transparent; color: var(--on-block); font-weight: 600; font-size: 14px; cursor: pointer; }
.el-aopt:hover { border-color: var(--on-block-muted); }
.el-aopt.on .ic { color: #ff7d74; }
.el-timer { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #23221e; }
.el-timer[hidden] { display: none; }
.el-timer .chip { background: transparent; color: var(--on-block); border-color: #44423b; }
.el-timer .chip.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.el-aud__msg { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--on-block-muted); font-size: 13.5px; text-align: center; }
.el-aud__msg .ic { color: var(--gold); flex: none; }
.el-chs { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; background: var(--surface); }
.el-chs li + li { border-top: 1px solid var(--line); }
.el-chs button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 0; background: none; cursor: pointer; text-align: left; font-size: 15px; color: var(--ink-2); }
.el-chs button:hover { background: var(--surface-2); }
.el-chs button.on { background: var(--gold-soft); color: var(--ink); font-weight: 650; }
.el-chs__n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 700; font-size: 13px; }
.el-chs button.on .el-chs__n { background: var(--gold); color: var(--on-gold); }
.el-chs__t { flex: 1; min-width: 0; }
.el-chs small { color: var(--muted); font-variant-numeric: tabular-nums; }
@container view (max-width: 760px) {
  .el-aud { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; text-align: center; }
  .el-aud__art { width: 190px; justify-self: center; }
  .el-aud__ch { text-align: left; }
  .el-acts { gap: 6px; }
}

/* ---------- Historique des téléchargements, reçus, notifications ---------- */
.el-dlrows, .el-rrows, .el-notifs { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
.el-dlrows > li + li, .el-rrows > li + li, .el-notifs > li + li { border-top: 1px solid var(--line); }
.el-dlrows > li[hidden], .el-rrows > li[hidden] { display: none; }
.el-dlrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 16px 18px; }
.el-dlrow__b { display: flex; gap: 14px; align-items: center; min-width: 0; }
.el-dlrow__b > div:not(.cover) { display: grid; gap: 2px; min-width: 0; }
.el-dlrow__b small { color: var(--muted); font-size: 13px; display: inline-flex; gap: 5px; align-items: center; }
.el-dlrow__b .cover--xs { width: 44px; }
.el-dlrow__a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 58px; }
@container view (max-width: 560px) { .el-dlrow { grid-template-columns: 1fr; padding: 14px; } .el-dlrow__a { padding-left: 0; } .el-dlrow__s { order: -1; } }
.el-rrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px 16px; align-items: center; padding: 14px 18px; }
.el-rrow__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); }
.el-rrow__t { display: grid; gap: 1px; min-width: 0; }
.el-rrow__t small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-rrow__m { display: grid; justify-items: end; gap: 4px; }
.el-rrow__m b { font: 800 16px/1 var(--f-display); white-space: nowrap; }
.el-rrow__a { display: flex; align-items: center; gap: 2px; }
@container view (max-width: 640px) {
  .el-rrow { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px; }
  .el-rrow__a { grid-column: 1 / -1; padding-left: 58px; }
}
.el-rcpt { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.el-rcpt__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.el-rcpt__head .logo img { height: 30px; }
.el-rcpt__head > div { display: grid; text-align: right; }
.el-rcpt__head small { color: var(--muted); }
.el-rcpt .summary > div { padding: 8px 0; font-size: 14.5px; }
.el-rcpt .summary dd { overflow-wrap: anywhere; }
.el-rcpt__foot { font-size: 12.5px; color: var(--muted); text-align: center; }
.el-nt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 18px; position: relative; }
.el-nt.is-unread { background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); }
.el-nt.is-unread::before { content: ''; position: absolute; left: 7px; top: 30px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.el-nt__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.el-nt.is-unread .el-nt__ic { background: var(--gold); color: var(--on-gold); }
.el-nt__t { display: grid; gap: 3px; min-width: 0; }
.el-nt__t p { color: var(--ink-2); font-size: 14.5px; }
.el-nt__t small { color: var(--muted); font-size: 13px; }
.el-nt__a { display: flex; align-items: center; gap: 2px; }
@container view (max-width: 560px) { .el-nt { grid-template-columns: auto minmax(0, 1fr); padding: 14px 14px 12px 18px; } .el-nt__a { grid-column: 2; margin-top: -4px; } .el-nt__a .btn { padding-left: 0; } }

/* ---------- Profil, appareils, paiement, préférences ---------- */
.el-photo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.el-photo .stack-sm { justify-items: start; }
.el-danger { display: grid; gap: 8px; border-color: color-mix(in srgb, var(--err) 35%, var(--line)); }
.el-danger b { color: var(--err); }
.el-danger__btn { color: var(--err); justify-self: start; padding-left: 0; }
.el-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.el-dev.is-current { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.el-dev__ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); }
.el-dev__t { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.el-dev__t small { color: var(--muted); font-size: 13.5px; }
.el-dev__a { display: flex; gap: 6px; flex-wrap: wrap; }
.el-secure { display: grid; gap: 12px; justify-items: start; background: var(--warn-soft); border-color: transparent; }
.el-secure > .ic { color: var(--warn); }
.el-secure h3 { font-size: 18px; }
.el-pm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.el-pm.is-pref { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.el-pm__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--block); color: var(--gold); }
.el-pm__t { flex: 1 1 160px; display: grid; gap: 2px; min-width: 0; }
.el-pm__t .mono { color: var(--muted); }
.el-pm__a { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; padding-left: 60px; }
@container view (max-width: 480px) { .el-pm__a { padding-left: 0; } }
.el-paychips { display: flex; flex-wrap: wrap; gap: 6px; }
.el-paychips span { border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 9px; font-weight: 600; font-size: 13px; }
[data-pm][hidden] { display: none; }
.el-curlang { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--gold-soft); }
.el-curlang .ic { color: var(--gold-ink); }
.el-curlang span { flex: 1; color: var(--ink-2); }
.el-langcode { font: 700 12px/1 var(--f-mono); padding: 5px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.el-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--surface-2); gap: 4px; }
.el-seg label { position: relative; cursor: pointer; }
.el-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.el-seg span { display: block; text-align: center; padding: 9px 8px; border-radius: 999px; font-weight: 650; font-size: 14px; color: var(--muted); transition: .15s; }
.el-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.el-seg input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.el-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.el-cat { position: relative; cursor: pointer; }
.el-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.el-cat span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-weight: 600; font-size: 14px; color: var(--ink-2); background: var(--surface); }
.el-cat input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.el-cat input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.el-prev { display: grid; gap: 8px; padding: 22px; border-radius: 6px; background: #fffdf8; color: #1d1b16; font-family: Georgia, 'Times New Roman', serif; box-shadow: var(--shadow); transition: background .2s, color .2s; }
.el-prev h4 { font: 800 20px/1.15 var(--f-display); color: inherit; }
.el-prev .pp-label { font-size: 11px; color: #9a6a00; }
.el-prev--sepia { background: #f4ead3; color: #3b2f1e; }
.el-prev--sombre { background: #1f1e1b; color: #dcd6c8; }
.el-prev--sombre .pp-label { color: #e8b64a; }
.el-prev--petite p { font-size: 14px; } .el-prev--moyenne p { font-size: 16px; } .el-prev--grande p { font-size: 19px; }
.el-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -8px; }
.el-strength span { height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; }
.el-strength small { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.el-strength[data-s="1"] span:nth-child(-n+1) { background: var(--err); }
.el-strength[data-s="2"] span:nth-child(-n+2) { background: var(--warn); }
.el-strength[data-s="3"] span:nth-child(-n+3) { background: var(--ok); }
.el-strength[data-s="4"] span { background: var(--ok); }
.el-before { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.el-before li { display: flex; gap: 12px; align-items: flex-start; }
.el-before .ic { color: var(--gold-ink); margin-top: 2px; flex: none; }
.el-before a { font-weight: 600; }
.el-before em { font-style: normal; color: var(--warn); font-weight: 650; font-size: 13.5px; }
.el-me__foot, .el-groups, .el-group, .el-lcard__body, .el-fcard__body, .el-dl__main, .el-aud__main, .el-toc, .el-continue__t { grid-template-columns: minmax(0, 1fr); }
.mode-app .el-rcpt { padding: 14px; }
.mode-app .el-rcpt .summary > div:not(.is-total) { display: grid; gap: 1px; }
.mode-app .el-rcpt .summary > div:not(.is-total) dd { text-align: left; }
.el-rcpt .summary .mono { white-space: nowrap; }
/* Équipe Assistance */
.as-h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.as-h3 { font-size: 17px; font-weight: 750; }
.as-center { text-align: center; }

/* Centre d'aide */
.as-hero { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 36px 24px; border-radius: 28px; background: var(--gold-soft); grid-template-columns: minmax(0, 1fr); }
.as-hero .ph__text { margin-inline: auto; }
.as-hero__search { width: 100%; max-width: 640px; background: var(--surface); margin-top: 6px; }
.as-hero__search .as-clear { width: 36px; height: 36px; }
.as-hero__search .as-clear[hidden] { display: none; }
.as-hero__ex { font-size: 14px; }
.as-ex { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.as-ex:hover { color: var(--ink); }
.as-tiles .tile { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.as-faq__cat { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.as-faq .faq__a a { font-weight: 650; }
@container view (max-width: 480px) {
  .as-hero { padding: 24px 16px; border-radius: 20px; }
  .as-tiles .tile { grid-template-columns: minmax(0, 1fr); }
}

/* Champs groupés et options */
.as-fs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.as-fs legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 10px; }
.as-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.as-opts .radio-card__in { padding: 12px 14px; gap: 12px; height: 100%; }
.as-opts .radio-card__ic { width: 36px; height: 36px; border-radius: 10px; }
.as-opts .radio-card__txt b { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.as-opts .radio-card__dot { width: 18px; height: 18px; }
.as-opts .radio-card input:checked + .radio-card__in .radio-card__dot { border-width: 5px; }
.as-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container view (max-width: 720px) { .as-opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-refund-hint { margin-top: -6px; }

.as-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.as-pill { position: relative; cursor: pointer; }
.as-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-pill span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s; }
.as-pill span .ic { display: none; }
.as-pill:hover span { border-color: var(--ink); }
.as-pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.as-pill input:checked + span .ic { display: inline-block; color: var(--gold); }
.as-pill input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }

/* Référence de suivi */
.as-ref { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; border-radius: var(--r); background: var(--gold-soft); border: 1px dashed var(--gold-ink); text-align: left; }
.as-ref span { color: var(--ink-2); font-size: 13.5px; font-weight: 650; }
.as-ref b { font-size: 19px; letter-spacing: .02em; }
.as-ref__copy { margin-left: auto; }
.status .summary { width: 100%; text-align: left; }

/* Panneaux latéraux */
.as-checks .checklist .ic { background: var(--surface-2); color: var(--ink); }
.as-ic-ok { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ok-soft); color: var(--ok); }
.as-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: m; }
.as-mini li { counter-increment: m; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.as-mini li::before { content: counter(m); grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 13px/1 var(--f-display); }
.as-mini small { color: var(--muted); font-size: 13.5px; }
.as-steps-card { padding: 28px; }

/* Suivi de demande */
.as-track-form .form { gap: 14px; }
.as-track { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.as-track__main { display: grid; gap: 20px; }
.as-track__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.as-track .steps li { padding-bottom: 18px; }
.as-answer { border-color: var(--ok); }
.as-answer p { color: var(--ink-2); }
.as-answer .btn { justify-self: start; }
.as-note { display: grid; gap: 2px; padding-top: 10px; border-top: 1px dashed var(--line); }
.as-note:first-of-type { padding-top: 0; border-top: 0; }
@container view (max-width: 820px) { .as-track { grid-template-columns: minmax(0, 1fr); } }

/* Newsletter */
.as-nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: center; }
.as-nl__txt { display: grid; gap: 14px; justify-items: start; grid-template-columns: minmax(0, 1fr); }
.as-nl__covers { display: flex; gap: 12px; margin-top: 10px; }
.as-nl__covers .cover:nth-child(2) { transform: translateY(-10px); }
.as-nl__card { box-shadow: 0 24px 50px -32px rgba(0, 0, 0, .35); }
@container view (max-width: 820px) { .as-nl { grid-template-columns: minmax(0, 1fr); gap: 24px; } .as-nl__covers { display: none; } }
.as-receive { width: 100%; display: grid; gap: 12px; text-align: left; padding: 18px; border-radius: var(--r); background: var(--bg); }

/* Pages légales et confiance */
.as-legal-card { padding-top: 8px; }
.as-legal { max-width: 72ch; }
.as-legal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.as-rubrics .card { display: grid; gap: 10px; align-content: start; }
.as-rubric--soft { background: var(--gold-soft); border-color: transparent; }
.as-no .ic { background: var(--err-soft); color: var(--err); }
.as-consent__acts { padding-top: 8px; }
form[data-form^="as-"] .file-drop { min-width: 0; padding: 18px 14px; }
form[data-form^="as-"] .file-drop input { width: 100%; min-width: 0; }
@container view (max-width: 520px) {
  .as-opts, .as-opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .as-opts .radio-card__in { padding: 10px 12px; gap: 8px; }
  .as-opts .radio-card__ic, .as-opts .radio-card__dot { display: none; }
  .as-opts .radio-card__txt b { font-size: 13.5px; }
}

/* Contournement noyau : .modal-host[hidden] reste en display:grid et intercepte les clics */
.modal-host[hidden] { display: none; }
.form-error[hidden] { display: none; }
form[data-form^="as-"] .frow { align-items: start; }
/* Équipe Administration — styles des écrans A01 à A20 */
.adm-view .ad-note { font-size: 13px; }
.ad-h { font-size: 18px; font-weight: 750; }
.ad-h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ad-grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@container view (max-width: 900px) { .ad-grid-main { grid-template-columns: minmax(0, 1fr); } }
.ad-chips { flex: 1 1 320px; min-width: 0; }
.ad-tbl td { font-size: 14px; }
.ad-tc { display: grid; gap: 2px; min-width: 160px; max-width: 280px; }
.ad-tc small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.ad-tc a { color: var(--ink); text-decoration: none; }
.ad-tc a:hover { text-decoration: underline; }
.ad-cov .cover--xs { width: 34px; }
.ad-clip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ad-acts { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.ad-acts .icon-btn { width: 36px; height: 36px; }
.ad-acts .btn--sm { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.ad-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ad-user { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ad-user:hover b { text-decoration: underline; }
.ad-code { font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--gold-soft); color: var(--gold-ink); }
.ad-alert { padding: 12px 14px; }
.ad-filters .sel { flex: 1 1 170px; }
.ad-period { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ad-period .field { flex: 1 1 160px; }
.ad-formbar { position: sticky; bottom: 0; z-index: 2; padding: 14px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ad-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.ad-files .field, .ad-files .file-drop { min-width: 0; }
.ad-files .file-drop { overflow: hidden; }
.ad-files .file-drop input { width: 100%; }
.ad-files .file-drop { padding: 18px 12px; }
.ad-files-cur { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.ad-live { max-width: 200px; width: 100%; margin-inline: auto; }
.ad-side-bk { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.ad-tabs-card { padding-top: 8px; }
.ad-prev { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: start; }
@container view (max-width: 520px) { .ad-prev { grid-template-columns: 1fr; } }
.modal .ad-prev .cover { max-width: 160px; }
@media (max-width: 560px) { .ad-prev { grid-template-columns: 1fr; } }
.mode-app .ad-prev { grid-template-columns: 1fr; }

/* Fil d'activité */
.ad-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.ad-feed li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.ad-feed li:last-child { border-bottom: 0; }
.ad-feed li > div { display: grid; gap: 1px; min-width: 0; }
.ad-feed small { color: var(--muted); font-size: 13px; }
.ad-feed time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.ad-feed__ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.ad-feed--sm li { grid-template-columns: 28px minmax(0, 1fr); padding: 9px 0; }
.ad-feed--sm .ad-feed__ic { width: 28px; height: 28px; }

/* Catégories */
.ad-cats { list-style: none; margin: 0; padding: 0; display: grid; }
.ad-cat { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ad-cat:last-child { border-bottom: 0; }
.ad-cat.is-off .ad-cat__txt, .ad-cat.is-off .media__ic { opacity: .5; }
.ad-cat__ord { display: grid; justify-items: center; gap: 0; }
.ad-cat__ord .icon-btn { width: 28px; height: 22px; border-radius: 6px; }
.ad-cat__ord .mono { font-size: 12px; color: var(--muted); }
.ad-up .ic { transform: rotate(180deg); }
.ad-cat__txt { display: grid; gap: 2px; min-width: 0; }
.ad-cat__txt small { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-cat__n { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
@container view (max-width: 640px) {
  .ad-cat { grid-template-columns: auto 40px minmax(0, 1fr); row-gap: 8px; }
  .ad-cat .pill { grid-column: 3; justify-self: start; }
  .ad-cat .ad-acts { grid-column: 3; justify-content: flex-start; margin-left: -10px; }
}

/* Commande, profil */
.ad-order { align-items: start; }
@container view (max-width: 1100px) { .ad-order { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ad-order > :last-child { grid-column: 1 / -1; } }
@container view (max-width: 640px) { .ad-order { grid-template-columns: minmax(0, 1fr); } }
.ad-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.ad-profile .ph__title { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); font-family: var(--f-body); }
.ad-profile__name { font: 800 26px/1.15 var(--f-display); }
@container view (max-width: 700px) { .ad-profile { grid-template-columns: auto minmax(0, 1fr); } .ad-profile__acts { grid-column: 1 / -1; } .ad-profile .avatar--lg { width: 64px; height: 64px; font-size: 22px; } }

/* Avis */
.ad-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.ad-review { display: grid; gap: 12px; align-content: start; }
.ad-review.is-flag { border-color: var(--err); }
.ad-review__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ad-review__book { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ad-review p { color: var(--ink-2); }
.ad-review__acts { gap: 6px; }
.ad-reply { background: var(--surface-2); border-radius: var(--r); padding: 10px 14px; font-size: 14px; border-left: 3px solid var(--gold); }

/* Bannières */
.ad-bancard { display: grid; gap: 14px; align-content: start; }
.ad-ban { position: relative; overflow: hidden; border-radius: var(--r); min-height: 150px; background: hsl(var(--h) 55% 22%); color: #fffaf0; display: grid; align-items: end; }
.ad-ban__pat { position: absolute; inset: 0 0 0 auto; width: 38%; background: repeating-linear-gradient(90deg, #151513 0 10%, hsl(var(--h) 72% 54%) 10% 24%, #fdb402 24% 30%, hsl(calc(var(--h) + 30) 80% 62%) 30% 46%); opacity: .9; -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.ad-ban__txt { position: relative; display: grid; gap: 6px; padding: 20px; max-width: 70%; }
.ad-ban__txt b { font: 800 20px/1.15 var(--f-display); }
.ad-ban__txt span { font-size: 14px; color: rgba(255, 250, 240, .82); }
.ad-ban__txt em { font-style: normal; font-weight: 700; font-size: 13px; background: #fdb402; color: #1a1407; padding: 6px 12px; border-radius: 999px; width: fit-content; margin-top: 4px; }

/* Pages de vente */
.ad-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.ad-sp { display: grid; gap: 14px; align-content: start; }
.ad-sp__top { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.ad-sp__top .cover--xs { width: 48px; }
.ad-sp .actions { gap: 6px; }
.ad-elements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px 20px; }
.ad-elements li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14.5px; }
.ad-elements .mono { color: var(--gold-ink); }
.ad-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 16px; }

/* Parcours des visiteurs */
.ad-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ad-funnel li { display: grid; gap: 6px; font-size: 14px; }
.ad-funnel__t { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ad-funnel__t i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }

/* Documents financiers */
.ad-doc { flex-wrap: wrap; }
.ad-doc .ad-acts { flex-wrap: wrap; }
@container view (max-width: 640px) { .ad-doc .ad-acts { width: 100%; justify-content: flex-start; padding-left: 54px; } }

/* Paramètres */
.ad-logo-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.ad-logo-box { display: grid; place-items: center; padding: 18px; border-radius: var(--r); background: var(--surface-2); }
@container view (max-width: 560px) { .ad-logo-row { grid-template-columns: 1fr; } }

/* Tableaux empilés (téléphone) */
@container view (max-width: 640px) {
  .ad-tbl td.a-right .ad-acts, .ad-tbl .ad-acts { flex-wrap: wrap; }
  .ad-tbl .ad-tc { max-width: 62%; min-width: 0; text-align: right; }
  .ad-tbl .ad-clip { max-width: 60vw; }
  .ad-tbl .ad-user { white-space: normal; }
}
.ad-k3 .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container view (max-width: 560px) { .ad-k3 .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-tbl .mono { white-space: nowrap; }
.ad-tbl th, .ad-tbl td { padding-inline: 12px; }
.ad-tbl td.a-right { white-space: nowrap; }
.ad-tbl .ad-tc { min-width: 150px; }
.adm-view .file-drop { min-width: 0; overflow: hidden; }
.adm-view .file-drop input { width: 100%; }
.ad-logo-row .field { min-width: 0; }
@container view (max-width: 640px) {
  .ad-tbl--books tr { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .ad-tbl--books td[data-label="Couverture"] { grid-row: span 3; padding: 4px 0; }
  .ad-tbl--books td[data-label="Couverture"]::before, .ad-tbl--books td[data-label="Titre"]::before { display: none; }
  .ad-tbl--books td[data-label="Titre"] { justify-content: flex-start; text-align: left; }
  .ad-tbl--books td[data-label="Titre"] .ad-tc { max-width: none; text-align: left; }
  .ad-tbl--books td[data-label="Catégorie"], .ad-tbl--books td[data-label="Date de publication"] { display: none; }
  .ad-tbl--books td { grid-column: 2; }
  .ad-tbl--books td[data-label="Couverture"] { grid-column: 1; }
}

/* ---------- Ajouts de l'application Laravel ---------- */
.cover--img { background: var(--surface-2, #eee); overflow: hidden; }
.cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Livres à paraître (cartes, couvertures, bloc de réservation) ---------- */
.cover__ribbon { position: absolute; z-index: 1; top: 9cqi; left: -20cqi; width: 72cqi; transform: rotate(-35deg); padding: 2.4cqi 0; text-align: center;
  background: var(--ink); color: var(--gold); font: 800 6cqi/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); pointer-events: none; }
.cover--sm .cover__ribbon { font-size: 7.5cqi; }
.bk--upcoming .bk__top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bk__release { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.bk__release .ic { color: var(--gold-ink); flex: none; }
.bk--upcoming .bk__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.bk__reserve { display: flex; flex: 1 1 auto; gap: 0; }
.bk__reserve .btn { flex: 1 1 auto; }
.bk__onlist { cursor: default; color: var(--ok); }
.up-inline { display: inline-flex; gap: 0; }
.up-reserve { scroll-margin-top: 96px; }
.up-reserve__t { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.up-reserve__t .ic { color: var(--gold-ink); }
.up-reserve__who { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 14.5px; }
.up-reserve__ok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.up-reserve__ic { color: var(--ok); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok-soft); }
.up-reserve__note { font-size: 13.5px; }
.up-reserve__foot { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.up-pdp-fav { margin-top: -4px; }