/* base.css — reset léger, variables, typographie et éléments partagés.
   Mobile-first. Aucune ressource réseau externe. */

/* --- Police d'accent self-hostée ---
   Dépose le fichier woff2 dans assets/fonts/ et active ce bloc.
   En attendant, repli sur une cursive système (zéro réseau, aucune dépendance).
@font-face {
  font-family: "Bisou Accent";
  src: url("/assets/fonts/accent.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
*/

:root {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Bisou Accent", "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;

  /* Valeurs par défaut (thème réconfort) — surchargées par applyTheme(). */
  --bg-1: #eef2ff;
  --bg-2: #dfe5ff;
  --fg: #3a3a52;
  --muted: #6b6b85;
  --accent: #6d74d6;
  --card-bg: rgba(255, 255, 255, 0.72);
  --particle: #9aa4ef;

  --radius: 18px;
  --tap: 44px; /* zone tactile minimale */
  --maxw: 460px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--fg);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); }

h1, h2 { font-family: var(--font-accent); font-weight: 400; line-height: 1.15; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.7em 1.3em;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 2px solid currentColor;
}

/* Conteneur centré mobile */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}

/* Pages simples (404, landing minimale) */
.page-404 main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 15vh 22px;
  text-align: center;
}
.page-404 h1 { font-size: 1.8rem; }

/* Accessibilité : focus visible */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Respect du réglage système : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}