/* === Font catalog (self-hosted woff2) === */
/* Each duo declares latin first (preferred for FR) and latin-ext as a unicode-range fallback. */

/* Cinzel (display) — default fantasy/littéraire */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/catalog/cinzel/cinzel-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/catalog/cinzel/cinzel-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Lora (body) — default */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/lora/lora-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/catalog/lora/lora-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Other catalog families — used only if a book overrides typography */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/cormorant-garamond/cormorant-garamond-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/inter/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/catalog/playfair-display/playfair-display-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/source-sans-3/source-sans-3-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/eb-garamond/eb-garamond-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/open-sans/open-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/catalog/spectral/spectral-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }

/* === Design tokens === */
:root {
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(26, 31, 24, .06), 0 1px 4px rgba(26, 31, 24, .04);
    --shadow:    0 4px 16px rgba(26, 31, 24, .08), 0 1px 4px rgba(26, 31, 24, .06);
    --shadow-lg: 0 12px 40px rgba(26, 31, 24, .12), 0 4px 12px rgba(26, 31, 24, .06);
    --shadow-gold: 0 6px 24px rgba(201, 162, 39, .35);
    --transition: .25s cubic-bezier(.2, .8, .2, 1);
    --space-xs:  .25rem;
    --space-sm:  .5rem;
    --space-md:  1rem;
    --space-lg:  2rem;
    --space-xl:  4rem;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--font-body), 'Lora', Georgia, serif;
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.65;
    font-size: 17px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }
img, picture { max-width: 100%; height: auto; display: block; }
*:focus-visible { outline: 2px solid var(--color-accent, #C9A227); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 4px; }

/* === Skip link (a11y) === */
.skip-link {
    position: absolute; top: -100px; left: var(--space-md); z-index: 100;
    background: var(--color-primary); color: var(--color-background);
    padding: .5rem 1rem; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-md); }

/* === Typography === */
h1, h2, h3, h4 {
    font-family: var(--font-display), 'Cinzel', Georgia, serif;
    color: var(--color-primary);
    line-height: 1.15;
    letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; margin-bottom: var(--space-md); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
p { margin-bottom: var(--space-md); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; }
.muted { color: var(--color-muted); }

/* === Container === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.75rem;
    border: 1px solid transparent; border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-weight: 600; font-size: .95rem;
    cursor: pointer; text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: var(--color-accent); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 162, 39, .45); color: var(--color-primary-dark); }
.btn-secondary { background: var(--color-primary); color: var(--color-background); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-dark); color: var(--color-background); }
.btn-ghost { background: transparent; border-color: var(--color-border); }

/* === Site nav === */
.site-nav {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    padding: 1.1rem 1.5rem;
    background: var(--color-primary); color: var(--color-background);
    box-shadow: var(--shadow-sm);
}
.site-nav .brand {
    font-family: var(--font-display), 'Cinzel', serif;
    font-size: 1.35rem; font-weight: 600; letter-spacing: .02em;
    color: var(--color-background);
}
.site-nav .brand:hover { color: var(--color-accent); }
.site-nav nav { flex: 1; display: flex; gap: 1.5rem; }
.site-nav nav a { color: var(--color-background); opacity: .82; font-size: .95rem; padding: .25rem 0; position: relative; }
.site-nav nav a:hover { opacity: 1; color: var(--color-accent); }
.site-nav .nav-account {
    color: var(--color-primary-dark); background: var(--color-accent);
    padding: .5rem 1rem; border-radius: var(--radius-pill);
    font-weight: 600; font-size: .9rem;
}
.site-nav .nav-account:hover { background: var(--color-background); color: var(--color-primary-dark); }

/* Mobile hamburger — hidden by default, shown via @media (max-width: 720px) */
.site-nav__toggle {
    display: none;
    width: 2.5rem; height: 2.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
    display: block;
    width: 22px; height: 2px;
    background: var(--color-background);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.site-nav__bars { position: relative; }
.site-nav__bars::before,
.site-nav__bars::after {
    content: ''; position: absolute; left: 0;
}
.site-nav__bars::before { top: -7px; }
.site-nav__bars::after  { top:  7px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::before { top: 0; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav__menu-account { display: none; }
.site-nav__account-desktop { display: inline-flex; }

@media (max-width: 720px) {
    .site-nav { gap: 1rem; padding: .75rem 1rem; }
    .site-nav__toggle { display: inline-flex; }
    .site-nav__account-desktop { display: none; }
    .site-nav__menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--color-primary);
        /* Vertical padding only when open. Otherwise the padding adds to the
         * visible height even with `max-height: 0` (padding lives outside
         * the max-height in content-box), leaking a 24 px strip of menu
         * showing the first nav item under the bar. */
        padding: 0 1rem;
        box-shadow: var(--shadow-sm);
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease, padding .2s ease;
        z-index: 50;
    }
    .site-nav__menu a {
        padding: .8rem 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .site-nav__menu a:first-child { border-top: 0; }
    .site-nav__menu-account { display: inline-flex; align-self: flex-start; margin-top: .5rem; }
    .site-nav { position: relative; }
    .site-nav.is-open .site-nav__menu {
        max-height: 80vh;
        padding: .5rem 1rem 1rem;
    }
}

/* === Hero — two-column on desktop, stacked on mobile =====================
 * Photo on the left, text bloc on the right. Uses the full content width
 * instead of being cramped in a 760 px centered column. Mirrors the
 * magazine-style hero that single-author sites tend to land on once the
 * "centered avatar" first draft is iterated past. */
.hero {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3.5rem 1.5rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.hero__media { display: flex; justify-content: flex-start; }
.hero__body { display: flex; flex-direction: column; gap: .9rem; }
.hero-photo {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow-lg);
}
.hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0;
    line-height: 1.1;
}
.hero h1::after {
    content: ''; display: block;
    width: 60px; height: 2px;
    background: var(--color-accent);
    margin: .75rem 0 0;
}
.hero-bio {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text, inherit);
    margin: 0;
}
.hero-cta { align-self: flex-start; margin-top: .35rem; }

@media (max-width: 720px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        padding: 2.5rem 1.25rem 2rem;
    }
    .hero__media { justify-content: center; }
    .hero__body  { align-items: center; }
    .hero-photo  { max-width: 200px; }
    .hero h1::after { margin: .65rem auto 0; }
    .hero-cta { align-self: center; }
}

/* === Books section === */
.books { padding: 3rem 1.25rem 4rem; }
.books h2 { text-align: center; margin-bottom: 2.5rem; position: relative; }
.books h2::after, .book-list-page h1::after {
    content: ''; display: block;
    width: 50px; height: 2px;
    background: var(--color-accent);
    margin: .75rem auto 0;
}
.book-list-page h1 { text-align: center; margin: 3rem 0 .5rem; }
.book-list-page > p { text-align: center; margin-bottom: 2.5rem; color: var(--color-muted); }
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 240px);
    justify-content: center;
    gap: 2rem;
    max-width: 1100px; margin: 0 auto;
}

/* === Book card === */
.book-card {
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-border);
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.book-card-cover {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
}
.book-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card > h3,
.book-card-title { font-family: var(--font-display), 'Cinzel', serif; font-size: 1.2rem; padding: 1rem 1.25rem .25rem; line-height: 1.2; }
.book-card-genre, .book-card-author {
    padding: 0 1.25rem;
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-muted);
}
.book-card-price {
    padding: .5rem 1.25rem 1.25rem;
    font-family: var(--font-display), serif;
    color: var(--color-accent);
    font-weight: 700; font-size: 1.1rem;
}
.book-card-badge {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--color-accent); color: var(--color-primary-dark);
    padding: .25rem .75rem; border-radius: var(--radius-pill);
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.book-card { position: relative; }

/* === Newsletter === */
.newsletter {
    background: var(--color-surface);
    padding: 3rem 1.5rem;
    margin: 3rem auto;
    max-width: 760px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.newsletter h2 { margin-bottom: .5rem; }
.newsletter > p { color: var(--color-muted); margin-bottom: 1.5rem; }
.newsletter-form {
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 440px; margin: 0 auto;
}
.newsletter-form input[type=email] {
    padding: .85rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    font: inherit; background: var(--color-background); color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.newsletter-form input[type=email]:focus {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, .15);
}
.newsletter-form label {
    display: flex; align-items: center; gap: .5rem;
    font-size: .85rem; color: var(--color-muted);
    text-align: left;
}
.newsletter-form button { align-self: center; }

/* === Book detail page === */
.book-page { padding: 2.5rem 0 4rem; }
.breadcrumb {
    font-size: .85rem; color: var(--color-muted);
    margin-bottom: 2rem; padding: 0 1.25rem;
    max-width: 1100px; margin-left: auto; margin-right: auto;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.book-hero {
    display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 3rem;
    align-items: start;
    background: var(--color-surface);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}
.book-cover, .book-cover-wrapper img {
    width: 100%; aspect-ratio: 2/3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.book-cover-wrapper { position: relative; }
.book-cover-wrapper--placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 400px; aspect-ratio: 2 / 3;
    margin: 0 auto;
    background: repeating-linear-gradient(135deg, var(--color-surface) 0 12px, var(--color-background) 12px 24px);
    border: 1px dashed var(--color-muted);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: .95rem; text-align: center; line-height: 1.4;
    font-style: italic;
}
.book-info > * + * { margin-top: 1rem; }
.book-info h1 { color: var(--color-primary); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.book-subtitle { font-size: 1.15rem; color: var(--color-muted); font-style: italic; }
.book-author { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.book-author::before { content: '— '; }
.preorder-banner {
    background: linear-gradient(90deg, rgba(201, 162, 39, .15), transparent);
    border-left: 3px solid var(--color-accent);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text);
}
.book-synopsis { font-size: 1.05rem; line-height: 1.7; color: var(--color-text); }
.book-meta { list-style: none; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); display: grid; gap: .35rem; }
.book-meta li { font-size: .9rem; color: var(--color-muted); display: flex; align-items: center; gap: .45rem; }
.book-meta strong { color: var(--color-text); margin-right: .5rem; }
/* Hard-cap every inline SVG inside the hero — meta icons, the email/promo
 * input chrome, the buy/Amazon CTAs, and the "J'ai un code promo" toggle.
 * Without these defaults, pages whose hero has no palette override miss
 * the override-scoped sizing rules (further down) and the SVGs render at
 * their intrinsic 24×24 viewBox stretched to fill their container — that's
 * the giant tag/envelope/ticket icons the user reported. The override
 * rules still win when relevant by specificity. */
.book-meta svg                  { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.book-buy__field-icon           { width: 18px; height: 18px; flex-shrink: 0; }
.book-buy__form button svg,
.book-buy__external svg         { width: 18px; height: 18px; flex-shrink: 0; }
.book-buy__promo > summary svg  { width: 14px; height: 14px; flex-shrink: 0; }
.book-buy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.book-price { font-family: var(--font-display), serif; font-size: 2.25rem; font-weight: 700; color: var(--color-accent); margin: 0; }
.book-buy__form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: stretch;
}
/* Field wrapper: icon absolutely-positioned over an input that owns the
 * full row. Without this rule the icon and the input stack vertically
 * on light themes (only the dark-hero override styled it before). */
.book-buy__field { position: relative; display: block; }
.book-buy__field--err input[type=email],
.book-buy__field--err input[type=text] { border-color: #b94a3b; }
.book-buy__field-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}
.book-buy__form input[type=email],
.book-buy__form input[type=text] {
    padding: .65rem 1rem .65rem 2.6rem;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font: inherit; background: var(--color-background); width: 100%;
    box-sizing: border-box;
}
.book-buy__form input:focus { outline: none; border-color: var(--color-accent); }
.book-buy__form .btn-primary { width: 100%; padding: .9rem 1.25rem; font-size: 1.05rem; }
.book-buy__hint { font-size: .82rem; color: var(--color-muted); margin: 0; text-align: center; font-style: italic; }
.book-buy__promo { font-size: .9rem; color: var(--color-muted); display: flex; flex-direction: column; gap: .55rem; }
.book-buy__promo > summary { cursor: pointer; user-select: none; padding: .25rem 0; display: flex; align-items: center; gap: .4rem; }
.book-buy__promo > summary:hover { color: var(--color-foreground); }
.book-buy__promo input[type=text] { text-transform: uppercase; letter-spacing: .04em; }
.book-buy__promo-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.book-buy__promo-row .book-buy__field { flex: 1; min-width: 0; }
.book-buy__promo-apply {
    flex-shrink: 0;
    padding: .65rem 1rem;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s;
}
.book-buy__promo-apply:hover { opacity: .85; }
.book-buy__promo-err { margin: 0; font-size: .85rem; color: #b94a3b; }
/* Right-of-withdrawal waiver — required checkbox shown right above the
 * "Acheter" button. Inline + discreet (no card, no border, no background)
 * so it sits naturally in the buy form between the promo and the CTA. */
.book-buy__waiver {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--color-muted);
    cursor: pointer;
}
.book-buy__waiver input { margin-top: .2rem; flex-shrink: 0; cursor: pointer; }
.book-buy__waiver input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.book-buy__waiver strong { color: var(--color-foreground); font-weight: 600; display: block; margin-bottom: .15rem; }
.book-buy__waiver small { display: block; font-size: .75rem; color: var(--color-muted); }
.book-buy__waiver a { color: var(--color-accent); text-decoration: underline; }
.book-buy__waiver--err strong { color: #b94a3b; }
.book-buy__waiver-err { margin: -.25rem 0 0; font-size: .82rem; color: #b94a3b; }
.book-buy__form .btn-primary:disabled,
.book-buy__form .btn-primary[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
/* Secondary CTA spans the full width below price + form */
.book-buy__external { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
@media (max-width: 600px) {
    .book-buy { grid-template-columns: 1fr; }
    .book-price { text-align: center; }
}

/* Sticky buy bar — appears on every viewport size once the hero scrolls
 * out of view, mirrors the "Avant de partir…" pattern of polished author
 * sites. Originally mobile-only; opened up to desktop in May 2026 after
 * comparing with reference sites that keep the CTA always in reach. */
.book-buy-mobile {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    /* 1.25rem inline padding so the CTA never kisses the viewport edge.
     * Vertical padding .85rem top + safe-area bottom for iOS notch. */
    padding: .85rem 1.25rem max(.85rem, env(safe-area-inset-bottom, .85rem));
    z-index: 40;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
    transform: translateY(110%);
    transition: transform .18s ease-out;
}
.book-buy-mobile.is-visible { transform: translateY(0); }
/* Reserve room at the bottom of the page so the sticky buy bar never
 * overlaps the footer (mentions légales, copyright). */
body:has(.book-buy-mobile) { padding-bottom: 100px; }
.book-buy-mobile__inner {
    display: flex; align-items: center; gap: 1rem;
    max-width: 900px; margin: 0 auto;
}
.book-buy-mobile__price {
    font-family: var(--font-display), serif;
    font-size: 1.4rem; font-weight: 700;
    color: var(--color-accent); flex: 1;
}
.book-buy-mobile__cta { padding: .7rem 1.6rem; font-size: 1rem; }
@media (max-width: 720px) {
    .book-buy-mobile__price { font-size: 1.25rem; }
    .book-buy-mobile__inner { max-width: 600px; gap: .85rem; }
    /* Don't let the bar cover the page footer at the bottom */
    main { padding-bottom: 5rem; }
}

.book-long-synopsis, .book-excerpt, .book-custom-section, .book-section-placeholder {
    max-width: 760px; margin: 3rem auto 0; padding: 0 1.25rem;
}

/* === Full-bleed bands when a section carries an explicit palette override ===
 * The page-builder lets the author paint background/text/accent on individual
 * sections. When a section has an explicit `--color-background` (set inline by
 * the renderer), we want it to read like a magazine-style band that touches
 * the viewport edges, not a floating coloured card inside the .container.
 *
 * Trick: negative inline margin equal to the gutter (50% - 50vw) breaks out of
 * the container, then padding-inline compensates so the inner content keeps a
 * gutter. A direct child .book-section-inner re-applies a reading max-width
 * so headings/paragraphs don't stretch edge to edge. Body needs overflow-x
 * hidden so the negative margins don't introduce horizontal scroll on the
 * scrollbar-narrow Mac browsers. */
html { overflow-x: hidden; }
/*
 * Width: 100vw + margin-left: calc(50% - 50vw) breaks out of the parent
 * container with a deterministic frame of reference: the section is now
 * exactly the viewport width. Padding-inline can therefore use a fixed
 * reading max-width (1100px) instead of `50%` (which would re-centre to
 * the section, defeating the purpose).
 */
.book-scope > [data-section-id][style*="--color-background"],
.book-scope > .book-author-section[style*="--color-background"] {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-block: 4rem;
    padding-inline: max(1.25rem, calc((100vw - 1100px) / 2));
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    border: 0;
}
/* Re-centre inner content with a magazine-style reading width. */
.book-scope > [data-section-id][style*="--color-background"] > *,
.book-scope > .book-author-section[style*="--color-background"] > * {
    max-width: 800px;
    margin-inline: auto;
}
/* Hero is a grid (cover | info) — un-cap inner children so the grid keeps
 * its native layout, and let the hero's padding-inline above handle gutters. */
.book-scope > .book-hero[style*="--color-background"] > * { max-width: none; }
/* The gallery has its own grid of thumbnails — cap at the wider reading rail
 * rather than the 800px text rail. */
.book-scope > .book-gallery[style*="--color-background"] > .book-gallery-grid {
    max-width: 1100px;
}
/* No top-margin on full-bleed sections — bands butt up against each other
 * for a continuous magazine layout (cancels `margin-top: 3rem` from the
 * generic .book-long-synopsis rule above). */
.book-scope > [data-section-id][style*="--color-background"]:not(.book-hero) {
    margin-top: 0;
}

/* === Hero polish when running as a full-bleed band =======================
 * Decluttered redesign: removes redundant info (tag chip, standalone price,
 * meta-as-table), tames the gold accent (CTA + 1 supporting role), keeps
 * the email field for power-users but hidden behind a small toggle, and
 * gives the two CTAs equal visual weight on the same row. */
.book-scope > .book-hero[style*="--color-background"] .book-tags { display: none; }
.book-scope > .book-hero[style*="--color-background"] .book-author { opacity: .75; font-size: .9rem; }
.book-scope > .book-hero[style*="--color-background"] .book-subtitle {
    font-size: .9rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: inherit;
    opacity: .55;
    margin-top: .35rem;
}
.book-scope > .book-hero[style*="--color-background"] .book-synopsis {
    max-width: 540px;
    font-size: 1.1rem;
    line-height: 1.65;
    opacity: .92;
    margin-block: 1.1rem 1.5rem;
    font-style: italic;
}

/* Meta — single inline rail of dot-separated facts, no labels, no box.
 * Reads as a typographic credit line rather than a fiche technique. */
.book-scope > .book-hero[style*="--color-background"] .book-meta {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .65;
}
.book-scope > .book-hero[style*="--color-background"] .book-meta li {
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.book-scope > .book-hero[style*="--color-background"] .book-meta li + li::before {
    content: '·';
    margin-inline: .85rem;
    opacity: .55;
}
.book-scope > .book-hero[style*="--color-background"] .book-meta strong { display: none; }
.book-scope > .book-hero[style*="--color-background"] .book-meta svg {
    width: 16px; height: 16px;
    opacity: 1;
    flex-shrink: 0;
}

/* Buy block — just the two CTAs side by side. Price is part of the primary
 * label ("Acheter — 7,99 €") so we hide the standalone price element. The
 * email input is collapsed by default; clicking the small "Pré-remplir mon
 * email" toggle expands it inline (CSS-only via :has() + the existing
 * promo <details>; we re-use it as a UX pattern). */
.book-scope > .book-hero[style*="--color-background"] .book-buy {
    border-top: 0;
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Email + promo at the top (input fields the buyer fills in first), then
     * the two equal-weight CTAs as the conversion focal point at the bottom. */
    grid-template-areas:
        "email email"
        "promo promo"
        "buy   ext";
    gap: .85rem 1rem;
    align-items: stretch;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy .book-price { display: none; }
.book-scope > .book-hero[style*="--color-background"] .book-buy__form { display: contents; }
/* Direct-child selector only — without `>`, this would also match the
 * .book-buy__field nested inside <details class="book-buy__promo">, which
 * would force the promo input into the email grid-area and orphan the
 * Apply button on its own row. Keep the descendant scope tight. */
.book-scope > .book-hero[style*="--color-background"] .book-buy__form > .book-buy__field {
    grid-area: email;
    position: relative;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__field {
    position: relative;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__field input {
    width: 100%;
    border: 0;
    background: color-mix(in srgb, currentColor 7%, transparent);
    color: inherit;
    padding: .85rem 1rem .85rem 2.6rem;
    border-radius: 10px;
    font: inherit;
    font-size: .9rem;
    box-sizing: border-box;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__field-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: .8;
    pointer-events: none;
}
/* Email input alone gets the original hook (kept for backward compatibility
 * with browsers cached on an older version of book.php). */
.book-scope > .book-hero[style*="--color-background"] .book-buy__form > input[type=email] {
    grid-area: email;
    width: 100%;
    border: 0;
    background: color-mix(in srgb, currentColor 7%, transparent);
    color: inherit;
    padding: .85rem 1rem;
    border-radius: 10px;
    font: inherit;
    font-size: .9rem;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__form input[type=email]::placeholder {
    color: color-mix(in srgb, currentColor 50%, transparent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__form input[type=email]:focus {
    outline: none;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Twin CTAs — same height, same radius, weighted by colour intent only.
 * `white-space: nowrap` keeps long labels (e.g. "Commander en papier sur
 * Amazon →") on a single line; container queries on the cells let the font
 * shrink before the layout breaks. */
.book-scope > .book-hero[style*="--color-background"] .book-buy__form button.btn-primary,
.book-scope > .book-hero[style*="--color-background"] .book-buy__external {
    height: 54px;
    padding: 0 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__form button.btn-primary svg,
.book-scope > .book-hero[style*="--color-background"] .book-buy__external svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__form button.btn-primary {
    grid-area: buy;
    background: var(--color-accent);
    color: #1a1a1a;
    border: 0;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__form button.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
/* Discounted state — quick pulse on the primary CTA when a promo code has
 * been applied so the buyer sees the price update isn't a layout glitch. */
.book-scope > .book-hero[style*="--color-background"] .book-buy__form button.btn-primary.book-buy__primary--discounted {
    animation: bookBuyPulse .35s ease;
}
@keyframes bookBuyPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__external {
    grid-area: ext;
    background: transparent;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__external:hover {
    color: inherit;
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Promo toggle — replaces the native <details> chrome with a discreet
 * inline link that expands an input below it without breaking the grid. */
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo {
    grid-area: promo;
    margin: 0;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .85rem;
    opacity: .7;
    padding: 0;
    user-select: none;
    transition: opacity .12s ease;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo > summary svg {
    width: 16px; height: 16px;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo > summary::-webkit-details-marker { display: none; }
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo > summary::before { content: '+ '; opacity: .5; }
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo[open] > summary::before { content: '− '; }
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo > summary:hover { opacity: 1; }
/* Promo input shape is delegated to the .book-buy__field rules above
 * (border, padding-left for the icon, focus state). We only add the
 * UPPERCASE letter-spacing styling that's specific to a code field. */
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo input[type=text] {
    text-transform: uppercase;
    letter-spacing: .04em;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo input[type=text]:focus {
    outline: none;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo input[type=text][readonly] {
    opacity: .8;
}
/* Promo input + Apply button on a single row. The Apply button stays at
 * the right edge and changes label depending on state (idle → "Appliquer",
 * applied → "Retirer", cooldown → "Réessayer dans Ns"). */
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    margin-top: .6rem;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-apply {
    height: auto;
    padding: 0 1.1rem;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    background: transparent;
    color: inherit;
    border-radius: 10px;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-width: 6.5rem;
    transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-apply:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-apply:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-apply[data-state="applied"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.book-scope > .book-hero[style*="--color-background"] .book-buy__promo-apply[data-state="cooldown"] {
    /* Use a dashed border to read as "blocked / temporary". */
    border-style: dashed;
}

/* Cover gets a stronger drop shadow on the dark band; remove the surface
 * box-shadow inherited from .book-cover. */
.book-scope > .book-hero[style*="--color-background"] .book-cover-wrapper img {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    border-radius: 8px;
}

/* Stack the CTAs on narrow viewports so neither one squeezes its label. */
@media (max-width: 640px) {
    .book-scope > .book-hero[style*="--color-background"] .book-buy {
        grid-template-columns: 1fr;
        grid-template-areas: "price" "email" "buy" "ext" "promo";
    }
}

/* Skip-link for keyboard / screen-reader users.
 * Hidden until focused, then floats above the header. */
.skip-link {
    position: absolute;
    top: -40px; left: 0;
    background: var(--color-primary);
    color: var(--color-background);
    padding: .5rem .9rem;
    border-radius: 0 0 6px 0;
    text-decoration: none;
    z-index: 1100;
    font-weight: 500;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Newsletter + contact consent rows: checkbox above submit, full width */
.newsletter-form__consent,
.contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.4;
}
.newsletter-form__consent input,
.contact-form__consent input { margin-top: .15rem; }

/* Admin-only placeholder for empty sections — visualises the section list
 * order even when underlying data is missing. NEVER rendered on public pages
 * (BookController only opts in via preview_show_empty for /admin/livres/{id}/preview). */
.book-section-placeholder {
    border: 1px dashed var(--color-muted);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    background: rgba(212, 160, 23, 0.04);
}
.book-section-placeholder h2 { color: var(--color-muted); margin: 0 0 .35rem; }
.book-section-placeholder__hint { color: #8a5a00; margin: 0; font-size: .92rem; }
.book-section-placeholder__hint em { color: var(--color-muted); font-size: .85rem; }
.book-long-synopsis p, .book-excerpt p, .book-custom-section p { line-height: 1.75; }
.book-excerpt .prose { font-size: 1.05rem; }
.book-excerpt .prose p { margin-bottom: 1rem; }
.book-excerpt .prose p:first-of-type::first-letter {
    font-family: var(--font-display), serif; font-size: 3.5rem;
    float: left; line-height: 1; padding-right: .5rem; padding-top: .25rem;
    color: var(--color-accent);
}

/* Custom sections (page-builder) */
.book-custom-section .book-custom-body { font-size: 1.02rem; }
.book-custom-section .book-custom-body h2 { margin-top: 1.5rem; font-size: 1.4rem; color: var(--color-primary); }
.book-custom-section .book-custom-body h3 { margin-top: 1.2rem; font-size: 1.15rem; color: var(--color-primary); }
.book-custom-section .book-custom-body blockquote {
    margin: 1rem 0; padding: .65rem 1rem;
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-muted);
    font-style: italic;
}
.book-custom-section .book-custom-body code {
    background: var(--color-surface);
    padding: .1rem .35rem; border-radius: 3px;
    font-size: .9em;
}
.book-custom-media { margin: 1.25rem 0; }
.book-custom-media img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.book-custom-media--full img { width: 100%; }
.book-custom-media--gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .65rem;
}
.book-custom-media--side-left,
.book-custom-media--side-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
    margin: 0;
    padding: 0;
}
.book-custom-media figcaption {
    margin-top: .35rem;
    color: var(--color-muted);
    font-size: .9rem;
    font-style: italic;
}
@media (min-width: 720px) {
    .book-custom-media--side-left  { grid-template-columns: 280px 1fr; align-items: start; }
    .book-custom-media--side-right { grid-template-columns: 1fr 280px; align-items: start; }
    .book-custom-media--side-right img { order: 2; }
}

/* === Reviews === */
.book-reviews { max-width: 760px; margin: 3rem auto; padding: 0 1.25rem; }
.book-reviews h2 { display: flex; align-items: baseline; gap: .75rem; }
.review {
    background: var(--color-surface); border: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem; border-radius: var(--radius);
    margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.review header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.review header strong { color: var(--color-primary); font-family: var(--font-display), serif; font-size: 1.05rem; }

/* === Mes achats === */
.mes-achats-page { padding: 3rem 0; max-width: 900px; margin: 0 auto; }
.mes-achats-page header { padding: 0 1.25rem; }
.mes-achats-page header h1 { margin-bottom: 0; }
.purchase-list { list-style: none; padding: 0; margin-top: 2rem; }
.purchase-item {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--color-surface); border: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem; border-radius: var(--radius);
    margin: 0 1.25rem 1rem; box-shadow: var(--shadow-sm);
}
.purchase-item img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.purchase-info h3 { margin-bottom: .25rem; }
.purchase-info p { font-size: .9rem; color: var(--color-muted); margin-bottom: .25rem; }
.purchase-actions { display: flex; flex-direction: column; gap: .5rem; min-width: 160px; }
.purchase-actions .btn { font-size: .85rem; padding: .55rem 1rem; }

/* === Soft-auth login pages === */
.login-page {
    background: var(--color-surface);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}
.login-page h1 { text-align: center; margin-bottom: 1.5rem; }
.login-page p { text-align: center; color: var(--color-muted); margin-bottom: 1.5rem; }
.login-page form { display: flex; flex-direction: column; gap: 1rem; }
.login-page form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--color-text); }
.login-page form input {
    padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    font: inherit; background: var(--color-background);
}
.login-page form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201, 162, 39, .15); }
.login-page button[type=submit] { margin-top: .5rem; }

/* === Forms (contact, about, legal) === */
.contact-page, .about-page, .legal-page { padding: 3rem 0; max-width: 760px; margin: 0 auto; }
.contact-page h1, .about-page h1, .legal-page h1 { text-align: center; margin-bottom: 2rem; }
.contact-page h1::after, .about-page h1::after, .legal-page h1::after {
    content: ''; display: block; width: 60px; height: 2px;
    background: var(--color-accent); margin: 1rem auto 0;
}
.about-photo {
    width: 220px; height: 220px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 2rem; box-shadow: var(--shadow-lg);
    border: 4px solid var(--color-surface);
    display: block;
}
.contact-form {
    display: flex; flex-direction: column; gap: 1.25rem;
    background: var(--color-surface);
    padding: 2rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
}
.contact-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; }
.contact-form input, .contact-form textarea {
    padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    font: inherit; background: var(--color-background); resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201, 162, 39, .15);
}

/* === Prose (legal/about long bodies) === */
.legal-page .prose, .about-page .prose {
    background: var(--color-surface); padding: 2.5rem;
    border-radius: var(--radius); border: 1px solid var(--color-border);
    line-height: 1.75;
}
.legal-page .prose section { margin-bottom: 2rem; }
.legal-page .prose section + section { padding-top: 1rem; border-top: 1px solid var(--color-border); }
.legal-page .prose h2, .about-page .prose h2 {
    margin-top: 0; margin-bottom: 1rem;
    font-size: 1.4rem; color: var(--color-primary);
    padding-bottom: .5rem;
}
.legal-page .prose h3 {
    margin-top: 1.25rem; margin-bottom: .5rem;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}
.legal-page .prose p { margin-bottom: 1rem; }
.legal-page .prose ul, .legal-page .prose ol { margin: 0 0 1rem 1.5rem; }
.legal-page .prose li { margin-bottom: .35rem; }
.legal-page .prose a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(45, 80, 64, .35); text-underline-offset: 2px; }
.legal-page .prose a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.legal-page .prose strong { color: var(--color-primary-dark); }
.legal-page .prose em { color: var(--color-muted); font-style: italic; }

/* Tables (RGPD finalities, cookies, etc.) */
.legal-page .prose table {
    width: 100%; border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    background: var(--color-background);
    border-radius: var(--radius-sm); overflow: hidden;
    font-size: .92rem;
    border: 1px solid var(--color-border);
}
.legal-page .prose thead th {
    background: var(--color-primary);
    color: var(--color-background);
    text-align: left; padding: .65rem .9rem;
    font-family: var(--font-display), serif;
    font-weight: 600; font-size: .85rem;
    letter-spacing: .04em;
}
.legal-page .prose tbody td {
    padding: .6rem .9rem;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}
.legal-page .prose tbody tr:nth-child(odd) { background: rgba(232, 223, 201, .25); }
.legal-page .prose code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: .88em;
    background: var(--color-background); padding: 1px 6px;
    border-radius: 4px; color: var(--color-primary-dark);
    border: 1px solid var(--color-border);
}
.legal-page .prose hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.legal-page .prose > p:last-child { color: var(--color-muted); font-style: italic; font-size: .85rem; text-align: right; margin-top: 1.5rem; }

/* === Success page === */
.success-page { text-align: center; max-width: 600px; margin: 4rem auto; padding: 3rem 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.success-page h1 { margin-bottom: 1.5rem; }
.success-page h1::after { content: '✓'; display: block; margin: 1rem auto 0; color: var(--color-accent); font-size: 3rem; line-height: 1; }

/* === Error page === */
.error-page { text-align: center; padding: 5rem 1.5rem; }
.error-page h1 { font-size: 5rem; color: var(--color-accent); margin-bottom: 1rem; }
.error-page p { color: var(--color-muted); font-size: 1.1rem; }

/* === M14.4 — Enriched home (about, works rich, contact, subscriber count) === */
.hero-subtitle {
    font-size: .85rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-accent); font-weight: 600;
    margin: 0;
}
.hero-intro {
    font-size: 1.05rem; line-height: 1.65;
    color: var(--color-text);
    margin: 0;
}
.hero .btn { margin-top: .35rem; }

/* About section */
.about-section { padding: 4rem 1.25rem; max-width: 1100px; margin: 0 auto; }
.about-section h2 { text-align: center; margin-bottom: 2.5rem; }
.about-section h2::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-accent); margin: .75rem auto 0; }
.about-section .about-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center;
}
.about-section .about-text p { margin-bottom: 1.25rem; line-height: 1.8; }
.about-section .about-quote {
    background: var(--color-surface); padding: 3rem 2rem 2rem;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display), serif;
    font-size: 1.15rem; font-style: italic; line-height: 1.6;
    color: var(--color-primary-dark); position: relative;
}
.about-section .about-quote::before {
    content: '"'; position: absolute; top: 1rem; left: 1rem;
    font-size: 3.5rem; color: var(--color-accent); opacity: .35;
    font-family: serif; line-height: .8;
}
@media (max-width: 768px) {
    .about-section .about-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Works section (richer book cards) */
.works-section { padding: 3rem 1.5rem 4rem; max-width: 1400px; margin: 0 auto; }
.works-section h2 { text-align: center; margin-bottom: 2.5rem; }
.works-section h2::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-accent); margin: .75rem auto 0; }

/* === Featured work — when only one published book exists ===========
 * Two-column horizontal card: a large cover (40 %) on the left, the
 * title + tags + synopsis + CTA (60 %) on the right. Replaces the
 * multi-card grid so the single book commands the layout instead of
 * floating alone in a 3-column system. Mirrors zumii.fr's pattern. */
.works-section--featured { max-width: 1100px; }
.featured-work {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, .08));
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.featured-work:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .12));
}
.featured-work__cover img,
.featured-work__cover picture {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.featured-work__body { display: flex; flex-direction: column; gap: .75rem; }
.featured-work__genre {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: var(--color-muted);
}
.featured-work__title {
    font-family: var(--font-display, Georgia), serif;
    font-size: 2rem; line-height: 1.15;
    color: var(--color-primary, var(--color-foreground));
    margin: 0;
}
.featured-work__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.featured-work__tag {
    font-size: .78rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-primary-dark, var(--color-foreground));
}
.featured-work__badge {
    align-self: flex-start;
    font-size: .8rem; font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-background);
}
.featured-work__description {
    font-size: 1rem; line-height: 1.65;
    color: var(--color-text, inherit);
    margin: 0;
}
.featured-work__cta {
    align-self: flex-start;
    margin-top: .25rem;
    font-weight: 600;
    color: var(--color-accent);
}
@media (max-width: 720px) {
    .featured-work {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .featured-work__cover {
        max-width: 280px;
        margin: 0 auto;
    }
    .featured-work__title { font-size: 1.6rem; }
}
/* CSS grid with auto-fill caps columns at 360px so cards never stretch
 * past their natural max-width on wide screens. Unused space goes to
 * the side margins via justify-content:center. On mobile, the small
 * @media query below collapses to a single full-width column. */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    gap: 2rem;
    justify-content: center;
    justify-items: center;
}
.works-grid .work-card { width: 100%; }
@media (max-width: 320px) {
    .works-grid { grid-template-columns: 1fr; }
}
.work-card {
    display: flex; flex-direction: column; background: var(--color-surface);
    border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-border); position: relative;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.work-card-cover { aspect-ratio: 2/3; overflow: hidden; background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary)); }
.work-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.work-card-badge {
    position: absolute; top: 1rem; right: 1rem; z-index: 2;
    background: var(--color-surface); color: var(--color-primary-dark);
    padding: .35rem .85rem; border-radius: var(--radius-pill);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 600; box-shadow: var(--shadow-sm);
}
.work-card-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.work-card h3 { font-family: var(--font-display), serif; font-size: 1.4rem; line-height: 1.2; margin: 0; }
.work-card-genre { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.work-card-description { font-size: .95rem; line-height: 1.6; color: var(--color-text); flex: 1; margin: 0; }
.work-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.work-card-tag {
    background: rgba(201, 162, 39, .12); color: var(--color-primary-dark);
    padding: .2rem .65rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600;
}
.work-card-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--color-accent); font-weight: 600; font-size: .9rem;
    margin-top: .5rem;
}
.work-card-cta::after { content: '→'; transition: transform var(--transition); }
.work-card:hover .work-card-cta::after { transform: translateX(4px); }
.work-card-price { font-family: var(--font-display), serif; font-size: 1.1rem; color: var(--color-accent); font-weight: 700; }

/* Newsletter subscriber count */
.subscriber-count {
    margin-top: 1rem;
    text-align: center;
    font-size: .9rem; color: var(--color-muted);
}
.subscriber-count strong { color: var(--color-primary); font-weight: 700; }

/* Contact / Me Suivre cards */
.contact-section { padding: 3rem 1.25rem 4rem; max-width: 1100px; margin: 0 auto; }
.contact-section h2 { text-align: center; margin-bottom: .75rem; }
.contact-section h2::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-accent); margin: .75rem auto 1rem; }
.contact-intro { text-align: center; color: var(--color-muted); margin-bottom: 2.5rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.social-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; max-width: 800px; margin: 0 auto; }
.social-card {
    background: var(--color-surface); padding: 1.5rem 1.25rem; border-radius: var(--radius-lg);
    text-decoration: none; text-align: center;
    box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    color: inherit;
}
.social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.social-card svg { width: 32px; height: 32px; color: var(--color-primary); transition: color var(--transition); }
.social-card:hover svg { color: var(--color-accent); }
.social-card-name { font-weight: 600; font-size: .95rem; color: var(--color-text); }
.social-card-handle { font-size: .8rem; color: var(--color-muted); }
.contact-email {
    text-align: center; margin-top: 2.5rem; padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.contact-email p { color: var(--color-muted); font-size: .9rem; margin-bottom: .5rem; }
.contact-email a { font-family: var(--font-display), serif; font-size: 1.1rem; color: var(--color-primary); }
.contact-email a:hover { color: var(--color-accent); }

/* === Footer === Slim, single-row footer: socials row + legal links + copyright. */
.site-footer {
    background: var(--color-primary-dark); color: var(--color-background);
    padding: 1.25rem 1.5rem; margin-top: 3rem;
    position: relative;
    font-size: .85rem;
}
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    gap: .75rem;
}
.footer-social {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(248, 244, 236, .08);
    color: var(--color-background);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover {
    background: var(--color-accent); color: var(--color-primary-dark);
    transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-legal {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center;
}
.footer-legal a {
    color: var(--color-background); opacity: .72;
    transition: opacity var(--transition), color var(--transition);
    font-size: .82rem;
}
.footer-legal a:hover { opacity: 1; color: var(--color-accent); }
.footer-legal span { opacity: .35; font-size: .7rem; }
.footer-copyright {
    margin: 0; opacity: .5; font-size: .72rem; text-align: center;
}

/* === Cookie banner ===
 * Structured as a small confidence card: title + body text + actions row + privacy link.
 * Pinned bottom-left on desktop (out of the way of CTAs), full-width on mobile.
 */
.cookie-banner {
    position: fixed; bottom: 1.25rem; left: 1.25rem;
    max-width: 380px;
    background: var(--color-surface); color: var(--color-text);
    padding: 1.25rem 1.4rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
    z-index: 50;
    animation: cookie-banner-in .3s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes cookie-banner-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner__header {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .5rem;
}
.cookie-banner__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(201, 162, 39, .15);
    color: var(--color-accent);
    flex-shrink: 0;
}
.cookie-banner__icon svg { width: 20px; height: 20px; }
.cookie-banner__title {
    font-family: var(--font-display), serif;
    font-size: 1.05rem;
    color: var(--color-primary);
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}
.cookie-banner__text {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text);
}
.cookie-banner__text strong { color: var(--color-primary-dark); font-weight: 600; }
.cookie-banner__text em { color: var(--color-muted); font-style: italic; }
.cookie-banner__actions {
    display: flex; gap: .6rem;
    margin-bottom: .5rem;
}
.cookie-banner__btn {
    flex: 1;
    padding: .55rem 1rem;
    border-radius: var(--radius-pill);
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.cookie-banner__btn--primary {
    background: var(--color-primary);
    color: var(--color-background);
    border: 1px solid var(--color-primary);
}
.cookie-banner__btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
}
.cookie-banner__btn--ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}
.cookie-banner__btn--ghost:hover {
    background: var(--color-background);
    color: var(--color-text);
}
.cookie-banner__privacy {
    display: inline-block;
    font-size: .78rem; color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.cookie-banner__privacy:hover { color: var(--color-primary); }

@media (max-width: 600px) {
    .cookie-banner {
        left: 1rem; right: 1rem; bottom: 1rem;
        max-width: none;
    }
}

/* === Flash messages === */
.flash {
    padding: .85rem 1.25rem; border-radius: var(--radius);
    margin: 1rem 0; font-size: .92rem;
    border: 1px solid transparent;
}
.flash-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* === Mobile === */
@media (max-width: 768px) {
    body { font-size: 16px; }
    .site-nav { gap: 1rem; padding: 1rem; }
    .site-nav nav { width: 100%; order: 3; gap: 1rem; }
    .site-nav .brand { flex: 1; }
    .hero { padding: 3rem 1rem 2rem; }
    .hero-photo { width: 160px; height: 160px; }
    .book-hero { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; }
    .book-cover, .book-cover-wrapper img { max-width: 280px; margin: 0 auto; }
    .book-buy { flex-direction: column; align-items: stretch; }
    .purchase-item { flex-direction: column; align-items: stretch; }
    .purchase-actions { flex-direction: row; flex-wrap: wrap; }
}

/* === M14.5 — Enriched book page === */
.book-teaser {
    font-family: var(--font-display), serif;
    font-size: 1.35rem; line-height: 1.4;
    color: var(--color-primary-dark);
    margin: 0 0 1rem;
    /* Original compact height — only the left padding is bumped a touch
     * (1.25 → 2rem) to let the `"` mark sit visually in front of the
     * first letter without crowding it. */
    padding: 1rem 1.25rem 1rem 2rem;
    background: linear-gradient(90deg, rgba(201, 162, 39, .12), transparent);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    position: relative;
}
.book-teaser::before {
    content: '\201C';
    position: absolute;
    top: .15rem;
    left: .55rem;
    font-size: 2.4rem;
    color: var(--color-accent);
    opacity: .45;
    line-height: 1;
    font-style: normal;
    pointer-events: none;
}

.book-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.book-tag {
    background: rgba(201, 162, 39, .12);
    color: var(--color-primary-dark);
    padding: .25rem .8rem; border-radius: var(--radius-pill);
    font-size: .78rem; font-weight: 600;
}

.book-countdown {
    background: var(--color-primary-dark); color: var(--color-background);
    padding: 1.25rem 1.5rem; border-radius: var(--radius);
    margin: 1rem 0;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-primary-dark);
}
.book-countdown-label {
    font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-accent); font-weight: 600;
    margin-bottom: .5rem;
}
.book-countdown-grid {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
    font-family: var(--font-display), serif;
}
.book-countdown-cell { min-width: 60px; }
.book-countdown-num {
    font-size: 2rem; font-weight: 700; line-height: 1;
    color: var(--color-accent);
}
.book-countdown-unit {
    font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-background); opacity: .7;
    margin-top: .25rem;
}

.book-buy { gap: 1rem; }
.book-buy .btn-secondary { font-weight: 600; }

.synopsis-quote {
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-display), serif;
    font-size: 1.2rem; font-style: italic; line-height: 1.5;
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.synopsis-quote::before {
    content: '\201C'; position: absolute; top: -.5rem; left: .75rem;
    font-size: 4rem; color: var(--color-accent); opacity: .3;
    line-height: 1;
}

/* Author mini-section on book page */
.book-author-section {
    background: var(--color-surface);
    padding: 2.5rem; margin: 3rem auto;
    max-width: 760px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: center;
}
.book-author-photo {
    width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
    box-shadow: var(--shadow);
    border: 3px solid var(--color-background);
}
.book-author-name {
    font-family: var(--font-display), serif;
    font-size: 1.4rem; color: var(--color-primary);
    margin-bottom: .5rem;
}
.book-author-bio { color: var(--color-muted); font-size: .95rem; line-height: 1.7; margin-bottom: .75rem; }
.book-author-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--color-accent); font-weight: 600; font-size: .9rem;
}
.book-author-cta::after { content: '\2192'; transition: transform var(--transition); }
.book-author-cta:hover::after { transform: translateX(4px); }
@media (max-width: 600px) {
    .book-author-section { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.5rem; }
    .book-author-photo { margin: 0 auto; }
}

/* Social cards on book page (reuses .social-card from M14.4 but in a smaller container) */
.book-social {
    max-width: 760px; margin: 2rem auto;
    padding: 0 1.25rem;
    text-align: center;
}
.book-social h2::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-accent); margin: .75rem auto 1rem; }
.book-social .social-cards { max-width: 600px; margin: 0 auto; }

/* === M14.6 — FAQ === */
.book-faq, .global-faq {
    max-width: 760px; margin: 3rem auto; padding: 0 1.25rem;
}
.book-faq h2, .global-faq h2 { text-align: center; margin-bottom: 2rem; }
.book-faq h2::after, .global-faq h2::after {
    content: ''; display: block; width: 50px; height: 2px;
    background: var(--color-accent); margin: .75rem auto 0;
}
.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600; color: var(--color-primary);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; font-size: 1.5rem; line-height: 1;
    color: var(--color-accent); font-weight: 300;
    transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text); line-height: 1.7;
}
.faq-answer p:last-child { margin-bottom: 0; }

/* === M14.7 — Book gallery + lightbox === */
.book-gallery { max-width: 1100px; margin: 3rem auto; padding: 0 1.25rem; }
.book-gallery h2 { text-align: center; margin-bottom: 2rem; }
.book-gallery h2::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-accent); margin: .75rem auto 0; }
.book-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.book-gallery-item {
    position: relative;
    background: none; border: none; padding: 0; cursor: pointer;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    aspect-ratio: 1 / 1;
}
.book-gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow); }
.book-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(27, 58, 42, .85), transparent);
    color: var(--color-background);
    padding: .75rem 1rem; font-size: .85rem; text-align: left;
}

.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(27, 58, 42, .96);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    animation: lightbox-fade .25s ease both;
}
@keyframes lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lightbox[hidden] { display: none; }
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute; background: rgba(248, 244, 236, .12);
    color: var(--color-background); border: 1px solid rgba(248, 244, 236, .25);
    width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer; font-size: 1.75rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background: var(--color-accent); color: var(--color-primary-dark);
    border-color: var(--color-accent);
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-content {
    max-width: 90vw; max-height: 80vh;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.lightbox-content img {
    max-width: 100%; max-height: 75vh; object-fit: contain;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.lightbox-caption {
    color: var(--color-background); font-style: italic;
    text-align: center; max-width: 600px;
    margin: 0;
}

/* === M14.8 — Back-to-top + scroll animations === */
.back-to-top {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40;
    width: 44px; height: 44px;
    background: var(--color-primary); color: var(--color-background);
    border: none; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(8px) scale(.95);
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
    pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-dark); }
.back-to-top svg { width: 20px; height: 20px; }
/* When the sticky mobile buy bar is in view (book detail page only), float
 * the back-to-top above it so they don't overlap. The bar is ~77 px tall
 * including padding + safe-area, so 6rem of vertical offset clears it
 * comfortably on every device. */
@media (max-width: 720px) {
    body:has(.book-buy-mobile.is-visible) .back-to-top {
        bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

/* Scroll animations — pure opacity fade-in (no transform → no CLS).
   Restricted to discrete cards/items so the hero/LCP never paints
   invisible. Initial hidden state set by sync inline script in <head>
   that adds .js-ready to <html> before first paint. */
html.js-ready body.anim-on-scroll .work-card,
html.js-ready body.anim-on-scroll .book-card,
html.js-ready body.anim-on-scroll .review,
html.js-ready body.anim-on-scroll .faq-item,
html.js-ready body.anim-on-scroll .social-card,
html.js-ready body.anim-on-scroll .book-gallery-item {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.2, .8, .2, 1);
}
html.js-ready body.anim-on-scroll .work-card.in,
html.js-ready body.anim-on-scroll .book-card.in,
html.js-ready body.anim-on-scroll .review.in,
html.js-ready body.anim-on-scroll .faq-item.in,
html.js-ready body.anim-on-scroll .social-card.in,
html.js-ready body.anim-on-scroll .book-gallery-item.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html.js-ready body.anim-on-scroll .work-card,
    html.js-ready body.anim-on-scroll .book-card,
    html.js-ready body.anim-on-scroll .review,
    html.js-ready body.anim-on-scroll .faq-item,
    html.js-ready body.anim-on-scroll .social-card,
    html.js-ready body.anim-on-scroll .book-gallery-item { opacity: 1; transition: none; }
}