/* =========================================================
   CoAb Lecture — pages /lire/ (bibliothèque, livre, lecteur)
   Tout est préfixé .coabl / cl- : aucun effet sur le thème.
   Mobile d'abord, tablette ≥ 760px, ordinateur ≥ 1080px.
   ========================================================= */

.coabl {
  --cl-read-size: 18px; --cl-read-width: 680px; --cl-read-font: var(--cl-serif);
  background: var(--cl-bg); color: var(--cl-ink); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; padding-bottom: 40px; overflow-x: clip;
}
.coabl *, .coabl *::before, .coabl *::after { box-sizing: border-box; }
.coabl img { max-width: 100%; display: block; }
.coabl a { color: var(--cl-accent); }
.coabl h1, .coabl h2, .coabl h3 { color: inherit; letter-spacing: -.01em; }
.coabl :focus-visible { outline: 2.5px solid var(--cl-accent); outline-offset: 2px; border-radius: 6px; }
.cl-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.cl-ico { flex: none; }

/* Thèmes du lecteur (html[data-cl-theme]) */
html[data-cl-theme="sepia"] .coabl, html[data-cl-theme="sepia"] .coabl-ui .cl-panel, html[data-cl-theme="sepia"] body.coabl-view-episode {
  --cl-bg: #F6EEDD; --cl-surface: #FBF5E9; --cl-surface-2: #EFE4CD; --cl-ink: #3B2F22; --cl-ink-2: #4E3F2E;
  --cl-muted: #6B5A45; --cl-line: #E2D5BC; --cl-line-2: #D6C6A6; --cl-accent: #8A4B12; --cl-accent-soft: #EFE0C8;
}
html[data-cl-theme="nuit"] .coabl, html[data-cl-theme="nuit"] .coabl-ui .cl-panel, html[data-cl-theme="nuit"] body.coabl-view-episode {
  --cl-bg: #121417; --cl-surface: #1B1E22; --cl-surface-2: #22262B; --cl-ink: #E8E4DC; --cl-ink-2: #CFCAC1;
  --cl-muted: #A39D93; --cl-line: #2C3036; --cl-line-2: #3A3F46; --cl-accent: #5EC2B4; --cl-accent-ink: #0D1A18; --cl-accent-soft: #1D2E2C;
}
html[data-cl-theme] body.coabl-view-episode { background: var(--cl-bg); }

/* ---------- Animations douces ---------- */
.coabl [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.coabl [data-reveal].is-in { opacity: 1; transform: none; }
.no-js .coabl [data-reveal], .coabl.cl-no-reveal [data-reveal] { opacity: 1; transform: none; }
@keyframes cl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cl-hero__text > *, .cl-reader__head > *, .cl-book-hero__info > * { animation: cl-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.cl-hero__text > :nth-child(2), .cl-reader__head > :nth-child(2), .cl-book-hero__info > :nth-child(2) { animation-delay: .06s; }
.cl-hero__text > :nth-child(3), .cl-reader__head > :nth-child(3), .cl-book-hero__info > :nth-child(3) { animation-delay: .12s; }
.cl-hero__text > :nth-child(4), .cl-book-hero__info > :nth-child(4) { animation-delay: .18s; }
.cl-hero__text > :nth-child(5) { animation-delay: .24s; }

/* ---------- Boutons supplémentaires ---------- */
.cl-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.cl-btn--light { background: var(--hf, #FFF7EC); color: var(--hb, #7C2D12) !important; }
.cl-btn--light:hover { filter: brightness(.96); }
.cl-btn--glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--hf, #fff) !important; }
.cl-btn--glass:hover { background: rgba(255,255,255,.18); }
.cl-btn--glass[aria-pressed="true"] { background: var(--hf, #fff); color: var(--hb, #111) !important; }
.cl-icon-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--cl-surface-2); color: var(--cl-ink) !important;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; text-decoration: none;
}
.cl-icon-btn:hover { background: var(--cl-line); }

/* ---------- Typo commune ---------- */
.cl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-accent); margin: 0; }
.cl-h2 { margin: 0 0 12px; font-size: 20px; }
.cl-crumbs { font-size: 13px; color: var(--cl-muted); padding: 16px 0 0; }
.cl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.cl-crumbs li { margin: 0; }
.cl-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.cl-crumbs a { color: inherit !important; text-decoration: none; }
.cl-crumbs a:hover { text-decoration: underline; }
.cl-section { padding: 30px 0 0; }
.cl-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cl-section__head h2 { margin: 0; font-size: 20px; }
.cl-section__head a { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cl-new { color: var(--cl-warm); font-weight: 700; font-size: 13px; }

/* ---------- Bibliothèque ---------- */
.cl-hero { padding: 22px 0 6px; display: grid; gap: 20px; }
.cl-hero h1 { margin: 8px 0 12px; font: 700 clamp(30px, 6.4vw, 52px)/1.08 var(--cl-serif); }
.cl-lead { margin: 0; font-size: 17px; color: var(--cl-ink-2); max-width: 560px; }
.cl-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cl-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--cl-muted); }
.cl-trust li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cl-trust .cl-ico { color: var(--cl-accent); }
.cl-hero__side { display: grid; gap: 12px; align-content: start; }

.cl-resume {
  display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--cl-radius);
  background: var(--cl-surface); border: 1px solid var(--cl-line); text-decoration: none !important; color: var(--cl-ink) !important;
  box-shadow: 0 6px 20px rgba(28,27,26,.06); animation: cl-rise .5s ease both;
}
.cl-resume[hidden] { display: none; }
.cl-resume__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cl-accent-soft); color: var(--cl-accent); flex: none; }
.cl-resume__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.cl-resume__label { font-size: 12px; color: var(--cl-muted); }
.cl-resume__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-bar { display: block; height: 6px; border-radius: 3px; background: var(--cl-line); overflow: hidden; }
.cl-bar > span { display: block; height: 100%; width: 0; background: var(--cl-accent); border-radius: 3px; transition: width .6s ease; }

.cl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 6px; scrollbar-width: none; }
.cl-chips::-webkit-scrollbar { display: none; }
.cl-chip {
  flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--cl-line-2);
  background: var(--cl-surface); color: var(--cl-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important;
  display: inline-flex; align-items: center; transition: border-color .15s ease, background .15s ease;
}
.cl-chip:hover { border-color: var(--cl-ink-2); }
.cl-chip[aria-current="page"] { background: var(--cl-ink); color: var(--cl-bg) !important; border-color: var(--cl-ink); }

.cl-pill { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--cf, #FDE7C7); color: var(--c, #7C2D12); }
.cl-feature {
  display: grid; border-radius: 20px; overflow: hidden; background: var(--cl-surface); border: 1px solid var(--cl-line);
  box-shadow: 0 8px 28px rgba(28,27,26,.08); text-decoration: none !important; color: var(--cl-ink) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cl-feature:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(28,27,26,.12); }
.cl-feature__art { background: var(--c, #7C2D12); color: var(--cf, #FFF7EC); padding: 22px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; position: relative; overflow: hidden; }
.cl-feature__art::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid currentColor; opacity: .07; }
.cl-feature__title { display: block; margin: 0; font: 700 clamp(26px, 4.6vw, 40px)/1.05 var(--cl-serif); color: inherit; }
.cl-feature__art p { margin: 8px 0 0; font-size: 14px; opacity: .9; color: inherit; }
.cl-feature__body { padding: 18px; display: grid; gap: 14px; align-content: start; }
.cl-feature__body p { margin: 0; color: var(--cl-ink-2); }
.cl-feature--compact .cl-feature__art { min-height: 190px; }
.cl-meta-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--cl-muted); }

.cl-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cl-shelf > * { scroll-snap-align: start; }
.cl-book-card { display: grid; gap: 8px; align-content: start; text-decoration: none !important; color: var(--cl-ink) !important; }
.cl-book-card .cl-cover { transition: transform .25s ease, box-shadow .25s ease; }
.cl-book-card:hover .cl-cover { transform: translateY(-4px) rotate(-.8deg); box-shadow: 0 14px 26px rgba(0,0,0,.18); }
.cl-book-card__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cl-book-card__meta { font-size: 12px; color: var(--cl-muted); }
.cl-grid-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }

.cl-stack { display: grid; gap: 10px; }
.cl-list-card {
  display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--cl-surface);
  border: 1px solid var(--cl-line); text-decoration: none !important; color: var(--cl-ink) !important; transition: border-color .15s ease, transform .15s ease;
}
.cl-list-card:hover { border-color: var(--cl-line-2); transform: translateX(2px); }
.cl-list-card > .cl-ico { color: var(--cl-muted); }
.cl-list-card__icon { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; }
.cl-list-card__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cl-list-card__title { font-weight: 600; }
.cl-list-card__meta { font-size: 13px; color: var(--cl-muted); }
.cl-cover--mini { width: 46px; flex: none; padding: 4px; }
.cl-cover--mini .cl-cover__brand, .cl-cover--mini .cl-cover__title { display: none; }

.cl-tales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cl-tale { padding: 16px; border-radius: 14px; background: var(--t); color: var(--tf) !important; text-decoration: none !important; display: grid; gap: 6px; min-height: 108px; align-content: start; transition: transform .2s ease; }
.cl-tale:hover { transform: translateY(-2px); }
.cl-tale small { font-size: 12px; font-weight: 700; opacity: .9; }
.cl-tale strong { font: 700 16px/1.2 var(--cl-serif); }

.cl-callout { border-radius: 18px; background: var(--cl-accent-soft); padding: 20px; display: grid; gap: 10px; }
.cl-callout h2 { margin: 0; font-size: 19px; }
.cl-callout p { margin: 0; color: var(--cl-ink-2); }
.cl-seo-text { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--cl-line); color: var(--cl-ink-2); font-size: 15px; max-width: 820px; }
.cl-seo-text h2 { font-size: 18px; color: var(--cl-ink); }
.cl-cat-head { padding: 18px 0 0; display: grid; gap: 8px; }
.cl-cat-head h1 { margin: 0; font: 700 clamp(28px, 5vw, 44px)/1.1 var(--cl-serif); }
.cl-cat-head p { margin: 0; color: var(--cl-ink-2); max-width: 640px; }
.cl-count { font-size: 14px; color: var(--cl-muted); margin: 14px 0; }

/* ---------- Publicité ---------- */
.cl-ad { margin: 30px 0 0; text-align: center; min-height: 100px; }
.cl-ad__label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 4px; }
.cl-ad--ph { border: 1.5px dashed var(--cl-line-2); border-radius: 12px; background: var(--cl-surface); display: grid; place-content: center; gap: 2px; padding: 14px; color: var(--cl-muted); font-size: 13px; font-weight: 600; }
.cl-ad--ph small { font-weight: 400; font-size: 12px; }
.cl-ad--inarticle { margin: 26px 0 28px; min-height: 250px; }

/* ---------- Fiche livre ---------- */
.cl-book-hero { background: var(--hb); color: var(--hf); }
.cl-book-hero .cl-wrap { padding-bottom: 28px; display: grid; gap: 22px; }
.cl-book-hero .cl-crumbs { color: var(--hf); opacity: .85; }
.cl-book-hero__main { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: end; }
.cl-cover--hero { box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15); --c: rgba(0,0,0,.28); }
.cl-cover--hero .cl-cover__title { font-size: 18px; }
.cl-book-hero .cl-eyebrow { color: var(--hf); opacity: .85; }
.cl-book-hero h1 { margin: 6px 0 8px; font: 700 clamp(26px, 5vw, 46px)/1.06 var(--cl-serif); color: var(--hf); }
.cl-book-hero__tag { margin: 0 0 10px; font-size: 16px; opacity: .92; }
.cl-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; opacity: .9; }
.cl-facts li { margin: 0; }
.cl-book-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-book-actions [data-cl-start] { grid-column: 1 / -1; }
.cl-book-layout { display: grid; gap: 8px; }
.cl-prose-lg p { margin: 0 0 1em; font: 400 17px/1.7 var(--cl-serif); color: var(--cl-ink-2); }
.cl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cl-tags a { font-size: 13px; padding: 6px 11px; border-radius: 999px; background: var(--cl-surface-2); color: var(--cl-ink-2) !important; text-decoration: none; }
.cl-characters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cl-character { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--cl-surface); border: 1px solid var(--cl-line); }
.cl-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; }
.cl-character strong { display: block; font-size: 14px; }
.cl-character span span { display: block; font-size: 12px; color: var(--cl-muted); line-height: 1.35; }

.cl-episodes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cl-line); border-radius: var(--cl-radius); overflow: hidden; background: var(--cl-surface); }
.cl-episodes li { margin: 0; }
.cl-episodes li + li { border-top: 1px solid var(--cl-line); }
.cl-ep { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none !important; color: var(--cl-ink) !important; transition: background .15s ease; }
a.cl-ep:hover { background: var(--cl-surface-2); }
.cl-ep__num { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--cl-surface-2); color: var(--cl-ink-2); }
.cl-ep.is-read .cl-ep__num { background: var(--cl-accent-soft); color: var(--cl-accent); }
.cl-ep.is-current .cl-ep__num { background: var(--cl-accent); color: var(--cl-accent-ink); }
.cl-ep__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cl-ep__body strong { font-weight: 600; }
.cl-ep__body span { font-size: 13px; color: var(--cl-muted); }
.cl-ep__badge { font-size: 12px; font-weight: 700; color: var(--cl-muted); white-space: nowrap; }
.cl-ep__badge.is-new { color: var(--cl-warm); }
.cl-ep.is-read .cl-ep__badge { color: var(--cl-accent); }
.cl-ep--soon { color: var(--cl-muted) !important; }
.cl-notify { padding: 18px; border-radius: var(--cl-radius); background: var(--cl-accent-soft); display: grid; gap: 8px; }
.cl-notify strong { font-size: 16px; }
.cl-notify p { margin: 0; font-size: 14px; color: var(--cl-ink-2); }
.cl-book-aside { display: grid; gap: 18px; align-content: start; padding-top: 30px; }
.cl-book-aside .cl-ad { margin-top: 0; }

/* ---------- Lecteur ---------- */
.cl-reader-top { position: sticky; top: var(--cl-top, 0px); z-index: 50; background: var(--cl-surface); border-bottom: 1px solid var(--cl-line); transition: transform .25s ease; }
.cl-reader-top.is-hidden { transform: translateY(calc(-100% - var(--cl-top, 0px))); }
.cl-reader-top__in { display: flex; align-items: center; gap: 8px; height: 58px; }
.cl-reader-top__title { flex: 1; min-width: 0; text-align: center; display: grid; line-height: 1.25; }
.cl-reader-top__title strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-reader-top__title > span { font-size: 12px; color: var(--cl-muted); }
.cl-progress { height: 3px; background: var(--cl-line); }
.cl-progress > span { display: block; height: 100%; width: 0; background: var(--cl-accent); }
.cl-aa { font: 700 16px var(--cl-serif); }

.cl-reader { padding: 6px 0 0; }
.cl-reader__col { max-width: var(--cl-read-width); margin: 0 auto; min-width: 0; }
.cl-reader__head { display: grid; gap: 8px; margin: 18px 0 24px; }
.cl-reader__head h1 { margin: 0; font: 700 clamp(28px, 5vw, 42px)/1.12 var(--cl-serif); }
.cl-reader__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--cl-muted); }
.cl-reader__meta span { display: inline-flex; align-items: center; gap: 5px; }
.cl-resume--here { margin-bottom: 18px; }
.cl-recap { padding: 14px 16px; border-radius: 12px; background: var(--cl-surface-2); font-size: 14px; color: var(--cl-ink-2); margin-bottom: 24px; }
.cl-recap summary { cursor: pointer; font-weight: 600; color: var(--cl-ink); }
.cl-recap p { margin: 10px 0 0; }

.cl-text { font-family: var(--cl-read-font); font-size: var(--cl-read-size); line-height: 1.75; color: var(--cl-ink); overflow-wrap: break-word; }
.cl-text p { margin: 0 0 1.05em; hyphens: auto; -webkit-hyphens: auto; }
.cl-text > p:first-of-type::first-letter { float: left; font: 700 3.3em/.82 var(--cl-serif); padding: 6px 8px 0 0; color: var(--cl-accent); }
.cl-text .scene-break { text-align: center; color: var(--cl-muted); letter-spacing: .6em; margin: 1.6em 0; }
.cl-text .scene-break::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.cl-text blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--cl-accent); color: var(--cl-ink-2); font-style: italic; }
.cl-text ul, .cl-text ol { margin: 0 0 1.1em 1.2em; padding: 0; }
.cl-text li { margin: 0 0 .4em; }
.cl-text h2 { font: 700 1.3em/1.25 var(--cl-sans); margin: 1.6em 0 .6em; }
.cl-text h3 { font: 700 1.1em/1.3 var(--cl-sans); margin: 1.3em 0 .5em; }
.cl-text--lesson { --cl-read-font: var(--cl-sans); }
.cl-text--lesson > p:first-of-type::first-letter { float: none; font: inherit; padding: 0; color: inherit; }

.cl-end { margin: 34px 0 0; padding: 22px 18px; border-radius: var(--cl-radius); background: var(--cl-surface); border: 1px solid var(--cl-line); text-align: center; display: grid; gap: 12px; justify-items: center; }
.cl-end h2 { margin: 0; font-size: 18px; }
.cl-end small { color: var(--cl-muted); font-size: 13px; }
.cl-poll, .cl-reactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cl-poll button, .cl-reactions button {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--cl-line-2); background: transparent;
  color: var(--cl-ink); cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.2; font-family: inherit; transition: all .15s ease;
}
.cl-reactions button { min-height: 38px; font-size: 13px; background: var(--cl-surface-2); border-width: 1px; }
.cl-poll button:hover, .cl-reactions button:hover { border-color: var(--cl-accent); }
.cl-poll button[aria-pressed="true"] { background: var(--cl-accent); color: var(--cl-accent-ink); border-color: var(--cl-accent); }
.cl-reactions button[aria-pressed="true"] { border-color: var(--cl-accent); color: var(--cl-accent); animation: cl-pop .3s ease; }

.cl-share-card { margin-top: 14px; padding: 16px; border-radius: var(--cl-radius); background: var(--cl-surface); border: 1px solid var(--cl-line); display: grid; gap: 12px; }
.cl-share-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cl-share-card__head strong { font-size: 15px; }
.cl-next { margin-top: 22px; display: grid; gap: 10px; }
.cl-next__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-next .cl-btn--dark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-toc { list-style: none; margin: 0; padding: 0; }
.cl-toc li { margin: 0; }
.cl-toc a { display: flex; gap: 8px; align-items: baseline; padding: 11px 4px; text-decoration: none !important; color: var(--cl-ink) !important; border-top: 1px solid var(--cl-line); font-size: 15px; }
.cl-toc a span { color: var(--cl-muted); min-width: 22px; }
.cl-toc a[aria-current="true"] { color: var(--cl-accent) !important; font-weight: 700; }
.cl-toc a.is-read::after { content: "✓"; margin-left: auto; color: var(--cl-accent); font-size: 13px; }
.cl-hint { font-size: 12px; color: var(--cl-muted); margin-top: 10px; }

/* Panneaux du lecteur (réglages, sommaire) */
.cl-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cl-line); }
.cl-panel__row:first-of-type { border-top: 0; }
.cl-panel__row > span { font-size: 14px; font-weight: 600; }
.cl-seg { display: flex; gap: 6px; align-items: center; }
.cl-seg button {
  min-width: 46px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--cl-line-2);
  background: var(--cl-bg); color: var(--cl-ink); cursor: pointer; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit;
}
.cl-seg output { min-width: 52px; text-align: center; font-size: 13px; color: var(--cl-muted); }
.cl-seg button[aria-pressed="true"] { border-color: var(--cl-accent); box-shadow: inset 0 0 0 1px var(--cl-accent); }
.cl-seg .cl-t-jour { background: #FFFFFF; color: #1C1B1A; }
.cl-seg .cl-t-sepia { background: #F6EEDD; color: #3B2F22; }
.cl-seg .cl-t-nuit { background: #15171A; color: #E8E4DC; }
.cl-seg .cl-f-serif { font-family: var(--cl-serif); }

.cl-only-desktop { display: none !important; }
.cl-reader-side { display: none; }

/* =========================================================
   Tablette ≥ 760px
   ========================================================= */
@media (min-width: 760px) {
  .cl-wrap { padding: 0 28px; }
  .cl-grid-books { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
  .cl-tales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-feature { grid-template-columns: 1.1fr 1fr; }
  .cl-feature--compact { grid-template-columns: 1fr; }
  .cl-feature__art { min-height: 300px; padding: 30px; }
  .cl-feature__body { padding: 28px; align-content: center; }
  .cl-book-hero__main { grid-template-columns: 180px 1fr; gap: 28px; }
  .cl-book-actions { grid-template-columns: auto auto auto; justify-content: start; }
  .cl-book-actions [data-cl-start] { grid-column: auto; }
  .cl-characters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Ordinateur ≥ 1080px
   ========================================================= */
@media (min-width: 1080px) {
  .cl-only-mobile { display: none !important; }
  .cl-only-desktop { display: block !important; }
  .cl-hero { grid-template-columns: 1.25fr .9fr; align-items: center; gap: 48px; padding: 40px 0 18px; }
  .cl-shelf { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .cl-shelf > :nth-child(n+13) { display: none; }
  .cl-grid-books { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cl-grid-books--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .cl-book-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
  .cl-book-aside { position: sticky; top: calc(var(--cl-top, 0px) + 24px); }
  .cl-book-aside .cl-ad { min-height: 250px; }
  .cl-characters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-reader-layout { display: grid; grid-template-columns: 210px minmax(0, var(--cl-read-width)) 300px; gap: 40px; justify-content: center; }
  .cl-reader-layout .cl-reader__col { max-width: none; }
  .cl-reader-side { display: block; position: sticky; top: calc(var(--cl-top, 0px) + 80px); align-self: start; font-size: 14px; padding-top: 26px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .cl-reader-side h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cl-muted); margin: 0 0 8px; }
  .cl-reader-side .cl-toc a { padding: 8px 2px; font-size: 14px; }
  .cl-reader-side--right .cl-ad { margin: 0; min-height: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .coabl *, .coabl [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}
@media print {
  .cl-reader-top, .cl-ad, .cl-share-card, .cl-next, .cl-end, .cl-reader-side, .coabl-ui { display: none !important; }
}

/* ---------- Fonds photo (carte à la une, bandeau de la fiche) ---------- */
.cl-photo {
  background: linear-gradient(to top, rgba(12,10,8,.88) 0%, rgba(12,10,8,.45) 55%, rgba(12,10,8,.55) 100%), var(--img) center / cover no-repeat, var(--c, #222) !important;
  color: #fff !important;
}
.cl-feature__art.cl-photo::after { display: none; }
.cl-book-hero.cl-photo { --hf: #FFF7EC; }
.cl-book-hero.cl-photo .cl-btn--light { background: #FFF7EC; color: #1C1B1A !important; }
.cl-credit { margin: 10px 0 0; font-size: 11px; opacity: .7; }

/* ---------- Barre de la bibliothèque (comme la maquette) ---------- */
.cl-subnav { background: var(--cl-surface); border-bottom: 1px solid var(--cl-line); }
.cl-subnav__in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.cl-subnav__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--cl-ink) !important; text-decoration: none !important; flex: none; }
.cl-subnav__brand i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cl-accent); color: #fff; font-style: normal; }
.cl-subnav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.cl-subnav__links::-webkit-scrollbar { display: none; }
.cl-subnav__links a { flex: none; text-decoration: none !important; color: var(--cl-ink-2) !important; font-weight: 500; font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.cl-subnav__links a:hover { background: var(--cl-surface-2); color: var(--cl-ink) !important; }
.cl-subnav__links a[aria-current="page"] { background: var(--cl-surface-2); color: var(--cl-ink) !important; font-weight: 600; }
.cl-search { position: relative; flex: none; display: none; }
.cl-search input { width: 250px; height: 42px; border-radius: 12px; border: 1px solid var(--cl-line-2); background: var(--cl-bg); color: var(--cl-ink); padding: 0 14px 0 40px; font-size: 14px; font-family: inherit; }
.cl-search .cl-ico { position: absolute; left: 13px; top: 11px; color: var(--cl-muted); pointer-events: none; }
.cl-search-mobile { padding: 12px 0 0; }
.cl-search-mobile .cl-search { display: block; }
.cl-search-mobile .cl-search input { width: 100%; }
@media (min-width: 900px) {
  .cl-subnav .cl-search { display: block; }
  .cl-search-mobile { display: none; }
}
@media (max-width: 899px) {
  .cl-subnav__brand span { display: none; }
}
.cl-results-head { padding: 22px 0 6px; }
.cl-results-head h1 { margin: 0; font: 700 clamp(26px, 5vw, 38px)/1.1 var(--cl-serif); }
.cl-empty { padding: 30px 0; color: var(--cl-muted); }