/* ===== App.css ===== */
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  min-height: 100vh;
  /* svh, pas dvh : cf. le commentaire sur #root dans index.css. */
  min-height: 100svh;
}

/* Bannière de boot après un #transfer= : confirmation d'arrivée (success)
   ou échec (error, lien expiré/déjà servi). */
.app-boot-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}

.app-boot-banner--error {
  border-color: var(--box-red);
}

.app-boot-banner--success {
  border-color: var(--sage);
}

.app-boot-banner-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 2px;
}

.app-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink-soft);
}

/* ===== components/Badge.css ===== */
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  text-align: center;
  position: relative;
  transition: transform 0.15s ease;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}

.badge:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.badge:active {
  transform: translateY(1px);
}

.badge.locked {
  border-color: var(--line-soft);
}

.badge.locked .badge-medallion,
.badge.locked .badge-name,
.badge.locked .badge-date,
.badge.locked .badge-lock {
  opacity: 0.45;
}

/* Apparence commune (fond pastel, couleur du glyphe) dans Medallion.css. */
.badge-medallion {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  font-size: 17px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--medallion) 25%, transparent);
}

.badge.locked .badge-medallion {
  background: var(--line);
  border-color: var(--line);
}

.badge-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.badge-date {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-muted);
}

.badge-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--ink-muted);
}

.badge-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

.badge-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.badge-progress-fill {
  height: 100%;
  background: var(--indigo);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.badge-progress-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  line-height: 1;
}

/* ===== components/BadgeDetailModal.css ===== */
.badge-detail-modal {
  text-align: center;
}

/* Apparence commune (fond pastel, couleur du glyphe) dans Medallion.css. */
.badge-detail-medallion {
  width: 84px;
  height: 84px;
  border: 2px solid var(--ink);
  font-size: 38px;
  margin: 4px auto 14px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--medallion) 25%, transparent);
}

.badge-detail-medallion.locked {
  background: var(--line);
  border-color: var(--line);
  opacity: 0.7;
}

.badge-detail-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.badge-detail-condition {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
}

.badge-detail-progress {
  background: var(--cream);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
}

.badge-detail-progress-bar {
  height: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.badge-detail-progress-fill {
  height: 100%;
  background: var(--indigo);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.badge-detail-progress-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}

.badge-detail-hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Variante autonome (badge à objectif unique) : pas de barre au-dessus,
   on rétablit donc une marge propre des deux côtés. */
.badge-detail-cta {
  margin: 0 0 16px;
}

.badge-detail-earned {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--sage);
  background: var(--sage-soft);
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badge-detail-earned-check {
  font-size: 18px;
  font-weight: 800;
}

/* ===== components/Button.css ===== */
/* Boutons pleine largeur du parcours principal (CTAs). Deux variantes de
   couleur — ink (parcours d'onboarding/intro) et indigo (CTA principale
   sur Home). Les overrides spécifiques (max-width, margin, padding) restent
   au point d'appel via une classe d'écran. */

.btn {
  width: 100%;
  padding: 18px 32px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn--ink {
  color: var(--cream);
  background: var(--ink);
  box-shadow: 0 2px 0 #000, 0 6px 20px rgba(30, 26, 46, 0.25);
}

.btn--ink:disabled {
  box-shadow: none;
}

.btn--indigo {
  color: #fff;
  background: var(--indigo);
  box-shadow: 0 2px 0 var(--indigo-ink), 0 6px 20px rgba(79, 70, 186, 0.3);
}

.btn--indigo:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--indigo-ink), 0 3px 10px rgba(79, 70, 186, 0.25);
}

/* ===== components/DotGrid.css ===== */
.dot-grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border-radius: 22px;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.dot-grid-label {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.5px;
}

.dot-grid-label span {
  color: var(--indigo);
}

.dot-grid {
  display: flex;
  flex-direction: column;
  gap: var(--dot-gap, 10px);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot-grid.rotating {
  transform: rotate(90deg);
}

.dot-grid-row {
  display: flex;
  gap: var(--dot-gap, 10px);
  opacity: 0;
  animation: rowAppear 0.4s ease forwards;
}

.dot-grid-row.hidden {
  opacity: 0;
  animation: none;
}

.dot-grid-row.no-animation {
  opacity: 1;
  animation: none;
}

@keyframes rowAppear {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dot {
  width: var(--dot-size, 18px);
  height: var(--dot-size, 18px);
  border-radius: 50%;
  background: var(--indigo);
  flex-shrink: 0;
}

.dot-grid-wrapper.small {
  padding: 12px;
}

.dot-grid-wrapper.small .dot {
  width: 12px;
  height: 12px;
}

.dot-grid-wrapper.small .dot-grid-row {
  gap: 6px;
}

.dot-grid-wrapper.small .dot-grid {
  gap: 6px;
}

.dot-grid-result {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  letter-spacing: -0.3px;
}

.dot-grid-result.visible {
  opacity: 1;
}

.dot-grid-result strong {
  color: var(--indigo);
  font-weight: 600;
}

/* Révélation "lots" de l'intro division : les rangées deviennent des paquets
   distincts, puis un lot est mis en avant avec son compte (= le quotient). */
.dot-grid.lots {
  gap: 12px;
}

.dot-grid.lots .dot-grid-row {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--honey-soft);
  transition: background 0.4s ease, padding 0.4s ease, transform 0.3s ease;
}

.dot-grid-row.lot--highlight {
  position: relative;
  background: var(--honey);
  transform: scale(1.05);
}

.dot-grid-lot-count {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 14px;
  transform: translateY(-50%) scale(0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--honey);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  opacity: 0;
}

.dot-grid-lot-count.visible {
  animation: lotCountPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes lotCountPop {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Niveau 3 — rangée du reste : les points qui « ne rentrent pas » dans les
   rangées pleines (specs §12.4). Mis à part visuellement (coral, détachés de
   la grille par un léger espace) pour matérialiser l'écart. */
.dot-grid-row--rest {
  margin-top: calc(var(--dot-gap, 10px) * 1.5);
}

.dot--rest {
  background: var(--coral);
}

/* ===== components/ErrorBoundary.css ===== */
.error-boundary {
  min-height: 100vh;
  /* svh, pas dvh : cf. le commentaire sur #root dans index.css. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
}

.error-boundary-card {
  max-width: 32rem;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
}

.error-boundary-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--indigo-ink);
  margin-bottom: 0.75rem;
}

.error-boundary-text {
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.error-boundary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.error-boundary-primary,
.error-boundary-secondary {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}

.error-boundary-primary {
  background: var(--indigo);
  color: var(--paper);
}

.error-boundary-secondary {
  background: var(--paper);
  color: var(--indigo-ink);
  border-color: var(--line);
}

.error-boundary-details {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.error-boundary-details pre {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--cream-deep);
  padding: 0.75rem;
  border-radius: 8px;
  overflow-x: auto;
  margin-top: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== components/FeedbackModal.css ===== */
.modal-card.feedback-modal {
  max-width: 440px;
  padding: 20px;
}

.feedback-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: 4px;
}

.feedback-textarea,
.feedback-input {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--cream);
  color: var(--ink);
  box-sizing: border-box;
}

.feedback-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--sans);
}

.feedback-textarea:focus,
.feedback-input:focus {
  outline: none;
  border-color: var(--indigo);
}

.feedback-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
  line-height: 1.4;
}

.feedback-checkbox input[type='checkbox'] {
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.feedback-checkbox > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feedback-checkbox-hint {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
}

.feedback-error {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  background: var(--coral-soft);
  padding: 8px 12px;
  border-radius: 10px;
  margin: 0;
}

.feedback-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.feedback-cancel-btn,
.feedback-submit-btn {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: transform 0.1s ease;
}

.feedback-cancel-btn {
  background: var(--paper);
  color: var(--ink);
}

.feedback-submit-btn {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

.feedback-submit-btn:disabled,
.feedback-cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-submit-btn:active:not(:disabled),
.feedback-cancel-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0 4px;
}

.feedback-success-text {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--sage);
  margin: 0;
  text-align: center;
}

.feedback-unavailable {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  margin: 8px 0 0;
  text-align: center;
}

/* ===== components/FeedbackOverlay.css ===== */
.feedback-overlay {
  position: fixed;
  /* 30px ≈ hauteur de .session-header (dots de progression) pour qu'ils
     restent visibles en haut pendant le feedback. */
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
  padding: 20px;
  max-width: 480px;
  margin: 0 auto;
}

.feedback-overlay.correct {
  background: var(--cream);
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  /* Le bloc (étoile 180px + message + fait) mesure ~340px : sur un écran
     court, 120px fixes le feraient déborder par le bas, sans scroll. */
  padding-top: min(120px, 18vh);
}

.feedback-overlay.incorrect {
  background: var(--cream);
  padding: 10px 20px 20px;
  align-items: stretch;
}

.feedback-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 24px 20px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.feedback-overlay.incorrect .feedback-card {
  text-align: left;
  padding: 22px 22px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.feedback-star-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.feedback-star-rays {
  position: absolute;
  inset: 0;
  animation: scaleIn 0.3s ease;
}

.feedback-star-shape {
  position: relative;
  animation: starPop 0.5s ease;
}

@keyframes starPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.feedback-message {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-top: 10px;
  color: var(--ink);
  text-align: center;
}

.feedback-message.incorrect {
  font-size: 24px;
  color: var(--coral);
  margin: 0 0 10px;
  text-align: center;
}

.feedback-user-answer {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--coral);
  text-align: center;
  margin-bottom: 6px;
}

.feedback-user-answer b {
  font-weight: 800;
}

.feedback-answer {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.5px;
  display: block;
  margin-bottom: 12px;
}

/* Le rappel du fait est la vraie récompense pédagogique de l'écran : il doit
   se lire comme la question (même serif, taille proche des 52px de
   .formula-text) pour ancrer « 7 × 8 = 56 », pas comme une légende. */
.feedback-overlay.correct .feedback-answer {
  font-size: 38px;
  font-weight: 500;
  margin: 0;
}

.feedback-overlay.correct .feedback-answer b {
  color: var(--indigo);
  font-weight: 700;
}

.feedback-overlay.incorrect .feedback-answer b {
  color: var(--indigo);
}

.feedback-dotgrid {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.feedback-dotgrid-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
}

/* Strip the DotGrid card when inside the feedback overlay; the mockup shows
   dots on the plain card background with only an eyebrow label above. Also
   force 18px dots / 10px gap (the mockup size) regardless of the JS-
   calculated sizing — !important is needed because DotGrid sets the CSS
   vars via inline style. */
.feedback-dotgrid .dot-grid-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  --dot-size: 18px !important;
  --dot-gap: 10px !important;
}

.feedback-ok-btn {
  margin-top: 16px;
  width: 100%;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 0 var(--indigo-ink), 0 6px 20px rgba(79, 70, 186, 0.25);
  transition: transform 0.1s ease;
}

.feedback-ok-btn:active {
  transform: translateY(1px);
}

/* ===== components/Formula.css ===== */
/* Affichage partagé de la formule "A × B = ?". La typographie est définie
   ici ; le positionnement (padding/margin/width) reste géré au point
   d'appel via une classe spécifique à l'écran. */

.formula-text {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -1.5px;
  line-height: 1;
  text-align: center;
}

.formula-operator {
  color: var(--indigo);
  font-weight: 400;
  margin: 0 6px;
}

.formula-equals,
.formula-placeholder {
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 10px;
}

/* ===== components/LanguageToggle.css ===== */
.language-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.language-toggle-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.language-toggle-options {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cream-deep, rgba(30, 26, 46, 0.06));
  border-radius: 999px;
  width: fit-content;
}

.language-toggle-option {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.language-toggle-option.is-active {
  background: var(--indigo);
  color: #fff;
}

/* ===== components/Mascot.css ===== */
.mascot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  user-select: none;
  -webkit-user-select: none;
}

.mascot-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- Palette ---- */

.mascot-feet path,
.mascot-tuft {
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

.mascot-fill-body {
  fill: #F0B43A;       /* chick body */
  stroke: var(--ink);
  stroke-width: 1.6;
}

.mascot-fill-belly {
  fill: #FBD96C;       /* belly highlight */
}

.mascot-wing {
  fill: #FBD96C;
  stroke: var(--ink);
  stroke-width: 1.6;
  transform-origin: 30px 58px;  /* épaule — rotation autour de ce point */
  transform-box: fill-box;
}

.mascot-eye-iris {
  fill: var(--ink);
}

.mascot-eye-shine {
  fill: #fff;
}

.mascot-eye {
  transform-origin: center;
  transform-box: fill-box;
}

.mascot-beak {
  fill: #D9751F;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.mascot-cheek {
  fill: var(--coral);
  opacity: 0.35;
}

/* ---- Animations ----
   Les transformations s'appliquent aux sous-groupes (body, wing, eye) pour
   rester indépendantes. transform-box: fill-box permet de centrer les
   rotations sur l'élément SVG lui-même plutôt que sur l'origine du canvas. */

/* Respiration idle — très légère, infinie. */
.mascot-body {
  animation: mascotBreathe 3.4s ease-in-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}

@keyframes mascotBreathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-1.5px) scale(1.015, 0.985); }
}

/* Clignement d'œil périodique. On joue sur scaleY(0) très brièvement. */
.mascot-eye {
  animation: mascotBlink 5s ease-in-out infinite;
}

.mascot-eye-right {
  animation-delay: 0.08s;     /* très léger décalage pour un clignement naturel */
}

@keyframes mascotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.1); }
}

/* Battement d'aile très discret même au repos. */
.mascot-wing {
  animation: mascotWingIdle 2.8s ease-in-out infinite;
}

@keyframes mascotWingIdle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}

/* ---- Humeurs ---- */

/* Happy : petit rebond + battement d'aile plus marqué, non infini. */
.mascot.happy .mascot-body {
  animation:
    mascotBreathe 3.4s ease-in-out infinite,
    mascotHop 0.55s ease-in-out 2;
}

.mascot.happy .mascot-wing {
  animation: mascotWingFlap 0.28s ease-in-out 4;
}

@keyframes mascotHop {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10%; }
}

@keyframes mascotWingFlap {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-18deg); }
}

/* Celebrate : rebond plus ample + léger tangage, en boucle. */
.mascot.celebrate .mascot-body {
  animation:
    mascotBreathe 3.4s ease-in-out infinite,
    mascotCheer 0.7s ease-in-out infinite;
}

.mascot.celebrate .mascot-wing {
  animation: mascotWingFlap 0.3s ease-in-out infinite;
}

@keyframes mascotCheer {
  0%, 100% { translate: 0 0;      rotate: 0deg; }
  25%      { translate: 0 -16%;   rotate: -6deg; }
  50%      { translate: 0 0;      rotate: 0deg; }
  75%      { translate: 0 -16%;   rotate: 6deg; }
}

/* Flyaway : envol hors écran. forwards garde l'état final (transparent,
   hors champ) le temps que le parent retire le mascot du DOM. */
.mascot.flyaway {
  animation: mascotFlyAway 0.9s ease-in forwards;
  pointer-events: none;
}

.mascot.flyaway .mascot-body {
  animation: none;
}

.mascot.flyaway .mascot-wing {
  animation: mascotWingFlap 0.12s ease-in-out infinite;
}

@keyframes mascotFlyAway {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  15%  { transform: translate(0, -12px) rotate(-4deg); opacity: 1; }
  100% { transform: translate(60vw, -110vh) rotate(18deg); opacity: 0; }
}

/* ===== components/Medallion.css ===== */
/* Disque de badge, partagé par les trois surfaces qui l'affichent : la grille
   (.badge-medallion), la modale de détail (.badge-detail-medallion) et le
   récap de fin de séance (.recap-new-badge-medallion). Chacune garde sa taille
   et sa bordure ; seule l'apparence commune vit ici.

   La couleur du badge arrive en inline style (--medallion-color, cf.
   medallionColorFor dans lib/badges.ts). Le fond est un pastel dérivé de cette
   couleur : les emoji ont leurs propres couleurs et se noyaient dans un aplat
   saturé. Le 14 % reproduit les tokens *-soft de la palette tout en marchant
   pour n'importe quelle couleur. Les glyphes texte (×N / ÷N) reprennent la
   couleur du badge, assombrie vers l'encre pour garder du contraste. */
.medallion {
  --medallion: var(--medallion-color, var(--honey));
  background: color-mix(in srgb, var(--medallion) 14%, var(--paper));
  color: color-mix(in srgb, var(--medallion) 88%, var(--ink));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
}

/* ===== components/Modal.css ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: modal-fade-in 0.15s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px 18px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(20, 18, 14, 0.18);
  animation: modal-pop 0.18s ease;
}

@keyframes modal-pop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-close-btn {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: transform 0.1s ease;
}

.modal-close-btn:active {
  transform: translateY(1px);
}

/* ===== components/MysteryImage.css ===== */
.mystery-image-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}

.mystery-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--line-soft);
}

.mystery-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.mystery-cell {
  border: none;
  padding: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  transition: background 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}

.mystery-cell.mystery-level-0 {
  background: linear-gradient(135deg, var(--line-soft) 0%, var(--line) 100%);
  cursor: default;
}

.mystery-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 46, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.mystery-detail-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-md);
}

.mystery-detail-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0 0 16px 0;
  color: var(--ink);
}

.mystery-detail-box {
  margin: 12px 0 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mystery-detail-close {
  margin-top: 16px;
  padding: 12px 28px;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 0 var(--indigo-ink);
}

.mystery-detail-close:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--indigo-ink);
}

/* ===== components/NotificationSettings.css ===== */
/* Toggle « Rappel quotidien » de l'espace parent (cf. NotificationSettings.tsx). */
.notif-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--sans);
  box-sizing: border-box;
}

.notif-toggle:disabled {
  opacity: 0.6;
  cursor: progress;
}

.notif-toggle-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.2px;
}

.notif-switch {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--line);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.notif-switch--on {
  background: var(--sage);
}

.notif-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.notif-switch--on .notif-switch-knob {
  transform: translateX(18px);
}

.notif-message {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--coral);
}

/* ===== components/NumPad.css ===== */
.numpad-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.numpad-display {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  height: 50px;
  padding: 6px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--indigo);
  letter-spacing: 2px;
  position: relative;
}

.numpad-display-cursor {
  display: inline-block;
  width: 2px;
  height: 26px;
  background: var(--indigo);
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.numpad-btn {
  height: 56px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 800;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.numpad-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--line);
  background: var(--cream-deep);
}

.numpad-btn-backspace {
  font-size: 20px;
  color: var(--ink-soft);
}

.numpad-btn-backspace:active {
  background: var(--coral-soft);
  color: var(--coral);
}

.numpad-btn-ok {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--line-soft);
  color: var(--ink-muted);
  border: 1.5px solid var(--line);
  box-shadow: none;
  line-height: 1;
}

.numpad-btn-ok:not(:disabled) {
  background: var(--ink);
  color: var(--cream);
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 0 #000;
}

.numpad-btn-ok:not(:disabled):active {
  background: var(--ink);
  transform: translateY(2px);
  box-shadow: 0 0 0 #000;
}

.numpad-btn-ok:disabled {
  cursor: not-allowed;
}

.numpad-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== components/ParentGate.css ===== */
/* Le parent-gate veut être en haut de l'écran (le clavier mobile mange
   la moitié basse). On surcharge l'alignement de l'overlay et la
   max-width du card par rapport au défaut Modal. */
.modal-overlay.parent-gate-overlay {
  align-items: flex-start;
  padding: 40px 20px 20px;
  overflow-y: auto;
}

.modal-card.parent-gate-modal {
  max-width: 380px;
  padding: 24px 22px;
}

.parent-gate-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.parent-gate-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 18px;
  line-height: 1.4;
}

.parent-gate-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.parent-gate-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 10px;
  letter-spacing: -0.5px;
}

.parent-gate-times,
.parent-gate-equals {
  color: var(--ink-muted);
  font-weight: 500;
}

.parent-gate-input {
  width: 80px;
  padding: 6px 8px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--indigo);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-align: center;
  letter-spacing: -0.5px;
  box-sizing: border-box;
}

.parent-gate-input:focus {
  outline: none;
  border-color: var(--indigo);
}

.parent-gate-error {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  background: var(--coral-soft);
  padding: 8px 12px;
  border-radius: 10px;
  margin: 0;
  text-align: center;
}

.parent-gate-actions {
  display: flex;
  gap: 10px;
}

.parent-gate-cancel,
.parent-gate-submit {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: transform 0.1s ease;
}

.parent-gate-cancel {
  background: var(--paper);
  color: var(--ink);
}

.parent-gate-submit {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

.parent-gate-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.parent-gate-submit:active:not(:disabled),
.parent-gate-cancel:active {
  transform: translateY(1px);
}

/* ===== components/ProgressGrid.css ===== */
.progress-grid-container {
  padding: 16px;
  animation: fadeIn 0.3s ease;
}

.progress-grid-title {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text);
}

.progress-grid {
  display: grid;
  grid-template-columns: 32px repeat(8, 1fr);
  grid-template-rows: 32px repeat(8, 1fr);
  gap: 3px;
  max-width: 360px;
  margin: 0 auto;
}

.progress-grid-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-light);
}

.progress-grid-corner {
  /* empty top-left corner */
}

.progress-grid-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  border: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.progress-grid-cell:active {
  transform: scale(0.9);
}

.progress-grid-cell.box-0 {
  background: var(--box-gray);
  color: var(--text-muted);
}

.progress-grid-cell.box-1 {
  background: var(--box-red);
}

.progress-grid-cell.box-2 {
  background: var(--box-orange);
}

.progress-grid-cell.box-3 {
  background: var(--box-yellow);
  color: var(--text);
}

.progress-grid-cell.box-4 {
  background: var(--box-lightgreen);
}

.progress-grid-cell.box-5 {
  background: var(--box-green);
}

.progress-grid-cell.diagonal {
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.fact-detail {
  max-width: 320px;
  text-align: center;
}

.fact-detail-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--indigo);
  margin-bottom: 8px;
}

.fact-detail-line {
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* ===== components/StrategyHint.css ===== */
.strategy-hint {
  border-radius: 22px;
  padding: 18px 20px;
  text-align: left;
  animation: strategyHintIn 0.3s ease;
  width: 100%;
}

/* Intro de fait : carte blanche, icône honey en petit carré. */
.strategy-hint.intro {
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Feedback d'erreur : carte honeySoft avec bord honey. */
.strategy-hint.feedback {
  background: var(--honey-soft);
  border: 1.5px solid var(--honey);
  padding: 14px 16px;
  border-radius: 18px;
  margin: 12px 0 0;
}

.strategy-hint-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.strategy-hint-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--honey);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.strategy-hint-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

.strategy-hint-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--honey-ink);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.strategy-hint-body {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}

.strategy-hint-lines {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
  padding-left: 4px;
}

.strategy-hint.intro .strategy-hint-lines {
  color: var(--ink-soft);
  padding-left: 4px;
}

.strategy-hint.feedback .strategy-hint-lines {
  font-size: 13px;
  color: var(--ink);
  padding-left: 0;
}

.strategy-hint-line {
  overflow-wrap: break-word;
}

/* Division : équation à facteur manquant « divisor × ? = dividend » (§11.4).
   La case dashed honey évoque le slot à remplir — l'enfant cherche le facteur. */
.strategy-hint-pivot {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 800;
  font-size: 1.12em;
  color: var(--ink);
}

.strategy-hint-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.25em;
  border: 2px dashed var(--honey);
  border-radius: 8px;
  background: var(--paper);
  color: var(--honey-ink);
  font-weight: 800;
  line-height: 1;
}

.strategy-hint-recall {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
}

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

/* ===== components/StreakDetailModal.css ===== */
.streak-detail-modal {
  text-align: center;
}

.streak-detail-flame {
  display: flex;
  justify-content: center;
  margin: 4px auto 14px;
  animation: streak-detail-flame 1.2s ease-in-out infinite;
}

.streak-detail-flame.is-muted {
  animation: none;
}

@keyframes streak-detail-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.streak-detail-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.streak-detail-explanation {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
}

.streak-detail-record {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral-soft);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 14px;
}

.streak-detail-record-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.streak-detail-record-value {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--coral);
}

.streak-detail-freezes {
  margin: 6px 0 14px;
  padding: 12px 14px;
  background: var(--sky-soft);
  border-radius: 14px;
  text-align: left;
}

.streak-detail-freezes-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.streak-detail-freezes-icon {
  font-size: 18px;
  line-height: 1;
}

.streak-detail-freezes-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.streak-detail-freezes-explanation {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* ===== components/VoiceInput.css ===== */
.voice-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
}

.voice-mic {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 20px var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.voice-mic:active:not(.disabled) {
  transform: scale(0.96);
}

.voice-mic.listening {
  background: var(--secondary);
  animation: pulse 1.4s ease-in-out infinite;
}

.voice-mic.disabled {
  background: var(--box-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

.voice-mic-icon {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.voice-mic-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--secondary-light);
  opacity: 0.6;
  animation: voice-ring 1.4s ease-out infinite;
  pointer-events: none;
}

@keyframes voice-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.voice-transcript {
  min-height: 40px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 2px dashed var(--border);
  min-width: 180px;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-transcript-number {
  font-family: var(--serif, var(--sans));
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}

.voice-error {
  font-size: 0.95rem;
  color: var(--secondary);
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}

.voice-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.voice-fallback-msg {
  font-size: 1rem;
  color: var(--text-light);
  text-align: center;
  padding: 0 16px;
}

.voice-retry-btn {
  background: var(--primary-light);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
}

.voice-retry-btn:active {
  background: var(--primary);
  transform: scale(0.97);
}

.voice-retry-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== index.css ===== */
/* Les fontes sont chargées via <link> dans index.html (en parallèle, avec
   preconnect) — ne pas les ré-importer ici, sinon double téléchargement. */

:root {
  /* Surfaces */
  --cream: #FBF6EC;
  --cream-deep: #F3EADB;
  --paper: #FFFFFF;
  --ink: #1E1A2E;
  --ink-soft: #52495F;
  --ink-muted: #8A8295;
  --line: #E6DECE;
  --line-soft: #EFE7D6;

  /* Brand + semantic */
  --indigo: #4F46BA;
  --indigo-soft: #E8E6F7;
  --indigo-ink: #2B2478;

  --coral: #E8623D;
  --coral-soft: #FBE4DA;

  --honey: #D99A1F;
  --honey-soft: #F7E9C4;
  --honey-ink: #8C5A0A;

  --sage: #3F9B7A;
  --sage-soft: #D9EDE2;

  --sky: #3E7EB6;
  --sky-soft: #DDE9F4;

  /* Leitner scale */
  --box0: #E6DECE;
  --box1: #E8623D;
  --box2: #E8893D;
  --box3: #D99A1F;
  --box4: #7FAE6E;
  --box5: #3F9B7A;

  /* Typography */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Nunito', 'SF Pro Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30, 26, 46, 0.04);
  --shadow-md: 0 2px 4px rgba(62, 42, 16, 0.06), 0 8px 20px rgba(62, 42, 16, 0.06);

  /* Legacy aliases — kept so any unmigrated screen still resolves. */
  --primary: var(--indigo);
  --primary-light: #6D64D1;
  --primary-dark: var(--indigo-ink);
  --secondary: var(--coral);
  --secondary-light: #F2856A;
  --success: var(--sage);
  --success-light: #7FAE6E;
  --warning: var(--honey);
  --warning-light: #F1B856;
  --background: var(--cream);
  --surface: var(--paper);
  --text: var(--ink);
  --text-light: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --border: var(--line);
  --shadow: rgba(79, 70, 186, 0.15);

  --box-gray: var(--box0);
  --box-red: var(--box1);
  --box-orange: var(--box2);
  --box-yellow: var(--box3);
  --box-lightgreen: var(--box4);
  --box-green: var(--box5);
}

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

html, body {
  height: 100%;
  overflow-x: hidden;
  /* Pas de pull-to-refresh (Android : un enfant qui glisse vers le bas en
     haut de l'accueil rechargerait l'app en pleine utilisation) ni d'effet
     de sur-défilement en bord de page. Le scroll normal des écrans longs
     (espace parent, badges…) n'est pas affecté. */
  overscroll-behavior-y: none;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

#root {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  /* svh (small viewport), PAS dvh : après un location.reload() en PWA
     installée, Chrome Android (edge-to-edge, 135+) laisse 100dvh collé au
     large viewport (sous la barre gestuelle) alors que la fenêtre visible
     est plus petite → ~57px de scroll parasite sur des écrans qui ne
     doivent jamais scroller. 100svh ne peut par définition pas dépasser la
     fenêtre visible. L'éventuelle bande sous le contenu (barre d'URL
     repliée en mode navigateur) est invisible : body et #root partagent le
     même fond crème. Cf. TODO.md « migration edge-to-edge ». */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

button {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

input {
  font-family: var(--sans);
}

/* Prevent zoom on iOS */
input, select, textarea {
  font-size: 16px;
}

/* Utility animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes flame {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.1) scaleX(0.95); }
  50% { transform: scaleY(0.95) scaleX(1.05); }
  75% { transform: scaleY(1.05) scaleX(0.98); }
}

/* ---- Shared primitives ---- */

.back-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}

.back-btn:active {
  background: var(--cream-deep);
}

.screen-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 2px 0 var(--indigo-ink), 0 6px 20px rgba(79, 70, 186, 0.3);
  transition: transform 0.1s ease;
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--indigo-ink), 0 3px 10px rgba(79, 70, 186, 0.25);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.btn-ghost:active {
  transform: translateY(1px);
}

.card {
  background: var(--paper);
  border-radius: 18px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
}

/* ===== screens/BadgesScreen.css ===== */
.badges-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.3s ease;
  padding-bottom: 20px;
}

.badges-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 10px;
}

.badges-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.badges-back-btn:active {
  background: var(--cream-deep);
}

.badges-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.badges-banner {
  margin: 0 20px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badges-banner-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--honey);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.badges-banner-count {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.badges-banner-count span {
  opacity: 0.55;
  font-size: 18px;
  margin-left: 4px;
  font-weight: 500;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px;
}

/* ===== screens/ChangelogScreen.css ===== */
.changelog-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  padding: 1rem 1.25rem 3rem;
  position: relative;
}

.changelog-back-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.changelog-content {
  max-width: 40rem;
  margin: 0 auto;
  padding-top: 2.5rem;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
}

.changelog-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--indigo-ink);
  margin-bottom: 0.5rem;
}

.changelog-subtitle {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

.changelog-entry {
  margin-bottom: 1.75rem;
}

.changelog-entry h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--indigo-ink);
  margin-bottom: 0.5rem;
}

.changelog-entry ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.changelog-entry li {
  margin-bottom: 0.4rem;
}

/* ===== screens/HomeScreen.css ===== */
.home-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.4s ease;
  position: relative;
}

.home-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: transparent;
  gap: 12px;
}

.home-top-bar-left {
  display: flex;
  align-items: center;
}

.home-top-bar-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.home-streak-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.home-streak-pill:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.home-streak-pill:active {
  transform: translateY(1px);
}

.home-streak-pill-flame {
  line-height: 1;
  animation: flame 1s ease-in-out infinite;
  display: inline-flex;
}

.home-streak-pill-count {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  color: var(--coral);
}

.home-streak-pill-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.home-streak-pill-prompt {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.home-streak-pill-freeze {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.home-streak-pill-freeze-icon {
  font-size: 12px;
  line-height: 1;
}

.home-streak-pill-freeze-count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  color: var(--sky);
}

.home-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 18px;
}

.home-mascot-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
}

.home-cta-wrap + .home-nav {
  margin-top: 40px;
}

.home-mascot-wrap {
  text-align: center;
  position: relative;
  display: inline-block;
}

.home-cta-wrap {
  width: 100%;
  margin-bottom: 14px;
}

.home-mascot-halo {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--honey-soft) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.home-mascot-wrap > .mascot {
  position: relative;
  z-index: 1;
}

.home-mascot-tickle {
  background: none;
  padding: 0;
  position: relative;
  z-index: 1;
  display: inline-flex;
  border-radius: 50%;
}

.home-mascot-tickle:focus-visible {
  outline-offset: 6px;
}

.home-mascot-empty {
  width: 140px;
  height: 140px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.feather-svg {
  width: 72%;
  height: 72%;
  display: block;
  transform: rotate(28deg);
  animation: featherDrift 4.2s ease-in-out infinite;
}

@keyframes featherDrift {
  0%, 100% { transform: rotate(28deg) translateY(0); }
  50%      { transform: rotate(26deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .feather-svg {
    animation: none;
  }
}

.home-greeting {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 18px;
  letter-spacing: -0.5px;
  text-align: center;
}

.home-greeting span {
  color: var(--indigo);
}

.home-start-btn {
  padding: 18px 28px;
}

.home-done-msg {
  padding: 18px 24px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--sage);
  background: var(--sage-soft);
  border-radius: 18px;
  border: 1.5px solid var(--sage);
  text-align: center;
  width: 100%;
}

.home-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.home-nav-btn {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
  color: var(--ink);
  position: relative;
}

.home-nav-btn-dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--coral);
}

.home-nav-btn:active {
  transform: translateY(1px);
  background: var(--cream-deep);
}

.home-nav-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.home-nav-btn-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.home-chrome-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  -webkit-touch-callout: none;
  user-select: none;
}

.home-chrome-btn:active {
  background: var(--cream-deep);
}

/* ===== screens/ParentDashboard.css ===== */
.parent-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.3s ease;
  padding-bottom: 28px;
}

.parent-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.parent-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  cursor: pointer;
}

.parent-back-btn:active {
  background: var(--cream-deep);
}

.parent-header-titles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.parent-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.parent-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.parent-section {
  padding: 0 20px;
  margin-top: 18px;
}

.parent-section h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.parent-section-subtitle {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: -4px 0 10px;
}

.parent-section-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  vertical-align: 2px;
}

.parent-section-help:active {
  background: var(--line);
}

/* Stats grid: 2×2 sur mobile, 4 colonnes si possible */
.parent-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Division débloquée : la « Vue d'ensemble » ne garde que les 3 stats
   transverses (séances, série actuelle, meilleure série) → une seule rangée
   de 3 plutôt qu'une carte orpheline en 2 colonnes. */
.parent-stats-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* Carte de maîtrise de l'opération sélectionnée, sous le sélecteur. Réutilise
   .parent-stat-card pour l'habillage (cf. markup) : hors grille elle occupe
   toute la largeur (stat phare), et la valeur reprend l'indigo « maîtrise ». */
.parent-mastery-card .parent-stat-value {
  color: var(--indigo);
}

.parent-stat-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
}

.parent-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.parent-stat-value {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.parent-stats-grid .parent-stat-card:nth-child(2) .parent-stat-value {
  color: var(--coral);
}

.parent-stats-grid .parent-stat-card:nth-child(3) .parent-stat-value {
  color: var(--sage);
}

.parent-stats-grid .parent-stat-card:nth-child(4) .parent-stat-value {
  color: var(--indigo);
}

/* Sélecteur d'opération de l'espace parent : il gouverne les sections
   « Répartition » et « Grille Leitner » qui le suivent, PAS la « Vue
   d'ensemble » au-dessus (qui agrège mult + div). On l'écarte nettement
   de la carte du dessus et on le rapproche de la section qu'il contrôle
   pour que le regroupement visuel soit sans ambiguïté. */
.parent-op-tabs {
  margin-top: 28px;
  padding-bottom: 2px;
}

.parent-op-tabs + .parent-section {
  margin-top: 10px;
}

/* Box histogram */
.parent-histogram {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
  height: 130px;
  padding: 8px 14px 0;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
}

.parent-histogram-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}

.parent-histogram-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.parent-histogram-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.parent-histogram-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
}

/* Evolution chart */
.parent-evolution-chart {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 12px 8px 4px;
  overflow: hidden;
}

.parent-evolution-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Hard facts */
.parent-hard-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parent-hard-fact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 14px;
  border: 1.5px solid var(--line);
  gap: 10px;
}

.parent-hard-fact-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.parent-hard-fact-errors {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--coral);
  font-weight: 700;
}

/* Session history */
.parent-session-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parent-session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
}

.parent-session-date {
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}

.parent-session-score {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--indigo);
  margin-right: 12px;
  font-size: 14px;
}

.parent-session-time {
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 40px;
  text-align: right;
}

/* Action buttons */
.parent-actions {
  display: flex;
  gap: 10px;
  padding: 0 20px;
  margin-top: 18px;
}

.parent-section .parent-actions {
  padding: 0;
  margin-top: 0;
}

.parent-action-btn {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.1s ease;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.parent-action-btn:active {
  transform: translateY(1px);
  background: var(--cream-deep);
}

.parent-action-btn--danger {
  color: var(--box-red);
  border-color: var(--box-red);
}

.parent-action-btn--danger:active {
  background: color-mix(in srgb, var(--box-red) 12%, var(--paper));
}

.parent-import-area {
  margin-top: 10px;
  padding: 0 20px;
}

/* Panneau de transfert vers un autre appareil (QR + lien) */
.parent-transfer-area {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.parent-transfer-qr {
  /* Le canvas fait ~1 px par module : on l'agrandit en préservant les bords
     nets (pixelated), avec une marge blanche réglementaire autour. */
  width: 220px;
  height: 220px;
  image-rendering: pixelated;
  background: #fff;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}

.parent-transfer-hint {
  margin: 0;
  max-width: 360px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.parent-transfer-status {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.parent-transfer-status--error {
  color: var(--box-red);
}

.parent-import-textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 12px;
  min-height: 70px;
  resize: vertical;
  background: var(--paper);
  color: var(--ink);
}

.parent-import-confirm {
  margin-top: 10px;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--sage);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.2px;
}

.parent-import-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.parent-version {
  margin-top: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink);
  opacity: 0.35;
  letter-spacing: 0.4px;
}

/* Marqueur ×/÷ devant chaque ligne de « Faits les plus difficiles » : permet
   d'identifier l'opération dans la liste unifiée mult+div. */
.parent-hard-fact-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.parent-hard-fact-kind--mult {
  background: var(--indigo);
}

.parent-hard-fact-kind--div {
  background: var(--honey);
  color: var(--honey-ink);
}

.parent-hard-fact-kind--rem {
  background: var(--coral);
}

/* === Suivi à distance === */

/* Barre de fraîcheur du profil suivi, juste sous le sélecteur de source. */
.parent-remote-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px 4px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sage) 8%, var(--paper));
}

.parent-remote-status {
  font-size: 13px;
  color: var(--ink-soft);
}

.parent-remote-status--error {
  color: var(--box-red);
}

/* Bouton compact : il vit dans la barre, pas dans une grille d'actions. */
.parent-remote-refresh {
  flex-shrink: 0;
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
}

.parent-remote-refresh:disabled {
  opacity: 0.5;
}

/* Un bloc par sens du suivi (partager d'ici / suivre d'ailleurs). */
.parent-watch-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.parent-watch-list {
  margin: 14px 20px 0;
  border-top: 1.5px solid var(--line);
}

.parent-watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.parent-watch-name {
  font-weight: 700;
}

.parent-watch-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--box-red);
  text-decoration: underline;
  cursor: pointer;
}

/* ===== screens/PrivacyScreen.css ===== */
.privacy-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  padding: 1rem 1.25rem 3rem;
  position: relative;
}

.privacy-back-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.privacy-content {
  max-width: 40rem;
  margin: 0 auto;
  padding-top: 2.5rem;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
}

.privacy-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--indigo-ink);
  margin-bottom: 0.5rem;
}

.privacy-subtitle {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

.privacy-section {
  margin-bottom: 1.75rem;
}

.privacy-section h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--indigo-ink);
  margin-bottom: 0.5rem;
}

.privacy-section p {
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.privacy-section p:last-child {
  margin-bottom: 0;
}

.privacy-section ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
}

.privacy-section li {
  margin-bottom: 0.25rem;
}

.privacy-section strong {
  color: var(--ink);
  font-weight: 700;
}

.privacy-section code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--cream-deep);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.privacy-updated {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 2rem;
}

/* ===== screens/ProfileSelectScreen.css ===== */
.profile-select-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 20px;
  background: var(--cream);
  animation: fadeIn 0.5s ease;
}

.profile-select-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.profile-select-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.profile-select-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.profile-select-btn:active {
  transform: scale(0.98);
  border-color: var(--indigo);
}

.profile-select-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-select-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-select-add {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 10px 20px;
}

.profile-select-add:active {
  color: var(--ink);
}

/* ===== screens/ProgressScreen.css ===== */
.progress-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.3s ease;
}

.progress-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 10px;
}

.progress-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.progress-back-btn:active {
  background: var(--cream-deep);
}

.progress-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.progress-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 2px 20px 12px;
}

.progress-tab {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}

.progress-tab.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.progress-stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 20px 18px;
}

.progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.progress-stat-value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.5px;
}

.progress-stat:nth-child(1) .progress-stat-value {
  color: var(--indigo);
}

.progress-stat:nth-child(2) .progress-stat-value {
  color: var(--sage);
}

.progress-stat:nth-child(3) .progress-stat-value {
  color: var(--ink-soft);
}

.progress-stat-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}

.progress-legend {
  text-align: center;
  padding: 22px 24px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ===== screens/RecapScreen.css ===== */
.recap-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 36px 20px 22px;
  gap: 10px;
  background: var(--cream);
  animation: slideUp 0.4s ease;
}

.recap-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  text-align: center;
}

.recap-head .recap-mascot-wrap {
  margin-top: 18px;
}

.recap-head .recap-title {
  margin-top: 28px;
}

.recap-mascot-wrap {
  display: inline-block;
}

.recap-confetti {
  display: block;
  pointer-events: none;
}

.recap-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  letter-spacing: -0.5px;
}

.recap-message {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
  max-width: 320px;
}

.recap-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  width: 100%;
}

/* Table complete (rare) */
.recap-table-complete {
  background: var(--honey-soft);
  border-color: var(--honey);
  text-align: center;
}

.recap-table-complete-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.recap-table-complete-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--honey-ink);
  margin-top: 4px;
}

/* Gel de série (utilisé / gagné) */
.recap-freeze {
  background: var(--sky-soft);
  border-color: var(--sky);
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.recap-freeze-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.recap-freeze-text {
  flex: 1;
}

.recap-freeze-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.recap-freeze-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Carte « jalon image » : image entièrement révélée. Multiplication = déblocage
   du niveau 2 (teinte indigo), division = jalon ultime (teinte honey). Structure
   commune, couleur par mode. */
.recap-milestone {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.recap-milestone--mult {
  background: var(--indigo-soft);
  border-color: var(--indigo);
}

.recap-milestone--div {
  background: var(--honey-soft);
  border-color: var(--honey);
}

.recap-milestone--rem {
  background: var(--sage-soft);
  border-color: var(--sage);
}

.recap-milestone-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.recap-milestone-text {
  flex: 1;
}

.recap-milestone-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.recap-milestone-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Image changed CTA */
.recap-image-link {
  background: var(--sage-soft);
  border: 1.5px solid var(--sage);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease;
}

.recap-image-link:active {
  transform: translateY(1px);
}

.recap-image-link-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--paper);
  border: 1.5px solid var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recap-image-link-text {
  flex: 1;
}

.recap-image-link-teaser {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.recap-image-link-cta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo);
  margin-top: 2px;
}

.recap-image-link-plain {
  align-self: center;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo);
  padding: 4px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Progress card */
.recap-progress-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recap-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.recap-progress-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.recap-progress-count {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.recap-progress-count b {
  color: var(--sage);
  font-size: 18px;
  font-weight: 700;
  margin-right: 2px;
}

.recap-progress-bar {
  height: 10px;
  background: var(--line-soft);
  border-radius: 5px;
  overflow: hidden;
}

.recap-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage), #58B891);
  border-radius: 5px;
  transition: width 1s ease;
}

/* New badge card */
.recap-new-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recap-new-badge {
  background: var(--honey-soft);
  border-color: var(--honey);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  animation: scaleIn 0.5s ease backwards;
}

/* Apparence commune (fond pastel, couleur du glyphe) dans Medallion.css :
   avant, tous les badges apparaissaient ici en corail foncé quelle que soit
   leur couleur réelle, et l'emoji s'y noyait. */
.recap-new-badge-medallion {
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--medallion) 25%, transparent), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.recap-new-badge-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--honey-ink);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.recap-new-badge-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin-top: 2px;
}

.recap-btn {
  margin-top: auto;
  padding: 18px 28px;
  width: 100%;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--cream);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 0 #000, 0 6px 20px rgba(30, 26, 46, 0.25);
  transition: transform 0.1s ease;
  cursor: pointer;
}

.recap-btn:active {
  transform: translateY(1px);
}

@keyframes starPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ===== screens/RulesIntroScreen.css ===== */
.rules-intro-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 20px;
  background: var(--cream);
  animation: fadeIn 0.5s ease;
}

.rules-intro-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: slideUp 0.4s ease;
  text-align: center;
  max-width: 340px;
  width: 100%;
}

.rules-intro-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  animation: scaleIn 0.4s ease;
}

.rules-intro-badge-indigo {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.rules-intro-badge-coral {
  background: var(--coral-soft);
  color: var(--coral);
}

.rules-intro-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--indigo);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.rules-intro-subtitle {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.rules-intro-subtitle strong {
  color: var(--ink);
  font-weight: 800;
}

.rules-intro-message {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}

.rules-intro-message strong {
  font-weight: 800;
  color: var(--indigo);
}

.rules-intro-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  max-width: 280px;
}

.rules-intro-example {
  background: var(--cream);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border: 1.5px solid var(--line);
  animation: scaleIn 0.3s ease both;
}

.rules-intro-example:nth-child(1) { animation-delay: 0.2s; }
.rules-intro-example:nth-child(2) { animation-delay: 0.35s; }

.rules-intro-highlight {
  color: var(--indigo);
  font-weight: 700;
}

.rules-intro-tip {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.rules-intro-btn {
  margin-top: 8px;
  max-width: 320px;
}

.rules-intro-dots {
  display: flex;
  gap: 8px;
}

.rules-intro-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: all 0.3s ease;
}

.rules-intro-dot.active {
  width: 24px;
  background: var(--ink);
}

/* --- Glisse-nombre visual --- */

.glisse-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 4px;
  padding: 14px 12px;
  background: var(--cream);
  border-radius: 12px;
  border: 1.5px solid var(--line);
}

.glisse-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.glisse-labels {
  display: grid;
  grid-template-columns: 40px 40px;
  gap: 4px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.glisse-labels span {
  text-align: center;
}

.glisse-row {
  display: grid;
  grid-template-columns: 40px 40px;
  gap: 4px;
}

.glisse-cell {
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 8px;
}

.glisse-cell.empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
}

.glisse-cell.slide-in-left {
  animation: glisseSlideLeft 1.4s ease-out both;
  animation-delay: 1.5s;
  color: var(--coral);
  border-color: var(--coral);
}

.glisse-cell.fade-in-zero {
  animation: glisseFadeZero 0.8s ease-out both;
  animation-delay: 3.4s;
  color: var(--coral);
  background: var(--coral-soft);
  border-color: var(--coral);
}

.glisse-caption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}

.glisse-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink-muted);
}

.glisse-arrow-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
}

.glisse-arrow-icon {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink-muted);
}

@keyframes glisseSlideLeft {
  0% {
    transform: translateX(44px);
    opacity: 0;
  }
  60% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes glisseFadeZero {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== screens/RulesScreen.css ===== */
.rules-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.3s ease;
}

.rules-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 10px;
}

.rules-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.rules-back-btn:active {
  background: var(--cream-deep);
}

.rules-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 20px 24px;
  overflow-y: auto;
}

.rules-intro {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}

.rule-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  animation: slideUp 0.4s ease both;
}

.rule-card:nth-child(3) {
  animation-delay: 0.1s;
}

.rule-card:nth-child(4) {
  animation-delay: 0.2s;
}

.rule-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rule-card-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}

.rule-card-indigo .rule-card-badge {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.rule-card-coral .rule-card-badge {
  background: var(--coral-soft);
  color: var(--coral);
}

.rule-card-honey .rule-card-badge {
  background: var(--honey-soft);
  color: var(--honey-ink, var(--honey));
}

.rule-card-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rule-card-heading {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.rule-card-message {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 12px;
}

.rule-card-message b {
  font-weight: 800;
}

.rule-glisse {
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 12px;
  margin-bottom: 12px;
}

.rule-glisse-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.rule-slot {
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 8px;
}

.rule-slot-empty {
  border-style: dashed;
  background: transparent;
}

.rule-slot-digit {
  color: var(--coral);
  border-color: var(--coral);
}

.rule-slot-zero {
  color: var(--coral);
  background: var(--coral-soft);
  border-color: var(--coral);
}

.rule-slot-honey {
  color: var(--honey-ink);
  border-color: var(--honey);
}

.rule-slot-echo {
  background: var(--honey-soft);
  animation: ruleEcho 0.6s ease-out 0.3s both;
}

@keyframes ruleEcho {
  0%   { opacity: 0; transform: translateX(-8px) scale(0.7); }
  60%  { opacity: 1; transform: translateX(0) scale(1.08); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rule-slot-echo {
    animation: none;
  }
}

.rule-glisse-arrow {
  margin: 0 6px;
  font-family: var(--sans);
  font-weight: 800;
  color: var(--ink-muted);
}

.rule-glisse-caption {
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 8px;
}

.rule-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.rule-example {
  background: var(--cream);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  animation: scaleIn 0.3s ease both;
}

.rule-example:nth-child(1) { animation-delay: 0.15s; }
.rule-example:nth-child(2) { animation-delay: 0.25s; }
.rule-example:nth-child(3) { animation-delay: 0.35s; }
.rule-example:nth-child(4) { animation-delay: 0.45s; }

.rule-example-highlight {
  color: var(--indigo);
  font-weight: 700;
}

.rule-card-coral .rule-example-highlight {
  color: var(--coral);
}

.rule-card-honey .rule-example-highlight {
  color: var(--honey-ink);
}

.rule-card-tip {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
  font-style: italic;
}

/* ===== screens/SessionScreen.css ===== */
.session-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  animation: fadeIn 0.3s ease;
}

/* Header : barrettes de progression centrées */
.session-header {
  display: flex;
  justify-content: center;
  padding: 14px 20px 4px;
}

.session-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.session-progress-dot {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: var(--line-soft);
  flex-shrink: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
}

.session-progress-dot.correct {
  background: var(--sage);
}

.session-progress-dot.incorrect {
  background: var(--coral);
}

.session-progress-dot.current {
  width: 18px;
  background: var(--indigo);
}

/* Phase d'introduction d'un fait nouveau */
.session-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 24px 20px;
  gap: 14px;
  animation: slideUp 0.4s ease;
  text-align: center;
}

.session-intro > .session-intro-btn {
  margin-top: auto;
}

.session-intro-title {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  color: var(--indigo);
  letter-spacing: -0.5px;
  margin-top: 4px;
}

.session-intro-formula {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1;
  margin-top: 6px;
}

.session-intro-operator {
  color: var(--indigo);
  font-weight: 400;
  margin: 0 8px;
}

.session-intro-result {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-top: 6px;
}

.session-intro-result b {
  color: var(--indigo);
  font-weight: 600;
}

.session-intro-explanation {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.55;
  max-width: 320px;
}

.session-intro-explanation strong {
  color: var(--indigo);
  font-weight: 800;
}

.session-intro-commutativity {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.55;
}

.session-intro-commutativity strong {
  color: var(--indigo);
  font-weight: 800;
}

.session-intro-btn {
  max-width: 320px;
  padding: 18px 28px;
}

/* Phase question */
.session-question {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 20px 0;
  animation: slideUp 0.3s ease;
}

.session-question-text {
  padding: 12px 0 14px;
  width: 100%;
}

.session-numpad-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 4px;
  gap: 28px;
}

.session-input-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--indigo-soft);
  border: 1.5px solid var(--indigo);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--indigo-ink);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.12s ease;
}

.session-input-switch:active:not(:disabled) {
  transform: translateY(1px);
}

.session-input-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Niveau 3 — libellé de l'étape de saisie (« Combien de fois ? » puis
   « Il reste combien ? », specs §12.5). */
.session-rem-step {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

/* « reste » intercalé dans la formule (« 45 ÷ 7 = 6, reste ? »). La virgule
   colle au quotient (::before sans marge gauche) et l'espacement se fait par
   marges explicites — l'espace typographique serait illisible à 0.45em. Encre
   douce, pas de couleur d'alerte : ce n'est pas un signal, juste un mot. */
.formula-remainder {
  margin: 0 0.25em 0 0;
  font-size: 0.45em;
  font-weight: 700;
  color: var(--ink-soft);
}
.formula-remainder::before {
  content: ',';
  margin-right: 0.4em;
  color: var(--ink);
}

/* ===== screens/WelcomeScreen.css ===== */
.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 20px;
  background: var(--cream);
  animation: fadeIn 0.5s ease;
}

/* Étape test de placement : contenu ancré en haut (pas centré vertic.). */
.welcome-screen:has(.welcome-test-progress) {
  justify-content: flex-start;
  padding: 14px 20px 24px;
}

/* Étape prénom : ancrer en haut pour que le clavier mobile ne masque pas
   le titre/input/bouton. Combiné à `interactive-widget=resizes-content`
   dans la viewport meta, iOS 17+ réduit la zone visible quand le clavier
   apparaît, donc tout reste visible. */
.welcome-screen:has(.welcome-step-name) {
  justify-content: flex-start;
  padding-top: 32px;
}

/* Sur écran court (petits téléphones, ou clavier ouvert sur navigateurs
   plus anciens qui n'honorent pas interactive-widget), réduire la
   mascotte pour garder titre + input + bouton visibles. */
@media (max-height: 640px) {
  .welcome-step-name .mascot {
    width: 90px;
    height: 90px;
  }
}

.welcome-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: slideUp 0.4s ease;
  text-align: center;
  max-width: 340px;
  width: 100%;
}

.welcome-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.welcome-subtitle {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 300px;
}

.welcome-input {
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  border: 1.5px solid var(--indigo);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 320px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.welcome-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

.welcome-input::placeholder {
  color: var(--ink-muted);
  font-weight: 500;
}

.welcome-btn {
  max-width: 320px;
}

.welcome-btn-skip {
  width: 100%;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.welcome-btn-skip:active:not(:disabled) {
  color: var(--ink);
}

.welcome-btn-skip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Placement test */
.welcome-test-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  max-width: 100%;
  padding: 0 8px;
}

.welcome-test-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--line-soft);
  transition: all 0.3s ease;
}

.welcome-test-progress-dot.done {
  background: var(--sage);
}

.welcome-test-progress-dot.current {
  width: 14px;
  background: var(--indigo);
}

.welcome-test-question {
  margin-top: 12px;
  margin-bottom: 6px;
}

.welcome-test-answer {
  color: var(--ink);
  margin-left: 10px;
}

.welcome-dontknow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

.welcome-dontknow:active {
  background: var(--cream-deep);
}

.welcome-dontknow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.welcome-dontknow-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
}

.welcome-test-feedback {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 700;
  animation: slideUp 0.2s ease;
}

.welcome-test-feedback.correct {
  color: var(--sage);
}

.welcome-test-feedback.incorrect {
  color: var(--coral);
}

.welcome-test-hint {
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 4px;
}

.welcome-dots {
  display: flex;
  gap: 8px;
}

.welcome-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: all 0.3s ease;
}

.welcome-dot.active {
  width: 24px;
  background: var(--ink);
}

/* Import d'une progression existante (migration / changement d'appareil),
   accessible depuis le 1er écran du Welcome. Volontairement discret. */
.welcome-import-link {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--muted, #888);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

/* Scan du QR de transfert (caméra in-app) */
/* Cadre de la caméra de scan — partagé par les deux appairages par QR
   (transfert ici, suivi à distance dans l'espace parent). Le build concatène
   tous les .css en un seul fichier, donc une règle groupée suffit. */
.welcome-scan-video,
.parent-scan-video {
  width: min(300px, 78vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: #000;
}

.welcome-scan-status {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  max-width: 320px;
}

.welcome-import-textarea {
  width: 100%;
  max-width: 320px; /* aligné sur .welcome-btn */
  min-height: 90px;
  box-sizing: border-box;
  resize: vertical;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: #fff;
  color: var(--ink);
}

.welcome-import-error {
  color: #D9534F;
  font-size: 0.88rem;
  text-align: center;
}

/* ===== static-landing.css ===== */
.landing {
  flex: 1;
  /* #root est un shell `100svh; overflow:hidden` (les écrans de l'app scrollent
     en interne). Depuis l'ajout de la section démo, la landing dépasse un écran :
     on en fait son propre conteneur scrollable plutôt que de toucher au shell.
     `min-height: 0` lève le min-height:auto du flex ; `max-height: 100svh` borne
     la hauteur (sans ça le flex grandit à hauteur du contenu = pas de scroll ;
     svh et pas dvh : cf. le commentaire sur #root dans index.css). */
  min-height: 0;
  max-height: 100svh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  padding: 28px 22px 32px;
  animation: fadeIn 0.3s ease;
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

.landing-mascot {
  width: 130px;
  height: 130px;
  margin-bottom: 8px;
}

.landing-title {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -1px;
  margin: 0 0 6px;
  line-height: 1;
}

.landing-tagline {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  max-width: 320px;
}

/* Bandeau de réassurance sous la tagline : pour un inconnu qui arrive froid,
   dit explicitement « gratuit », l'âge/niveau ciblé et que la division est
   couverte — infos absentes du reste de la landing (cf. audit cold-start).
   Même style de pastille indigo que l'image de partage (og-image). */
.landing-badges {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.landing-badge {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  color: var(--indigo-ink);
  background: var(--indigo-soft);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.landing-principles {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-principles li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.landing-principles li strong {
  font-weight: 800;
  color: var(--ink);
}

.landing-principle-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--indigo-soft);
  color: var(--indigo-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Démo vidéo 9:16 (aperçu de l'app). La vidéo a un fond crème identique à la
   landing, donc le mockup téléphone qu'elle contient « flotte » sur la page ;
   on enrobe juste d'un coin arrondi + ombre douce pour délimiter l'écran. */
.landing-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 28px;
}

.landing-demo-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 0 0 16px;
  text-align: center;
}

.landing-demo-frame {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: var(--shadow-md);
}

.landing-demo-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plus de bottom-pin (`margin-top: auto`) : la section démo allonge toujours la
   page au-delà du viewport, donc le pin ne ferait que créer un trou avant le
   CTA. Flux naturel, séparé du bloc démo par sa marge basse. */
.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-install-btn {
  width: 100%;
  max-width: 360px;
  padding: 16px 20px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  border: none;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 0 var(--indigo-ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.landing-install-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--indigo-ink);
}

.landing-install-hint {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 8px 0 22px;
  max-width: 340px;
  text-align: center;
}

.landing-skip-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
}

.landing-skip-warning {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 6px 0 0;
  max-width: 320px;
  text-align: center;
}

.landing-guide-link {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* === Panneau d'aide à l'installation, montré au clic "Installer" quand aucun
   prompt natif n'est disponible. Deux variantes partagent ce style : iOS
   (#ios-install-help) et desktop sans prompt (#desktop-install-help) — le
   handler choisit selon la classe `html.is-ios` posée par le script du <head>. === */

.install-help {
  display: none;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  margin: 16px;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-md);
  align-self: center;
}

.install-help.visible {
  display: block;
}

.install-help h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.install-help p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.install-help ol {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 22px;
  margin: 0 0 14px;
}

.install-help ol li {
  margin-bottom: 8px;
}

.install-help ol li strong {
  color: var(--indigo-ink);
}

/* On décrit l'action par son ICÔNE plutôt que par sa position : le bouton de
   partage iOS est en bas (iPhone) ou en haut (iPad), et son emplacement dépend
   en plus du réglage « barre d'adresse » — impossible à détecter côté web. Une
   instruction unique, centrée sur l'icône, marche dans tous les cas. */
.install-help .ios-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin: 0 1px;
  vertical-align: -6px;
  color: var(--indigo-ink);
  background: var(--indigo-soft);
  border-radius: 7px;
}

/* Présentation commune aux deux glyphes (partage, « + ») : factorisée ici pour
   que le markup inline ne porte que le viewBox + le tracé. */
.install-help .ios-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install-help .ios-step-hint {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* « Ouvre dans Safari » : utile seulement hors Safari. Par défaut on suppose
   Safari (préambule masqué, intro directe), et l'inline script du <head> pose
   `html.ios-other-browser` pour Chrome/Firefox/Edge… iOS — on inverse alors. */
.install-help .ios-open-in-safari { display: none; }
html.ios-other-browser .install-help .ios-open-in-safari { display: block; }
html.ios-other-browser .install-help .ios-intro { display: none; }

.install-note {
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  margin: 0;
}