/*
 * Nook : styles partagés par l'accueil et toutes les apps.
 * Thème « Miel » : une seule teinte (--h) déclinée en nuances, formes rondes, contenu centré.
 * Les apps n'utilisent que ces variables : changer --h ici change la couleur de tout Nook.
 * Documentation : docs/design-system.md (dans le git, jamais sur le FTP).
 */

/* Police auto-hébergée (SIL OFL 1.1, licence à côté du fichier). Aucun appel externe. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --h: 40;                 /* teinte unique : 40 = miel */

  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: hsl(var(--h) 51% 97%);
  --surface: #ffffff;
  --surface-2: hsl(var(--h) 51% 93%);
  --text: hsl(var(--h) 35% 20%);
  --text-muted: hsl(var(--h) 16% 40%);
  --border: hsl(var(--h) 34% 88%);
  --accent: hsl(var(--h) 85% 72%);
  --accent-text: hsl(var(--h) 45% 16%);
  --accent-soft: hsl(var(--h) 68% 89%);
  --mark: hsl(var(--h) 85% 58%);          /* pastilles, puces, focus */

  /* Bandeau d'en-tête et tuiles d'apps : nuances de la même teinte */
  --hero: hsl(var(--h) 68% 89%);
  --hero-text: var(--text);
  --tile-1: hsl(var(--h) 68% 85%);
  --tile-2: hsl(var(--h) 42% 93%);

  /* Réponses : du plus pâle (à revoir) au plus soutenu (facile), même teinte */
  --again: hsl(var(--h) 85% 90%);
  --hard: hsl(var(--h) 85% 82%);
  --good: hsl(var(--h) 85% 73%);
  --easy: hsl(var(--h) 85% 63%);
  --rate-text: hsl(var(--h) 45% 16%);
  --hard-text: var(--rate-text);
  --danger: hsl(4 62% 46%);               /* seule autre couleur : actions destructrices */

  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 1px 2px hsl(var(--h) 40% 30% / .06), 0 8px 24px hsl(var(--h) 40% 30% / .08);
  --press: 3px;                            /* profondeur des boutons qui s'enfoncent */
  --press-shade: hsl(var(--h) 40% 30%);    /* mélangé à la couleur du bouton pour son ombre */
  --space: 16px;
  --maxw: 680px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(var(--h) 25% 11%);
    --surface: hsl(var(--h) 22% 16%);
    --surface-2: hsl(var(--h) 20% 21%);
    --text: hsl(var(--h) 40% 93%);
    --text-muted: hsl(var(--h) 18% 72%);
    --border: hsl(var(--h) 18% 26%);
    --accent: hsl(var(--h) 85% 75%);
    --accent-text: hsl(var(--h) 45% 14%);
    --accent-soft: hsl(var(--h) 26% 20%);
    --mark: hsl(var(--h) 85% 68%);
    --hero: hsl(var(--h) 26% 20%);
    --tile-1: hsl(var(--h) 28% 26%);
    --tile-2: hsl(var(--h) 18% 19%);
    --again: hsl(var(--h) 68% 86%);
    --hard: hsl(var(--h) 68% 78%);
    --good: hsl(var(--h) 68% 70%);
    --easy: hsl(var(--h) 68% 62%);
    --rate-text: hsl(var(--h) 45% 12%);
    --danger: hsl(4 80% 72%);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
    --press-shade: #000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: hsl(var(--h) 25% 11%);
  --surface: hsl(var(--h) 22% 16%);
  --surface-2: hsl(var(--h) 20% 21%);
  --text: hsl(var(--h) 40% 93%);
  --text-muted: hsl(var(--h) 18% 72%);
  --border: hsl(var(--h) 18% 26%);
  --accent: hsl(var(--h) 85% 75%);
  --accent-text: hsl(var(--h) 45% 14%);
  --accent-soft: hsl(var(--h) 26% 20%);
  --mark: hsl(var(--h) 85% 68%);
  --hero: hsl(var(--h) 26% 20%);
  --tile-1: hsl(var(--h) 28% 26%);
  --tile-2: hsl(var(--h) 18% 19%);
  --again: hsl(var(--h) 68% 86%);
  --hard: hsl(var(--h) 68% 78%);
  --good: hsl(var(--h) 68% 70%);
  --easy: hsl(var(--h) 68% 62%);
  --rate-text: hsl(var(--h) 45% 12%);
  --danger: hsl(4 80% 72%);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  --press-shade: #000;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; text-align: center; }

/* Yan préfère le contenu centré : .center pour un bloc, les titres le sont par défaut */
.center { text-align: center; margin-inline: auto; justify-content: center; justify-items: center; }

button, input, select { font: inherit; color: inherit; }

/* Boutons */
.btn {
  --btn-bg: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--text);
  cursor: pointer; text-decoration: none; font-weight: 800;
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: transparent; border-color: transparent; }

/* Bouton plein qui s'enfonce : --btn-bg et --btn-fg suffisent pour en créer d'autres */
.btn-primary, .btn-fill, .btn:is(.again, .hard, .good, .easy) {
  border-color: transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 var(--press) 0 color-mix(in srgb, var(--btn-bg) 72%, var(--press-shade));
}
.btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-text); }
.btn-primary:hover, .btn-fill:hover, .btn:is(.again, .hard, .good, .easy):hover { background: var(--btn-bg); filter: brightness(1.06); }
.btn-primary:active:not(:disabled), .btn-fill:active:not(:disabled), .btn:is(.again, .hard, .good, .easy):active:not(:disabled) {
  transform: translateY(var(--press)); box-shadow: 0 0 0 transparent;
}

/* Couleurs de réponse, en bouton plein */
.btn.again { --btn-bg: var(--again); --btn-fg: var(--rate-text); }
.btn.hard  { --btn-bg: var(--hard);  --btn-fg: var(--hard-text); }
.btn.good  { --btn-bg: var(--good);  --btn-fg: var(--rate-text); }
.btn.easy  { --btn-bg: var(--easy);  --btn-fg: var(--rate-text); }

/* Surtitre en capitales précédé d'une pastille */
.eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); }

.card-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.muted { color: var(--text-muted); }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none !important; }
}

/* Pied de page commun à toutes les apps : retour à l'accueil pour changer d'app */
.nook-footer {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 24px var(--space) calc(24px + env(safe-area-inset-bottom));
}
.nook-footer a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  color: var(--text-muted); font-weight: 700; font-size: 14px; text-decoration: none;
}
.nook-footer a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); }
.nook-footer a:hover { background: var(--surface-2); color: var(--text); }
.nook-version {
  border: 0; background: none; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1.4 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.nook-version:hover { background: var(--surface-2); color: var(--text); }
.nook-changelog {
  width: min(520px, calc(100vw - 2 * var(--space))); max-height: 80vh; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); text-align: center;
}
.nook-changelog::backdrop { background: hsl(var(--h) 40% 15% / .45); }
.nook-changelog .close { float: right; }
.nook-changelog h2 { margin: 16px 0 8px; font-size: 20px; }
.nook-changelog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; text-align: left; }
.nook-changelog time { margin-right: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }

/*
 * Mascottes : une par app, petit personnage SVG inline avec des yeux qui clignent.
 * Structure attendue (voir docs/design-system.md) :
 *   <svg class="mascot" viewBox="0 0 48 48"> … <g class="mascot-eyes">…</g> … </svg>
 */
.mascot { width: 48px; height: 48px; flex: none; overflow: visible; }
.mascot-lg { width: 96px; height: 96px; display: block; margin-inline: auto; }
/* Mascotte en tête d'app : un clic ramène à l'accueil de Nook. */
.home-link { display: block; width: fit-content; margin-inline: auto; border-radius: var(--radius-sm); }
.home-link:hover .mascot-lg { animation: mascot-hop .5s ease; }
@media (prefers-reduced-motion: no-preference) {
  .mascot { animation: mascot-float 4s ease-in-out infinite; }
  .mascot-eyes { animation: mascot-blink 15s infinite; transform-origin: center; transform-box: fill-box; }
  a:hover .mascot, .mascot:hover { animation: mascot-hop .5s ease; }
}
@keyframes mascot-blink { 0%, 98%, 100% { transform: scaleY(1); } 99% { transform: scaleY(.1); } }
@keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mascot-hop { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-6px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }