/* ═══════════════════════════════════════════════════════════════════
   /glossaire/<notion> — la page d'une notion
   -------------------------------------------------------------------
   Feuille PARTAGÉE par toutes les pages de notion, et non inlinée dans
   chacune : elles sont générées par tools/gen-seo.mjs à partir de
   oeuvres/lexique.json, et dupliquer six kilooctets de CSS par page
   n'aurait servi qu'à les faire diverger.

   Une notion se LIT — c'est le seul endroit du site, avec la liseuse, où
   l'on tient quatre cents mots d'affilée. Le corps est donc en Spectral,
   la serif de lecture de la maison, et non en Inter qui est la police
   d'interface. La mesure est courte (62 caractères) pour la même raison.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#15100b;--surface:#1e1710;--text:#f3e9d4;
  --muted:#b7a888;--accent:#d5402f;--border:rgba(243,233,212,.13);
  --paper:#15100b;--paper-2:#1e1710;--card:#221a12;
  --ink:#f3e9d4;--ink-soft:#c7b599;
  --red:#d5402f;--red-deep:#e5644f;--red-text:#e5644f;--bright:#e5644f;
  --line-strong:rgba(243,233,212,.34);--hover:rgba(243,233,212,.05);
  --gold:#d8ad4c;--gold-deep:#bd8f38;--blue:#5c8aa3;--const:#9a8b72;
  --line:rgba(243,233,212,.13);--line-soft:rgba(243,233,212,.07);--ok:#7fa855;
  --f-ui:'Inter',system-ui,sans-serif;--f-serif:'Spectral',Georgia,serif;--f-hand:'Caveat',cursive;
  --candle:rgba(216,173,76,.18);
  --emphase:linear-gradient(150deg,#2c2117,#211a12,#1b150e);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);}
body{background:var(--bg);color:var(--text);font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

.nt{max-width:760px;margin:0 auto;
  padding:clamp(30px,4.5vh,52px) clamp(24px,5vw,56px) clamp(64px,10vh,104px);}

/* ── fil d'Ariane ── */
.nt-fil{font-family:var(--f-ui);font-size:.76rem;color:var(--muted);
  margin-bottom:26px;line-height:1.7;}
.nt-fil a{color:var(--muted);text-decoration:none;text-underline-offset:3px;}
.nt-fil a:hover{color:var(--gold);text-decoration:underline;}
.nt-fil span{color:var(--const);margin:0 7px;}

/* ── tête ── */
.nt-label{font-family:var(--f-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.nt-h1{font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(2rem,4.6vw,3rem);line-height:1.04;letter-spacing:-.03em;
  margin-bottom:10px;}
.nt-de{display:block;font-family:var(--f-serif);font-style:italic;
  font-weight:400;font-size:clamp(1rem,2vw,1.24rem);color:var(--gold);
  letter-spacing:0;margin-top:8px;}
.nt-chapo{font-family:var(--f-serif);font-size:1.14rem;line-height:1.7;
  color:var(--ink-soft);margin:22px 0 0;padding-left:18px;
  border-left:2px solid var(--gold-deep);}

/* ── le corps ── */
.nt-corps{margin-top:clamp(34px,5vh,52px);}
.nt-corps p{font-family:var(--f-serif);font-size:1.06rem;line-height:1.78;
  color:var(--text);margin-bottom:20px;}
.nt-corps p b{font-weight:600;}
.nt-corps p i{color:var(--ink-soft);}
/* La citation garde le filet de gauche : c'est la règle typographique de
   la maison, et la seule exception à « plus de filet latéral ». */
.nt-corps blockquote{font-family:var(--f-serif);font-style:italic;
  font-size:1.04rem;line-height:1.72;color:var(--ink-soft);
  margin:26px 0;padding:2px 0 2px 20px;border-left:3px solid var(--red);}
.nt-corps blockquote cite{display:block;margin-top:9px;font-style:normal;
  font-family:var(--f-ui);font-size:.8rem;color:var(--muted);}

/* ── l'appareil, en pied ── */
.nt-appareil{margin-top:clamp(44px,6vh,66px);display:grid;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;grid-template-columns:repeat(2,1fr);}
.nt-bloc{background:var(--surface);padding:22px 22px 24px;}
.nt-bloc--source{background:var(--emphase);position:relative;
  box-shadow:inset 0 0 0 1px rgba(216,173,76,.20);}
.nt-bloc--source::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 118%,var(--candle) 0%,transparent 62%);}
.nt-bloc>*{position:relative;z-index:1;}
.nt-bloc-t{font-family:var(--f-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:13px;}
.nt-bloc--source .nt-bloc-t{color:var(--gold);}
.nt-bloc p{font-size:.9rem;line-height:1.66;color:var(--ink-soft);}
.nt-liens{list-style:none;display:flex;flex-direction:column;gap:3px;}
/* Ces liens sont des entrées de LISTE, pas des liens en ligne dans une
   phrase : l'exception de WCAG 2.5.8 ne les couvre pas, et à la seule
   hauteur de ligne ils mesuraient 18 px. Le rembourrage vertical les porte
   au-delà des 24 px du critère AA. */
.nt-liens a{display:inline-block;padding:4px 0;
  font-size:.9rem;line-height:1.5;color:var(--gold);
  text-decoration:none;text-underline-offset:3px;}
.nt-liens a:hover{text-decoration:underline;}

/* ── les voisines ── */
.nt-voisines{margin-top:clamp(34px,5vh,50px);padding-top:26px;
  border-top:1px solid var(--border);}
.nt-puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;}
.nt-puces a{display:inline-flex;align-items:center;padding:8px 15px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-family:var(--f-ui);font-size:.84rem;color:var(--text);text-decoration:none;
  transition:border-color .18s,color .18s;}
.nt-puces a:hover{border-color:var(--gold);color:var(--gold);}

/* ── pied ── */
.nt-fin{margin-top:clamp(40px,6vh,60px);}
.nt-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 24px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--f-ui);font-size:14px;font-weight:600;text-decoration:none;
  transition:opacity .18s,transform .18s;}
.nt-btn:hover{opacity:.86;transform:translateY(-1px);}

@media(max-width:720px){
  .nt-appareil{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}