/* ============================================================================
 * DESIGN SYSTEM — Tiimbo Login / Register (Manifest-Inspired)
 * Mobile-first, chaleureux, animations fluides
 * ============================================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg-1: #f6f8fd;
  --bg-2: #e6edf9;
  --ink: #0f172a;
  --ink-light: #475569;
  --accent: #5c7cfa;
  --accent-dark: #4c6ef5;
  --accent-light: #8ea3fb;
  --good: #2fa563;
  --good-dark: #1e7d49;
  --bad: #e0533f;
  --panel: #ffffff;
  --sand: #c8d7f5;
  --shadow-sm: 0 2px 8px rgba(31, 38, 135, 0.10);
  --shadow-md: 0 8px 24px rgba(31, 38, 135, 0.14);
  --shadow-lg: 0 16px 40px rgba(31, 38, 135, 0.18);
  --ease-soft: cubic-bezier(.34, 1.4, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  
  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  
  --radius-card: 24px;
  --radius-input: 14px;
  --radius-btn: 14px;
  --radius-pill: 999px;
  font-size: 16px;
}

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

body {
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 10% 15%, rgba(200, 215, 245, 0.825) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(160, 185, 255, 0.63) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.7) 0%, transparent 65%),
    linear-gradient(160deg, #f6f8fd, #e6edf9);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .dialogue-bubble, .btn-primary, .auth-card-title, .choice-action-btn {
  font-family: "Baloo 2", "Quicksand", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* ---------- App Shell ---------- */
.app-shell {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

/* Variante centrée (index/wizard) : contenu centré verticalement dans l'écran plutôt que
   collé en haut — sur les téléphones très hauts, coller en haut laissait un vide énorme
   avant le pied de page au lieu de répartir l'espace de façon équilibrée. */
.app-shell-centered {
  justify-content: center;
  padding-top: max(48px, 9vh);
  padding-bottom: 55px;
  gap: 0;
}

.mascot-centered-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

/* Mascotte réduite quand elle est à côté de la bulle (au lieu d'au-dessus/en dessous) :
   libère de la hauteur pour le formulaire sur les wizards à plusieurs étapes/champs.
   Largeur plafonnée explicitement (en plus de la hauteur) pour garantir qu'elle ne
   pousse jamais la bulle en dehors de l'écran sur les téléphones étroits. */
.mascot-centered-area .mascot {
  flex-shrink: 0;
}
.mascot-centered-area .mascot-img {
  height: clamp(72px, 14vh, 110px);
  max-width: 90px;
}

.mascot-centered-area .dialogue-bubble {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 260px;
  width: auto;
}

/* Écran assez haut pour se le permettre : on revient à la disposition normale
   (mascotte en grand au-dessus de la bulle) plutôt que la version compacte côte à côte,
   réservée aux petits écrans où la hauteur est comptée. */
@media (min-height: 700px) {
  .mascot-centered-area {
    flex-direction: column;
  }
  .mascot-centered-area .mascot-img {
    height: clamp(140px, 30vh, 260px);
    max-width: none;
  }
  .mascot-centered-area .dialogue-bubble {
    flex: initial;
    max-width: 340px;
    width: 100%;
  }
}

/* ---------- Floaty décoratifs ---------- */
.floaty-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.floaty {
  position: absolute;
  opacity: 0.45;
  animation: float-drift 7s ease-in-out infinite;
  font-size: 1.2rem;
}
.floaty.s1 { top: 5%; left: 8%; font-size: 1.8rem; animation-delay: 0s; color: var(--sand); }
.floaty.s2 { bottom: 6%; right: 8%; font-size: 1.3rem; animation-delay: 1.2s; color: var(--accent); }
.floaty.s3 { bottom: 25%; left: 5%; font-size: 1.1rem; animation-delay: 2.1s; color: var(--sand); }
.floaty.s4 { top: 12%; right: 10%; font-size: 1.3rem; animation-delay: 0.6s; color: var(--good); }
.floaty.s5 { top: 50%; left: 45%; font-size: 1rem; animation-delay: 3s; color: var(--accent-light); }

@keyframes float-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(10deg); }
}

/* ---------- Mascotte ---------- */
.mascot-area {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: 10px;
}

.mascot-align-right {
  justify-content: flex-end;
  padding-right: 20px;
}

.mascot {
  animation: mascot-bob 5.2s ease-in-out infinite;
}

.mascot-img {
  height: clamp(140px, 30vh, 260px);
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(31, 38, 135, 0.22));
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

/* ---------- Bulle de dialogue ---------- */
.dialogue-area {
  display: flex;
  justify-content: center;
  padding: 0 8px;
  position: relative;
  z-index: 2;
  margin-top: 16px;
}

.dialogue-bubble {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--glass-shadow);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.45;
  position: relative;
  max-width: 340px;
  width: 100%;
  min-height: 48px;
  animation: 
    bubble-in 0.4s var(--ease-soft) backwards,
    bubble-bob 5.2s ease-in-out 0.4s infinite;
  animation-delay: 0.2s, 0.6s; /* bubble-in starts at 0.2s, bubble-bob starts at 0.2+0.4 = 0.6s */
}

/* Glassmorphism pointeurs using rotated squares */
.dialogue-bubble-bottom::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1.5px solid var(--glass-border);
  border-bottom: 1.5px solid var(--glass-border);
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
  box-shadow: 4px 4px 10px rgba(31, 38, 135, 0.05);
}

.dialogue-bubble-white {
  background: rgba(255, 255, 255, 0.90);
  color: var(--text-dark);
}

.dialogue-bubble-white::after,
.dialogue-bubble-white::before {
  background: rgba(255, 255, 255, 0.90);
}

.dialogue-bubble-bottom-right::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1.5px solid var(--glass-border);
  border-bottom: 1.5px solid var(--glass-border);
  right: 40px; /* Pointer shifted to the right */
  bottom: -9px;
  transform: rotate(45deg);
  z-index: -1;
  box-shadow: 4px 4px 10px rgba(31, 38, 135, 0.05);
}

.dialogue-bubble-top::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1.5px solid var(--glass-border);
  border-top: 1.5px solid var(--glass-border);
  left: 50%;
  top: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

@keyframes bubble-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bubble-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

/* Curseur clignotant pour le typewriter */
.dialogue-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 0.7s steps(1) infinite;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Firefox : backdrop-filter + mutations DOM rapides (typewriter) rendent le texte
   invisible par intermittence (bug de compositing du flou). Flou coupé pendant la
   frappe, restauré ensuite (voir typewriter() dans design.js). */
.dialogue-bubble.is-typing {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mot ou numéro mis en valeur dans une bulle (ex. le numéro de téléphone concerné) */
.dialogue-highlight {
  color: #0b1220;
  font-weight: 800;
}

/* Lien cliquable inséré en fin de dialogue (ex. « connectez-vous en cliquant ICI ») */
.dialogue-inline-link {
  font-weight: 800;
  color: #0b1220;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dialogue-inline-link:hover,
.dialogue-inline-link:focus-visible {
  color: var(--accent-dark);
}

/* Bulle de dialogue en cas d'erreur */
.dialogue-bubble.dialogue-error,
.dialogue-bubble-white.dialogue-error {
  color: var(--bad) !important;
  border-color: rgba(224, 83, 63, 0.45);
  box-shadow: 0 8px 32px 0 rgba(224, 83, 63, 0.18);
  transition: color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
}

.dialogue-bubble.dialogue-error::after,
.dialogue-bubble.dialogue-error::before {
  border-color: rgba(224, 83, 63, 0.45);
}

.dialogue-bubble.dialogue-error .dialogue-cursor {
  background: var(--bad);
}

/* ---------- Boutons de choix (index) ---------- */
.choice-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 4px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft);
}

.choice-actions.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.choice-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.btn-glass-choice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-card);
  color: var(--text-dark);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
  transition: transform 0.2s var(--ease-soft), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.btn-glass-choice:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--accent-dark);
}

.btn-glass-choice:active {
  transform: translateY(0) scale(0.96);
}

/* ---------- Choix de genre (Tantie / Tonton) ---------- */
#genreActions {
  display: none;
}
#genreActions.show {
  display: flex;
}

.btn-glass-white {
  background: rgba(255, 255, 255, 0.85);
  color: var(--accent-dark);
}

/* Boutons d'action proposés par le guide sous la bulle (déconnexion, compte créé, mot de
   passe réinitialisé…) : insérés par design.js, mêmes boutons que Oui/Non de l'accueil */
a.btn-glass-choice {
  text-decoration: none;
}

.bubble-actions {
  padding: 0 20px;
}

.btn-glass-white:hover {
  background: rgba(255, 255, 255, 1);
}

/* ---------- Pavé Numérique Custom (Compact unifié) ---------- */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 270px;
  margin: 10px auto 0 auto;
  gap: 6px;
  padding: 0 4px;
  width: 100%;
}

.numpad-key {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: 12px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  box-shadow: var(--glass-shadow);
  transition: transform 0.15s var(--ease-soft), background 0.15s ease;
  cursor: pointer;
}

.numpad-key svg {
  width: 16px;
  height: 16px;
}

.numpad-key:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.6);
}

.numpad-key-empty {
  visibility: hidden;
}

.numpad-key-delete {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--accent);
}

.numpad-key-delete:active {
  background: rgba(255, 255, 255, 0.2);
}

.numpad-key-submit {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(92, 124, 250, 0.35);
}

.numpad-key-submit:active {
  background: var(--accent-dark);
  transform: scale(0.95);
}

/* Bouton retour iconique */
.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.15s var(--ease-soft), background 0.15s ease;
  flex-shrink: 0;
}

.btn-back:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.6);
}

/* Astuce texte sous un champ */
.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted, rgba(80,60,40,0.55));
  margin-top: 6px;
  padding-left: 2px;
}

/* Champ code OTP */
.otp-input {
  letter-spacing: 0.35em;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 6px 12px 10px;
  background: linear-gradient(to top, rgba(246, 241, 235, 0.95) 60%, rgba(246, 241, 235, 0));
  z-index: 10;
  pointer-events: none;
}

.app-footer * {
  pointer-events: auto;
}

.app-footer .auth-switch {
  padding: 4px 0 4px;
  margin: 0;
}

.app-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.app-footer a:hover {
  color: var(--accent);
}

.app-footer svg {
  color: #25D366; /* WhatsApp color */
}

.app-footer span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.choice-action-btn-secondary .choice-action-icon {
  background: linear-gradient(135deg, var(--good), var(--good-dark));
}

/* ---------- Carte formulaire ---------- */
.auth-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 24px 20px 28px;
  box-shadow: var(--glass-shadow);
  margin-top: 16px;
  position: relative;
  z-index: 2;
  animation: card-slide-up 0.45s var(--ease-soft) backwards;
  animation-delay: 0.35s;
  overflow: hidden; /* For wizard sliding */
}

.wizard-form-area {
  padding: 10px 20px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
  animation: card-slide-up 0.45s var(--ease-soft) backwards;
  animation-delay: 0.35s;
  overflow: hidden;
}

/* ---------- Wizard Steps (Conversational UI) ---------- */
.wizard-container {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 120px;
}

.wizard-step {
  width: 100%;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-soft), opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(20px);
}

.wizard-step.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  position: relative;
  transform: translateX(0);
}

.wizard-step.prev {
  transform: translateX(-20px);
}

@keyframes card-slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.auth-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-dark);
  text-align: center;
  margin-bottom: 4px;
}

.auth-card-subtitle {
  font-size: 0.85rem;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
}

/* ---------- Formulaire ---------- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.form-label-required::after {
  content: " *";
  color: var(--bad);
  font-weight: 400;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: color 0.15s ease;
}

.form-control {
  width: 100%;
  font-family: "Quicksand", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  outline: none;
}

/* Texte d'exemple : très discret (jamais pris pour une saisie), effacé dès qu'on touche le champ */
.form-control::placeholder {
  color: #a39580;
  opacity: 0.55;
  font-weight: 400;
  font-style: italic;
}

.form-control:focus::placeholder {
  opacity: 0;
  color: transparent;
}

.form-control:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(92, 124, 250, 0.14);
}

.form-control.has-icon-left {
  padding-left: 44px;
}

.form-control.has-icon-right {
  padding-right: 44px;
}

.form-control.has-error {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(224, 83, 63, 0.12);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--ink-light);
  margin-top: 4px;
  font-weight: 500;
}

/* Toggle password */
.input-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--accent-light);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}
.input-toggle-btn:hover { color: var(--accent); }

/* Label row (label + lien) */
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.label-row .form-label {
  margin-bottom: 0;
}
.label-row a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

/* Genre selector */
.genre-selector {
  display: flex;
  gap: 10px;
}

.genre-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.65);
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.15s ease;
}

.genre-option:hover {
  border-color: var(--accent-light);
  background: rgba(255, 255, 255, 0.9);
}

.genre-option.active {
  border-color: var(--accent);
  background: #eef2fd;
  color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.12);
}

.genre-option input[type="radio"] {
  display: none;
}

.genre-emoji {
  font-size: 1.3rem;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease-soft), background 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: translateY(0) scale(0.97) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  width: 100%;
  height: 50px;
  animation: cta-breathe 2.8s ease-in-out infinite;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.btn-primary.btn-sm {
  padding: 10px 24px;
  height: 44px;
  font-size: 0.95rem;
  width: auto; /* Allow shrink */
}

@keyframes cta-breathe {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 8px 24px rgba(92, 124, 250, 0.30); }
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-dark);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.btn-back {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  background: rgba(255, 255, 255, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-input);
  color: var(--accent-dark);
}
.btn-back:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- Lien bascule ---------- */
.auth-switch {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-light);
  padding: 8px 0 12px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auth-switch a {
  font-weight: 800;
  color: #4c6ef5;
  background: rgba(92, 124, 250, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(92, 124, 250, 0.35);
  text-decoration: none;
  transition: all 0.2s var(--ease-soft);
  display: inline-flex;
  align-items: center;
}
.auth-switch a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(92, 124, 250, 0.30);
  transform: translateY(-1px);
}

/* ---------- Alert inline ---------- */
.alert-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 16px;
  animation: bubble-in 0.3s var(--ease-soft);
}
.alert-inline svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-inline-error {
  background: #fef2f0;
  color: var(--bad);
  border: 1px solid rgba(224, 83, 63, 0.2);
}
.alert-inline-success {
  background: #edf8f0;
  color: var(--good-dark);
  border: 1px solid rgba(47, 165, 99, 0.2);
}

/* ---------- Modal custom ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(51, 41, 31, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.2s var(--ease-soft);
}
.modal-overlay.active .modal-card {
  transform: scale(1);
}

.modal-title {
  font-family: "Baloo 2", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

.modal-message {
  font-size: 0.88rem;
  color: var(--ink-light);
  line-height: 1.5;
  margin-bottom: 20px;
  font-weight: 500;
}

.modal-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-soft), background 0.15s ease;
}
.modal-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.modal-btn:active {
  transform: translateY(0) scale(0.96);
}

/* ---------- Animations utilitaires ---------- */
@keyframes chip-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 360px) {
  .mascot-img {
    height: clamp(110px, 24vh, 200px);
  }
  .auth-card {
    padding: 20px 16px 24px;
  }
  .dialogue-bubble {
    font-size: 0.88rem;
    padding: 12px 14px;
  }
}

/* Safe area (iPhone notch) */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-shell {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Blocage anti-force-brute : le formulaire est masqué le temps du compte à rebours */
form.is-locked {
  display: none;
}