/* Calame — ce que le jeu et l'atelier partagent : le papier, l'encre, la lettre. */
:root {
  --encre: #2b2734;
  --encre-douce: rgba(var(--encre-rvb), 0.62);
  --encre-pale: rgba(var(--encre-rvb), 0.14);
  --papier-ton: #f3eee5;
  --papier-clair: #f8f4ec;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --lent: cubic-bezier(0.22, 0.8, 0.24, 1);
  --encre-rvb: 43, 39, 52;
  --papier-rvb: 243, 238, 229;
  --clair-rvb: 248, 244, 236;
  --ombre-rvb: 43, 39, 52;       /* ce qui assombrit toujours (vignette, ombres portées) */
  --feuille: #fbf8f2;
  --encre-fort: #45404f;
  --rouge: #9c4535;
  --rouge-fort: #6e2b20;
  --alerte: #b5513f;
  --alerte-texte: #7d3a2e;
  color-scheme: light;
}

/* La nuit : le papier devient sombre, l'encre devient claire (voir js/theme.js pour le jeu) */
:root[data-theme="nuit"] {
  --encre: #ece4d6;
  --encre-rvb: 236, 228, 214;
  --papier-ton: #17151c;
  --papier-clair: #1f1c25;
  --papier-rvb: 23, 21, 28;
  --clair-rvb: 33, 30, 39;
  --ombre-rvb: 0, 0, 0;
  --feuille: #232029;
  --encre-fort: #fffaf1;
  --rouge: #e9917c;
  --rouge-fort: #f6b9a8;
  --alerte: #d9826b;
  --alerte-texte: #f0b9a2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--papier-ton);
  color: var(--encre);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
::selection { background: rgba(var(--encre-rvb), 0.18); }

.papier {
  position: fixed; inset: 0;
  background-image: var(--papier);
  background-size: 512px 512px;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
  z-index: 40;
}
/* la nuit, le grain du papier se lit en clair (fibres de craie) */
:root[data-theme="nuit"] .papier { filter: invert(1); mix-blend-mode: screen; opacity: 0.32; }

/* Jour / Nuit : un disque mi-encre mi-papier */
.disque {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(90deg, #2b2734 50%, #f3eee5 50%);
  box-shadow: 0 0 0 1px rgba(var(--encre-rvb), 0.45);
  transition: transform 0.6s var(--lent);
}
:root[data-theme="nuit"] .disque { transform: rotate(180deg); }

.sur {
  margin: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
}

/* Menus : des petites capitales espacées, un chiffre romain en italique, un filet qui s'étire au survol. */
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.menu.horizontal { flex-direction: row; gap: 44px; justify-content: center; }
.menu button, .menu a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 16px;
  padding: 8px 0;
  background: none; border: 0;
  font-weight: 500; font-size: 14px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--lent), color 0.3s;
}
.menu .num {
  width: 22px;
  font-style: italic; font-weight: 400; font-size: 16px;
  letter-spacing: 0; text-transform: none;
  color: var(--encre-douce);
}
.menu button::after, .menu a::after {
  content: "";
  position: absolute; left: 38px; right: 0.34em; bottom: 3px;
  height: 1px; background: var(--encre);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--lent);
}
.menu.horizontal button::after { left: 0; }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { transform: translateX(6px); outline: none; }
.menu.horizontal button:hover, .menu.horizontal button:focus-visible { transform: translateY(-2px); }
.menu button:hover::after, .menu a:hover::after, .menu button:focus-visible::after, .menu a:focus-visible::after { transform: scaleX(1); }

kbd {
  display: inline-block;
  min-width: 1.7em;
  margin: 0 2px; padding: 1px 6px 2px;
  border: 1px solid rgba(var(--encre-rvb), 0.28);
  font: 500 11px/1.4 var(--serif);
  letter-spacing: 0.12em; text-align: center;
  font-style: normal;
}

/* « Nouvelle version » (js/version.js) : une fiche de papier qui descend du haut, une goutte d'encre, l'action en petites capitales */
.maj-version {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 35;
  display: flex; align-items: stretch;
  width: min(460px, calc(100vw - 32px));
  background: var(--papier-clair); color: var(--encre);
  border: 1px solid rgba(var(--encre-rvb), 0.16);
  box-shadow: 0 22px 44px -22px rgba(var(--ombre-rvb), 0.55);
  font-family: var(--serif);
  transform: translate(-50%, -170%);
  transition: transform 0.7s var(--lent);
}
.maj-version.on { transform: translate(-50%, 0); }
.maj-version .maj-ok {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px;
  padding: 14px 8px 14px 18px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.maj-version .maj-goutte {
  flex: 0 0 auto; width: 30px; height: 30px; position: relative;
  background: var(--encre); border-radius: 52% 48% 57% 43% / 47% 55% 45% 53%;
  transition: transform 0.6s var(--lent);
}
.maj-version .maj-goutte::after {
  content: ""; position: absolute; left: 22%; top: 20%; width: 26%; height: 22%;
  border-radius: 50%; background: var(--papier-clair); opacity: 0.55;
}
.maj-version .maj-ok:hover .maj-goutte { transform: rotate(-24deg) scale(1.06); }
.maj-version .maj-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.maj-version .maj-titre { font-weight: 400; font-size: 21px; line-height: 1.1; }
.maj-version .maj-sous { font-style: italic; font-size: 15px; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maj-version .maj-action {
  flex: 0 0 auto; position: relative; padding: 4px 0;
  font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
}
.maj-version .maj-action::after {
  content: ""; position: absolute; left: 0; right: 0.3em; bottom: 0; height: 1px; background: var(--encre);
  transform: scaleX(0.35); transform-origin: left; transition: transform 0.6s var(--lent);
}
.maj-version .maj-ok:hover .maj-action::after { transform: scaleX(1); }
.maj-version .maj-x {
  flex: 0 0 auto; padding: 0 16px; background: none; border: 0; border-left: 1px solid rgba(var(--encre-rvb), 0.12);
  font: italic 400 15px var(--serif); color: var(--encre-douce); cursor: pointer;
}
.maj-version .maj-x:hover { color: var(--encre); }
@media (max-width: 520px) { .maj-version .maj-sous { display: none; } }