/* Mathera */
:root {
  --bg: #f4ecda; --panel: #fffaf0; --ink: #3b2f1c; --muted: #7d6c52; --line: #e2d4b6;
  --green: #3f8a3a; --green-d: #2f6e2b; --gold: #f2b705; --gold-d: #c98f00; --red: #c8452d; --sky: #3e7fc1;
  --r: 14px; --shadow: 0 3px 0 #d8c7a2, 0 8px 24px rgba(59,47,28,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Nunito', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45;
  background-image: radial-gradient(#e8dcc0 1px, transparent 1px); background-size: 22px 22px; }
h1, h2, h3, .brand { font-family: 'Baloo 2', 'Nunito', sans-serif; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: 1.35rem; } h3 { font-size: 1.15rem; }
a { color: var(--sky); }
small, .muted { color: var(--muted); }

/* ---- Barre du haut ---- */
[hidden] { display: none !important; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--green); color: #fff; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 3px 0 var(--green-d); flex-wrap: wrap; }
.brand { font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.brand svg { width: 30px; height: 30px; }
.top .grow { flex: 1; }
.top select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 0; max-width: 220px; }
.gold-badge { background: #fff6d6; color: var(--ink); padding: 4px 12px 4px 6px; border-radius: 99px; font-weight: 800; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 0 var(--gold-d); }

.coin { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; white-space: nowrap; }
.coin::before { content: ''; width: 1.05em; height: 1.05em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe680, var(--gold) 55%, var(--gold-d)); box-shadow: inset 0 0 0 1.5px #b07d00; display: inline-block; }

/* ---- Onglets ---- */
.tabs { display: flex; gap: 6px; padding: 10px 16px 0; overflow-x: auto; }
.tabs button { font: inherit; font-weight: 800; border: 0; background: #eadbb9; color: var(--ink); padding: 9px 16px; border-radius: 12px 12px 0 0; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: var(--panel); }
.tabs .dot { background: var(--red); color: #fff; border-radius: 99px; font-size: .75rem; padding: 0 6px; margin-left: 4px; }
main { padding: 0 16px 40px; max-width: 1200px; margin: 0 auto; }
.pane { background: var(--panel); border-radius: 0 var(--r) var(--r) var(--r); padding: 18px; box-shadow: var(--shadow); }

/* ---- Éléments ---- */
.card { background: var(--panel); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.btn { font: inherit; font-weight: 800; border: 0; border-radius: 12px; padding: 10px 16px; background: var(--green); color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 var(--green-d); transition: transform .05s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-d); }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--gold-d); }
.btn.red { background: var(--red); box-shadow: 0 3px 0 #8f2c1a; }
.btn.ghost { background: #efe3c8; color: var(--ink); box-shadow: 0 3px 0 #d3c09a; }
.btn.sm { padding: 6px 10px; font-size: .9rem; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; width: 100%; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); }
label { display: block; font-weight: 700; margin: 10px 0 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > .btn, .row > .fit { flex: 0 0 auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tbl-wrap { overflow-x: auto; }
.code { font-family: ui-monospace, monospace; font-weight: 800; background: #f1e6cc; padding: 2px 8px; border-radius: 6px; letter-spacing: .08em; }
.pill { display: inline-block; font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: #e4f2dc; color: var(--green-d); }
.pill.c4 { background: #e3ebfa; color: #2b4f9a; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
hr { border: 0; border-top: 2px dashed var(--line); margin: 18px 0; }

/* ---- Carte ---- */
.map-wrap { overflow: auto; text-align: center; max-height: 72vh; border-radius: 12px; background: #5d9e3f; border: 4px solid #3b2f1c22; touch-action: pan-x pan-y; }
.mathera-map { display: inline-block; vertical-align: top; cursor: pointer; }
.mm-wrap { position: relative; display: inline-block; vertical-align: top; }
.mm-wrap > .mathera-map { display: block; }
.mathera-map.mm-layer { position: absolute; top: 0; left: 0; pointer-events: none; }
.mathera-map.mm-anim { will-change: transform; }
.mathera-map .plabel { font: 800 22px 'Nunito', sans-serif; fill: #fff; stroke: #3b2f1c; stroke-width: 5px; paint-order: stroke; pointer-events: none; }
.mathera-map .plabel.me { fill: #ffe27a; }
.mathera-map .plabel.prof { fill: #cfe1ff; }
.mathera-map .sign { font: 800 10px 'Nunito', sans-serif; fill: #7d5a1e; }
.map-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.mathera-parcel { width: 100%; max-width: 480px; display: block; border-radius: 10px; border: 4px solid #ffcf3f; cursor: crosshair; background: #7cc451; }
.ico { width: 40px; height: 40px; display: block; }

/* ---- Éditeur ---- */
.editor { display: grid; grid-template-columns: minmax(260px, 480px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .editor { grid-template-columns: 1fr; } }
.tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tools button { font: inherit; font-weight: 800; border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.tools button.on { border-color: var(--green); background: #e4f2dc; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.pal { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink); position: relative; }
.pal.on { border-color: var(--green); box-shadow: 0 0 0 3px #3f8a3a40; }
.pal .qty { position: absolute; top: 2px; right: 4px; background: var(--ink); color: #fff; border-radius: 99px; font-size: .7rem; padding: 0 6px; }
.pal:disabled { opacity: .4; }

/* ---- Boutique ---- */
.shop-cat { margin: 18px 0 8px; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.item { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.item .ico { width: 56px; height: 56px; }
.item b { font-size: .95rem; }
.item .own { font-size: .78rem; color: var(--muted); }

/* ---- Questions ---- */
.quiz { max-width: 560px; margin: 0 auto; text-align: center; }
.quiz .qtext { font-size: 1.45rem; font-weight: 800; margin: 18px 0; font-family: 'Baloo 2', sans-serif; }
.quiz input { font-size: 1.4rem; text-align: center; max-width: 260px; }
.progress { height: 14px; background: #eadbb9; border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--gold), #ffd94a); transition: width .3s; }
.feedback { font-size: 1.15rem; font-weight: 800; margin: 14px 0; min-height: 1.6em; }
.feedback.ok { color: var(--green); } .feedback.ko { color: var(--red); }

/* ---- Questions prof ---- */
.qlist .qrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.qlist .qrow .t { flex: 1; }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #d8cbb0; border-radius: 99px; cursor: pointer; transition: .2s; }
.switch span::after { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
.vars .vrow { display: grid; grid-template-columns: 70px 1fr 1fr 90px 36px; gap: 6px; margin-bottom: 6px; align-items: center; }
.examples li { margin-bottom: 4px; }

/* ---- Connexion ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
/* largeur fixe : le bloc reste centré et ne bouge pas quand le formulaire d'inscription s'ouvre */
.login > div { width: min(920px, 100%); }
.login-box { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .login-box { grid-template-columns: 1fr; } }
.hero { text-align: center; margin-bottom: 18px; }
.hero h1 { font-size: 2.6rem; color: var(--green-d); margin: 0; }
.hero svg { width: 72px; height: 72px; }
.code-input { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; text-align: center; font-size: 1.3rem; }

/* ---- Divers ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(40,30,15,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border-radius: var(--r); padding: 20px; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--green-d); color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: opacity .4s; max-width: 90vw; }
.toast.err { background: var(--red); }
.toast.out { opacity: 0; }
.swap { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff6d6; border-radius: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.swap .t { flex: 1; min-width: 180px; }
.empty { text-align: center; padding: 30px; color: var(--muted); }
.stat { display: inline-block; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 0 8px 8px 0; }
.stat b { font-size: 1.3rem; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; border: 1px solid #0002; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }

@media (max-width: 600px) {
  .top { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 1.15rem; }
  .brand svg { width: 24px; height: 24px; }
  #who { font-size: .85rem; order: 5; flex-basis: 100%; }
  .tabs { padding: 8px 8px 0; }
  .tabs button { padding: 8px 12px; font-size: .9rem; }
  main { padding: 0 8px 30px; }
  .pane { padding: 12px; }
}

/* ---- Succès et classements ---- */
.medal { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 26px; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 60%, var(--gold-d)); box-shadow: inset 0 0 0 3px #fff8, 0 3px 0 #b07d00; }
.medal.big { width: 72px; height: 72px; font-size: 38px; }
.medal.locked { background: #e6dcc6; box-shadow: inset 0 0 0 3px #fff8, 0 3px 0 #cdbf9f; filter: grayscale(1); opacity: .55; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.ach.on { border-color: #f2d36b; background: #fffbea; }
.ach .t { flex: 1; min-width: 0; }
.ach small { color: var(--muted); display: block; line-height: 1.25; }
.ach .bar { height: 6px; background: #eadbb9; border-radius: 9px; margin-top: 5px; overflow: hidden; }
.ach .bar > i { display: block; height: 100%; background: var(--green); }
.ach-new { display: flex; gap: 14px; align-items: center; margin: 10px 0; }
.modal-bg.party .modal { animation: pop .35s cubic-bezier(.2, 1.6, .5, 1); text-align: left; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.board { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.board h3 { font-size: 1.05rem; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); align-items: center; }
.board li:last-child { border-bottom: 0; }
.board .rk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #efe3c8; flex: 0 0 auto; }
.board .r1 { background: #ffd94a; } .board .r2 { background: #dfe3e8; } .board .r3 { background: #f0c08f; }
.board .nm { flex: 1; } .board .me { font-weight: 800; color: var(--green-d); }
.board .v { font-weight: 800; }
.mystats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badges { font-size: 1.1rem; letter-spacing: 2px; }

/* ---- Réinitialiser & objets exceptionnels ---- */
.tools .reset { margin-left: auto; color: var(--red); border-color: #efc6bd; }
.tools .reset:hover { background: #fdebe7; }
.item.rare { border-color: #f2d36b; background: linear-gradient(160deg, #fffbea, #fff 60%); position: relative; }
.item.rare::after { content: '💎'; position: absolute; top: 6px; right: 8px; font-size: .85rem; }

/* ---- Sélecteurs segmentés, QCM ---- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: inherit; font-weight: 700; border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 12px; cursor: pointer; color: var(--ink); }
.seg button.on { border-color: var(--green); background: #e4f2dc; }
.pill.qt { background: #fdeccf; color: #8a5a00; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; max-width: 520px; margin: 0 auto; }
.choice { font: inherit; font-size: 1.2rem; font-weight: 800; padding: 14px 10px; border-radius: 14px; border: 3px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 #d8c7a2; }
.choice:hover:not(:disabled) { border-color: var(--gold); }
.choice.vrai { border-color: #b7dfa9; } .choice.faux { border-color: #efc6bd; }
.choice.good { background: #e4f2dc; border-color: var(--green); }
.choice.bad { background: #fdebe7; border-color: var(--red); }
.choice:disabled { cursor: default; }

/* ---- Objectif collectif, visite, revente ---- */
.goal { background: #fff; border: 2px solid #f2d36b; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.goal.done { background: #fffbea; }
.goal-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.goal .progress { height: 16px; }
.modal.wide { width: min(560px, 100%); }
.visit .mathera-parcel { max-width: 100%; margin: 0 auto; }
.mathera-parcel.readonly { cursor: default; }
.mp-wrap { position: relative; }
.mathera-parcel.mp-walk { position: absolute; top: 0; left: 0; margin: 0; background: none; border-color: transparent; pointer-events: none; will-change: transform; }
.sell { font: inherit; font-size: .8rem; font-weight: 700; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 2px; }
.sell:hover { color: var(--ink); }

/* ---- Événements ---- */
.event-banner { background: #2b1a4a; color: #ffe2b8; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 700; }
.item.event { border-color: #c9b2ea; background: linear-gradient(160deg, #f5eefe, #fff 60%); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 14px 0 4px; }
label.check input { width: auto; }

/* ---- Mode tableau (projection) ---- */
.board-page { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.board-head { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-d); }
.board-head .brand { font-size: 2rem; }
.board-head .brand svg { width: 40px; height: 40px; }
.board-head .grow { flex: 1; }
.b-clock { font: 800 1.8rem 'Baloo 2', sans-serif; }
.board-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 16px; padding: 16px; }
.board-map { min-height: 0; display: grid; place-items: center; background: #5d9e3f; border-radius: 16px; overflow: hidden; }
.board-side { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.board-side .board { font-size: 1.15rem; }
.board-side .goal { font-size: 1.1rem; }
.b-refresh { font-size: .8rem; text-align: center; margin-top: auto; }
.mathera-map.big { cursor: default; }
.mathera-map.big .plabel { font-size: 26px; stroke-width: 6px; }
@media (max-width: 900px) { .board-page { height: auto; } .board-body { grid-template-columns: 1fr; } .board-map { height: 70vh; } }

/* ---- Fil des modifications (prof) ---- */
.feed-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.feed-item { font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.feed-item:hover { border-color: var(--gold); }
.feed-item.new { border-color: var(--red); box-shadow: 0 0 0 3px #c8452d22; }
.feed-item .thumb .mathera-parcel { border-width: 2px; border-radius: 8px; cursor: pointer; pointer-events: none; }
.feed-item .who { font-weight: 800; }
.feed-item .when { font-size: .8rem; color: var(--muted); }
.feed-item.new .when b { color: var(--red); }

/* ---- Animés et ultra premium ---- */
.item { position: relative; }
.anim-badge { position: absolute; top: 6px; left: 6px; font-size: .68rem; font-weight: 800; background: #eef2ff; color: #4338ca; border-radius: 99px; padding: 1px 7px; }
.item.ultra { border: 0; padding: 12px; color: #fff; background: linear-gradient(150deg, #1e1b4b, #4c1d95 55%, #831843); position: relative; overflow: hidden; isolation: isolate; }
.item.ultra::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 14px; padding: 2px;
  background: linear-gradient(120deg, #fde047, #f472b6, #67e8f9, #a78bfa, #fde047); background-size: 300% 300%; animation: ultraBorder 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.item.ultra::after { content: '👑'; position: absolute; top: 6px; right: 8px; font-size: .9rem; }
.item.ultra .own, .item.ultra .sell { color: #ddd6fe; }
.item.ultra .ico { width: 64px; height: 64px; filter: drop-shadow(0 0 6px rgba(253, 224, 71, .55)); }
.item.ultra .anim-badge { background: #fde047; color: #4c1d95; }
@keyframes ultraBorder { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .item.ultra::before { animation: none; } }
.item .anim-badge + .ico { margin-top: 14px; }

/* ---- Questions bonus ---- */
.bonus-pill { font-weight: 800; color: #8a5a00; background: #fff1c2; border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.bonus-label { margin: 14px 0 -8px; font-weight: 800; color: #8a5a00; }

/* ---- Banque de questions (prof) ---- */
.qb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.qb-head p { margin: 0 0 8px; max-width: 720px; }
.cq-panel { background: #fff; border: 2px solid #f2d36b; border-radius: var(--r); padding: 16px 18px; margin: 10px 0 16px; }
.qb-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.qb-tools input[type=search] { flex: 1 1 280px; }
.qb-tools select { width: auto; flex: 0 0 auto; }
.qb-levels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qb-level { font: inherit; font-weight: 800; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 7px 14px; cursor: pointer; display: flex; align-items: baseline; gap: 6px; }
.qb-level small { font-weight: 700; color: var(--muted); font-size: .78rem; }
.qb-level.has small { color: var(--green-d); }
.qb-level.on { background: var(--green); border-color: var(--green); color: #fff; }
.qb-level.on small { color: #e4f2dc; }
.qb-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #f6efdf; border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
.qb-bulk span { flex: 1 1 200px; }
.qb-bulk:empty { display: none; }
.qb-group { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 14px 4px; margin-bottom: 12px; }
.qb-group header { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 2px solid var(--line); }
.qb-group header h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.lnk { font: inherit; font-size: .85rem; font-weight: 800; color: var(--sky); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.lnk:hover { text-decoration: underline; }
.qb-group .qrow { border-bottom: 1px solid #f0e7d2; }
.qb-group .qrow:last-child { border-bottom: 0; }
.qb-group .qrow .t { color: var(--muted); }
.qb-group .qrow.on .t { color: var(--ink); font-weight: 700; }
.pill.vf { background: #fde4e4; color: #9b2c2c; }
.lvl-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.lvl-checks label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.lvl-checks label:has(input:checked) { border-color: var(--green); background: #e4f2dc; }
.lvl-checks input { width: auto; }
@media (max-width: 600px) { .qb-group .qrow { flex-wrap: wrap; } .qb-group .qrow .t { flex-basis: calc(100% - 60px); } }
.qb-group .qrow { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.qb-group .qrow .t { flex: 1; min-width: 0; }
.qb-group .qrow .switch { margin: 0; }
.qb-group .qrow .btn.sm { padding: 4px 9px; font-size: .82rem; box-shadow: 0 2px 0 #d3c09a; }

/* ---- En-tête de la liste des élèves ---- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.list-head h2 { margin: 0; }
.list-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.deco { pointer-events: none; }
.dur-badge { position: absolute; top: 6px; right: 6px; font-size: .68rem; font-weight: 800; background: #fff7ed; color: #9a3412; border-radius: 99px; padding: 1px 7px; }
.item .dur-badge + .ico { margin-top: 14px; }
/* Questions avec figure */
.qfig { margin: 4px 0 2px; }
.qfig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.qfig-t { margin: 10px 0 0; }
td .qfig svg { max-width: 190px; }
td .qfig-t { margin-top: 4px; font-size: .92em; }
.examples .qfig svg { max-width: 220px; margin: 6px 0; }
.examples .qfig-t { display: inline; }
.pill.fig { background: #ecfeff; color: #0e7490; }
/* Bouton « Mettre à jour » */
.refresh { white-space: nowrap; }
.refresh .r-ico { display: inline-block; font-weight: 900; line-height: 1; }
.refresh.spin .r-ico { animation: mathera-spin .8s linear infinite; }
@keyframes mathera-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .refresh .r-lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { .refresh.spin .r-ico { animation: none; } }
/* Activité des élèves (onglet Modifications) */
#feed-views { margin-bottom: 14px; }
.act-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.act-filters select { width: auto; min-width: 170px; }
.chip { font: inherit; font-weight: 700; font-size: .9rem; border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 12px; cursor: pointer; color: var(--ink); }
.chip.on { border-color: var(--green); background: #e4f2dc; }
.act-day { margin: 16px 0 6px; font-size: 1rem; text-transform: capitalize; color: var(--green-d); }
.act-list { list-style: none; margin: 0; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.act-list li { padding: 7px 12px; border-top: 1px solid var(--line); line-height: 1.4; }
.act-list li:first-child { border-top: 0; }
.act-list time { display: inline-block; width: 3.2em; color: var(--muted, #8a7a5c); font-variant-numeric: tabular-nums; }
.act-list .who { margin-right: 4px; }
.act-ic { display: inline-block; width: 1.4em; text-align: center; }
.act-ic.ok { color: var(--green); font-weight: 900; }
.act-ic.ko { color: var(--red); font-weight: 900; }
.act-list .plus { color: var(--green); }
.act-list .minus { color: var(--red); }
/* En ligne / dernière connexion (prof) */
.online { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px #22c55e33; margin-right: 6px; vertical-align: middle; }
.online-txt { color: #15803d; }
.seen-old { color: var(--red); }
/* Concours de la plus belle parcelle */
.contest-banner { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(135deg, #fff7d6, #ffe9a8); border: 2px solid #f2c94c; color: #5a4300; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.contest-banner.done { background: linear-gradient(135deg, #eef8e8, #d9f0cc); border-color: #9bd17f; color: #2f5f22; }
.contest-banner small { opacity: .85; }
.tally { margin: 6px 0 0; padding-left: 22px; columns: 2; font-size: .92rem; }
/* Quêtes de la semaine (élève) */
.quests-title { margin: 0 0 8px; font-size: 1.05rem; }
.quests { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.quest { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.quest .progress { margin: 0; height: 9px; }
.quest.ready { border-color: var(--gold); background: #fffbea; box-shadow: 0 0 0 3px #f2b70533; }
.quest.claimed { opacity: .75; }
.q-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.q-claimed { color: var(--green-d); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.q-claimed .ico { width: 22px; height: 22px; }
.q-old { color: var(--red); font-weight: 700; }
.chest { text-align: center; }
.chest-box { font-size: 4rem; animation: chest-shake .9s ease-in-out; }
.chest-loot { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.3rem; animation: chest-pop .5s .8s both cubic-bezier(.2, 1.6, .5, 1); }
.chest-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; background: #f4f0e6; }
.chest-item .ico { width: 72px; height: 72px; }
.chest-item.rare { background: #e8f1ff; box-shadow: 0 0 0 3px #3e7fc155; }
.chest-item.legend { background: linear-gradient(135deg, #fff3b0, #f9d8ff); box-shadow: 0 0 0 3px #c084fc88, 0 0 24px #f2b705aa; }
@keyframes chest-shake { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.05); } 40% { transform: rotate(12deg) scale(1.1); } 60% { transform: rotate(-8deg) scale(1.15); } 80% { transform: rotate(6deg) scale(1.2); } }
@keyframes chest-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .chest-box, .chest-loot { animation: none; } }
/* Boutique : rayons, recherche, fiches */
.shop-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.shop-wallet { font-weight: 800; white-space: nowrap; }
#shop-q { flex: 1 1 220px; min-width: 0; width: auto; }
.shop-afford { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.shop-afford input { width: auto; }
#shop-sort { width: auto; }
.shop-rayons { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; }
.rayon { flex: 0 0 auto; font: inherit; font-weight: 800; font-size: .92rem; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.rayon small { font-weight: 700; color: var(--muted); margin-left: 2px; }
.rayon.on { background: var(--green); border-color: var(--green); color: #fff; }
.rayon.on small { color: #e4f2dc; }
.rayon.ev { border-color: #c9b2ea; }
.rayon.inv { border-style: dashed; }
.rayon.inv.on { border-style: solid; }
.rayon-info { color: var(--muted); margin: 2px 0 12px; min-height: 1.2em; }
.item { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.item:hover, .item:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(59, 47, 28, .12); outline: none; }
.item.poor { opacity: .72; }
.item.poor .ico { filter: grayscale(.5); }
.item .stock { font-size: .78rem; font-weight: 800; color: var(--green-d); margin-top: -2px; }
.item.ultra .stock { color: #bbf7d0; }
.item .owned { font-size: .85rem; font-weight: 800; color: var(--green-d); }
.item.ultra .owned { color: #bbf7d0; }
.item .item-cat { font-size: .72rem; color: var(--muted); margin-top: -4px; }
.item.ultra .item-cat { color: #ddd6fe; }
.item-acts { gap: 6px; justify-content: center; flex-wrap: wrap; }
.sheet { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sheet-ico { flex: 0 0 auto; background: #f4f0e6; border-radius: 18px; padding: 10px; }
.sheet-ico.ultra { background: linear-gradient(150deg, #1e1b4b, #4c1d95 55%, #831843); }
.sheet-ico .ico { width: 110px; height: 110px; display: block; }
.sheet-price { font-size: 1.2rem; margin: 4px 0 8px; }
.sheet-info { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
  .shop { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .item { padding: 8px 6px; }
  .item .ico { width: 48px; height: 48px; }
  /* Téléphone : tous les rayons visibles d'un coup, en grille de petites tuiles */
  .shop-rayons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rayon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; border-radius: 12px; font-size: .78rem; line-height: 1.15; white-space: normal; text-align: center; min-height: 52px; }
  .rayon small { margin: 0; font-size: .7rem; }
  .sheet-ico .ico { width: 84px; height: 84px; }
}
/* Objets géants 2 × 2 */
.big-tag { display: inline-block; font-size: .7rem; font-weight: 800; background: #4c1d95; color: #fde047; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.size-badge { position: absolute; top: 6px; right: 26px; font-size: .68rem; font-weight: 800; background: #fde047; color: #4c1d95; border-radius: 99px; padding: 1px 7px; }
/* Tchat de classe (modéré) */
.chat-warn { background: #eef6ff; border: 2px solid #bcd7f5; color: #1e3a5f; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; line-height: 1.45; }
.chat-compose { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.chat-compose textarea { width: 100%; resize: vertical; font: inherit; min-height: 70px; }
.chat-status { border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; border: 2px solid; }
.chat-status.wait { background: #fff8e1; border-color: #f2d36b; }
.chat-status.ok { background: #eef8e8; border-color: #9bd17f; }
.chat-status.ko { background: #fdeceb; border-color: #f0a99f; }
.chat-status blockquote, .chat-preview { margin: 8px 0 0; padding: 8px 12px; background: #fff; border-left: 4px solid var(--line); border-radius: 8px; color: var(--ink); }
.chat-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 1.05rem; }
.chat-wall { display: flex; flex-direction: column; gap: 8px; }
.chat-msg { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; max-width: 720px; }
.chat-msg.me { border-color: #f2d36b; background: #fffbea; }
.chat-msg.prof { border-color: #9bd17f; background: #f1f9ec; }
.chat-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-meta small { color: var(--muted); }
.chat-acts { margin-left: auto; display: inline-flex; gap: 6px; }
.chat-body { margin-top: 4px; overflow-wrap: anywhere; line-height: 1.4; }
.chat-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.chat-toggle input { width: auto; }
/* Succès : rubriques et objets offerts */
.ach-group { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: 1.05rem; }
.ach-group small { color: var(--muted); font-weight: 700; }
.ach .t small.ach-rew { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 700; }
.ach-rew .ico, .ach-gift .ico { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.ach-gift { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--green-d); }

/* ---- Cœurs, météo, album, mascotte ---- */
.mathera-map .plabel.hearts { fill: #ff5a7a; font-size: 20px; }
.btn.heart { background: #ff5a7a; color: #fff; box-shadow: 0 3px 0 #c43656; }
.heart-info { background: #fff0f3; border: 1.5px solid #ffc2cf; color: #8a2140; border-radius: 10px; padding: 6px 10px; }
.weather { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 8px 14px; margin-bottom: 10px; background: linear-gradient(135deg, #fff9db, #ffeeb0); border: 2px solid #f6d365; color: #5a4300; }
.weather .w-ico { font-size: 1.8rem; line-height: 1; }
.weather small { display: block; opacity: .85; }
.weather.w-rainbow { background: linear-gradient(135deg, #fde2e4, #fff1c1, #d8f3dc, #dbeafe, #ede9fe); border-color: #c4b5fd; }
.weather.w-mixed, .weather.w-wait { background: linear-gradient(135deg, #f1f7ff, #fff8dc); border-color: #c9dcf2; color: #33475b; }
.weather.w-cloud { background: linear-gradient(135deg, #eef2f6, #dfe6ee); border-color: #b8c4d2; color: #334155; }
.weather.night { background: linear-gradient(135deg, #1e2a5a, #2c3e7a); border-color: #4b5fa8; color: #e6ecff; }
.weather.night small { color: #d6defc; opacity: 1; }
.board-side .weather { font-size: 1.1rem; }
.album-nav { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0; }
.album-nav select { max-width: 260px; width: auto; }
.album-map { display: flex; justify-content: center; }
.album-count { text-align: center; margin: 6px 0 0; }
.modal.album { max-width: min(940px, 96vw); }
.mascot-ed { grid-column: 1 / -1; }
.mascot-ed h4 { margin: 12px 0 6px; font-size: .95rem; }
.mascot-big { display: flex; justify-content: center; }
.mascot-big .ico { width: 110px; height: 110px; background: radial-gradient(circle, #e4f2dc, #fff 70%); border-radius: 50%; }
.m-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.m-pick { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: inherit; font-size: .72rem; font-weight: 700; color: var(--ink); width: 76px; }
.m-pick .ico { width: 46px; height: 46px; }
.m-pick.on, .m-col.on { border-color: var(--green); box-shadow: 0 0 0 3px #3f8a3a40; }
.m-col { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #0003; cursor: pointer; }
.m-col.on { border-color: #fff; box-shadow: 0 0 0 3px var(--green); }
.m-none { padding: 4px; }
.m-show { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 700; }
.m-show input { width: auto; }

/* ---- Jeu fermé (horaires) ---- */
#closed-screen { position: fixed; inset: 0; z-index: 200; background: linear-gradient(160deg, #1e2a5a, #312e81); display: flex; align-items: center; justify-content: center; padding: 16px; }
.closed-card { background: var(--panel); border-radius: 20px; padding: 28px 24px; max-width: 440px; text-align: center; box-shadow: 0 10px 40px #0006; }
.closed-ico { font-size: 3.4rem; line-height: 1; }
.closed-card h2 { margin: 10px 0 6px; }
.closed-until { font-size: 1.15rem; background: #eef2ff; border-radius: 12px; padding: 8px; }
.sched { max-width: 760px; margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line); }
.sched h3 { margin: 0 0 6px; }
.sched-state { font-weight: 700; border-radius: 10px; padding: 8px 12px; }
.sched-state.open { background: #e4f2dc; color: var(--green-d); }
.sched-state.shut { background: #fde2e2; color: #8f2c1a; }
.sched-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.sched-row input[type=time] { width: auto; padding: 6px 8px; }
.sched-days { display: inline-flex; gap: 3px; }
.sched-days button { font: inherit; font-weight: 800; width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.sched-days button.on { background: var(--green); border-color: var(--green); color: #fff; }
.sched-txt { flex-basis: 100%; }
.sched-add { flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* ---- Carte des compétences ---- */
.sk-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.sk-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sk { display: inline-block; min-width: 52px; text-align: center; font-weight: 800; font-size: .85rem; border-radius: 8px; padding: 3px 6px; }
.sk.good { background: #bbf7d0; color: #14532d; }
.sk.mid { background: #fde68a; color: #713f12; }
.sk.bad { background: #fecaca; color: #7f1d1d; }
.sk.none { background: #eee7d8; color: var(--muted); }
.sk-legend .sk { min-width: 0; padding: 3px 10px; }
.sk-dom { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.sk-list { display: flex; flex-direction: column; gap: 6px; }
.sk-row { display: grid; grid-template-columns: 64px 1fr auto 120px auto; gap: 10px; align-items: center; font: inherit; text-align: left; background: #fff; border: 2px solid var(--line); border-left-width: 6px; border-radius: 10px; padding: 7px 10px; cursor: pointer; color: var(--ink); }
.sk-row.good { border-left-color: #22c55e; } .sk-row.mid { border-left-color: #eab308; } .sk-row.bad { border-left-color: #ef4444; }
.sk-row:hover { box-shadow: 0 2px 8px #0001; }
.sk-title { font-weight: 700; }
.sk-bar { height: 8px; background: #eee7d8; border-radius: 99px; overflow: hidden; }
.sk-bar i { display: block; height: 100%; background: var(--green); }
.sk-row.mid .sk-bar i { background: #eab308; } .sk-row.bad .sk-bar i { background: #ef4444; }
.sk-grid td, .sk-grid th { text-align: center; }
.sk-grid td:first-child, .sk-grid th:first-child { text-align: left; }
.sk-cell { font: inherit; border: 0; background: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; color: var(--muted); font-size: .75rem; }
.sk-detail { display: flex; flex-direction: column; gap: 6px; }
.sk-detail > div { display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .sk-row { grid-template-columns: 56px 1fr; } .sk-row .pill, .sk-row .sk-bar { display: none; } .sk-row small { grid-column: 2; } }
.sched-state.dirty { background: #fff7d6; color: #6b5200; }
.sched-days button { width: auto; min-width: 32px; padding: 0 5px; }
.m-walk { font: inherit; font-size: .82rem; font-weight: 700; border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--ink); }
.m-walk.on { border-color: var(--green); background: #e4f2dc; box-shadow: 0 0 0 3px #3f8a3a40; }
.ico.long-h { width: auto !important; height: 40px !important; max-width: 100%; }
.ico.long-v { height: 64px !important; width: auto !important; }
.pal .ico.long-h { height: 22px !important; } .pal .ico.long-v { height: 40px !important; }

/* ---- Éditeur : catégories (comme les rayons de la boutique) ---- */
.ed-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ed-cat { font: inherit; font-size: .85rem; font-weight: 700; border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 10px; cursor: pointer; color: var(--ink); }
.ed-cat small { background: #efe3c8; border-radius: 99px; padding: 0 6px; margin-left: 2px; }
.ed-cat.on { border-color: var(--green); background: var(--green); color: #fff; }
.ed-cat.on small { background: #ffffff33; }
.ed-cat.empty { opacity: .55; }
.ed-acts { padding-top: 8px; border-top: 2px dashed var(--line); }
.pal-title { grid-column: 1 / -1; margin: 6px 0 0; font-size: .95rem; }
.pal-none { grid-column: 1 / -1; margin: 0; }
.ed-cat.on.empty { opacity: 1; }

/* ---- Gemmes, coffres, Conquête ---- */
.gem-badge { background: #ede9fe; color: #4c1d95; padding: 4px 12px; border-radius: 99px; font-weight: 800; box-shadow: 0 2px 0 #a78bfa; }
.gem { color: #6d28d9; font-weight: 800; white-space: nowrap; }
.gem.big { font-size: 1.3rem; }
.map-pick { margin-bottom: 8px; }
.map-pick:empty { display: none; }
.chests-head, .cq-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.chest-lock { background: #fff7d6; border: 2px solid #f2d36b; border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.chest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.chest-card { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.chest-card.monster { border-color: #c4b5fd; background: #faf7ff; }
.chest-card.boss { border-color: #f59e0b; background: linear-gradient(160deg, #fff7d6, #fde2e2); }
.chest-card.daily { border-color: #fcd34d; background: #fffbea; }
.chest-ico { font-size: 2.4rem; line-height: 1; }
.chest-what { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: .9rem; }
.loot-item { font-size: .8rem; color: var(--muted); font-weight: 700; }
.chest-items { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chest-hist { margin-top: 18px; }
.chest-hist-list > div { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.chest-hist-list .t { flex: 1; }
.chest-hist-list .ico { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.cq-arena { display: grid; grid-template-columns: 1fr 230px; grid-template-areas: 'fight crest' 'play play'; gap: 14px; margin-top: 10px; }
.cq-fight { grid-area: fight; } .cq-crest { grid-area: crest; } .cq-arena .cq-play { grid-area: play; margin: 0; }
.fort-pick { gap: 8px; margin-top: 8px; } .fort-pick select { width: auto; flex: 1 1 200px; }
.cq-fight { background: #1e1b4b; border-radius: 18px; padding: 12px; position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 3px #0003; }
.cq-fight > * { position: relative; z-index: 1; }
.cq-fight > .cq-scene { position: absolute; inset: 0; z-index: 0; }
.cq-scene svg { width: 100%; height: 100%; display: block; }
.cq-place { position: absolute; top: 10px; left: 10px; font-size: .72rem; font-weight: 800; color: #fff; background: #0007; border-radius: 99px; padding: 2px 9px; }
.cq-fight .cq-mhead b { color: #fff; text-shadow: 0 2px 0 #241c33, 0 0 6px #241c33, 0 0 12px #000a; }
.cq-fight .cq-info { display: block; width: fit-content; max-width: 100%; margin: 4px auto 0; text-align: center; background: #fffe; color: #3b2f1c; border-radius: 12px; padding: 4px 10px; }
.cq-army-head { flex-basis: 100%; text-align: center; font-size: .78rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; margin-bottom: 2px; }
.cq-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; vertical-align: 1px; }
.cq-army-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 6px; }
.cq-sold { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.cq-sold > svg, .cq-sold > .cq-nomasc { position: relative; z-index: 1; }
.cq-sold i { font-style: normal; font-size: .64rem; font-weight: 800; line-height: 1.15; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fffd; color: #3b2f1c; border-radius: 99px; padding: 0 5px; margin-top: -2px; position: relative; z-index: 1; }
.cq-sold.me i { background: #ffcf3f; }
.cq-sold.prof i { background: #cfe1ff; }
.cq-sold.on i { background: #fde047; box-shadow: 0 0 6px #fde047; }
.cq-sold.on::before { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -40px 0 0 -32px; border-radius: 50%; background: radial-gradient(circle, #fff8 0, #fde047aa 30%, #f9731655 55%, transparent 70%); animation: cq-halo 1.4s ease-in-out infinite; }
.cq-sold.me.on::before { width: 76px; height: 76px; margin: -46px 0 0 -38px; }
@keyframes cq-halo { 0%, 100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
.cq-nomasc { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff9; font-size: 1.1rem; }
.cq-none { display: block; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; font-size: .74rem; margin-top: 4px; }
.cq-mhead { display: flex; flex-direction: column; align-items: center; }
.cq-num { font-size: .8rem; font-weight: 800; color: #fff; background: #3b2f1c; border-radius: 99px; padding: 2px 10px; }
.cq-mhead b { font-family: 'Baloo 2', sans-serif; font-size: 1.4rem; }
.cq-mon { position: relative; width: min(250px, 66vw); margin: 0 auto; }
.cq-mon svg { width: 100%; display: block; }
.cq-mon.hit { animation: cq-hit .45s; }
@keyframes cq-hit { 0%, 100% { transform: translateX(0); filter: none; } 20% { transform: translateX(-8px); filter: brightness(1.8) saturate(.4); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.dmg { position: absolute; left: 50%; top: 30%; font: 900 2rem 'Baloo 2', sans-serif; color: #fff; -webkit-text-stroke: 2px #b91c1c; animation: dmg 1.1s forwards; pointer-events: none; }
.dmg.crit { color: #fde047; font-size: 2.8rem; }
@keyframes dmg { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -70px) scale(1.3); } }
.hpbar { position: relative; height: 22px; background: #fee2e2; border: 2px solid #7f1d1d; border-radius: 99px; overflow: hidden; margin: 6px auto; max-width: 420px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #f97316); transition: width .4s; }
.hpbar.boss i { background: linear-gradient(90deg, #7c3aed, #e11d48); }
.hpbar span { position: absolute; inset: 0; text-align: center; font-weight: 800; font-size: .82rem; line-height: 18px; color: #3b0d0d; }
.cq-fight > small { display: block; text-align: center; }
.cq-army { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px; margin-top: 10px; }
.cq-army-list { flex-basis: 100%; }
.cq-sold .cq-masc { width: 42px; height: 42px; display: block; }
.cq-sold.me .cq-masc { width: 50px; height: 50px; filter: drop-shadow(0 0 4px #ffcf3f); }
.cq-sold.prof .cq-masc { width: 50px; height: 50px; }

.cq-crest { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cq-crest h4 { margin: 0; }
.crest-svg { width: 150px; height: 182px; }
.cq-crest .progress { width: 100%; }
.cq-play { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
.cq-q { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 14px; }
.cq-hint { font-size: .9rem; color: var(--muted); margin-top: 0; }
.cq-h { margin: 18px 0 8px; } .cq-h small { color: var(--muted); font-weight: 700; font-size: .9rem; }
.cq-uses { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.cq-use { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px; }
.cq-use h4 { margin: 0 0 6px; }
.cq-fortmap { display: flex; justify-content: center; }
.cq-fortmap svg .fort { cursor: pointer; }
.cq-fortmap svg .fort:hover { filter: brightness(1.12); }
.fort-prev { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 6px; }
.fort-prev svg { width: 140px; height: 75px; }
.gem-btns { flex-wrap: wrap; gap: 6px; }
.cq-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cq-kills { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px; }
.cq-kills h3 { margin-top: 0; }
.kill { padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.cq-helptext p, .cq-helptext li { line-height: 1.45; }
.class-photo { width: 100%; border-radius: 12px; display: block; }
@media (max-width: 760px) { .cq-arena, .cq-uses, .cq-bottom { grid-template-columns: 1fr; } .cq-arena { grid-template-areas: 'fight' 'play' 'crest'; } }
@media (prefers-reduced-motion: reduce) { .cq-mon.hit, .dmg, .cq-sold.on::before { animation: none; } }

.cq-kills h3:not(:first-child) { margin-top: 20px; }
.cq-kills .tbl { margin-bottom: 4px; }

/* ---- Téléphone : onglets et panneau alignés ----
   Le panneau prend toute la largeur (plus de marges beiges sur les côtés), l'onglet ouvert reste visible
   et un léger dégradé indique qu'il y a d'autres onglets à faire défiler. */
@media (max-width: 600px) {
  main { padding: 0 0 40px; }
  .pane { border-radius: 0; box-shadow: none; }
  .tabs { padding: 8px 10px 0; scroll-padding: 0 24px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button:last-child { margin-right: 14px; }
}

/* ---- Message du prof, revente depuis Ma parcelle ---- */
.announce { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, #fff1c1, #ffe08a); border: 3px solid #f2b705; border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; color: #4a3500; box-shadow: 0 3px 0 #c98f00; }
.announce-ico { font-size: 2rem; line-height: 1; }
.announce b { font-size: 1.05rem; } .announce small { opacity: .8; }
.announce p { margin: 4px 0 0; font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.board-side .announce p { font-size: 1.2rem; }
.announce-box textarea { width: 100%; resize: vertical; font: inherit; }
.pal .sell-tag { position: absolute; bottom: 2px; right: 4px; background: var(--gold); color: var(--ink); border-radius: 99px; font-size: .68rem; font-weight: 800; padding: 0 5px; }

/* ---- Onglet Conquête mis en avant ---- */
.tabs button.tab-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #6d28d9, #db2777 60%, #f59e0b); box-shadow: 0 0 10px #db277766; text-shadow: 0 1px 1px #0004; }
.tabs button.tab-hero::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, #ffffff88, transparent); transform: skewX(-20deg); animation: tab-shine 3.2s ease-in-out infinite; }
.tabs button.tab-hero.on { background: var(--panel); color: #6d28d9; text-shadow: none; box-shadow: inset 0 3px 0 #db2777; }
.tabs button.tab-hero.on::after { display: none; }
@keyframes tab-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .tabs button.tab-hero::after { animation: none; display: none; } }
.cq-mon.new { animation: cq-new .8s ease-out; }
@keyframes cq-new { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tabs button { flex-shrink: 0; }

/* Coup de pouce après une erreur */
.feedback .hint, .pb-step .hint { margin-top: 8px; padding: 8px 12px; background: #fffbeb; border: 2px dashed #f59e0b; border-radius: 12px; color: #78350f; font-weight: 600; font-size: .92rem; line-height: 1.4; text-align: left; }
.feedback .hint b, .pb-step .hint b { display: block; color: #b45309; margin-bottom: 2px; }

/* Bestiaire */
.bst-intro { margin-top: 0; }
.bst-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; max-width: 100%; }
.bst-tabs button { flex-shrink: 0; white-space: nowrap; }
.bst-tabs button.far { opacity: .55; filter: grayscale(1); }
.bst-tabs button.far.on { opacity: .85; }
.bst-lock { grid-column: 1 / -1; margin: 0; padding: 8px 12px; background: #f1ece0; border-radius: 10px; color: #6b5a3e; text-align: center; }
.bst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bst-card { position: relative; border: 2px solid #e8dcc0; border-radius: 14px; padding: 6px 6px 8px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bst-card svg { width: 100%; max-width: 150px; aspect-ratio: 1; }
.bst-card b { font-size: .85rem; line-height: 1.2; }
.bst-card small { font-size: .72rem; color: #7a6a50; }
.bst-card.boss { background: linear-gradient(#fff7e0, #ffe6b0); border-color: #e0a030; }
.bst-card.fight { border-color: #dc2626; box-shadow: 0 0 0 3px #fecaca; }
.bst-now { color: #dc2626 !important; font-weight: 800; }
.bst-card.locked svg { filter: brightness(0) opacity(.22); }
.bst-card.locked b { color: #9a8a70; }
.bst-num { font-size: .68rem; font-weight: 800; color: #a08a60; }
.bst-card.boss .bst-num { color: #c0392b; }
/* Nouvelle version disponible */
.new-version { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: #241c33; color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 24px #0006; font-weight: 700; max-width: calc(100vw - 32px); }
/* Sauvegarde */
.backup-warn { color: #b45309; font-weight: 700; }
.backup-help { margin-top: 10px; }
.backup-help summary { cursor: pointer; font-weight: 700; }

/* Onglet Élèves : outils de la classe repliés */
.tool-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-btn { font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 12px;
  border: 2px solid #e8dcc0; background: #fff; color: #3b2f1c; box-shadow: 0 2px 0 #e8dcc0; transition: background .15s, border-color .15s; }
.tool-btn:hover { background: #fffaf0; border-color: #f2d36b; }
.tool-btn.on { background: #fff3c4; border-color: #e0a030; box-shadow: 0 2px 0 #e0a030; }
.tool-state { font-size: .72rem; font-weight: 800; color: #15803d; background: #dcfce7; border-radius: 99px; padding: 1px 7px; }
.tool-panel { margin-top: 10px; background: #fffaf0; border: 2px solid #f2d36b; border-radius: 14px; padding: 10px 14px 4px; }
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-head h2 { margin: 0; font-size: 1.15rem; }
.tool-close { font: inherit; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: #7a6a50; padding: 4px 8px; border-radius: 8px; }
.tool-close:hover { background: #f2e6c4; }
.tool-panel textarea { width: 100%; resize: vertical; font: inherit; }
@media (max-width: 600px) { .tool-btn { flex: 1 1 calc(50% - 8px); justify-content: center; font-size: .85rem; padding: 9px 8px; } }

/* Problème du jour */
.problem { max-width: 720px; margin: 22px auto 0; }
.pb-card { background: #fff; border: 2px solid #c7b8f0; border-radius: 18px; padding: 14px 18px 12px; box-shadow: 0 4px 0 #e4dcfa; }
.pb-card.done { border-color: #b7e4c7; box-shadow: 0 4px 0 #d8f1e0; }
.pb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-tag { font-weight: 800; color: #6d28d9; background: #ede9fe; border-radius: 99px; padding: 3px 12px; font-size: .85rem; }
.pb-card h3 { margin: 8px 0 6px; font-family: 'Baloo 2', sans-serif; font-size: 1.35rem; }
.pb-intro { background: #f8f6ff; border-left: 4px solid #8b5cf6; border-radius: 8px; padding: 10px 14px; line-height: 1.5; font-weight: 600; }
.pb-dots { display: flex; gap: 6px; margin: 12px 0 6px; }
.pb-dots i { flex: 1; height: 8px; border-radius: 8px; background: #e7e2d4; }
.pb-dots i.ok { background: #22c55e; } .pb-dots i.ko { background: #f97316; } .pb-dots i.now { background: #8b5cf6; }
.pb-steps { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.pb-step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: #f6fbf7; }
.pb-step.ko { background: #fff7ed; }
.pb-step.flash { animation: pb-flash 1s ease-out; }
@keyframes pb-flash { from { box-shadow: 0 0 0 4px #c4b5fd; } to { box-shadow: 0 0 0 0 transparent; } }
.pb-n { font-weight: 800; font-size: 1.1rem; width: 22px; text-align: center; }
.pb-step.ok .pb-n { color: #16a34a; } .pb-step.ko .pb-n { color: #ea580c; }
.pb-step > div { flex: 1; }
.pb-q { font-weight: 800; line-height: 1.4; }
.pb-a { font-size: .9rem; color: #5b4a30; margin-top: 2px; }
.pb-step .hint { margin-top: 6px; }
.pb-cur { margin-top: 10px; padding-top: 10px; border-top: 2px dashed #e4dcfa; }
.pb-cur .pb-q { font-size: 1.1rem; margin-bottom: 8px; }
.pb-rule { font-size: .82rem; margin: 4px 0 0; }
.pb-end { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #f0fdf4; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .pb-step.flash { animation: none; } }

/* Prof : problème du jour */
.pb-box { margin: 10px 0 14px; }
.pb-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8f6ff; border: 2px solid #ddd6fe; border-radius: 14px; padding: 10px 14px; }
.pb-sum .on { color: #15803d; } .pb-sum .off { color: #b45309; }
.pbs { border: 2px solid #e8dcc0; border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: #fff; }
.pbs.off { opacity: .6; }
.pbs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbs-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pbs details { margin-top: 6px; } .pbs summary { cursor: pointer; font-weight: 700; color: #6d28d9; }
.pbs ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.pbs-lv { margin: 14px 0 4px; }

/* Conquête : classement des classes */
.cq-rank { font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; border: 2px solid #e0a030; background: linear-gradient(#fff7d6, #ffe7a3); color: #7c4a03; border-radius: 99px; padding: 5px 12px; }
.rank-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #faf6ec; }
.rank-list li.me { background: #fff3c4; border: 2px solid #e0a030; }
.rank-list li.gap { background: none; justify-content: center; color: #9a8a70; }
.home-count { margin-top: 10px; font-weight: 700; color: #3f8a3a; background: #fff; border: 2px solid #cfe6c3; border-radius: 99px; display: inline-block; padding: 5px 14px; }

/* Prof : choix et création des problèmes */
.pb-top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.pb-how { margin: 4px 0 10px; } .pb-how summary { cursor: pointer; font-weight: 700; color: #6d28d9; }
.pb-tabs { display: flex; flex-wrap: wrap; margin-bottom: 8px; }
.pb-tabs small { opacity: .7; font-weight: 700; }
.pb-bulk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pbs.on { border-color: #c4b5fd; } .pbs.off { opacity: .62; }
.pbs-head .switch { flex-shrink: 0; }
.pbe-var { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pbe-var input { width: 90px; } .pbe-var .v-n { width: 70px; font-weight: 800; }
.pbe-step { border: 2px solid #e4dcfa; border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: #fcfbff; }
.pbe-step-h { display: flex; align-items: center; gap: 10px; }
.pbe-step input, .pbe-step textarea { width: 100%; }

.pb-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8f6ff; border: 2px solid #ddd6fe; border-radius: 14px; padding: 10px 14px; }
.pb-banner > span:nth-child(2) { flex: 1 1 220px; }
.pb-banner.done { background: #f0fdf4; border-color: #bbf7d0; }

/* Page d'accueil : vidéo de présentation (repliée) */
.home-video { margin: 22px auto 0; max-width: 760px; text-align: center; }
.home-video video { text-align: left; }
.home-video summary { cursor: pointer; display: inline-block; font-weight: 800; color: #2f6f2b; background: #fff; border: 2px solid #cfe6c3; border-radius: 99px; padding: 7px 16px; list-style: none; }
.home-video summary::-webkit-details-marker { display: none; }
.home-video summary small { font-weight: 600; color: #6b5a3e; }
.home-video[open] summary { margin-bottom: 10px; }
.home-video video { width: 100%; height: auto; display: block; border-radius: 14px; background: #163a2e; box-shadow: 0 10px 30px #0003; }

/* Conquête : espace entre le coup de pouce et « Question suivante » */
.feedback .next-row { margin: 10px 0 0; }
/* Touches utiles au-dessus du clavier des téléphones (/ − ,) */
.math-keys { display: none; gap: 8px; margin: 8px 0 0; }
@media (pointer: coarse) { .math-keys { display: flex; } }
.math-keys button { font: inherit; font-weight: 800; font-size: 1.25rem; min-width: 54px; padding: 6px 12px; border-radius: 10px; border: 2px solid #e8dcc0; background: #fff; color: #3b2f1c; box-shadow: 0 2px 0 #e8dcc0; }
.math-keys button:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Médailles de compétence ---------- */
svg.med { width: 78px; height: 98px; display: block; margin: 0 auto; overflow: visible; }
svg.med.lock { filter: grayscale(1); opacity: .35; }
.ach-seg { margin-bottom: 12px; }
.medal-rules { margin: 4px 0 6px; font-size: .9rem; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.mc { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 6px 8px; text-align: center; }
.mc b { display: block; font-size: .8rem; line-height: 1.2; margin-top: 2px; }
.mc small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.25; }
.mc .mc-next span { white-space: nowrap; }
.mc .bar { height: 6px; background: #eee4cf; border-radius: 6px; margin: 4px 4px 2px; overflow: hidden; }
.mc .bar i { display: block; height: 100%; background: #8b5cf6; }
.medal-new { text-align: center; }
.medal-new + .medal-new { border-top: 2px dashed var(--line); margin-top: 10px; padding-top: 6px; }
.medal-rays { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.medal-rays svg.rays { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fde68a; opacity: .65; animation: medal-spin 14s linear infinite; }
.medal-rays svg.med { position: absolute; left: 36px; top: 12px; width: 108px; height: 135px; }
.medal-name { font-weight: 800; font-size: 1.1rem; margin: 2px 0; }
.medal-name .lv1 { color: #a8642a; } .medal-name .lv2 { color: #7b8494; } .medal-name .lv3 { color: #b98a10; }
@keyframes medal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .medal-rays svg.rays { animation: none; } }
.vitrine { margin-top: 10px; background: #fffaf0; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.vitrine h4 { margin: 0 0 4px; font-size: 1rem; } .vitrine h4 small { color: var(--muted); }
.vitrine-row { display: flex; flex-wrap: wrap; gap: 4px; }
.vitrine-row svg.med { width: 52px; height: 66px; }
svg.mini { width: 24px; height: 30px; display: inline-block; vertical-align: middle; margin-right: -5px; overflow: visible; }
.st-medals { white-space: nowrap; } .st-medals b { margin-left: 8px; }
.sk-detail svg.mini { margin: 0 2px 0 0; }

/* Conquête : en-tête (classement + outils groupés) */
.cq-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: flex-end; }
.cq-tools { display: flex; gap: 6px; }
.cq-tools .btn { margin: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .cq-top h2 { width: 100%; margin-bottom: 0; }
  .cq-actions { width: 100%; justify-content: stretch; }
  .cq-actions .cq-rank { width: 100%; }
  .cq-tools { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .cq-tools .btn { padding-left: 4px; padding-right: 4px; }
  /* le nom du lieu ne chevauche plus « Adversaire n° … » */
  .cq-fight .cq-mhead { padding-top: 26px; }
}

/* ---------- Conquête : combo, assaut groupé, fil du combat, défi, effets ---------- */
.cq-qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.cq-combo { font-size: .95rem; }
.cq-combo b { color: #c2410c; }
.cq-combo small { font-weight: 800; color: #c2410c; background: #ffedd5; border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.cq-combo.up { animation: cq-combo .6s ease-out; display: inline-block; }
@keyframes cq-combo { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cq-hard-tg { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; cursor: pointer; margin: 0; background: #f5f3ff; border: 2px solid #ddd6fe; border-radius: 99px; padding: 3px 12px; }
.cq-hard-tg input { width: auto; margin: 0; }
.cq-hard-tg small { font-weight: 600; color: var(--muted); }
.cq-snd { margin-left: auto; background: none; border: 2px solid var(--line); border-radius: 99px; padding: 2px 10px; cursor: pointer; font-size: 1rem; }
.cq-defi { background: #ede9fe; color: #5b21b6; font-weight: 800; border-radius: 10px; padding: 6px 10px; margin: 4px 0; }
.cq-bonus { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
.cq-bonus i { font-style: normal; font-size: .8rem; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 99px; padding: 0 8px; }
.cq-rally { text-align: center; margin: 6px 0 2px; font-size: .8rem; font-weight: 700; color: #e0e7ff; text-shadow: 0 1px 3px #000; }
.cq-rally .on { display: inline-block; background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; border-radius: 99px; padding: 3px 14px; box-shadow: 0 0 14px #f59e0b99; animation: cq-rally 1.6s ease-in-out infinite; }
@keyframes cq-rally { 50% { box-shadow: 0 0 24px #f59e0bcc; } }
.cq-ticker { text-align: center; min-height: 1.4em; font-weight: 800; color: #fde68a; text-shadow: 0 1px 3px #000; font-size: .85rem; }
.cq-ticker span { animation: cq-tick .5s ease-out; display: inline-block; }
@keyframes cq-tick { from { transform: translateY(6px); opacity: 0; } }
.cq-feed { width: 100%; text-align: left; border-top: 2px dashed var(--line); margin-top: 6px; padding-top: 6px; }
.cq-feed h4 { margin: 0 0 4px; text-align: center; }
.cq-feed ul { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.cq-feed li { padding: 2px 0; border-bottom: 1px solid #f3ead8; }
.cq-feed .d { font-weight: 800; color: #b91c1c; }
.cq-mon.rage svg { filter: drop-shadow(0 0 10px #ef4444) saturate(1.3); animation: cq-rage 1.2s ease-in-out infinite; }
@keyframes cq-rage { 50% { filter: drop-shadow(0 0 22px #ef4444) saturate(1.5); } }
.dmg.big { font-size: 2.4rem; }
.cq-fight.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0, #fff0 70%); opacity: 0; animation: cq-flash .45s ease-out; pointer-events: none; z-index: 5; }
@keyframes cq-flash { 20% { opacity: .85; } 100% { opacity: 0; } }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.modal-bg > .confetti { position: fixed; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { top: 105%; transform: translateX(40px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .cq-rally .on, .cq-mon.rage svg, .cq-combo.up, .cq-fight.flash::after, .cq-ticker span { animation: none; } }

.pill.adv { background: #f5f3ff; color: #6d28d9; }

/* ---------- Conquête : mon combattant et armurerie ---------- */
.hero-card { display: flex; gap: 16px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.hero-masc { width: 130px; height: 130px; flex: 0 0 auto; background: radial-gradient(circle at 50% 60%, #fef3c7, #fff 70%); border-radius: 50%; }
.hero-info { flex: 1; min-width: 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: .92rem; }
.hero-stats b { color: #b91c1c; }
.hero-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-slot { border: 2px solid var(--line); border-radius: 12px; padding: 6px; text-align: center; background: #fffaf0; }
.hero-slot svg { width: 52px; height: 52px; display: block; margin: 0 auto; }
.hero-slot small { display: block; color: var(--muted); font-size: .72rem; } .hero-slot b { font-size: .8rem; }
.hero-slot.empty { opacity: .55; border-style: dashed; }
.arm-top { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 800; margin-bottom: 4px; }
.arm-h { margin: 12px 0 6px; }
.arm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.arm-item { border: 2px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.arm-item svg { width: 72px; height: 72px; }
.arm-item small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.arm-item.on { border-color: var(--green); background: #f0fdf4; }
.arm-item.lock svg { filter: grayscale(1); opacity: .45; }
.arm-state { color: var(--green-d); font-weight: 800; font-size: .85rem; }
.arm-lock { font-size: .76rem; font-weight: 700; color: #92400e; }
@media (max-width: 640px) { .hero-card { flex-direction: column; text-align: center; } .hero-stats { justify-content: center; } }

/* ---- Temps de jeu par jour ---- */
.play-badge { background: #e0f2fe; color: #075985; padding: 4px 10px; border-radius: 99px; font-size: 14px; white-space: nowrap; box-shadow: 0 2px 0 #7dd3fc; cursor: help; }
.play-badge.low { background: #ffedd5; color: #9a3412; box-shadow: 0 2px 0 #fdba74; animation: play-pulse 1.6s ease-in-out infinite; }
.play-badge.over { background: #ede9fe; color: #5b21b6; box-shadow: 0 2px 0 #c4b5fd; }
@keyframes play-pulse { 50% { transform: scale(1.08); } }
body.play-over .tabs button[data-tab="edit"], body.play-over .tabs button[data-tab="shop"], body.play-over .tabs button[data-tab="conquest"] { filter: grayscale(1); opacity: .55; }
body.play-over .tabs button[data-tab="edit"]::before, body.play-over .tabs button[data-tab="shop"]::before { content: '😴 '; }
.tired { text-align: center; }
.tired-ico { font-size: 54px; animation: play-pulse 2.4s ease-in-out infinite; }
.pl-cell { white-space: nowrap; }
.pl-cell .pl-over { color: var(--red); font-weight: 800; }
.pl-cell .btn.sm { padding: 2px 7px; margin-left: 4px; }
.pl-box { margin-top: 18px; }
.pl-box .row { align-items: center; flex-wrap: wrap; gap: 6px; }
.pl-box input { width: 90px; }
@media (max-width: 600px) { .play-badge { font-size: 12px; padding: 3px 7px; } }
@media (prefers-reduced-motion: reduce) { .play-badge.low, .tired-ico { animation: none; } }

/* ---- Réactions au message du prof ---- */
.announce .grow { flex: 1; min-width: 0; }
.reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.react { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 1.15rem; line-height: 1; padding: 5px 9px; border-radius: 99px; background: #fff8; border: 2px solid #f2b70588; color: #4a3500; }
.react b { font-size: .85rem; }
button.react { cursor: pointer; transition: transform .12s, background .12s; }
button.react:hover { transform: scale(1.1); background: #fff; }
button.react.on { background: #fff; border-color: #c98f00; box-shadow: 0 2px 0 #c98f00; }
button.react.on b { color: #9a5b00; }
button.react:disabled { opacity: .6; }
.board-side .react { font-size: 1.4rem; }
.an-reacts { margin-top: 8px; }
.an-react { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.an-react .react { background: #fff6d6; flex: none; }
.an-keep { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { button.react { transition: none; } button.react:hover { transform: none; } }

/* ---- Accueil : chiffres et aide à l'inscription ---- */
.home-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.home-counts .home-count { margin-top: 0; }
.home-count.live { display: inline-flex; align-items: center; gap: 6px; }
.reg-help { font-size: .88rem; background: #fff6d6; border: 2px solid #f2d27a; border-radius: 10px; padding: 7px 10px; margin: 6px 0 0; color: #5c4400; }
.home-count.live .online { margin-right: 0; }

/* ---- Prof : liste des succès ---- */
.ach-head { align-items: center; }
.ach-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ach-pl { display: grid; gap: 8px; }
.ach-pl-row { display: grid; grid-template-columns: auto 1fr 170px; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ach-pl-row:not(.got) .medal { filter: grayscale(.8); opacity: .65; }
.ach-pl-row.got { border-color: #f2d27a; background: #fffbea; }
.ach-pl-txt { display: flex; flex-direction: column; min-width: 0; }
.ach-pl-txt small { color: var(--muted, #6b5a3e); }
.ach-pl-rw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ach-pl-rw svg.ico { width: 22px; height: 22px; vertical-align: middle; }
.ach-pl-bar { height: 8px; background: #eee3c8; border-radius: 99px; overflow: hidden; margin-bottom: 3px; }
.ach-pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2b705, #f97316); border-radius: 99px; }
.ach-pl-who details summary { cursor: pointer; font-size: .82rem; color: #2f6f2b; font-weight: 700; }
.badges span[title] { cursor: help; }
@media (max-width: 600px) { .ach-pl-row { grid-template-columns: auto 1fr; } .ach-pl-who { grid-column: 1 / -1; } }
.pill.lesson { background: #ecfeff; color: #0e7490; }

/* ---- Réviser, Revoir la leçon, Mon cahier ---- */
.rev-btn { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 3px 0 #6d28d9; }
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rev-head b { font-size: 1.15rem; color: #6d28d9; }
.rev-weak { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.rev-weak small { width: 100%; color: #6b5a3e; }
.rev-chip { background: #f5f3ff; color: #5b21b6; border: 1.5px solid #ddd6fe; border-radius: 99px; padding: 3px 10px; font-size: .85rem; }
.rev-chip b { color: #be123c; }
.rev-none { background: #ecfdf5; border-radius: 10px; padding: 8px 12px; color: #065f46; }
.bonus-label.rev { color: #6d28d9; }
.lesson-btn { margin-top: 8px; }
.lesson-tag { display: inline-block; background: #ecfeff; color: #0e7490; border-radius: 99px; padding: 2px 10px; font-size: .82rem; font-weight: 700; margin: 0 0 8px; }
.lesson-rule { background: #fff7d6; border: 2px solid #f2d27a; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.lesson-rule p { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.45; }
.lesson-ex { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.lesson-ex .qtext { font-size: 1.05rem; margin: 6px 0; }
.lesson-ex .choices { pointer-events: none; }
.lesson-ans { margin: 8px 0 0; color: #15803d; }
.nb-list { display: grid; gap: 6px; }
.nb-row { display: grid; grid-template-columns: 1fr 110px 44px 26px; gap: 8px; align-items: center; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; font: inherit; color: inherit; }
.nb-row:hover { border-color: #0e7490; }
.nb-bar { height: 8px; background: #eee3c8; border-radius: 99px; overflow: hidden; }
.nb-bar i { display: block; height: 100%; border-radius: 99px; }
.nb-bar i.hi { background: #22c55e; } .nb-bar i.mid { background: #f59e0b; } .nb-bar i.lo { background: #ef4444; }
@media (max-width: 520px) { .nb-row { grid-template-columns: 1fr 60px 40px 22px; } }

/* ---- Onglet Réviser ---- */
.rv-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; border-radius: 18px; padding: 16px 20px;
  background: linear-gradient(135deg, #6d28d9, #9333ea 55%, #db2777); box-shadow: 0 4px 0 #4c1d95; margin-bottom: 18px; }
.rv-hero h2 { margin: 0 0 4px; color: #fff; }
.rv-hero p { margin: 0 0 6px; opacity: .95; }
.rv-hero small { color: #fff; opacity: .95; font-weight: 600; }
.rv-hero .coin { color: #fff; }
.rv-hero-t { flex: 1; min-width: 220px; }
.rv-go { font-size: 1.1rem; padding: 12px 20px; }
.rv-h { margin: 16px 0 8px; } .rv-h small { color: #6b5a3e; font-weight: 600; font-size: .85rem; }
.rv-weak { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rv-card { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.rv-card-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.rv-card-t small { color: #6b5a3e; }
.rv-card-b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rv-ring { --c: #ef4444; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 78%), conic-gradient(var(--c) calc(var(--p) * 1%), #eee3c8 0); }
.rv-ring.mid { --c: #f59e0b; } .rv-ring.hi { --c: #22c55e; }
.rv-ring b { font-size: .85rem; }
.rv-none { background: #ecfdf5; border-radius: 12px; padding: 10px 14px; color: #065f46; }
.rv-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rv-doms { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.rv-filters input { max-width: 240px; }
.nb-row { display: grid; grid-template-columns: 1fr 110px 44px auto; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.nb-acts { display: flex; gap: 4px; }
.nb-acts .btn.sm { padding: 3px 8px; }
.rv-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #f5f3ff; border: 2px solid #ddd6fe; border-radius: 12px; padding: 8px 12px; color: #5b21b6; }
.rv-coins { text-align: center; margin: 6px 0 0; }
.rv-q { max-width: 640px; margin: 0 auto; text-align: center; }
.rv-notion { display: inline-block; background: #ecfeff; color: #0e7490; border-radius: 99px; padding: 3px 12px; font-weight: 800; font-size: .9rem; margin: 14px 0 0; }
.rv-invite { text-align: center; margin-top: 8px; }
@media (max-width: 560px) { .nb-row { grid-template-columns: 1fr auto auto; } .nb-row .nb-bar { display: none; } .rv-filters input { max-width: none; width: 100%; }
  .rv-doms { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .rv-doms .chip { flex: none; } }

/* ---- Conquête : messages d'encouragement de la mascotte ---- */
.cq-cheer { min-height: 0; }
.cheer { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 8px; animation: cheer-in .35s ease-out; }
.cheer.out { opacity: 0; transform: translateY(-6px); transition: opacity .5s, transform .5s; }
.cheer-m { width: 54px; height: 54px; flex: none; animation: cheer-hop 1.2s ease-in-out 2; }
.cheer-b { position: relative; background: #fff; border: 2.5px solid #7c3aed; border-radius: 16px; padding: 8px 12px; font-weight: 800; color: #3b0764; box-shadow: 0 3px 0 #c4b5fd; line-height: 1.3; }
.cheer-b::before { content: ''; position: absolute; left: -10px; bottom: 12px; border: 6px solid transparent; border-right: 8px solid #7c3aed; }
@keyframes cheer-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cheer-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cq-sold { position: relative; }
.cq-say { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; z-index: 5; margin-bottom: 4px;
  background: #fff; border: 2px solid #f59e0b; color: #78350f; font-size: .78rem; font-weight: 800; font-style: normal; line-height: 1.25; padding: 5px 8px; border-radius: 12px;
  box-shadow: 0 2px 6px #0003; animation: cheer-in .35s ease-out; white-space: normal; text-align: center; }
.cq-say::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #f59e0b; }
.cq-say-t { color: #b45309; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .cheer, .cheer-m, .cq-say { animation: none; } }

/* ---- Invitation à rejoindre la Conquête ---- */
#cq-invite { display: flex; gap: 6px; align-items: stretch; margin: 8px 16px 0; animation: cheer-in .4s ease-out; }
#cq-invite[hidden] { display: none; }
.cqi { flex: 1; display: flex; align-items: center; gap: 12px; justify-content: space-between; text-align: left; cursor: pointer; font: inherit; color: #fff;
  border: 0; border-radius: 14px; padding: 10px 14px; background: linear-gradient(135deg, #6d28d9, #db2777 60%, #f59e0b); box-shadow: 0 3px 0 #4c1d95; font-weight: 800; }
.cqi-t { flex: 1; text-shadow: 0 1px 1px #0004; }
.cqi-go { flex: none; background: #fff; color: #6d28d9; border-radius: 99px; padding: 6px 12px; font-size: .9rem; animation: cqi-pulse 1.6s ease-in-out infinite; }
.cqi-x { flex: none; border: 0; border-radius: 12px; background: #ede9fe; color: #5b21b6; font-weight: 800; padding: 0 12px; cursor: pointer; }
@keyframes cqi-pulse { 50% { transform: scale(1.07); } }
@media (max-width: 560px) { #cq-invite { margin: 6px 8px 0; } .cqi { flex-direction: column; align-items: stretch; text-align: center; gap: 6px; padding: 8px 10px; font-size: .9rem; } .cqi-go { align-self: center; padding: 4px 12px; } .cqi-x { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { #cq-invite, .cqi-go { animation: none; } }