/* ============================================================================
   system.css — shared component layer for the redesign ("Système visuel").
   Tokens live in core/tokens.css (load it first); icons in core/icons.js.
   Reusable across all four pages: load AFTER tokens.css, BEFORE the page's own
   layout CSS. Ported from references/appreciation/system.css.
   ============================================================================ */

.icon { width: 24px; height: 24px; stroke: currentColor; fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  padding: 0.7rem 1.4rem; transition: transform .15s var(--ease), filter .2s, background .2s, border-color .2s;
}
.btn .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-good { background: var(--good); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-good:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-soft { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-soft:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Round icon control ---- */
.ctrl {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), color .2s, border-color .2s, background .2s;
  text-decoration: none;
}
.ctrl .icon { width: 22px; height: 22px; }
.ctrl:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.ctrl:active { transform: scale(0.94); }
.ctrl.gear:hover { transform: rotate(45deg); }
.ctrl.is-muted { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2) 50%, var(--line)); }

/* ---- Picto card — the core component ---- */
.picto {
  position: relative; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.9rem 0.8rem; border-radius: var(--r-lg);
  background: var(--surface); border: 2.5px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.picto .tile {
  width: 96px; height: 96px; border-radius: var(--r-md); background: var(--tile);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line);
}
.picto .tile img { width: 84px; height: 84px; object-fit: contain; }
.picto .lbl { font-weight: 800; font-size: 1.05rem; }
.picto:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); box-shadow: var(--shadow-md); }
.picto:active { transform: scale(0.97); }
.picto .badge {
  position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-ink); background: var(--good);
  box-shadow: var(--shadow-sm); opacity: 0; transform: scale(0.4); transition: opacity .2s, transform .25s var(--ease);
}
.picto .badge .icon { width: 19px; height: 19px; stroke-width: 3; }
.picto .replay {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 80%, transparent); border: 1px solid var(--line);
  opacity: 0; transition: opacity .2s;
}
.picto .replay .icon { width: 15px; height: 15px; }
.picto:hover .replay { opacity: 1; }
.picto.chosen { border-color: var(--good); box-shadow: 0 0 0 4px color-mix(in oklab, var(--good) 30%, transparent), var(--shadow-md); }
.picto.chosen .badge { opacity: 1; transform: scale(1); }

/* Festive selection ring — only added on the higher-energy ambiances (theme.js
   toggles .festive). Calmer ambiances keep the clean ring above. */
@property --rb { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes sys-spin { to { --rb: 360deg; } }
.picto.festive.chosen::after {
  content: ''; position: absolute; inset: -6px; border-radius: calc(var(--r-lg) + 4px); padding: 4px;
  background: conic-gradient(from var(--rb), var(--accent), var(--joy), var(--good), var(--accent-2), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sys-spin 4s linear infinite; pointer-events: none;
}

/* ---- Gallery art card ---- */
.artcard {
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); text-align: left; font-family: inherit; color: var(--ink); padding: 0;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .2s;
}
.artcard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-2); }
.artcard .cap { padding: 0.75rem 0.9rem; }
.artcard .cap .ti { font-weight: 800; font-size: 0.98rem; line-height: 1.2; }
.artcard .cap .ar { font-weight: 700; font-size: 0.8rem; color: var(--ink-2); margin-top: 0.15rem; }
.artcard:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-lg); }

/* ---- Question bar + voice ---- */
.qbar {
  display: flex; align-items: center; gap: 0.8rem; justify-content: center;
  padding: 0.9rem 1.2rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.qbar .q { font-size: 1.3rem; font-weight: 800; color: var(--accent); text-align: center; }
.qbar .speak {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--accent-ink); background: var(--accent);
  border: none; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), filter .2s;
}
.qbar .speak .icon { width: 22px; height: 22px; stroke-width: 2; }
.qbar .speak:hover { transform: scale(1.08); filter: brightness(1.05); }
.qbar .speak:active { transform: scale(0.94); }

/* ---- Level switch N1/N3/N5 ---- */
.levels { display: inline-flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.levels button {
  border: none; cursor: pointer; font-family: inherit; font-weight: 900; font-size: 0.95rem;
  color: var(--ink-2); background: transparent; padding: 0.5rem 1.1rem; border-radius: var(--r-pill);
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.levels button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.levels button:active { transform: scale(0.95); }

/* ---- Frame + highlight overlay ---- */
.frame {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 6px solid var(--tile); box-shadow: var(--shadow-md); background: var(--surface-2);
}
.frame img { display: block; width: 100%; height: auto; }
.frame .ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.frame .hl {
  fill: color-mix(in oklab, var(--joy) 22%, transparent);
  stroke: var(--joy); stroke-width: 1; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--joy) 70%, transparent));
  animation: hlpulse 1.6s ease-in-out infinite alternate;
}
@keyframes hlpulse { from { opacity: 0.55; stroke-width: 2; } to { opacity: 1; stroke-width: 3.5; } }

/* ---- Reward toast + star ---- */
.toast {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.2rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.toast .star {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--accent-ink); background: linear-gradient(150deg, var(--joy), var(--accent-2));
}
.toast .star .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.toast .tx b { display: block; font-size: 1.2rem; font-weight: 900; }
.toast .tx span { font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
@keyframes pop-in { 0% { transform: scale(0.6) translateY(8px); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.toast.demo { animation: pop-in .5s var(--ease) both; }

/* ---- Confetti ---- */
.confetti { position: fixed; top: -12px; width: 11px; height: 22px; z-index: 9999; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { 0% { transform: translateY(-10vh) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(680deg); opacity: 0; } }

/* ---- Mini modal (teacher gate) ---- */
.mini-modal { max-width: 360px; }
.mini-modal .mm-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); margin-bottom: 0.9rem; }
.mini-modal h3 { font-size: 1.15rem; font-weight: 900; }
.mini-modal label { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: 0.9rem 0 0.35rem; }
.mini-modal input {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); font-family: inherit; font-size: 1.05rem;
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--ink); outline: none; transition: border-color .15s;
}
.mini-modal input:focus { border-color: var(--accent); }
.mini-modal .mm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .picto.festive.chosen::after, .frame .hl, .confetti { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}