/* ──────────────────────────────────────────────────────────────
   Calame — socle partagé
   Portrait 480×800. Palette prélevée sur les illustrations du
   livre `histoire-noe-diams` : voir DESIGN.md.
   ────────────────────────────────────────────────────────────── */

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

/* ── Police auto-hébergée : l'appareil doit marcher hors ligne ── */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-700.woff2') format('woff2');
}

:root {
  /* Fonds — le papier du livre */
  --bg: #F8F6ED;
  --card-bg: #FFFDF6;
  --card-raised: #F2EADC;
  --edge: #E4DAC8;

  /* Encre */
  --text: #3A3129;
  --text-secondary: #6E6155;
  --text-dim: #9A8E82;

  /* Les deux choix. Contraste vérifié : 6,63:1 et 8,05:1 sur --text.
     Ils se distinguent par la teinte, pas par la clarté — ne jamais
     les poser côte à côte sans autre repère que la couleur. */
  --choice-a: #A0C0D0;
  --choice-a-active: #8AB0C4;
  --choice-b: #E8C9A0;
  --choice-b-active: #DCB786;

  /* Actions — l'accent reprend le bleu du livre */
  --primary: #A0C0D0;
  --primary-hover: #8AB0C4;
  --on-accent: #3A3129;

  --success: #7FA07A;
  /* `--warning` et pas `--warn` : settings.css l'appelait déjà sous ce nom,
     et le jeton n'a jamais existé — le bouton « Redémarrer » était sans fond
     depuis le début. */
  --warning: #D98C5F;
  --danger: #C4705E;

  --card-radius: 24px;
  --card-shadow: 0 1px 2px rgba(58, 49, 41, 0.06);

  --tap-min: 72px;

  --font-family: 'Nunito', 'Noto Sans', system-ui, sans-serif;
  --font-size-story: 26px;
  --font-size-button: 21px;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Shared ── */

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  flex-shrink: 0;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 18px;
  background: var(--card-raised);
  font-size: 24px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

.back-link:active {
  background: var(--edge);
}

.status-bar {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--text-dim);
  z-index: 5;
}

.online-indicator::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
}

.online-indicator.offline::before {
  background: var(--danger);
}

/* ── Porte des réglages ────────────────────────────────────────
   Aucun lien visible vers les réglages : Chromium tourne en kiosk,
   il n'y a pas de barre d'adresse, donc la seule entrée est un appui
   long de 3 s dans le coin haut-gauche. Un enfant de 3 ans tapote,
   il ne maintient pas. Voir frontend/js/settingsGate.js.
   ────────────────────────────────────────────────────────────── */

/* Les vrais contrôles passent DEVANT la porte. Sans ça, le carré invisible
   recouvre le bouton retour du coin haut-gauche : l'enfant tape ← pour quitter
   une histoire, rien ne se passe, et s'il insiste trois secondes il ouvre les
   réglages. Le geste reste disponible depuis la liste des histoires, où le coin
   est libre — c'est l'écran racine, celui d'où le parent part naturellement. */
.back-link,
.icon-btn {
  position: relative;
  z-index: 60;
}

.settings-gate {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  z-index: 50;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.settings-gate::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 3px solid var(--text-dim);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms linear, transform 120ms linear;
}

/* N'apparaît qu'une fois l'appui engagé : invisible au repos. */
.settings-gate.holding::after {
  opacity: 0.45;
  transform: scale(1);
  transition: opacity 200ms linear, transform 2800ms ease-out;
}