/* ════════════════════════════════════════════════════════════════════════
   IrisKids — iriskids-material.css (Sprint DESIGN.DUAL-SYSTEM)

   Variante CLAIRE du système « console » IrisKids, inspirée Material 3.
   Périmètre : surfaces adultes uniquement — /parent, /parent (anonyme),
   écran PIN. L'admin (/admin, admin.css) est la variante SOMBRE du même
   système (ADMIN.1) et n'est pas modifié. Les jeux et la home gardent
   l'identité IrisKids (pastels, Baloo 2, emojis) — cf. BRAND-BOOK §8.

   Architecture : couche d'OVERRIDE scoping `body[data-ik-system="material"]`.
   On ne touche jamais au layout (display/position/flex) des composants
   existants — uniquement surfaces, encre, typo, rayons, ombres, états.

   Tokens :
     fond      #f6f7fb + halo lavande en tête de page (signature)
     surface   #ffffff bord #e4e2ee, rayon 14px, élévation M3 discrète
     encre     #1c1b22 / secondaire #5c5966 (gris violacé)
     primary   #6d33d6 (iris assombri, AA sur blanc) / tonal #efe9fc
     sémantique succès #1b7f4d · erreur #b3261e
     typo      corps system-ui (rupture volontaire avec Baloo 2, qui ne
               subsiste que sur le h1 = fil de marque)
   ════════════════════════════════════════════════════════════════════════ */

body[data-ik-system="material"] {
  --m-bg:           #f6f7fb;
  --m-halo:         #ece5fb;
  --m-surface:      #ffffff;
  --m-surface-2:    #eef0f7;
  --m-line:         #e4e2ee;
  --m-ink:          #1c1b22;
  --m-ink-2:        #5c5966;
  --m-primary:      #6d33d6;
  --m-primary-ink:  #ffffff;
  --m-primary-soft: #efe9fc;
  --m-success:      #1b7f4d;
  --m-error:        #b3261e;
  --m-radius:       14px;
  --m-shadow:       0 1px 2px rgba(28, 27, 34, .06), 0 4px 12px rgba(28, 27, 34, .05);

  background:
    radial-gradient(1200px 320px at 50% -80px, var(--m-halo) 0%, transparent 60%),
    var(--m-bg);
  color: var(--m-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Typographie : hiérarchie console ─────────────────────────────────── */
body[data-ik-system="material"] h1 {
  font-family: 'Baloo 2', system-ui, sans-serif;   /* fil de marque */
  color: var(--m-ink);
  letter-spacing: -0.01em;
}
body[data-ik-system="material"] h2,
body[data-ik-system="material"] h3 {
  font-family: inherit;
  color: var(--m-ink);
  font-weight: 650;
  letter-spacing: -0.005em;
}
body[data-ik-system="material"] p,
body[data-ik-system="material"] li,
body[data-ik-system="material"] label {
  color: var(--m-ink-2);
}

/* ── Cartes : une seule grammaire de surface ──────────────────────────── */
body[data-ik-system="material"] .family-card,
body[data-ik-system="material"] .we-card,
body[data-ik-system="material"] .os-card,
body[data-ik-system="material"] .modal-card,
body[data-ik-system="material"] .pa-benefit-card {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}

/* ── Boutons : plein / tonal / danger, tous pill ──────────────────────── */
body[data-ik-system="material"] .btn-invite,
body[data-ik-system="material"] .btn-save-prefs,
body[data-ik-system="material"] .btn-primary,
body[data-ik-system="material"] .pa-cta-primary {
  background: var(--m-primary);
  color: var(--m-primary-ink);
  border: none;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 650;
  transition: filter .15s, box-shadow .15s;
}
body[data-ik-system="material"] .btn-invite:hover,
body[data-ik-system="material"] .btn-save-prefs:hover,
body[data-ik-system="material"] .btn-primary:hover,
body[data-ik-system="material"] .pa-cta-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 8px rgba(109, 51, 214, .28);
}

body[data-ik-system="material"] .btn-geocode,
body[data-ik-system="material"] .btn-ghost,
body[data-ik-system="material"] .pa-cta-secondary {
  background: var(--m-primary-soft);
  color: var(--m-primary);
  border: none;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 650;
  transition: filter .15s;
}
body[data-ik-system="material"] .btn-geocode:hover,
body[data-ik-system="material"] .btn-ghost:hover,
body[data-ik-system="material"] .pa-cta-secondary:hover {
  filter: brightness(.97);
}

body[data-ik-system="material"] .btn-leave {
  background: transparent;
  color: var(--m-error);
  border: 1px solid color-mix(in srgb, var(--m-error) 35%, transparent);
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 650;
}
body[data-ik-system="material"] .btn-leave:hover {
  background: color-mix(in srgb, var(--m-error) 8%, transparent);
}

/* ── Champs de formulaire ─────────────────────────────────────────────── */
body[data-ik-system="material"] input[type="text"],
body[data-ik-system="material"] input[type="number"],
body[data-ik-system="material"] input[type="email"],
body[data-ik-system="material"] input[type="password"],
body[data-ik-system="material"] select {
  background: var(--m-surface);
  color: var(--m-ink);
  border: 1px solid #cfcadf;
  border-radius: 10px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
body[data-ik-system="material"] input:focus-visible,
body[data-ik-system="material"] select:focus-visible {
  outline: none;
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px rgba(109, 51, 214, .18);
}
body[data-ik-system="material"] input[type="checkbox"] {
  accent-color: var(--m-primary);
}

/* ── Messages d'état ──────────────────────────────────────────────────── */
body[data-ik-system="material"] .account-msg.success { color: var(--m-success); }
body[data-ik-system="material"] .account-msg.error   { color: var(--m-error); }

/* ── Écran PIN (parent-locked) ────────────────────────────────────────── */
body[data-ik-system="material"] .pin-dot {
  border-color: #cfcadf;
}
body[data-ik-system="material"] .pin-dot.filled {
  background: var(--m-primary);
  border-color: var(--m-primary);
}

/* ── Accessibilité : plancher qualité ─────────────────────────────────── */
body[data-ik-system="material"] :is(a, button):focus-visible {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-ik-system="material"] * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}