/* =====================================================================
   MÉNAGE À DEUX — design system + kit d'animations réutilisable
   Charte : voir CLAUDE.md § 2bis. Rien de natif n'est visible.

   Palette : violet #7C4DFF · lime #B4E33D · encre #1B1330 · papier
   Fonts   : Fredoka (titres/boutons) + Nunito (texte)
   Timing  : 220ms cubic-bezier(.34,1.4,.64,1) — spring léger
   ===================================================================== */

:root {
  --violet:        #7C4DFF;
  --violet-dark:   #5A2FD9;
  --violet-soft:   #EFE9FF;
  --lime:          #B4E33D;
  --lime-dark:     #8FBF20;
  --ink:           #1B1330;
  --ink-soft:      #4A3F60;
  --paper:         #FFFFFF;
  --paper-off:     #F7F4FF;
  --danger:        #EF4444;
  --danger-soft:   #FEE2E2;
  --success:       #22C55E;
  --warn:          #F59E0B;
  --border:        #E5DEFB;
  --shadow-hard:   0 4px 0 var(--violet-dark);
  --shadow-lime:   0 4px 0 var(--lime-dark);
  --shadow-danger: 0 4px 0 #B91C1C;
  --radius:        18px;
  --radius-sm:     14px;
  --radius-lg:     22px;
  --spring:        cubic-bezier(.34, 1.4, .64, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur:           220ms;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-off);
  min-height: 100vh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: 15px; }

h1, h2, h3, .display {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

p  { margin: 0 0 12px; line-height: 1.5; }
a  { color: var(--violet); text-decoration: none; font-weight: 800; }
a:hover { text-decoration: underline; }

/* Anti-selection sur UI (garde possible sur codes d'invitation & inputs) */
button, .tab, .subtab, .btn, .avatar-chip { user-select: none; }

/* ─── App shell (safe area iOS) ─────────────────────────────────── */
.app-shell {
  max-width: 480px;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Hero + splash intro ──────────────────────────────────────── */
.hero { text-align: center; padding: 30px 0 20px; }
.hero .mascot {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 8px 0 rgba(124, 77, 255, 0.15));
  display: inline-block;
}
.hero .tagline { color: var(--ink-soft); font-size: 15px; margin: 0; }

.splash-in .mascot   { animation: mascot-in 620ms var(--spring) both; }
.splash-in h1        { animation: slide-up 420ms var(--ease-out) 200ms both; }
.splash-in .tagline  { animation: slide-up 420ms var(--ease-out) 340ms both; }
.splash-in .tabs     { animation: slide-up 420ms var(--ease-out) 460ms both; }
.splash-in .tab-panel:not(.hidden) {
  animation: slide-up 480ms var(--ease-out) 560ms both;
}

@keyframes mascot-in {
  0%   { transform: translateY(-40px) scale(0.4) rotate(-15deg); opacity: 0; }
  55%  { transform: translateY(6px) scale(1.08) rotate(6deg);    opacity: 1; }
  100% { transform: translateY(0)   scale(1)    rotate(0);       opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 0 var(--border);
  margin-bottom: 16px;
}
.card.hi {
  border-color: var(--violet);
  box-shadow: var(--shadow-hard);
}
.card.center { text-align: center; }

/* ─── Tabs pilule custom avec indicateur qui glisse ─────────────── */
.tabs {
  position: relative;
  display: flex;
  background: var(--violet-soft);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
  --tab-count: 2;
  --tab-active: 0;
}
.tabs .tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc((100% - 8px) / var(--tab-count));
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(124, 77, 255, 0.06);
  transform: translateX(calc(var(--tab-active) * 100%));
  transition: transform 280ms var(--spring);
  z-index: 0;
  pointer-events: none;
}
.tab, .subtab {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px 14px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s;
}
.tab.active, .subtab.active { color: var(--violet); }
.tabs.subtabs { margin: 6px 0 14px; }

/* ─── Formulaires ───────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 12px; }
.field label {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font: 700 16px/1.3 'Nunito', system-ui, sans-serif; /* 16px anti-zoom iOS */
  color: var(--ink);
  background: var(--paper);
  transition: border-color .18s, box-shadow .22s var(--spring),
              transform .18s;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: #B2A9CE; font-weight: 700; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-soft);
}
.field input[readonly] { background: var(--paper-off); color: var(--ink-soft); }

/* Checkbox custom */
.checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.checkbox input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.checkbox input:checked {
  border-color: var(--violet);
  background: var(--violet);
}
.checkbox input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--paper);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ─── Boutons chunky ────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  min-height: 52px;
  min-width: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, background .18s, opacity .15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
}
.btn:active { transform: translateY(3px); box-shadow: none !important; }
.btn:disabled { opacity: 0.65; cursor: not-allowed; }

.btn-primary   { background: var(--lime);   color: var(--ink);   box-shadow: var(--shadow-lime); }
.btn-primary:hover   { background: #C1EF54; }
.btn-secondary { background: var(--violet); color: var(--paper); box-shadow: var(--shadow-hard); }
.btn-secondary:hover { background: #8F63FF; }
.btn-danger    { background: var(--danger); color: var(--paper); box-shadow: var(--shadow-danger); }

.btn-ghost {
  background: var(--paper);
  color: var(--violet);
  border: 2px solid var(--violet);
  box-shadow: 0 3px 0 var(--violet);
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
}
.btn-block { width: 100%; }

/* Spinner intégré (état loading) */
.btn .spinner {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(27, 19, 48, 0.15);
  border-top-color: var(--ink);
  animation: spin 700ms linear infinite;
  opacity: 0;
  pointer-events: none;
}
.btn-secondary .spinner, .btn-danger .spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--paper);
}
.btn.loading .btn-label { visibility: hidden; }
.btn.loading .spinner   { opacity: 1; }
.btn.loading { cursor: wait; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Shake (erreur formulaire) ─────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-9px); }
  30%      { transform: translateX(9px); }
  45%      { transform: translateX(-7px); }
  60%      { transform: translateX(7px); }
  75%      { transform: translateX(-4px); }
  90%      { transform: translateX(4px); }
}
.shake { animation: shake 450ms cubic-bezier(.36, .07, .19, .97); }

/* ─── Message d'erreur inline (slide-down) ──────────────────────── */
.error-msg {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms var(--ease-out),
              opacity 200ms,
              transform 260ms var(--ease-out),
              padding 200ms,
              margin 200ms;
  background: var(--danger-soft);
  color: #B91C1C;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  padding: 0 14px;
  border: 2px solid transparent;
}
.error-msg.show {
  max-height: 120px;
  opacity: 1;
  padding: 12px 14px;
  transform: translateY(0);
  border-color: rgba(239, 68, 68, 0.25);
  margin-top: 2px;
}

/* ─── Panels : transition fade + slide ──────────────────────────── */
.tab-panel, .subtab-panel {
  animation: panel-in 260ms var(--spring) both;
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Utilitaires ───────────────────────────────────────────────── */
.muted   { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.center  { text-align: center; }
.spacer  { flex: 1; }
.hidden  { display: none !important; }
.row     { display: flex; gap: 10px; align-items: center; }
.grow    { flex: 1; }
.mt-16   { margin-top: 16px; }
.mt-20   { margin-top: 20px; }
.pill    {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: var(--violet);
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.divider { height: 2px; background: var(--border); border-radius: 999px; margin: 20px 0; }

/* ─── Toast (aria-live) ─────────────────────────────────────────── */
.toast-wrap {
  position: fixed; left: 0; right: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  z-index: 200;
  padding: 0 16px;
}
.toast {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .22s, transform .22s var(--spring);
  max-width: 100%;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err  { background: var(--danger); color: var(--paper); }
.toast.ok   { background: var(--success); color: var(--paper); }

/* ─── Checkmark SVG animé (succès) ──────────────────────────────── */
.checkmark {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  margin: 8px auto 16px;
  box-shadow: var(--shadow-lime);
  animation: check-pop 500ms var(--spring) both;
}
.checkmark svg { width: 54px; height: 54px; display: block; }
.checkmark svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: check-draw 480ms var(--ease-out) 220ms forwards;
}
@keyframes check-pop {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* ─── Confettis (particules) ────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  top: -20px;
  width: 10px; height: 14px;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 300;
  border-radius: 2px;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -20px, 0) rotate(0);    opacity: 1; }
  100% { transform: translate3d(var(--x, 0), 105vh, 0) rotate(720deg); opacity: 0; }
}

/* ─── Skeleton loaders ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--border) 0%,
    #F1EBFF 50%,
    var(--border) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}
.skeleton-line   { height: 14px; margin: 8px 0; }
.skeleton-block  { height: 60px; margin: 8px 0; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Stagger d'apparition (JS pose --i sur chaque enfant) ──────── */
.stagger > * {
  opacity: 0;
  transform: translateY(8px);
  animation: item-in 420ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes item-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Placeholder app screen ───────────────────────────────────── */
.welcome-hero { padding: 40px 0 20px; text-align: center; }
.welcome-hero .avatars {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 12px;
}
.avatar-chip {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 2px solid var(--paper);
  box-shadow: 0 2px 0 var(--border);
  transition: transform .12s var(--spring);
}
.avatar-chip:active { transform: scale(.95); }

/* Encart code d'invitation */
.invite-box {
  background: var(--violet-soft);
  border: 2px dashed var(--violet);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  margin-top: 12px;
}
.invite-code {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--violet);
  letter-spacing: 2px;
  margin: 6px 0 14px;
  user-select: all;
}
.invite-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ─── Small screens ────────────────────────────────────────────── */
@media (max-width: 360px) {
  h1 { font-size: 26px; }
  .app-shell { padding: 16px 16px 32px; }
  .card { padding: 18px; }
  .invite-code { font-size: 24px; }
}

/* ─── Reduced motion : coupe tout ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}