/* ============================================================
   Éditions des Nioches - pages /editions/
   ------------------------------------------------------------
   Reprend le prototype validé (docs/prototypes/editions-nioches.html),
   une page par sujet. S'appuie sur /legal.css pour les variables du
   site (--ink, --paper, --serif = Fraunces...), lues par l'en-tête et
   le pied de page injectés par /nav.js. Thème clair uniquement.
   Polices : Fraunces (titres, SOFT 0), Source Serif 4 (texte),
   Source Sans 3 (corps), JetBrains Mono (repères).
   ============================================================ */
:root {
  --papier: #f6f4ee; --encre: #0a0a0a; --encre-2: #3b3a36; --encre-3: #6d6a62;
  --filet: #d9d5ca; --surface: #efece4; --saumon: #e3907a; --saumon-encre: #7a3424;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

body { background: var(--papier); color: var(--encre); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6; font-feature-settings: normal; }
.ed { max-width: 1120px; margin-inline: auto; }
.ed h1, .ed h2 { font-family: var(--display); font-variation-settings: "SOFT" 0; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; line-height: 1.06; }
.ed h1 em, .ed h2 em { font-style: italic; font-variation-settings: "SOFT" 0; }
.ed h3 { font-family: var(--texte); font-weight: 600; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; }
.ed a { color: inherit; text-underline-offset: 3px; }
.ed a:focus-visible, .ed button:focus-visible { outline: 2px solid var(--saumon); outline-offset: 3px; }
.label { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.lead { font-family: var(--texte); font-style: italic; font-size: 1.3rem; line-height: 1.55; color: var(--encre-2); max-width: 34em; }

/* sous-navigation des Éditions */
.sous-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--filet); }
.sous-nav .marque { font-family: var(--display); font-variation-settings: "SOFT" 0; font-style: italic; font-size: 1.15rem; margin-right: 20px; text-decoration: none; }
.sous-nav a:not(.marque) { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; color: var(--encre-3); padding: 12px 10px; min-height: 44px; }
.sous-nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--encre); }

.page { padding-block: clamp(56px, 9vw, 100px); }
.page > * + * { margin-top: 28px; }
.titre-page { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 15em; }

/* présentation */
.manifeste h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.02; max-width: 12em; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.volet { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--encre); background: var(--surface); border: 1px solid var(--filet); border-radius: 2px; padding: clamp(28px, 4vw, 48px); min-height: 360px; }
.volet:nth-child(2) { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.volet:nth-child(2) .label, .volet:nth-child(2) .txt, .volet:nth-child(2) .une i { color: #c9c5bb; }
.volet b { font-family: var(--display); font-variation-settings: "SOFT" 0; font-weight: 400; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; }
.volet .txt { font-family: var(--texte); font-size: 1.15rem; line-height: 1.5; color: var(--encre-2); max-width: 24em; }
.volet .compte { color: var(--encre-3); }
.volet .une { font-family: var(--texte); font-size: 1.1rem; }
.volet .une i { display: block; font-size: .95rem; }
.volet .suite { margin-top: auto; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.volet:hover b { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.bandeau { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--encre); }
.bandeau-tete { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: baseline; }
.bandeau h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.lien { display: inline-flex; align-items: center; padding: 10px 0; min-height: 44px; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }
.noms { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 48px; }
.noms a { padding: 14px 0; min-height: 44px; text-decoration: none; color: var(--encre); display: grid; gap: 2px; }
.noms b { font-family: var(--display); font-variation-settings: "SOFT" 0; font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.noms span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } .volet { min-height: 0; } }

/* partitions */
.cat-wrap { overflow-x: auto; margin-top: 48px; }
.ed table { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ed th { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--encre); }
.ed td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--filet); vertical-align: baseline; }
.ed td.ref, .ed td.num { font-family: var(--mono); font-size: .82rem; color: var(--encre-2); }
.ed td.titre { font-family: var(--texte); font-size: 1.08rem; }
.ed td.titre small { display: block; font-size: .9rem; font-style: italic; color: var(--encre-3); }
.ed td a.extrait { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.note { font-size: .88rem; color: var(--encre-3); max-width: 46em; }
.licences { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0; border-top: 1px solid var(--filet); margin-top: 56px; }
.licences div { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--filet); display: grid; gap: 6px; }
.licences b { font-family: var(--texte); font-weight: 600; }
.licences span { color: var(--encre-2); font-size: .95rem; }

/* livres */
.livre { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 56px; }
.couv { aspect-ratio: 152 / 229; max-width: 100%; background: #f7f5f0; border: 1px solid var(--filet); display: flex; flex-direction: column; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); }
.couv .t { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; gap: 10px; }
.couv .t b { font-family: "Arial Narrow", var(--sans); font-stretch: condensed; font-weight: 700; font-size: 1.65rem; line-height: 1.02; letter-spacing: .02em; color: #1b1b1b; }
.couv .t small { font-family: var(--sans); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #555; }
.couv .b { height: 36%; background: #e3907a; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14%; }
.couv .b span { font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .16em; color: #2a1a14; }
.livre-txt { display: grid; gap: 22px; min-width: 0; }
.ed .livre-txt h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1; }
.livre-txt .sous { font-family: var(--texte); font-style: italic; color: var(--encre-2); font-size: 1.15rem; }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--filet); margin: 0; }
.fiche div { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--filet); }
.fiche dd { margin: 2px 0 0; font-family: var(--mono); font-size: .86rem; font-variant-numeric: tabular-nums; }
.fiche dt { margin: 0; }
.prix { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prix b { font-weight: 500; font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ed .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--encre); border-radius: 2px; cursor: pointer; background: none; color: var(--encre); }
.ed .bouton.plein { background: var(--encre); color: var(--papier); }

/* auteurs */
.auteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; margin-top: 56px; }
.auteur { display: grid; gap: 12px; align-content: start; }
.auteur .nom { font-family: var(--display); font-variation-settings: "SOFT" 0; font-size: 1.9rem; line-height: 1.1; }
.auteur p { color: var(--encre-2); max-width: 32em; }
.proposer { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--encre); display: grid; gap: 20px; max-width: 40em; }
.proposer h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
.mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mail code { font-family: var(--mono); font-size: 1rem; padding: 10px 14px; border: 1px solid var(--filet); user-select: all; overflow-wrap: anywhere; }

/* librairies et chœurs */
.pro-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--encre); }
.pro-duo article { display: grid; gap: 10px; align-content: start; }
.ed .pro-duo h2 { font-size: 1.8rem; line-height: 1.1; }
.pro-duo p:not(.label) { color: var(--encre-2); max-width: 30em; }

/* fiche d'une partition (pages écrites par outils/fiches-partitions.mjs) */
.partition .label a { text-decoration: none; }
.partition .label a:hover { text-decoration: underline; }
.part-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(24px, 5vw, 64px); align-items: start; }
.part-identite { display: grid; gap: 18px; min-width: 0; }
.part-identite .titre-page { margin: 0; }
.part-sous { font-family: var(--texte); font-style: italic; font-size: 1.2rem; color: var(--encre-2); margin: 0; }
.part-achat { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--filet); border-radius: 2px; padding: 24px; }
.part-achat .label, .part-achat .note { margin: 0; }
.part-prix { font-family: var(--mono); font-size: 1.6rem; font-variant-numeric: tabular-nums; margin: 0; }
.ed .bouton:disabled { cursor: default; background: none; color: var(--encre-3); border-color: var(--filet); }
.part-description { font-family: var(--texte); font-size: 1.1rem; color: var(--encre-2); max-width: 40em; display: grid; gap: 12px; }
.part-description p { margin: 0; }
.part-extrait { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--encre); display: grid; gap: 14px; }
.part-extrait-tete { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.ed .part-extrait h2, .ed .part-licence h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.lecteur-pdf { display: grid; gap: 16px; max-width: 820px; width: 100%; }
.lecteur-page { width: 100%; background: #fff; border: 1px solid var(--filet); box-shadow: 0 10px 28px -22px rgba(0, 0, 0, .5); }
.lecteur-page canvas { display: block; width: 100%; height: auto; }
.part-licence { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--filet); display: grid; gap: 14px; max-width: 42em; }
.part-licence p { margin: 0 0 10px; color: var(--encre-2); }
@media (max-width: 760px) { .part-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; } .part-achat { padding: 18px; } }

/* liste des partitions : prix et achat */
.ed td.prix-cel { font-family: var(--mono); font-size: .86rem; white-space: nowrap; }
.ed td.titre a { text-decoration: none; }
.ed td.titre a:hover { text-decoration: underline; }
.ed td .actes { display: flex; gap: 4px 16px; flex-wrap: wrap; align-items: center; }
.ed td .bientot { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); white-space: nowrap; }

/* fenêtre d'achat */
.achat { position: fixed; inset: 0; z-index: 2147483000; background: rgba(10, 10, 10, .55); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.achat-cadre { background: var(--papier); color: var(--encre); width: 100%; max-width: 480px; border-radius: 2px; padding: 24px; display: grid; gap: 10px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.achat-tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.achat-titre { font-family: var(--display); font-variation-settings: "SOFT" 0; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.achat-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--encre); min-width: 44px; min-height: 44px; }
.achat-montant { font-family: var(--mono); font-size: 1.2rem; margin: 0; }
.achat-cadre > div:not(.achat-tete) { display: grid; gap: 10px; }
.achat-cadre label { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.achat-cadre input[type="text"], .achat-cadre input[type="email"] { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid var(--encre-3); border-radius: 2px; background: #fff; color: var(--encre); width: 100%; }
.achat-optin { display: flex !important; grid-template-columns: none; gap: 10px; align-items: start; }
.achat-optin label { font-family: var(--sans); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--encre-2); }
.achat-optin input { margin-top: 4px; }
.achat-test { background: #fff3cd; padding: 8px 12px; font-size: .9rem; margin: 0; }
.achat-ok { font-family: var(--texte); font-size: 1.1rem; margin: 0; }
.achat-erreur { color: var(--saumon-encre); font-size: .95rem; margin: 0; min-height: 1.2em; }
.achat-retour { max-width: 1120px; margin: 16px auto; padding: 14px 16px; border: 1px solid var(--encre); background: var(--surface); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 760px) { .livre { grid-template-columns: minmax(0, 1fr); } .couv { max-width: 240px; } }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
@media (prefers-reduced-motion: no-preference) { .ed .bouton, .sous-nav a { transition: background .15s, color .15s, border-color .15s; } }