/* Pages publiques de Mandéline (mentions légales, confidentialité, suppression
   de compte) habillées comme un écran de la table de jeu : cadre de bois,
   feutre voilé, pastille de retour, titre Fraunces à l'or, rectangles de
   lecture à filet crème. Les valeurs viennent de src/theme.ts (TABLE) et de
   src/components/ui/Wood.tsx ; les textures de assets/home/ (copiées ici,
   origine et licences dans assets/home/ORIGINE.md). */

@font-face {
  font-family: "Fraunces72pt-Bold";
  src: url("fonts/Fraunces72pt-Bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --cream: #f3e6c8;
  --cream-dim: rgba(243, 230, 200, 0.7);
  --gold: #f0cf6a;
  --wood-dark: #3a2410;
  --veil: rgba(9, 28, 16, 0.86);
  --glow: rgba(30, 70, 42, 0.35);
  --read-bg: rgba(4, 22, 10, 0.22);
  --read-line: rgba(243, 230, 200, 0.18);
  --pill-line: rgba(243, 230, 200, 0.35);
  --ink: rgba(0, 0, 0, 0.75);
  --radius: 12px;
  --hit: 44px;
  --frame: 5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--wood-dark);
}

body {
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 21px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Le cadre de bois : la texture en mosaïque sur tout l'écran, le feutre posé
   dedans avec l'épaisseur du cadre (5 px, 8 px au large comme AppShell). */
.table {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--frame);
  background: var(--wood-dark) url("table/bois.webp") repeat;
  background-size: 768px 460px;
}
@media (min-width: 700px) {
  :root { --frame: 8px; }
}

.felt {
  position: relative;
  min-height: calc(100vh - 2 * var(--frame));
  min-height: calc(100dvh - 2 * var(--frame));
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(to bottom, var(--glow), rgba(30, 70, 42, 0) 45%),
    linear-gradient(var(--veil), var(--veil)),
    url("table/feutre.webp") repeat;
  background-size: auto, auto, 384px 384px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* En-tête : pastille de retour à gauche, titre centré, côté droit vide de la
   même largeur pour que le titre reste au centre de l'écran. */
.head {
  display: grid;
  grid-template-columns: minmax(var(--hit), 1fr) auto minmax(var(--hit), 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  max-width: 712px;
  margin: 0 auto;
}
.side { min-width: var(--hit); }
.pill {
  justify-self: start;
  width: var(--hit);
  height: var(--hit);
  border-radius: 50%;
  border: 1px solid var(--pill-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pill:active { opacity: 0.8; }
.head h1 {
  min-width: 0;
  margin: 0;
  text-align: center;
  color: var(--gold);
  font-family: "Fraunces72pt-Bold", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
}
/* Sans la police : même graisse que l'app en repli. */
.head h1.fallback { font-weight: 800; }

/* La colonne de lecture, comme le livret. */
.col {
  max-width: 680px;
  margin: 0 auto;
  padding: 4px 16px 32px;
}
.date {
  margin: 0 0 18px;
  color: var(--cream-dim);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.4px;
}
h2 {
  margin: 22px 0 8px 8px;
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.card {
  border: 1px solid var(--read-line);
  border-radius: var(--radius);
  background: var(--read-bg);
  padding: 14px 16px;
}
.card p { margin: 0; }
.card p + p, .card ul + p, .card ol + p, .card p + ul, .card p + ol { margin-top: 12px; }
.card ul, .card ol { margin: 0; padding-left: 22px; }
.card li { padding-left: 2px; }
.card li + li { margin-top: 8px; }
.card li::marker { color: var(--cream-dim); }
strong { color: var(--gold); font-weight: 700; }
a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot {
  margin: 28px 0 0;
  text-align: center;
  color: var(--cream-dim);
  font-size: 13px;
}
.foot a { font-weight: 600; }