/* ---------- Réglages faciles à modifier ---------- */
@font-face {
  font-family: 'Editorial New';
  src: url('fonts/EditorialNew-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('fonts/HaasGrotDisp-55Roman.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #ffffff;
  --text: #0a0a0a;
  --font-serif: "Editorial New", serif;   /* titre */
  --font-sans: "Neue Haas Grotesk Display Pro", sans-serif;       /* le reste */
  --margin: clamp(10px, 1vw, 30px);
}
@media (prefers-color-scheme: dark) {
  /* supprime ce bloc si tu veux toujours un fond blanc */
  :root { --bg: #0a0a0a; --text: #ffffff; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  padding: var(--margin) var(--margin);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ececec;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Haut et bas de page ---------- */
header, footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* padding: 0 var(--margin); */
  height: auto;
  flex: none;
}
header { align-items: center; }
.name { font-family: var(--font-serif); font-size: 20px; }
/* footer { border-top: 1px solid currentColor; margin: 0 var(--margin); padding: 0; align-items: center; } */

/* ---------- Le « livre » ---------- */
.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--margin) 0; */
  margin: calc(var(--margin) * 2) 0;
  perspective: 2000px;
}
.book { line-height: 0; will-change: transform, opacity; }
#page { display: block; box-shadow: 0 0 0 1px rgba(128,128,128,.25); }

/* Zones cliquables gauche / droite */
.nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.nav.prev { left: 0;  cursor: w-resize; }
.nav.next { right: 0; cursor: e-resize; }
.nav[disabled] { cursor: default; pointer-events: none; }

@media (max-width: 600px) {
  .name { font-size: 22px; }
  footer a { display: none; }
}