/* ===== Polices (auto-hébergées, sous-ensemble latin) ===== */
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-var.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-italic-var.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Alegreya SC";
  src: url("../fonts/alegreya-sc-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("../fonts/cinzel-decorative-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ===== Jetons ===== */
:root {
  --basalte: #1a1115;       /* fond : roche calcinée, tirée des ombres de la couverture */
  --basalte-2: #251820;
  --basalte-3: #33222b;
  --cendre: #ecdfcd;        /* texte sur fond sombre */
  --cendre-2: #bba998;
  --or: #d8b066;            /* cercle de runes */
  --braise: #e57733;        /* lave */
  --corruption: #a47ad9;    /* brumes de la Faille */
  --parchemin: #dcc79f;
  --parchemin-2: #cdb486;
  --encre: #2a1c15;
  --encre-2: #5b4535;

  --f-texte: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-titre: "Alegreya SC", "Alegreya", Georgia, serif;
  --f-marque: "Cinzel Decorative", "Alegreya SC", Georgia, serif;
  --marque-taille: 1;       /* facteur de taille propre à la police de titre */
  --marque-approche: .03em;

  --mesure: 36rem;
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(4rem + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  background: var(--basalte);
  color: var(--cendre);
  font-family: var(--f-texte);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h2 {
  font-family: var(--f-titre);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--or);
  margin-bottom: 0.9em;
  text-wrap: balance;
}
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--or); color: var(--basalte); padding: .5rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ===== En-tête ===== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem var(--gouttiere);
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  background: rgba(26, 17, 21, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 176, 102, .18);
}
.brand {
  font-family: var(--f-marque); font-weight: 700; font-size: 1.3rem; line-height: 1;
  color: var(--or); text-decoration: none; letter-spacing: var(--marque-approche);
}
.site-header nav { margin-left: auto; }
.site-header ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.site-header nav a {
  text-decoration: none; color: var(--cendre-2); font-size: .98rem;
}
.site-header nav a:hover { color: var(--cendre); }
.header-cta {
  font-size: .95rem; text-decoration: none; color: var(--basalte);
  background: var(--or); padding: .4rem .9rem; border-radius: 2px; white-space: nowrap;
}
.header-cta:hover { background: var(--cendre); }
@media (max-width: 860px) {
  .site-header nav { display: none; }
  .header-cta { margin-left: auto; }
}

/* ===== Boutons ===== */
.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.btn {
  display: inline-block; font-family: var(--f-texte); font-size: 1.05rem; font-weight: 600;
  text-decoration: none; padding: .8rem 1.4rem; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; line-height: 1.2;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--braise); color: #1b0d07; }
.btn-primary:hover { background: #f08d4e; }
.btn-ghost { border-color: rgba(236, 223, 205, .45); color: var(--cendre); }
.btn-ghost:hover { border-color: var(--or); color: var(--or); }

/* ===== Accroche ===== */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100svh - 3.4rem);
  position: relative;
}
.hero-art { position: relative; overflow: hidden; }
.hero-art img { width: 100%; height: 62svh; object-fit: cover; object-position: 50% 30%; }
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,17,21,0) 45%, var(--basalte) 98%);
}
.hero-text {
  position: relative; z-index: 1;
  padding: 0 var(--gouttiere) var(--section);
  margin-top: -5rem;
  max-width: 40rem;
}
.wordmark {
  font-family: var(--f-marque);
  font-weight: 700;
  font-size: calc(var(--marque-taille) * clamp(3.4rem, 2.2rem + 6.4vw, 7.4rem));
  line-height: .95;
  letter-spacing: var(--marque-approche);
  color: var(--or);
  text-shadow: 0 0 40px rgba(229, 119, 51, .35);
  margin-left: -.04em;
}
.hero-sub {
  font-style: italic; font-size: 1.15em; color: var(--cendre);
  margin: 1.2rem 0 .3rem; max-width: 26rem; line-height: 1.4;
}
.hero-author { font-family: var(--f-titre); font-size: 1.2rem; color: var(--or); letter-spacing: .03em; }
.hero-pitch {
  margin: 2rem 0 0; padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--braise);
  font-size: 1.12em; line-height: 1.55; color: var(--cendre);
  max-width: 30rem;
}
.hero-pitch p { margin: 0; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
  .hero-art { grid-column: 2; grid-row: 1; height: 100%; }
  .hero-art img { height: 100%; min-height: calc(100svh - 3.4rem); object-position: 50% 35%; }
  .hero-art::after {
    background:
      linear-gradient(to right, var(--basalte) 0%, rgba(26,17,21,.55) 14%, rgba(26,17,21,0) 38%),
      linear-gradient(to bottom, rgba(26,17,21,0) 78%, var(--basalte) 100%);
  }
  .hero-text { grid-column: 1; grid-row: 1; margin-top: 0; padding: 4rem 2rem 4rem var(--gouttiere); justify-self: end; }
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark { animation: embrasement 1.8s ease-out both; }
  .hero-art img { animation: apparition 2.4s ease-out both; }
}
@keyframes embrasement {
  from { opacity: 0; text-shadow: 0 0 0 rgba(229,119,51,0); letter-spacing: .12em; }
  to   { opacity: 1; }
}
@keyframes apparition { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ===== L'univers ===== */
.univers { padding: var(--section) 0 0; }
.prose { max-width: var(--mesure); margin: 0 auto; padding: 0 var(--gouttiere); box-sizing: content-box; }
.prose p { hyphens: auto; }
.lettrine::first-letter {
  font-family: var(--f-marque); font-weight: 700; color: var(--braise);
  float: left; font-size: 3.6em; line-height: .85; margin: .06em .1em 0 0;
}
.bandeau { margin: var(--section) 0 0; position: relative; }
.bandeau img { width: 100%; height: clamp(18rem, 45vw, 36rem); object-fit: cover; }
.bandeau::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--basalte) 0%, rgba(26,17,21,0) 25%, rgba(26,17,21,0) 50%, rgba(26,17,21,.9) 100%);
}
.bandeau figcaption {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 5vw, 3.5rem);
  text-align: center; padding: 0 var(--gouttiere);
}
.devise {
  display: block; font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.3rem); line-height: 1.25; color: var(--cendre);
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}
.devise-source { display: block; margin-top: .6rem; color: var(--or); font-family: var(--f-titre); font-size: 1rem; }

/* ===== Surfaces parchemin ===== */
.parchemin {
  color-scheme: light;
  background-color: var(--parchemin);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,245,220,.45), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(120,80,40,.22), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(90,60,30,.25) 100%);
  color: var(--encre);
}
.parchemin h2 { color: var(--encre); }
.parchemin a { color: var(--encre); }
.parchemin :focus-visible { outline-color: var(--encre); }

/* ===== Le livre ===== */
.livre { padding: var(--section) var(--gouttiere); }
.livre-grid {
  display: grid; gap: clamp(3rem, 6vw, 6rem);
  max-width: 70rem; margin: 0 auto;
}
.livre-intro { max-width: var(--mesure); }
.livre-intro p { hyphens: auto; }
.citation {
  margin: 1.8rem 0; padding: 1.1rem 0; border-top: 1px solid rgba(42,28,21,.35); border-bottom: 1px solid rgba(42,28,21,.35);
  font-style: italic; font-size: 1.1em; line-height: 1.5; color: var(--encre);
}
.citation p { margin: 0; }
.sommaire h3 {
  font-family: var(--f-titre); font-size: 1.35rem; margin-bottom: 1rem; color: var(--encre-2);
}
.sommaire ol { list-style: none; margin: 0; padding: 0; columns: 1; }
.sommaire li {
  display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline;
  padding: .28rem 0; border-bottom: 1px dotted rgba(42,28,21,.3); break-inside: avoid;
  font-size: 1rem; line-height: 1.35;
}
.sommaire .num { font-family: var(--f-titre); color: #8a3b1c; font-size: .95rem; }
@media (min-width: 640px) { .sommaire ol { columns: 2; column-gap: 2.5rem; } }
@media (min-width: 1000px) {
  .livre-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sommaire ol { columns: 1; }
  .sommaire { padding-top: .4rem; }
}

/* ===== En-têtes de section ===== */
.section-head { max-width: 76rem; margin: 0 auto 3.5rem; padding: 0 var(--gouttiere); }
.section-head > * { max-width: var(--mesure); }
.chapeau { font-size: 1.12em; color: var(--cendre-2); line-height: 1.55; }

/* ===== Guildes ===== */
.guildes { padding: var(--section) 0; }
.guildes-liste {
  list-style: none; margin: 0 auto; padding: 0 var(--gouttiere);
  max-width: 76rem;
  display: grid; gap: 2.2rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.guilde img {
  width: 8.5rem; height: 9.5rem; object-fit: cover; object-position: center;
  border-radius: 2px; margin-bottom: 1.1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.guilde { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1.1rem; align-items: start; }
.guilde img { grid-row: 1 / span 3; width: 5.5rem; height: 6.2rem; margin-bottom: 0; }
@media (min-width: 640px) {
  .guilde { display: block; }
  .guilde img { width: 8.5rem; height: 9.5rem; margin-bottom: 1.1rem; }
}
.guilde h3 { font-family: var(--f-titre); font-size: 1.3rem; line-height: 1.2; color: var(--cendre); }
.guilde .domaine { font-style: italic; color: var(--or); margin: .2rem 0 .6rem; font-size: .98rem; }
.guilde p:last-child { color: var(--cendre-2); font-size: .98rem; line-height: 1.55; margin: 0; }

/* ===== Galerie ===== */
.galerie { padding: var(--section) 0; background: var(--basalte-2); }
.galerie-titre {
  font-family: var(--f-titre); font-size: 1.4rem; color: var(--or);
  max-width: 76rem; margin: 0 auto 1.2rem; padding: 0 var(--gouttiere);
}
.galerie-grille {
  list-style: none; margin: 0 auto 4rem; padding: 0 var(--gouttiere); max-width: 76rem;
  columns: 2 12rem; column-gap: 1rem;
}
.galerie-grille li { break-inside: avoid; margin-bottom: 1rem; }
.galerie-grille a { display: block; position: relative; overflow: hidden; border-radius: 2px; background: var(--basalte-3); }
.galerie-grille img { width: 100%; transition: transform .5s ease, filter .3s; }
.galerie-grille a:hover img { transform: scale(1.03); filter: brightness(1.08); }
@media (min-width: 900px) { .galerie-grille { columns: 3; } }

/* Visionneuse */
.lightbox {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(12, 7, 9, .96); color: var(--cendre);
}
.lightbox::backdrop { background: rgba(12,7,9,.9); }
.lightbox figure {
  margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 4rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.lightbox img { max-height: calc(100% - 3rem); max-width: 100%; width: auto; object-fit: contain; }
.lightbox figcaption { margin-top: 1rem; font-family: var(--f-titre); color: var(--or); font-size: 1.15rem; text-align: center; }
.lb-btn {
  position: absolute; background: none; border: 0; color: var(--cendre); cursor: pointer;
  font-size: 2.6rem; line-height: 1; width: 3.2rem; height: 3.2rem; font-family: var(--f-texte);
}
.lb-btn:hover { color: var(--or); }
.lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.lb-close { right: .75rem; top: calc(.5rem + env(safe-area-inset-top, 0px)); }
@media (max-width: 600px) {
  .lightbox figure { padding-left: .75rem; padding-right: .75rem; }
  .lb-prev, .lb-next { top: auto; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); transform: none; }
}

/* ===== Auteur ===== */
.auteur { padding: var(--section) var(--gouttiere); }
.auteur-inner { max-width: var(--mesure); margin: 0 auto; }
.mot { margin: 0; font-size: 1.12em; line-height: 1.7; }
.mot p:first-child::first-letter {
  font-family: var(--f-marque); font-weight: 700; color: #8a3b1c;
  float: left; font-size: 3.4em; line-height: .85; margin: .06em .1em 0 0;
}
.signature { font-family: var(--f-marque); font-weight: 700; font-size: 1.5rem; letter-spacing: var(--marque-approche); margin: 1.6rem 0 .2rem; color: var(--encre); }
.editeur { color: var(--encre-2); font-style: italic; margin: 0; }

/* ===== Acheter ===== */
.acheter { padding: var(--section) var(--gouttiere); background:
  radial-gradient(ellipse at 30% 50%, rgba(229,119,51,.14), transparent 60%), var(--basalte); }
.acheter-inner {
  max-width: 60rem; margin: 0 auto;
  display: grid; gap: 2.5rem; align-items: center;
}
.acheter-cover { width: 12rem; box-shadow: 0 25px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(216,176,102,.25); }
.acheter-infos { color: var(--cendre); font-size: 1.08em; max-width: 30rem; }
.acheter .actions { margin-top: 1.6rem; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.btn .bientot { display: block; font-weight: 400; font-style: italic; font-size: .82rem; margin-top: .2rem; }
@media (min-width: 700px) { .acheter-inner { grid-template-columns: auto 1fr; gap: 4rem; } .acheter-cover { width: 15rem; } }

/* ===== Contact ===== */
.contact { padding: var(--section) var(--gouttiere); border-top: 1px solid rgba(216,176,102,.15); }
.contact-inner { max-width: var(--mesure); margin: 0 auto; }
.contact-inner > p { color: var(--cendre-2); }
.form { margin-top: 2rem; }
.champ { margin-bottom: 1.3rem; }
.champ label { display: block; margin-bottom: .35rem; font-size: .98rem; color: var(--cendre); }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cendre);
  background: var(--basalte-2); border: 1px solid #5a4450; border-radius: 2px; padding: .7rem .8rem;
}
.champ input:focus, .champ textarea:focus { border-color: var(--or); outline: none; box-shadow: 0 0 0 2px rgba(216,176,102,.35); }
.champ [aria-invalid="true"] { border-color: #e07a6a; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { font-size: .9rem; color: var(--cendre-2); }
.form-statut { margin-top: 1rem; min-height: 1.5em; }
.form-statut.ok { color: #b9d59a; }
.form-statut.erreur { color: #f0a090; }

/* ===== Pied ===== */
.site-footer {
  padding: 2.5rem var(--gouttiere) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(216,176,102,.15);
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; font-size: .92rem; color: var(--cendre-2);
}
.site-footer p { margin: 0; }

/* ===== Marqueurs de maquette (à retirer à la mise en ligne) ===== */
[data-todo] { outline: 1px dashed rgba(164,122,217,.8); outline-offset: 6px; position: relative; }
[data-todo]::after {
  content: "À valider : " attr(data-todo);
  position: absolute; right: 0; top: -1.9rem; white-space: nowrap;
  font: 600 .72rem/1 var(--f-texte); color: #1a1115; background: var(--corruption);
  padding: .3rem .5rem; border-radius: 2px; pointer-events: none;
}
.btn[data-todo]::after, .site-footer [data-todo]::after { top: auto; bottom: -1.9rem; }

/* ===== Mentions légales (section finale) ===== */
.legal {
  padding: calc(var(--section) * .75) var(--gouttiere);
  border-top: 1px solid rgba(216,176,102,.15);
  font-size: .9rem; line-height: 1.6; color: var(--cendre-2);
}
.legal > h2, .legal-cols { max-width: 70rem; margin-left: auto; margin-right: auto; }
.legal > h2 { font-size: 1.6rem; margin-bottom: 1.6rem; }
.legal-cols { display: grid; gap: 0 3.5rem; }
.legal h3 { font-family: var(--f-titre); font-size: 1.08rem; color: var(--cendre); margin: 1.6rem 0 .5rem; }
.legal-cols > div > h3:first-child { margin-top: 0; }
.legal p { max-width: 38rem; }
.legal a { color: var(--or); }
.legal .maj { font-style: italic; margin-top: 1.6rem; }
@media (min-width: 900px) { .legal-cols { grid-template-columns: 1fr 1fr; } .legal-cols > div + div > h3:first-child { margin-top: 0; } }
@media (max-width: 899px) { .legal-cols > div + div > h3:first-child { margin-top: 1.6rem; } }

/* ===== Effets visuels ===== */
/* Braises de l'accroche (canvas ajouté par le script) */
.braises { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Apparition au défilement : uniquement si le script tourne et si le visiteur accepte les animations */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.visible { opacity: 1; transform: none; }

  .guilde img { transition: transform .35s ease, box-shadow .35s ease; }
  .guilde:hover img { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.55), 0 0 24px rgba(216,176,102,.3); }

  .btn-primary { transition: background-color .15s, box-shadow .3s; }
  .btn-primary:hover { box-shadow: 0 0 22px rgba(229,119,51,.45); }

  .devise { transition: text-shadow 1.2s ease; }
  .bandeau.visible .devise { text-shadow: 0 2px 18px rgba(0,0,0,.8), 0 0 30px rgba(229,119,51,.35); }
}