/* CLAIRVAUX · la feuille commune. Encre, chaux, or des chandelles ; le cyan TRUvector ne sert
   qu'à la couche d'ADAPTATION (ce qui n'est pas de Hugo). */
:root {
  --encre: #07060a;
  --encre-2: #121017;
  --voile: rgba(9, 8, 12, 0.78);
  --papier: #ece4d3;
  --papier-2: #b9b0a0;
  --gris: #8a8478;
  --or: #e0ad4f;
  --or-vif: #ffc86a;
  --braise: #ff8a3d;
  --cendre: #7f8da3;
  --adapt: #3fe0f5;          /* la couche d'adaptation (TRUvector) */
  --adapt-doux: rgba(63, 224, 245, 0.14);
  --violet: #9b7bff;
  --trait: rgba(236, 228, 211, 0.16);
  --f-hugo: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --f-titre: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --f-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-marque: "Orbitron", "Share Tech Mono", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--encre); color: var(--papier); }
body { font-family: var(--f-hugo); font-size: 19px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--or); }
button { font: inherit; color: inherit; }
.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: 16px; top: 16px; z-index: 99; background: var(--papier); color: var(--encre); padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 3px; }

/* boutons */
.btn, .btn-sec {
  display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; text-decoration: none;
  font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.8em 1.3em; border-radius: 2px; min-height: 44px;
}
.btn { background: var(--or); color: var(--encre); border: 1px solid var(--or); }
.btn:hover { background: var(--or-vif); }
.btn-sec { background: transparent; color: var(--papier); border: 1px solid var(--trait); }
.btn-sec:hover { border-color: var(--or); color: var(--or-vif); }
.btn[disabled], .btn-sec[disabled] { opacity: 0.4; cursor: default; }

.marque { font-family: var(--f-titre); letter-spacing: 0.32em; text-transform: uppercase; color: var(--papier); text-decoration: none; font-weight: 600; }
.marque small { font-family: var(--f-hugo); font-style: italic; letter-spacing: 0.02em; text-transform: none; color: var(--papier-2); font-weight: 400; margin-left: 0.6em; }
.truvector { font-family: var(--f-marque); font-size: 11px; letter-spacing: 0.24em; color: var(--adapt); text-decoration: none; }
.truvector b { color: var(--violet); font-weight: 700; }

/* la couche d'adaptation : jamais dans la typographie de Hugo */
.adaptation { font-family: var(--f-mono); font-size: 14px; line-height: 1.5; color: #bfeff6; border-left: 2px solid var(--adapt); background: var(--adapt-doux); padding: 0.6em 0.9em; margin: 0.9em 0; }
.adaptation::before { content: "ADAPTATION · "; color: var(--adapt); letter-spacing: 0.12em; }

/* le texte de Hugo */
.hugo p { margin: 0 0 0.85em; text-wrap: pretty; hyphens: auto; }
.hugo p.dialogue { padding-left: 1.2em; text-indent: -1.2em; }
.hugo .moralite { all: unset; cursor: pointer; color: var(--or-vif); background: linear-gradient(transparent 62%, rgba(224, 173, 79, 0.22) 62%); border-radius: 1px; transition: color 0.3s, background 0.3s; }
.hugo .moralite:hover, .hugo .moralite:focus-visible { background: rgba(224, 173, 79, 0.3); outline: none; }
.hugo .moralite.prise { cursor: default; color: var(--papier); background: none; text-decoration: underline 1px var(--or); text-underline-offset: 4px; }
.hugo .moralite::after { content: " ✦"; font-size: 0.7em; color: var(--or); }
.hugo .moralite.prise::after { content: " ✓"; color: var(--or); }
.hugo sup { font-family: var(--f-mono); font-size: 0.6em; color: var(--gris); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }