/* =========================================================
   MOTS VOYAGEURS — style.css
   Palette "carnet de collection" : corkboard indigo + stickers.
   ========================================================= */

:root {
  /* Couleurs */
  --color-bg: #241E3D;
  --color-bg-alt: #2F274F;
  --color-card: #FFF8F0;
  --color-primary: #FFB627;   /* amande / CTA principal */
  --color-primary-dark: #E89A0C;
  --color-secondary: #FF6B6B; /* corail / erreur */
  --color-secondary-dark: #E4504F;
  --color-accent: #2EC4B6;    /* sarcelle / succès */
  --color-accent-dark: #1FA79A;
  --color-text: #2B2250;
  --color-text-inverse: #FFF8F0;
  --color-muted: #6B6289;

  /* Typographie */
  --font-display: 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', 'Trebuchet MS', 'Verdana', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Rayon / ombre */
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-card: 0 10px 0 rgba(43, 34, 80, 0.18), 0 14px 24px rgba(0,0,0,0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text-inverse);
}

/* Fond "liège" décoratif : pois discrets + vignette */
.corkboard-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,182,39,0.10) 0, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(46,196,182,0.12) 0, transparent 38%),
    radial-gradient(circle at 75% 85%, rgba(255,107,107,0.10) 0, transparent 42%),
    radial-gradient(circle, rgba(255,255,255,0.045) 1.5px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(160deg, #241E3D 0%, #2F274F 60%, #241E3D 100%);
}

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.screen { display: none; animation: fadeIn .35s ease; }
.screen.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.app-logo { display: flex; align-items: center; gap: 10px; }
.app-logo-mark { font-size: 2.1rem; transform: rotate(-8deg); display: inline-block; }
.app-logo h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  margin: 0;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.app-tagline { color: var(--color-muted); margin: 4px 0 24px; font-weight: 700; }

.screen-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 8px 0 20px;
  color: var(--color-text-inverse);
}

.muted { color: var(--color-muted); font-weight: 600; }

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
}
.user-badge .badge-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); font-size: 1.2rem;
  overflow: hidden;
}
.user-badge .badge-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Boutons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: 1rem;
  color: var(--color-text);
  background: rgba(255,255,255,0.08);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.btn-lg { padding: 16px 28px; font-size: 1.15rem; border-radius: var(--radius-lg); box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.btn-lg:active { box-shadow: 0 2px 0 rgba(0,0,0,0.18); }

.btn-primary { background: var(--color-primary); color: #3A2400; box-shadow: 0 5px 0 var(--color-primary-dark); }
.btn-primary:active { box-shadow: 0 2px 0 var(--color-primary-dark); }

.btn-secondary { background: var(--color-accent); color: #062B27; box-shadow: 0 5px 0 var(--color-accent-dark); }
.btn-secondary:active { box-shadow: 0 2px 0 var(--color-accent-dark); }

.btn-ghost { background: transparent; color: var(--color-text-inverse); border: 2px solid rgba(255,255,255,0.25); }
.btn-back { background: transparent; color: var(--color-text-inverse); border: 2px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 8px 16px; }

/* Le bouton "Retour" peut apparaître sur fond clair (.center-card) : on adapte alors ses couleurs */
.center-card .btn-back {
  color: var(--color-text);
  border-color: rgba(43, 34, 80, 0.25);
}
.center-card .btn-back:hover { background: rgba(43, 34, 80, 0.06); }

/* Les modales ont un fond clair : .btn-ghost (Annuler, Importer une photo, Retirer l'image...) doit s'adapter */
.modal .btn-ghost {
  color: var(--color-text);
  border-color: rgba(43, 34, 80, 0.25);
}
.modal .btn-ghost:hover { background: rgba(43, 34, 80, 0.06); }

.btn-round {
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.5rem; background: var(--color-primary); color: #3A2400;
  box-shadow: 0 4px 0 var(--color-primary-dark);
}

.btn-icon { margin-right: 6px; }

.home-actions { display: flex; justify-content: center; margin: 28px 0 10px; }
.home-actions.two-col { gap: 16px; flex-wrap: wrap; }

.data-tools { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ---------- Grille de tuiles (utilisateurs / langues) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.tile {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease;
  border: none;
  font-family: var(--font-body);
}
.tile:nth-child(3n+1) { transform: rotate(-2deg); }
.tile:nth-child(3n+2) { transform: rotate(1.5deg); }
.tile:nth-child(3n)   { transform: rotate(-1deg); }
.tile:hover { transform: scale(1.06) rotate(0deg); }

.tile-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: linear-gradient(160deg, #FFE1A8, #FFB627);
  overflow: hidden;
}
.tile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tile-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

.empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  font-weight: 700;
  padding: 30px 10px;
  border: 3px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
}

/* ---------- Liste de mots ---------- */
.word-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.word-row {
  background: var(--color-card);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.word-row img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.word-fr { font-weight: 800; font-family: var(--font-display); }
.word-arrow { color: var(--color-muted); }
.word-target { font-weight: 700; color: var(--color-accent-dark); }

/* ---------- Cartes centrées / modales génériques ---------- */
.center-card {
  background: var(--color-card);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  max-width: 480px;
  margin: 30px auto 0;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.stack-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; align-items: center; }

.count-picker { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 26px 0; }
.count-value { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; min-width: 60px; }

/* ---------- Révision : barre du haut + minuteur ---------- */
.review-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 480px;
  margin: 0 auto 6px;
}
.review-progress { font-family: var(--font-display); font-weight: 700; color: var(--color-muted); }

.timer-ring { position: relative; width: 64px; height: 64px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 9; }
.timer-fill {
  fill: none; stroke: var(--color-accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.timer-fill.warning { stroke: var(--color-secondary); }
.timer-number {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem;
  color: var(--color-text-inverse);
}

.question-card { padding-top: 26px; }
.question-label { font-weight: 800; color: var(--color-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; margin-bottom: 6px; }
.question-word-wrap { margin-bottom: 18px; }
.question-image { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.question-word { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; margin: 4px 0; }

.answer-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 3px solid #E7DFD2;
  margin-bottom: 16px;
  color: var(--color-text);
  text-align: center;
}
.answer-input:focus { outline: none; border-color: var(--color-primary); }

/* ---------- Feedback ---------- */
.feedback-card.correct { border: 5px solid var(--color-accent); }
.feedback-card.incorrect { border: 5px solid var(--color-secondary); }
.feedback-icon { font-size: 3rem; margin-bottom: 6px; }
.feedback-title { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 4px; }
.feedback-sub { color: var(--color-muted); font-weight: 700; margin-bottom: 14px; }
.feedback-answer {
  background: rgba(43,34,80,0.06);
  border-radius: var(--radius-md);
  padding: 12px;
  font-weight: 800;
  margin-bottom: 20px;
  font-family: var(--font-display);
}

/* ---------- Ecran de fin ---------- */
.end-emoji { font-size: 3.4rem; }
.score-board { display: flex; gap: 12px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.score-pill {
  flex: 1; min-width: 100px;
  border-radius: var(--radius-md);
  padding: 14px 10px;
  color: #fff;
}
.score-pill .score-number { display: block; font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; }
.score-pill .score-label { font-size: 0.8rem; font-weight: 700; }
.score-good { background: var(--color-accent); color: #062B27; }
.score-bad { background: var(--color-secondary); color: #3A0A0A; }
.score-pct { background: var(--color-text); color: var(--color-text-inverse); }

/* ---------- Modales ---------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 15, 40, 0.7);
  align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--color-card);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}
.modal h3 { font-family: var(--font-display); margin-top: 0; }

.field-label { display: block; font-weight: 800; margin: 14px 0 6px; }
.field-input {
  width: 100%;
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 700;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 3px solid #E7DFD2;
  color: var(--color-text);
}
.field-input:focus { outline: none; border-color: var(--color-primary); }

.avatar-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.avatar-option {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid transparent;
  background: #F1E9DA;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.avatar-option.selected { border-color: var(--color-primary); background: #FFE9C2; }

.upload-btn { display: inline-flex; align-items: center; margin-top: 4px; cursor: pointer; }
.upload-preview img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; margin-top: 10px; }

.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.error-msg { color: var(--color-secondary-dark); font-weight: 700; margin-top: 10px; min-height: 1.2em; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .app-logo h1 { font-size: 1.5rem; }
  .center-card { padding: 24px 18px; }
  .question-word { font-size: 1.7rem; }
}

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .tile, .timer-fill { transition: none !important; animation: none !important; }
}