:root {
  --encre: #0a1014;
  --encre-2: #0f171d;
  --encre-3: #131d24;
  --trait: #1c262c;
  --lune: #d8e1e3;
  --demi: #91a0a3;
  --sourd: #5f6e71;
  --rouge: #b04a45;
  --vert: #79b294;
  --vert-sombre: #3d5c4d;
  --serif-titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --serif-texte: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--lune);
  font-family: var(--serif-texte);
  font-size: 1.15rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #24343a; color: var(--lune); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--demi); outline-offset: 4px; }

/* ——— entête ——— */

.entete {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.5rem;
}
.entete .marque {
  font-family: var(--serif-titre); font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 1rem; text-decoration: none;
}
.entete nav { display: flex; gap: 1.6rem; }
.entete nav a {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sourd); text-decoration: none;
}
.entete nav a:hover, .entete nav a.actif { color: var(--lune); }

/* ——— corps ——— */

main { max-width: 34.5rem; margin: 0 auto; padding: 3rem 1.5rem 6rem; }

.seuil-page {
  text-align: center;
  padding: 5rem 1.5rem 4rem;
}
.seuil-page .sur-titre {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sourd); margin: 0 0 2rem;
}
.seuil-page h1 {
  font-family: var(--serif-titre); font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0; line-height: 1.05; text-indent: 0.14em;
}
.seuil-page .sous-titre {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sourd); margin: 1.8rem 0 0;
}
.seuil-page .exergue {
  font-family: var(--serif-titre); font-style: italic; font-weight: 300;
  font-size: 1.2rem; color: var(--demi); margin: 2.2rem 0 0;
}

h2 {
  font-family: var(--serif-titre); font-weight: 400;
  font-size: 2rem; line-height: 1.2; margin: 0 0 1.8rem;
  text-wrap: balance;
}
p { margin: 0 0 1.3rem; }
.note {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sourd);
}

/* ——— table des chapitres ——— */

.chapitres { list-style: none; margin: 2rem 0; padding: 0; }
.chapitres li { border-bottom: 1px solid var(--trait); }
.chapitres li:first-child { border-top: 1px solid var(--trait); }
.chapitres a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0.2rem; text-decoration: none;
}
.chapitres a:hover .c-titre { color: var(--demi); }
.c-no { font-family: var(--mono); font-weight: 300; font-size: 0.72rem; color: var(--sourd); min-width: 2.8rem; }
.c-titre { font-family: var(--serif-titre); font-size: 1.25rem; }
.c-acces {
  margin-left: auto; white-space: nowrap;
  font-family: var(--mono); font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sourd);
}
.c-acces.libre { color: var(--vert); }

/* ——— lecture ——— */

.lecture h1 {
  font-family: var(--serif-titre); font-weight: 400; font-style: italic;
  font-size: 2.1rem; line-height: 1.2; text-align: center;
  margin: 0 0 0.6rem; text-wrap: balance;
}
.lecture .ou {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sourd); text-align: center; margin: 0 0 3rem;
}
.prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0 0 1.5rem; }
.prose .num {
  font-family: var(--mono); font-weight: 300; font-size: 0.7rem;
  color: var(--sourd); margin-right: 0.6rem;
}
.suivant {
  display: flex; justify-content: space-between;
  margin-top: 4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--trait);
}
.suivant a {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--demi); text-decoration: none;
}
.suivant a:hover { color: var(--lune); }

/* ——— formulaires, boutons ——— */

.champ {
  display: block; width: 100%;
  background: var(--encre-2); border: 1px solid var(--trait);
  color: var(--lune); font-family: var(--serif-texte); font-size: 1.1rem;
  padding: 0.85rem 1rem; margin: 0 0 1rem;
}
.champ:focus { outline: none; border-color: #2c3a42; }
.champ::placeholder { color: var(--sourd); opacity: 1; }

.bouton {
  display: inline-block;
  background: none; cursor: pointer;
  border: 1px solid var(--vert-sombre);
  color: var(--vert);
  font-family: var(--mono); font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bouton:hover { border-color: var(--vert); color: var(--lune); }
.bouton.discret { border-color: var(--trait); color: var(--demi); }
.bouton.discret:hover { border-color: var(--sourd); }

.encart {
  border: 1px solid var(--trait); background: var(--encre-2);
  padding: 2rem;
  margin: 2.4rem 0;
  text-align: center;
}
.encart p:last-child { margin-bottom: 0; }
.avis { color: var(--demi); font-size: 1rem; }
.avis.alerte { color: var(--rouge); }

/* ——— pied ——— */

.pied {
  max-width: 34.5rem; margin: 0 auto; padding: 0 1.5rem 3rem;
  border-top: 1px solid var(--trait);
  padding-top: 2rem;
  text-align: center;
  color: var(--sourd); font-size: 0.92rem;
}
.pied .ornement { font-family: var(--serif-titre); color: var(--vert); letter-spacing: 0.6em; margin: 0 0 1.2rem; }

/* ——— la vitrine ——— */

main.large { max-width: 56rem; }
h2 a { text-decoration: none; }
h3 {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--demi); margin: 2.4rem 0 0.8rem;
}
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.couverture { display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
.couverture.attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; text-align: center;
  background: linear-gradient(180deg, var(--encre-3), var(--encre-2));
  border: 1px solid var(--trait);
}
.couverture .c-auteur, .couverture .c-maison, .couverture .c-attente {
  font-family: var(--mono); font-weight: 300;
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sourd);
}
.couverture .c-serie {
  font-family: var(--serif-titre); font-weight: 300;
  font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.couverture .c-titre-livre { font-family: var(--serif-titre); font-style: italic; font-size: 1.1rem; color: var(--vert); line-height: 1.3; }
.couverture .c-attente { color: var(--vert-sombre); margin-top: 1.5rem; }

.fiche-livre {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.8rem; align-items: start;
  margin: 3rem 0; padding: 2.4rem 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.fiche-livre h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.fiche-image { text-decoration: none; display: block; }
.fiche-livre .couverture.attente { gap: 0.5rem; padding: 0.8rem; overflow: hidden; }
.fiche-livre .couverture .c-serie { font-size: 0.7rem; letter-spacing: 0.08em; }
.fiche-livre .couverture .c-titre-livre { font-size: 0.75rem; }
.fiche-livre .couverture .c-maison { font-size: 0.45rem; }
.fiche-livre .couverture .c-auteur, .fiche-livre .couverture .c-attente { display: none; }
.maison { margin: 2.4rem 0; }

.livre-tete { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.livre-tete h1 {
  font-family: var(--serif-titre); font-weight: 400; font-style: italic;
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; margin: 0 0 0.6rem; text-wrap: balance;
}
.livre-tete .par { font-family: var(--serif-titre); font-size: 1.2rem; color: var(--demi); margin-bottom: 2rem; }
.quatrieme p { margin-bottom: 1.1rem; }
.quatrieme p:first-child { font-family: var(--serif-titre); font-size: 1.4rem; line-height: 1.4; }

.achats, .extrait { max-width: 34.5rem; margin: 4rem auto 0; }
.formats { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.formats li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0.2rem; border-bottom: 1px solid var(--trait);
}
.formats li:first-child { border-top: 1px solid var(--trait); }
.formats .format { font-family: var(--serif-titre); font-size: 1.25rem; }
.formats .bouton { padding: 0.6rem 1.2rem; font-size: 0.64rem; }
.bouton.eteint, .bouton:disabled { border-color: var(--trait); color: var(--sourd); cursor: default; }

.lettre-form { display: flex; gap: 0.8rem; max-width: 26rem; margin: 0 auto 1rem; }
.lettre-form .champ { margin: 0; }
.champ:disabled { opacity: 0.6; }

.case {
  font-family: var(--mono); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--rouge); border: 1px dashed var(--rouge); padding: 0.1rem 0.5rem; white-space: nowrap;
}
.mentions p { font-size: 1.02rem; }
.liens-pied a { color: var(--demi); text-decoration: none; font-family: var(--mono); font-weight: 300; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; }
.liens-pied a:hover { color: var(--lune); }

/* ——— le téléphone ——— */

@media (max-width: 40rem) {
  body { font-size: 1.08rem; }
  .entete { flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.2rem 1rem; }
  .entete nav { gap: 1.2rem; }
  main { padding: 2rem 1rem 4rem; }
  .seuil-page { padding: 3rem 1rem 2.5rem; }
  .seuil-page h1 { font-size: 9vw; letter-spacing: 0.08em; text-indent: 0.08em; }
  .livre-tete { grid-template-columns: 1fr; gap: 2rem; }
  .livre-image { max-width: 15rem; margin: 0 auto; width: 100%; }
  .livre-tete .livre-texte { text-align: left; }
  .fiche-livre { grid-template-columns: 6.5rem 1fr; gap: 1.2rem; }
  .encart { padding: 1.4rem 1rem; }
  .lettre-form { flex-direction: column; }
  .prose p { text-align: left; }
  .case { white-space: normal; }
}