/* BAC a fraises - Design System */
/* Polices auto-hebergees - voir /frontend/fonts/README.md */

@font-face {
  font-family: 'DM Serif Display';
  src: local('DM Serif Display'), url('/fonts/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans Regular'), url('/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans Medium'), url('/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans SemiBold'), url('/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans Bold'), url('/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --fraise:#E5374E; --fraise-dark:#C02039; --fraise-light:#FFE8EC; --fraise-pale:#FFF8F5;
  --leaf:#3A9668;   --leaf-light:#D4F0E4;
  --orange:#F07040; --orange-light:#FEE8DF;
  --amber:#F59C00;  --amber-light:#FFF0D8; --amber-border:#FFD888;
  --purple:#7C3AED; --purple-light:#EDE9FE; --purple-border:#C4B5FD;
  --blue:#3D55B9;   --blue-light:#EEF2FF;
  --ink:#2D1A1E; --ink-mid:#7A5C61; --ink-soft:#B8A0A5;
  --surface:#FFF; --border:#EDD8DC; --gray-dot:#CFC4C6;
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:var(--sans); background:var(--fraise-pale); color:var(--ink); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
body { overflow:hidden; }
#app { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
button,input { font-family:var(--sans); }

.screen { min-height:100%; display:flex; flex-direction:column; animation:sIn .18s ease-out; }
@keyframes sIn { from { opacity:0; transform:translateY(6px); } }
.screen-content { flex:1; padding:48px 24px 24px; display:flex; flex-direction:column; max-width:480px; width:100%; margin:0 auto; }
.screen-footer  { padding:16px 24px calc(16px + env(safe-area-inset-bottom,0)); display:flex; flex-direction:column; gap:10px; max-width:480px; width:100%; margin:0 auto; }

.t-display { font-family:var(--serif); font-size:2rem; line-height:1.15; }
.t-title   { font-family:var(--serif); font-size:1.5rem; line-height:1.25; }
.t-heading { font-weight:700; font-size:1.1rem; }
.t-body    { font-size:.93rem; line-height:1.55; }
.t-small   { font-size:.8rem; }
.t-label   { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.t-mid     { color:var(--ink-mid); }
.t-soft    { color:var(--ink-soft); }

.btn { display:flex; align-items:center; justify-content:center; width:100%; padding:15px 20px; border:none; border-radius:var(--r-md); font-family:var(--sans); font-size:.97rem; font-weight:700; cursor:pointer; transition:background .12s,transform .08s,opacity .15s; gap:8px; text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.4; cursor:default; transform:none; }
.btn-primary   { background:var(--fraise); color:#fff; box-shadow:0 4px 14px rgba(229,55,78,.25); }
.btn-primary:hover:not(:disabled) { background:var(--fraise-dark); }
.btn-secondary { background:transparent; color:var(--fraise); border:1.5px solid var(--fraise); }
.btn-ghost     { background:transparent; color:var(--ink-soft); }
.btn-leaf      { background:var(--leaf); color:#fff; box-shadow:0 4px 14px rgba(58,150,104,.22); }
.btn-amber     { background:var(--amber); color:#fff; }
.btn-purple    { background:var(--purple); color:#fff; }
.btn-sm        { padding:10px 16px; font-size:.85rem; border-radius:var(--r-sm); }

.card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px; }
.card-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.card-row:last-child { border-bottom:none; }

.input { width:100%; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--r-md); font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--surface); outline:none; transition:border-color .15s; }
.input:focus { border-color:var(--fraise); }
.input::placeholder { color:var(--ink-soft); }
.input-lg { font-size:1.3rem; font-weight:600; text-align:center; letter-spacing:.04em; }
.input.state-ok    { border-color:var(--leaf);   background:var(--leaf-light); }
.input.state-warn  { border-color:var(--amber);  background:var(--amber-light); }
.input.state-error { border-color:var(--fraise); background:var(--fraise-light); }

.slabel { font-size:.7rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em; margin-bottom:9px; }
.av { border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.av-sm { width:36px; height:36px; font-size:.9rem; border-radius:10px; }
.av-md { width:48px; height:48px; font-size:1.2rem; border-radius:13px; }
.av-lg { width:64px; height:64px; font-size:1.6rem; border-radius:18px; }
.av-xl { width:80px; height:80px; font-size:2rem; border-radius:22px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:10px; font-size:.78rem; font-weight:700; }
.badge-fraise { background:var(--fraise-light); color:var(--fraise); }
.badge-leaf   { background:var(--leaf-light);   color:var(--leaf); }
.badge-amber  { background:var(--amber-light);  color:#7A4A00; }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-blue   { background:var(--blue-light);   color:var(--blue); }

#toast-container { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:360px; width:calc(100% - 32px); }
.toast { background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:.88rem; font-weight:600; box-shadow:0 8px 32px rgba(45,26,30,.16); animation:tIn .2s ease-out, tOut .2s ease-in 2.8s forwards; pointer-events:auto; }
.toast.toast-ok    { background:var(--leaf); }
.toast.toast-error { background:var(--fraise); }
.toast.toast-warn  { background:var(--amber); color:var(--ink); }
@keyframes tIn  { from { opacity:0; transform:translateY(-8px); } }
@keyframes tOut { to   { opacity:0; transform:translateY(-8px); } }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--fraise); border-radius:50%; animation:spin .7s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; gap:12px; color:var(--ink-soft); font-size:.88rem; }

/* LOGIN */
.login-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding-bottom:16px; }
.login-logo { font-size:4rem; line-height:1; }
.login-form { display:flex; flex-direction:column; gap:10px; }

/* PLAYERS */
.players-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
.player-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:20px 12px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; transition:border-color .12s,box-shadow .12s; }
.player-card:hover { border-color:var(--fraise); box-shadow:0 2px 8px rgba(45,26,30,.08); }
.player-card:active { transform:scale(.96); }
.player-name  { font-weight:700; font-size:.93rem; color:var(--ink); }
.player-level { font-size:.72rem; color:var(--ink-soft); font-weight:500; }

/* PIN */
.pin-hero { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:28px; text-align:center; }
.pin-dots { display:flex; gap:12px; justify-content:center; margin-bottom:8px; }
.pin-dot { width:16px; height:16px; border-radius:50%; background:var(--border); transition:background .15s,transform .1s; }
.pin-dot.filled { background:var(--fraise); transform:scale(1.1); }
.pin-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pin-key { aspect-ratio:1; border-radius:var(--r-md); background:var(--surface); border:1.5px solid var(--border); font-size:1.3rem; font-weight:700; color:var(--ink); cursor:pointer; transition:background .08s,transform .06s; display:flex; align-items:center; justify-content:center; }
.pin-key:active { background:var(--fraise-light); border-color:var(--fraise); transform:scale(.94); }
.pin-key.del { font-size:1rem; color:var(--ink-soft); }
.pin-key.empty { visibility:hidden; }

/* HOME */
.player-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.module-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.module-item { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .12s; }
.module-item:hover { border-color:var(--fraise); }
.module-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.module-name { flex:1; font-weight:600; font-size:.9rem; color:var(--ink); }
.module-chev { color:var(--ink-soft); }
.dm-card { background:#CC2B2B; border:2px solid #9E1A1A; border-radius:var(--r-md); padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; margin-bottom:16px; box-shadow:0 4px 16px rgba(160,20,20,.25); transition:filter .12s,transform .08s; position:relative; overflow:hidden; }
.dm-card:hover  { filter:brightness(1.05); }
.dm-card:active { transform:scale(.97); }
.dm-lcd { width:72px; height:44px; background:#0C1409; border-radius:5px; border:2px solid #1A2A15; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex-shrink:0; }
.dm-lcd-text { font-family:'VT323','Courier New',monospace; font-size:.85rem; color:#7CFC00; text-shadow:0 0 6px rgba(124,252,0,.7); }
.dm-lcd-cursor { width:16px; height:3px; background:#7CFC00; border-radius:1px; animation:blink .7s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.dm-info  { flex:1; }
.dm-title { font-family:'VT323','Courier New',monospace; font-size:1.2rem; color:#F0C020; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.dm-sub   { font-size:.72rem; color:rgba(255,255,255,.65); margin-top:2px; font-weight:500; }
.dm-badge { font-size:.63rem; font-weight:700; background:#F0C020; color:#9A7800; padding:2px 7px; border-radius:6px; margin-top:4px; display:inline-block; }
.dm-chev  { color:rgba(255,255,255,.5); }
.modes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mode-card  { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:14px 8px 12px; text-align:center; cursor:pointer; position:relative; transition:border-color .12s; }
.mode-card:hover { border-color:var(--fraise); }
.mode-icon { font-size:1.3rem; display:block; margin-bottom:5px; }
.mode-name { font-size:.68rem; font-weight:700; color:var(--ink-mid); line-height:1.3; }
.notif-dot { position:absolute; top:8px; right:8px; width:8px; height:8px; background:var(--fraise); border-radius:50%; border:1.5px solid var(--fraise-pale); }

/* QUIZ */
.quiz-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 0; flex-shrink:0; }
.quiz-quit   { font-size:.82rem; font-weight:600; color:var(--ink-soft); background:none; border:none; cursor:pointer; }
.timer-wrap  { position:relative; width:52px; height:52px; }
.timer-pie   { width:52px; height:52px; border-radius:50%; background:conic-gradient(from -90deg,var(--leaf) 100%,var(--border) 0); }
.timer-num   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.3); }
.quiz-body   { flex:1; padding:16px 20px 12px; display:flex; flex-direction:column; align-items:center; }
.quiz-badge  { align-self:center; margin-bottom:16px; }
.quiz-verb   { font-family:var(--serif); font-size:3.4rem; color:var(--fraise); letter-spacing:-.02em; line-height:1; text-align:center; }
.quiz-instruction { font-size:.82rem; color:var(--ink-mid); margin-top:8px; text-align:center; }
.quiz-pronoun { margin-top:10px; font-size:1.1rem; font-weight:700; color:var(--ink); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:6px 18px; }
.quiz-pronoun em { color:var(--fraise); font-style:normal; }
.quiz-choices { width:100%; display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.quiz-choice  { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:13px 16px; font-size:.95rem; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .1s,background .1s; width:100%; }
.quiz-choice:hover   { border-color:var(--fraise); background:var(--fraise-light); }
.quiz-choice.ok      { border-color:var(--leaf);   background:var(--leaf-light); color:var(--leaf); pointer-events:none; }
.quiz-choice.wrong   { border-color:var(--fraise); background:var(--fraise-light); color:var(--fraise); pointer-events:none; }
.quiz-choice.reveal  { border-color:var(--leaf);   background:var(--leaf-light); pointer-events:none; opacity:.7; }
.quiz-choice.disabled { pointer-events:none; opacity:.5; }
.quiz-free-input { width:100%; margin-top:16px; }
.quiz-phrase { font-size:.95rem; line-height:1.7; color:var(--ink-mid); text-align:center; margin:16px 0 10px; padding:0 4px; }
.quiz-phrase strong { color:var(--fraise); }
.quiz-progress { padding:12px 20px 16px; display:flex; gap:4px; flex-wrap:wrap; justify-content:center; flex-shrink:0; }
.qdot { width:11px; height:11px; border-radius:50%; background:var(--gray-dot); flex-shrink:0; }
.qdot.cor  { background:var(--leaf); }
.qdot.wrg  { background:var(--fraise); }
.qdot.half { background:var(--amber); }
.qdot.cur  { background:var(--ink); transform:scale(1.2); box-shadow:0 0 0 2px var(--border); }
.quiz-feedback { display:flex; align-items:flex-start; gap:10px; border-radius:var(--r-md); padding:12px 14px; margin:0 20px; flex-shrink:0; }
.quiz-feedback.ok    { background:var(--leaf-light);   border:1.5px solid #A3D9B8; }
.quiz-feedback.warn  { background:var(--amber-light);  border:1.5px solid var(--amber-border); }
.quiz-feedback.error { background:var(--fraise-light); border:1.5px solid #FFB8C0; }
.qfb-icon  { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.qfb-text  { flex:1; }
.qfb-title { font-weight:700; font-size:.85rem; }
.qfb-title.ok    { color:var(--leaf); }
.qfb-title.warn  { color:#8A6A00; }
.qfb-title.error { color:var(--fraise); }
.qfb-detail { font-size:.78rem; color:var(--ink-mid); margin-top:2px; line-height:1.4; }
.qfb-pts { flex-shrink:0; font-size:.75rem; font-weight:700; padding:3px 8px; border-radius:8px; align-self:center; }
.qfb-pts.ok    { background:var(--leaf);   color:#fff; }
.qfb-pts.warn  { background:var(--amber);  color:#fff; }
.qfb-pts.error { background:var(--fraise); color:#fff; }

/* RESULTATS */
.results-hero  { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:24px; text-align:center; }
.results-score { font-family:var(--serif); font-size:3.5rem; color:var(--amber); line-height:1; }
.results-delta { display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; padding:3px 10px; border-radius:10px; }
.delta-pos { background:var(--leaf-light);   color:var(--leaf); }
.delta-neg { background:var(--fraise-light); color:var(--fraise); }
.errors-list { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.error-item  { background:var(--fraise-light); border-radius:11px; padding:9px 13px; font-size:.8rem; color:var(--ink-mid); line-height:1.5; }
.error-item strong { color:var(--fraise-dark); }
.streak-update { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:11px 15px; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.streak-val { font-size:1.1rem; font-weight:700; background:var(--amber-light); color:#7A4A00; padding:4px 12px; border-radius:10px; }

/* Utilitaires */
.text-center { text-align:center; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-1 { flex:1; }
.hidden { display:none !important; }
.mt-auto { margin-top:auto; }
.mt-12 { margin-top:12px; }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.mb-12 { margin-bottom:12px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }