/* boulanger.hachem.cc — une bibliothèque : des rayons de bois, des volumes vus de dos
   (reliés et dorés quand ils sont publiés), des intercalaires par genre, et pour chaque œuvre
   sa fiche de catalogue dactylographiée. Textes en Splentino, titres en Malfin.
   Les polices viennent de la machine du lecteur si elles y sont installées, sinon de
   static/fonts/*.woff2 (si leur licence permet l’usage web), sinon des polices de repli.

   Toutes les tailles viennent de deux échelles :
   — le texte : un rapport constant de 1,2 à partir de 16 px ;
   — l’espace : une grille de 4 px (--sp-1 à --sp-8), y compris les dimensions des livres. */

:root {
    --bg: #f5f0e6;
    --surface: #fffdf8;
    --ink: #221d17;
    --muted: #7b7268;
    --faint: #b3a998;
    --line: #e2d9c8;
    --accent: #7a2e2e;
    --wood: #7a5a40;
    --gold: #e3c57a;
    --radius: 3px;                  /* un seul arrondi, celui du carton et des plats de reliure */

    /* Texte : 16 px × 1,2ⁿ */
    --fs-xxs: 0.579rem;             /*  9 px — étiquettes de cote */
    --fs-xs: 0.694rem;              /* 11 px — lettres des dos, fiche, sous-titres */
    --fs-s: 0.833rem;               /* 13 px — notes, boutons, commandes */
    --fs-m: 1rem;                   /* 16 px — texte courant */
    --fs-l: 1.2rem;                 /* 19 px — logo, compositeur, intertitres */
    --fs-xl: 1.44rem;               /* 23 px — titres de section */
    --fs-xxl: 2.488rem;             /* 40 px — titre d’une œuvre */

    /* Espace : grille de 4 px */
    --sp-1: 0.25rem;                /*  4 px */
    --sp-2: 0.5rem;                 /*  8 px */
    --sp-3: 0.75rem;                /* 12 px */
    --sp-4: 1rem;                   /* 16 px */
    --sp-5: 1.5rem;                 /* 24 px */
    --sp-6: 2rem;                   /* 32 px */
    --sp-7: 3rem;                   /* 48 px */
    --sp-8: 4rem;                   /* 64 px */

    /* Largeurs */
    --page: 60rem;
    --measure: 40rem;               /* ligne de lecture */

    --text: "Splentino", "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
    --display: "Malfin", "Splentino", "Bodoni 72", Didot, Georgia, serif;
    --type: "American Typewriter", "Courier Prime", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16130f;
        --surface: #211d18;
        --ink: #ece5d8;
        --muted: #a0978a;
        --faint: #5e564b;
        --line: #342e26;
        --accent: #dc9c9b;
        --wood: #5a4230;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--text);
    font-size: var(--fs-m);
    line-height: 1.6;
    font-variant-numeric: oldstyle-nums;
    -webkit-font-smoothing: antialiased;
}

main, header.site, footer.site {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* ── En-tête et pied ─────────────────────────────────────────────────── */

header.site {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}
header.site .brand {
    font-family: var(--display);
    font-size: var(--fs-l);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
header.site .tagline { font-style: italic; color: var(--muted); white-space: nowrap; }

footer.site {
    margin-top: var(--sp-8);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-7);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--fs-s);
}

/* ── La bibliothèque ─────────────────────────────────────────────────── */

.intro { max-width: var(--measure); margin: var(--sp-6) 0 0; }
h1.page-title {
    font-family: var(--display);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--fs-xxl);
    line-height: 1.1;
    margin: 0 0 var(--sp-4);
}
.intro p { margin: 0 0 var(--sp-2); }
.intro .progress { color: var(--muted); font-style: italic; font-size: var(--fs-s); }

/* Recherche et rangement (affichés seulement avec JavaScript), dans le style du catalogue :
   un champ à remplir sur une ligne, des options en petites capitales, l’active soulignée. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-s);
}
.toolbar[hidden] { display: none; }
.toolbar input[type="search"] {
    flex: 1 1 14rem;
    max-width: 20rem;
    padding: var(--sp-1) 0;
    font: inherit;
    font-size: var(--fs-m);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--faint);
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease;
}
.toolbar input[type="search"]::placeholder { color: var(--faint); font-style: italic; }
.toolbar input[type="search"]:focus { border-bottom-color: var(--accent); }
.toolbar .choice { display: flex; align-items: baseline; }
.toolbar .choice .lbl { margin-right: var(--sp-2); color: var(--muted); font-style: italic; }
.toolbar .choice input { position: absolute; opacity: 0; pointer-events: none; }
.toolbar .choice label + label::before, nav.langs label + label::before {
    content: "·";
    margin: 0 var(--sp-2);
    color: var(--faint);
}
.toolbar .choice label span, nav.langs label {
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.toolbar .choice label span:hover, nav.langs label:hover { color: var(--ink); }
.toolbar .choice input:checked + span { color: var(--ink); border-bottom-color: var(--accent); }
.toolbar .choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.toolbar .count { margin-left: auto; color: var(--muted); font-variant: small-caps; letter-spacing: 0.06em; }

/* Les rayons. Chaque rangée : un intercalaire (13,5 rem, le plus haut des objets), la planche
   (--rail) et un intervalle (--sp-4). Les livres font 11 à 13 rem de haut, par demi-rem.
   Les volumes se suivent ; chaque genre commence par son intercalaire et continue au rayon suivant. */
.bookcase {
    --divider: 13.5rem;
    --plank: var(--sp-2);
    --rail: var(--sp-5);            /* planche + espace sous la planche */
    --row: calc(var(--divider) + var(--rail) + var(--sp-4));
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: var(--sp-1);
    min-height: var(--row);
    margin-top: var(--sp-4);
    background: repeating-linear-gradient(to bottom,
        transparent 0,
        transparent calc(var(--row) - var(--rail)),
        #8d6b4f calc(var(--row) - var(--rail)),
        var(--wood) calc(var(--row) - var(--rail) + var(--plank)),
        rgba(60, 40, 20, .18) calc(var(--row) - var(--rail) + var(--plank)),
        transparent calc(var(--row) - var(--rail) + var(--plank) + var(--sp-2)),
        transparent var(--row));
}
.cell {
    height: var(--row);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.cell.first { margin-left: var(--sp-5); }
.cell.first:first-child { margin-left: 0; }
.rail { height: var(--rail); }

/* Intercalaire : une fiche crème, plus haute que les livres, au nom du genre */
.divider {
    display: flex;
    justify-content: center;
    width: var(--sp-6);
    height: var(--divider);
    padding: var(--sp-3) 0;
    margin-right: var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
}
.divider-title {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: rotate(180deg);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: var(--fs-s);
    color: var(--ink);
    white-space: nowrap;
}
.divider-title .sub {
    margin-top: var(--sp-2);
    font-variant: normal;
    letter-spacing: 0;
    font-style: italic;
    font-size: var(--fs-xs);
    color: var(--muted);
}

/* Les volumes, vus de dos (hauteur et largeur fixées par build.py, sur la même grille) */
.spine {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0 var(--sp-2);
    border-radius: var(--radius) var(--radius) 1px 1px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Titre dans le sens de la lecture française : de bas en haut ; tous les signes (♭ compris)
   tournent avec le texte */
.spine-title {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: rotate(180deg);
    font-family: var(--display);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    line-height: 1.2;
    max-height: calc(100% - var(--sp-7));
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Étiquette de cote */
.cote {
    min-width: var(--sp-5);
    padding: 1px var(--sp-1);
    text-align: center;
    background: #fbf8f0;
    color: #3a3128;
    border-radius: 1px;
    font-family: var(--type);
    font-size: var(--fs-xxs);
    line-height: 1.4;
}

/* Volumes publiés : toile teintée, dorure, un filet en tête et en pied */
.spine.bound {
    --rule: rgba(227, 197, 122, .8);
    color: var(--gold);
    box-shadow: inset 2px 0 3px -1px rgba(255, 255, 255, .18), inset -3px 0 4px -2px rgba(0, 0, 0, .35);
    background-image:
        linear-gradient(to bottom, transparent var(--sp-2), var(--rule) var(--sp-2), var(--rule) calc(var(--sp-2) + 1px), transparent calc(var(--sp-2) + 1px)),
        linear-gradient(to top, transparent var(--sp-6), var(--rule) var(--sp-6), var(--rule) calc(var(--sp-6) + 1px), transparent calc(var(--sp-6) + 1px));
}
.spine.bound.c0 { background-color: #742a2a; }   /* bordeaux */
.spine.bound.c1 { background-color: #2f4f40; }   /* vert */
.spine.bound.c2 { background-color: #2a3953; }   /* bleu nuit */
.spine.bound.c3 { background-color: #6b4a2c; }   /* havane */
.spine.bound.c4 { background-color: #50304b; }   /* prune */
.spine.bound.c5 { background-color: #3f4343; }   /* ardoise */
.spine.bound:hover {
    transform: translateY(calc(-1 * var(--sp-3)));
    box-shadow: inset 2px 0 3px -1px rgba(255, 255, 255, .18), inset -3px 0 4px -2px rgba(0, 0, 0, .35),
                0 10px 16px -8px rgba(40, 25, 10, .5);
}

/* Volumes en préparation : cartonnage clair, titre à peine marqué */
.spine.unbound {
    background: #ebe3d4;
    color: #a89c89;
    box-shadow: inset 0 0 0 1px rgba(120, 95, 60, .12);
    cursor: default;
}
.spine.unbound .cote { opacity: 0.75; }
@media (prefers-color-scheme: dark) {
    .spine.unbound { background: #26211b; color: #6a6053; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
    .spine.unbound .cote { opacity: 0.3; }
}

@media (max-width: 34rem) {
    main, header.site, footer.site { padding: 0 var(--sp-4); }
    .bookcase { --row: calc((var(--divider) + var(--rail)) * 0.875 + var(--sp-3)); }
    .cell.first { margin-left: var(--sp-4); }
    .spine, .divider { zoom: 0.875; }
}

/* ── La fiche d’une œuvre ────────────────────────────────────────────── */

.back { margin: var(--sp-5) 0 0; font-size: var(--fs-s); }
.back a { text-decoration: none; }

h1.work-title {
    font-family: var(--display);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--fs-xxl);
    line-height: 1.1;
    margin: var(--sp-4) 0 var(--sp-6);
}
h1.work-title .composer {
    display: block;
    margin-top: var(--sp-1);
    font-family: var(--text);
    text-transform: none;
    font-style: italic;
    font-size: var(--fs-l);
    letter-spacing: 0;
    color: var(--muted);
}

/* Deux colonnes, un seul axe : à gauche la couverture et le sommaire (qui reste visible),
   à droite la fiche, puis le texte, alignés sur le même bord. */
.work {
    display: grid;
    grid-template-columns: 12rem minmax(0, var(--measure));
    gap: var(--sp-6);
    align-items: stretch;
}
.side .cover img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(40, 25, 10, .12), 0 10px 24px -12px rgba(40, 25, 10, .4);
    transition: transform .2s ease;
}
.side a.cover:hover img { transform: translateY(calc(-1 * var(--sp-1))); }

/* Sommaire */
.toc {
    display: none;
    position: sticky;
    top: var(--sp-5);
    margin-top: var(--sp-6);
    font-size: var(--fs-s);
    line-height: 1.4;
}
.toc-title { margin: 0 0 var(--sp-2); font-variant: small-caps; letter-spacing: 0.06em; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 var(--sp-2); }
.toc ul ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-3); border-left: 1px solid var(--line); }
.toc ul ul li { margin-bottom: var(--sp-1); }
.toc a { color: var(--ink); text-decoration: none; }
.toc ul ul a { color: var(--muted); }
.toc a:hover { color: var(--accent); }

/* La fiche de catalogue, dactylographiée, avec son trou pour la tringle du tiroir */
.card {
    position: relative;
    display: grid;
    grid-template-columns: var(--sp-7) 1fr;
    gap: 0 var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-7) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(40, 25, 10, .06);
    font-family: var(--type);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink);
}
.card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: var(--sp-4);
    width: var(--sp-3);
    height: var(--sp-3);
    margin-left: calc(-0.5 * var(--sp-3));
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.card .call { color: var(--muted); line-height: 1.4; }
.card .entry { margin-bottom: var(--sp-1); }
.card .para { text-indent: var(--sp-5); margin: 0 0 var(--sp-1); }
.card .tracing { text-indent: var(--sp-5); margin-top: var(--sp-3); color: var(--muted); }
.card a { color: inherit; }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
a.button {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: #fffdf8;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--fs-s);
    line-height: 1.4;
    letter-spacing: 0.02em;
    transition: filter .15s ease;
}
a.button.quiet { background: transparent; color: var(--accent); }
a.button:hover { filter: brightness(1.1); }
.note { color: var(--muted); font-style: italic; font-size: var(--fs-s); margin: var(--sp-3) 0 0; }

@media (max-width: 44rem) {
    .work { grid-template-columns: 1fr; gap: var(--sp-5); }
    .side .cover { display: block; max-width: 10rem; }
    .toc { display: none !important; }            /* sur téléphone, le texte suit directement */
    h1.work-title { font-size: calc(var(--fs-xxl) / 1.2); }
    .card { grid-template-columns: var(--sp-6) 1fr; padding-right: var(--sp-4); }
}

/* ── Préface et commentaires ─────────────────────────────────────────── */

.content h2, .content h3, #poeme { scroll-margin-top: var(--sp-5); }

/* Sélecteur de langue, sans JavaScript : même style que les options de rangement */
input[name="lang"] { position: absolute; opacity: 0; pointer-events: none; }
nav.langs {
    display: flex;
    margin: var(--sp-7) 0 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-s);
}
.content section[lang] { display: none; }
#lang-fr:checked ~ .main nav.langs label[for="lang-fr"],
#lang-en:checked ~ .main nav.langs label[for="lang-en"],
#lang-de:checked ~ .main nav.langs label[for="lang-de"] { color: var(--ink); border-bottom-color: var(--accent); }
#lang-fr:checked ~ .main .content section[lang="fr"],
#lang-en:checked ~ .main .content section[lang="en"],
#lang-de:checked ~ .main .content section[lang="de"],
#lang-fr:checked ~ .side .toc[lang="fr"],
#lang-en:checked ~ .side .toc[lang="en"],
#lang-de:checked ~ .side .toc[lang="de"] { display: block; }
/* traduction du poème : celle de la langue choisie (toutes en français) */
#lang-en:checked ~ .main .translations [lang="de"],
#lang-de:checked ~ .main .translations [lang="en"] { display: none; }

.content h2 {
    font-weight: normal;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: var(--fs-xl);
    line-height: 1.3;
    margin: var(--sp-7) 0 var(--sp-4);
}
.content > section:first-of-type > h2:first-child { margin-top: var(--sp-5); }
.content h3 { font-weight: normal; font-style: italic; font-size: var(--fs-l); line-height: 1.3; margin: var(--sp-6) 0 var(--sp-2); }
.content p { text-align: justify; hyphens: auto; margin: 0 0 var(--sp-3); }
.content blockquote { font-style: italic; margin: var(--sp-4) 0 var(--sp-1); padding-left: var(--sp-4); border-left: 2px solid var(--line); }
.content blockquote + p { text-align: right; color: var(--muted); }
.content .signature { text-align: right; font-style: italic; margin-top: var(--sp-5); }
.content ul { padding-left: var(--sp-5); }
.content li { margin-bottom: var(--sp-2); }

dl.sources, dl.signs { display: grid; grid-template-columns: var(--sp-6) 1fr; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); }
dl.sources dt { font-weight: bold; }
dl.sources dd, dl.signs dd { margin: 0; }
span.slur {
    display: inline-block;
    width: var(--sp-5);
    height: var(--sp-2);
    border-top: 1.5px dotted var(--ink);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    vertical-align: middle;
}
p.abbreviations { font-style: italic; font-size: var(--fs-s); color: var(--muted); text-align: left; }
table.remarks { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
table.remarks th, table.remarks td { text-align: left; vertical-align: baseline; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--line); }
table.remarks th { white-space: nowrap; }
table.remarks td.part { white-space: nowrap; color: var(--muted); }

/* Poème */
section.poem { text-align: center; margin: var(--sp-7) 0; padding: var(--sp-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.poem h2 { font-family: var(--display); font-variant: normal; font-size: var(--fs-xl); letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 var(--sp-1); }
section.poem .author { font-style: italic; text-align: center; margin: 0 0 var(--sp-5); color: var(--muted); }
section.poem .original p { text-align: center; margin: 0 0 var(--sp-4); }
section.poem .translations { display: flex; gap: var(--sp-6); justify-content: center; margin-top: var(--sp-6); font-style: italic; font-size: var(--fs-s); color: var(--muted); }
section.poem .translations p { text-align: left; }
@media (max-width: 34rem) { section.poem .translations { flex-direction: column; gap: 0; } }

/* ── Animations ──────────────────────────────────────────────────────── */

/* D’une page à l’autre : fondu, et le dos du volume devient la couverture */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }

@media (prefers-reduced-motion: no-preference) {
    /* À l’ouverture : les volumes prennent place sur les rayons, l’un après l’autre */
    .cell {                                   /* la case bouge, le dos reste libre pour le survol */
        animation: shelve .55s cubic-bezier(.2, .8, .25, 1) both;
        animation-delay: calc(var(--i, 0) * 22ms);
    }
    .bookcase.instant .cell { animation: none; }
    @keyframes shelve {
        from { opacity: 0; transform: translateY(var(--sp-5)); }
        to   { opacity: 1; transform: none; }
    }

    /* On tire un volume relié du rayon ; les autres bougent à peine */
    .spine.bound { transition: transform .3s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease; }
    .spine.bound:hover { transform: translateY(calc(-1 * var(--sp-3))) rotate(-2.5deg); transform-origin: bottom left; }
    .spine.unbound { transition: transform .25s ease; }
    .spine.unbound:hover { transform: translateY(calc(-1 * var(--sp-1))); }

    /* Page d’une œuvre : la fiche sort du tiroir (la couverture arrive du rayon, par la transition) */
    .main > .card { animation: drawer .6s .12s cubic-bezier(.2, .8, .25, 1) both; }
    .main > .actions, .main > .note { animation: fade .5s .3s ease both; }
    @keyframes drawer {
        from { opacity: 0; transform: translateY(var(--sp-4)); }
        to   { opacity: 1; transform: none; }
    }

    /* Changement de langue : le texte apparaît en fondu */
    .content section { animation: fade .45s ease both; }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}