/* ========== Background gradient subtil sur toute la page ==========
           Radial violet pâle + orange faible derrière le hero. Donne la
           même DA premium que la home/onboarding sans surcharger le contenu
           (qui reste le héros). Volontairement étouffé sur le contenu après
           hero via un fade vers le fond off-white. */
        body.page-wide {
            background:
                radial-gradient(circle at 18% 8%, var(--violet-soft) 0%, transparent 38%),
                radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--orange) 8%, transparent) 0%, transparent 28%),
                var(--bg-off-white, #fafaf8);
            background-attachment: fixed;
        }

        /* ========== Layout 2 colonnes : cover sticky à gauche, contenu à droite ==========
           Mobile : 1 colonne, cover grosse en haut.
           Desktop ≥ 720px : 2 colonnes, cover sticky qui reste visible
           pendant qu'on scrolle l'ensemble du contenu. */
        .book-grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
            margin-top: 0;
        }
        .book-grid__cover {
            display: flex;
            justify-content: center;
        }
        .book-grid__main { min-width: 0; }
        @media (min-width: 720px) {
            .book-grid {
                flex-direction: row;
                align-items: flex-start;
                gap: var(--space-6);
            }
            .book-grid__cover {
                flex: 0 0 320px;
                position: sticky;
                top: calc(var(--header-h, 64px) + var(--space-3));
                justify-content: flex-start;
            }
            .book-grid__main { flex: 1; }
        }
        .book-cover-large {
            display: block;
            width: 100%;
            max-width: 220px;
            aspect-ratio: 2/3;
            border-radius: var(--radius);
            background: var(--bg-paper);
            object-fit: cover;
            /* cover = objet posé : ombre + fine hairline qui la détache du fond. */
            box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(15, 15, 18, 0.07);
            transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms;
        }
        .book-cover-large:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(15, 15, 18, 0.07);
        }
        .book-cover-large:active { transform: scale(0.99); }
        [data-theme="dark"] .book-cover-large,
        [data-theme="dark"] .book-cover-large:hover {
            box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        @media (min-width: 720px) {
            .book-cover-large { max-width: 100%; }
        }
        .book-cover-large--placeholder {
            display: flex; align-items: center; justify-content: center; color: var(--subtle);
        }

        /* ========== Hero ========== */
        .book-hero { margin-top: var(--space-1); }
        .book-hero__title {
            font-size: clamp(1.9rem, 4.5vw, 3rem);
            line-height: 1.08;
            letter-spacing: -0.025em;
            margin: 0;
            font-weight: 600;
        }
        .book-hero__subtitle {
            font-size: 1.05rem; color: var(--muted); margin: var(--space-2) 0 0;
            font-weight: 400; letter-spacing: -0.01em;
        }
        .book-hero__authors {
            margin-top: var(--space-2);
            font-size: 1.05rem;
            color: var(--muted);
            font-weight: 400;
        }
        .book-hero__authors a { color: inherit; border-bottom: 1px solid var(--border); }
        .book-hero__authors a:hover { border-bottom-color: var(--violet); color: var(--violet); }
        .book-meta {
            margin-top: var(--space-3);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
            font-weight: 500;
            display: flex; flex-wrap: wrap; gap: 0 var(--space-2);
        }
        .book-meta__sep { color: var(--subtle); }
        /* Title-bar : titre + badges genres/awards à droite */
        .book-title-bar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .book-title-bar__title { flex: 1; min-width: 0; }
        .book-title-bar__badges {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
            margin-top: 6px;
        }
        .book-meta-badge { position: relative; }
        .book-meta-badge > summary {
            list-style: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border-radius: 999px;
            background: var(--bg-paper);
            color: var(--muted);

            font-size: 0.7rem;
            font-weight: 500;
            transition: color 150ms, background 150ms;
        }
        .book-meta-badge > summary::-webkit-details-marker,
        .book-meta-badge > summary::marker { display: none; content: ''; }
        .book-meta-badge > summary svg { width: 14px; height: 14px; flex-shrink: 0; }
        .book-meta-badge > summary:hover {
            color: var(--ink);
            background: var(--border);
        }
        .book-meta-badge--awards > summary { color: color-mix(in srgb, var(--orange) 80%, black); background: var(--orange-soft); }
        .book-meta-badge[open] > summary {
            color: var(--violet);
            background: var(--violet-soft);
        }
        .book-meta-badge[open].book-meta-badge--awards > summary {
            color: color-mix(in srgb, var(--orange) 80%, black);
        }
        .book-meta-badge__popover {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            z-index: 30;
            background: var(--bg-elevated);
            border-radius: var(--radius);
            padding: var(--space-3);
            min-width: 220px;
            max-width: 300px;
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .book-genre-tag {
             font-size: 0.68rem;
            text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--muted); background: var(--bg-paper);
            border-radius: 999px;
            padding: 4px 10px;
        }

        /* ========== Stat note moyenne (dans le hero) ========== */
        .book-stat {
            margin-top: var(--space-4);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .book-stat__star { color: var(--orange); width: 20px; height: 20px; flex-shrink: 0; }
        .book-stat__score {
            
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: -0.01em;
        }
        .book-stat__count {
            
            font-size: 0.8rem;
            color: var(--muted);
        }
        .book-stat--empty .book-stat__score { color: var(--muted); font-weight: 400; }

        /* ========== Sections ========== */
        .book-section {
            margin-top: var(--space-5);
        }
        .book-section__heading {
            font-size: 1rem;
            letter-spacing: -0.01em;
            color: var(--ink);
            font-weight: 600;
            margin: 0 0 var(--space-3);
        }
        .book-empty { color: var(--muted); font-size: 0.95rem; }

        /* Anchors de retour après action (rating, review, etc.) :
           compense le header fixe pour que la section ne se retrouve
           pas cachée sous le header. NB: pas de scroll-behavior smooth global
           — sur Safari iOS, le combo smooth + scroll-restoration peut faire
           atterrir en bas de page au reload. */
        .book-section[id] { scroll-margin-top: calc(var(--header-h, 64px) + var(--space-4)); }

        /* Page toolbar : back + shelf-menu sur la même ligne — voir _utilities.css */
        .shelf-menu {
            position: relative;
        }
        .shelf-menu__trigger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-elevated);
            color: var(--ink);
            border: 1px solid var(--border);
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            list-style: none;
            user-select: none;
            line-height: 0;
            transition: border-color 120ms;
        }
        .shelf-menu__trigger::-webkit-details-marker,
        .shelf-menu__trigger::marker { display: none; content: ''; }
        .shelf-menu__trigger:hover { border-color: var(--ink); }
        .shelf-menu[open] .shelf-menu__trigger { border-color: var(--violet); }
        .shelf-icon { width: 16px; height: 16px; flex-shrink: 0; }
        .shelf-icon--burger { color: var(--ink); }
        .shelf-icon--blue { color: var(--cyan); }
        .shelf-icon--orange { color: var(--orange); }
        .shelf-icon--green { color: #3F8E5C; }

        .shelf-menu__dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
            backdrop-filter: saturate(180%) blur(16px);
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            min-width: 220px;
            padding: 4px;
            z-index: 10;
            max-height: 60vh;
            overflow-y: auto;
        }
        .shelf-menu__dropdown form { margin: 0; }
        .shelf-menu__divider {
            height: 1px;
            background: var(--border);
            margin: 4px -4px;
        }
        .shelf-menu__group-label {
            padding: 8px 12px 4px;
            
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--subtle);
        }
        .shelf-menu__option {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 12px;
            background: transparent;
            border: 0;
            border-radius: var(--radius-sm);
            text-align: left;
            font-family: inherit;
            font-size: 0.92rem;
            color: var(--ink);
            cursor: pointer;
        }
        .shelf-menu__option:hover { background: var(--bg-paper); }
        .shelf-menu__option[aria-pressed="true"] {
            background: var(--violet-soft);
            color: var(--ink);
            font-weight: 500;
        }
        .shelf-menu__option .shelf-icon { width: 18px; height: 18px; }

        .shelf-menu__check {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            stroke: var(--border-strong);
            stroke-width: 1.5;
            fill: transparent;
        }
        .shelf-menu__option[aria-pressed="true"] .shelf-menu__check {
            stroke: var(--violet);
            fill: var(--violet);
        }
        .shelf-menu__option-name {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .shelf-menu__new-link {
            color: var(--violet);
            font-weight: 500;
        }

        /* ========== Star rating widget (centré, compact) ========== */
        .stars-form {
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .stars-wide {
            --fill: 0;
            position: relative;
            display: block;
            width: 100%;
            max-width: 220px;
            aspect-ratio: 96 / 16;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            cursor: pointer;
        }
        .stars-wide svg.stars-wide__layer {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
        }
        .stars-wide__bg use {
            fill: transparent;
            stroke: var(--orange);
            stroke-width: 1.1;
        }
        .stars-wide__fg use {
            fill: var(--orange);
            stroke: var(--orange);
            stroke-width: 1.1;
        }
        .stars-wide__fg {
            clip-path: inset(0 calc(100% * (1 - var(--fill))) 0 0);
            transition: clip-path 60ms linear;
        }
        .stars-wide[data-rating-state="unrated"] .stars-wide__fg { display: none; }
        .stars-hint {
            
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--subtle);
        }

        /* ========== Bouton coup de cœur ========== */
        .favorite-form {
            margin-top: var(--space-3);
            display: flex;
            justify-content: center;
        }
        .favorite-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 1px solid var(--border);
            padding: 8px 14px;
            border-radius: 999px;
            cursor: pointer;
            color: var(--muted);
            font-family: inherit;
            font-size: 0.92rem;
            min-height: 36px;
            transition: border-color 150ms, color 150ms, background 150ms;
        }
        .favorite-toggle svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 1.5;
            fill: transparent;
            transition: fill 150ms, stroke 150ms;
        }
        .favorite-toggle:hover {
            border-color: color-mix(in srgb, var(--orange) 60%, transparent);
            color: var(--ink);
        }
        .favorite-toggle:hover svg { stroke: var(--orange); }
        .favorite-toggle.is-active {
            border-color: var(--orange);
            color: var(--ink);
            background: var(--orange-soft);
        }
        .favorite-toggle.is-active svg {
            fill: var(--orange);
            stroke: var(--orange);
        }
        .favorite-toggle:focus-visible {
            outline: 2px solid var(--violet);
            outline-offset: 2px;
        }

        /* ========== Synopsis dépliable ========== */
        .synopsis { margin-top: var(--space-3); max-width: 64ch; }
        .synopsis__text { font-size: 1rem; line-height: 1.65; color: var(--ink); }
        .synopsis__text p + p { margin-top: var(--space-3); }
        .synopsis__text.is-collapsed {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .synopsis__toggle {
            background: none;
            border: 0;
            padding: 0;
            margin-top: var(--space-2);
            color: var(--violet);
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .synopsis__toggle:hover { text-decoration: underline; }

        /* ========== Ratings histogram (Letterboxd-style) ========== */
        .ratings-summary { display: grid; gap: var(--space-3); }
        @media (min-width: 600px) {
            .ratings-summary { grid-template-columns: auto 1fr; gap: var(--space-5); align-items: end; }
        }
        .ratings-summary__average {
            display: flex; align-items: baseline; gap: var(--space-2);
        }
        .ratings-summary__score {
            font-size: 2.2rem; font-weight: 600; letter-spacing: -0.03em;
            color: var(--ink);
        }
        .histogram {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 48px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 2px;
        }
        .histogram__bar {
            flex: 1;
            background: var(--orange);
            border-radius: 2px 2px 0 0;
            min-height: 2px;
            position: relative;
        }
        .histogram__bar[data-count="0"] { background: var(--border); opacity: 0.4; }
        .histogram__bar:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--ink);
            color: var(--bg);
            
            font-size: 0.65rem;
            padding: 3px 6px;
            border-radius: 3px;
            white-space: nowrap;
            z-index: 1;
        }
        .histogram-scale {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            
            font-size: 0.6rem;
            color: var(--subtle);
        }

        /* ========== Bloc auteur (style « profil d'artiste ») ==========
           Photo en bandeau en haut (aspect 16/9), gradient qui transitionne
           vers le contenu en dessous (nom, méta, bio). Style proche d'une
           page d'artiste Spotify, mais sobre. */
        .author-card {
            display: block;
            background: var(--bg-paper);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            transition: border-color 150ms, box-shadow 150ms;
        }
        .author-card:hover {
            border-color: transparent;
            box-shadow: var(--shadow-md);
            text-decoration: none;
        }
        .author-card:hover .author-name { color: var(--violet); }
        .author-card__hero {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--violet-soft) 100%, white),
                color-mix(in srgb, var(--violet) 25%, transparent));
            overflow: hidden;
        }
        @media (min-width: 480px) {
            .author-card__hero { aspect-ratio: 21/9; }
        }
        .author-card__hero img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 25%;
        }
        /* Gradient bas vers le body pour fondre la photo dans le contenu */
        .author-card__hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                transparent 0%,
                transparent 55%,
                color-mix(in srgb, var(--bg-paper) 60%, transparent) 80%,
                var(--bg-paper) 100%);
            pointer-events: none;
        }
        .author-card__hero--placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .author-card__initials {
            font-size: 3rem;
            font-weight: 600;
            color: var(--violet);
            opacity: 0.4;
            letter-spacing: -0.02em;
        }
        @media (min-width: 480px) {
            .author-card__initials { font-size: 4rem; }
        }
        .author-card__body {
            padding: 0 var(--space-4) var(--space-4);
            margin-top: calc(-1 * var(--space-2));
            position: relative;
        }
        .author-name {
            color: var(--ink);
            font-weight: 600;
            font-size: 1.3rem;
            line-height: 1.15;
            letter-spacing: -0.01em;
            display: block;
            transition: color 150ms;
        }
        @media (min-width: 480px) {
            .author-name { font-size: 1.5rem; }
        }
        .author-meta {
            margin: 6px 0 0;
            
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--subtle);
        }
        .author-bio {
            margin: 12px 0 0;
            font-size: 0.92rem;
            color: var(--muted);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* ========== Bouton épingler critique ========== */
        .review-pin-form {
            margin-top: var(--space-4);
        }
        .review-pin-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 1px solid var(--border);
            padding: 6px 12px;
            border-radius: 999px;
            cursor: pointer;
            color: var(--muted);
            font-family: inherit;
            font-size: 0.85rem;
            min-height: 32px;
            transition: border-color 150ms, color 150ms, background 150ms;
        }
        .review-pin-toggle svg {
            width: 14px;
            height: 14px;
            stroke: currentColor;
            stroke-width: 1.75;
            fill: transparent;
            transition: fill 150ms, stroke 150ms;
        }
        .review-pin-toggle:hover {
            border-color: color-mix(in srgb, var(--violet) 50%, transparent);
            color: var(--ink);
        }
        .review-pin-toggle:hover svg { stroke: var(--violet); }
        .review-pin-toggle.is-active {
            border-color: var(--violet);
            color: var(--ink);
            background: var(--violet-soft);
        }
        .review-pin-toggle.is-active svg {
            fill: var(--violet);
            stroke: var(--violet);
        }

        /* ========== Critique : 2 modes ========== */
        /* Mode "write" (pas encore de critique) : bloc discret ouvert par défaut, heading sobre */
        /* Mode "edit"  (critique présente)      : lien repliable, ouvre la textarea au clic   */
        .critique-disclosure { margin-top: 0; }
        .critique-disclosure__trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            list-style: none;
            user-select: none;
            padding: 4px 0;
        }
        .critique-disclosure__trigger::-webkit-details-marker,
        .critique-disclosure__trigger::marker { display: none; content: ''; }
        .critique-disclosure__trigger svg { width: 16px; height: 16px; flex-shrink: 0; }

        /* Mode write : heading inline-flex, click optionnel pour replier */
        .critique-disclosure--write .critique-disclosure__trigger {
            cursor: pointer;
            color: var(--ink);
            font-weight: 500;
            font-size: 1rem;
            letter-spacing: -0.01em;
        }
        .critique-disclosure--write .critique-disclosure__heading-icon { color: var(--subtle); }

        /* Mode edit : link style, violet, chevron rotatif */
        .critique-disclosure--edit .critique-disclosure__trigger {
            cursor: pointer;
            color: var(--violet);
            font-weight: 500;
            font-size: 1rem;
        }
        .critique-disclosure--edit .critique-disclosure__trigger:hover { text-decoration: underline; }
        .critique-disclosure--edit[open] .critique-disclosure__trigger { color: var(--ink); }
        .critique-disclosure--edit[open] .chevron { transform: rotate(180deg); }
        .chevron { width: 14px; height: 14px; transition: transform 150ms; color: var(--subtle); margin-left: auto; }

        /* ========== Critique inline (compacte) ========== */
        .review-form { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
        .review-form textarea {
            width: 100%;
            min-height: 70px;
            padding: var(--space-3);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius);
            background: var(--bg-elevated);
            color: var(--ink);
            font-family: inherit;
            font-size: 1rem;
            line-height: 1.55;
            resize: vertical;
            transition: border-color 120ms, box-shadow 120ms;
        }
        .review-form textarea:focus {
            outline: none;
            border-color: var(--violet);
            box-shadow: 0 0 0 3px var(--violet-soft);
        }
        .review-form textarea[disabled] {
            background: var(--bg-paper);
            color: var(--muted);
            cursor: not-allowed;
        }
        .review-form__row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            align-items: center;
            justify-content: space-between;
        }
        .review-form__check {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 0.9rem; color: var(--muted); cursor: pointer;
            text-transform: none; letter-spacing: normal;
        }
        .review-form__check input[type="checkbox"] {
            width: 14px; height: 14px;
        }
        .review-form__actions { display: flex; gap: var(--space-2); }
        .review-form__hint {
            font-size: 0.85rem; color: var(--muted);
            background: var(--violet-soft);
            border-radius: var(--radius-sm);
            padding: 10px var(--space-3);
            line-height: 1.45;
        }

        /* ========== Flash (uniquement erreurs) ========== */
        .flash-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
        .flash {
            padding: 10px 14px;
            border-radius: var(--radius-sm);
            font-size: 0.92rem;
            border: 1px solid;
        }
        .flash--error { background: #FFE0E0; border-color: #C53030; color: #7A1D1D; }

        /* ========== Du même auteur (carrousel mobile / grid desktop) ==========
           Mobile : scroll horizontal avec snap pour glisser les vignettes
           sous le pouce. Desktop : grille fixe pour voir tout d'un coup. */
        .also-by {
            display: flex;
            gap: var(--space-3);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-padding-inline: var(--space-1);
            padding-bottom: var(--space-2);
            margin: 0 calc(-1 * var(--space-3));
            padding-inline: var(--space-3);
            scrollbar-width: thin;
        }
        .also-by::-webkit-scrollbar { height: 6px; }
        .also-by::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        .also-by__item {
            flex: 0 0 110px;
            scroll-snap-align: start;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: transform 150ms;
        }
        .also-by__item:hover { transform: translateY(-2px); }
        .also-by__item:hover .also-by__title { color: var(--violet); }
        .also-by__cover {
            display: block;
            width: 100%;
            aspect-ratio: 2/3;
            border-radius: var(--radius-sm, 6px);
            object-fit: cover;
            background: var(--bg-paper);
            border: 1px solid var(--border);
        }
        .also-by__cover--placeholder {
            display: flex; align-items: center; justify-content: center;
            color: var(--subtle);
        }
        .also-by__title {
            font-size: 0.82rem;
            line-height: 1.25;
            color: var(--ink);
            font-weight: 500;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 150ms;
        }
        .also-by__year {
            
            font-size: 0.66rem;
            color: var(--subtle);
            letter-spacing: 0.06em;
        }
        @media (min-width: 720px) {
            .also-by {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                overflow: visible;
                margin: 0;
                padding-inline: 0;
            }
            .also-by__item { flex: initial; }
        }

        /* ========== Adaptations (section très discrète, en bas de fiche) ========== */
        .adaptations-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .adaptation {
            display: flex;
            align-items: baseline;
            gap: var(--space-3);
            padding: 8px 0;
            font-size: 0.88rem;
            border-bottom: 1px solid var(--border);
        }
        .adaptation:last-child { border-bottom: none; }
        .adaptation__type {
            
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--subtle);
            flex: 0 0 56px;
        }
        .adaptation__title { flex: 1; color: var(--ink); }
        .adaptation__year {
            
            font-size: 0.7rem;
            color: var(--subtle);
        }

        /* ========== Éditions (section repliable) ==========
           NB : pas de séparateur par trait sur .editions-summary (sections
           sans border-top, air géré par margin/padding). Le margin-top est
           réduit pour resserrer les disclosures consécutifs (éditions +
           adaptations) sans coller au-dessus. */
        .editions-section { margin-top: var(--space-3); padding-top: var(--space-3); }
        /* Réduit aussi la marge de la section qui SUIT un disclosure
           (sinon l'espace en bas du dernier disclosure paraît plus grand
           que celui entre 2 disclosures). */
        .editions-section + .book-section { margin-top: var(--space-3); padding-top: var(--space-3); }
        .editions-section details summary { list-style: none; cursor: pointer; }
        .editions-section details summary::-webkit-details-marker { display: none; }
        .editions-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0;
            font-size: 0.95rem;
            color: var(--muted);
        }
        .editions-summary__label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .editions-summary__icon {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--bg-paper);
            color: var(--muted);
            flex-shrink: 0;
            transition: color 150ms, background 150ms;
        }
        .editions-summary__icon svg { width: 18px; height: 18px; }
        .editions-summary:hover { color: var(--ink); }
        .editions-summary:hover .editions-summary__icon {
            color: var(--violet);
            background: var(--violet-soft);
        }
        .editions-summary__chevron { width: 18px; height: 18px; transition: transform 150ms; flex-shrink: 0; }
        .editions-section details[open] .editions-summary__chevron { transform: rotate(180deg); }
        .editions-section details[open] .editions-summary__icon {
            color: var(--violet);
            background: var(--violet-soft);
        }
        .editions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: var(--space-3);
            padding-top: var(--space-2);
            padding-bottom: var(--space-4);
        }
        .edition-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-decoration: none;
            color: inherit;
            border-radius: var(--radius-sm);
            transition: transform 150ms;
        }
        .edition-card--clickable:hover { transform: translateY(-2px); text-decoration: none; }
        .edition-card__cover {
            width: 100%;
            aspect-ratio: 2/3;
            border-radius: var(--radius-sm);
            object-fit: cover;
            background: var(--bg-paper);
        }
        .edition-card__cover--placeholder {
            display: flex; align-items: center; justify-content: center;
            color: var(--subtle);
            border: 1px solid var(--border);
        }
        .edition-card__meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.3;
        }
        .edition-card__year { color: var(--ink); font-weight: 500; }
        .edition-card__pub { font-size: 0.72rem; }

        /* ========== Critiques d'autres lecteurs (pattern conversationnel) ==========
           Pas de carte. Border-top sur la liste, border-bottom entre items.
           Cohérent avec home-review-card, comment, notif. */
        .book-reviews {
            border-top: 1px solid var(--border);
        }
        .book-review-card {
            padding: var(--space-4) 0;
            border-bottom: 1px solid var(--border);
        }
        .book-review-card__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .book-review-card__author {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: inherit;
            text-decoration: none;
            min-width: 0;
        }
        .book-review-card__author:hover .book-review-card__name {
            color: var(--violet);
        }
        .book-review-card__avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--violet-soft);
            flex-shrink: 0;
        }
        .book-review-card__avatar--placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--violet);
            font-size: 0.8rem;
            font-weight: 600;
        }
        .book-review-card__name {
            font-size: 0.92rem;
            font-weight: 600;
            line-height: 1.2;
            transition: color 120ms;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .book-review-card__meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        .book-review-card__stars {
            display: inline-flex;
            gap: 1px;
            color: var(--orange);
        }
        .book-review-card__date {
            
            font-size: 0.7rem;
            color: var(--muted);
        }
        .book-review-card__body {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.55;
            color: var(--ink);
            white-space: pre-wrap;
        }
        /* Corps cliquable vers la critique (like/commentaire s'y font). */
        .book-review-card__bodylink {
            display: block;
            margin-top: var(--space-2);
            font-size: 0.95rem;
            line-height: 1.55;
            color: var(--ink);
            white-space: pre-wrap;
            text-decoration: none;
        }
        .book-review-card__body--spoilers {
            font-size: 0.95rem;
        }
        .book-review-card__body--spoilers summary {
            cursor: pointer;
            
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .book-review-card__footer {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-top: var(--space-2);
            padding-top: var(--space-2);
            border-top: 1px solid var(--border);
        }