/* Alpage · composants partagés. Remplace .opt, .qcard, .feedback, .chbanner, .res-* des 4 style.css.
   Chargé seulement dans les pages déjà migrées (pour l'instant games/conjugaison) : ses noms de classe
   (.feedback, .chip, .q-line, .badge, .progress…) entrent en collision avec les anciens style.css et hub.css. */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-text); -webkit-font-smoothing: antialiased; }
a { color: var(--xp); } a:hover { color: var(--ink); }
.title, h1, h2, h3 { font-family: var(--font-title); font-weight: 600; margin: 0; text-wrap: pretty; }

/* Bouton : tout ce qui se touche a une marche et s'enfonce à l'appui */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 28px; border: 0; border-radius: var(--r-btn);
  font: 600 19px/1 var(--font-title); cursor: pointer;
  background: var(--action); color: var(--action-ink); box-shadow: 0 var(--step) 0 var(--action-edge);
  transition: transform var(--t-press), box-shadow var(--t-press); }
.btn:active { transform: translateY(var(--step)); box-shadow: 0 0 0 transparent; }
.btn:focus-visible { outline: 3px solid var(--xp); outline-offset: 3px; }
.btn--secondary { background: var(--surface); color: var(--ink); border: var(--border-w) solid var(--line); box-shadow: 0 calc(var(--step) - 1px) 0 var(--edge); }
.btn--subject { background: var(--subj); color: var(--subj-ink); box-shadow: 0 var(--step) 0 var(--subj-edge); }
.btn--good { background: var(--good); color: var(--good-btn-ink); box-shadow: 0 var(--step) 0 var(--good-edge); }
.btn--bad { background: var(--bad); color: var(--bad-btn-ink); box-shadow: 0 var(--step) 0 var(--bad-edge); }
.btn--link { background: none; box-shadow: none; color: var(--xp); font: 600 16px var(--font-text); min-height: 48px; padding: 0 18px; }
.btn:disabled { background: var(--line); color: var(--ink-mute); box-shadow: none; cursor: default; }
.btn--icon { width: 48px; min-height: 48px; padding: 0; font-size: 22px; }
.btn--block { width: 100%; }

/* Tuile de réponse */
.answer { min-height: var(--tile-h); padding: 10px 12px; border-radius: var(--r-tile);
  background: var(--surface); color: var(--ink); border: var(--border-w) solid var(--line); box-shadow: 0 calc(var(--step) - 2px) 0 var(--edge);
  font: 600 var(--fs-answer)/1.2 var(--font-text); display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; cursor: pointer;
  transition: transform var(--t-press); }
.answer:active { transform: translateY(2px); }
.answer[aria-pressed="true"] { background: var(--subj-tint); border-color: var(--subj-vif); box-shadow: 0 calc(var(--step) - 2px) 0 var(--subj-vif); color: var(--subj-ink); }
.answer.is-good { background: var(--good-tint); border-color: var(--good-line); box-shadow: 0 calc(var(--step) - 2px) 0 var(--good-line); color: var(--good-ink); animation: ds-pop var(--t-pop) var(--ease-spring); }
.answer.is-bad { background: var(--bad-tint); border-color: var(--bad-line); box-shadow: 0 calc(var(--step) - 2px) 0 var(--bad-line); color: var(--bad-ink); animation: ds-shake 300ms; }
.answer.is-reveal { border-style: dashed; border-color: var(--good-line); color: var(--good-ink); box-shadow: none; }
.answer.is-dim { border-color: var(--surface-2); color: var(--ink-disabled); box-shadow: none; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.answers--one { grid-template-columns: 1fr; }
.answers--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer { overflow-wrap: anywhere; }
.answer__icon { font-weight: 700; }
/* .is-good / .is-bad doivent toujours contenir une icône ph-check / ph-x */

/* Question */
.q-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--subj-tint); color: var(--subj-ink); font: 600 13px var(--font-text); }
.q-prompt { color: var(--ink-2); font-size: var(--fs-body); }
.q-prompt b { color: var(--subj-text); font-weight: 600; }
.q-line { font: 600 var(--fs-question)/1.25 var(--font-text); }
.q-blank { display: inline-block; min-width: 4ch; border-bottom: 4px solid var(--subj-vif); color: var(--subj-text); text-align: center; }

/* Barre du haut de jeu + progression */
.game-top { display: flex; align-items: center; gap: var(--sp-3); }
.progress { flex: 1; height: 16px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 8px; background: var(--subj-vif); box-shadow: inset 0 -4px 0 oklch(0.72 0.09 var(--h)); transition: width var(--t-sheet) var(--ease-out); }
.progress--xp > i { background: var(--action); box-shadow: none; }
.segments { display: flex; gap: 4px; } .segments > i { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); } .segments > i.on { background: var(--streak); }

/* Zone d'action fixe en bas + bandeau de feedback */
.action-bar { position: sticky; bottom: 0; display: flex; gap: 10px; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 2px solid var(--surface-2); }
.feedback { position: fixed; inset: auto 0 0 0; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; gap: 14px; animation: ds-sheet-up var(--t-sheet) var(--ease-out); }
.feedback--good { background: var(--good-tint); color: var(--good-ink); }
.feedback--bad { background: var(--bad-tint); color: var(--bad-ink); }
.feedback__title { font: 600 24px var(--font-title); }
.feedback__row { display: flex; align-items: flex-start; gap: 12px; }
.feedback__text { font-size: var(--fs-body); line-height: 1.4; margin-top: 4px; }
.feedback__text:empty { display: none; }
.feedback__text b { font-weight: 600; }
.feedback .mascot--head { width: 52px; height: 52px; }
.feedback[hidden] { display: none; }
.feedback > .feedback__row, .feedback > .btn { width: 100%; max-width: 560px; margin-inline: auto; }
/* Variante dans le flux (feuille de question, carte) : pas de bandeau fixe */
.feedback--inline { position: static; inset: auto; border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); animation: none; }
/* Réserve la place du bandeau fixe pour qu'il ne masque pas la question */
.screen:has(> .feedback:not([hidden], .feedback--inline)) { padding-bottom: 230px; }

/* Carte matière */
.subject-card { background: var(--subj); color: var(--subj-ink); border-radius: var(--r-card); padding: 14px; box-shadow: 0 var(--step) 0 var(--subj-edge); display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.subject-card__kicker { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.subject-card__title { font: 600 18px/1.1 var(--font-title); }
.subject-card__bar { height: 6px; border-radius: 3px; background: var(--subj-edge); margin-top: auto; } .subject-card__bar > i { display: block; height: 100%; border-radius: 3px; background: var(--subj-ink); }

/* Carte neutre */
.card { background: var(--surface); border: var(--border-w) solid var(--surface-2); border-radius: var(--r-card); box-shadow: 0 calc(var(--step) - 1px) 0 var(--edge); padding: var(--sp-4); }

/* Compteurs */
.counter { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--surface-2); font: 600 17px var(--font-display); font-variant-numeric: tabular-nums; }
.counter .ph-fire { color: var(--streak); } .counter .ph-coin { color: var(--coin); } .counter .ph-heart { color: var(--bad-icon); }

/* Puces / segmenté */
.chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 15px var(--font-text); }
.chip[aria-pressed="true"] { background: var(--subj-tint); border-color: var(--subj-vif); color: var(--subj-ink); }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.segmented > button { flex: 1; height: 40px; border: 0; border-radius: 10px; background: none; font: 600 15px var(--font-text); color: var(--ink-2); }
.segmented > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 var(--line); }

/* Mascotte */
.mascot { background: var(--mascot) center / contain no-repeat; }
.mascot--head { width: 60px; height: 60px; border-radius: 50%; background: var(--mascot-head) center / cover no-repeat, var(--subj-tint); border: 2px solid var(--subj-vif); flex: none; }
.bubble { background: var(--surface); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-weight: 500; font-size: 15px; line-height: 1.35; }

/* Badges */
.badge { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; border: 4px solid; box-sizing: border-box; }
.badge--bronze { background: oklch(0.92 0.05 60); border-color: oklch(0.62 0.11 55); color: oklch(0.48 0.10 55); }
.badge--silver { background: #EEF0F5; border-color: #A9B1C4; color: #6B7590; }
.badge--gold { background: oklch(0.95 0.06 90); border-color: oklch(0.84 0.10 86); color: oklch(0.55 0.13 75); }
.badge--locked { background: var(--bg); border: 4px dashed var(--line); color: var(--ink-disabled); font-size: 28px; }

@keyframes ds-pop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes ds-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes ds-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .answer.is-good, .answer.is-bad, .feedback { animation: none; } }